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

trezor · Jan 13, 2025 · 458f254 · 458f254
1 parent 26a8b91
commit 458f254
Show file tree

Hide file tree

Showing 22 changed files with 286 additions and 121 deletions.
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
@@ -12,11 +12,9 @@ import {
 } from '@suite-native/navigation';
 import { IconButton } from '@suite-native/atoms';
 import {
-    selectHasDeviceDiscovery,
     selectIsDeviceInViewOnlyMode,
     selectIsPortfolioTrackerDevice,
 } from '@suite-common/wallet-core';
-import { FeatureFlag, useFeatureFlag } from '@suite-native/feature-flags';
 
 import { useAccountAlerts } from '../hooks/useAccountAlerts';
 
@@ -30,14 +28,9 @@ export const AddAccountButton = ({ flowType, testID }: AddAccountButtonProps) =>
         useNavigation<StackNavigationProps<RootStackParamList, RootStackRoutes.AccountsImport>>();
 
     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,7 +51,7 @@ export const AddAccountButton = ({ flowType, testID }: AddAccountButtonProps) =>
         });
     };
 
-    return shouldShowAddAccountButton ? (
+    return (
         <IconButton
             iconName="plus"
             onPress={
@@ -68,5 +61,5 @@ export const AddAccountButton = ({ flowType, testID }: AddAccountButtonProps) =>
             size="medium"
             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/app/package.json b/suite-native/app/package.json
@@ -65,6 +65,7 @@
         "@suite-native/module-device-settings": "workspace:*",
         "@suite-native/module-home": "workspace:*",
         "@suite-native/module-onboarding": "workspace:*",
+        "@suite-native/module-receive": "workspace:*",
         "@suite-native/module-send": "workspace:*",
         "@suite-native/module-settings": "workspace:*",
         "@suite-native/module-staking-management": "workspace:*",

diff --git a/suite-native/app/src/navigation/RootStackNavigator.tsx b/suite-native/app/src/navigation/RootStackNavigator.tsx
@@ -17,6 +17,7 @@ import { selectIsOnboardingFinished } from '@suite-native/settings';
 import { DevUtilsStackNavigator } from '@suite-native/module-dev-utils';
 import { TransactionDetailScreen } from '@suite-native/transactions';
 import { OnboardingStackNavigator } from '@suite-native/module-onboarding';
+import { ReceiveStackNavigator } from '@suite-native/module-receive';
 import { ReceiveModalScreen } from '@suite-native/receive';
 import { AuthorizeDeviceStackNavigator } from '@suite-native/module-authorize-device';
 import { AddCoinAccountStackNavigator } from '@suite-native/module-add-accounts';
@@ -89,13 +90,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/app/tsconfig.json b/suite-native/app/tsconfig.json
@@ -54,6 +54,7 @@
         { "path": "../module-device-settings" },
         { "path": "../module-home" },
         { "path": "../module-onboarding" },
+        { "path": "../module-receive" },
         { "path": "../module-send" },
         { "path": "../module-settings" },
         {

diff --git a/suite-native/intl/src/en.ts b/suite-native/intl/src/en.ts
@@ -507,6 +507,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/module-receive/package.json b/suite-native/module-receive/package.json
@@ -0,0 +1,22 @@
+{
+    "name": "@suite-native/module-receive",
+    "version": "1.0.0",
+    "private": true,
+    "license": "See LICENSE.md in repo root",
+    "sideEffects": false,
+    "main": "src/index",
+    "scripts": {
+        "depcheck": "yarn g:depcheck",
+        "type-check": "yarn g:tsc --build"
+    },
+    "dependencies": {
+        "@react-navigation/native": "6.1.18",
+        "@react-navigation/native-stack": "6.11.0",
+        "@suite-native/accounts": "workspace:*",
+        "@suite-native/device-manager": "workspace:*",
+        "@suite-native/navigation": "workspace:*",
+        "react": "18.2.0",
+        "react-native": "0.76.1",
+        "react-redux": "8.0.7"
+    }
+}
diff --git a/suite-native/module-receive/src/index.ts b/suite-native/module-receive/src/index.ts
@@ -0,0 +1 @@
+export * from './navigation/ReceiveStackNavigator';
diff --git a/suite-native/module-receive/src/navigation/ReceiveStackNavigator.tsx b/suite-native/module-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>
+);
diff --git a/suite-native/module-receive/src/screens/ReceiveAccountsScreen.tsx b/suite-native/module-receive/src/screens/ReceiveAccountsScreen.tsx
@@ -0,0 +1,50 @@
+import { useSelector } from 'react-redux';
+
+import { useNavigation } from '@react-navigation/native';
+
+import { selectIsPortfolioTrackerDevice } from '@suite-common/wallet-core';
+import { AccountsList, AddAccountButton, OnSelectAccount } from '@suite-native/accounts';
+import { useTranslate } from '@suite-native/intl';
+import {
+    ReceiveStackParamList,
+    ReceiveStackRoutes,
+    RootStackParamList,
+    RootStackRoutes,
+    Screen,
+    ScreenSubHeader,
+    StackToStackCompositeNavigationProps,
+} from '@suite-native/navigation';
+
+type NavigationProps = StackToStackCompositeNavigationProps<
+    ReceiveStackParamList,
+    ReceiveStackRoutes.ReceiveAccounts,
+    RootStackParamList
+>;
+
+export const ReceiveAccountsScreen = () => {
+    const { translate } = useTranslate();
+    const navigation = useNavigation<NavigationProps>();
+
+    const isPortfolioTrackerDevice = useSelector(selectIsPortfolioTrackerDevice);
+
+    const navigateToReceiveScreen: OnSelectAccount = ({ account, tokenAddress }) =>
+        navigation.navigate(RootStackRoutes.ReceiveModal, {
+            accountKey: account.key,
+            tokenContract: tokenAddress,
+            closeActionType: 'back',
+        });
+
+    return (
+        <Screen
+            screenHeader={
+                <ScreenSubHeader
+                    content={translate('moduleReceive.receiveTitle')}
+                    rightIcon={!isPortfolioTrackerDevice && <AddAccountButton flowType="receive" />}
+                    closeActionType="close"
+                />
+            }
+        >
+            <AccountsList onSelectAccount={navigateToReceiveScreen} hideTokensIntoModal />
+        </Screen>
+    );
+};
diff --git a/suite-native/module-receive/tsconfig.json b/suite-native/module-receive/tsconfig.json
@@ -0,0 +1,9 @@
+{
+    "extends": "../../tsconfig.base.json",
+    "compilerOptions": { "outDir": "libDev" },
+    "references": [
+        { "path": "../accounts" },
+        { "path": "../device-manager" },
+        { "path": "../navigation" }
+    ]
+}
diff --git a/suite-native/navigation/src/navigators.ts b/suite-native/navigation/src/navigators.ts
@@ -127,7 +127,7 @@ export type AccountsImportStackParamList = {
     };
 };
 
-export type AddCoinFlowType = 'home' | 'accounts';
+export type AddCoinFlowType = 'home' | 'receive' | 'accounts';
 
 export type AddCoinAccountStackParamList = {
     [AddCoinAccountStackRoutes.AddCoinAccount]: {
@@ -206,6 +206,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
@@ -9,6 +9,7 @@ export enum RootStackRoutes {
     AccountSettings = 'AccountSettings',
     TransactionDetail = 'TransactionDetail',
     ReceiveModal = 'ReceiveModal',
+    ReceiveStack = 'ReceiveStack',
     SendStack = 'SendStack',
     DeviceSettingsStack = 'DeviceSettingsStack',
     AddCoinAccountStack = 'AddCoinAccountStack',

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 './screens/ReceiveAccountScreen';
 export * from './screens/ReceiveModalScreen';
+export { ReceiveScreenHeader } from './components/ReceiveScreenHeader';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export * from './navigation/ReceiveStackNavigator';