refactor(suite): Replace NotificationCard component with Banner (#15604)

trezor · Nov 27, 2024 · dc66d2f · dc66d2f
1 parent 5abbfce
commit dc66d2f
Show file tree

Hide file tree

Showing 13 changed files with 93 additions and 258 deletions.
diff --git a/packages/components/src/components/Banner/Banner.stories.tsx b/packages/components/src/components/Banner/Banner.stories.tsx
@@ -41,6 +41,7 @@ export const Banner: StoryObj<BannerProps> = {
     args: {
         children: 'Insert text here.',
         filled: true,
+        isLoading: false,
         variant: 'warning',
         icon: undefined,
         rightContent: <BannerComponent.Button>Click</BannerComponent.Button>,

diff --git a/packages/components/src/components/Banner/Banner.tsx b/packages/components/src/components/Banner/Banner.tsx
@@ -28,6 +28,7 @@ import { useMediaQuery } from '../../utils/useMediaQuery';
 import { useElevation } from '../ElevationContext/ElevationContext';
 import { Column, Row } from '../Flex/Flex';
 import { variables } from '../../config';
+import { Spinner } from '../loaders/Spinner/Spinner';
 
 export const allowedBannerFrameProps = ['margin'] as const satisfies FramePropsKeys[];
 type AllowedFrameProps = Pick<FrameProps, (typeof allowedBannerFrameProps)[number]>;
@@ -44,6 +45,7 @@ export type BannerProps = AllowedFrameProps & {
     'data-testid'?: string;
     spacingX?: SpacingX;
     color?: Color;
+    isLoading?: boolean;
 };
 
 type WrapperParams = TransientProps<AllowedFrameProps> & {
@@ -94,6 +96,7 @@ export const Banner = ({
     rightContent,
     spacingX = 'lg',
     'data-testid': dataTest,
+    isLoading = false,
     ...rest
 }: BannerProps) => {
     const theme = useTheme();
@@ -133,7 +136,8 @@ export const Banner = ({
             data-testid={dataTest}
             {...frameProps}
         >
-            {withIcon && (
+            {isLoading && <Spinner size={22} />}
+            {!isLoading && withIcon && (
                 <Icon
                     size={20}
                     name={icon === true ? mapVariantToIcon({ $variant: variant }) : icon}

diff --git a/packages/suite/src/components/suite/NotificationCard.tsx b/packages/suite/src/components/suite/NotificationCard.tsx
diff --git a/packages/suite/src/components/suite/index.tsx b/packages/suite/src/components/suite/index.tsx
@@ -3,7 +3,6 @@ import { DeviceConfirmImage } from './DeviceConfirmImage';
 import { CheckItem } from './CheckItem';
 import { PrerequisitesGuide } from './PrerequisitesGuide/PrerequisitesGuide';
 import { WelcomeLayout } from './layouts/WelcomeLayout/WelcomeLayout';
-import { NotificationCard } from './NotificationCard';
 import { WordInput } from './WordInput';
 import { WordInputAdvanced } from './WordInputAdvanced';
 import { Loading } from './Loading';
@@ -60,7 +59,6 @@ export {
     CheckItem,
     PrerequisitesGuide,
     WelcomeLayout,
-    NotificationCard,
     FiatValue,
     Translation,
     WordInput,

diff --git a/packages/suite/src/components/wallet/WalletLayout/AccountBanners/AccountImported.tsx b/packages/suite/src/components/wallet/WalletLayout/AccountBanners/AccountImported.tsx
@@ -1,4 +1,6 @@
-import { NotificationCard, Translation } from 'src/components/suite';
+import { Banner } from '@trezor/components';
+
+import { Translation } from 'src/components/suite';
 import type { Account } from 'src/types/wallet/index';
 
 type AccountImportedProps = {
@@ -7,7 +9,7 @@ type AccountImportedProps = {
 
 export const AccountImported = ({ account }: AccountImportedProps) =>
     account?.imported ? (
-        <NotificationCard variant="info">
+        <Banner variant="info">
             <Translation id="TR_ACCOUNT_IMPORTED_ANNOUNCEMENT" />
-        </NotificationCard>
+        </Banner>
     ) : null;
diff --git a/packages/suite/src/components/wallet/WalletLayout/AccountBanners/AccountOutOfSync.tsx b/packages/suite/src/components/wallet/WalletLayout/AccountBanners/AccountOutOfSync.tsx
@@ -1,4 +1,6 @@
-import { NotificationCard, Translation } from 'src/components/suite';
+import { Banner } from '@trezor/components';
+
+import { Translation } from 'src/components/suite';
 import type { Account } from 'src/types/wallet/index';
 
 type AccountOutOfSyncProps = {
@@ -7,7 +9,7 @@ type AccountOutOfSyncProps = {
 
 export const AccountOutOfSync = ({ account }: AccountOutOfSyncProps) =>
     account?.backendType === 'coinjoin' && account.status === 'out-of-sync' ? (
-        <NotificationCard variant="warning">
+        <Banner variant="warning">
             <Translation id="TR_ACCOUNT_OUT_OF_SYNC" />
-        </NotificationCard>
+        </Banner>
     ) : null;
diff --git a/packages/suite/src/components/wallet/WalletLayout/AccountBanners/AuthConfirmFailed.tsx b/packages/suite/src/components/wallet/WalletLayout/AccountBanners/AuthConfirmFailed.tsx
@@ -1,6 +1,7 @@
 import { authConfirm } from '@suite-common/wallet-core';
+import { Banner } from '@trezor/components';
 
-import { NotificationCard, Translation } from 'src/components/suite';
+import { Translation } from 'src/components/suite';
 import { useDevice, useDispatch } from 'src/hooks/suite';
 
 export const AuthConfirmFailed = () => {
@@ -12,17 +13,20 @@ export const AuthConfirmFailed = () => {
     const handleClick = () => dispatch(authConfirm());
 
     return (
-        <NotificationCard
+        <Banner
             variant="warning"
-            button={{
-                onClick: handleClick,
-                isLoading: isLocked(),
-                icon: 'refresh',
-                'data-testid': '@passphrase-mismatch/retry-button',
-                children: <Translation id="TR_AUTH_CONFIRM_FAILED_RETRY" />,
-            }}
+            rightContent={
+                <Banner.Button
+                    onClick={handleClick}
+                    isLoading={isLocked()}
+                    icon="refresh"
+                    data-testid="@passphrase-mismatch/retry-button"
+                >
+                    <Translation id="TR_AUTH_CONFIRM_FAILED_RETRY" />
+                </Banner.Button>
+            }
         >
             <Translation id="TR_AUTH_CONFIRM_FAILED_TITLE" />
-        </NotificationCard>
+        </Banner>
     );
 };
diff --git a/packages/suite/src/components/wallet/WalletLayout/AccountBanners/BackendDisconnected.tsx b/packages/suite/src/components/wallet/WalletLayout/AccountBanners/BackendDisconnected.tsx
@@ -1,7 +1,8 @@
 import { tryGetAccountIdentity, isTrezorConnectBackendType } from '@suite-common/wallet-utils';
 import type { NetworkSymbol } from '@suite-common/wallet-config';
+import { Banner } from '@trezor/components';
 
-import { NotificationCard, Translation } from 'src/components/suite';
+import { Translation } from 'src/components/suite';
 import { useSelector } from 'src/hooks/suite';
 import { useBackendReconnection } from 'src/hooks/settings/backends';
 
@@ -21,19 +22,19 @@ const DisconnectedNotification = ({
     );
 
     return (
-        <NotificationCard
+        <Banner
             variant="warning"
-            button={{
-                onClick: reconnect,
-                isLoading: isReconnecting,
-                children: <Translation id="TR_CONNECT" />,
-            }}
+            rightContent={
+                <Banner.Button onClick={reconnect} isLoading={isReconnecting}>
+                    <Translation id="TR_CONNECT" />
+                </Banner.Button>
+            }
         >
             <Translation id="TR_BACKEND_DISCONNECTED" />
             {countdownSeconds ? (
                 <Translation id="TR_BACKEND_RECONNECTING" values={{ time: countdownSeconds }} />
             ) : null}
-        </NotificationCard>
+        </Banner>
     );
 };
 

diff --git a/packages/suite/src/components/wallet/WalletLayout/AccountBanners/ContextMessage.tsx b/packages/suite/src/components/wallet/WalletLayout/AccountBanners/ContextMessage.tsx
@@ -1,40 +1,27 @@
-import styled from 'styled-components';
-
-import { Link } from '@trezor/components';
+import { Banner } from '@trezor/components';
 import { selectContextMessageContent, Context } from '@suite-common/message-system';
 
-import { NotificationCard } from 'src/components/suite';
 import { useSelector } from 'src/hooks/suite';
 import { selectLanguage } from 'src/reducers/suite/suiteReducer';
 
 type ContextMessageProps = {
     context: (typeof Context)[keyof typeof Context];
 };
 
-const StyledNotificationCard = styled(NotificationCard)`
-    margin-bottom: 0;
-`;
-
 export const ContextMessage = ({ context }: ContextMessageProps) => {
     const language = useSelector(selectLanguage);
     const message = useSelector(state => selectContextMessageContent(state, context, language));
 
     return message ? (
-        <StyledNotificationCard
-            button={
-                message.cta
-                    ? {
-                          children: (
-                              <Link variant="nostyle" href={message.cta.link}>
-                                  {message.cta.label}
-                              </Link>
-                          ),
-                      }
-                    : undefined
-            }
+        <Banner
             variant={message.variant === 'critical' ? 'destructive' : message.variant}
+            rightContent={
+                message.cta ? (
+                    <Banner.Button href={message.cta.link}>{message.cta.label}</Banner.Button>
+                ) : undefined
+            }
         >
             {message.content}
-        </StyledNotificationCard>
+        </Banner>
     ) : null;
 };