From a710f157105ba4b2f67e60466dd1e92a3d8eb051 Mon Sep 17 00:00:00 2001 From: Peter Sanderson Date: Tue, 14 May 2024 15:06:41 +0200 Subject: [PATCH] feat(suite): add promo banner for wallet remember into receive form --- .../src/components/Warning/Warning.tsx | 1 - .../suite-desktop-ui/src/support/Router.tsx | 4 +- packages/suite-web/src/support/Router.tsx | 6 ++- .../wallet/receive/{index.tsx => Receive.tsx} | 53 +++++++++++-------- .../receive/components/ConnectDevicePromo.tsx | 28 ++++++++++ suite-common/suite-constants/src/device.ts | 2 +- 6 files changed, 65 insertions(+), 29 deletions(-) rename packages/suite/src/views/wallet/receive/{index.tsx => Receive.tsx} (57%) create mode 100644 packages/suite/src/views/wallet/receive/components/ConnectDevicePromo.tsx diff --git a/packages/components/src/components/Warning/Warning.tsx b/packages/components/src/components/Warning/Warning.tsx index 87ada3d44b0e..705ec8e95bef 100755 --- a/packages/components/src/components/Warning/Warning.tsx +++ b/packages/components/src/components/Warning/Warning.tsx @@ -103,7 +103,6 @@ const Wrapper = styled.div` 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 index e6975c3d2c4e..6094b47a0500 100644 --- 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 } = { '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 index 5421ae35e69f..e5d056a52036 100644 --- a/packages/suite-web/src/support/Router.tsx +++ b/packages/suite-web/src/support/Router.tsx @@ -21,8 +21,10 @@ const components: Record>> = { ({ 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/packages/suite/src/views/wallet/receive/index.tsx b/packages/suite/src/views/wallet/receive/Receive.tsx similarity index 57% rename from packages/suite/src/views/wallet/receive/index.tsx rename to packages/suite/src/views/wallet/receive/Receive.tsx index c28ba784846b..9f327d1922c8 100644 --- a/packages/suite/src/views/wallet/receive/index.tsx +++ b/packages/suite/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 ( - - - {showCexWarning && } - - - - - - + + {true && } + + + + {showCexWarning && } + + + + + + + ); }; - -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 new file mode 100644 index 000000000000..25f6729c0487 --- /dev/null +++ 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 ( + + + + + Receive address can’t be verified + + + Verify on Trezor to confirm receive address. Continuing without confirming + isn’t recommended. + + + + Trezor + + + ); +}; diff --git a/suite-common/suite-constants/src/device.ts b/suite-common/suite-constants/src/device.ts index 9bae18482aa8..06c03db44aa3 100644 --- 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;