frontend: add backup reminder banner.

For each wallet, the first time it crosses 1000 USD/CHF/EUR, display a
banner suggesting users to create a paper backup of their seed.

Author: bznein

backend/accounts.go

@@ -343,6 +343,32 @@ type KeystoreBalance = struct {
 	CoinsBalance AmountsByCoin `json:"coinsBalance"`
 }
 
+// AccountsFiatBalance returns the total fiat balance of a list of accounts.
+func (backend *Backend) AccountsFiatBalance(accounts AccountsList, fiatUnit string) (*big.Rat, error) {
+	keystoreBalance := new(big.Rat)
+
+	for _, account := range accounts {
+		if account.Config().Config.Inactive || account.Config().Config.HiddenBecauseUnused {
+			continue
+		}
+		if account.FatalError() {
+			continue
+		}
+		err := account.Initialize()
+		if err != nil {
+			return nil, err
+		}
+
+		accountFiatBalance, err := backend.accountFiatBalance(account, fiatUnit)
+		if err != nil {
+			return nil, err
+		}
+		keystoreBalance.Add(keystoreBalance, accountFiatBalance)
+	}
+
+	return keystoreBalance, nil
+}
+
 // keystoresBalance returns a map of accounts' total balances across coins, grouped by keystore.
 func (backend *Backend) keystoresBalance() (map[string]KeystoreBalance, error) {
 	keystoreBalanceMap := make(map[string]KeystoreBalance)

backend/accounts_test.go

@@ -1575,3 +1575,62 @@ func TestCoinsTotalBalance(t *testing.T) {
 	require.Equal(t, coinpkg.CodeETH, coinsTotalBalance[2].CoinCode)
 	require.Equal(t, "4", coinsTotalBalance[2].FormattedAmount.Amount)
 }
+
+func TestAccountsFiatBalance(t *testing.T) {
+	b := newBackend(t, testnetDisabled, regtestDisabled)
+	defer b.Close()
+
+	b.makeBtcAccount = func(config *accounts.AccountConfig, coin *btc.Coin, gapLimits *types.GapLimits, getAddress func(*btc.Account, blockchain.ScriptHashHex) (*addresses.AccountAddress, bool, error), log *logrus.Entry) accounts.Interface {
+		accountMock := MockBtcAccount(t, config, coin, gapLimits, log)
+		accountMock.BalanceFunc = func() (*accounts.Balance, error) {
+			return accounts.NewBalance(coinpkg.NewAmountFromInt64(1e8), coinpkg.NewAmountFromInt64(0)), nil
+		}
+		return accountMock
+	}
+
+	b.makeEthAccount = func(config *accounts.AccountConfig, coin *eth.Coin, httpClient *http.Client, log *logrus.Entry) accounts.Interface {
+		accountMock := MockEthAccount(config, coin, httpClient, log)
+		accountMock.BalanceFunc = func() (*accounts.Balance, error) {
+			return accounts.NewBalance(coinpkg.NewAmountFromInt64(1e18), coinpkg.NewAmountFromInt64(0)), nil
+		}
+		return accountMock
+	}
+
+	ks1 := makeBitBox02Multi()
+
+	ks1Fingerprint, err := ks1.RootFingerprint()
+	require.NoError(t, err)
+
+	b.registerKeystore(ks1)
+	require.NoError(t, b.SetWatchonly(ks1Fingerprint, true))
+
+	// Up to 6 hidden accounts for BTC/LTC are added to be scanned even if the accounts are all
+	// empty. Calling this function too many times does not add more than that.
+	for i := 1; i <= 10; i++ {
+		b.maybeAddHiddenUnusedAccounts()
+	}
+
+	// This needs to be after all changes in accounts, otherwise it will try to fetch
+	// new values and fail.
+	b.ratesUpdater = rates.MockRateUpdater()
+	defer b.ratesUpdater.Stop()
+
+	accountsByKestore, err := b.AccountsByKeystore()
+	require.NoError(t, err)
+
+	expectedCurrencies := map[rates.Fiat]string{
+		rates.USD: "22.00",
+		rates.EUR: "18.90",
+		rates.CHF: "19.95",
+	}
+
+	accountList, ok := accountsByKestore[hex.EncodeToString(ks1Fingerprint)]
+	require.True(t, ok, "Expected accounts for keystore with fingerprint %s", hex.EncodeToString(ks1Fingerprint))
+
+	for currency, expectedBalance := range expectedCurrencies {
+		balance, err := b.AccountsFiatBalance(accountList, string(currency))
+		require.NoError(t, err)
+		require.Equalf(t, expectedBalance, balance.FloatString(2), "Got balance of %s, expected %s", balance.FloatString(2), expectedBalance)
+	}
+
+}

backend/handlers/handlers.go

@@ -26,6 +26,7 @@ import (
 	"net/http"
 	"os"
 	"runtime/debug"
+	"slices"
 
 	"github.com/BitBoxSwiss/bitbox-wallet-app/backend"
 	"github.com/BitBoxSwiss/bitbox-wallet-app/backend/accounts"
@@ -72,6 +73,7 @@ type Backend interface {
 	Testing() bool
 	Accounts() backend.AccountsList
 	AccountsByKeystore() (backend.KeystoresAccountsListMap, error)
+	AccountsFiatBalance(backend.AccountsList, string) (*big.Rat, error)
 	Keystore() keystore.Keystore
 	AccountsBalanceSummary() (*backend.AccountsBalanceSummary, error)
 	OnAccountInit(f func(accounts.Interface))
@@ -262,6 +264,7 @@ func NewHandlers(
 	getAPIRouterNoError(apiRouter)("/bluetooth/connect", handlers.postBluetoothConnect).Methods("POST")
 
 	getAPIRouterNoError(apiRouter)("/online", handlers.getOnline).Methods("GET")
+	getAPIRouterNoError(apiRouter)("/keystore/show-backup-banner/{rootFingerprint}", handlers.getKeystoreShowBackupBanner).Methods("GET")
 
 	devicesRouter := getAPIRouterNoError(apiRouter.PathPrefix("/devices").Subrouter())
 	devicesRouter("/registered", handlers.getDevicesRegistered).Methods("GET")
@@ -1494,3 +1497,50 @@ func (handlers *Handlers) postBluetoothConnect(r *http.Request) interface{} {
 func (handlers *Handlers) getOnline(r *http.Request) interface{} {
 	return handlers.backend.IsOnline()
 }
+
+func (handlers *Handlers) getKeystoreShowBackupBanner(r *http.Request) interface{} {
+	rootFingerint := mux.Vars(r)["rootFingerprint"]
+
+	type response struct {
+		Success bool   `json:"success"`
+		Show    bool   `json:"show,omitempty"`
+		Fiat    string `json:"fiat,omitempty"`
+	}
+
+	keystoresAccounts, err := handlers.backend.AccountsByKeystore()
+	if err != nil {
+		handlers.log.WithError(err).Error("Could not retrieve accounts by keystore")
+		return response{
+			Success: false,
+		}
+	}
+
+	defaultFiat := handlers.backend.Config().AppConfig().Backend.MainFiat
+
+	if !slices.Contains([]string{"USD", "CHF", "EUR"}, defaultFiat) {
+		// For the banner, if the fiat currency used by the user is not of these three,
+		// we default to USD.
+		defaultFiat = "USD"
+	}
+
+	accounts, ok := keystoresAccounts[rootFingerint]
+	if !ok {
+		handlers.log.WithField("fingerprint", rootFingerint).Error("No accounts found for the given root fingerprint")
+		return response{
+			Success: false,
+		}
+	}
+	balance, err := handlers.backend.AccountsFiatBalance(accounts, defaultFiat)
+	if err != nil {
+		handlers.log.WithError(err).Error("Could not retrieve fiat balance for account")
+		return response{
+			Success: false,
+		}
+	}
+
+	return response{
+		Success: true,
+		Show:    balance.Cmp(big.NewRat(1000, 1)) > 0,
+		Fiat:    defaultFiat,
+	}
+}

backend/rates/mock.go

@@ -36,9 +36,13 @@ func MockRateUpdater() *RateUpdater {
 	updater.last = map[string]map[string]float64{
 		"BTC": {
 			"USD": 21.0,
+			"EUR": 18.0,
+			"CHF": 19.0,
 		},
 		"ETH": {
 			"USD": 1.0,
+			"EUR": 0.9,
+			"CHF": 0.95,
 		},
 	}
 	return updater

frontends/web/src/api/backupBanner.ts

@@ -0,0 +1,28 @@
+
+/**
+ * Copyright 2025 Shift Crypto AG
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { apiGet } from '@/utils/request';
+
+export type TShowBackupBannerResponse = {
+  success: boolean;
+  show?: boolean;
+  fiat?: string;
+}
+
+export const getShowBackupBanner = (rootFingerprint: string): Promise<TShowBackupBannerResponse> => {
+  return apiGet(`keystore/show-backup-banner/${rootFingerprint}`);
+};

frontends/web/src/components/banners/backup.tsx

@@ -0,0 +1,80 @@
+/**
+ * Copyright 2025 Shift Crypto AG
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import { Status } from '@/components/status/status';
+import { MultilineMarkup } from '@/utils/markup';
+import { TKeystore } from '@/api/account';
+import { AppContext } from '@/contexts/AppContext';
+import { getShowBackupBanner, TShowBackupBannerResponse } from '@/api/backupBanner';
+import { useContext, useEffect, useState } from 'react';
+
+type BackupReminderProps = {
+  keystore: TKeystore;
+  deviceID: string;
+  trigger: number;
+}
+
+export const BackupReminder = ({ keystore, deviceID, trigger }: BackupReminderProps) => {
+  const { t } = useTranslation();
+  const [bannerResponse, setBannerResponse] = useState<TShowBackupBannerResponse|null>(null);
+  const { hideAmounts } = useContext(AppContext);
+
+  useEffect(() => {
+    getShowBackupBanner(keystore.rootFingerprint).then(setBannerResponse);
+  }, [keystore.rootFingerprint, trigger]);
+
+
+  if (hideAmounts) {
+    // If amounts are hidden, we don't show the backup reminder.
+    return;
+  }
+
+  if (!bannerResponse || !bannerResponse.success) {
+    return null;
+  }
+
+  const deviceSettingsURL = `/settings/device-settings/${deviceID}`;
+
+  return (
+    <Status
+      type="info"
+      hidden={!bannerResponse.show}
+      dismissible={`banner-backup-${keystore.rootFingerprint}`}>
+      <MultilineMarkup
+        tagName="span"
+        withBreaks
+        markup={t('account.backupReminder',
+          {
+            name: keystore.name,
+            fiat: bannerResponse.fiat,
+            link: deviceSettingsURL
+          })}
+      />
+      {keystore.connected ? (
+        <Link to={deviceSettingsURL}>{t('account.backupReminderLink')}</Link>
+      ) : (
+        <>
+          {t('connectKeystore.promptWithNameForBackup',
+            {
+              name: keystore.name
+            })}
+        </>
+      )
+      }
+    </Status>
+  );
+};

frontends/web/src/locales/en/app.json

@@ -2,6 +2,8 @@
   "account": {
     "account": "Account",
     "accounts": "Accounts",
+    "backupReminder": "Your wallet <strong>{{name}}</strong> just passed {{fiat}} 1000!\n\nWe recommend creating a paper backup for extra protection. It's quick and simple.",
+    "backupReminderLink": "Create paper backup",
     "disconnect": "Connection lost. Retrying…",
     "export": "Export",
     "exportTransactions": "Export transactions to downloads folder as CSV file",
@@ -638,7 +640,8 @@
   "confirmOnDevice": "Please confirm on your device.",
   "connectKeystore": {
     "promptNoName": "Please connect your BitBox to continue",
-    "promptWithName": "Please connect your BitBox named \"{{name}}\" to continue"
+    "promptWithName": "Please connect your BitBox named \"{{name}}\" to continue",
+    "promptWithNameForBackup": "Please connect your BitBox named \"{{name}}\" to create a paper backup"
   },
   "darkmode": {
     "toggle": "Dark mode"

frontends/web/src/routes/account/summary/accountssummary.tsx

@@ -39,6 +39,7 @@ import { getAccountsByKeystore, isAmbiguousName } from '@/routes/account/utils';
 import { RatesContext } from '@/contexts/RatesContext';
 import { ContentWrapper } from '@/components/contentwrapper/contentwrapper';
 import { GlobalBanners } from '@/components/banners';
+import { BackupReminder } from '@/components/banners/backup';
 
 type TProps = {
   accounts: accountApi.IAccount[];
@@ -60,6 +61,7 @@ export const AccountsSummary = ({
   const { defaultCurrency } = useContext(RatesContext);
 
   const accountsByKeystore = getAccountsByKeystore(accounts);
+  const [balancesTrigger, setBalancesTrigger] = useState<number>(Date.now());
 
   const [chartData, setChartData] = useState<accountApi.TChartData>();
   const [accountsBalanceSummary, setAccountsBalanceSummary] = useState<accountApi.TAccountsBalanceSummary>();
@@ -115,6 +117,7 @@ export const AccountsSummary = ({
       ...prevBalances,
       [code]: balance.balance
     }));
+    setBalancesTrigger(Date.now());
   }, [mounted]);
 
   const update = useCallback((code: accountApi.AccountCode) => {
@@ -179,6 +182,14 @@ export const AccountsSummary = ({
             <Status hidden={!hasCard} type="warning">
               {t('warning.sdcard')}
             </Status>
+            {accountsByKeystore.map(({ keystore }) => (
+              <BackupReminder
+                key={keystore.rootFingerprint}
+                keystore={keystore}
+                deviceID={Object.keys(devices)[0]}
+                trigger={balancesTrigger}
+              />
+            ))}
           </ContentWrapper>
           <Header title={<h2>{t('accountSummary.title')}</h2>}>
             <HideAmountsButton />