frontend: move sdcard warning banner into its own component

Move sdcard banner into a component, with that it can be used in
GlobalBanners and is shown in different views.

Author: thisconnect

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

@@ -14,13 +14,24 @@
  * limitations under the License.
  */
 
+import type { AccountCode } from '@/api/account';
+import type { TDevices } from '@/api/devices';
 import { Testing } from './testing';
 import { Update } from './update';
 import { Banner } from './banner';
 import { MobileDataWarning } from './mobiledatawarning';
 import { Offline } from './offline';
+import { SDCardWarning } from './sdcard';
 
-export const GlobalBanners = () => {
+type Props = {
+  code?: AccountCode;
+  devices: TDevices;
+}
+
+export const GlobalBanners = ({
+  code,
+  devices,
+}: Props) => {
   return (
     <>
       <Testing />
@@ -30,6 +41,7 @@ export const GlobalBanners = () => {
       <Banner msgKey="bitbox02nova" />
       <MobileDataWarning />
       <Offline />
+      <SDCardWarning code={code} devices={devices} />
     </>
   );
 };

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

@@ -0,0 +1,40 @@
+/**
+ * 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 type { AccountCode } from '@/api/account';
+import type { TDevices } from '@/api/devices';
+import { useSDCard } from '@/hooks/sdcard';
+import { Status } from '@/components/status/status';
+
+type Props = {
+  code?: AccountCode;
+  devices: TDevices;
+}
+
+export const SDCardWarning = ({
+  code,
+  devices,
+}: Props) => {
+  const { t } = useTranslation();
+  const hasCard = useSDCard(devices, code ? [code] : undefined);
+
+  return (
+    <Status hidden={!hasCard} type="warning">
+      {t('warning.sdcard')}
+    </Status>
+  );
+};

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

@@ -23,7 +23,6 @@ import { statusChanged, syncAddressesCount, syncdone } from '@/api/accountsync';
 import { bitsuranceLookup } from '@/api/bitsurance';
 import { TDevices } from '@/api/devices';
 import { getMarketVendors, MarketVendors } from '@/api/market';
-import { useSDCard } from '@/hooks/sdcard';
 import { alertUser } from '@/components/alert/Alert';
 import { Balance } from '@/components/balance/balance';
 import { HeadersSync } from '@/components/headerssync/headerssync';
@@ -178,8 +177,6 @@ const RemountAccount = ({
     getConfig().then(({ backend }) => setUsesProxy(backend.proxy.useProxy));
   }, [maybeCheckBitsuranceStatus]);
 
-  const hasCard = useSDCard(devices, [code]);
-
   const onAccountChanged = useCallback((status: accountApi.IStatus | undefined) => {
     if (status === undefined || status.fatalError) {
       return;
@@ -275,10 +272,7 @@ const RemountAccount = ({
       <GuidedContent>
         <Main>
           <ContentWrapper>
-            <GlobalBanners />
-            <Status hidden={!hasCard} type="warning">
-              {t('warning.sdcard')}
-            </Status>
+            <GlobalBanners code={code} devices={devices} />
             <Status className={style.status} hidden={status === undefined || !status.offlineError} type="error">
               {offlineErrorTextLines.join('\n')}
             </Status>

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

@@ -23,8 +23,6 @@ import { statusChanged, syncdone } from '@/api/accountsync';
 import { unsubscribe } from '@/utils/subscriptions';
 import { TUnsubscribe } from '@/utils/transport-common';
 import { useMountedRef } from '@/hooks/mount';
-import { useSDCard } from '@/hooks/sdcard';
-import { Status } from '@/components/status/status';
 import { GuideWrapper, GuidedContent, Header, Main } from '@/components/layout';
 import { View } from '@/components/view/view';
 import { Chart } from './chart';
@@ -66,8 +64,6 @@ export const AccountsSummary = ({
   const [accountsBalanceSummary, setAccountsBalanceSummary] = useState<accountApi.TAccountsBalanceSummary>();
   const [balances, setBalances] = useState<Balances>();
 
-  const hasCard = useSDCard(devices);
-
   const getChartData = useCallback(async () => {
     // replace previous timer if present
     if (summaryReqTimerID.current) {
@@ -180,10 +176,7 @@ export const AccountsSummary = ({
       <GuidedContent>
         <Main>
           <ContentWrapper>
-            <GlobalBanners />
-            <Status hidden={!hasCard} type="warning">
-              {t('warning.sdcard')}
-            </Status>
+            <GlobalBanners devices={devices} />
             {accountsByKeystore.map(({ keystore }) => (
               <BackupReminder
                 key={keystore.rootFingerprint}

frontends/web/src/routes/device/no-device-connected.tsx

@@ -37,7 +37,7 @@ export const NoDeviceConnected = ({
       <GuideWrapper>
         <GuidedContent>
           <ContentWrapper>
-            <GlobalBanners />
+            <GlobalBanners devices={devices} />
           </ContentWrapper>
           <Header
             hideSidebarToggler

frontends/web/src/routes/device/waiting.tsx

@@ -64,7 +64,7 @@ export const Waiting = () => {
       <GuidedContent>
         <Main>
           <ContentWrapper>
-            <GlobalBanners />
+            <GlobalBanners devices={devices} />
           </ContentWrapper>
           <Header title={<h2>{t('welcome.title')}</h2>}>
             <OutlinedSettingsButton />

frontends/web/src/routes/settings/about.tsx

@@ -33,7 +33,7 @@ export const About = ({ devices, hasAccounts }: TPagePropsWithSettingsTabs) => {
       <GuidedContent>
         <Main>
           <ContentWrapper>
-            <GlobalBanners />
+            <GlobalBanners devices={devices} />
           </ContentWrapper>
           <Header
             hideSidebarToggler

frontends/web/src/routes/settings/advanced-settings.tsx

@@ -80,7 +80,7 @@ export const AdvancedSettings = ({ devices, hasAccounts }: TPagePropsWithSetting
       <GuidedContent>
         <Main>
           <ContentWrapper>
-            <GlobalBanners />
+            <GlobalBanners devices={devices} />
           </ContentWrapper>
           <Header
             hideSidebarToggler

frontends/web/src/routes/settings/bb02-settings.tsx

@@ -66,7 +66,7 @@ const BB02Settings = ({ deviceID, devices, hasAccounts }: TWrapperProps) => {
       <GuideWrapper>
         <GuidedContent>
           <ContentWrapper>
-            <GlobalBanners />
+            <GlobalBanners devices={devices} />
           </ContentWrapper>
           <Header
             hideSidebarToggler

frontends/web/src/routes/settings/general.tsx

@@ -39,7 +39,7 @@ export const General = ({ devices, hasAccounts }: TPagePropsWithSettingsTabs) =>
       <GuidedContent>
         <Main>
           <ContentWrapper>
-            <GlobalBanners />
+            <GlobalBanners devices={devices} />
           </ContentWrapper>
           <Header
             hideSidebarToggler