refactor: copy & rename Receive's reusable step screens for new add a…

…ccount flow (#8377)
LedgerHQ · Nov 29, 2024 · e381081 · e381081
1 parent c28f67d
commit e381081
Show file tree

Hide file tree

Showing 19 changed files with 1,673 additions and 32 deletions.
diff --git a/.changeset/eight-ducks-rescue.md b/.changeset/eight-ducks-rescue.md
@@ -0,0 +1,5 @@
+---
+"live-mobile": minor
+---
+
+Prepare add account v2 reusable screens
diff --git a/apps/ledger-live-mobile/src/components/RootNavigator/BaseNavigator.tsx b/apps/ledger-live-mobile/src/components/RootNavigator/BaseNavigator.tsx
@@ -91,6 +91,9 @@ import CustomErrorNavigator from "./CustomErrorNavigator";
 import WalletSyncNavigator from "LLM/features/WalletSync/WalletSyncNavigator";
 import Web3HubNavigator from "LLM/features/Web3Hub/Navigator";
 import { useFeature } from "@ledgerhq/live-common/featureFlags/index";
+import AddAccountsV2Navigator from "LLM/features/Accounts/Navigator";
+import DeviceSelectionNavigator from "LLM/features/DeviceSelection/Navigator";
+import AssetSelectionNavigator from "LLM/features/AssetSelection/Navigator";
 
 const Stack = createStackNavigator<BaseNavigatorStackParamList>();
 
@@ -109,6 +112,7 @@ export default function BaseNavigator() {
   const isAccountsEmpty = useSelector(hasNoAccountsSelector);
   const readOnlyModeEnabled = useSelector(readOnlyModeEnabledSelector) && isAccountsEmpty;
   const web3hub = useFeature("web3hub");
+  const llmNetworkBasedAddAccountFlow = useFeature("llmNetworkBasedAddAccountFlow");
 
   return (
     <>
@@ -267,11 +271,7 @@ export default function BaseNavigator() {
           component={ClaimRewardsNavigator}
           options={{ headerShown: false }}
         />
-        <Stack.Screen
-          name={NavigatorName.AddAccounts}
-          component={AddAccountsNavigator}
-          options={{ headerShown: false }}
-        />
+
         <Stack.Screen
           name={NavigatorName.RequestAccount}
           component={RequestAccountNavigator}
@@ -580,6 +580,29 @@ export default function BaseNavigator() {
             headerRight: () => <Button Icon={IconsLegacy.CloseMedium} />,
           }}
         />
+        <Stack.Screen
+          name={NavigatorName.AddAccounts}
+          component={
+            llmNetworkBasedAddAccountFlow?.enabled ? AddAccountsV2Navigator : AddAccountsNavigator
+          }
+          options={{ headerShown: false }}
+        />
+
+        {llmNetworkBasedAddAccountFlow?.enabled && (
+          <Stack.Screen
+            name={NavigatorName.DeviceSelection}
+            component={DeviceSelectionNavigator}
+            options={{ headerShown: false }}
+          />
+        )}
+
+        {llmNetworkBasedAddAccountFlow?.enabled && (
+          <Stack.Screen
+            name={NavigatorName.AssetSelection}
+            component={AssetSelectionNavigator}
+            options={{ headerShown: false }}
+          />
+        )}
       </Stack.Navigator>
     </>
   );

diff --git a/apps/ledger-live-mobile/src/components/RootNavigator/types/BaseNavigator.ts b/apps/ledger-live-mobile/src/components/RootNavigator/types/BaseNavigator.ts
@@ -74,6 +74,8 @@ import { AnalyticsOptInPromptNavigatorParamList } from "./AnalyticsOptInPromptNa
 import { LandingPagesNavigatorParamList } from "./LandingPagesNavigator";
 import { CustomErrorNavigatorParamList } from "./CustomErrorNavigator";
 import type { WalletSyncNavigatorStackParamList } from "./WalletSyncNavigator";
+import { DeviceSelectionNavigatorParamsList } from "~/newArch/features/DeviceSelection/types";
+import { AssetSelectionNavigatorParamsList } from "~/newArch/features/AssetSelection/types";
 
 export type NavigateInput<
   ParamList extends ParamListBase = ParamListBase,
@@ -85,6 +87,14 @@ export type NavigateInput<
 
 export type PathToDeviceParam = PropertyPath;
 export type NavigationType = "navigate" | "replace" | "push";
+type CommonAddAccountNavigatorParamsList = {
+  currency?: CryptoCurrency | TokenCurrency | null;
+  token?: TokenCurrency;
+  returnToSwap?: boolean;
+  analyticsPropertyFlow?: string;
+  onSuccess?: (account: AccountLike, parentAccount?: Account) => void;
+  onError?: (_: Error) => void;
+};
 
 export type BaseNavigatorStackParamList = {
   [NavigatorName.Main]?: NavigatorScreenParams<MainNavigatorParamList> & {
@@ -208,14 +218,8 @@ export type BaseNavigatorStackParamList = {
   [NavigatorName.Freeze]: NavigatorScreenParams<FreezeNavigatorParamList>;
   [NavigatorName.Unfreeze]: NavigatorScreenParams<UnfreezeNavigatorParamList>;
   [NavigatorName.ClaimRewards]: NavigatorScreenParams<ClaimRewardsNavigatorParamList>;
-  [NavigatorName.AddAccounts]?: Partial<NavigatorScreenParams<AddAccountsNavigatorParamList>> & {
-    currency?: CryptoCurrency | TokenCurrency | null;
-    token?: TokenCurrency;
-    returnToSwap?: boolean;
-    analyticsPropertyFlow?: string;
-    onSuccess?: (account: AccountLike, parentAccount?: Account) => void;
-    onError?: (_: Error) => void;
-  };
+  [NavigatorName.AddAccounts]?: Partial<NavigatorScreenParams<AddAccountsNavigatorParamList>> &
+    CommonAddAccountNavigatorParamsList;
   [NavigatorName.RequestAccount]: NavigatorScreenParams<RequestAccountNavigatorParamList> & {
     onClose?: () => void;
   };
@@ -311,6 +315,13 @@ export type BaseNavigatorStackParamList = {
     isBeforeOnboarding?: boolean;
   };
   [NavigatorName.LandingPages]: NavigatorScreenParams<LandingPagesNavigatorParamList>;
+  [NavigatorName.DeviceSelection]?: Partial<
+    NavigatorScreenParams<DeviceSelectionNavigatorParamsList>
+  >;
+  [NavigatorName.AssetSelection]?: Partial<
+    NavigatorScreenParams<AssetSelectionNavigatorParamsList>
+  > &
+    CommonAddAccountNavigatorParamsList;
 };
 
 declare global {

diff --git a/apps/ledger-live-mobile/src/const/navigation.ts b/apps/ledger-live-mobile/src/const/navigation.ts
@@ -533,6 +533,13 @@ export enum ScreenName {
   Web3HubSearch = "Web3HubSearch",
   Web3HubTabs = "Web3HubTabs",
   Web3HubApp = "Web3HubApp",
+
+  // Add Accountv2 / Receive shared screens
+  ConnectDevice = "ConnectDevice",
+  SelectNetwork = "SelectNetwork",
+  SelectDevice = "SelectDevice",
+  SelectAccounts = "SelectAccounts",
+  ScanDeviceAccounts = "ScanDeviceAccounts",
 }
 
 export enum NavigatorName {
@@ -651,4 +658,6 @@ export enum NavigatorName {
   Web3HubTab = "Web3HubTab",
 
   WalletSync = "WalletSync",
+  AssetSelection = "AssetSelection",
+  DeviceSelection = "DeviceSelection",
 }
diff --git a/apps/ledger-live-mobile/src/navigation/DeeplinksProvider.tsx b/apps/ledger-live-mobile/src/navigation/DeeplinksProvider.tsx
@@ -280,20 +280,6 @@ const linkingOptions = () => ({
               [ScreenName.Accounts]: "account",
             },
           },
-
-          [NavigatorName.AddAccounts]: {
-            screens: {
-              /**
-               * ie: "ledgerlive://add-account" will open the add account flow
-               *
-               * @params ?currency: string
-               * ie: "ledgerlive://add-account?currency=bitcoin" will open the add account flow with "bitcoin" prefilled in the search input
-               *
-               */
-              [ScreenName.AddAccountsSelectCrypto]: "add-account",
-            },
-          },
-
           /**
            * ie: "ledgerlive://buy" -> will redirect to the main exchange page
            */
@@ -439,13 +425,43 @@ export const DeeplinksProvider = ({
   const userAcceptedTerms = useGeneralTermsAccepted();
   const storylyContext = useStorylyContext();
   const buySellUiFlag = useFeature("buySellUi");
+  const llmNetworkBasedAddAccountFlow = useFeature("llmNetworkBasedAddAccountFlow");
   const buySellUiManifestId = buySellUiFlag?.params?.manifestId;
-
+  const AddAccountNavigatorEntryPoint = llmNetworkBasedAddAccountFlow?.enabled
+    ? NavigatorName.AssetSelection
+    : NavigatorName.AddAccounts; // both navigators share the same ScreenName.AddAccountsSelectCrypto screen
   const linking = useMemo<LinkingOptions<ReactNavigation.RootParamList>>(
     () =>
       ({
         ...(hasCompletedOnboarding
-          ? linkingOptions()
+          ? {
+              ...linkingOptions(),
+              config: {
+                ...linkingOptions().config,
+                screens: {
+                  ...linkingOptions().config.screens,
+                  [NavigatorName.Base]: {
+                    ...linkingOptions().config.screens[NavigatorName.Base],
+                    screens: {
+                      ...linkingOptions().config.screens[NavigatorName.Base].screens,
+                      // Add account entry point navigator differ from the legacy to the new flow, when the deeplink is hit and the FF is enabled we should pass by the AssetSelection Feature
+                      [AddAccountNavigatorEntryPoint]: {
+                        screens: {
+                          /**
+                           * ie: "ledgerlive://add-account" will open the add account flow
+                           *
+                           * @params ?currency: string
+                           * ie: "ledgerlive://add-account?currency=bitcoin" will open the add account flow with "bitcoin" prefilled in the search input
+                           *
+                           */
+                          [ScreenName.AddAccountsSelectCrypto]: "add-account",
+                        },
+                      },
+                    },
+                  },
+                },
+              },
+            }
           : getOnboardingLinkingOptions(!!userAcceptedTerms)),
         subscribe(listener) {
           const sub = Linking.addEventListener("url", ({ url }) => {
@@ -585,6 +601,7 @@ export const DeeplinksProvider = ({
       liveAppProviderInitialized,
       manifests,
       buySellUiManifestId,
+      AddAccountNavigatorEntryPoint,
     ],
   );
   const [isReady, setIsReady] = React.useState(false);

diff --git a/apps/ledger-live-mobile/src/newArch/features/Accounts/Navigator.tsx b/apps/ledger-live-mobile/src/newArch/features/Accounts/Navigator.tsx
@@ -0,0 +1,60 @@
+import React, { useCallback, useMemo } from "react";
+import { Platform } from "react-native";
+import { createStackNavigator } from "@react-navigation/stack";
+import { useTheme } from "styled-components/native";
+import { useRoute } from "@react-navigation/native";
+import { ScreenName } from "~/const";
+import { getStackNavigatorConfig } from "~/navigation/navigatorConfig";
+import { track } from "~/analytics";
+import type { NetworkBasedAddAccountNavigator } from "LLM/features/Accounts/screens/AddAccount/types";
+import SelectAccounts from "LLM/features/Accounts/screens/SelectAccounts";
+import { NavigationHeaderCloseButtonAdvanced } from "~/components/NavigationHeaderCloseButton";
+import ScanDeviceAccounts from "LLM/features/Accounts/screens/ScanDeviceAccounts";
+export default function Navigator() {
+  const { colors } = useTheme();
+  const route = useRoute();
+
+  const onClose = useCallback(() => {
+    track("button_clicked", {
+      button: "Close",
+      screen: route.name,
+    });
+  }, [route]);
+
+  const stackNavigationConfig = useMemo(
+    () => ({
+      ...getStackNavigatorConfig(colors, true),
+      headerRight: () => <NavigationHeaderCloseButtonAdvanced onClose={onClose} />,
+    }),
+    [colors, onClose],
+  );
+
+  return (
+    <Stack.Navigator
+      screenOptions={{
+        ...stackNavigationConfig,
+        gestureEnabled: Platform.OS === "ios",
+      }}
+    >
+      {/* Select Accounts */}
+      <Stack.Screen
+        name={ScreenName.SelectAccounts}
+        component={SelectAccounts}
+        options={{
+          headerTitle: "",
+        }}
+      />
+
+      {/* Scan accounts from device */}
+      <Stack.Screen
+        name={ScreenName.ScanDeviceAccounts}
+        component={ScanDeviceAccounts}
+        options={{
+          headerTitle: "",
+        }}
+      />
+    </Stack.Navigator>
+  );
+}
+
+const Stack = createStackNavigator<NetworkBasedAddAccountNavigator>();
diff --git a/...creens/AddAccount/components/SelectAddAccountMethod/useSelectAddAccountMethodViewModel.ts b/...creens/AddAccount/components/SelectAddAccountMethod/useSelectAddAccountMethodViewModel.ts
@@ -21,7 +21,7 @@ const useSelectAddAccountMethodViewModel = ({
 }: AddAccountScreenProps) => {
   const navigation = useNavigation<BaseNavigation>();
   const walletSyncFeatureFlag = useFeature("llmWalletSync");
-
+  const llmNetworkBasedAddAccountFlow = useFeature("llmNetworkBasedAddAccountFlow");
   const isReadOnlyModeEnabled = useSelector(readOnlyModeEnabledSelector);
   const isWalletSyncEnabled = walletSyncFeatureFlag?.enabled;
   const hasCurrency = !!currency;
@@ -55,8 +55,17 @@ const useSelectAddAccountMethodViewModel = ({
   const onClickAdd = useCallback(() => {
     trackButtonClick("With your Ledger");
     onClose?.();
-    navigation.navigate(NavigatorName.AddAccounts, navigationParams);
-  }, [navigation, navigationParams, trackButtonClick, onClose]);
+    const EntryNavigatorName = llmNetworkBasedAddAccountFlow?.enabled
+      ? NavigatorName.AssetSelection
+      : NavigatorName.AddAccounts;
+    navigation.navigate(EntryNavigatorName, navigationParams);
+  }, [
+    navigation,
+    navigationParams,
+    trackButtonClick,
+    onClose,
+    llmNetworkBasedAddAccountFlow?.enabled,
+  ]);
 
   return {
     isWalletSyncEnabled,

diff --git a/apps/ledger-live-mobile/src/newArch/features/Accounts/screens/AddAccount/types.ts b/apps/ledger-live-mobile/src/newArch/features/Accounts/screens/AddAccount/types.ts
@@ -0,0 +1,15 @@
+import { CryptoCurrency, TokenCurrency } from "@ledgerhq/types-cryptoassets";
+import { ScreenName } from "~/const";
+import { Device } from "@ledgerhq/types-devices";
+
+export type NetworkBasedAddAccountNavigator = {
+  [ScreenName.SelectAccounts]: {
+    currency: CryptoCurrency | TokenCurrency;
+    createTokenAccount?: boolean;
+  };
+  [ScreenName.ScanDeviceAccounts]: {
+    currency: CryptoCurrency | TokenCurrency;
+    device: Device;
+    onSuccess?: (_?: unknown) => void;
+  };
+};