style(suite): Style button and modal

trezor · May 16, 2024 · bcda310 · bcda310
1 parent cfa8f10
commit bcda310
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 19 deletions.
diff --git a/.../suite/src/components/suite/modals/ReduxModal/UserContextModal/ConfirmUnverifiedModal.tsx b/.../suite/src/components/suite/modals/ReduxModal/UserContextModal/ConfirmUnverifiedModal.tsx
@@ -80,9 +80,10 @@ export const ConfirmUnverifiedModal = ({
             }
             bottomBarComponents={
                 <>
-                    <Button variant="tertiary" onClick={continueUnverified}>
+                    <Button variant="warning" onClick={continueUnverified}>
                         <Translation id={showUnverifiedButtonText} />
                     </Button>
+
                     {isPassphraseRequired && (
                         <StyledButton
                             variant="primary"
@@ -92,10 +93,11 @@ export const ConfirmUnverifiedModal = ({
                             <Translation id="TR_ACCOUNT_ENABLE_PASSPHRASE" />
                         </StyledButton>
                     )}
+                    <Button onClick={close} variant="tertiary">
+                        <Translation id="TR_BACK" />
+                    </Button>
                 </>
             }
-        >
-            <StyledImage image="UNI_ERROR" />
-        </StyledModal>
+        />
     );
 };
diff --git a/packages/suite/src/support/messages.ts b/packages/suite/src/support/messages.ts
@@ -4517,6 +4517,10 @@ export default defineMessages({
         id: 'RECEIVE_ADDRESS_REVEAL',
         defaultMessage: 'Show full address',
     },
+    RECEIVE_UNVERIFIED_ADDRESS_REVEAL: {
+        id: 'RECEIVE_UNVERIFIED_ADDRESS_REVEAL',
+        defaultMessage: 'Generate unverified address',
+    },
     RECEIVE_ADDRESS_COINJOIN_DISALLOW: {
         id: 'RECEIVE_ADDRESS_COINJOIN_DISALLOW',
         defaultMessage:
@@ -9077,4 +9081,13 @@ export default defineMessages({
         id: 'TR_PASSPHRASE_DESCRIPTION_ITEM3',
         defaultMessage: 'No one can recover it, not even Trezor support',
     },
+    TR_CONNECT_DEVICE_PROMO_TITLE: {
+        id: 'TR_CONNECT_DEVICE_PROMO_TITLE',
+        defaultMessage: 'Receive address can’t be verified',
+    },
+    TR_CONNECT_DEVICE_PROMO_DESCRIPTION: {
+        id: 'TR_CONNECT_DEVICE_PROMO_DESCRIPTION',
+        defaultMessage:
+            "Verify on Trezor to confirm receive address. Continuing without confirming isn't recommended.",
+    },
 });
diff --git a/packages/suite/src/views/wallet/receive/Receive.tsx b/packages/suite/src/views/wallet/receive/Receive.tsx
@@ -36,12 +36,12 @@ export const Receive = () => {
     const disabled = !!device.authConfirm;
     const showCexWarning = account?.accountType === 'coinjoin' && !isCoinjoinReceiveWarningHidden;
 
-    console.log('isDeviceLocked', isDeviceLocked);
+    const isDeviceConnected = device.connected && device.available;
 
     return (
         <WalletLayout title="TR_NAV_RECEIVE" isSubpage account={selectedAccount}>
             <Flex gap={spacings.sm} direction="column" alignItems="start">
-                {true && <ConnectDevicePromo />}
+                {!isDeviceConnected && <ConnectDevicePromo />}
 
                 <WalletSubpageHeading title="TR_NAV_RECEIVE" />
 
@@ -53,6 +53,7 @@ export const Receive = () => {
                     disabled={disabled}
                     locked={isDeviceLocked}
                     pendingAddresses={pendingAddresses}
+                    isDeviceConnected={isDeviceConnected}
                 />
 
                 <UsedAddresses

diff --git a/packages/suite/src/views/wallet/receive/components/ConnectDevicePromo.tsx b/packages/suite/src/views/wallet/receive/components/ConnectDevicePromo.tsx
@@ -2,6 +2,7 @@ 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';
+import { Translation } from 'src/components/suite';
 
 export const ConnectDevicePromo = () => {
     const selectedDevice = useSelector(selectDevice);
@@ -10,14 +11,13 @@ export const ConnectDevicePromo = () => {
 
     return (
         <Warning variant="warning" withIcon={false}>
-            <Columns alignItems="center" justifyContent="space-between" gap={12} flex={1}>
+            <Columns alignItems="center" justifyContent="space-between" gap={12} flex="1">
                 <Rows alignItems="start">
                     <Text typographyStyle="highlight" variant="warning">
-                        Receive address can’t be verified
+                        <Translation id="TR_CONNECT_DEVICE_PROMO_TITLE" />
                     </Text>
                     <Text typographyStyle="titleSmall">
-                        Verify on Trezor to confirm receive address. Continuing without confirming
-                        isn’t recommended.
+                        <Translation id="TR_CONNECT_DEVICE_PROMO_DESCRIPTION" />
                     </Text>
                 </Rows>
 

diff --git a/packages/suite/src/views/wallet/receive/components/FreshAddress.tsx b/packages/suite/src/views/wallet/receive/components/FreshAddress.tsx
@@ -109,6 +109,7 @@ interface FreshAddressProps {
     disabled: boolean;
     locked: boolean;
     pendingAddresses: string[];
+    isDeviceConnected: boolean;
 }
 
 export const FreshAddress = ({
@@ -117,6 +118,7 @@ export const FreshAddress = ({
     disabled,
     pendingAddresses,
     locked,
+    isDeviceConnected,
 }: FreshAddressProps) => {
     const isAccountUtxoBased = useSelector((state: AccountsRootState) =>
         selectIsAccountUtxoBased(state, account?.key ?? ''),
@@ -156,6 +158,13 @@ export const FreshAddress = ({
         return null;
     };
 
+    const buttonRevealAddressProps = {
+        'data-test': '@wallet/receive/reveal-address-button',
+        onClick: handleAddressReveal,
+        isDisabled: disabled || locked || coinjoinDisallowReveal || !firstFreshAddress,
+        isLoading: locked,
+    };
+
     return (
         <StyledCard>
             <AddressContainer>
@@ -172,15 +181,15 @@ export const FreshAddress = ({
                 </FreshAddressWrapper>
             </AddressContainer>
             <Tooltip content={buttonTooltipContent()}>
-                <StyledButton
-                    data-test="@wallet/receive/reveal-address-button"
-                    icon="TREZOR_LOGO"
-                    onClick={handleAddressReveal}
-                    isDisabled={disabled || locked || coinjoinDisallowReveal || !firstFreshAddress}
-                    isLoading={locked}
-                >
-                    <Translation id="RECEIVE_ADDRESS_REVEAL" />
-                </StyledButton>
+                {isDeviceConnected ? (
+                    <StyledButton icon="TREZOR_LOGO" {...buttonRevealAddressProps}>
+                        <Translation id="RECEIVE_ADDRESS_REVEAL" />
+                    </StyledButton>
+                ) : (
+                    <StyledButton {...buttonRevealAddressProps} variant="warning">
+                        <Translation id="RECEIVE_UNVERIFIED_ADDRESS_REVEAL" />
+                    </StyledButton>
+                )}
             </Tooltip>
             {account.networkType === 'ethereum' && (
                 <StyledEvmExplanationBox