Feat/native/passphrase UI fixes vol.1 (#12610)

* feat(suite-native): navigation fixes * feat(suite-native): empty space below form (cherry picked from commit e850b56796a6694366e2857694b9640ba028c196)
trezor · May 29, 2024 · 29914f2 · 29914f2
1 parent de4629b
commit 29914f2
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 27 deletions.
diff --git a/suite-native/module-passphrase/src/components/PassphraseForm.tsx b/suite-native/module-passphrase/src/components/PassphraseForm.tsx
@@ -1,6 +1,6 @@
 import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
 import { useDispatch, useSelector } from 'react-redux';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { useNavigation } from '@react-navigation/native';
 
@@ -13,14 +13,7 @@ import {
 import { Button, Card, VStack, TextDivider } from '@suite-native/atoms';
 import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
 import { Translation } from '@suite-native/intl';
-import {
-    deviceActions,
-    onPassphraseSubmit,
-    selectDevice,
-    selectDeviceButtonRequestsCodes,
-    selectDeviceState,
-    selectIsDeviceDiscoveryActive,
-} from '@suite-common/wallet-core';
+import { deviceActions, onPassphraseSubmit, selectDevice } from '@suite-common/wallet-core';
 import {
     PassphraseStackParamList,
     PassphraseStackRoutes,
@@ -61,9 +54,6 @@ export const PassphraseForm = ({ inputLabel, onFocus }: PassphraseFormProps) =>
     const { applyStyle } = useNativeStyles();
 
     const device = useSelector(selectDevice);
-    const buttonRequestCodes = useSelector(selectDeviceButtonRequestsCodes);
-    const deviceState = useSelector(selectDeviceState);
-    const isDiscoveryActive = useSelector(selectIsDeviceDiscoveryActive);
 
     const navigation = useNavigation<NavigationProp>();
 
@@ -80,16 +70,10 @@ export const PassphraseForm = ({ inputLabel, onFocus }: PassphraseFormProps) =>
         reset,
     } = form;
 
-    useEffect(() => {
-        if (buttonRequestCodes.includes('ButtonRequest_Other')) {
-            navigation.navigate(PassphraseStackRoutes.PassphraseConfirmOnTrezor);
-            dispatch(deviceActions.removeButtonRequests({ device }));
-        }
-    }, [buttonRequestCodes, device, deviceState, dispatch, isDiscoveryActive, navigation]);
-
     const handleCreateHiddenWallet = handleSubmit(({ passphrase }) => {
         dispatch(deviceActions.removeButtonRequests({ device }));
         dispatch(onPassphraseSubmit({ value: passphrase, passphraseOnDevice: false }));
+        navigation.push(PassphraseStackRoutes.PassphraseConfirmOnTrezor);
         // 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();
     });
@@ -113,26 +97,28 @@ export const PassphraseForm = ({ inputLabel, onFocus }: PassphraseFormProps) =>
                         onBlur={() => setIsInputFocused(false)}
                         secureTextEntry
                     />
-                    <Animated.View entering={FadeIn} exiting={FadeOut}>
-                        {isDirty && (
+                    {isDirty && (
+                        <Animated.View entering={FadeIn} exiting={FadeOut}>
                             <Button
                                 accessibilityRole="button"
                                 accessibilityLabel="confirm passphrase"
                                 onPress={handleCreateHiddenWallet}
                             >
                                 <Translation id="modulePassphrase.form.enterWallet" />
                             </Button>
-                        )}
-                        {!isDirty && !isInputFocused && (
+                        </Animated.View>
+                    )}
+                    {!isDirty && !isInputFocused && (
+                        <Animated.View entering={FadeIn} exiting={FadeOut}>
                             <VStack>
                                 <TextDivider
                                     title="generic.orSeparator"
                                     horizontalMargin={FORM_CARD_PADDING}
                                 />
                                 <EnterPassphraseOnTrezorButton />
                             </VStack>
-                        )}
-                    </Animated.View>
+                        </Animated.View>
+                    )}
                 </VStack>
             </Card>
         </Form>

diff --git a/suite-native/module-passphrase/src/screens/PassphraseVerifyEmptyWalletScreen.tsx b/suite-native/module-passphrase/src/screens/PassphraseVerifyEmptyWalletScreen.tsx
@@ -69,8 +69,15 @@ export const PassphraseVerifyEmptyWalletScreen = () => {
                 secondaryButtonTitle: (
                     <Translation id="modulePassphrase.emptyPassphraseWallet.verifyEmptyWallet.passphraseMismatchAlert.secondaryButton" />
                 ),
-                onPressSecondaryButton: () =>
-                    dispatch(cancelPassphraseAndSelectStandardDeviceThunk()),
+                onPressSecondaryButton: () => {
+                    dispatch(cancelPassphraseAndSelectStandardDeviceThunk());
+                    navigation.navigate(RootStackRoutes.AppTabs, {
+                        screen: AppTabsRoutes.HomeStack,
+                        params: {
+                            screen: HomeStackRoutes.Home,
+                        },
+                    });
+                },
                 secondaryButtonVariant: 'redElevation0',
                 icon: 'warningTriangleLight',
                 pictogramVariant: 'red',