From 24512a09e3901e7ab81ad8f2122868981ce29bc0 Mon Sep 17 00:00:00 2001 From: Jan Komarek Date: Thu, 2 Jan 2025 20:35:28 +0100 Subject: [PATCH] feat(suite): add create/check backup button to CheckSeedStep --- .../suite-data/files/translations/en.json | 6 +-- .../{ => CheckSeedStep}/CheckSeedStep.tsx | 40 +++++-------------- .../FirmwareInstallationBackupButton.tsx | 31 ++++++++++++++ .../suite/src/components/firmware/index.tsx | 2 +- packages/suite/src/support/messages.ts | 6 +-- 5 files changed, 47 insertions(+), 38 deletions(-) rename packages/suite/src/components/firmware/{ => CheckSeedStep}/CheckSeedStep.tsx (76%) create mode 100644 packages/suite/src/components/firmware/CheckSeedStep/FirmwareInstallationBackupButton.tsx diff --git a/packages/suite-data/files/translations/en.json b/packages/suite-data/files/translations/en.json index 5192aaa2c16..55e554ca653 100644 --- a/packages/suite-data/files/translations/en.json +++ b/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, . 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 . 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.", diff --git a/packages/suite/src/components/firmware/CheckSeedStep.tsx b/packages/suite/src/components/firmware/CheckSeedStep/CheckSeedStep.tsx similarity index 76% rename from packages/suite/src/components/firmware/CheckSeedStep.tsx rename to packages/suite/src/components/firmware/CheckSeedStep/CheckSeedStep.tsx index b4f7043b087..3f6000631f3 100644 --- a/packages/suite/src/components/firmware/CheckSeedStep.tsx +++ b/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 = ( ); if (deviceWillBeWiped) { - const goToDeviceSettingsAnchor = (anchor: SettingsAnchor) => - dispatch(goto('settings-device', { anchor })); - const goToCreateBackup = () => - goToDeviceSettingsAnchor(SettingsAnchor.BackupRecoverySeed); - const goToCheckBackup = () => - goToDeviceSettingsAnchor(SettingsAnchor.CheckRecoverySeed); - return { heading: isBackedUp ? ( @@ -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 => ( - - {chunks} - - ), - }} /> ), @@ -128,6 +105,7 @@ export const CheckSeedStep = ({ deviceWillBeWiped, onClose, onSuccess }: CheckSe id={deviceWillBeWiped ? 'TR_WIPE_AND_REINSTALL' : 'TR_CONTINUE'} /> + } disableConfirmWrapper diff --git a/packages/suite/src/components/firmware/CheckSeedStep/FirmwareInstallationBackupButton.tsx b/packages/suite/src/components/firmware/CheckSeedStep/FirmwareInstallationBackupButton.tsx new file mode 100644 index 00000000000..e6c917f28fa --- /dev/null +++ b/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 ( + + ); +}; diff --git a/packages/suite/src/components/firmware/index.tsx b/packages/suite/src/components/firmware/index.tsx index 55b0feb603c..31c8386eec3 100644 --- a/packages/suite/src/components/firmware/index.tsx +++ b/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'; diff --git a/packages/suite/src/support/messages.ts b/packages/suite/src/support/messages.ts index 6126ce18a92..006c3f0205b 100644 --- a/packages/suite/src/support/messages.ts +++ b/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, . 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 . 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',