refactor: migrate hooks to useConfig()

Convert hooks from direct config import to useConfig() hook:
- useAutoEnableGasDropoff, useAvailableWallets, useComputeDestinationTokens
- useConfirmTransaction, useExternalSearch, useFetchQuotes
- useFetchSupportedRoutes, useGasSlider, useGetTokenBalances
- useGetTokens, useSortedRoutesWithQuotes, useTokenList
- useTokenListWithSearch, useTrackTransfer, useTransactionHistory
- useTransactionHistoryLiFi, useTransactionHistoryMayan, useTransactionHistoryWHScan

Author: DBosley

src/hooks/useAutoEnableGasDropoff.test.tsx

@@ -1,17 +1,28 @@
-import React from 'react';
+import * as React from 'react';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { renderHook } from '@testing-library/react';
 import { Provider } from 'react-redux';
 import { configureStore } from '@reduxjs/toolkit';
 import { amount } from '@wormhole-foundation/sdk';
 import { useAutoEnableGasDropOff } from './useAutoEnableGasDropoff';
 import * as relayActions from 'store/relay';
+import { TestConfigContext } from 'utils/testHelpers';
 
-vi.mock('config', () => ({
-  default: {
-    tokens: {
-      getGasToken: vi.fn(() => ({ key: 'ETH', symbol: 'ETH' })),
-    },
+// Mock config object provided via TestConfigContext
+const mockConfig = {
+  tokens: {
+    getGasToken: vi.fn(() => ({ key: 'ETH', symbol: 'ETH' })),
+  },
+};
+
+// Mock useConfig to read from TestConfigContext
+vi.mock('contexts/ConfigContext', () => ({
+  useConfig: () => {
+    const context = React.useContext(TestConfigContext);
+    if (!context) {
+      throw new Error('useConfig must be used within a ConfigProvider');
+    }
+    return context;
   },
 }));
 
@@ -34,7 +45,9 @@ describe('useAutoEnableGasDropoff', () => {
   });
 
   const wrapper = ({ children }: { children: React.ReactNode }) => (
-    <Provider store={mockStore}>{children}</Provider>
+    <TestConfigContext.Provider value={mockConfig}>
+      <Provider store={mockStore}>{children}</Provider>
+    </TestConfigContext.Provider>
   );
 
   it('enables gas dropoff when destination has no native balance and chain is allowed', () => {

src/hooks/useAutoEnableGasDropoff.ts

@@ -3,7 +3,7 @@ import { useDispatch } from 'react-redux';
 import { amount as sdkAmount } from '@wormhole-foundation/sdk';
 import type { Chain } from '@wormhole-foundation/sdk';
 import type { Balances } from 'utils/wallet/types';
-import config from 'config';
+import { useConfig } from 'contexts/ConfigContext';
 import { setToNativeToken } from 'store/relay';
 import { isExecutorRoute } from 'utils';
 
@@ -34,6 +34,7 @@ export function useAutoEnableGasDropOff({
   isFetchingBalances,
   allowedChains,
 }: UseAutoEnableGasDropOffParams): void {
+  const config = useConfig();
   const dispatch = useDispatch();
 
   useEffect(() => {
@@ -81,6 +82,7 @@ export function useAutoEnableGasDropOff({
       dispatch(setToNativeToken(newGasValue));
     }
   }, [
+    config,
     route,
     destChain,
     destinationBalances,

src/hooks/useAvailableWallets.ts

@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
 import type { Chain, Platform } from '@wormhole-foundation/sdk';
 import { chainToPlatform } from '@wormhole-foundation/sdk';
 
-import config from 'config';
+import { useConfig } from 'contexts/ConfigContext';
 import type { WalletData } from 'utils/wallet';
 import { getWalletOptions } from 'utils/wallet';
 
@@ -26,6 +26,7 @@ const FAILED_TO_LOAD_ERR =
   'Failed to load wallets. Please refresh and try again.';
 
 export const useAvailableWallets = (props: Props): ReturnProps => {
+  const config = useConfig();
   const { chain, supportedChains } = props;
 
   const [walletOptionsResult, setWalletOptionsResult] = useState<WalletOptions>(
@@ -69,7 +70,7 @@ export const useAvailableWallets = (props: Props): ReturnProps => {
     return () => {
       cancelled = true;
     };
-  }, [chain, supportedChains]);
+  }, [chain, supportedChains, config.chains]);
 
   return {
     walletOptionsResult,

src/hooks/useComputeDestinationTokens.ts

@@ -1,7 +1,8 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 
-import config from 'config';
+import { useConfig } from 'contexts/ConfigContext';
+import type { ConfigContextType } from 'contexts/ConfigContext';
 import { setDestToken } from 'store/transferInput';
 
 import type { Token } from 'config/tokens';
@@ -28,6 +29,7 @@ type ReturnProps = {
  * 3. If both chains selected AND a source token: fetch supported destination tokens from routes
  */
 const computeDestTokensForChains = async (
+  config: ConfigContextType,
   sourceChain: Chain | undefined,
   destChain: Chain | undefined,
   sourceToken: Token | undefined,
@@ -57,6 +59,7 @@ const computeDestTokensForChains = async (
 };
 
 const useComputeDestinationTokens = (props: Props): ReturnProps => {
+  const config = useConfig();
   const { sourceChain, destChain, sourceToken } = props;
 
   const dispatch = useDispatch();
@@ -71,6 +74,7 @@ const useComputeDestinationTokens = (props: Props): ReturnProps => {
 
     try {
       const supported = await computeDestTokensForChains(
+        config,
         sourceChain,
         destChain,
         sourceToken,
@@ -86,7 +90,7 @@ const useComputeDestinationTokens = (props: Props): ReturnProps => {
     } finally {
       setIsFetching(false);
     }
-  }, [sourceToken, sourceChain, destChain, dispatch, getOrFetchToken]);
+  }, [config, sourceToken, sourceChain, destChain, dispatch, getOrFetchToken]);
 
   useEffect(() => {
     computeDestTokens();

src/hooks/useConfirmTransaction.ts

@@ -1,7 +1,7 @@
 import { useContext, useState, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
-import config from 'config';
+import { useConfig } from 'contexts/ConfigContext';
 import { RouteContext } from 'contexts/RouteContext';
 import useWalletProvider from 'hooks/useWalletProvider';
 import { useUSDamountGetter } from 'hooks/useUSDamountGetter';
@@ -42,6 +42,7 @@ type ReturnProps = {
 };
 
 const useConfirmTransaction = (props: Props): ReturnProps => {
+  const config = useConfig();
   const dispatch = useDispatch();
 
   const [error, setError] = useState<string | undefined>(undefined);

src/hooks/useExternalSearch.ts

@@ -1,5 +1,5 @@
 import type { Chain } from '@wormhole-foundation/sdk';
-import config from 'config';
+import { useConfig } from 'contexts/ConfigContext';
 import { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import type { RootState } from 'store';
@@ -13,6 +13,7 @@ type ExternalSearch = {
 };
 
 export function useExternalSearch(): ExternalSearch {
+  const config = useConfig();
   const dispatch = useDispatch();
   const { txHash, chain } = useSelector((state: RootState) => state.search);
 
@@ -32,7 +33,7 @@ export function useExternalSearch(): ExternalSearch {
         );
       }
     }
-  }, [dispatch]);
+  }, [dispatch, config.chainsArr, config.ui.searchTx]);
 
   return {
     hasExternalSearch: !!(txHash && chain),

src/hooks/useFetchQuotes.ts

@@ -9,7 +9,7 @@ import { Wormhole, circle, amount } from '@wormhole-foundation/sdk';
 import type { QuoteParams, QuoteResult } from 'routes/operator';
 import { calculateUSDPriceRaw } from 'utils';
 
-import config from 'config';
+import { useConfig } from 'contexts/ConfigContext';
 import type { Token } from 'config/tokens';
 import { useTokens } from 'contexts/TokensContext';
 
@@ -35,6 +35,7 @@ const MAYAN_BETA_PROTOCOL_LIMITS = {
 };
 
 export default (routes: string[], params: Params): HookReturn => {
+  const config = useConfig();
   const [nonce, setNonce] = useState(new Date().valueOf());
   const refreshTimeout = useRef<undefined | ReturnType<typeof setTimeout>>(
     undefined,
@@ -120,7 +121,7 @@ export default (routes: string[], params: Params): HookReturn => {
         clearTimeout(refreshTimeout.current);
       }
     };
-  }, [unfilteredQuotes, routes, params]);
+  }, [unfilteredQuotes, routes, params, config]);
 
   // IMPORTANT
   //
@@ -417,8 +418,7 @@ export default (routes: string[], params: Params): HookReturn => {
     }
 
     return { quotes: filtered, failedQuotes };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [unfilteredQuotes]);
+  }, [unfilteredQuotes, config, getTokenPrice, params]);
 
   return {
     quotes,

src/hooks/useFetchSupportedRoutes.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import config from 'config';
+import { useConfig } from 'contexts/ConfigContext';
 import { getTokenDetails } from 'telemetry';
 import { maybeLogSdkError } from 'utils/errors';
 import { ReadOnlyWallet } from 'utils/wallet/ReadOnlyWallet';
@@ -29,6 +29,7 @@ const useFetchSupportedRoutes = ({
   toNativeToken,
   receivingWallet,
 }: UseFetchSupportedRoutesArgs): HookReturn => {
+  const config = useConfig();
   const [routes, setRoutes] = useState<string[]>([]);
   const [isFetching, setIsFetching] = useState<boolean>(false);
 
@@ -110,6 +111,7 @@ const useFetchSupportedRoutes = ({
       isActive = false;
     };
   }, [
+    config,
     sourceToken,
     destToken,
     fromChain,

src/hooks/useGasSlider.ts

@@ -1,4 +1,4 @@
-import config from 'config';
+import { useConfig } from 'contexts/ConfigContext';
 import type { Token } from 'config/tokens';
 
 type Props = {
@@ -13,6 +13,7 @@ export const useGasSlider = (
   disabled: boolean;
   showGasSlider: boolean | undefined;
 } => {
+  const config = useConfig();
   const { destToken, route, isTransactionInProgress } = props;
 
   const disabled = isTransactionInProgress;

src/hooks/useGetTokenBalances.ts

@@ -1,6 +1,7 @@
 import { useEffect, useState, useRef, useCallback, useMemo } from 'react';
 import type { Balances } from 'utils/wallet/types';
-import config, { getWormholeContextV2 } from 'config';
+import { getWormholeContextV2 } from 'config';
+import { useConfig } from 'contexts/ConfigContext';
 import type { Token } from 'config/tokens';
 import { chainToPlatform } from '@wormhole-foundation/sdk-base';
 import type { Chain } from '@wormhole-foundation/sdk';
@@ -51,6 +52,7 @@ const useGetTokenBalances = ({
   source,
   destination,
 }: UseGetTokenBalancesParams): UseGetTokenBalancesResult => {
+  const config = useConfig();
   const [balances, setBalances] = useState<BalanceMap>({});
   const [fetchingKeys, setFetchingKeys] = useState<Set<string>>(new Set());
 
@@ -145,7 +147,7 @@ const useGetTokenBalances = ({
         }
       }
     },
-    [getOrFetchToken],
+    [config, getOrFetchToken],
   );
 
   // Fetch balances for a single chain
@@ -258,7 +260,7 @@ const useGetTokenBalances = ({
 
       return updatedBalances;
     },
-    [processIndexerResults],
+    [config, processIndexerResults],
   );
 
   // Effect to fetch balances