feat(suite): add create/check backup button to CheckSeedStep

packages/suite-data/files/translations/en.json

@@ -356,7 +356,7 @@
   "TR_BASIC_RECOVERY": "Standard recovery",
   "TR_BASIC_RECOVERY_OPTION": "Enter your wallet backup word by word on your computer.",
   "TR_BCH_ADDRESS_INFO": "Bitcoin Cash changed the address format to cashaddr. Find more info about how to convert your address on our blog. {TR_LEARN_MORE}",
-  "TR_BEFORE_ANY_FURTHER_ACTIONS": "Although unlikely, you may need to access your wallet backup in case of a firmware update issue.",
+  "TR_BEFORE_ANY_FURTHER_ACTIONS": "Although unlikely, you may need to access your wallet backup in the event of a firmware update issue. If you're uncertain about the accuracy of your backup, you can verify it before proceeding with the installation.",
   "TR_BIP_SIG_FORMAT": "Trezor",
   "TR_BITCOIN_ONLY_UNAVAILABLE": "Before switching to {bitcoinOnly}, you need to upgrade your firmware to the latest version.",
   "TR_BREAKING_ANONYMITY_CHECKBOX": "I understand that I'm compromising my anonymity.",
@@ -665,7 +665,7 @@
   "TR_CONTINUE_ANYWAY": "Continue anyway",
   "TR_CONTINUE_ONLY_WITH_SEED": "Continue only if you have your wallet backup",
   "TR_CONTINUE_ONLY_WITH_SEED_DESCRIPTION": "If you don't have your wallet backup, not even Trezor Support can help you recover your funds if your device is reset. If you have multiple wallet backups, make sure that you have the correct one ready and easily accessible to recover this specific Trezor device.",
-  "TR_CONTINUE_ONLY_WITH_SEED_DESCRIPTION_2": "Before you continue, <button>check your backup in Settings</button>. This is an easy way to check and verify your wallet backup.",
+  "TR_CONTINUE_ONLY_WITH_SEED_DESCRIPTION_2": "Before you continue, check your wallet backup. This is an easy way to check and verify your wallet backup.",
   "TR_CONTINUE_ON_TREZOR": "Continue on Trezor",
   "TR_CONTINUE_TO_BACKUP": "Continue to backup",
   "TR_CONTINUE_TO_PIN": "Create PIN",
@@ -1854,7 +1854,7 @@
   "TR_SWITCH_DEVICE_EJECT_CONFIRMATION_TITLE": "Eject this wallet?",
   "TR_SWITCH_FIRMWARE": "Switch firmware",
   "TR_SWITCH_FIRMWARE_NO_BACKUP": "You may lose access to your coins on this wallet without a wallet backup. If you’re confident that this wallet is empty, proceed, but do so at your own risk.",
-  "TR_SWITCH_FIRMWARE_NO_BACKUP_2": "In all cases, we strongly recommend <button>creating a wallet backup in Settings</button>. With a wallet backup, your coins are safe and secure even if your Trezor is lost, damaged, or stolen.",
+  "TR_SWITCH_FIRMWARE_NO_BACKUP_2": "In all cases, we strongly recommend creating a wallet backup. With a wallet backup, your coins are safe and secure even if your Trezor is lost, damaged, or stolen.",
   "TR_SWITCH_FIRMWARE_TO": "Switch firmware to {firmwareType}",
   "TR_SWITCH_TO_BITCOIN_ONLY": "Switch to {bitcoinOnly}",
   "TR_SWITCH_TO_BITCOIN_ONLY_DESCRIPTION": "{bitcoinOnly} firmware only works with Bitcoin transactions. If you want to access and manage all of your coins, just switch your device firmware back to {regular} anytime by using your wallet backup.",

packages/suite/src/components/firmware/CheckSeedStep.tsx → packages/suite/src/components/firmware/CheckSeedStep/CheckSeedStep.tsx

@@ -6,19 +6,13 @@ import { Button, Checkbox, Column, variables } from '@trezor/components';
 import { spacings, spacingsPx } from '@trezor/theme';
 import { selectSelectedDeviceLabelOrName } from '@suite-common/wallet-core';
 
-import { useDevice, useDispatch, useSelector } from 'src/hooks/suite';
+import { useDevice, useSelector } from 'src/hooks/suite';
 import { Translation } from 'src/components/suite';
 import { OnboardingStepBox } from 'src/components/onboarding';
-import { goto } from 'src/actions/suite/routerActions';
-import { SettingsAnchor } from 'src/constants/suite/anchors';
 
