refactor: migrate views and components to useConfig()

Convert React components from direct config import to useConfig() hook:
- Views: Terms, Bridge (all subcomponents), Redeem, TxHistory
- Components: ConfigurablePageHeader, FooterNavBar
- Contexts: WalletProvider
- Icons: PoweredBy

Author: DBosley

src/components/ConfigurablePageHeader.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
-import config from 'config';
+import { useConfig } from 'contexts/ConfigContext';
 import PageHeader from 'components/PageHeader';
 import type { Alignment } from 'components/Header';
 
 const ConfigurablePageHeader = () => {
+  const config = useConfig();
   const defaults: { text: string; align: Alignment } = {
     text: '',
     align: 'left',

src/components/FooterNavBar.tsx

@@ -4,7 +4,7 @@ import { Box, useTheme } from '@mui/material';
 import { ICON } from 'utils/style';
 import type { Route } from 'store/router';
 import { setRoute } from 'store/router';
-import config from 'config';
+import { useConfig } from 'contexts/ConfigContext';
 import type { MenuEntry } from 'config/ui';
 
 type MenuItem = {
@@ -28,6 +28,7 @@ function defaultMenuItems(navigate: (name: Route) => void): MenuItem[] {
 }
 
 export default function FooterNavBar() {
+  const config = useConfig();
   const theme = useTheme();
 
   const styles = useMemo(

src/contexts/wallet/WalletContext.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { renderHook, act } from '@testing-library/react';
 import { useContext } from 'react';
@@ -8,13 +8,36 @@ import WalletProvider from './WalletProvider';
 import WalletContext from './WalletContext';
 import { internalWalletProvider } from 'utils/wallet/InternalWalletProvider';
 import { TransferWallet } from 'utils/wallet';
+import { TestConfigContext } from 'utils/testHelpers';
 
 const mockStore = configureStore({
   reducer: {
     wallet: (state = { sending: undefined, receiving: undefined }) => state,
   },
 });
 
+// Mock config object provided via TestConfigContext
+const mockConfig = {
+  network: 'Mainnet',
+  chains: {
+    Ethereum: { sdkName: 'Ethereum' },
+    Solana: { sdkName: 'Solana' },
+  },
+  triggerEvent: vi.fn(),
+  cacheKey: vi.fn((key: string) => `test-${key}`),
+};
+
+// 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;
+  },
+}));
+
 vi.mock('config', () => ({
   default: {
     network: 'Mainnet',
@@ -74,11 +97,13 @@ describe('WalletContext with InternalWalletProvider', () => {
   });
 
   const wrapper = ({ children }: { children: React.ReactNode }) => (
-    <Provider store={mockStore}>
-      <WalletProvider provider={internalWalletProvider}>
-        {children}
-      </WalletProvider>
-    </Provider>
+    <TestConfigContext.Provider value={mockConfig}>
+      <Provider store={mockStore}>
+        <WalletProvider provider={internalWalletProvider}>
+          {children}
+        </WalletProvider>
+      </Provider>
+    </TestConfigContext.Provider>
   );
 
   it('connect and disconnect sending and receiving wallets', async () => {

src/contexts/wallet/WalletProvider.tsx

@@ -3,7 +3,7 @@ import React, { useState, useCallback, useMemo, useEffect } from 'react';
 import type { Chain } from '@wormhole-foundation/sdk';
 import { chainToPlatform } from '@wormhole-foundation/sdk';
 import { useDispatch } from 'react-redux';
-import config from 'config';
+import { useConfig } from 'contexts/ConfigContext';
 import type { Wallet, WormholeConnectWalletProvider } from 'utils/wallet';
 import { TransferWallet } from 'utils/wallet';
 import {
@@ -23,6 +23,7 @@ function WalletProvider({
   children,
   provider: walletProvider,
 }: WalletProviderProps) {
+  const config = useConfig();
   const [isConnecting, setIsConnecting] = useState(false);
   const dispatch = useDispatch();
 

src/icons/PoweredBy.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import config from 'config';
+import { useConfig } from 'contexts/ConfigContext';
 import Box from '@mui/material/Box';
 import { useTheme } from '@mui/material/styles';
 import Link from '@mui/material/Link';
@@ -121,6 +121,7 @@ function PartnerLogo(props: { src: string }) {
 }
 
 function PoweredByIcon(props: { color: string }) {
+  const config = useConfig();
   const styles = {
     container: {
       display: 'flex',

src/views/Terms.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import Box from '@mui/material/Box';
 import FooterNavBar from 'components/FooterNavBar';
-import config from 'config';
+import { useConfig } from 'contexts/ConfigContext';
 import { FormContent } from 'components/v3/FormContent';
 import { useTheme } from '@mui/material';
 import Header from 'components/Header';
 import { BackButton } from 'components/v3/BackButton';
 
 function Terms() {
+  const config = useConfig();
   const theme: any = useTheme();
   const termsUrl = config.ui.termsOfServiceUrl || 'https://portalbridge.com';
 

src/views/v3/Bridge/AssetPicker/FeeOffset.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import { Provider } from 'react-redux';
@@ -8,13 +8,32 @@ import { amount as sdkAmount } from '@wormhole-foundation/sdk';
 
 import FeeOffset from './FeeOffset';
 import { dark } from 'theme';
-import config from 'config';
-import { createMockToken } from 'utils/testHelpers';
+import { createMockToken, TestConfigContext } from 'utils/testHelpers';
 
 const theme = createTheme({
   palette: dark as any,
 });
 
+// Mock config object provided via TestConfigContext
+const mockConfig = {
+  ui: {
+    experimental: {
+      feeOffsetting: true,
+    },
+  },
+};
+
+// 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;
+  },
+}));
+
 // Mock the calculateFeeOffset function
 vi.mock('utils/fees', () => ({
   calculateFeeOffset: vi.fn(),
@@ -28,17 +47,6 @@ vi.mock('hooks/useGetTokens', () => ({
   })),
 }));
 
-// Mock the config module
-vi.mock('config', () => ({
-  default: {
-    ui: {
-      experimental: {
-        feeOffsetting: true,
-      },
-    },
-  },
-}));
-
 const mockToken = createMockToken({
   symbol: 'USDC',
   name: 'USD Coin',
@@ -61,9 +69,11 @@ const AppWrapper =
   (store: any) =>
   ({ children }: { children: React.ReactNode }) =>
     (
-      <Provider store={store}>
-        <ThemeProvider theme={theme}>{children}</ThemeProvider>
-      </Provider>
+      <TestConfigContext.Provider value={mockConfig}>
+        <Provider store={store}>
+          <ThemeProvider theme={theme}>{children}</ThemeProvider>
+        </Provider>
+      </TestConfigContext.Provider>
     );
 
 describe('FeeOffset', () => {
@@ -122,8 +132,13 @@ describe('FeeOffset', () => {
     const { calculateFeeOffset } = vi.mocked(await import('utils/fees'));
     const { useGetTokens } = vi.mocked(await import('hooks/useGetTokens'));
 
-    const mockedConfig = vi.mocked(config);
-    mockedConfig.ui.experimental!.feeOffsetting = false;
+    const disabledConfig = {
+      ui: {
+        experimental: {
+          feeOffsetting: false,
+        },
+      },
+    };
 
     const feeOffset = sdkAmount.fromBaseUnits(1000n, 6);
     calculateFeeOffset.mockReturnValue(feeOffset);
@@ -137,14 +152,20 @@ describe('FeeOffset', () => {
       'TestRoute',
     );
 
+    // Use wrapper with disabled feeOffsetting config
+    const DisabledWrapper = ({ children }: { children: React.ReactNode }) => (
+      <TestConfigContext.Provider value={disabledConfig}>
+        <Provider store={store}>
+          <ThemeProvider theme={theme}>{children}</ThemeProvider>
+        </Provider>
+      </TestConfigContext.Provider>
+    );
+
     render(<FeeOffset />, {
-      wrapper: AppWrapper(store),
+      wrapper: DisabledWrapper,
     });
 
     expect(screen.queryByText(/\+.*USDC/)).not.toBeInTheDocument();
-
-    // Reset config for other tests
-    mockedConfig.ui.experimental!.feeOffsetting = true;
   });
 
   it('does not render when feeOffsetAmount is undefined', async () => {

src/views/v3/Bridge/AssetPicker/FeeOffset.tsx

@@ -4,7 +4,7 @@ import { Box, Tooltip, Typography, useTheme } from '@mui/material';
 import InfoOutlineIcon from '@mui/icons-material/InfoOutline';
 import { amount as sdkAmount } from '@wormhole-foundation/sdk';
 
-import config from 'config';
+import { useConfig } from 'contexts/ConfigContext';
 import type { RootState } from 'store';
 import { calculateFeeOffset } from 'utils/fees';
 import { useGetTokens } from 'hooks/useGetTokens';
@@ -14,6 +14,7 @@ import { useGetTokens } from 'hooks/useGetTokens';
  * exactly what they requested after protocol fees are deducted
  */
 function FeeOffset() {
+  const config = useConfig();
   const theme: any = useTheme();
   const { amount, route: selectedRoute } = useSelector(
     (state: RootState) => state.transferInput,

src/views/v3/Bridge/AssetPicker/PercentButtons.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, screen, fireEvent } from '@testing-library/react';
 import { Provider } from 'react-redux';
@@ -8,12 +8,35 @@ import { amount as sdkAmount } from '@wormhole-foundation/sdk';
 
 import PercentButtons from './PercentButtons';
 import { dark } from 'theme';
-import { createMockToken } from 'utils/testHelpers';
+import { createMockToken, TestConfigContext } from 'utils/testHelpers';
 
 const theme = createTheme({
   palette: dark as any,
 });
 
+// Mock config object provided via TestConfigContext
+const mockConfig = {
+  routes: {
+    get: vi.fn(),
+  },
+  ui: {
+    experimental: {
+      feeOffsetting: false,
+    },
+  },
+};
+
+// 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;
+  },
+}));
+
 // Mock the hooks and utilities
 vi.mock('hooks/useGetTokens', () => ({
   useGetTokens: vi.fn(() => ({
@@ -43,19 +66,6 @@ vi.mock('@wormhole-foundation/sdk', async () => {
   };
 });
 
-vi.mock('config', () => ({
-  default: {
-    routes: {
-      get: vi.fn(),
-    },
-    ui: {
-      experimental: {
-        feeOffsetting: false,
-      },
-    },
-  },
-}));
-
 const mockToken = createMockToken({
   symbol: 'ETH',
   name: 'Ethereum',
@@ -77,9 +87,11 @@ const AppWrapper =
   (store: any) =>
   ({ children }: { children: React.ReactNode }) =>
     (
-      <Provider store={store}>
-        <ThemeProvider theme={theme}>{children}</ThemeProvider>
-      </Provider>
+      <TestConfigContext.Provider value={mockConfig}>
+        <Provider store={store}>
+          <ThemeProvider theme={theme}>{children}</ThemeProvider>
+        </Provider>
+      </TestConfigContext.Provider>
     );
 
 describe('PercentButtons', () => {

src/views/v3/Bridge/AssetPicker/PercentButtons.tsx

@@ -11,7 +11,7 @@ import {
 import type { Chain } from '@wormhole-foundation/sdk';
 import { amount as sdkAmount, isSameToken } from '@wormhole-foundation/sdk';
 
-import config from 'config';
+import { useConfig } from 'contexts/ConfigContext';
 import type { RootState } from 'store';
 import { calculateFeeOffset } from 'utils/fees';
 import { getGasReserve } from 'utils/gasReserve';
@@ -36,6 +36,7 @@ const GAS_RESERVE_INFO_MESSAGE =
   'A small amount of the network token balance is reserved to cover the network cost of this transaction.';
 
 function PercentButtons(props: Props) {
+  const config = useConfig();
   const theme: any = useTheme();
   const { route: selectedRoute } = useSelector(
     (state: RootState) => state.transferInput,