feat: migrate all entry screen, ctas to new add account (uncompleted …

…v2) flow
LedgerHQ · Dec 18, 2024 · 63b0706 · 63b0706
1 parent e38093b
commit 63b0706
Show file tree

Hide file tree

Showing 34 changed files with 1,606 additions and 471 deletions.
diff --git a/.changeset/moody-mugs-grin.md b/.changeset/moody-mugs-grin.md
@@ -0,0 +1,6 @@
+---
+"live-mobile": minor
+"@ledgerhq/live-common": minor
+---
+
+When llmNetworkBasedAddAccount feature flag is enabled, all the ctas that open an add account process will be redirected to the new flow and support currency and related route params.
diff --git a/apps/ledger-live-mobile/src/components/FabActions/hooks/useAssetActions.tsx b/apps/ledger-live-mobile/src/components/FabActions/hooks/useAssetActions.tsx
@@ -17,6 +17,8 @@ import { useFetchCurrencyAll } from "@ledgerhq/live-common/exchange/swap/hooks/i
 import { flattenAccountsSelector } from "~/reducers/accounts";
 import { PtxToast } from "../../Toast/PtxToast";
 import { getStakeLabelLocaleBased } from "~/helpers/getStakeLabelLocaleBased";
+import { useGroupedCurrenciesByProvider } from "@ledgerhq/live-common/deposit/index";
+import { LoadingBasedGroupedCurrencies } from "@ledgerhq/live-common/deposit/type";
 
 type useAssetActionsProps = {
   currency?: CryptoCurrency | TokenCurrency;
@@ -38,6 +40,7 @@ export default function useAssetActions({ currency, accounts }: useAssetActionsP
   const { data: currenciesAll } = useFetchCurrencyAll();
 
   const ptxServiceCtaScreens = useFeature("ptxServiceCtaScreens");
+  const llmNetworkBasedAddAccountFlow = useFeature("llmNetworkBasedAddAccountFlow");
 
   const { t } = useTranslation();
   const stakeLabel = getStakeLabelLocaleBased();
@@ -69,6 +72,68 @@ export default function useAssetActions({ currency, accounts }: useAssetActionsP
     ? getParentAccount(defaultAccount, totalAccounts)
     : undefined;
 
+  const { result } = useGroupedCurrenciesByProvider(true) as LoadingBasedGroupedCurrencies;
+
+  const { currenciesByProvider } = result;
+
+  const provider = useMemo(
+    () =>
+      currenciesByProvider.find(elem =>
+        elem.currenciesByNetwork.some(
+          currencyByNetwork =>
+            (currencyByNetwork as CryptoCurrency | TokenCurrency).id === currency?.id,
+        ),
+      ),
+    [currenciesByProvider, currency],
+  );
+
+  const addAccountNavigationConfig = useMemo(() => {
+    if (llmNetworkBasedAddAccountFlow?.enabled) {
+      // if it's a token
+      if (currency?.type === "TokenCurrency") {
+        // if it's a token and it has only one parent currency
+        if (provider && provider?.currenciesByNetwork.length === 1)
+          return [
+            NavigatorName.DeviceSelection,
+            {
+              screen: ScreenName.SelectDevice,
+              params: {
+                currency: currency.parentCurrency,
+                createTokenAccount: true,
+                context: "addAccounts",
+              },
+            },
+          ] as const;
+        else if (provider && provider?.currenciesByNetwork.length > 1)
+          return [
+            NavigatorName.AssetSelection,
+            {
+              screen: ScreenName.SelectNetwork,
+              currency: currency.id,
+              context: "addAccounts",
+            },
+          ] as const;
+      } else
+        return [
+          NavigatorName.DeviceSelection,
+          {
+            currency: currency?.id,
+            context: "addAccounts",
+          },
+        ] as const;
+    } else {
+      return [
+        NavigatorName.AddAccounts,
+        {
+          screen: ScreenName.AddAccountsSelectCrypto,
+          params: {
+            filterCurrencyIds: currency ? [currency.id] : undefined,
+          },
+        },
+      ] as const;
+    }
+  }, [llmNetworkBasedAddAccountFlow?.enabled, currency, provider]);
+
   const actions = useMemo<ActionButtonEvent[]>(() => {
     const isPtxServiceCtaScreensDisabled = !(ptxServiceCtaScreens?.enabled ?? true);
 
@@ -225,15 +290,7 @@ export default function useAssetActions({ currency, accounts }: useAssetActionsP
                     id: "add_account",
                     label: t("addAccountsModal.ctaAdd"),
                     Icon: iconAddAccount,
-                    navigationParams: [
-                      NavigatorName.AddAccounts,
-                      {
-                        screen: ScreenName.AddAccountsSelectCrypto,
-                        params: {
-                          filterCurrencyIds: currency ? [currency.id] : undefined,
-                        },
-                      },
-                    ] as const,
+                    navigationParams: addAccountNavigationConfig,
                   },
                 ]
               : []),
@@ -254,6 +311,7 @@ export default function useAssetActions({ currency, accounts }: useAssetActionsP
     stakeLabel,
     t,
     route,
+    addAccountNavigationConfig,
   ]);
 
   return {

diff --git a/apps/ledger-live-mobile/src/components/RootNavigator/SwapNavigator.tsx b/apps/ledger-live-mobile/src/components/RootNavigator/SwapNavigator.tsx
@@ -41,9 +41,7 @@ export default function SwapNavigator(
           title: t("transfer.swap2.form.title"),
           headerLeft: () => null,
         }}
-        initialParams={{
-          ...params,
-        }}
+        initialParams={params as Partial<SwapNavigatorParamList[ScreenName.SwapTab]>}
       />
 
       <Stack.Screen

diff --git a/apps/ledger-live-mobile/src/components/RootNavigator/types/BaseNavigator.ts b/apps/ledger-live-mobile/src/components/RootNavigator/types/BaseNavigator.ts
@@ -320,9 +320,10 @@ export type BaseNavigatorStackParamList = {
     NavigatorScreenParams<DeviceSelectionNavigatorParamsList>
   >;
   [NavigatorName.AssetSelection]?: Partial<
-    NavigatorScreenParams<AssetSelectionNavigatorParamsList>
-  > &
-    CommonAddAccountNavigatorParamsList;
+    NavigatorScreenParams<AssetSelectionNavigatorParamsList> & {
+      context?: "addAccounts" | "receiveFunds";
+    } // in some cases we need to pass directly the context to the navigator and let it handle the logic
+  >;
   [NavigatorName.Assets]?: Partial<NavigatorScreenParams<AssetsNavigatorParamsList>>;
 };
 

diff --git a/apps/ledger-live-mobile/src/components/RootNavigator/types/RequestAccountNavigator.ts b/apps/ledger-live-mobile/src/components/RootNavigator/types/RequestAccountNavigator.ts
@@ -6,6 +6,7 @@ import { Observable } from "rxjs";
 import { NavigatorScreenParams } from "@react-navigation/native";
 import { NavigatorName, ScreenName } from "~/const";
 import { AddAccountsNavigatorParamList } from "./AddAccountsNavigator";
+import { DeviceSelectionNavigatorParamsList } from "LLM/features/DeviceSelection/types";
 
 export type RequestAccountNavigatorParamList = {
   [ScreenName.RequestAccountsSelectCrypto]: {
@@ -30,4 +31,14 @@ export type RequestAccountNavigatorParamList = {
       analyticsPropertyFlow?: string;
       onSuccess?: (account: AccountLike, parentAccount?: Account) => void;
     }>;
+  [NavigatorName.DeviceSelection]: Partial<
+    NavigatorScreenParams<DeviceSelectionNavigatorParamsList> &
+      Partial<{
+        token?: TokenCurrency;
+        inline?: boolean;
+        returnToSwap?: boolean;
+        analyticsPropertyFlow?: string;
+        onSuccess?: (account: AccountLike, parentAccount?: Account) => void;
+      }>
+  >;
 };
diff --git a/apps/ledger-live-mobile/src/components/RootNavigator/types/SwapNavigator.ts b/apps/ledger-live-mobile/src/components/RootNavigator/types/SwapNavigator.ts
@@ -44,7 +44,9 @@ import type { Transaction as CasperTransaction } from "@ledgerhq/live-common/fam
 import type { Transaction as TonTransaction } from "@ledgerhq/live-common/families/ton/types";
 import BigNumber from "bignumber.js";
 import { Account, Operation } from "@ledgerhq/types-live";
-import { ScreenName } from "~/const";
+import { NavigatorName, ScreenName } from "~/const";
+import { NavigatorScreenParams } from "@react-navigation/core";
+import { AssetSelectionNavigatorParamsList } from "LLM/features/AssetSelection/types";
 
 type Target = "from" | "to";
 
@@ -329,4 +331,7 @@ export type SwapNavigatorParamList = {
       | ScreenName.SendSelectDevice
       | ScreenName.SwapForm;
   };
+  [NavigatorName.AssetSelection]?: Partial<
+    NavigatorScreenParams<AssetSelectionNavigatorParamsList>
+  >;
 };
diff --git a/apps/ledger-live-mobile/src/locales/en/common.json b/apps/ledger-live-mobile/src/locales/en/common.json
@@ -7122,5 +7122,13 @@
         }
       }
     }
