feat(suite): add promo banner for wallet remember into receive form

trezor · May 16, 2024 · a710f15 · a710f15
1 parent b616726
commit a710f15
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 29 deletions.
diff --git a/packages/components/src/components/Warning/Warning.tsx b/packages/components/src/components/Warning/Warning.tsx
@@ -103,7 +103,6 @@ const Wrapper = styled.div<WrapperParams>`
     display: flex;
     ${typography.hint}
     gap: ${spacingsPx.sm};
-    justify-content: ${({ $withIcon }) => !$withIcon && 'center'};
     padding: ${spacingsPx.sm} ${spacingsPx.lg};
     width: 100%;
 

diff --git a/packages/suite-desktop-ui/src/support/Router.tsx b/packages/suite-desktop-ui/src/support/Router.tsx
@@ -7,7 +7,7 @@ import routes from 'src/constants/suite/routes';
 import { Dashboard } from 'src/views/dashboard';
 import Notification from 'src/views/suite/notifications';
 import { Transactions } from 'src/views/wallet/transactions/Transactions';
-import WalletReceive from 'src/views/wallet/receive';
+import { Receive } from 'src/views/wallet/receive/Receive';
 import WalletDetails from 'src/views/wallet/details';
 import WalletTokens from 'src/views/wallet/tokens';
 import WalletSend from 'src/views/wallet/send';
@@ -42,7 +42,7 @@ const components: { [key: string]: ComponentType<any> } = {
     'notifications-index': Notification,
 
     'wallet-index': Transactions,
-    'wallet-receive': WalletReceive,
+    'wallet-receive': Receive,
     'wallet-details': WalletDetails,
     'wallet-tokens': WalletTokens,
     'wallet-send': WalletSend,

diff --git a/packages/suite-web/src/support/Router.tsx b/packages/suite-web/src/support/Router.tsx
@@ -21,8 +21,10 @@ const components: Record<PageName, LazyExoticComponent<ComponentType<any>>> = {
             ({ Transactions }) => ({ default: Transactions }),
         ),
     ),
-    'wallet-receive': lazy(
-        () => import(/* webpackChunkName: "wallet" */ 'src/views/wallet/receive'),
+    'wallet-receive': lazy(() =>
+        import(/* webpackChunkName: "wallet" */ 'src/views/wallet/receive/Receive').then(
+            ({ Receive }) => ({ default: Receive }),
+        ),
     ),
     'wallet-details': lazy(
         () => import(/* webpackChunkName: "wallet" */ 'src/views/wallet/details'),

diff --git a/.../suite/src/views/wallet/receive/index.tsx → ...uite/src/views/wallet/receive/Receive.tsx b/.../suite/src/views/wallet/receive/index.tsx → ...uite/src/views/wallet/receive/Receive.tsx
@@ -7,8 +7,11 @@ import { FreshAddress } from './components/FreshAddress';
 import { UsedAddresses } from './components/UsedAddresses';
 import { CoinjoinReceiveWarning } from './components/CoinjoinReceiveWarning';
 import { ConfirmEvmExplanationModal } from 'src/components/suite/modals';
+import { ConnectDevicePromo } from './components/ConnectDevicePromo';
+import { Flex } from '@trezor/components';
+import { spacings } from '@trezor/theme';
 
-const Receive = () => {
+export const Receive = () => {
     const isCoinjoinReceiveWarningHidden = useSelector(
         state => state.suite.settings.isCoinjoinReceiveWarningHidden,
     );
@@ -33,30 +36,34 @@ const Receive = () => {
     const disabled = !!device.authConfirm;
     const showCexWarning = account?.accountType === 'coinjoin' && !isCoinjoinReceiveWarningHidden;
 
+    console.log('isDeviceLocked', isDeviceLocked);
+
     return (
         <WalletLayout title="TR_NAV_RECEIVE" isSubpage account={selectedAccount}>
-            <WalletSubpageHeading title="TR_NAV_RECEIVE" />
-
-            {showCexWarning && <CoinjoinReceiveWarning />}
-
-            <FreshAddress
-                account={account}
-                addresses={receive}
-                disabled={disabled}
-                locked={isDeviceLocked}
-                pendingAddresses={pendingAddresses}
-            />
-
-            <UsedAddresses
-                account={account}
-                addresses={receive}
-                locked={isDeviceLocked}
-                pendingAddresses={pendingAddresses}
-            />
-
-            <ConfirmEvmExplanationModal account={account} route="wallet-receive" />
+            <Flex gap={spacings.sm} direction="column" alignItems="start">
+                {true && <ConnectDevicePromo />}
+
+                <WalletSubpageHeading title="TR_NAV_RECEIVE" />
+
+                {showCexWarning && <CoinjoinReceiveWarning />}
+
+                <FreshAddress
+                    account={account}
+                    addresses={receive}
+                    disabled={disabled}
+                    locked={isDeviceLocked}
+                    pendingAddresses={pendingAddresses}
+                />
+
+                <UsedAddresses
+                    account={account}
+                    addresses={receive}
+                    locked={isDeviceLocked}
+                    pendingAddresses={pendingAddresses}
+                />
+
+                <ConfirmEvmExplanationModal account={account} route="wallet-receive" />
+            </Flex>
         </WalletLayout>
     );
 };
-
-export default Receive;
diff --git a/packages/suite/src/views/wallet/receive/components/ConnectDevicePromo.tsx b/packages/suite/src/views/wallet/receive/components/ConnectDevicePromo.tsx
@@ -0,0 +1,28 @@
+import { Columns, Image, Rows, Text, Warning } from '@trezor/components';
+import { useSelector } from '../../../../hooks/suite';
+import { selectDevice } from '@suite-common/wallet-core';
+import { DEFAULT_FLAGSHIP_MODEL } from '@suite-common/suite-constants';
+
+export const ConnectDevicePromo = () => {
+    const selectedDevice = useSelector(selectDevice);
+    const selectedDeviceModelInternal =
+        selectedDevice?.features?.internal_model || DEFAULT_FLAGSHIP_MODEL;
+
+    return (
+        <Warning variant="warning" withIcon={false}>
+            <Columns alignItems="center" justifyContent="space-between" gap={12} flex={1}>
+                <Rows alignItems="start">
+                    <Text typographyStyle="highlight" variant="warning">
+                        Receive address can’t be verified
+                    </Text>
+                    <Text typographyStyle="titleSmall">
+                        Verify on Trezor to confirm receive address. Continuing without confirming
+                        isn’t recommended.
+                    </Text>
+                </Rows>
+
+                <Image alt="Trezor" image={`TREZOR_${selectedDeviceModelInternal}`} />
+            </Columns>
+        </Warning>
+    );
+};
diff --git a/suite-common/suite-constants/src/device.ts b/suite-common/suite-constants/src/device.ts
@@ -1,3 +1,3 @@
 import { DeviceModelInternal } from '@trezor/connect';
 
-export const DEFAULT_FLAGSHIP_MODEL = DeviceModelInternal.T2T1;
+export const DEFAULT_FLAGSHIP_MODEL = DeviceModelInternal.T3T1;