Fixing exhaustive-deps lint errors for hooks

wormhole-connect/.eslintrc.strict.json

@@ -12,12 +12,13 @@
     "prettier"
   ],
   "rules": {
-    "comma-dangle": ["error", "always-multiline"],
-    "semi": ["error", "always"],
-    "@typescript-eslint/no-explicit-any": ["error", { "ignoreRestArgs": true }],
     "@typescript-eslint/explicit-module-boundary-types": ["error"],
+    "@typescript-eslint/no-explicit-any": ["error", { "ignoreRestArgs": true }],
     "@typescript-eslint/no-non-null-assertion": ["error"],
+    "@typescript-eslint/no-unused-vars": ["warn", { "args": "none" }],
+    "comma-dangle": ["error", "always-multiline"],
     "no-unused-vars": "off",
-    "@typescript-eslint/no-unused-vars": ["warn", { "args": "none" }]
+    "react-hooks/exhaustive-deps": ["error"],
+    "semi": ["error", "always"]
   }
 }

wormhole-connect/src/hooks/useAvailableWallets.ts

@@ -64,7 +64,7 @@ export const useAvailableWallets = (props: Props): ReturnProps => {
           });
         }
       } catch (e) {
-        console.error(`Error loading wallet options for ${props.chain}: ${e}`);
+        console.error(`Error loading wallet options for ${chain}: ${e}`);
         setWalletOptionsResult({ state: 'error', error: FAILED_TO_LOAD_ERR });
       }
     })();

wormhole-connect/src/hooks/useComputeFees.ts

@@ -141,6 +141,7 @@ const useComputeFees = (props: Props): returnProps => {
     sourceChain,
     destChain,
     tokenPrices,
+    getEstimatedTime,
   ]);
 
   return {

wormhole-connect/src/hooks/useComputeSourceTokens.ts

@@ -70,8 +70,11 @@ const useComputeSourceTokens = (props: Props): ReturnProps => {
     return () => {
       active = false;
     };
-    // IMPORTANT: do not include token in dependency array
-  }, [route, sourceChain, destToken, dispatch]);
+    // IMPORTANT: do not include sourceToken in dependency array,
+    // because it's not needed and it will also cause an extra round unnecessary updates when the side-affect automatically sets the sourceToken.
+    // Please See dispatch(setToken(...)) calls above.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [destChain, destToken, dispatch, route, sourceChain]);
 
   return { isFetching };
 };

wormhole-connect/src/hooks/useFetchRedeemTx.ts

@@ -65,7 +65,7 @@ const useFetchRedeemTx = (): void => {
     return () => {
       isActive = false;
     };
-  }, [receipt]);
+  }, [dispatch, receipt]);
 };
 
 export default useFetchRedeemTx;

wormhole-connect/src/hooks/useGetTokenBalances.ts

@@ -163,7 +163,7 @@ const useGetTokenBalances = (
     return () => {
       isActive = false;
     };
-  }, [cachedBalances, walletAddress, chain, tokens]);
+  }, [cachedBalances, chain, dispatch, tokens, walletAddress]);
 
   return { isFetching, balances };
 };

wormhole-connect/src/hooks/useRoutesQuotesBulk.ts

@@ -100,8 +100,11 @@ const useRoutesQuotesBulk = (routes: string[], params: Params): HookReturn => {
         clearTimeout(refreshTimeout);
       }
     };
+    // Important: We should not include routes property in deps. See routes.join() below.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
-    routes.join(),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    routes.join(), // .join() is necessary to prevent unncessary updates when routes array's ref changed but its content did not
     params.sourceChain,
     params.sourceToken,
     params.destChain,
@@ -110,6 +113,8 @@ const useRoutesQuotesBulk = (routes: string[], params: Params): HookReturn => {
     params.nativeGas,
     nonce,
     isTransactionInProgress,
+    params,
+    refreshTimeout,
   ]);
 
   const quotesMap = useMemo(
@@ -118,7 +123,12 @@ const useRoutesQuotesBulk = (routes: string[], params: Params): HookReturn => {
         acc[route] = quotes[index];
         return acc;
       }, {} as Record<string, QuoteResult | undefined>),
-    [routes.join(), quotes],
+    [
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      routes.join(), // .join() is necessary to prevent unncessary updates when routes array's ref changed but its content did not
+      routes,
+      quotes,
+    ],
   );
 
   // Filter out quotes that would result in a large instant loss

wormhole-connect/src/hooks/useSortedRoutesWithQuotes.ts

@@ -55,7 +55,7 @@ export const useSortedRoutesWithQuotes = (): HookReturn => {
       destToken,
       nativeGas: toNativeToken,
     }),
-    [parseFloat(amount), fromChain, token, toChain, destToken, toNativeToken],
+    [amount, fromChain, token, toChain, destToken, toNativeToken],
   );
 
   const { quotesMap, isFetching } = useRoutesQuotesBulk(
@@ -122,7 +122,7 @@ export const useSortedRoutesWithQuotes = (): HookReturn => {
       // Returning BigInt results in TypeError
       return Number(destAmountB - destAmountA);
     });
