chore(checkout): React hooks linting

examples/_deprecated/checkout-widget/basic-react/package.json

@@ -23,7 +23,7 @@
     "@typescript-eslint/parser": "^7.11.0",
     "@vitejs/plugin-react": "^4.3.0",
     "eslint": "^8.57.0",
-    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.7",
     "typescript": "^5.2.2",
     "vite": "^5.2.14",

examples/_deprecated/checkout-widget/passport-integration-react/package.json

@@ -22,7 +22,7 @@
     "@vitejs/plugin-react": "^4.3.0",
     "eslint": "^8.57.0",
     "eslint-plugin-react": "^7.34.1",
-    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.7",
     "vite": "^5.2.14",
     "vite-plugin-node-polyfills": "^0.22.0"

examples/_deprecated/free-mint-with-minting-backend/frontend/package.json

@@ -34,7 +34,7 @@
     "@typescript-eslint/parser": "^7.1.1",
     "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^8.57.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.7",
     "typescript": "^5.2.2",
     "vite": "^5.2.14",

packages/checkout/widgets-lib/.eslintrc.cjs

@@ -1,5 +1,8 @@
 module.exports = {
-  "extends": ["../../../.eslintrc"],
+  "extends": [
+    "../../../.eslintrc",
+    "plugin:react-hooks/recommended-legacy"
+  ],
   "ignorePatterns": ["jest.config.*", "rollup.config.*"],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {

packages/checkout/widgets-lib/package.json

@@ -65,6 +65,7 @@
     "@types/react-dom": "^18.3.0",
     "@types/uuid": "^8.3.4",
     "eslint": "^8.40.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
     "jest": "^29.4.3",
     "jest-environment-jsdom": "^29.4.3",
     "react-scripts": "5.0.1",

packages/checkout/widgets-lib/src/components/CoinSelector/CoinSelector.tsx

@@ -43,6 +43,7 @@ export function CoinSelector({
       return options;
     }
     return filterOptions(searchValue, options);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [options, searchValue, filterOptions]);
 
   const handleCloseDrawer = () => {

packages/checkout/widgets-lib/src/components/ConnectLoader/ConnectLoader.tsx

@@ -239,6 +239,7 @@ export function ConnectLoader({
         });
       }
     })();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [checkout, walletProviderName, browserProvider]);
 
   return (

packages/checkout/widgets-lib/src/components/FormComponents/SelectForm/SelectForm.tsx

@@ -56,6 +56,7 @@ export function SelectForm({
       onSelectChange(option.id);
       setCoinSelectorOpen(false);
     },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   })), [options, onSelectChange, setCoinSelectorOpen]);
 
   const getSelectedOption = () => {
@@ -76,6 +77,7 @@ export function SelectForm({
       controlType: 'Select',
       action: 'Opened',
     });
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [setCoinSelectorOpen, track]);
 
   return (

packages/checkout/widgets-lib/src/components/NetworkSwitchDrawer/NetworkSwitchDrawer.tsx

@@ -91,6 +91,7 @@ export function NetworkSwitchDrawer({
     switchNetworkEthImage.src = ethImageUrl;
     const switchNetworkzkEVMImage = new Image();
     switchNetworkzkEVMImage.src = zkevmImageUrl;
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (

packages/checkout/widgets-lib/src/components/RouteFees/RouteFees.tsx

@@ -37,6 +37,7 @@ export function RouteFees({
       },
       prefix: '',
     })) ?? [],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [routeData],
   );
 
@@ -54,6 +55,7 @@ export function RouteFees({
       },
       prefix: '',
     })) ?? [],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [routeData],
   );
 

packages/checkout/widgets-lib/src/components/RouteOptionsDrawer/RouteOptionsDrawer.tsx

