Merge branch 'frontend-use-message-component'

thisconnect · thisconnect · commit ce5f7c055a64 · 2025-10-06T12:39:22.000+02:00
diff --git a/frontends/web/src/components/banners/offline.tsx b/frontends/web/src/components/banners/offline.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import { useTranslation } from 'react-i18next';
-import { Status } from '@/components/status/status';
+import { Message } from '@/components/message/message';
 import { AppContext } from '@/contexts/AppContext';
 import { useContext } from 'react';
 
@@ -27,9 +27,8 @@ export const Offline = () => {
   }
 
   return (
-    <Status type="warning"
-      hidden={isOnline}>
+    <Message type="warning" hidden={isOnline}>
       {t('warning.offline')}
-    </Status>
+    </Message>
   );
 };
diff --git a/frontends/web/src/components/banners/sdcard.tsx b/frontends/web/src/components/banners/sdcard.tsx
@@ -18,7 +18,7 @@ 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';
+import { Message } from '@/components/message/message';
 
 type Props = {
   code?: AccountCode;
@@ -33,8 +33,8 @@ export const SDCardWarning = ({
   const hasCard = useSDCard(devices, code ? [code] : undefined);
 
   return (
-    <Status hidden={!hasCard} type="warning">
+    <Message hidden={!hasCard} type="warning">
       {t('warning.sdcard')}
-    </Status>
+    </Message>
   );
 };
diff --git a/frontends/web/src/components/banners/testing.tsx b/frontends/web/src/components/banners/testing.tsx
@@ -17,7 +17,7 @@
 import { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import { AppContext } from '@/contexts/AppContext';
-import { Status } from '@/components/status/status';
+import { Message } from '@/components/message/message';
 
 export const Testing = () => {
   const { t } = useTranslation();
@@ -28,8 +28,8 @@ export const Testing = () => {
   }
 
   return (
-    <Status type="warning">
+    <Message type="warning">
       {t('warning.testnet')}
-    </Status>
+    </Message>
   );
 };
diff --git a/frontends/web/src/components/bluetooth/bluetooth.tsx b/frontends/web/src/components/bluetooth/bluetooth.tsx
@@ -19,7 +19,7 @@ import { useEffect, useRef, useState } from 'react';
 import { useSync } from '@/hooks/api';
 import { connect, getState, syncState, TPeripheral } from '@/api/bluetooth';
 import { runningInIOS } from '@/utils/env';
-import { Status } from '@/components/status/status';
+import { Message } from '@/components/message/message';
 import { ActionableItem } from '@/components/actionable-item/actionable-item';
 import { Badge } from '@/components/badge/badge';
 import { HorizontallyCenteredSpinner, SpinnerRingAnimated } from '@/components/spinner/SpinnerAnimation';
@@ -70,9 +70,9 @@ const BluetoothInner = ({ peripheralContainerClassName }: Props) => {
   }
   if (!state.bluetoothAvailable) {
     return (
-      <Status type="warning">
+      <Message type="warning">
         {t('bluetooth.enable')}
-      </Status>
+      </Message>
     );
   }
   const hasConnection = state.peripherals.some(isConnectedOrConnecting);
diff --git a/frontends/web/src/components/devices/bitbox02bootloader/bitbox02bootloader.tsx b/frontends/web/src/components/devices/bitbox02bootloader/bitbox02bootloader.tsx
@@ -22,7 +22,7 @@ import { useSync, useLoad } from '@/hooks/api';
 import { Button } from '@/components/forms';
 import { View, ViewContent } from '@/components/view/view';
 import { BitBox02, BitBox02Inverted, BitBox02Nova, BitBox02NovaInverted } from '@/components/icon/logo';
-import { Status } from '@/components/status/status';
+import { Message } from '@/components/message/message';
 import { SubTitle } from '@/components/title';
 import { ToggleShowFirmwareHash } from './toggleshowfirmwarehash';
 import style from './bitbox02bootloader.module.css';
@@ -145,7 +145,9 @@ export const BitBox02Bootloader = ({ deviceID }: TProps) => {
       <ViewContent>
         {logo}
         {status && status.errMsg && (
-          <Status type="warning">{status.errMsg}</Status>
+          <Message type="warning">
+            {status.errMsg}
+          </Message>
         )}
         {contents}
       </ViewContent>
diff --git a/frontends/web/src/components/message/message.tsx b/frontends/web/src/components/message/message.tsx
@@ -50,6 +50,7 @@ const MessageIcon = ({ type, icon }: TMessageIconProps) => {
 };
 
 type MessageProps = {
+  className?: string;
   hidden?: boolean;
   small?: boolean;
   title?: string;
@@ -60,6 +61,7 @@ type MessageProps = {
 }
 
 export const Message = ({
+  className = '',
   hidden,
   small,
   title,
@@ -75,6 +77,7 @@ export const Message = ({
     <div className={`
       ${styles[type] || ''}
       ${small && styles.small || ''}
+      ${className || ''}
     `.trim()}>
       {!noIcon && <MessageIcon type={type} icon={icon} />}
       <div className={styles.content}>
diff --git a/frontends/web/src/components/status/status.tsx b/frontends/web/src/components/status/status.tsx
@@ -30,7 +30,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.
-  dismissible?: string;
+  dismissible: string;
   className?: string;
   children: ReactNode;
 }
diff --git a/frontends/web/src/routes/account/account.tsx b/frontends/web/src/routes/account/account.tsx
@@ -29,7 +29,7 @@ import { HeadersSync } from '@/components/headerssync/headerssync';
 import { Info, LoupeBlue } from '@/components/icon';
 import { GuidedContent, GuideWrapper, Header, Main } from '@/components/layout';
 import { Spinner } from '@/components/spinner/Spinner';
-import { Status } from '@/components/status/status';
+import { Message } from '@/components/message/message';
 import { useLoad, useSubscribe, useSync } from '@/hooks/api';
 import { useDebounce } from '@/hooks/debounce';
 import { HideAmountsButton } from '@/components/hideamountsbutton/hideamountsbutton';
@@ -273,13 +273,19 @@ const RemountAccount = ({
         <Main>
           <ContentWrapper>
             <GlobalBanners code={code} devices={devices} />
-            <Status className={style.status} hidden={status === undefined || !status.offlineError} type="error">
+            <Message
+              className={style.status}
+              hidden={status === undefined || !status.offlineError}
+              type="error">
               {offlineErrorTextLines.join('\n')}
-            </Status>
-            <Status className={style.status} hidden={status === undefined || status.synced || !!status.offlineError} type="info">
+            </Message>
+            <Message
+              className={style.status}
+              hidden={status === undefined || status.synced || !!status.offlineError}
+              type="info">
               {t('account.initializing')}
               {notSyncedText}
-            </Status>
+            </Message>
           </ContentWrapper>
           <Dialog open={insured && uncoveredFunds.length !== 0} medium title={t('account.warning')} onClose={() => setUncoveredFunds([])}>
             <MultilineMarkup tagName="p" markup={t('account.uncoveredFunds', {
diff --git a/frontends/web/src/routes/account/info/info.tsx b/frontends/web/src/routes/account/info/info.tsx
@@ -24,7 +24,7 @@ import { Header } from '@/components/layout';
 import { BackButton } from '@/components/backbutton/backbutton';
 import { SigningConfiguration } from './signingconfiguration';
 import { BitcoinBasedAccountInfoGuide } from './guide';
-import { Status } from '@/components/status/status';
+import { Message } from '@/components/message/message';
 import { Button } from '@/components/forms';
 import { alertUser } from '@/components/alert/Alert';
 import { statusChanged } from '@/api/accountsync';
@@ -126,9 +126,9 @@ export const Info = ({
               </Button>
               { (config?.bitcoinSimple?.scriptType === 'p2tr') ? (
                 <>
-                  <Status type="info">
+                  <Message type="info">
                     {t('accountInfo.taproot')}
-                  </Status>
+                  </Message>
                   <BackButton enableEsc>
                     {t('button.back')}
                   </BackButton>
diff --git a/frontends/web/src/routes/device/bitbox02/passphrase.tsx b/frontends/web/src/routes/device/bitbox02/passphrase.tsx
@@ -26,7 +26,7 @@ import { Button, Checkbox } from '@/components/forms';
 import { alertUser } from '@/components/alert/Alert';
 import { View, ViewButtons, ViewContent, ViewHeader } from '@/components/view/view';
 import { PointToBitBox02 } from '@/components/icon';
-import { Status } from '@/components/status/status';
+import { Message } from '@/components/message/message';
 
 // The enable wizard has five steps that can be navigated by clicking
 // 'back' or 'continue'. On the last step the passphrase will be enabled.
@@ -218,14 +218,14 @@ const EnableInfo = ({ handleAbort, setPassphrase }: TInfoProps) => {
             <SimpleMarkup key="info-3" tagName="li" markup={t('passphrase.summary.understandList.2')} />
             <SimpleMarkup key="info-4" tagName="li" markup={t('passphrase.summary.understandList.3')} />
           </ul>
-          <Status noIcon type={understood ? 'success' : 'warning'}>
+          <Message noIcon type={understood ? 'success' : 'warning'}>
             <Checkbox
               onChange={e => setUnderstood(e.target.checked)}
               id="understood"
               checked={understood}
               label={t('passphrase.summary.understand')}
               checkboxStyle={understood ? 'success' : 'warning'} />
-          </Status>
+          </Message>
         </ViewContent>
       )}
       <ViewButtons>
diff --git a/frontends/web/src/routes/device/bitbox02/setup/name.tsx b/frontends/web/src/routes/device/bitbox02/setup/name.tsx
@@ -17,7 +17,7 @@
 import { FormEvent, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { View, ViewButtons, ViewContent, ViewHeader } from '@/components/view/view';
-import { Status } from '@/components/status/status';
+import { Message } from '@/components/message/message';
 import { Button, Input } from '@/components/forms';
 import { checkSDCard } from '@/api/bitbox02';
 import { useValidateDeviceName } from '@/hooks/devicename';
@@ -57,9 +57,9 @@ export const SetDeviceName = ({
         <ViewHeader title={t('bitbox02Wizard.stepCreate.title')}>
           <p>{t('bitbox02Wizard.stepCreate.description')}</p>
           {missingSDCardWarning && (
-            <Status className="m-bottom-half" type="warning">
+            <Message className="m-bottom-half" type="warning">
               <span>{t('bitbox02Wizard.stepCreate.toastMicroSD')}</span>
-            </Status>
+            </Message>
           )}
         </ViewHeader>
         <ViewContent textAlign="left" minHeight="140px">
diff --git a/frontends/web/src/routes/device/bitbox02/setup/pairing.tsx b/frontends/web/src/routes/device/bitbox02/setup/pairing.tsx
@@ -18,7 +18,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { channelHashChanged, getChannelHash, verifyChannelHash } from '@/api/bitbox02';
 import { View, ViewButtons, ViewContent, ViewHeader } from '@/components/view/view';
-import { Status } from '@/components/status/status';
+import { Message } from '@/components/message/message';
 import { PointToBitBox02 } from '@/components/icon';
 import { Button } from '@/components/forms';
 
@@ -62,9 +62,9 @@ export const Pairing = ({
       width="670px">
       <ViewHeader title={t('bitbox02Wizard.pairing.title')}>
         { pairingFailed ? (
-          <Status key="pairingFailed" type="warning">
+          <Message key="pairingFailed" type="warning">
             {t('bitbox02Wizard.pairing.failed')}
-          </Status>
+          </Message>
         ) : (
           <p>
             { deviceVerified
@@ -75,9 +75,9 @@ export const Pairing = ({
       </ViewHeader>
       <ViewContent fullWidth>
         { (attestation === false && !pairingFailed) && (
-          <Status type="warning" className="m-bottom-half">
+          <Message type="warning" className="m-bottom-half">
             {t('bitbox02Wizard.attestationFailed')}
-          </Status>
+          </Message>
         )}
         { !pairingFailed && (
           <>
diff --git a/frontends/web/src/routes/device/bitbox02/setup/password.tsx b/frontends/web/src/routes/device/bitbox02/setup/password.tsx
@@ -18,7 +18,7 @@ import { useTranslation } from 'react-i18next';
 import { View, ViewContent, ViewHeader } from '@/components/view/view';
 import { Backup } from '@/api/backup';
 import { PasswordEntry } from '@/routes/device/bitbox02/components/password-entry/password-entry';
-import { Status } from '@/components/status/status';
+import { Message } from '@/components/message/message';
 import { MultilineMarkup } from '@/utils/markup';
 import { convertDateToLocaleString } from '@/utils/date';
 
@@ -37,9 +37,9 @@ export const SetPassword = ({ errorText }: Props) => {
       width="600px">
       <ViewHeader title={t('bitbox02Wizard.stepPassword.title')}>
         {errorText && (
-          <Status className="margin-bottom-default" type="warning">
+          <Message className="margin-bottom-default" type="warning">
             <span>{errorText}</span>
-          </Status>
+          </Message>
         )}
         <p>{t('bitbox02Wizard.stepPassword.useControls')}</p>
       </ViewHeader>
diff --git a/frontends/web/src/routes/device/bitbox02/unlock.tsx b/frontends/web/src/routes/device/bitbox02/unlock.tsx
@@ -16,7 +16,7 @@
 
 import { useTranslation } from 'react-i18next';
 import { View, ViewContent, ViewHeader } from '@/components/view/view';
-import { Status } from '@/components/status/status';
+import { Message } from '@/components/message/message';
 import { PasswordEntry } from './components/password-entry/password-entry';
 
 type Props = {
@@ -39,9 +39,9 @@ export const Unlock = ({ attestation }: Props) => {
       </ViewHeader>
       <ViewContent fullWidth>
         {attestation === false ? (
-          <Status>
+          <Message>
             {t('bitbox02Wizard.attestationFailed')}
-          </Status>
+          </Message>
         ) : (
           <PasswordEntry />
         )}

Original file line number	Diff line number	Diff line change
`@@ -30,7 +30,7 @@ type TProps = {`
`30`	`30`	`// used as keyName in the config if dismissing the status should be persisted, so it is not`
`31`	`31`	`// shown again. Use an empty string if it should be dismissible without storing it in the`
`32`	`32`	`// config, so the status will be shown again the next time.`
`33`		`- dismissible?: string;`
	`33`	`+ dismissible: string;`
`34`	`34`	`className?: string;`
`35`	`35`	`children: ReactNode;`
`36`	`36`	`}`