-  }, [routesWithQuotes]);
+  }, [preferredRouteName, routesWithQuotes]);
 
   const sortedRoutes = useMemo(
     () => sortedRoutesWithQuotes.map((r) => r.route),
@@ -137,6 +137,12 @@ export const useSortedRoutesWithQuotes = (): HookReturn => {
       quotesMap,
       isFetchingQuotes: isFetching,
     }),
-    [supportedRoutes, sortedRoutesWithQuotes, quotesMap, isFetching],
+    [
+      supportedRoutes,
+      sortedRoutes,
+      sortedRoutesWithQuotes,
+      quotesMap,
+      isFetching,
+    ],
   );
 };

wormhole-connect/src/hooks/useTransactionHistory.ts

@@ -98,7 +98,7 @@ const useTransactionHistory = (
     if (hasMoreWHScan && whScanPage !== page) {
       setWHScanPage(page);
     }
-  }, [hasMoreMayan, hasMoreWHScan, page]);
+  }, [hasMoreMayan, hasMoreWHScan, mayanPage, page, whScanPage]);
 
   // Side-effect to merge transactions in time-order whenever there is new data
   useEffect(() => {
@@ -180,6 +180,8 @@ const useTransactionHistory = (
     updateMayanIndex(mayanLocalIdx);
     // Append the merged transactions and exit
     setTransactions((txs) => appendTxs(txs, mergedTxs));
+    // We only need to re-run this side-effect when either of the transaction data changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [whScanTxs, mayanTxs]);
 
   return {

wormhole-connect/src/hooks/useTransactionHistoryMayan.ts

@@ -192,7 +192,7 @@ const useTransactionHistoryMayan = (
     return () => {
       cancelled = true;
     };
-  }, [page, pageSize]);
+  }, [address, page, pageSize, parseTransactions]);
 
   return {
     transactions,

wormhole-connect/src/hooks/useTransactionHistoryWHScan.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import {
   amount as sdkAmount,
   chainIdToChain,
@@ -118,7 +118,10 @@ const useTransactionHistoryWHScan = (
 
   const { address, page = 0, pageSize = 30 } = props;
 
-  const parseSingleTx = (tx: WormholeScanTransaction) => {
+  // Common parsing logic for a single transaction from WHScan API.
+  // IMPORTANT: Anything specific to a route, please use that route's parser:
+  // parseTokenBridgeTx | parseNTTTx | parseCCTPTx | parsePorticoTx
+  const parseSingleTx = useCallback((tx: WormholeScanTransaction) => {
     const { content, data, sourceChain, targetChain } = tx;
     const { tokenAmount, usdAmount } = data || {};
     const { standarizedProperties } = content || {};
@@ -219,97 +222,115 @@ const useTransactionHistoryWHScan = (
     };
 
     return txData;
-  };
+  }, []);
 
   // Parser for Portal Token Bridge transactions (appId === PORTAL_TOKEN_BRIDGE)
   // IMPORTANT: This is where we can add any customizations specific to Token Bridge data
   // that we have retrieved from WHScan API
-  const parseTokenBridgeTx = (tx: WormholeScanTransaction) => {
-    return parseSingleTx(tx);
-  };
+  const parseTokenBridgeTx = useCallback(
+    (tx: WormholeScanTransaction) => {
+      return parseSingleTx(tx);
+    },
+    [parseSingleTx],
+  );
 
   // Parser for NTT transactions (appId === NATIVE_TOKEN_TRANSFER)
   // IMPORTANT: This is where we can add any customizations specific to NTT data
   // that we have retrieved from WHScan API
-  const parseNTTTx = (tx: WormholeScanTransaction) => {
-    return parseSingleTx(tx);
-  };
+  const parseNTTTx = useCallback(
+    (tx: WormholeScanTransaction) => {
+      return parseSingleTx(tx);
+    },
+    [parseSingleTx],
+  );
 
   // Parser for CCTP transactions (appId === CCTP_WORMHOLE_INTEGRATION)
   // IMPORTANT: This is where we can add any customizations specific to CCTP data
   // that we have retrieved from WHScan API
-  const parseCCTPTx = (tx: WormholeScanTransaction) => {
-    return parseSingleTx(tx);
-  };
+  const parseCCTPTx = useCallback(
+    (tx: WormholeScanTransaction) => {
+      return parseSingleTx(tx);
+    },
+    [parseSingleTx],
+  );
 
   // Parser for Portico transactions (appId === ETH_BRIDGE or USDT_BRIDGE)
   // IMPORTANT: This is where we can add any customizations specific to Portico data
   // that we have retrieved from WHScan API
-  const parsePorticoTx = (tx: WormholeScanTransaction) => {
-    const txData = parseSingleTx(tx);
-    if (!txData) return;
-
-    const payload = tx.content.payload
-      .parsedPayload as unknown as WormholeScanPorticoParsedPayload;
-
-    const {
-      finalTokenAddress,
-      flagSet,
-      minAmountFinish,
-      recipientAddress,
-      relayerFee,
-    } = payload;
-
-    const nativeTokenKey = getNativeVersionOfToken(
-      tx.data.symbol,
-      txData.fromChain,
-    );
-    const nativeToken = config.tokens[nativeTokenKey];
-    if (!nativeToken) return;
-
-    const startToken = flagSet.flags.shouldWrapNative
-      ? getGasToken(txData.fromChain)
-      : nativeToken;
-
-    const finalTokenConfig = config.sdkConverter.findTokenConfigV1(
-      Wormhole.tokenId(
-        txData.toChain,
-        toNative(txData.toChain, finalTokenAddress).toString(),
-      ),
-      config.tokensArr,
-    );
-    if (!finalTokenConfig) return;
-
-    const receiveAmount = BigInt(minAmountFinish) - BigInt(relayerFee);
-
-    // Override with Portico specific data
-    txData.tokenKey = startToken.key;
-    txData.tokenAddress = startToken.tokenId?.address || 'native';
-    txData.receivedTokenKey = flagSet.flags.shouldUnwrapNative
-      ? getGasToken(txData.toChain).key
-      : finalTokenConfig.key;
-    txData.receiveAmount =
-      receiveAmount > 0
-        ? toFixedDecimals(
-            sdkAmount.display(
-              sdkAmount.fromBaseUnits(receiveAmount, finalTokenConfig.decimals),
-              0,
-            ),
-            DECIMALS,
-          )
-        : '';
-    txData.recipient = toNative(txData.toChain, recipientAddress).toString();
-
-    return txData;
-  };
+  const parsePorticoTx = useCallback(
+    (tx: WormholeScanTransaction) => {
+      const txData = parseSingleTx(tx);
+      if (!txData) return;
+
+      const payload = tx.content.payload
+        .parsedPayload as unknown as WormholeScanPorticoParsedPayload;
+
+      const {
+        finalTokenAddress,
+        flagSet,
+        minAmountFinish,
+        recipientAddress,
+        relayerFee,
+      } = payload;
+
+      const nativeTokenKey = getNativeVersionOfToken(
+        tx.data.symbol,
+        txData.fromChain,
+      );
+      const nativeToken = config.tokens[nativeTokenKey];
+      if (!nativeToken) return;
+
+      const startToken = flagSet.flags.shouldWrapNative
+        ? getGasToken(txData.fromChain)
+        : nativeToken;
+
+      const finalTokenConfig = config.sdkConverter.findTokenConfigV1(
+        Wormhole.tokenId(
+          txData.toChain,
+          toNative(txData.toChain, finalTokenAddress).toString(),
+        ),
+        config.tokensArr,
+      );
+      if (!finalTokenConfig) return;
+
+      const receiveAmount = BigInt(minAmountFinish) - BigInt(relayerFee);
+
+      // Override with Portico specific data
+      txData.tokenKey = startToken.key;
+      txData.tokenAddress = startToken.tokenId?.address || 'native';
+      txData.receivedTokenKey = flagSet.flags.shouldUnwrapNative
+        ? getGasToken(txData.toChain).key
+        : finalTokenConfig.key;
+      txData.receiveAmount =
+        receiveAmount > 0
+          ? toFixedDecimals(
+              sdkAmount.display(
+                sdkAmount.fromBaseUnits(
+                  receiveAmount,
+                  finalTokenConfig.decimals,
+                ),
+                0,
+              ),
+              DECIMALS,
+            )
+          : '';
+      txData.recipient = toNative(txData.toChain, recipientAddress).toString();
+
+      return txData;
+    },
+    [parseSingleTx],
+  );
 
-  const PARSERS = {
-    PORTAL_TOKEN_BRIDGE: parseTokenBridgeTx,
-    NATIVE_TOKEN_TRANSFER: parseNTTTx,
-    CCTP_WORMHOLE_INTEGRATION: parseCCTPTx,
-    ETH_BRIDGE: parsePorticoTx,
-    USDT_BRIDGE: parsePorticoTx,
-  };
+  const PARSERS = useMemo(
+    () => ({
+      PORTAL_TOKEN_BRIDGE: parseTokenBridgeTx,
+      NATIVE_TOKEN_TRANSFER: parseNTTTx,
+      CCTP_WORMHOLE_INTEGRATION: parseCCTPTx,
+      ETH_BRIDGE: parsePorticoTx,
+      USDT_BRIDGE: parsePorticoTx,
+    }),
+    [parseCCTPTx, parseNTTTx, parsePorticoTx, parseTokenBridgeTx],
+  );
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const parseTransactions = useCallback(
@@ -339,7 +360,7 @@ const useTransactionHistoryWHScan = (
         })
         .filter((tx) => !!tx); // Filter out unsupported transactions
     },
-    [],
+    [PARSERS, parsePorticoTx],
   );
 
   useEffect(() => {
@@ -413,7 +434,7 @@ const useTransactionHistoryWHScan = (
     return () => {
       cancelled = true;
     };
-  }, [page, pageSize]);
+  }, [address, page, pageSize, parseTransactions]);
 
   return {
     transactions,