@@ -78,6 +78,7 @@ export function RouteOptionsDrawer({
         routesAvailable: routes?.length ?? 0,
       },
     });
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [visible]);
 
   return (

packages/checkout/widgets-lib/src/components/SelectedRouteOption/SelectedRouteOption.tsx

@@ -90,6 +90,7 @@ export function SelectedRouteOption({
       onClick?.(event);
       return true;
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [onClick, loading, routeData],
   );
 

packages/checkout/widgets-lib/src/components/Status/StatusView.tsx

@@ -40,6 +40,7 @@ export function StatusView({
       firstRender.current = false;
       onRenderEvent();
     }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [firstRender.current, onRenderEvent]);
 
   const onStatusActionClick = () => {

packages/checkout/widgets-lib/src/components/TokenImage/TokenImage.tsx

@@ -29,6 +29,7 @@ export function TokenImage({
           || (theme && getDefaultTokenImage(environment, theme))
           || ''
       : src),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [src, error],
   );
 

packages/checkout/widgets-lib/src/components/Transactions/ChangeWallet.tsx

@@ -54,6 +54,7 @@ export function ChangeWallet({ onChangeWalletClick }: ChangeWalletProps) {
         })();
       }
     }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isWalletConnectEnabled, from]);
 
   return (

packages/checkout/widgets-lib/src/components/Transactions/ClaimWithdrawalInProgress.tsx

@@ -21,6 +21,7 @@ export function ClaimWithdrawalInProgress({ transactionResponse }: ClaimWithdraw
       userJourney: UserJourney.BRIDGE,
       screen: 'ClaimWithdrawalInProgress',
     });
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   useEffect(() => {
@@ -68,6 +69,7 @@ export function ClaimWithdrawalInProgress({ transactionResponse }: ClaimWithdraw
         });
       }
     })();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [transactionResponse]);
 
   return <LoadingView loadingText={t('views.CLAIM_WITHDRAWAL.IN_PROGRESS.loading.text')} />;

packages/checkout/widgets-lib/src/components/Transactions/NoTransactions.tsx

@@ -38,6 +38,7 @@ export function NoTransactions(
       userJourney: UserJourney.BRIDGE,
       screen: 'NoTransactions',
     });
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (

packages/checkout/widgets-lib/src/components/Transactions/TransactionItemWithdrawPending.tsx

@@ -68,13 +68,15 @@ export function TransactionItemWithdrawPending({
     }
     const timeDiffDays = timeDiffHours / 24; // days
     return relativeTimeFormat.format(Math.ceil(timeDiffDays), 'day');
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [dateNowUnixMs, translation[1].language]);
 
   const withdrawalReadyToClaim = withdrawalReadyDate ? withdrawalReadyDate.getTime() < dateNowUnixMs : false;
   const actionMessage = useMemo(
     () => (withdrawalReadyToClaim === true
       ? translation.t('views.TRANSACTIONS.status.withdrawalPending.withdrawalReadyText')
       : `${translation.t('views.TRANSACTIONS.status.withdrawalPending.withdrawalDelayText')} ${delayTimeString}`),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [delayTimeString, translation[1].language],
   );
 

packages/checkout/widgets-lib/src/components/Transactions/Transactions.tsx

@@ -284,6 +284,7 @@ export function Transactions({
         setShowWalletDrawer(false);
       }
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [checkout],
   );
 
@@ -330,6 +331,7 @@ export function Transactions({
       tokens: await getTokensDetails(tokensWithChainSlug),
       transactions: localTxs.result,
     };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [from, getTransactionsDetails]);
 
   const { providers } = useInjectedProviders({ checkout });
@@ -360,13 +362,15 @@ export function Transactions({
 
       setLoading(false);
     })();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [from, checkout]);
 
   useEffect(() => {
     page({
       userJourney: UserJourney.BRIDGE,
       screen: 'Transactions',
     });
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (

packages/checkout/widgets-lib/src/components/Transak/useTransakEvents.ts

@@ -114,6 +114,7 @@ export const useTransakEvents = (props: UseTransakEventsProps) => {
         },
       });
     }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const handleEvents = useCallback((event: TransakEvent) => {
@@ -141,6 +142,7 @@ export const useTransakEvents = (props: UseTransakEventsProps) => {
       default:
         break;
     }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const handleMessageEvent = useCallback(
@@ -156,6 +158,7 @@ export const useTransakEvents = (props: UseTransakEventsProps) => {
 
       console.log('@@@ Transak event', event); // eslint-disable-line no-console
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [ref],
   );
 
@@ -165,6 +168,7 @@ export const useTransakEvents = (props: UseTransakEventsProps) => {
       clearTimeout(timeout.current);
       window.removeEventListener('message', handleMessageEvent);
     };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return {

packages/checkout/widgets-lib/src/components/Transak/useTransakIframe.ts

@@ -131,6 +131,7 @@ export const useTransakIframe = (props: UseTransakIframeProps) => {
       const checkoutUrl = await getNFTCheckoutURL();
       setIframeSrc(checkoutUrl);
     })();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return { iframeSrc };

packages/checkout/widgets-lib/src/components/WalletDrawer/PayWithWalletDrawer.tsx

@@ -62,6 +62,7 @@ export function PayWithWalletDrawer({
         <MenuItem.Label>{t('drawers.wallet.payWithCard')}</MenuItem.Label>
       </MenuItem>
     );
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [onClose, onPayWithCard]);
 
   return (

packages/checkout/widgets-lib/src/context/analytics-provider/SetupAnalytics.tsx

@@ -28,6 +28,7 @@ export function SetupAnalytics(
       if (!config) return;
       updateWriteKey(config.segmentPublishableKey);
     })();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [telemetry]);
 
   // eslint-disable-next-line react/jsx-no-useless-fragment

packages/checkout/widgets-lib/src/context/crypto-fiat-context/CryptoFiatProvider.tsx

@@ -35,6 +35,7 @@ export function CryptoFiatProvider({ environment, children }: CryptoFiatProvider
         })),
       },
     });
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   useEffect(() => {

packages/checkout/widgets-lib/src/context/crypto-fiat-context/test-components/CryptoFiatTestComponent.tsx

@@ -17,6 +17,7 @@ export function CryptoFiatTestComponent({ tokenSymbols }: CryptoFiatTestComponen
         },
       });
     })();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [cryptoFiatDispatch]);
 
   return (

packages/checkout/widgets-lib/src/context/handover-context/HandoverProvider.tsx

@@ -104,6 +104,7 @@ export function HandoverProvider({ children }: HandoverProviderProps) {
     [handoverQueue, handoverBusy, handovers, closeHandover],
   );
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const addHandover = (
     handoverContent: HandoverContent,
     handoverId: HandoverTarget = HandoverTarget.GLOBAL,

packages/checkout/widgets-lib/src/context/providers-context/ProvidersContext.tsx

@@ -194,6 +194,7 @@ export function ProvidersContextProvider({
         /** TODO: handle error */
       }
     })();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [toProvider, providersState.lockedToProvider]);
 
   return (

packages/checkout/widgets-lib/src/hooks/useMount.ts

@@ -29,5 +29,6 @@ export const useMount = (
 
     fn();
     isMounted.current = true;
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, deps || []);
 };

