From f8bccf4abab96abbe5601c746aa112a05d767a46 Mon Sep 17 00:00:00 2001
From: thisconnect <this@shiftcrypto.ch>
Date: Tue, 31 Oct 2023 11:44:45 +0100
Subject: [PATCH 1/4] frontend: add eslint rule restrict-template-expressions

So that we do not accidentally pass undefined, null, booleans or
just any type in tempalte literals, see:

    `all these should error ${false} ${undefined} ${[]} ${null}`

This is a eslint rule, so only make weblint will check.
---
 frontends/web/.eslintrc.json | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/frontends/web/.eslintrc.json b/frontends/web/.eslintrc.json
index 1fdeb8e2ad..104229a2b7 100644
--- a/frontends/web/.eslintrc.json
+++ b/frontends/web/.eslintrc.json
@@ -57,7 +57,16 @@
   "overrides": [
     {
       "files": ["**/*.ts?(x)"],
-      "rules": { }
+      "rules": {
+        "@typescript-eslint/restrict-template-expressions": ["error", {
+          "allowAny": false,
+          "allowBoolean": false,
+          "allowNullish": false
+        }]
+      },
+      "parserOptions": {
+        "project": ["./tsconfig.json"]
+      }
     },
     {
       "files": ["**/*.test.ts?(x)"],

From c6ee6e07d593e5a1a0dac0601275be24e0cf4651 Mon Sep 17 00:00:00 2001
From: thisconnect <this@shiftcrypto.ch>
Date: Mon, 2 Dec 2024 14:19:00 +0100
Subject: [PATCH 2/4] frontend: fix restrict-template-expressions

Last commit introduced restrict-template-expressions, with this all
reported problems should be fixed.
---
 frontends/web/src/api/subscribe.ts            |  2 +-
 frontends/web/src/components/forms/select.tsx |  2 +-
 frontends/web/src/components/icon/logo.tsx    | 41 +++++++++----------
 .../web/src/contexts/WCWeb3WalletProvider.tsx | 12 +++---
 frontends/web/src/i18n/i18n.test.tsx          |  2 +-
 .../src/routes/account/info/buyReceiveCTA.tsx |  6 ++-
 .../web/src/routes/account/info/info.tsx      | 17 +++++---
 .../src/routes/account/send/feetargets.tsx    | 28 ++++++-------
 .../incoming-pairing/incoming-pairing.tsx     |  3 +-
 .../src/routes/device/bitbox01/restore.tsx    |  8 ++--
 .../settings/components/mobile-pairing.tsx    | 24 +++++------
 .../src/routes/device/bitbox01/setup/goal.jsx |  2 +-
 .../device/bitbox01/setup/initialize.tsx      | 18 ++++----
 .../bitbox01/setup/security-information.tsx   | 18 ++++----
 .../device/bitbox01/setup/seed-create-new.jsx |  2 +-
 .../device/bitbox01/setup/seed-restore.jsx    |  2 +-
 .../routes/device/bitbox01/setup/success.jsx  |  2 +-
 .../src/routes/device/bitbox02/passphrase.tsx |  8 ++--
 .../src/routes/device/bitbox02/setup/name.tsx |  2 +-
 .../defaultCurrencyDropdownSetting.tsx        |  3 +-
 .../appearance/languageDropdownSetting.tsx    |  2 +-
 .../attestation-check-setting.tsx             |  2 +-
 22 files changed, 110 insertions(+), 96 deletions(-)

diff --git a/frontends/web/src/api/subscribe.ts b/frontends/web/src/api/subscribe.ts
index 59122cf557..602a893c23 100644
--- a/frontends/web/src/api/subscribe.ts
+++ b/frontends/web/src/api/subscribe.ts
@@ -42,7 +42,7 @@ export const subscribeEndpoint = <T>(
         .catch(console.error);
       break;
     default:
-      throw new Error(`Event: ${event} not supported`);
+      throw new Error(`Event: ${JSON.stringify(event)} not supported`);
     }
   });
 };
