fixup! feat: device modals improvements

trezor · May 25, 2022 · eb3dfcf · eb3dfcf
1 parent c74f385
commit eb3dfcf
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 39 deletions.
diff --git a/packages/components/src/components/form/Input/index.tsx b/packages/components/src/components/form/Input/index.tsx
@@ -48,8 +48,8 @@ const InputAddon = styled.div<{ align: AddonAlignment }>`
     position: absolute;
     top: 1px;
     bottom: 1px;
-    right: ${({ align }) => align === 'right' && '16px'};
-    left: ${({ align }) => align === 'left' && '16px'};
+    right: ${({ align }) => align === 'right' && '10px'};
+    left: ${({ align }) => align === 'left' && '10px'};
     display: flex;
     align-items: center;
 `;

diff --git a/packages/suite/src/components/suite/Modal/DevicePromptModal.tsx b/packages/suite/src/components/suite/Modal/DevicePromptModal.tsx
@@ -1,7 +1,7 @@
 import React, { ComponentType, useMemo } from 'react';
 import ReactDOM from 'react-dom';
 import styled, { css } from 'styled-components';
-import TrezorConnect from 'trezor-connect';
+import TrezorConnect from '@trezor/connect';
 import {
     ConfirmOnDevice,
     Icon,
@@ -67,11 +67,13 @@ const AbortContainer = styled.div`
         ${expandedStyle}
     }
 
-    ${variables.MEDIA_QUERY.HOVER} {
-        ${collapsedStyle}
+    /*Linting error because of a complex interpolation*/
+
+    ${/* sc-selector */ variables.MEDIA_QUERY.HOVER} {
+        ${/* sc-block */ collapsedStyle}
 
         :hover {
-            ${expandedStyle}
+            ${/* sc-block */ expandedStyle}
         }
     }
 `;
@@ -104,11 +106,14 @@ const DevicePromptModalRenderer = ({
     ...rest
 }: DevicePromptModalProps) => {
     const deviceVerions = useSelector(state => state.suite.device?.features?.major_version);
-    const bridgeVersion = useSelector(state => state.suite.transport?.version) as string;
+    const transport = useSelector(state => state.suite.transport);
     const modalTarget = useModalTarget();
     const theme = useTheme();
 
-    const isAbortable = versionUtils.isNewerOrEqual(bridgeVersion, '2.0.31');
+    const isAbortable =
+        transport?.type === 'bridge'
+            ? versionUtils.isNewerOrEqual(transport?.version as string, '2.0.31')
+            : true; // Works via WebUSB
 
     const AbortButton = useMemo(
         () => (

diff --git a/packages/suite/src/components/wallet/TransactionItem/index.tsx b/packages/suite/src/components/wallet/TransactionItem/index.tsx
@@ -65,11 +65,13 @@ const Wrapper = styled.div<{
         `}
 
     &:first-of-type {
+        padding-top: 12px;
         border-top-left-radius: 12px;
         border-top-right-radius: 12px;
     }
 
     &:last-of-type {
+        padding-bottom: 12px;
         border-bottom-left-radius: 12px;
         border-bottom-right-radius: 12px;
     }

diff --git a/packages/suite/src/views/onboarding/index.tsx b/packages/suite/src/views/onboarding/index.tsx
@@ -5,9 +5,9 @@ import { ReduxModal } from '@suite-components/ModalSwitcher/ReduxModal';
 import WelcomeStep from '@onboarding-views/steps/Welcome';
 import CreateOrRecover from '@onboarding-views/steps/CreateOrRecover';
 import FirmwareStep from '@onboarding-views/steps/Firmware';
-import ResetDeviceStep from '@suite/views/onboarding/steps/ResetDevice';
-import RecoveryStep from '@onboarding-views/steps/Recovery';
-import BackupStep from '@onboarding-views/steps/Backup';
+import { ResetDeviceStep } from '@suite/views/onboarding/steps/ResetDevice';
+import { RecoveryStep } from '@onboarding-views/steps/Recovery';
+import { BackupStep } from '@onboarding-views/steps/Backup';
 import SecurityStep from '@onboarding-views/steps/Security';
 import SetPinStep from '@onboarding-views/steps/Pin';
 import BasicSettingsStep from '@onboarding-views/steps/BasicSettings';

diff --git a/packages/suite/src/views/onboarding/steps/Backup/index.tsx b/packages/suite/src/views/onboarding/steps/Backup/index.tsx
@@ -22,7 +22,7 @@ const StyledImage = styled(Image)`
     flex: 1;
 `;
 
-const BackupStep = () => {
+export const BackupStep = () => {
     const [showSkipConfirmation, setShowSkipConfirmation] = useState(false);
     const { goToNextStep, backupDevice, goto, updateAnalytics } = useActions({
         goToNextStep: onboardingActions.goToNextStep,
@@ -154,5 +154,3 @@ const BackupStep = () => {
         </>
     );
 };
-
-export default BackupStep;
diff --git a/packages/suite/src/views/onboarding/steps/Recovery/index.tsx b/packages/suite/src/views/onboarding/steps/Recovery/index.tsx
@@ -1,12 +1,13 @@
 import React from 'react';
+import TrezorConnect from '@trezor/connect';
 import { OnboardingButtonCta } from '@onboarding-components';
 import { SelectWordCount, SelectRecoveryType, SelectRecoveryWord } from '@recovery-components';
 import { Translation } from '@suite-components';
 import * as onboardingActions from '@onboarding-actions/onboardingActions';
 import { useActions, useRecovery, useSelector } from '@suite-hooks';
 import RecoveryStepBox from './RecoveryStepBox';
 
-const RecoveryStep = () => {
+export const RecoveryStep = () => {
     const { goToNextStep, updateAnalytics } = useActions({
         goToNextStep: onboardingActions.goToNextStep,
         updateAnalytics: onboardingActions.updateAnalytics,
@@ -61,9 +62,7 @@ const RecoveryStep = () => {
                 innerActions={
                     <OnboardingButtonCta
                         data-test="@onboarding/recovery/start-button"
-                        onClick={() => {
-                            recoverDevice();
-                        }}
+                        onClick={recoverDevice}
                     >
                         <Translation id="TR_START_RECOVERY" />
                     </OnboardingButtonCta>
@@ -113,21 +112,32 @@ const RecoveryStep = () => {
                     </>
                 );
             }
+
             if (wordRequestInputType === 6 || wordRequestInputType === 9) {
                 return <Translation id="TR_ADVANCED_RECOVERY_TEXT" />;
             }
         };
+
         return (
             <RecoveryStepBox
                 heading={<Translation id="TR_RECOVER_YOUR_WALLET_FROM" />}
+                confirmOnDevice={model}
+                innerActions={
+                    <OnboardingButtonCta
+                        onClick={() => TrezorConnect.cancel()}
+                        icon="CANCEL"
+                        variant="danger"
+                    >
+                        <Translation id="TR_ABORT" />
+                    </OnboardingButtonCta>
+                }
                 description={
                     model === 1 ? (
                         getModel1Description()
                     ) : (
                         <Translation id="TR_RECOVER_SUBHEADING_MODEL_T" />
                     )
                 }
-                confirmOnDevice={model}
             >
                 <SelectRecoveryWord />
             </RecoveryStepBox>
@@ -171,5 +181,3 @@ const RecoveryStep = () => {
     // We shouldn't get there, but to keep typescript sane let's return null
     return null;
 };
-
-export default RecoveryStep;
diff --git a/packages/suite/src/views/onboarding/steps/ResetDevice/index.tsx b/packages/suite/src/views/onboarding/steps/ResetDevice/index.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import TrezorConnect from '@trezor/connect';
 import * as STEP from '@onboarding-constants/steps';
 import {
     OnboardingButtonBack,
@@ -7,12 +8,13 @@ import {
     OptionWrapper,
     OptionsDivider,
     OnboardingStepBox,
+    OnboardingButtonCta,
 } from '@onboarding-components';
 import { Translation } from '@suite-components';
 import { useActions, useSelector, useOnboarding } from '@suite-hooks';
 import * as deviceSettingsActions from '@settings-actions/deviceSettingsActions';
 
-const ResetDeviceStep = () => {
+export const ResetDeviceStep = () => {
     const [submitted, setSubmitted] = useState(false);
     const { resetDevice } = useActions({
         resetDevice: deviceSettingsActions.resetDevice,
@@ -35,19 +37,52 @@ const ResetDeviceStep = () => {
     // eslint-disable-next-line camelcase
     const onResetDevice = async (params?: { backup_type?: 0 | 1 | undefined }) => {
         setSubmitted(false);
+
         const result = await resetDevice(params);
+
         setSubmitted(true);
+
         if (result?.success) {
             goToNextStep(STEP.ID_SECURITY_STEP);
         }
     };
 
+    const handleSingleseedReset = async () => {
+        if (isShamirBackupAvailable) {
+            await onResetDevice({ backup_type: 0 });
+        } else {
+            await onResetDevice();
+        }
+
+        updateAnalytics({ recoveryType: undefined, seedType: 'standard' });
+    };
+
+    const handleShamirReset = async () => {
+        await onResetDevice({ backup_type: 1 });
+
+        updateAnalytics({
+            recoveryType: undefined,
+            seedType: 'shamir',
+        });
+    };
+
     return (
         <OnboardingStepBox
             image="KEY"
             heading={<Translation id="TR_ONBOARDING_GENERATE_SEED" />}
             description={<Translation id="TR_ONBOARDING_GENERATE_SEED_DESCRIPTION" />}
             confirmOnDevice={isWaitingForConfirmation ? device?.features?.major_version : undefined}
+            innerActions={
+                isWaitingForConfirmation && (
+                    <OnboardingButtonCta
+                        onClick={() => TrezorConnect.cancel()}
+                        icon="CANCEL"
+                        variant="danger"
+                    >
+                        <Translation id="TR_ABORT" />
+                    </OnboardingButtonCta>
+                )
+            }
             outerActions={
                 !isWaitingForConfirmation ? (
                     // There is no point to show back button if user can't click it because confirmOnDevice bubble is active
@@ -68,32 +103,20 @@ const ResetDeviceStep = () => {
                                     ? '@onboarding/button-standard-backup'
                                     : '@onboarding/only-backup-option-button'
                             }
-                            onClick={async () => {
-                                if (isShamirBackupAvailable) {
-                                    await onResetDevice({ backup_type: 0 });
-                                } else {
-                                    await onResetDevice();
-                                }
-                                updateAnalytics({ recoveryType: undefined, seedType: 'standard' });
-                            }}
+                            onClick={handleSingleseedReset}
                             heading={<Translation id="SINGLE_SEED" />}
                             description={<Translation id="SINGLE_SEED_DESCRIPTION" />}
                         />
                     </OptionWrapper>
+
                     {isShamirBackupAvailable && (
                         <>
                             <OptionsDivider />
                             <OptionWrapper>
                                 <Option
                                     icon="SEED_SHAMIR"
                                     data-test="@onboarding/shamir-backup-option-button"
-                                    onClick={async () => {
-                                        await onResetDevice({ backup_type: 1 });
-                                        updateAnalytics({
-                                            recoveryType: undefined,
-                                            seedType: 'shamir',
-                                        });
-                                    }}
+                                    onClick={handleShamirReset}
                                     heading={<Translation id="SHAMIR_SEED" />}
                                     description={<Translation id="SHAMIR_SEED_DESCRIPTION" />}
                                 />
@@ -105,5 +128,3 @@ const ResetDeviceStep = () => {
         </OnboardingStepBox>
     );
 };
-
-export default ResetDeviceStep;