frontend: move web config access into config context/provider by smokyisthatyou · Pull Request #3916 · BitBoxSwiss/bitbox-wallet-app

smokyisthatyou · 2026-03-04T15:50:34Z

Add ConfigContext + ConfigProvider in frontends/web and refactor React components/hooks to consume getConfig/setConfig through useConfig() instead of importing utils/config directly. Keep non-React config consumers on the shared utils/config implementation path, and update related hook dependency arrays.

Before asking for reviews, here is a check list of the most common things you might need to consider:

updating the Changelog
writing unit tests
checking if your changes affect other coins or tokens in unintended ways
testing on multiple environments (Qt, Android, ...)
having an AI review your changes

cc @thisconnect

thisconnect · 2026-03-06T09:05:47Z

nice, please make one more change/commit. Currently each component still does a get request when using getConfig.

Instead it could call getConfig once on startup and keep the "config" object in the context. getConfig could then either read out the local "config" object, or context could expose "config" object along with setConfig. I am not sure what is better.

With this all components that depend on "config" object can read from the context without doing an additional api call.

We want the source of truth still to be the backend, so in the context it should update the "config" object after setConfig and fetch from the api.

Also the api function in utils should be moved into frontends/web/src/api/config.ts

shonsirsha · 2026-03-10T06:08:38Z

concept ACK

thisconnect · 2026-03-10T13:13:52Z


    if (cancelledAccounts?.includes(code)) {
      alertUser(t('account.insuranceExpired'));
-      // remove the pending notification from the frontend settings.


please keep the comment

smokyisthatyou · 2026-03-30T15:50:02Z

@thisconnect moving this from draft, rebased

smokyisthatyou · 2026-03-30T18:11:26Z

@thisconnect ptal whenever you have time 🙏

thisconnect

thank you I think we should merge this first step soon, as it reduces api calls to the config endpoint and is the base for further updates: like fully typing TConfig

smokyisthatyou · 2026-04-13T08:10:33Z

@jadzeidan while working on this pr i think i introduced an old behaviour of the app that was opening the guide on first run. i implemented the code thinking it was the current expected flow, but @thisconnect pointed out this was actually deprecated in v4.40.

personally i’m not a huge fan of the auto-opening guide for aesthetic reasons, though I can see the utility.
do you think we should reintroduce this or keep it as is?

jadzeidan · 2026-04-13T09:26:40Z

thanks @smokyisthatyou for finding this 😄

I agree that guide shouldn't open automatically, so let's keep the "new" behaviour.

smokyisthatyou · 2026-05-11T14:17:28Z

@thisconnect rebased

coderabbitai · 2026-05-11T14:24:56Z

📝 Walkthrough

Walkthrough

This PR refactors the application's configuration management from a utility-based pattern to a React context-based system. A new typed API module (frontends/web/src/api/config.ts) defines configuration structures for backend (coin settings, proxy, language) and frontend (feature toggles, UI preferences). A ConfigProvider component fetches configuration on mount and distributes it through React context via a useConfig() hook, replacing direct imports of getConfig() and setConfig() throughout the codebase. The utility layer bridges old and new approaches, while provider-level components and all consumer components are migrated to the reactive context pattern for centralized, type-safe configuration state management.

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

Generate code and open pull requests
Plan features and break down work
Investigate incidents and troubleshoot customer tickets together
Automate recurring tasks and respond to alerts with triggers
Summarize progress and report instantly

Built for teams:

Shared memory across your entire org—no repeating context
Per-thread sandboxes to safely plan and execute work
Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

- Introduce ConfigProvider and ConfigContext and wrap app with provider - Fetch config once when the app loads and expose config + setConfig via useConfig - Refactor config consumers to read from context instead of calling getConfig per component

Stop auto-opening the guide when no frontend config is present. This prevents the guide overlay from blocking interactions on fresh starts.

- Add TFrontendConfig with known frontend settings flags and keep index signature - Update consumers to use typed config.frontend keys and drop casts/guards

- Add TBackendConfig and related types to api/config and use them in TConfig - Introduce TConfigUpdate so setConfig can accept partial backend/frontend updates - Update utils/config and ConfigProvider/Context to use TConfigUpdate merge + pendingConfig - Drop remaining backend casts in offline-error, electrum-servers, and RatesProvider

Type known frontend/backend config keys in api/config, remove duplicate advanced-settings types and unsafe casts, tighten TConfigUpdate and normalization, and add mockConfig for unit tests.

this avoids calling getConfig/setConfig directly and redundant config fetches

Drop the onChangeConfig callback chain; children already update config via useConfig().

- Simplify darkmode unset spread in DarkmodeProvider - Remove redundant userLanguage cast in i18n detector after truthiness guard. - Align feetargets expertFee access with context nullability (direct frontend read in effect, optional config in render). - Simplify remember-wallet dialog config check to optional chaining.

thisconnect

partially reviewed

type getConfig with required top-level keys; guard only undefined config (and nested fields like proxy) instead of optional frontend/backend objects.

thisconnect

very nice almost there

swap.tsx was recently merged, please also useConfig there instead of useLoad(getConfig)

thisconnect · 2026-05-20T13:27:38Z

-};
+let pendingConfig: TConfigUpdate = {};
+
+export const emptyBackendConfig = (): TConfig['backend'] => ({} as TConfig['backend']);