packages/checkout/widgets-lib/src/lib/hooks/useAsyncMemo.ts

@@ -20,6 +20,7 @@ export const useAsyncMemo = <T>(
     return () => {
       isMounted = false;
     };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, dependencies);
 
   return value as T;

packages/checkout/widgets-lib/src/lib/hooks/useBalance.ts

@@ -56,6 +56,7 @@ export const useBalance = ({
         setBalancesLoading(false);
       }
     }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [checkout, provider]);
 
   useInterval(() => refreshBalances(true), REFRESH_BALANCE_INTERVAL_MS);

packages/checkout/widgets-lib/src/lib/hooks/useInjectedProviders.ts

@@ -102,6 +102,7 @@ export const useInjectedProviders = ({ checkout }: UseInjectedProvidersParams) =
 
     filterAndProcessProviders(injectedProviders);
     return () => cancelSubscription();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [checkout]);
 
   return {

packages/checkout/widgets-lib/src/lib/hooks/useQuoteOrder.ts

@@ -143,6 +143,7 @@ export const useQuoteOrder = ({
         fetching.current = false;
       }
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [environment, environmentId, preferredCurrency, fetching],
   );
 

packages/checkout/widgets-lib/src/lib/hooks/useSignOrder.ts

@@ -290,6 +290,7 @@ export const useSignOrder = (input: SignOrderInput) => {
       }
       return undefined;
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [items, environmentId, environment, provider],
   );
 
@@ -393,6 +394,7 @@ export const useSignOrder = (input: SignOrderInput) => {
       }
       return undefined;
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [items, environmentId, environment, provider, getPostHooks],
   );
 
@@ -473,6 +475,7 @@ export const useSignOrder = (input: SignOrderInput) => {
 
       return executeResponse.transactions;
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [
       provider,
       executeTransaction,
@@ -517,6 +520,7 @@ export const useSignOrder = (input: SignOrderInput) => {
 
       return success;
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [currentTransactionIndex, provider, filteredTransactions],
   );
 

packages/checkout/widgets-lib/src/lib/hooks/useWalletConnect.ts

@@ -145,6 +145,7 @@ export const useWalletConnect = () => {
         openModal(ethereumProvider, resolve, reject);
       }
     });
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [ethereumProvider, walletConnectModal, isWalletConnectEnabled]);
 
   const getWalletLogoUrl = useCallback(async () => await WalletConnectManager.getInstance().getWalletLogoUrl(), []);

packages/checkout/widgets-lib/src/lib/squid/hooks/useRouteCalculation.ts

@@ -56,5 +56,6 @@ export const useRouteCalculation = () => {
     calculateFromAmount,
     calculateFromAmountFromRoute,
     convertToFormattedFromAmount,
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }), []);
 };

packages/checkout/widgets-lib/src/lib/squid/hooks/useSlippage.ts

@@ -41,5 +41,6 @@ export const useSlippage = () => {
   return useMemo(() => ({
     getSlippageTier,
     calculateAdjustedAmount,
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }), []);
 };