frontend: move web config access into config context/provider

frontends/mobiletests/e2e/export-logs-save.test.js

@@ -21,6 +21,20 @@ const getSaveDialogElement = async (driver) => {
   return null;
 };
 
+/** Dismiss the in-app guide overlay if it is open (blocks clicks on settings). */
+const dismissGuideIfPresent = async (driver) => {
+  await driver.execute(() => {
+    const overlays = document.querySelectorAll('div');
+    for (const el of overlays) {
+      const cls = el.className;
+      if (typeof cls === 'string' && cls.includes('overlay') && cls.includes('show')) {
+        el.click();
+        return;
+      }
+    }
+  });
+};
+
 describe('Export logs uses save dialog', function () {
   this.timeout(180000);
 
@@ -56,8 +70,13 @@ describe('Export logs uses save dialog', function () {
 
     const exportLogsButton = await driver.$('//button[contains(., "Export logs")]');
     await exportLogsButton.waitForDisplayed({ timeout: 60000 });
+    await dismissGuideIfPresent(driver);
+    await exportLogsButton.waitForClickable({ timeout: 10000 });
     await exportLogsButton.click();
 
+    // Allow native save picker to open after the export-log API call.
+    await driver.pause(3000);
+
     await driver.switchContext('NATIVE_APP');
     const saveDialog = await getSaveDialogElement(driver);
     expect(saveDialog, 'expected Android save dialog to be visible').to.not.equal(null);

frontends/web/src/api/config.ts

@@ -0,0 +1,129 @@
+// SPDX-License-Identifier: Apache-2.0
+
+import { apiGet, apiPost } from '@/utils/request';
+import type { Fiat } from '@/api/account';
+import type { BtcUnit } from '@/api/coins';
+
+type TElectrumServerInfo = Readonly<{
+  server: string;
+  tls: boolean;
+  pemCert: string;
+}>;
+
+type TBtcCoinConfig = Readonly<{
+  electrumServers: TElectrumServerInfo[];
+}>;
+
+/** BTC-based coin keys in backend config (see backend/config/config.go). */
+export type TConfigBackendBtcCoinKey = 'btc' | 'tbtc' | 'ltc' | 'tltc';
+
+// Mirrors backend/config/config.go ethCoinConfig: DeprecatedActiveERC20Tokens (JSON key
+// "activeERC20Tokens"). Deprecated — ERC20 activation is per-account in accounts config; kept
+// for migration / compatibility with persisted app config.
+type TEthCoinConfig = Readonly<{
+  activeERC20Tokens: string[];
+}>;
+
+export type TConfigBackendProxy = Readonly<{
+  useProxy: boolean;
+  proxyAddress: string;
+}>;
+
+/** Keys used by NewBadge to mark UI elements as seen. */
+export type TConfigFrontendBadgeKey =
+  | 'hasSeenMarketplaceNudge'
+  | 'hasSeenSwapMarketTab'
+  | 'hasSeenOtcMarketTab';
+
+/** Dynamic frontend keys written when dismissing Status banners. */
+type TConfigFrontendDismissibleDynamicKey =
+  | `update-${string}`
+  | `banner-backup-${string}`
+  | `banner-${string}-${string}`;
+
+/** Known static frontend keys written when dismissing Status banners. */
+type TConfigFrontendDismissibleKnownKey =
+  | 'walletConnectDisclaimerDismissed'
+  | 'skipTestingWarning'
+  | 'mobile-data-warning';
+
+export type TConfigFrontendDismissibleKey =
+  | TConfigFrontendDismissibleKnownKey
+  | TConfigFrontendDismissibleDynamicKey;
+
+export type TConfigFrontend = Readonly<{
+  guideShown?: boolean;
+  hideAmounts?: boolean;
+  darkmode?: boolean;
+  expertFee?: boolean;
+  coinControl?: boolean;
+  selectedExchangeRegion?: string;
+  hideEnableRememberWalletDialog?: boolean;
+  hasUsedWalletConnect?: boolean;
+  bitsuranceNotifyCancellation?: string[];
+
+  hasSeenMarketplaceNudge?: boolean;
+  hasSeenSwapMarketTab?: boolean;
+  hasSeenOtcMarketTab?: boolean;
+
+  skipBitrefillWidgetDisclaimer?: boolean;
+  skipBTCDirectWidgetDisclaimer?: boolean;
+  skipBTCDirectOTCDisclaimer?: boolean;
+  skipMoonpayDisclaimer?: boolean;
+  skipPocketDisclaimer?: boolean;
+  skipPocketOTCDisclaimer?: boolean;
+  skipBitsuranceDisclaimer?: boolean;
+  skipSwapkitDisclaimer?: boolean;
+
+  walletConnectDisclaimerDismissed?: boolean;
+  skipTestingWarning?: boolean;
+  'mobile-data-warning'?: boolean;
+}> & Readonly<{
+  [key in TConfigFrontendDismissibleDynamicKey]?: boolean;
+}>;
+
+export type TConfigBackend = Readonly<{
+  proxy: TConfigBackendProxy;
+  /**
+   * Deprecated global coin activation flags (backend/config/config.go: DeprecatedBitcoinActive,
+   * DeprecatedLitecoinActive, DeprecatedEthereumActive). Coins are configured per account now;
+   * kept for migration / compatibility with persisted app config.
+   */
+  bitcoinActive: boolean;
+  litecoinActive: boolean;
+  ethereumActive: boolean;
+  authentication: boolean;
+  btc: TBtcCoinConfig;
+  tbtc: TBtcCoinConfig;
+  rbtc: TBtcCoinConfig;
+  ltc: TBtcCoinConfig;
+  tltc: TBtcCoinConfig;
+  eth: TEthCoinConfig;
+  teth: Record<string, never>;
+  reth: Record<string, never>;
+  fiatList: Fiat[];
+  mainFiat: Fiat;
+  userLanguage: string;
+  btcUnit: BtcUnit;
+  startInTestnet: boolean;
+  gapLimitReceive: number;
+  gapLimitChange: number;
+}>;
+
+export type TConfig = {
+  readonly backend: TConfigBackend;
+  readonly frontend: TConfigFrontend;
+};
+
+/**
+ * Fetch config from the backend (see handlers.getAppConfig).
+ * Use setConfig from @/utils/config for partial merge-on-write updates.
+ */
+export const getConfig = (): Promise<TConfig> => apiGet('config');
+
+/**
+ * Post a config object to the backend.
+ */
+export const setConfig = (config: TConfig): Promise<void> => {
+  return apiPost('config', config);
+};

frontends/web/src/components/banners/offline-error.tsx

@@ -1,9 +1,8 @@
 // SPDX-License-Identifier: Apache-2.0
 
-import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Message } from '../message/message';
-import { getConfig } from '@/utils/config';
+import { useConfig } from '@/contexts/ConfigProvider';
 import style from './offline-errors.module.css';
 
 type Props = {
@@ -13,13 +12,9 @@ type Props = {
 export const OfflineError = ({
   error,
 }: Props) => {
-
   const { t } = useTranslation();
-  const [usesProxy, setUsesProxy] = useState<boolean>();
-
-  useEffect(() => {
-    getConfig().then(({ backend }) => setUsesProxy(backend.proxy.useProxy));
-  }, []);
+  const { config } = useConfig();
+  const usesProxy = config?.backend.proxy?.useProxy ?? false;
 
   // Status: offline error
   const offlineErrorTextLines: string[] = [];

frontends/web/src/components/new-badge/new-badge.tsx

@@ -2,15 +2,13 @@
 
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import type { TConfigFrontendBadgeKey } from '@/api/config';
 import { Badge } from '@/components/badge/badge';
-import { useLoad } from '@/hooks/api';
-import { getConfig, setConfig } from '@/utils/config';
-
-type TConfigKey = 'hasSeenMarketplaceNudge' | 'hasSeenSwapMarketTab' | 'hasSeenOtcMarketTab';
+import { useConfig } from '@/contexts/ConfigProvider';
 
 type TProps = {
   className?: string;
-  configKey: TConfigKey;
+  configKey: TConfigFrontendBadgeKey;
   hideOnPathPrefix?: string;
   markAsSeen?: boolean;
   pathname?: string;
@@ -28,7 +26,7 @@ export const NewBadge = ({
   type = 'new',
 }: TProps) => {
   const { t } = useTranslation();
-  const config = useLoad(getConfig);
+  const { config, setConfig } = useConfig();
   const [showBadge, setShowBadge] = useState<boolean | undefined>(undefined);
 
   const persistAsSeen = useCallback(() => {
@@ -37,14 +35,13 @@ export const NewBadge = ({
     }
     setShowBadge(false);
     setConfig({ frontend: { [configKey]: true } });
-  }, [configKey, showBadge]);
+  }, [configKey, setConfig, showBadge]);
 
   useEffect(() => {
     if (!config) {
       return;
     }
-    const frontendConfig = config.frontend as Record<string, unknown> | undefined;
-    const hasSeenBadge = Boolean(frontendConfig?.[configKey]);
+    const hasSeenBadge = config.frontend[configKey];
     setShowBadge(currentShowBadge => (
       currentShowBadge === false ? false : !hasSeenBadge
     ));

frontends/web/src/components/status/status.tsx

@@ -1,7 +1,8 @@
 // SPDX-License-Identifier: Apache-2.0
 
-import { ReactNode, useCallback, useEffect, useState } from 'react';
-import { getConfig, setConfig } from '@/utils/config';
+import { ReactNode } from 'react';
+import type { TConfigFrontendDismissibleKey } from '@/api/config';
+import { useConfig } from '@/contexts/ConfigProvider';
 import { CloseXDark, CloseXWhite } from '@/components/icon';
 import { useDarkmode } from '@/hooks/darkmode';
 import { Message } from '@/components/message/message';
@@ -15,7 +16,7 @@ type TProps = {
   // used as keyName in the config if dismissing the status should be persisted, so it is not
   // shown again. Use an empty string if it should be dismissible without storing it in the
   // config, so the status will be shown again the next time.
-  dismissibleKey: string;
+  dismissibleKey: TConfigFrontendDismissibleKey | '';
   className?: string;
   children: ReactNode;
 };
@@ -28,21 +29,15 @@ export const Status = ({
   className = '',
   children,
 }: TProps) => {
-  // note: dismissible can be falsy i.e. empty string ''
-  const [show, setShow] = useState(dismissibleKey ? false : true);
-
+  const { config, setConfig } = useConfig();
   const { isDarkMode } = useDarkmode();
 
-  const checkConfig = useCallback(async () => {
-    if (dismissibleKey) {
-      const config = await getConfig();
-      setShow(!config ? true : !config.frontend[dismissibleKey]);
-    }
-  }, [dismissibleKey]);
-
-  useEffect(() => {
-    checkConfig();
-  }, [checkConfig]);
+  // note: dismissibleKey can be falsy i.e. empty string ''
+  const show = hidden
+    ? false
+    : dismissibleKey
+      ? (config ? !config.frontend[dismissibleKey] : true)
+      : true;
 
   const dismiss = async () => {
     if (!dismissibleKey) {
@@ -53,10 +48,9 @@ export const Status = ({
         [dismissibleKey]: true,
       }
     });
-    setShow(false);
   };
 
-  if (hidden || !show) {
+  if (!show) {
     return null;
   }
 

frontends/web/src/components/terms/bitrefill-terms.tsx

@@ -6,7 +6,7 @@ import { TAccount } from '@/api/account';
 import { isBitcoinOnly } from '@/routes/account/utils';
 import { getBitrefillHelpLink, getBitrefillLimitsLink } from '@/routes/market/bitrefill-guide';
 import { Button, Checkbox } from '@/components/forms';
-import { setConfig } from '@/utils/config';
+import { useConfig } from '@/contexts/ConfigProvider';
 import { A } from '../anchor/anchor';
 import style from './terms.module.css';
 
@@ -32,12 +32,12 @@ export const getBitrefillPrivacyLink = () => {
   return 'https://www.bitrefill.com/privacy/?hl=' + hl;
 };
 
-const handleSkipDisclaimer = (e: ChangeEvent<HTMLInputElement>) => {
-  setConfig({ frontend: { skipBitrefillWidgetDisclaimer: e.target.checked } });
-};
-
 export const BitrefillTerms = ({ account, onAgreedTerms }: TProps) => {
   const { t } = useTranslation();
+  const { setConfig } = useConfig();
+  const handleSkipDisclaimer = (e: ChangeEvent<HTMLInputElement>) => {
+    setConfig({ frontend: { skipBitrefillWidgetDisclaimer: e.target.checked } });
+  };
 
   const isBitcoin = isBitcoinOnly(account.coinCode);
   return (

frontends/web/src/components/terms/bitsurance-terms.tsx

@@ -3,7 +3,7 @@
 import { useTranslation } from 'react-i18next';
 import { ChangeEvent } from 'react';
 import { Button, Checkbox } from '@/components/forms';
-import { setConfig } from '@/utils/config';
+import { useConfig } from '@/contexts/ConfigProvider';
 import { A } from '@/components/anchor/anchor';
 import style from './terms.module.css';
 import { i18n } from '@/i18n/i18n';
@@ -14,6 +14,7 @@ type TProps = {
 
 export const BitsuranceTerms = ({ onAgreedTerms }: TProps) => {
   const { t } = useTranslation();
+  const { setConfig } = useConfig();
   const handleSkipDisclaimer = (e: ChangeEvent<HTMLInputElement>) => {
     setConfig({ frontend: { skipBitsuranceDisclaimer: e.target.checked } });
   };

frontends/web/src/components/terms/btcdirect-otc-terms.tsx

@@ -3,7 +3,7 @@
 import { useTranslation } from 'react-i18next';
 import { ChangeEvent } from 'react';
 import { Button, Checkbox } from '@/components/forms';
-import { setConfig } from '@/utils/config';
+import { useConfig } from '@/contexts/ConfigProvider';
 import { i18n } from '@/i18n/i18n';
 import { A } from '../anchor/anchor';
 import style from './terms.module.css';
@@ -27,12 +27,12 @@ export const getBTCDirectPrivacyLink = () => {
   }
 };
 
-const handleSkipDisclaimer = (e: ChangeEvent<HTMLInputElement>) => {
-  setConfig({ frontend: { skipBTCDirectOTCDisclaimer: e.target.checked } });
-};
-
 export const BTCDirectOTCTerms = ({ onContinue }: TProps) => {
   const { t } = useTranslation();
+  const { setConfig } = useConfig();
+  const handleSkipDisclaimer = (e: ChangeEvent<HTMLInputElement>) => {
+    setConfig({ frontend: { skipBTCDirectOTCDisclaimer: e.target.checked } });
+  };
 
   return (
     <div className={style.disclaimerContainer}>

frontends/web/src/components/terms/btcdirect-terms.tsx

@@ -4,7 +4,7 @@ import { ChangeEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 import { isBitcoinOnly } from '@/routes/account/utils';
 import { Button, Checkbox } from '@/components/forms';
-import { setConfig } from '@/utils/config';
+import { useConfig } from '@/contexts/ConfigProvider';
 import { TAccount } from '@/api/account';
 import { A } from '@/components/anchor/anchor';
 import { getBTCDirectAboutUsLink } from '@/routes/market/components/infocontent';
@@ -16,12 +16,12 @@ type TProps = {
   onAgreedTerms: () => void;
 };
 
-const handleSkipDisclaimer = (e: ChangeEvent<HTMLInputElement>) => {
-  setConfig({ frontend: { skipBTCDirectWidgetDisclaimer: e.target.checked } });
-};
-
 export const BTCDirectTerms = ({ account, onAgreedTerms }: TProps) => {
   const { t } = useTranslation();
+  const { setConfig } = useConfig();
+  const handleSkipDisclaimer = (e: ChangeEvent<HTMLInputElement>) => {
+    setConfig({ frontend: { skipBTCDirectWidgetDisclaimer: e.target.checked } });
+  };
 
   const isBitcoin = isBitcoinOnly(account.coinCode);