feat: add ConfigContext with Zustand store for instance-scoped configuration by DBosley · Pull Request #3973 · wormhole-foundation/wormhole-connect

DBosley · 2025-12-04T00:14:24Z

Summary

Introduces React Context pattern (ConfigContext, useConfig() hook) for config access
Adds Zustand store for selector-based subscriptions (useConfigSelector()) to enable granular re-renders
Enables multiple WormholeConnect instances on the same page with isolated state
Backwards compatible: singleton remains functional via legacy bridge during incremental migration

Changes

File	Change
`src/contexts/ConfigContext.tsx`	ConfigProvider with Zustand integration, useConfig/useSetConfig hooks
`src/store/configStore.ts`	Zustand store with useConfigSelector/useConfigValue hooks
`src/config/index.ts`	Legacy bridge (updateLegacyStore) for setConfig() compatibility
`src/WormholeConnect.tsx`	Wraps children with ConfigProvider
`src/AppRouter.tsx`	Example migration to useConfig()
`package.json`	Add zustand as dev + peer dependency

Test plan

Build passes: npm run build:lib
All 425 tests pass: npm run test:unit
New tests verify Zustand store functionality (18 tests)
New tests verify ConfigContext integration (17 tests)
Pre-commit hooks pass

Key Features

Selector-based subscriptions

// Only re-renders when network changes
const network = useConfigSelector((c) => c.network);

// Only re-renders when chains change  
const chains = useConfigSelector((c) => c.chainsArr);

Multi-instance support

Each <WormholeConnect> widget gets its own isolated Zustand store.

Legacy compatibility

setConfig() calls sync to the active Zustand store via updateLegacyStore().

Migration path

This PR establishes the foundation. Subsequent PRs will:

Migrate React components to useConfigSelector() for optimized re-renders
Add config parameter to utility functions
Remove singleton entirely

netlify · 2025-12-04T00:14:29Z

✅ Deploy Preview for wormhole-connect-mainnet ready!

Name	Link
🔨 Latest commit	`7876801`
🔍 Latest deploy log	https://app.netlify.com/projects/wormhole-connect-mainnet/deploys/6937428a88fe2f0008b40f96
😎 Deploy Preview	https://deploy-preview-3973--wormhole-connect-mainnet.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify · 2025-12-04T00:14:30Z

✅ Deploy Preview for wormhole-connect ready!

Name	Link
🔨 Latest commit	`7876801`
🔍 Latest deploy log	https://app.netlify.com/projects/wormhole-connect/deploys/6937428a3e859d0009b95a80
😎 Deploy Preview	https://deploy-preview-3973--wormhole-connect.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@deprecated

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.

Adds Zustand-based config store to enable granular re-renders when config values change. Components can now use useConfigSelector() to subscribe to specific config properties instead of re-rendering on any config change. - Add zustand as dev and peer dependency - Create configStore.ts with useConfigSelector/useConfigValue hooks - Integrate Zustand store into ConfigProvider - Add legacy bridge (updateLegacyStore) for setConfig() compatibility - Support multiple WormholeConnect instances with isolated state - Add comprehensive tests for store and context integration

priyajeet · 2025-12-09T00:04:26Z

+ * Context for providing the store instance to the component tree.
+ * Components use this to access the correct store for their WormholeConnect instance.
+ */
+export const ConfigStoreContext = React.createContext<ConfigStore | null>(null);


Needed anymore?

priyajeet · 2025-12-09T00:05:03Z