diff --git a/frontends/web/src/components/forms/select.tsx b/frontends/web/src/components/forms/select.tsx
index 6e7e22269f..43ec5d09e6 100644
--- a/frontends/web/src/components/forms/select.tsx
+++ b/frontends/web/src/components/forms/select.tsx
@@ -41,7 +41,7 @@ export const Select = ({
       <select id={id} {...props}>
         {options.map(({ value, text, disabled = false }) => (
           <option
-            key={`${value}`}
+            key={String(value)}
             value={value}
             disabled={disabled}
           >
diff --git a/frontends/web/src/components/icon/logo.tsx b/frontends/web/src/components/icon/logo.tsx
index 48f698ae96..a80eb12b03 100644
--- a/frontends/web/src/components/icon/logo.tsx
+++ b/frontends/web/src/components/icon/logo.tsx
@@ -56,23 +56,22 @@ import PAXG_GREY from './assets/paxg-white.svg';
 import ShiftLogo from './assets/shift-cryptosecurity-logo.svg';
 import style from './logo.module.css';
 
-interface GenericProps {
-    [property: string]: any;
-}
 
-export const BitBox = (props: GenericProps) => <img {...props} draggable={false} src={BitBoxLogo} alt="BitBox" className={style.logo} />;
-export const BitBox02 = (props: GenericProps) => <img {...props} draggable={false} src={BitBox02Logo} alt="BitBox02" className={style.logo} />;
-export const BitBox02Inverted = (props: GenericProps) => <img {...props} draggable={false} src={BitBox02InvertedLogo} alt="BitBox02" className={style.logo} />;
-export const AppLogo = (props: GenericProps) => <img {...props} draggable={false} src={AppLogoImg} alt="BitBox" className={style.logo} />;
-export const AppLogoInverted = (props: GenericProps) => <img {...props} draggable={false} src={AppLogoInvertedImg} alt="BitBox" className={style.logo} />;
-export const BitBoxSwiss = (props: GenericProps) => <img {...props} draggable={false} src={BitBoxSwissLogo} alt="BitBox" className={style.logo} />;
-export const BitBoxSwissInverted = (props: GenericProps) => <img {...props} draggable={false} src={BitBoxSwissInvertedLogo} alt="BitBox" className={style.logo} />;
-export const Shift = (props: GenericProps) => <img {...props} draggable={false} src={ShiftLogo} alt="Shift Crypto" className={style.logo} />;
-export const SwissMadeOpenSource = ({ large: boolean, className, ...props }: GenericProps) => <img {...props} draggable={false} src={SwissOpenSourceLight} alt="Swiss Made Open Source" className={`${style.swissOpenSource} ${props.large ? style.large : ''} ${className ? className : ''}`} />;
-export const SwissMadeOpenSourceDark = ({ large: boolean, className, ...props }: GenericProps) => <img {...props} draggable={false} src={SwissOpenSourceDark} alt="Swiss Made Open Source" className={`${style.swissOpenSource} ${props.large ? style.large : ''} ${className ? className : ''}`} />;
+type ImgProps = JSX.IntrinsicElements['img'];
+
+export const BitBox = (props: ImgProps) => <img {...props} draggable={false} src={BitBoxLogo} alt="BitBox" className={style.logo} />;
+export const BitBox02 = (props: ImgProps) => <img {...props} draggable={false} src={BitBox02Logo} alt="BitBox02" className={style.logo} />;
+export const BitBox02Inverted = (props: ImgProps) => <img {...props} draggable={false} src={BitBox02InvertedLogo} alt="BitBox02" className={style.logo} />;
+export const AppLogo = (props: ImgProps) => <img {...props} draggable={false} src={AppLogoImg} alt="BitBox" className={style.logo} />;
+export const AppLogoInverted = (props: ImgProps) => <img {...props} draggable={false} src={AppLogoInvertedImg} alt="BitBox" className={style.logo} />;
+export const BitBoxSwiss = (props: ImgProps) => <img {...props} draggable={false} src={BitBoxSwissLogo} alt="BitBox" className={style.logo} />;
+export const BitBoxSwissInverted = (props: ImgProps) => <img {...props} draggable={false} src={BitBoxSwissInvertedLogo} alt="BitBox" className={style.logo} />;
+export const Shift = (props: ImgProps) => <img {...props} draggable={false} src={ShiftLogo} alt="Shift Crypto" className={style.logo} />;
+export const SwissMadeOpenSource = ({ className, ...props }: ImgProps) => <img {...props} draggable={false} src={SwissOpenSourceLight} alt="Swiss Made Open Source" className={`${style.swissOpenSource} ${className ? className : ''}`} />;
+export const SwissMadeOpenSourceDark = ({ className, ...props }: ImgProps) => <img {...props} draggable={false} src={SwissOpenSourceDark} alt="Swiss Made Open Source" className={`${style.swissOpenSource} ${className ? className : ''}`} />;
 
 type LogoMap = {
-    [key in CoinCode]: string[];
+  [key in CoinCode]: string[];
 }
 
 const logoMap: LogoMap = {
@@ -96,12 +95,12 @@ const logoMap: LogoMap = {
   'eth-erc20-paxg': [PAXG, PAXG_GREY],
 };
 
-interface Props {
-    active?: boolean;
-    alt?: string;
-    className?: string;
-    coinCode: CoinCode;
-    stacked?: boolean;
+type LogoProps = {
+  active?: boolean;
+  alt?: string;
+  className?: string;
+  coinCode: CoinCode;
+  stacked?: boolean;
 }
 
 export const Logo = ({
@@ -109,7 +108,7 @@ export const Logo = ({
   active,
   stacked,
   ...rest
-}: Props) => {
+}: LogoProps) => {
   if (!logoMap[coinCode]) {
     console.error('logo undefined for ', coinCode);
     return null;
diff --git a/frontends/web/src/contexts/WCWeb3WalletProvider.tsx b/frontends/web/src/contexts/WCWeb3WalletProvider.tsx
index 6b1c528fa3..42b52070c9 100644
--- a/frontends/web/src/contexts/WCWeb3WalletProvider.tsx
+++ b/frontends/web/src/contexts/WCWeb3WalletProvider.tsx
@@ -23,8 +23,8 @@ import { useLoad } from '@/hooks/api';
 import { getConfig, setConfig } from '@/utils/config';
 
 type TProps = {
-    children: ReactNode;
-  }
+  children: ReactNode;
+}
 
 export const WCWeb3WalletProvider = ({ children }: TProps) => {
   const { t } = useTranslation();
@@ -83,13 +83,13 @@ export const WCWeb3WalletProvider = ({ children }: TProps) => {
       }
       await web3wallet?.core.pairing.pair({ uri });
       setConfig({ frontend: { hasUsedWalletConnect: true } });
-    } catch (e: any) {
-      console.error(`Wallet connect attempt to pair error ${e}`);
-      if (e.message.includes('Pairing already exists')) {
+    } catch (error: any) {
+      console.error('Wallet connect attempt to pair error', error);
+      if (error?.message?.includes('Pairing already exists')) {
         throw new Error(t('walletConnect.useNewUri'));
       }
       //unexpected error, display native error message
-      throw new Error(e.message);
+      throw new Error(error.message);
     }
   };
 
diff --git a/frontends/web/src/i18n/i18n.test.tsx b/frontends/web/src/i18n/i18n.test.tsx
index 5e91b1cbf4..da1fdf9814 100644
--- a/frontends/web/src/i18n/i18n.test.tsx
+++ b/frontends/web/src/i18n/i18n.test.tsx
@@ -39,7 +39,7 @@ describe('i18n', () => {
       { nativeLocale: 'fr', newLang: 'en', userLang: 'en' },
     ];
     table.forEach((test) => {
-      it(`sets userLanguage to ${test.userLang} if native-locale is ${test.nativeLocale}`, async () => {
+      it(`sets userLanguage to ${test.userLang || 'null'} if native-locale is ${test.nativeLocale}`, async () => {
         (apiGet as Mock).mockImplementation(endpoint => {
           switch (endpoint) {
           case 'config': { return Promise.resolve({}); }
diff --git a/frontends/web/src/routes/account/info/buyReceiveCTA.tsx b/frontends/web/src/routes/account/info/buyReceiveCTA.tsx
index d92000518d..bee2bf9076 100644
--- a/frontends/web/src/routes/account/info/buyReceiveCTA.tsx
+++ b/frontends/web/src/routes/account/info/buyReceiveCTA.tsx
@@ -54,14 +54,16 @@ export const BuyReceiveCTA = ({
   const isMobile = useMediaQuery('(max-width: 768px)');
 
   const onExchangeCTA = () => navigate(code ? `/exchange/info/${code}` : '/exchange/info');
-  const onWalletConnect = () => navigate(`/account/${code}/wallet-connect/dashboard`);
+  const onWalletConnect = () => code && navigate(`/account/${code}/wallet-connect/dashboard`);
   const onReceiveCTA = () => {
     if (balanceList) {
       if (balanceList.length > 1) {
         navigate('/accounts/select-receive');
         return;
       }
-      navigate(`/account/${code}/receive`);
+      if (code) {
+        navigate(`/account/${code}/receive`);
+      }
     }
   };
 
diff --git a/frontends/web/src/routes/account/info/info.tsx b/frontends/web/src/routes/account/info/info.tsx
index cd8954a0c6..163ad0e8f9 100644
--- a/frontends/web/src/routes/account/info/info.tsx
+++ b/frontends/web/src/routes/account/info/info.tsx
@@ -28,8 +28,8 @@ import { Status } from '@/components/status/status';
 import style from './info.module.css';
 
 type TProps = {
-    accounts: IAccount[];
-    code: AccountCode;
+  accounts: IAccount[];
+  code: AccountCode;
 };
 
 export const Info = ({
@@ -57,6 +57,8 @@ export const Info = ({
     setViewXPub((viewXPub + 1) % numberOfXPubs);
   };
 
+  const xpubType = xpubTypes[(viewXPub + 1) % numberOfXPubs];
+
   return (
     <div className="contentWithGuide">
       <div className="container">
@@ -75,10 +77,13 @@ export const Info = ({
                     current: `${viewXPub + 1}`,
                     numberOfXPubs: numberOfXPubs.toString(),
                     scriptType: config.bitcoinSimple.scriptType.toUpperCase(),
-                  })}<br />
-                  <button className={style.nextButton} onClick={showNextXPub}>
-                    {t(`accountInfo.xpubTypeChangeBtn.${xpubTypes[(viewXPub + 1) % numberOfXPubs]}`)}
-                  </button>
+                  })}
+                  <br />
+                  {xpubType && (
+                    <button className={style.nextButton} onClick={showNextXPub}>
+                      {t(`accountInfo.xpubTypeChangeBtn.${xpubType}`)}
+                    </button>
+                  )}
                 </p>
               ) : null}
               { (config.bitcoinSimple?.scriptType === 'p2tr') ? (
diff --git a/frontends/web/src/routes/account/send/feetargets.tsx b/frontends/web/src/routes/account/send/feetargets.tsx
index 5371e1616e..e7a21e608c 100644
--- a/frontends/web/src/routes/account/send/feetargets.tsx
+++ b/frontends/web/src/routes/account/send/feetargets.tsx
@@ -26,22 +26,21 @@ import { customFeeUnit, getCoinCode, isEthereumBased } from '@/routes/account/ut
 import style from './feetargets.module.css';
 
 type Props = {
-    accountCode: accountApi.AccountCode;
-    coinCode: accountApi.CoinCode;
-    disabled: boolean;
-    fiatUnit: accountApi.ConversionUnit;
-    proposedFee?: accountApi.IAmount;
-    customFee: string;
-    showCalculatingFeeLabel?: boolean;
-    onFeeTargetChange: (code: accountApi.FeeTargetCode) => void;
-    onCustomFee: (customFee: string) => void;
-    error?: string;
+  accountCode: accountApi.AccountCode;
+  coinCode: accountApi.CoinCode;
+  disabled: boolean;
+  fiatUnit: accountApi.ConversionUnit;
+  proposedFee?: accountApi.IAmount;
+  customFee: string;
+  showCalculatingFeeLabel?: boolean;
+  onFeeTargetChange: (code: accountApi.FeeTargetCode) => void;
+  onCustomFee: (customFee: string) => void;
+  error?: string;
 }
 
-
 type TOptions = {
-    value: accountApi.FeeTargetCode;
-    text: string;
+  value: accountApi.FeeTargetCode;
+  text: string;
 }
 
 export const FeeTargets = ({
@@ -113,7 +112,8 @@ export const FeeTargets = ({
       return '';
     }
     const { amount, unit, conversions } = proposedFee;
-    return `${amount} ${unit} ${conversions ? ` = ${conversions[fiatUnit]} ${fiatUnit}` : ''}`;
+    const conversion = (conversions && conversions[fiatUnit]) ? ` = ${conversions[fiatUnit]} ${fiatUnit}` : '';
+    return `${amount} ${unit} ${conversion}`;
   };
 
   if (options === null) {
diff --git a/frontends/web/src/routes/account/walletconnect/components/incoming-pairing/incoming-pairing.tsx b/frontends/web/src/routes/account/walletconnect/components/incoming-pairing/incoming-pairing.tsx
index d326971daf..4bef44ef58 100644
--- a/frontends/web/src/routes/account/walletconnect/components/incoming-pairing/incoming-pairing.tsx
+++ b/frontends/web/src/routes/account/walletconnect/components/incoming-pairing/incoming-pairing.tsx
@@ -96,9 +96,8 @@ export const WCIncomingPairing = ({
 
       onApprove();
     } catch (e: any) {
-      console.error(`Wallet connect approve pairing error ${e}`);
+      console.error('Wallet connect approve pairing error', e);
 
-      console.error(e);
       if (e.message.includes('Non conforming namespaces')) {
         alertUser(t('walletConnect.invalidPairingChain',
           {
diff --git a/frontends/web/src/routes/device/bitbox01/restore.tsx b/frontends/web/src/routes/device/bitbox01/restore.tsx
index cdfc58cac2..8888bb1c69 100644
--- a/frontends/web/src/routes/device/bitbox01/restore.tsx
+++ b/frontends/web/src/routes/device/bitbox01/restore.tsx
@@ -98,9 +98,11 @@ class Restore extends Component<Props, State> {
           route('/', true);
         }
       } else {
-        alertUser(this.props.t(`backup.restore.error.e${code}`, {
-          defaultValue: errorMessage,
-        }));
+        if (typeof code === 'string') {
+          alertUser(this.props.t(`backup.restore.error.e${code}`, {
+            defaultValue: errorMessage,
+          }));
+        }
       }
     });
   };
diff --git a/frontends/web/src/routes/device/bitbox01/settings/components/mobile-pairing.tsx b/frontends/web/src/routes/device/bitbox01/settings/components/mobile-pairing.tsx
index eb40141c8d..17b89aed69 100644
--- a/frontends/web/src/routes/device/bitbox01/settings/components/mobile-pairing.tsx
+++ b/frontends/web/src/routes/device/bitbox01/settings/components/mobile-pairing.tsx
@@ -29,20 +29,20 @@ import { apiPost } from '../../../../../utils/request';
 import { A } from '../../../../../components/anchor/anchor';
 import style from '../../bitbox01.module.css';
 
-interface PairingProps {
-    deviceID: string;
-    deviceLocked: boolean;
-    paired: boolean;
-    hasMobileChannel: boolean;
-    onPairingEnabled: () => void;
+type PairingProps = {
+  deviceID: string;
+  deviceLocked: boolean;
+  paired: boolean;
+  hasMobileChannel: boolean;
+  onPairingEnabled: () => void;
 }
 
 type Props = PairingProps & TranslateProps;
 
-interface State {
-    channel: string | null;
-    status: string | boolean;
-    showQRCode: boolean;
+type State = {
+  channel: string | null;
+  status: string | false;
+  showQRCode: boolean;
 }
 
 class MobilePairing extends Component<Props, State> {
@@ -206,14 +206,14 @@ class MobilePairing extends Component<Props, State> {
       );
     } else if (status === 'connectOnly') {
       content = (<QRCode tapToCopy={false} data={JSON.stringify({ channel, connectOnly: true })} />);
-    } else {
+    } else if (status) {
       content = (<p className="m-top-none">{t(`pairing.${status}.text`)}</p>);
     }
     return (
       <div>
         <SettingsButton
           onClick={hasMobileChannel && !paired ? this.reconnectUnpaired : this.startPairing}
-          optionalText={t(`deviceSettings.pairing.status.${paired}`)}>
+          optionalText={t(`deviceSettings.pairing.status.${paired ? 'true' : 'false' }`)}>
           { deviceLocked ? (
             hasMobileChannel ? t('pairing.reconnectOnly.button') : t('pairing.connectOnly.button')
           ) : (
diff --git a/frontends/web/src/routes/device/bitbox01/setup/goal.jsx b/frontends/web/src/routes/device/bitbox01/setup/goal.jsx
index a7e91ee5c3..9536dbaa39 100644
--- a/frontends/web/src/routes/device/bitbox01/setup/goal.jsx
+++ b/frontends/web/src/routes/device/bitbox01/setup/goal.jsx
@@ -49,7 +49,7 @@ class Goal extends Component {
                 </div>
               </div>
               <div className="text-center m-top-large">
-                {getDarkmode() ? <SwissMadeOpenSourceDark large /> : <SwissMadeOpenSource large />}
+                {getDarkmode() ? <SwissMadeOpenSourceDark /> : <SwissMadeOpenSource />}
               </div>
             </div>
           </div>
diff --git a/frontends/web/src/routes/device/bitbox01/setup/initialize.tsx b/frontends/web/src/routes/device/bitbox01/setup/initialize.tsx
index f108be5fbb..f3df917f29 100644
--- a/frontends/web/src/routes/device/bitbox01/setup/initialize.tsx
+++ b/frontends/web/src/routes/device/bitbox01/setup/initialize.tsx
@@ -105,13 +105,15 @@ class Initialize extends Component<Props, State> {
       formSubmissionState = <Message type="info">{t('initialize.creating')}</Message>;
       break;
     case stateEnum.ERROR:
-      formSubmissionState = (
-        <Message type="error">
-          {t(`initialize.error.e${errorCode}`, {
-            defaultValue: errorMessage,
-          })}
-        </Message>
-      );
+      if (errorCode !== null) {
+        formSubmissionState = (
+          <Message type="error">
+            {t(`initialize.error.e${errorCode}`, {
+              defaultValue: errorMessage,
+            })}
+          </Message>
+        );
+      }
     }
 
     const content = showInfo ? (
@@ -170,7 +172,7 @@ class Initialize extends Component<Props, State> {
               {formSubmissionState}
               {content}
               <div className="text-center m-top-large">
-                {getDarkmode() ? <SwissMadeOpenSourceDark large /> : <SwissMadeOpenSource large />}
+                {getDarkmode() ? <SwissMadeOpenSourceDark /> : <SwissMadeOpenSource />}
               </div>
             </div>
           </div>
diff --git a/frontends/web/src/routes/device/bitbox01/setup/security-information.tsx b/frontends/web/src/routes/device/bitbox01/setup/security-information.tsx
index e37ccd5f17..24f8612471 100644
--- a/frontends/web/src/routes/device/bitbox01/setup/security-information.tsx
+++ b/frontends/web/src/routes/device/bitbox01/setup/security-information.tsx
@@ -25,16 +25,16 @@ import { SimpleMarkup } from '../../../../utils/markup';
 import { getDarkmode } from '../../../../components/darkmode/darkmode';
 import style from '../bitbox01.module.css';
 
-interface SecurityInformationProps {
-    goBack: () => void;
-    goal: string | null;
-    children: ReactNode;
+type SecurityInformationProps = {
+  goBack: () => void;
+  goal: string | null;
+  children: ReactNode;
 }
 
 type Props = SecurityInformationProps & TranslateProps;
 
-interface State {
-    showInfo: boolean;
+type State = {
+  showInfo: boolean;
 }
 
 class SecurityInformation extends Component<Props, State> {
@@ -63,7 +63,9 @@ class SecurityInformation extends Component<Props, State> {
           </Header>
           <div className="innerContainer">
             <div className="content padded narrow isVerticallyCentered">
-              <h1 className={[style.title, 'text-center'].join(' ')}>{t(`securityInformation.${goal}.title`)}</h1>
+              <h1 className={[style.title, 'text-center'].join(' ')}>
+                {goal && t(`securityInformation.${goal}.title`)}
+              </h1>
               {
                 goal === 'create' ? (
                   <div className="box large">
@@ -110,7 +112,7 @@ class SecurityInformation extends Component<Props, State> {
                 )
               }
               <div className="text-center m-top-large">
-                {getDarkmode() ? <SwissMadeOpenSourceDark large /> : <SwissMadeOpenSource large />}
+                {getDarkmode() ? <SwissMadeOpenSourceDark /> : <SwissMadeOpenSource />}
               </div>
             </div>
           </div>
diff --git a/frontends/web/src/routes/device/bitbox01/setup/seed-create-new.jsx b/frontends/web/src/routes/device/bitbox01/setup/seed-create-new.jsx
index 7e834dc043..97be54165f 100644
--- a/frontends/web/src/routes/device/bitbox01/setup/seed-create-new.jsx
+++ b/frontends/web/src/routes/device/bitbox01/setup/seed-create-new.jsx
@@ -250,7 +250,7 @@ class SeedCreateNew extends Component {
               }
               {content}
               <div className="text-center m-top-large">
-                {getDarkmode() ? <SwissMadeOpenSourceDark large /> : <SwissMadeOpenSource large />}
+                {getDarkmode() ? <SwissMadeOpenSourceDark /> : <SwissMadeOpenSource />}
               </div>
             </div>
           </div>
diff --git a/frontends/web/src/routes/device/bitbox01/setup/seed-restore.jsx b/frontends/web/src/routes/device/bitbox01/setup/seed-restore.jsx
index 8e684fd8ab..278cc85c1c 100644
--- a/frontends/web/src/routes/device/bitbox01/setup/seed-restore.jsx
+++ b/frontends/web/src/routes/device/bitbox01/setup/seed-restore.jsx
@@ -147,7 +147,7 @@ class SeedRestore extends Component {
                 )
               }
               <div className="text-center m-top-large">
-                {getDarkmode() ? <SwissMadeOpenSourceDark large /> : <SwissMadeOpenSource large />}
+                {getDarkmode() ? <SwissMadeOpenSourceDark /> : <SwissMadeOpenSource />}
               </div>
             </div>
           </div>
diff --git a/frontends/web/src/routes/device/bitbox01/setup/success.jsx b/frontends/web/src/routes/device/bitbox01/setup/success.jsx
index a72d0f0902..47a9eb9d90 100644
--- a/frontends/web/src/routes/device/bitbox01/setup/success.jsx
+++ b/frontends/web/src/routes/device/bitbox01/setup/success.jsx
@@ -66,7 +66,7 @@ class Success extends Component {
                 </div>
               </div>
               <div className="text-center m-top-large">
-                {getDarkmode() ? <SwissMadeOpenSourceDark large /> : <SwissMadeOpenSource large />}
+                {getDarkmode() ? <SwissMadeOpenSourceDark /> : <SwissMadeOpenSource />}
               </div>
             </div>
           </div>
diff --git a/frontends/web/src/routes/device/bitbox02/passphrase.tsx b/frontends/web/src/routes/device/bitbox02/passphrase.tsx
index 4da9c23f7c..6de61078fe 100644
--- a/frontends/web/src/routes/device/bitbox02/passphrase.tsx
+++ b/frontends/web/src/routes/device/bitbox02/passphrase.tsx
@@ -64,9 +64,11 @@ export const Passphrase = ({ deviceID }: TProps) => {
       const result = await setMnemonicPassphraseEnabled(deviceID, enabled);
       if (!result.success) {
         navigate(-1);
-        alertUser(t(`passphrase.error.e${result.code}`, {
-          defaultValue: result.message || t('genericError'),
-        }));
+        if (result.code) {
+          alertUser(t(`passphrase.error.e${result.code}`, {
+            defaultValue: result.message || t('genericError'),
+          }));
+        }
         return null;
       }
       setIsEnabled(enabled);
diff --git a/frontends/web/src/routes/device/bitbox02/setup/name.tsx b/frontends/web/src/routes/device/bitbox02/setup/name.tsx
index c2114fc5e3..9f7c378f7a 100644
--- a/frontends/web/src/routes/device/bitbox02/setup/name.tsx
+++ b/frontends/web/src/routes/device/bitbox02/setup/name.tsx
@@ -105,7 +105,7 @@ export const DeviceNameErrorMessage = ({ error, invalidChars }: TDeviceNameError
   }
   return (
     <span hidden={!error} className={style.errorMessage}>
-      {t(`bitbox02Wizard.stepCreate.error.${error}`, {
+      {error && t(`bitbox02Wizard.stepCreate.error.${error}`, {
         invalidChars
       })}
       {' '}
diff --git a/frontends/web/src/routes/settings/components/appearance/defaultCurrencyDropdownSetting.tsx b/frontends/web/src/routes/settings/components/appearance/defaultCurrencyDropdownSetting.tsx
index b06f19f13b..c285c2378a 100644
--- a/frontends/web/src/routes/settings/components/appearance/defaultCurrencyDropdownSetting.tsx
+++ b/frontends/web/src/routes/settings/components/appearance/defaultCurrencyDropdownSetting.tsx
@@ -28,7 +28,8 @@ export const DefaultCurrencyDropdownSetting = () => {
   const { formattedCurrencies, currenciesWithDisplayName } = useLocalizedFormattedCurrencies(i18n.language);
   const { addToActiveCurrencies, updateDefaultCurrency, defaultCurrency, activeCurrencies } = useContext(RatesContext);
   const valueLabel = currenciesWithDisplayName.find(fiat => fiat.currency === defaultCurrency)?.displayName;
-  const defaultValueLabel = valueLabel ? `${currencyName.of(defaultCurrency)} (${defaultCurrency})` : defaultCurrency;
+  const currencyNameOfDefaultCurrency = currencyName.of(defaultCurrency) || '';
+  const defaultValueLabel = valueLabel ? `${currencyNameOfDefaultCurrency} (${defaultCurrency})` : defaultCurrency;
 
   return (
     <SettingsItem
diff --git a/frontends/web/src/routes/settings/components/appearance/languageDropdownSetting.tsx b/frontends/web/src/routes/settings/components/appearance/languageDropdownSetting.tsx
index 026e344fb0..d7549dae87 100644
--- a/frontends/web/src/routes/settings/components/appearance/languageDropdownSetting.tsx
+++ b/frontends/web/src/routes/settings/components/appearance/languageDropdownSetting.tsx
@@ -38,7 +38,7 @@ export const LanguageDropdownSetting = () => {
       settingName={<div className={styles.container}>{globe}{t('newSettings.appearance.language.title')}</div>}
       secondaryText={t('newSettings.appearance.language.description')}
       collapseOnSmall
-      title={`Detected native locale: ${nativeLocale}`}
+      title={nativeLocale && `Detected native locale: ${nativeLocale}`}
       extraComponent={
         <Dropdown
           className={settingsDropdownStyles.select}
diff --git a/frontends/web/src/routes/settings/components/device-settings/attestation-check-setting.tsx b/frontends/web/src/routes/settings/components/device-settings/attestation-check-setting.tsx
index 47af3555b6..d6863edf84 100644
--- a/frontends/web/src/routes/settings/components/device-settings/attestation-check-setting.tsx
+++ b/frontends/web/src/routes/settings/components/device-settings/attestation-check-setting.tsx
@@ -44,7 +44,7 @@ const AttestationCheckSetting = ({ deviceID }: TProps) => {
       settingName={t('deviceSettings.hardware.attestation.label')}
       secondaryText={t('deviceSettings.deviceInformation.attestation.description')}
       extraComponent={icon}
-      displayedValue={t(`deviceSettings.hardware.attestation.${attestation}`)}
+      displayedValue={t(`deviceSettings.hardware.attestation.${attestation ? 'true' : 'false'}`)}
       hideDisplayedValueOnSmall
     />
   );

From f5930edae62fdf21dd27c334f019e9f799f3d0f6 Mon Sep 17 00:00:00 2001
From: thisconnect <this@shiftcrypto.ch>
Date: Mon, 2 Dec 2024 14:41:51 +0100
Subject: [PATCH 3/4] frontend: allow numbers in template literals

There seem to be no major edge cases using numbers in template
literals and allowing them seems reasonable.
---
 frontends/web/.eslintrc.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontends/web/.eslintrc.json b/frontends/web/.eslintrc.json
index 104229a2b7..881e982850 100644
--- a/frontends/web/.eslintrc.json
+++ b/frontends/web/.eslintrc.json
@@ -59,6 +59,7 @@
       "files": ["**/*.ts?(x)"],
       "rules": {
         "@typescript-eslint/restrict-template-expressions": ["error", {
+          "allowNumber": true,
           "allowAny": false,
           "allowBoolean": false,
           "allowNullish": false

From 58c9fc712fe946820628e37f1df77fa16fc2a8d1 Mon Sep 17 00:00:00 2001
From: thisconnect <this@shiftcrypto.ch>
Date: Mon, 2 Dec 2024 14:56:17 +0100
Subject: [PATCH 4/4] frontend: remove unused swiss-made css

In c6ee6e07d the large prop on the SwissMadeOpenSource component
was removed as it did not work since a long time and was for
BitBox01 only, this commit removes the unused CSS.
---
 frontends/web/src/components/icon/logo.module.css | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/frontends/web/src/components/icon/logo.module.css b/frontends/web/src/components/icon/logo.module.css
index 52d5b2dc96..e715778eb1 100644
--- a/frontends/web/src/components/icon/logo.module.css
+++ b/frontends/web/src/components/icon/logo.module.css
@@ -9,16 +9,8 @@
     width: 100% !important;
 }
 
-.swissOpenSource.large {
-    max-width: 280px !important;
-}
-
 @media (max-width: 768px) {
     .swissOpenSource {
         max-width: 180px !important;
     }
-
-    .swissOpenSource.large {
-        max-width: 210px !important;
-    }
 }
\ No newline at end of file