Skip to content

refactor: migrate config singleton to React Context (WIP)#3972

Draft
DBosley wants to merge 4 commits into
developmentfrom
side-effect-refactor
Draft

refactor: migrate config singleton to React Context (WIP)#3972
DBosley wants to merge 4 commits into
developmentfrom
side-effect-refactor

Conversation

@DBosley

@DBosley DBosley commented Dec 3, 2025

Copy link
Copy Markdown
Contributor

Summary

Refactors the global config singleton to use React Context for instance-scoped configuration. This enables:

  • Multiple independent Connect instances on the same page
  • Proper React lifecycle integration
  • Eliminates global state side effects

Current Status: Phase 2 Complete (WIP)

Completed

  • Phase 1: ConfigContext infrastructure (ConfigProvider, useConfig() hook)
  • Phase 2: Migrated React components and hooks to use useConfig()
  • Test Infrastructure: All 390 tests passing with TestConfigContext pattern
  • TypeScript: 0 dev server errors (added missing env types, @types/color)

Remaining (not in this PR yet)

  • Phase 3: Migrate utility functions (pass config as parameter)
  • Phase 4: Migrate core orchestration files
  • Phase 5: Remove singleton entirely

Migration Pattern

Components now use:

import { useConfig } from 'contexts/ConfigContext';

const MyComponent = () => {
  const config = useConfig();
  // ... use config
};

Backwards Compatibility

The app remains fully functional during migration - both patterns work:

  • useConfig() reads from React Context
  • Direct singleton import continues to work (same underlying config object)

Test plan

  • All 390 unit tests pass
  • Build succeeds
  • Lint passes (0 errors, warnings are pre-existing)
  • Dev server runs with 0 TypeScript errors
  • Manual verification: app loads and renders correctly

@netlify

netlify Bot commented Dec 3, 2025

Copy link
Copy Markdown

Deploy Preview for wormhole-connect failed.

Name Link
🔨 Latest commit 909a5da
🔍 Latest deploy log https://app.netlify.com/projects/wormhole-connect/deploys/6931e9f1ffc46600080d582e

@netlify

netlify Bot commented Dec 3, 2025

Copy link
Copy Markdown

Deploy Preview for wormhole-connect-mainnet failed.

Name Link
🔨 Latest commit 909a5da
🔍 Latest deploy log https://app.netlify.com/projects/wormhole-connect-mainnet/deploys/6931e9f134eefc0008bccab2

Introduces React Context pattern for config access, enabling future support
for multiple WormholeConnect instances on the same page.

Changes:
- Add ConfigContext with ConfigProvider and useConfig() hook
- Wrap WormholeConnect with ConfigProvider
- Update AppRouter to use useConfig() (example migration)
- Add TestConfigContext pattern in testHelpers for test isolation
- Mark singleton export with @deprecated JSDoc
- Fix TypeScript dev server errors (@types/color, env.d.ts)

The singleton remains functional for backwards compatibility.
Migration can proceed incrementally file-by-file.
Planning documentation for the config singleton, Redux store,
and wallet state refactoring efforts.
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
Convert React components from direct config import to useConfig() hook:
- Views: Terms, Bridge (all subcomponents), Redeem, TxHistory
- Components: ConfigurablePageHeader, FooterNavBar
- Contexts: WalletProvider
- Icons: PoweredBy
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant