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

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:*",

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 => (

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,16 @@ export const AddAccountButton = ({ flowType, testID }: AddAccountButtonProps) =>
         });
     };
 
-    return shouldShowAddAccountButton ? (
+    return (
         <IconButton
             iconName="plus"
             onPress={
                 isSelectedDevicePortfolioTracker ? navigateToImportScreen : navigateToAddCoinAccount
             }
             colorScheme="tertiaryElevation0"
             size="medium"
+            isLoading={hasDeviceDiscovery}
             testID={testID}
         />
-    ) : null;
+    );
 };

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 = ({

suite-native/accounts/tsconfig.json

@@ -29,7 +29,6 @@
         { "path": "../alerts" },
         { "path": "../atoms" },
         { "path": "../config" },
-        { "path": "../feature-flags" },
         { "path": "../formatters" },
         { "path": "../forms" },
         { "path": "../icons" },

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:*",

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}

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" },
         {

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>
     );
 };

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.',

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;
         }
     };
 

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"
                 />
             }
         >

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 (

suite-native/module-receive/package.json

@@ -0,0 +1,20 @@
+{
+    "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/navigation": "workspace:*",
+        "react": "18.2.0",
+        "react-native": "0.76.1"
+    }
+}

suite-native/module-receive/src/index.ts

@@ -0,0 +1 @@
+export * from './navigation/ReceiveStackNavigator';

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>
+);

suite-native/module-receive/src/screens/ReceiveAccountsScreen.tsx

@@ -0,0 +1,45 @@
+import { useNavigation } from '@react-navigation/native';
+
+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 navigateToReceiveScreen: OnSelectAccount = ({ account, tokenAddress }) =>
+        navigation.navigate(RootStackRoutes.ReceiveModal, {
+            accountKey: account.key,
+            tokenContract: tokenAddress,
+            closeActionType: 'back',
+        });
+
+    return (
+        <Screen
+            screenHeader={
+                <ScreenSubHeader
+                    content={translate('moduleReceive.receiveTitle')}
+                    rightIcon={<AddAccountButton flowType="receive" />}
+                    closeActionType="close"
+                />
+            }
+        >
+            <AccountsList onSelectAccount={navigateToReceiveScreen} hideTokensIntoModal />
+        </Screen>
+    );
+};

suite-native/module-receive/tsconfig.json

@@ -0,0 +1,8 @@
+{
+    "extends": "../../tsconfig.base.json",
+    "compilerOptions": { "outDir": "libDev" },
+    "references": [
+        { "path": "../accounts" },
+        { "path": "../navigation" }
+    ]
+}

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]: {

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',