+  },
+  "assetSelection": {
+    "selectCrypto": {
+      "title": "Select Asset"
+    },
+    "selectNetwork": {
+      "title": "Select the blockchain network the asset belongs to"
+    }
   }
 }
diff --git a/apps/ledger-live-mobile/src/newArch/features/Accounts/Navigator.tsx b/apps/ledger-live-mobile/src/newArch/features/Accounts/Navigator.tsx
@@ -48,6 +48,7 @@ export default function Navigator() {
         options={{
           headerTitle: "",
         }}
+        initialParams={route.params}
       />
 
       {/* Scan accounts from device */}

diff --git a/...creens/AddAccount/components/SelectAddAccountMethod/useSelectAddAccountMethodViewModel.ts b/...creens/AddAccount/components/SelectAddAccountMethod/useSelectAddAccountMethodViewModel.ts
@@ -27,12 +27,22 @@ const useSelectAddAccountMethodViewModel = ({
   const hasCurrency = !!currency;
 
   const navigationParams = useMemo(() => {
-    return hasCurrency
-      ? currency.type === "TokenCurrency"
-        ? { token: currency }
-        : { currency }
-      : {};
-  }, [hasCurrency, currency]);
+    if (hasCurrency) {
+      if (currency?.type === "TokenCurrency") {
+        return {
+          token: currency,
+          ...(llmNetworkBasedAddAccountFlow?.enabled && { context: "addAccounts" }),
+        };
+      } else {
+        return {
+          currency,
+          ...(llmNetworkBasedAddAccountFlow?.enabled && { context: "addAccounts" }),
+        };
+      }
+    } else {
+      return llmNetworkBasedAddAccountFlow?.enabled ? { context: "addAccounts" } : {};
+    }
+  }, [hasCurrency, currency, llmNetworkBasedAddAccountFlow?.enabled]);
 
   const trackButtonClick = useCallback((button: string) => {
     track("button_clicked", {
@@ -58,6 +68,9 @@ const useSelectAddAccountMethodViewModel = ({
     const EntryNavigatorName = llmNetworkBasedAddAccountFlow?.enabled
       ? NavigatorName.AssetSelection
       : NavigatorName.AddAccounts;
+    // to delete after llmNetworkBasedAddAccountFlow is fully enabled (ts inference not working well based on navigationParams)
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     navigation.navigate(EntryNavigatorName, navigationParams);
   }, [
     navigation,

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
@@ -2,12 +2,16 @@ import { CryptoCurrency, TokenCurrency } from "@ledgerhq/types-cryptoassets";
 import { ScreenName } from "~/const";
 import { Device } from "@ledgerhq/types-devices";
 
+type CommonParams = {
+  context?: "addAccounts" | "receiveFunds";
+  onSuccess?: () => void;
+};
 export type NetworkBasedAddAccountNavigator = {
-  [ScreenName.SelectAccounts]: {
+  [ScreenName.SelectAccounts]: CommonParams & {
     currency: CryptoCurrency | TokenCurrency;
     createTokenAccount?: boolean;
   };
-  [ScreenName.ScanDeviceAccounts]: {
+  [ScreenName.ScanDeviceAccounts]: CommonParams & {
     currency: CryptoCurrency | TokenCurrency;
     device: Device;
     onSuccess?: (_?: unknown) => void;

diff --git a/apps/ledger-live-mobile/src/newArch/features/AssetSelection/Navigator.tsx b/apps/ledger-live-mobile/src/newArch/features/AssetSelection/Navigator.tsx
@@ -3,7 +3,7 @@ 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 { NavigatorName, ScreenName } from "~/const";
 import { getStackNavigatorConfig } from "~/navigation/navigatorConfig";
 import { track } from "~/analytics";
 import { Flex } from "@ledgerhq/native-ui";
@@ -16,13 +16,19 @@ import SelectNetwork from "LLM/features/AssetSelection/screens/SelectNetwork";
 import { NavigationHeaderCloseButtonAdvanced } from "~/components/NavigationHeaderCloseButton";
 import { NavigationHeaderBackButton } from "~/components/NavigationHeaderBackButton";
 import { AssetSelectionNavigatorParamsList } from "./types";
+import { BaseComposite, StackNavigatorProps } from "~/components/RootNavigator/types/helpers";
+
+type NavigationProps = BaseComposite<
+  StackNavigatorProps<AssetSelectionNavigatorParamsList, NavigatorName.AssetSelection>
+>;
 
 export default function Navigator() {
   const { colors } = useTheme();
-  const route = useRoute();
-
+  const route = useRoute<NavigationProps["route"]>();
   const hasClosedNetworkBanner = useSelector(hasClosedNetworkBannerSelector);
 
+  const { token, currency } = route.params || {};
+
   const onClose = useCallback(() => {
     track("button_clicked", {
       button: "Close",
@@ -44,15 +50,19 @@ export default function Navigator() {
         ...stackNavigationConfig,
         gestureEnabled: Platform.OS === "ios",
       }}
+      initialRouteName={
+        token || currency ? ScreenName.SelectNetwork : ScreenName.AddAccountsSelectCrypto
+      }
     >
       <Stack.Screen
         name={ScreenName.AddAccountsSelectCrypto}
         component={SelectCrypto}
         options={{
           headerLeft: () => <NavigationHeaderBackButton />,
-          headerTitle: "",
+          title: "",
           headerRight: () => <NavigationHeaderCloseButtonAdvanced onClose={onClose} />,
         }}
+        initialParams={route.params}
       />
 
       <Stack.Screen
@@ -70,6 +80,7 @@ export default function Navigator() {
             </Flex>
           ),
         }}
+        initialParams={route.params}
       />
     </Stack.Navigator>
   );