+ * Hook to access the config store from Context.
+ * @throws Error if used outside ConfigProvider
+ */
+function useConfigStore(): ConfigStore {


Not needed either

priyajeet · 2025-12-09T00:06:49Z

+ * }));
+ * ```
+ */
+export function useConfigSelector<T>(


Can just be useConfig() inside useConfig.ts.
Consumers will just do const config = useConfig();

priyajeet · 2025-12-09T00:07:55Z

+ * Hook to get the store's setState function for updating config.
+ * Used internally by ConfigProvider.
+ */
+export function useConfigStoreApi(): ConfigStore {


Not sure what is this doing

priyajeet · 2025-12-09T00:08:45Z

+  initialConfig: InternalConfig<Network>,
+): ConfigStore {
+  return createStore<ConfigState>()(() => ({
+    config: initialConfig,


Should break this down to different configs, so that consumers can react to specific changes on sub configs.

Probably should also have setters for the config, so that the place where we build the config calls this.

priyajeet · 2025-12-09T00:09:59Z

+ * Prefer useConfigSelector() for better performance - this hook will
+ * re-render on ANY config change.
+ */
+export function useConfigValue(): InternalConfig<Network> {


duplicate, but instead might make sense to have useUIConfig() in useUIConfig.ts, useTokensConfig() in useTokensConfig.ts etc, each returns that slice of the state.

priyajeet · 2025-12-09T00:20:55Z

+  }
+}
+
+/**


I think both the register and unregister can likely move inside the main store's methods? When you call the main store's setXXX method, it should set itself and additionally set legacy stuff.

DBosley had a problem deploying to ci December 4, 2025 00:14 — with GitHub Actions Failure

DBosley force-pushed the config-context-infrastructure branch from 24af433 to f6cbde0 Compare December 4, 2025 00:17

DBosley had a problem deploying to ci December 4, 2025 00:18 — with GitHub Actions Failure

DBosley force-pushed the config-context-infrastructure branch from f6cbde0 to 652291d Compare December 4, 2025 00:20

DBosley had a problem deploying to ci December 4, 2025 00:20 — with GitHub Actions Failure

DBosley force-pushed the config-context-infrastructure branch from 652291d to e071690 Compare December 4, 2025 00:22

DBosley had a problem deploying to ci December 4, 2025 00:22 — with GitHub Actions Failure

DBosley force-pushed the config-context-infrastructure branch from e071690 to d2c1f94 Compare December 4, 2025 00:22

DBosley temporarily deployed to ci December 4, 2025 00:22 — with GitHub Actions Inactive

DBosley force-pushed the config-context-infrastructure branch from d2c1f94 to 160afc1 Compare December 4, 2025 17:04

DBosley temporarily deployed to ci December 4, 2025 17:04 — with GitHub Actions Inactive

DBosley had a problem deploying to ci December 8, 2025 20:22 — with GitHub Actions Failure

DBosley changed the title ~~feat: add ConfigContext infrastructure for instance-scoped configuration~~ feat: add ConfigContext with Zustand store for instance-scoped configuration Dec 8, 2025

DBosley force-pushed the config-context-infrastructure branch from f74902e to 539d6c1 Compare December 8, 2025 20:36

DBosley temporarily deployed to ci December 8, 2025 20:36 — with GitHub Actions Inactive

DBosley added 2 commits December 8, 2025 14:26

DBosley force-pushed the config-context-infrastructure branch from 539d6c1 to 7876801 Compare December 8, 2025 21:26

DBosley temporarily deployed to ci December 8, 2025 21:26 — with GitHub Actions Inactive

priyajeet reviewed Dec 9, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: add ConfigContext with Zustand store for instance-scoped configuration#3973

feat: add ConfigContext with Zustand store for instance-scoped configuration#3973
DBosley wants to merge 2 commits into
developmentfrom
config-context-infrastructure

DBosley commented Dec 4, 2025 •

edited

Loading

Uh oh!

netlify Bot commented Dec 4, 2025 •

edited

Loading

Uh oh!

netlify Bot commented Dec 4, 2025 •

edited

Loading

Uh oh!

priyajeet Dec 9, 2025

Uh oh!

priyajeet Dec 9, 2025

Uh oh!

priyajeet Dec 9, 2025

Uh oh!

priyajeet Dec 9, 2025

Uh oh!

priyajeet Dec 9, 2025

Uh oh!

priyajeet Dec 9, 2025

Uh oh!

priyajeet Dec 9, 2025

Uh oh!

priyajeet Dec 9, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

+                }
+              }
+              /**

Uh oh!

Conversation

DBosley commented Dec 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Test plan

Key Features

Selector-based subscriptions

Multi-instance support

Legacy compatibility

Migration path

Uh oh!

netlify Bot commented Dec 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for wormhole-connect-mainnet ready!

Uh oh!

netlify Bot commented Dec 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for wormhole-connect ready!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

DBosley commented Dec 4, 2025 •

edited

Loading

netlify Bot commented Dec 4, 2025 •

edited

Loading

netlify Bot commented Dec 4, 2025 •

edited

Loading