fix(suite-native): revise navigation and spacing of the Sync my coins…

… flow
trezor · Nov 5, 2024 · 9456b3e · 9456b3e
1 parent b7afbd0
commit 9456b3e
Show file tree

Hide file tree

Showing 16 changed files with 105 additions and 162 deletions.
diff --git a/suite-native/app/src/navigation/RootStackNavigator.tsx b/suite-native/app/src/navigation/RootStackNavigator.tsx
@@ -59,6 +59,7 @@ export const RootStackNavigator = () => {
             <RootStack.Screen
                 name={RootStackRoutes.AccountsImport}
                 component={AccountsImportStackNavigator}
+                options={{ animation: 'slide_from_bottom' }}
             />
             <RootStack.Screen
                 options={{ title: RootStackRoutes.AccountSettings }}
@@ -88,12 +89,11 @@ export const RootStackNavigator = () => {
                 name={RootStackRoutes.AddCoinAccountStack}
                 component={AddCoinAccountStackNavigator}
             />
-            <RootStack.Group screenOptions={{ animation: 'slide_from_bottom' }}>
-                <RootStack.Screen
-                    name={RootStackRoutes.CoinEnablingInit}
-                    component={CoinEnablingInitScreen}
-                />
-            </RootStack.Group>
+            <RootStack.Screen
+                name={RootStackRoutes.CoinEnablingInit}
+                component={CoinEnablingInitScreen}
+                options={{ animation: 'slide_from_bottom' }}
+            />
             <RootStack.Screen name={RootStackRoutes.ReceiveModal} component={ReceiveModalScreen} />
             <RootStack.Screen
                 name={RootStackRoutes.AuthorizeDeviceStack}
@@ -103,12 +103,11 @@ export const RootStackNavigator = () => {
                     animation: 'slide_from_bottom',
                 }}
             />
-            <RootStack.Group screenOptions={{ animation: 'slide_from_bottom' }}>
-                <RootStack.Screen
-                    name={RootStackRoutes.DeviceSettingsStack}
-                    component={DeviceSettingsStackNavigator}
-                />
-            </RootStack.Group>
+            <RootStack.Screen
+                name={RootStackRoutes.DeviceSettingsStack}
+                component={DeviceSettingsStackNavigator}
+                options={{ animation: 'slide_from_bottom' }}
+            />
             <RootStack.Screen name={RootStackRoutes.SendStack} component={SendStackNavigator} />
             <RootStack.Screen
                 name={RootStackRoutes.ConnectPopup}

diff --git a/suite-native/intl/src/en.ts b/suite-native/intl/src/en.ts
@@ -109,10 +109,7 @@ export const en = {
             },
             subtitle: "Here's what you have in your account.",
             tokens: 'Tokens:',
-            button: {
-                importAnotherAsset: 'Import another asset',
-                continueToApp: 'Continue to app',
-            },
+            syncAnotherCoinButton: 'Sync another coin',
         },
         coinList: {
             mainnets: 'Select a coin to sync',

diff --git a/suite-native/module-accounts-import/src/components/AccountAlreadyImportedScreen.tsx b/suite-native/module-accounts-import/src/components/AccountAlreadyImportedScreen.tsx
@@ -7,11 +7,10 @@ import { Translation } from '@suite-native/intl';
 import {
     AccountsImportStackParamList,
     AccountsImportStackRoutes,
-    AppTabsRoutes,
-    HomeStackRoutes,
     RootStackParamList,
     RootStackRoutes,
     StackToTabCompositeProps,
+    useNavigateToInitialScreen,
 } from '@suite-native/navigation';
 import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
 
@@ -36,38 +35,31 @@ type NavigationProp = StackToTabCompositeProps<
 export const AccountAlreadyImportedScreen = ({ account }: AccountAlreadyImportedScreenProps) => {
     const { applyStyle } = useNativeStyles();
     const navigation = useNavigation<NavigationProp>();
+    const navigateToInitialScreen = useNavigateToInitialScreen();
 
-    const handleImportAnotherAsset = () =>
+    const handleSyncAnotherAsset = () =>
         navigation.navigate(RootStackRoutes.AccountsImport, {
             screen: AccountsImportStackRoutes.XpubScan,
             params: {
                 networkSymbol: account.symbol,
             },
         });
 
-    const handleNavigateToDashboard = () =>
-        navigation.navigate(RootStackRoutes.AppTabs, {
-            screen: AppTabsRoutes.HomeStack,
-            params: {
-                screen: HomeStackRoutes.Home,
-            },
-        });
-
     return (
         <AccountImportSummaryScreen
             title={<Translation id="moduleAccountImport.summaryScreen.title.alreadySynced" />}
             subtitle={<Translation id="moduleAccountImport.summaryScreen.subtitle" />}
             footer={
                 <VStack spacing="sp16">
+                    <Button size="large" onPress={handleSyncAnotherAsset}>
+                        <Translation id="moduleAccountImport.summaryScreen.syncAnotherCoinButton" />
+                    </Button>
                     <Button
                         size="large"
                         colorScheme="tertiaryElevation0"
-                        onPress={handleImportAnotherAsset}
+                        onPress={navigateToInitialScreen}
                     >
-                        <Translation id="moduleAccountImport.summaryScreen.button.importAnotherAsset" />
-                    </Button>
-                    <Button size="large" onPress={handleNavigateToDashboard}>
-                        <Translation id="moduleAccountImport.summaryScreen.button.continueToApp" />
+                        <Translation id="generic.buttons.cancel" />
                     </Button>
                 </VStack>
             }

diff --git a/suite-native/module-accounts-import/src/components/AccountImportConfirmFormScreen.tsx b/suite-native/module-accounts-import/src/components/AccountImportConfirmFormScreen.tsx
@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { CommonActions, useNavigation } from '@react-navigation/core';
+import { useNavigation } from '@react-navigation/core';
 import { FlashList } from '@shopify/flash-list';
 
 import { Translation } from '@suite-native/intl';
@@ -23,10 +23,9 @@ import { Form } from '@suite-native/forms';
 import {
     AccountsImportStackParamList,
     AccountsImportStackRoutes,
-    HomeStackRoutes,
     RootStackParamList,
-    RootStackRoutes,
     StackToStackCompositeNavigationProps,
+    useNavigateToInitialScreen,
 } from '@suite-native/navigation';
 import { AccountInfo, TokenInfo } from '@trezor/connect';
 
@@ -53,6 +52,7 @@ export const AccountImportConfirmFormScreen = ({
 }: AccountImportConfirmFormScreenProps) => {
     const dispatch = useDispatch();
     const navigation = useNavigation<NavigationProp>();
+    const navigateToInitialScreen = useNavigateToInitialScreen();
     const showImportError = useShowImportError(networkSymbol, navigation);
 
     const knownTokens = useSelector((state: TokenDefinitionsRootState) =>
@@ -92,19 +92,7 @@ export const AccountImportConfirmFormScreen = ({
                 },
             });
 
-            navigation.dispatch(
-                CommonActions.reset({
-                    index: 0,
-                    routes: [
-                        {
-                            name: RootStackRoutes.AppTabs,
-                            params: {
-                                screen: HomeStackRoutes.Home,
-                            },
-                        },
-                    ],
-                }),
-            );
+            navigateToInitialScreen();
         } catch {
             showImportError();
         }

diff --git a/suite-native/module-accounts-import/src/components/AccountImportOverview.tsx b/suite-native/module-accounts-import/src/components/AccountImportOverview.tsx
@@ -25,7 +25,6 @@ export const AccountImportOverview = ({ balance, networkSymbol }: AssetsOverview
         <AccountImportOverviewCard
             icon={<RoundedIcon networkSymbol={networkSymbol} iconSize="large" />}
             coinName={networks[networkSymbol].name}
-            symbol={networkSymbol}
             cryptoAmount={
                 <CryptoAmountFormatter
                     value={balance}

diff --git a/suite-native/module-accounts-import/src/components/AccountImportOverviewCard.tsx b/suite-native/module-accounts-import/src/components/AccountImportOverviewCard.tsx
@@ -1,57 +1,29 @@
 import { ReactNode } from 'react';
 
-import { useNavigation } from '@react-navigation/core';
-
-import { Box, Card, IconButton, Text } from '@suite-native/atoms';
+import { Box, Card, Text } from '@suite-native/atoms';
 import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
-import {
-    AccountsImportStackParamList,
-    AccountsImportStackRoutes,
-    RootStackParamList,
-    RootStackRoutes,
-    StackToTabCompositeProps,
-} from '@suite-native/navigation';
-import { NetworkSymbol } from '@suite-common/wallet-config';
 
 const assetCardStyle = prepareNativeStyle(utils => ({
     padding: utils.spacings.sp24,
     borderRadius: utils.borders.radii.r20,
     width: '100%',
 }));
 
-type NavigationProp = StackToTabCompositeProps<
-    AccountsImportStackParamList,
-    AccountsImportStackRoutes.AccountImportSummary,
-    RootStackParamList
->;
-
 type AccountImportOverviewCardProps = {
     children?: ReactNode;
     icon: ReactNode;
     cryptoAmount: ReactNode;
     coinName: string;
-    shouldDisplayDeleteIcon?: boolean;
-    symbol: NetworkSymbol;
 };
+
 export const AccountImportOverviewCard = ({
     children,
     icon,
     coinName,
-    symbol,
     cryptoAmount,
-    shouldDisplayDeleteIcon = true,
 }: AccountImportOverviewCardProps) => {
-    const navigation = useNavigation<NavigationProp>();
     const { applyStyle } = useNativeStyles();
 
-    const handleNavigateToQRScan = () =>
-        navigation.navigate(RootStackRoutes.AccountsImport, {
-            screen: AccountsImportStackRoutes.XpubScan,
-            params: {
-                networkSymbol: symbol,
-            },
-        });
-
     return (
         <Card style={applyStyle(assetCardStyle)}>
             <Box flexDirection="row" marginBottom="sp24" justifyContent="space-between">
@@ -62,15 +34,6 @@ export const AccountImportOverviewCard = ({
                         {cryptoAmount}
                     </Box>
                 </Box>
-                {shouldDisplayDeleteIcon && (
-                    <IconButton
-                        data-testID="@account-import/coin-synced/delete-icon"
-                        iconName="trashSimple"
-                        colorScheme="tertiaryElevation1"
-                        onPress={handleNavigateToQRScan}
-                        size="medium"
-                    />
-                )}
             </Box>
             {children}
         </Card>

diff --git a/suite-native/module-accounts-import/src/components/AccountImportSubHeader.tsx b/suite-native/module-accounts-import/src/components/AccountImportSubHeader.tsx
@@ -1,61 +1,26 @@
-import { useSelector } from 'react-redux';
-
-import { useNavigation } from '@react-navigation/core';
-
-import { IconButton, Text, VStack } from '@suite-native/atoms';
+import { useTranslate } from '@suite-native/intl';
 import {
-    AccountsImportStackParamList,
-    AccountsImportStackRoutes,
-    AppTabsRoutes,
-    HomeStackRoutes,
-    RootStackParamList,
-    RootStackRoutes,
+    CloseActionType,
     ScreenSubHeader,
-    StackToTabCompositeProps,
+    useNavigateToInitialScreen,
 } from '@suite-native/navigation';
-import { Translation } from '@suite-native/intl';
-import { selectIsDeviceAccountless } from '@suite-common/wallet-core';
 
-type NavigationProp = StackToTabCompositeProps<
-    AccountsImportStackParamList,
-    AccountsImportStackRoutes.AccountImportSummary,
-    RootStackParamList
->;
-
-export const AccountImportSubHeader = () => {
-    const navigation = useNavigation<NavigationProp>();
-    const isDeviceAccountless = useSelector(selectIsDeviceAccountless);
+type AccountImportSubHeaderProps = {
+    closeActionType?: CloseActionType;
+};
 
-    const handleCloseOnboarding = () => {
-        navigation.navigate(RootStackRoutes.AppTabs, {
-            screen: AppTabsRoutes.HomeStack,
-            params: {
-                screen: HomeStackRoutes.Home,
-            },
-        });
-    };
+export const AccountImportSubHeader = ({
+    closeActionType = 'close',
+}: AccountImportSubHeaderProps) => {
+    const { translate } = useTranslate();
+    const navigateToInitialScreen = useNavigateToInitialScreen();
 
     return (
         <ScreenSubHeader
-            leftIcon={
-                !isDeviceAccountless ? (
-                    <IconButton
-                        iconName="x"
-                        colorScheme="tertiaryElevation0"
-                        onPress={handleCloseOnboarding}
-                        accessibilityRole="button"
-                        accessibilityLabel="close"
-                        size="medium"
-                    />
-                ) : null
-            }
-            content={
-                <VStack alignItems="center" spacing="sp8">
-                    <Text variant="titleSmall" adjustsFontSizeToFit numberOfLines={1}>
-                        <Translation id="moduleAccountImport.title" />
-                    </Text>
-                </VStack>
-            }
+            customHorizontalPadding="sp16"
+            closeActionType={closeActionType}
+            closeAction={closeActionType === 'close' ? navigateToInitialScreen : undefined}
+            content={translate('moduleAccountImport.title')}
         />
     );
 };
diff --git a/suite-native/module-accounts-import/src/components/TokenInfoCard.tsx b/suite-native/module-accounts-import/src/components/TokenInfoCard.tsx
@@ -37,8 +37,6 @@ export const TokenInfoCard = ({
     return (
         <AccountImportOverviewCard
             coinName={name}
-            symbol={networkSymbol}
-            shouldDisplayDeleteIcon={false}
             cryptoAmount={
                 <TokenAmountFormatter
                     value={balance}

diff --git a/suite-native/module-accounts-import/src/navigation/AccountsImportStackNavigator.tsx b/suite-native/module-accounts-import/src/navigation/AccountsImportStackNavigator.tsx
@@ -15,15 +15,15 @@ export const AccountsImportStack = createNativeStackNavigator<AccountsImportStac
 
 export const AccountsImportStackNavigator = () => (
     <AccountsImportStack.Navigator screenOptions={stackNavigationOptionsConfig}>
-        <AccountsImportStack.Group>
-            <AccountsImportStack.Screen
-                name={AccountsImportStackRoutes.SelectNetwork}
-                component={SelectNetworkScreen}
-            />
-            <AccountsImportStack.Screen
-                name={AccountsImportStackRoutes.XpubScan}
-                component={XpubScanScreen}
-            />
+        <AccountsImportStack.Screen
+            name={AccountsImportStackRoutes.SelectNetwork}
+            component={SelectNetworkScreen}
+        />
+        <AccountsImportStack.Screen
+            name={AccountsImportStackRoutes.XpubScan}
+            component={XpubScanScreen}
+        />
+        <AccountsImportStack.Group screenOptions={{ gestureEnabled: false }}>
             <AccountsImportStack.Screen
                 name={AccountsImportStackRoutes.AccountImportLoading}
                 component={AccountImportLoadingScreen}

diff --git a/suite-native/module-accounts-import/src/screens/AccountImportLoadingScreen.tsx b/suite-native/module-accounts-import/src/screens/AccountImportLoadingScreen.tsx
@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useState } from 'react';
+import { BackHandler } from 'react-native';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { selectFiatCurrencyCode } from '@suite-native/settings';
@@ -70,6 +71,15 @@ export const AccountImportLoadingScreen = ({
         [error, showImportError],
     );
 
+    useEffect(() => {
+        // prevent dismissing screen via HW
+        const subscription = BackHandler.addEventListener('hardwareBackPress', () => {
+            return true;
+        });
+
+        return () => subscription.remove();
+    }, []);
+
     useEffect(() => {
         fetchAccountInfo();
     }, [fetchAccountInfo]);