fix(suite-native): use correct receive flow screens for connected device

trezor · Jan 15, 2025 · f561c89 · f561c89
1 parent a4c23ca
commit f561c89
Show file tree

Hide file tree

Showing 21 changed files with 244 additions and 125 deletions.
diff --git a/suite-native/accounts/package.json b/suite-native/accounts/package.json
@@ -24,7 +24,6 @@
         "@suite-native/alerts": "workspace:*",
         "@suite-native/atoms": "workspace:*",
         "@suite-native/config": "workspace:*",
-        "@suite-native/feature-flags": "workspace:*",
         "@suite-native/formatters": "workspace:*",
         "@suite-native/forms": "workspace:*",
         "@suite-native/icons": "workspace:*",

diff --git a/suite-native/accounts/src/components/AccountsList/AccountsList.tsx b/suite-native/accounts/src/components/AccountsList/AccountsList.tsx
@@ -54,7 +54,7 @@ export const AccountsList = ({
 
     return (
         <>
-            <VStack spacing="sp16">
+            <VStack marginTop="sp8" spacing="sp16">
                 {groups.map(([accountTypeHeader, networkAccounts]) => (
                     <Card key={accountTypeHeader} noPadding>
                         {networkAccounts.map(account => (

diff --git a/suite-native/accounts/src/components/AddAccountsButton.tsx b/suite-native/accounts/src/components/AddAccountsButton.tsx
@@ -16,7 +16,6 @@ import {
     selectIsDeviceInViewOnlyMode,
     selectIsPortfolioTrackerDevice,
 } from '@suite-common/wallet-core';
-import { FeatureFlag, useFeatureFlag } from '@suite-native/feature-flags';
 
 import { useAccountAlerts } from '../hooks/useAccountAlerts';
 
@@ -29,15 +28,11 @@ export const AddAccountButton = ({ flowType, testID }: AddAccountButtonProps) =>
     const navigation =
         useNavigation<StackNavigationProps<RootStackParamList, RootStackRoutes.AccountsImport>>();
 
+    const hasDeviceDiscovery = useSelector(selectHasDeviceDiscovery);
     const isSelectedDevicePortfolioTracker = useSelector(selectIsPortfolioTrackerDevice);
-    const hasDiscovery = useSelector(selectHasDeviceDiscovery);
-    const isDeviceConnectEnabled = useFeatureFlag(FeatureFlag.IsDeviceConnectEnabled);
     const { showViewOnlyAddAccountAlert } = useAccountAlerts();
     const isDeviceInViewOnlyMode = useSelector(selectIsDeviceInViewOnlyMode);
 
-    const shouldShowAddAccountButton =
-        isSelectedDevicePortfolioTracker || (isDeviceConnectEnabled && !hasDiscovery);
-
     const navigateToImportScreen = () => {
         navigation.navigate(RootStackRoutes.AccountsImport, {
             screen: AccountsImportStackRoutes.SelectNetwork,
@@ -58,15 +53,17 @@ export const AddAccountButton = ({ flowType, testID }: AddAccountButtonProps) =>
         });
     };
 
-    return shouldShowAddAccountButton ? (
+    return (
         <IconButton
             iconName="plus"
             onPress={
                 isSelectedDevicePortfolioTracker ? navigateToImportScreen : navigateToAddCoinAccount
             }
             colorScheme="tertiaryElevation0"
             size="medium"
+            isLoading={hasDeviceDiscovery}
+            isDisabled={hasDeviceDiscovery}
             testID={testID}
         />
-    ) : null;
+    );
 };
diff --git a/suite-native/accounts/src/components/SearchableAccountsListHeader.tsx b/suite-native/accounts/src/components/SearchableAccountsListHeader.tsx
@@ -24,7 +24,7 @@ const HEADER_ANIMATION_DURATION = 100;
 
 const searchFormContainerStyle = prepareNativeStyle(({ spacings }) => ({
     height: 48,
-    marginBottom: spacings.sp16,
+    marginBottom: spacings.sp8,
 }));
 
 export const SearchableAccountsListHeader = ({

diff --git a/suite-native/accounts/tsconfig.json b/suite-native/accounts/tsconfig.json
@@ -29,7 +29,6 @@
         { "path": "../alerts" },
         { "path": "../atoms" },
         { "path": "../config" },
-        { "path": "../feature-flags" },
         { "path": "../formatters" },
         { "path": "../forms" },
         { "path": "../icons" },

diff --git a/suite-native/app/src/navigation/RootStackNavigator.tsx b/suite-native/app/src/navigation/RootStackNavigator.tsx
@@ -18,7 +18,7 @@ import { DevUtilsStackNavigator } from '@suite-native/module-dev-utils';
 import { TransactionDetailScreen } from '@suite-native/transactions';
 import { OnboardingStackNavigator as LegacyOnboardingStackNavigator } from '@suite-native/module-onboarding-legacy';
 import { OnboardingStackNavigator } from '@suite-native/module-onboarding';
-import { ReceiveModalScreen } from '@suite-native/receive';
+import { ReceiveStackNavigator, ReceiveModalScreen } from '@suite-native/receive';
 import { AuthorizeDeviceStackNavigator } from '@suite-native/module-authorize-device';
 import { AddCoinAccountStackNavigator } from '@suite-native/module-add-accounts';
 import { DeviceSettingsStackNavigator } from '@suite-native/module-device-settings';
@@ -94,13 +94,19 @@ export const RootStackNavigator = () => {
             <RootStack.Screen
                 name={RootStackRoutes.AddCoinAccountStack}
                 component={AddCoinAccountStackNavigator}
+                options={{ animation: 'slide_from_bottom' }}
             />
             <RootStack.Screen
                 name={RootStackRoutes.CoinEnablingInit}
                 component={CoinEnablingInitScreen}
                 options={{ animation: 'slide_from_bottom' }}
             />
             <RootStack.Screen name={RootStackRoutes.ReceiveModal} component={ReceiveModalScreen} />
+            <RootStack.Screen
+                name={RootStackRoutes.ReceiveStack}
+                component={ReceiveStackNavigator}
+                options={{ animation: 'slide_from_bottom' }}
+            />
             <RootStack.Screen
                 name={RootStackRoutes.AuthorizeDeviceStack}
                 component={AuthorizeDeviceStackNavigator}

diff --git a/suite-native/atoms/src/Button/IconButton.tsx b/suite-native/atoms/src/Button/IconButton.tsx
@@ -19,11 +19,13 @@ import {
     buttonToIconSizeMap,
 } from './Button';
 import { useButtonPressAnimatedStyle } from './useButtonPressAnimatedStyle';
+import { Loader } from '../Loader';
 type IconButtonProps = Omit<PressableProps, 'style' | 'onPressIn' | 'onPressOut'> & {
     iconName: IconName;
     colorScheme?: ButtonColorScheme;
     size?: ButtonSize;
     style?: NativeStyleObject;
+    isLoading?: boolean;
     isDisabled?: boolean;
 };
 const sizeDimensions = {
@@ -51,6 +53,7 @@ export const IconButton = ({
     style,
     colorScheme = 'primary',
     size = 'medium',
+    isLoading = false,
     isDisabled = false,
     ...pressableProps
 }: IconButtonProps) => {
@@ -85,7 +88,11 @@ export const IconButton = ({
                 style,
             ]}
         >
-            <Icon name={iconName} color={iconColor} size={buttonToIconSizeMap[size]} />
+            {isLoading ? (
+                <Loader color={iconColor} />
+            ) : (
+                <Icon name={iconName} color={iconColor} size={buttonToIconSizeMap[size]} />
+            )}
         </AnimatedPressable>
     );
 };
diff --git a/suite-native/intl/src/en.ts b/suite-native/intl/src/en.ts
@@ -508,6 +508,7 @@ export const en = {
         },
     },
     moduleReceive: {
+        receiveTitle: 'Receive',
         screenTitle: '{coinSymbol} Receive address',
         accountNotFound: 'Account {accountKey} not found.',
         deviceCancelError: 'Address confirmation canceled.',

diff --git a/suite-native/module-add-accounts/src/hooks/useAddCoinAccount.ts b/suite-native/module-add-accounts/src/hooks/useAddCoinAccount.ts
@@ -155,6 +155,14 @@ export const useAddCoinAccount = () => {
                     closeActionType: 'close',
                 });
                 break;
+            case 'receive':
+                navigation.replace(RootStackRoutes.ReceiveModal, {
+                    networkSymbol: symbol,
+                    accountType,
+                    accountIndex,
+                    closeActionType: 'back',
+                });
+                break;
         }
     };
 

diff --git a/suite-native/module-add-accounts/src/screens/AddCoinAccountScreen.tsx b/suite-native/module-add-accounts/src/screens/AddCoinAccountScreen.tsx
@@ -52,6 +52,7 @@ export const AddCoinAccountScreen = ({
             screenHeader={
                 <ScreenSubHeader
                     content={translate('moduleAddAccounts.addCoinAccountScreen.title')}
+                    closeActionType="close"
                 />
             }
         >

diff --git a/suite-native/module-home/src/screens/HomeScreen/components/PortfolioContent.tsx b/suite-native/module-home/src/screens/HomeScreen/components/PortfolioContent.tsx
@@ -7,6 +7,7 @@ import { selectHasDeviceDiscovery, selectIsDeviceAuthorized } from '@suite-commo
 import { Button, VStack } from '@suite-native/atoms';
 import { Assets } from '@suite-native/assets';
 import {
+    ReceiveStackRoutes,
     RootStackParamList,
     RootStackRoutes,
     StackNavigationProps,
@@ -23,7 +24,9 @@ export const PortfolioContent = forwardRef<PortfolioGraphRef>((_props, ref) => {
     const showReceiveButton = isDeviceAuthorized && !hasDiscovery;
 
     const handleReceive = () => {
-        navigation.navigate(RootStackRoutes.ReceiveModal, { closeActionType: 'back' });
+        navigation.navigate(RootStackRoutes.ReceiveStack, {
+            screen: ReceiveStackRoutes.ReceiveAccounts,
+        });
     };
 
     return (

diff --git a/suite-native/navigation/src/navigators.ts b/suite-native/navigation/src/navigators.ts
@@ -132,7 +132,7 @@ export type AccountsImportStackParamList = {
     };
 };
 
-export type AddCoinFlowType = 'home' | 'accounts';
+export type AddCoinFlowType = 'home' | 'receive' | 'accounts';
 
 export type AddCoinAccountStackParamList = {
     [AddCoinAccountStackRoutes.AddCoinAccount]: {
@@ -212,6 +212,7 @@ export type RootStackParamList = {
     [RootStackRoutes.StakingDetail]: { accountKey: AccountKey };
     [RootStackRoutes.DeviceSettingsStack]: NavigatorScreenParams<DeviceSettingsStackParamList>;
     [RootStackRoutes.AddCoinAccountStack]: NavigatorScreenParams<AddCoinAccountStackParamList>;
+    [RootStackRoutes.ReceiveStack]: NavigatorScreenParams<ReceiveStackParamList>;
     [RootStackRoutes.SendStack]: NavigatorScreenParams<SendStackParamList>;
     [RootStackRoutes.CoinEnablingInit]: undefined;
     [RootStackRoutes.ConnectPopup]: {

diff --git a/suite-native/navigation/src/routes.ts b/suite-native/navigation/src/routes.ts
@@ -10,6 +10,7 @@ export enum RootStackRoutes {
     AccountSettings = 'AccountSettings',
     TransactionDetail = 'TransactionDetail',
     ReceiveModal = 'ReceiveModal',
+    ReceiveStack = 'ReceiveStack',
     SendStack = 'SendStack',
     DeviceSettingsStack = 'DeviceSettingsStack',
     AddCoinAccountStack = 'AddCoinAccountStack',

diff --git a/suite-native/receive/package.json b/suite-native/receive/package.json
@@ -12,6 +12,7 @@
     "dependencies": {
         "@mobily/ts-belt": "^3.13.1",
         "@react-navigation/native": "6.1.18",
+        "@react-navigation/native-stack": "6.11.0",
         "@reduxjs/toolkit": "1.9.5",
         "@shopify/react-native-skia": "^1.5.10",
         "@suite-common/wallet-config": "workspace:*",

diff --git a/suite-native/receive/src/components/ReceiveScreenHeader.tsx b/suite-native/receive/src/components/ReceiveScreenHeader.tsx
@@ -0,0 +1,81 @@
+import { useEffect } from 'react';
+import { useSelector } from 'react-redux';
+
+import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
+
+import { AccountKey, TokenAddress } from '@suite-common/wallet-types';
+import {
+    AccountsRootState,
+    selectAccountLabel,
+    selectAccountNetworkSymbol,
+} from '@suite-common/wallet-core';
+import { HStack, Text } from '@suite-native/atoms';
+import { CryptoIcon } from '@suite-native/icons';
+import { Translation } from '@suite-native/intl';
+import {
+    GoBackIcon,
+    RootStackParamList,
+    RootStackRoutes,
+    ScreenSubHeader,
+} from '@suite-native/navigation';
+import { selectAccountTokenSymbol, TokensRootState } from '@suite-native/tokens';
+import TrezorConnect from '@trezor/connect';
+
+type ReceiveScreenHeaderProps = {
+    accountKey?: AccountKey;
+    tokenContract?: TokenAddress;
+};
+
+export const ReceiveScreenHeader = ({ accountKey, tokenContract }: ReceiveScreenHeaderProps) => {
+    const {
+        params: { closeActionType },
+    } = useRoute<RouteProp<RootStackParamList, RootStackRoutes.ReceiveModal>>();
+    const navigation = useNavigation();
+    const accountLabel = useSelector((state: AccountsRootState) =>
+        selectAccountLabel(state, accountKey),
+    );
+    const symbol = useSelector((state: AccountsRootState) =>
+        selectAccountNetworkSymbol(state, accountKey),
+    );
+    const tokenSymbol = useSelector((state: TokensRootState) =>
+        selectAccountTokenSymbol(state, accountKey, tokenContract),
+    );
+
+    useEffect(() => {
+        const unsubscribe = navigation.addListener('beforeRemove', () => {
+            // When leaving the screen, cancel the request for address on trezor device
+            TrezorConnect.cancel();
+        });
+
+        return unsubscribe;
+    }, [navigation]);
+
+    return (
+        <ScreenSubHeader
+            content={
+                <>
+                    <Text variant="highlight">
+                        {symbol ? (
+                            <Translation
+                                id="moduleReceive.screenTitle"
+                                values={{ coinSymbol: symbol.toUpperCase() }}
+                            />
+                        ) : (
+                            <Translation id="moduleReceive.receiveTitle" />
+                        )}
+                    </Text>
+                    <HStack spacing="sp8" alignItems="center">
+                        {symbol && <CryptoIcon symbol={symbol} size="extraSmall" />}
+                        {accountLabel && (
+                            <Text variant="highlight">
+                                {accountLabel}
+                                {tokenSymbol && ` - ${tokenSymbol}`}
+                            </Text>
+                        )}
+                    </HStack>
+                </>
+            }
+            leftIcon={<GoBackIcon closeActionType={closeActionType} />}
+        />
+    );
+};
diff --git a/suite-native/receive/src/index.ts b/suite-native/receive/src/index.ts
@@ -1,2 +1,3 @@
-export * from './components/ReceiveAccount';
+export * from './navigation/ReceiveStackNavigator';
+export * from './screens/ReceiveAccountScreen';
 export * from './screens/ReceiveModalScreen';
diff --git a/suite-native/receive/src/navigation/ReceiveStackNavigator.tsx b/suite-native/receive/src/navigation/ReceiveStackNavigator.tsx
@@ -0,0 +1,23 @@
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+import {
+    ReceiveStackParamList,
+    ReceiveStackRoutes,
+    stackNavigationOptionsConfig,
+} from '@suite-native/navigation';
+
+import { ReceiveAccountsScreen } from '../screens/ReceiveAccountsScreen';
+
+const ReceiveStack = createNativeStackNavigator<ReceiveStackParamList>();
+
+export const ReceiveStackNavigator = () => (
+    <ReceiveStack.Navigator
+        initialRouteName={ReceiveStackRoutes.ReceiveAccounts}
+        screenOptions={stackNavigationOptionsConfig}
+    >
+        <ReceiveStack.Screen
+            name={ReceiveStackRoutes.ReceiveAccounts}
+            component={ReceiveAccountsScreen}
+        />
+    </ReceiveStack.Navigator>
+);