-import { FirmwareButtonsRow } from './Buttons/FirmwareButtonsRow';
-import { FirmwareSwitchWarning } from './FirmwareSwitchWarning';
-
-const TextButton = styled.span`
-    cursor: pointer;
-    text-decoration: underline;
-`;
+import { FirmwareButtonsRow } from '../Buttons/FirmwareButtonsRow';
+import { FirmwareSwitchWarning } from '../FirmwareSwitchWarning';
+import { FirmwareInstallationBackupButton } from './FirmwareInstallationBackupButton';
 
 const StyledSwitchWarning = styled(FirmwareSwitchWarning)`
     align-self: flex-start;
@@ -38,28 +32,20 @@ type CheckSeedStepProps = {
 
 export const CheckSeedStep = ({ deviceWillBeWiped, onClose, onSuccess }: CheckSeedStepProps) => {
     const deviceLabel = useSelector(selectSelectedDeviceLabelOrName);
-    const dispatch = useDispatch();
     const { device } = useDevice();
     const [isChecked, setIsChecked] = useState(false);
 
+    const isBackedUp =
+        device?.features?.backup_availability !== 'Required' &&
+        !device?.features?.unfinished_backup;
+
     const handleCheckboxClick = () => setIsChecked(prev => !prev);
     const getContent = () => {
-        const isBackedUp =
-            device?.features?.backup_availability !== 'Required' &&
-            !device?.features?.unfinished_backup;
-
         const noBackupHeading = (
             <Translation id="TR_DEVICE_LABEL_IS_NOT_BACKED_UP" values={{ deviceLabel }} />
         );
 
         if (deviceWillBeWiped) {
-            const goToDeviceSettingsAnchor = (anchor: SettingsAnchor) =>
-                dispatch(goto('settings-device', { anchor }));
-            const goToCreateBackup = () =>
-                goToDeviceSettingsAnchor(SettingsAnchor.BackupRecoverySeed);
-            const goToCheckBackup = () =>
-                goToDeviceSettingsAnchor(SettingsAnchor.CheckRecoverySeed);
-
             return {
                 heading: isBackedUp ? (
                     <Translation id="TR_CONTINUE_ONLY_WITH_SEED" />
@@ -81,15 +67,6 @@ export const CheckSeedStep = ({ deviceWillBeWiped, onClose, onSuccess }: CheckSe
                                     ? 'TR_CONTINUE_ONLY_WITH_SEED_DESCRIPTION_2'
                                     : 'TR_SWITCH_FIRMWARE_NO_BACKUP_2'
                             }
-                            values={{
-                                button: chunks => (
-                                    <TextButton
-                                        onClick={isBackedUp ? goToCheckBackup : goToCreateBackup}
-                                    >
-                                        {chunks}
-                                    </TextButton>
-                                ),
-                            }}
                         />
                     </Column>
                 ),
@@ -128,6 +105,7 @@ export const CheckSeedStep = ({ deviceWillBeWiped, onClose, onSuccess }: CheckSe
                             id={deviceWillBeWiped ? 'TR_WIPE_AND_REINSTALL' : 'TR_CONTINUE'}
                         />
                     </Button>
+                    <FirmwareInstallationBackupButton isBackedUp={isBackedUp} />
                 </FirmwareButtonsRow>
             }
             disableConfirmWrapper

packages/suite/src/components/firmware/CheckSeedStep/FirmwareInstallationBackupButton.tsx

@@ -0,0 +1,31 @@
+import { useFirmwareInstallation } from '@suite-common/firmware';
+import { Button } from '@trezor/components';
+
+import { goto } from 'src/actions/suite/routerActions';
+import { Translation } from 'src/components/suite';
+import { useDispatch } from 'src/hooks/suite';
+
+type FirmwareInstallationBackupButtonProps = {
+    isBackedUp: boolean;
+};
+
+export const FirmwareInstallationBackupButton = ({
+    isBackedUp,
+}: FirmwareInstallationBackupButtonProps) => {
+    const dispatch = useDispatch();
+
+    const { resetReducer } = useFirmwareInstallation();
+
+    const secondaryButtonText = isBackedUp ? 'TR_CHECK_SEED' : 'TR_CREATE_BACKUP';
+
+    const handleSecondaryButtonClick = () => {
+        resetReducer();
+        dispatch(goto(isBackedUp ? 'recovery-index' : 'backup-index'));
+    };
+
+    return (
+        <Button variant="tertiary" onClick={handleSecondaryButtonClick}>
+            <Translation id={secondaryButtonText} />
+        </Button>
+    );
+};

packages/suite/src/components/firmware/index.tsx

@@ -1,4 +1,4 @@
-export { CheckSeedStep } from './CheckSeedStep';
+export { CheckSeedStep } from './CheckSeedStep/CheckSeedStep';
 export { ReconnectDevicePrompt } from './ReconnectDevicePrompt';
 export { FirmwareOffer } from './FirmwareOffer';
 export { FirmwareInstallation } from './FirmwareInstallation';

packages/suite/src/support/messages.ts

@@ -4627,7 +4627,7 @@ export default defineMessages({
     TR_BEFORE_ANY_FURTHER_ACTIONS: {
         id: 'TR_BEFORE_ANY_FURTHER_ACTIONS',
         defaultMessage:
-            'Although unlikely, you may need to access your wallet backup in case of a firmware update issue.',
+            "Although unlikely, you may need to access your wallet backup in the event of a firmware update issue. If you're uncertain about the accuracy of your backup, you can verify it before proceeding with the installation.",
     },
     TR_CONTINUE_ONLY_WITH_SEED: {
         id: 'TR_CONTINUE_ONLY_WITH_SEED',
@@ -4641,7 +4641,7 @@ export default defineMessages({
     TR_CONTINUE_ONLY_WITH_SEED_DESCRIPTION_2: {
         id: 'TR_CONTINUE_ONLY_WITH_SEED_DESCRIPTION_2',
         defaultMessage:
-            'Before you continue, <button>check your backup in Settings</button>. This is an easy way to check and verify your wallet backup.',
+            'Before you continue, check your wallet backup. This is an easy way to check and verify your wallet backup.',
     },
     TR_SWITCH_FIRMWARE_NO_BACKUP: {
         id: 'TR_SWITCH_FIRMWARE_NO_BACKUP',
@@ -4651,7 +4651,7 @@ export default defineMessages({
     TR_SWITCH_FIRMWARE_NO_BACKUP_2: {
         id: 'TR_SWITCH_FIRMWARE_NO_BACKUP_2',
         defaultMessage:
-            'In all cases, we strongly recommend <button>creating a wallet backup in Settings</button>. With a wallet backup, your coins are safe and secure even if your Trezor is lost, damaged, or stolen.',
+            'In all cases, we strongly recommend creating a wallet backup. With a wallet backup, your coins are safe and secure even if your Trezor is lost, damaged, or stolen.',
     },
     TR_IMPORTANT: {
         id: 'TR_IMPORTANT',