We trust the backend returns what is defined in api files.

thisconnect · 2026-05-20T14:42:20Z

 };

-export const EnableAuthSetting = ({ backendConfig, onChangeConfig }: TProps) => {
+export const EnableAuthSetting = ({ backendConfig }: TProps) => {


nit: use config?.backend from useConfig(); a few lines below and drop passing config with backendConfig prop.

thisconnect · 2026-05-20T17:33:36Z

+const dismissGuideIfPresent = async (driver) => {
+  await driver.execute(() => {
+    const overlays = document.querySelectorAll('div');
+    for (const el of overlays) {


Please use data-testid on the dialog component's overlay so you dont have to traverse the DOM here.

The react testing library style would more be to find web accessible elements by role atc. https://testing-library.com/docs/queries/about/#priority
but refactoring the diaog/overlay seems a bit out of scope of this PR so best to just add data-testid in this dialog.

thisconnect · 2026-05-20T18:09:54Z

-            },
-          });
-        } else {
-          // darkmode is different from OS, save to config


please keep the comment

thisconnect · 2026-05-20T18:25:54Z

    if (config.frontend.selectedExchangeRegion) {
      // pre-select config region
-      setSelectedRegion(config.frontend.selectedExchangeRegion);
+      setSelectedRegion(String(config.frontend.selectedExchangeRegion));


Suggested change

setSelectedRegion(String(config.frontend.selectedExchangeRegion));

setSelectedRegion(config.frontend.selectedExchangeRegion);

thisconnect · 2026-05-21T05:51:38Z

-    }
-  };
+  useEffect(() => {
+    updateRatesConfig();


updateRatesConfig function is only used here, also the function returns a promise but that is not needed here. I think it is fine to just move the 5 lines logic of the function into the effect here.

thisconnect · 2026-05-21T06:00:55Z

+                <EnableAuthSetting />
+                <EnableTorProxySetting proxyConfig={config?.backend.proxy} />
+                <RestartInTestnetSetting />
+                <CustomGapLimitSettings />


It would be nice to get rid of the remaining props where config is passed (frontendConfig and proxyConfig)

thisconnect · 2026-05-21T06:03:51Z

-      const nextConfig = Object.assign(currentConfig, {
-        backend: Object.assign({}, currentConfig.backend, pendingConfig.backend, object.backend),
-        frontend: Object.assign({}, currentConfig.frontend, pendingConfig.frontend, object.frontend)
-      });


I dont understand why there is different behavior for merging frontend and backend. Or if you found a bug and this fixes something.

As this PR is already vvery big I'd prefer to keep the merging with Object.assign and you drop the new commit that add mergeBackend/mergeFrontend.

thisconnect requested a review from shonsirsha March 10, 2026 05:44

thisconnect requested review from thisconnect and removed request for shonsirsha March 10, 2026 12:39

thisconnect requested changes Mar 10, 2026

View reviewed changes

smokyisthatyou force-pushed the config-context-provider branch from 30401e1 to ea60d60 Compare March 12, 2026 16:16

smokyisthatyou force-pushed the config-context-provider branch from ea60d60 to 4da6264 Compare March 30, 2026 14:48

smokyisthatyou marked this pull request as ready for review March 30, 2026 15:49

thisconnect requested changes Mar 30, 2026

View reviewed changes

Comment thread frontends/web/src/api/config.ts Outdated

Comment thread frontends/web/src/api/config.ts

Comment thread frontends/web/src/components/status/status.tsx Outdated

thisconnect requested changes Mar 31, 2026

View reviewed changes

smokyisthatyou force-pushed the config-context-provider branch from e991fa0 to 8fb8728 Compare March 31, 2026 13:29

thisconnect mentioned this pull request Apr 7, 2026

frontend: unify vendor iframe shell behavior #3914

Merged

smokyisthatyou force-pushed the config-context-provider branch 7 times, most recently from ed28dd9 to 925a212 Compare April 10, 2026 10:44

smokyisthatyou force-pushed the config-context-provider branch 2 times, most recently from d730016 to cacf20f Compare April 13, 2026 13:20

smokyisthatyou force-pushed the config-context-provider branch from cacf20f to bd2bd6c Compare May 11, 2026 14:17

smokyisthatyou requested a review from a team as a code owner May 11, 2026 14:17

smokyisthatyou force-pushed the config-context-provider branch 2 times, most recently from 491ab75 to 0feada1 Compare May 15, 2026 15:08

smokyisthatyou and others added 9 commits May 19, 2026 16:29

frontend: keep guide hidden by default on first run

5cd1bf7

Stop auto-opening the guide when no frontend config is present. This prevents the guide overlay from blocking interactions on fresh starts.

frontend: type frontend config keys in TConfig

2992d26

- Add TFrontendConfig with known frontend settings flags and keep index signature - Update consumers to use typed config.frontend keys and drop casts/guards

frontend: complete TConfig typing

4d19d28

Type known frontend/backend config keys in api/config, remove duplicate advanced-settings types and unsafe casts, tighten TConfigUpdate and normalization, and add mockConfig for unit tests.

frontend: migrate NewBadge to useConfig

7642796

this avoids calling getConfig/setConfig directly and redundant config fetches

frontend: remove duplicate onChangeConfig writes in advanced settings

3f739db

Drop the onChangeConfig callback chain; children already update config via useConfig().

frontend: await bitsurance setConfig when clearing cancellation flag

06fcb73

smokyisthatyou force-pushed the config-context-provider branch from 0feada1 to 1e34610 Compare May 19, 2026 14:30

fix: remove unused import

21682d8

thisconnect reviewed May 19, 2026

View reviewed changes

smokyisthatyou added 4 commits May 20, 2026 11:47

fix: export only config types that are imported in other files

24e6146

nit: add comment for deprecated coisn to match backend

fd60ec8

fix: drop redundant frontend/backend guards after config loads

c5b65e0

type getConfig with required top-level keys; guard only undefined config (and nested fields like proxy) instead of optional frontend/backend objects.

fix: drop redundant Boolean() on boolean config fields

4a1496f

thisconnect requested changes May 20, 2026

View reviewed changes

smokyisthatyou added 10 commits May 20, 2026 17:17

frontend: use useConfig in swap component

b5dddcf

fix: move TConfigUpdate types to utils/config

9c56d5d

fix: type api getConfig as Promise<TConfig>

d9f38ee

fix: prefix config types with TConfig

ca0308b

fix: drop config normalize-on-read

d0eb1d8

fix: remove cast utils setConfig merge

bb9cdc0

fix: drop mock-config; inline TConfig casts in tests

f30f894

fix: read gap limit config from useConfig in CustomGapLimitSettings

4037024

fix: read auth setting from useConfig in EnableAuthSetting

aa6a5bf

fix: stabilize export-logs Android e2e after config provider

c34305e

thisconnect requested changes May 21, 2026

View reviewed changes

	setSelectedRegion(String(config.frontend.selectedExchangeRegion));
	setSelectedRegion(config.frontend.selectedExchangeRegion);

Conversation

smokyisthatyou commented Mar 4, 2026

Uh oh!

thisconnect commented Mar 6, 2026

Uh oh!

shonsirsha commented Mar 10, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

thisconnect Mar 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

smokyisthatyou commented Mar 30, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

smokyisthatyou commented Mar 30, 2026

Uh oh!

thisconnect left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

smokyisthatyou commented Apr 13, 2026

Uh oh!

jadzeidan commented Apr 13, 2026

Uh oh!

smokyisthatyou commented May 11, 2026

Uh oh!

coderabbitai Bot commented May 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Uh oh!

thisconnect left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

thisconnect left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

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

thisconnect Mar 10, 2026 •

edited

Loading

thisconnect left a comment •

edited

Loading

coderabbitai Bot commented May 11, 2026 •

edited

Loading