fix(suite-native): tiny passphrase flow fixes (#12358)

trezor · May 13, 2024 · 540499f · 540499f
1 parent 277ed8e
commit 540499f
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 6 deletions.
diff --git a/suite-native/intl/src/en.ts b/suite-native/intl/src/en.ts
@@ -699,8 +699,9 @@ export const en = {
                     'Create an offline backup of your passphrase. It is irrecoverable, even by Trezor support.',
                 passphraseMismatchAlert: {
                     title: 'Passphrase mismatch',
-                    description: "Passphrase doesn't match",
-                    buttonTitle: 'Start over',
+                    description: 'Start over and enter your passphrase again.',
+                    primaryButton: 'Start over',
+                    secondaryButton: 'Cancel',
                 },
             },
         },

diff --git a/suite-native/module-passphrase/src/components/PassphraseForm.tsx b/suite-native/module-passphrase/src/components/PassphraseForm.tsx
@@ -77,6 +77,7 @@ export const PassphraseForm = ({ inputLabel, onFocus }: PassphraseFormProps) =>
     const {
         handleSubmit,
         formState: { isDirty },
+        reset,
     } = form;
 
     useEffect(() => {
@@ -89,6 +90,8 @@ export const PassphraseForm = ({ inputLabel, onFocus }: PassphraseFormProps) =>
     const handleCreateHiddenWallet = handleSubmit(({ passphrase }) => {
         dispatch(deviceActions.removeButtonRequests({ device }));
         dispatch(onPassphraseSubmit({ value: passphrase, passphraseOnDevice: false }));
+        // Reset values so when user comes back to this screen, it's clean (for example if try again is triggered later in the flow)
+        reset();
     });
 
     const handleFocusInput = () => {

diff --git a/suite-native/module-passphrase/src/screens/PassphraseEmptyWalletScreen.tsx b/suite-native/module-passphrase/src/screens/PassphraseEmptyWalletScreen.tsx
@@ -11,7 +11,7 @@ import {
     Screen,
     StackToTabCompositeProps,
 } from '@suite-native/navigation';
-import { VStack, Card, Text, Image, Button, Box } from '@suite-native/atoms';
+import { VStack, Card, Text, Image, Button, Box, TextDivider } from '@suite-native/atoms';
 import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
 import { Translation } from '@suite-native/intl';
 
@@ -90,8 +90,7 @@ export const PassphraseEmptyWalletScreen = () => {
                         <Translation id="modulePassphrase.emptyPassphraseWallet.confirmCard.button" />
                     </Button>
                 </Card>
-                {/* TODO https://github.com/trezor/trezor-suite/issues/12207 */}
-                <Text>OR</Text>
+                <TextDivider title="generic.orSeparator" />
                 <VStack spacing={20}>
                     <VStack alignItems="center" spacing="extraSmall">
                         <Text

diff --git a/suite-native/module-passphrase/src/screens/PassphraseVerifyEmptyWalletScreen.tsx b/suite-native/module-passphrase/src/screens/PassphraseVerifyEmptyWalletScreen.tsx
@@ -21,6 +21,7 @@ import { Translation, useTranslate } from '@suite-native/intl';
 import { PassphraseScreenHeader } from '../components/PassphraseScreenHeader';
 import { PassphraseForm } from '../components/PassphraseForm';
 import {
+    cancelPassphraseAndSelectStandardDeviceThunk,
     retryPassphraseAuthenticationThunk,
     verifyPassphraseOnEmptyWalletThunk,
 } from '../passphraseThunks';
@@ -59,12 +60,19 @@ export const PassphraseVerifyEmptyWalletScreen = () => {
                     <Translation id="modulePassphrase.emptyPassphraseWallet.verifyEmptyWallet.passphraseMismatchAlert.description" />
                 ),
                 primaryButtonTitle: (
-                    <Translation id="modulePassphrase.emptyPassphraseWallet.verifyEmptyWallet.passphraseMismatchAlert.buttonTitle" />
+                    <Translation id="modulePassphrase.emptyPassphraseWallet.verifyEmptyWallet.passphraseMismatchAlert.primaryButton" />
                 ),
                 onPressPrimaryButton: () => {
                     navigation.navigate(PassphraseStackRoutes.PassphraseForm);
                     dispatch(retryPassphraseAuthenticationThunk());
                 },
+                primaryButtonVariant: 'redBold',
+                secondaryButtonTitle: (
+                    <Translation id="modulePassphrase.emptyPassphraseWallet.verifyEmptyWallet.passphraseMismatchAlert.secondaryButton" />
+                ),
+                onPressSecondaryButton: () =>
+                    dispatch(cancelPassphraseAndSelectStandardDeviceThunk()),
+                secondaryButtonVariant: 'redElevation0',
                 icon: 'warningTriangleLight',
                 pictogramVariant: 'red',
             });