WIP: LIVE-1792 - Onboarding

package.json

@@ -70,15 +70,15 @@
     "@formatjs/intl-locale": "^2.4.46",
     "@formatjs/intl-numberformat": "^7.4.2",
     "@formatjs/intl-pluralrules": "^4.3.2",
-    "@ledgerhq/devices": "6.24.1",
+    "@ledgerhq/devices": "6.27.1",
     "@ledgerhq/errors": "6.10.0",
-    "@ledgerhq/hw-transport": "6.24.1",
-    "@ledgerhq/hw-transport-http": "6.27.0",
-    "@ledgerhq/live-common": "22.0.2",
+    "@ledgerhq/hw-transport": "6.27.1",
+    "@ledgerhq/hw-transport-http": "6.27.1",
+    "@ledgerhq/live-common": "https://github.com/LedgerHQ/ledger-live-common.git#474c725e23636f5189ad1b055193023adf43e9b7",
     "@ledgerhq/logs": "6.10.0",
     "@ledgerhq/native-ui": "^0.7.16",
-    "@ledgerhq/react-native-hid": "6.24.1",
-    "@ledgerhq/react-native-hw-transport-ble": "6.25.1",
+    "@ledgerhq/react-native-hid": "6.27.1",
+    "@ledgerhq/react-native-hw-transport-ble": "6.27.1",
     "@ledgerhq/react-native-passcode-auth": "^2.1.0",
     "@polkadot/reactnative-identicon": "0.87.5",
     "@react-native-async-storage/async-storage": "^1.15.17",

src/components/RootNavigator/BaseOnboardingNavigator.js

@@ -11,6 +11,7 @@ import { ScreenName, NavigatorName } from "../../const";
 import PairDevices from "../../screens/PairDevices";
 import EditDeviceName from "../../screens/EditDeviceName";
 import OnboardingNavigator from "./OnboardingNavigator";
+import { SyncOnboardingNavigator } from "./SyncOnboardingNavigator";
 import ImportAccountsNavigator from "./ImportAccountsNavigator";
 import PasswordAddFlowNavigator from "./PasswordAddFlowNavigator";
 import PasswordModifyFlowNavigator from "./PasswordModifyFlowNavigator";
@@ -63,6 +64,10 @@ export default function BaseOnboardingNavigator() {
         name={NavigatorName.Onboarding}
         component={OnboardingNavigator}
       />
+      <Stack.Screen
+        name={NavigatorName.SyncOnboarding}
+        component={SyncOnboardingNavigator}
+      />
       <Stack.Screen
         name={NavigatorName.ImportAccounts}
         component={ImportAccountsNavigator}

src/components/RootNavigator/SyncOnboardingNavigator.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { createStackNavigator } from "@react-navigation/stack";
+import { Device } from "@ledgerhq/live-common/lib/hw/actions/types";
+import { ScreenName } from "../../const";
+import { SyncOnboarding } from "../../screens/SyncOnboarding";
+
+// TODO - https://reactnavigation.org/docs/typescript/
+// With route type, do we still need https://github.com/LedgerHQ/ledger-live-mobile/blob/develop/src/const/navigation.js
+// ? Need to cast each name to be able to use the const and the navigator typing
+export type SyncOnboardingStackParamList = {
+  SyncOnboardingWelcome: { pairedDevice: Device | null };
+};
+
+const Stack = createStackNavigator<SyncOnboardingStackParamList>();
+
+export const SyncOnboardingNavigator = () => (
+  <Stack.Navigator
+    screenOptions={{
+      headerShown: false,
+      headerTitle: "",
+      headerShadowVisible: false,
+    }}
+  >
+    <Stack.Screen
+      name={ScreenName.SyncOnboardingWelcome as "SyncOnboardingWelcome"}
+      component={SyncOnboarding}
+      initialParams={{ pairedDevice: null }}
+    />
+  </Stack.Navigator>
+);

src/const/navigation.js

@@ -318,6 +318,8 @@ export const ScreenName = {
     "OnboardingModalSyncDesktopInformation",
   OnboardingModalRecoveryPhraseWarning: "OnboardingModalRecoveryPhraseWarning",
 
+  SyncOnboardingWelcome: "SyncOnboardingWelcome",
+
   PlatformCatalog: "PlatformCatalog",
   PlatformApp: "PlatformApp",
 
@@ -385,6 +387,7 @@ export const NavigatorName = {
   MigrateAccountsFlow: "MigrateAccountsFlow",
   NftNavigator: "NftNavigator",
   Onboarding: "Onboarding",
+  SyncOnboarding: "SyncOnboarding",
   PasswordAddFlow: "PasswordAddFlow",
   PasswordModifyFlow: "PasswordModifyFlow",
   Platform: "Platform",

src/index.js

@@ -205,7 +205,7 @@ function getProxyURL(url: ?string) {
   return url;
 }
 
-// DeepLinking
+// Deep linking general options
 const linkingOptions = {
   async getInitialURL() {
     const url = await Linking.getInitialURL();
@@ -225,137 +225,162 @@ const linkingOptions = {
     };
   },
   prefixes: ["ledgerlive://"],
-  config: {
+};
+
+// Deep linking screens config available only for users that have already been onboarded
+const alreadyOnboardedLinkingConfigScreens = {
+  [NavigatorName.Base]: {
+    initialRouteName: NavigatorName.Main,
     screens: {
-      [NavigatorName.Base]: {
-        initialRouteName: NavigatorName.Main,
+      /**
+       * @params ?uri: string
+       * ie: "ledgerlive://wc?uri=wc:00e46b69-d0cc-4b3e-b6a2-cee442f97188@1?bridge=https%3A%2F%2Fbridge.walletconnect.org&key=91303dedf64285cbbaf9120f6e9d160a5c8aa3deb67017a3874cd272323f48ae
+       */
+      [ScreenName.WalletConnectDeeplinkingSelectAccount]: "wc",
+      [NavigatorName.Main]: {
+        initialRouteName: ScreenName.Portfolio,
         screens: {
           /**
-           * @params ?uri: string
-           * ie: "ledgerlive://wc?uri=wc:00e46b69-d0cc-4b3e-b6a2-cee442f97188@1?bridge=https%3A%2F%2Fbridge.walletconnect.org&key=91303dedf64285cbbaf9120f6e9d160a5c8aa3deb67017a3874cd272323f48ae
+           * ie: "ledgerlive://portfolio" -> will redirect to the portfolio
            */
-          [ScreenName.WalletConnectDeeplinkingSelectAccount]: "wc",
-          [NavigatorName.Main]: {
-            initialRouteName: ScreenName.Portfolio,
+          [NavigatorName.Portfolio]: {
             screens: {
-              /**
-               * ie: "ledgerlive://portfolio" -> will redirect to the portfolio
-               */
-              [NavigatorName.Portfolio]: {
-                screens: {
-                  [ScreenName.Portfolio]: "portfolio",
-                  [NavigatorName.PortfolioAccounts]: {
-                    screens: {
-                      /**
-                       * @params ?currency: string
-                       * ie: "ledgerlive://account?currency=bitcoin" will open the first bitcoin account
-                       */
-                      [ScreenName.Accounts]: "account",
-                    },
-                  },
-                },
-              },
-              [NavigatorName.Market]: {
-                screens: {
-                  /**
-                   * @params ?platform: string
-                   * ie: "ledgerlive://discover" will open the catalog
-                   * ie: "ledgerlive://discover/paraswap?theme=light" will open the catalog and the paraswap dapp with a light theme as parameter
-                   */
-                  [ScreenName.MarketList]: "market",
-                },
-              },
-              [NavigatorName.Discover]: {
+              [ScreenName.Portfolio]: "portfolio",
+              [NavigatorName.PortfolioAccounts]: {
                 screens: {
                   /**
-                   * @params ?platform: string
-                   * ie: "ledgerlive://discover" will open the catalog
-                   * ie: "ledgerlive://discover/paraswap?theme=light" will open the catalog and the paraswap dapp with a light theme as parameter
+                   * @params ?currency: string
+                   * ie: "ledgerlive://account?currency=bitcoin" will open the first bitcoin account
                    */
-                  [ScreenName.PlatformCatalog]: "discover/:platform?",
+                  [ScreenName.Accounts]: "account",
                 },
               },
-              [NavigatorName.Manager]: {
-                screens: {
-                  /**
-                   * ie: "ledgerlive://manager" will open the manager
-                   *
-                   * @params ?installApp: string
-                   * ie: "ledgerlive://manager?installApp=bitcoin" will open the manager with "bitcoin" prefilled in the search input
-                   *
-                   * * @params ?searchQuery: string
-                   * ie: "ledgerlive://manager?searchQuery=bitcoin" will open the manager with "bitcoin" prefilled in the search input
-                   */
-                  [ScreenName.Manager]: "manager",
-                },
-              },
-            },
-          },
-          [NavigatorName.ReceiveFunds]: {
-            screens: {
-              /**
-               * @params ?currency: string
-               * ie: "ledgerlive://receive?currency=bitcoin" will open the prefilled search account in the receive flow
-               */
-              [ScreenName.ReceiveSelectAccount]: "receive",
             },
           },
-          [NavigatorName.Swap]: {
+          [NavigatorName.Market]: {
             screens: {
               /**
-               * @params ?currency: string
-               * ie: "ledgerlive://receive?currency=bitcoin" will open the prefilled search account in the receive flow
+               * @params ?platform: string
+               * ie: "ledgerlive://discover" will open the catalog
+               * ie: "ledgerlive://discover/paraswap?theme=light" will open the catalog and the paraswap dapp with a light theme as parameter
                */
-              [ScreenName.Swap]: "swap",
+              [ScreenName.MarketList]: "market",
             },
           },
-          [NavigatorName.SendFunds]: {
+          [NavigatorName.Discover]: {
             screens: {
               /**
-               * @params ?currency: string
-               * ie: "ledgerlive://send?currency=bitcoin" will open the prefilled search account in the send flow
+               * @params ?platform: string
+               * ie: "ledgerlive://discover" will open the catalog
+               * ie: "ledgerlive://discover/paraswap?theme=light" will open the catalog and the paraswap dapp with a light theme as parameter
                */
-              [ScreenName.SendCoin]: "send",
+              [ScreenName.PlatformCatalog]: "discover/:platform?",
             },
           },
-          [NavigatorName.ExchangeBuyFlow]: {
+          [NavigatorName.Manager]: {
             screens: {
               /**
-               * @params currency: string
-               * ie: "ledgerlive://buy/bitcoin" -> will redirect to the prefilled search currency in the buy crypto flow
+               * ie: "ledgerlive://manager" will open the manager
+               *
+               * @params ?installApp: string
+               * ie: "ledgerlive://manager?installApp=bitcoin" will open the manager with "bitcoin" prefilled in the search input
+               *
+               * * @params ?searchQuery: string
+               * ie: "ledgerlive://manager?searchQuery=bitcoin" will open the manager with "bitcoin" prefilled in the search input
                */
-              [ScreenName.ExchangeSelectCurrency]: "buy/:currency",
+              [ScreenName.Manager]: "manager",
             },
           },
+        },
+      },
+      [NavigatorName.ReceiveFunds]: {
+        screens: {
           /**
-           * ie: "ledgerlive://buy" -> will redirect to the main exchange page
+           * @params ?currency: string
+           * ie: "ledgerlive://receive?currency=bitcoin" will open the prefilled search account in the receive flow
            */
-          [NavigatorName.Exchange]: {
-            initialRouteName: "buy",
-            screens: {
-              [ScreenName.ExchangeBuy]: "buy",
-              [ScreenName.Coinify]: "buy/coinify",
-            },
-          },
+          [ScreenName.ReceiveSelectAccount]: "receive",
+        },
+      },
+      [NavigatorName.Swap]: {
+        screens: {
           /**
-           * ie: "ledgerlive://swap" -> will redirect to the main swap page
+           * @params ?currency: string
+           * ie: "ledgerlive://receive?currency=bitcoin" will open the prefilled search account in the receive flow
            */
-          [NavigatorName.Swap]: "swap",
-          [NavigatorName.Settings]: {
-            initialRouteName: [ScreenName.SettingsScreen],
-            screens: {
-              /**
-               * ie: "ledgerlive://settings/experimental" -> will redirect to the experimental settings panel
-               */
-              [ScreenName.SettingsScreen]: "settings",
-              [ScreenName.GeneralSettings]: "settings/general",
-              [ScreenName.AccountsSettings]: "settings/accounts",
-              [ScreenName.AboutSettings]: "settings/about",
-              [ScreenName.HelpSettings]: "settings/help",
-              [ScreenName.ExperimentalSettings]: "settings/experimental",
-              [ScreenName.DeveloperSettings]: "settings/developer",
-            },
-          },
+          [ScreenName.Swap]: "swap",
+        },
+      },
+      [NavigatorName.SendFunds]: {
+        screens: {
+          /**
+           * @params ?currency: string
+           * ie: "ledgerlive://send?currency=bitcoin" will open the prefilled search account in the send flow
+           */
+          [ScreenName.SendCoin]: "send",
+        },
+      },
+      [NavigatorName.ExchangeBuyFlow]: {
+        screens: {
+          /**
+           * @params currency: string
+           * ie: "ledgerlive://buy/bitcoin" -> will redirect to the prefilled search currency in the buy crypto flow
+           */
+          [ScreenName.ExchangeSelectCurrency]: "buy/:currency",
+        },
+      },
+      /**
+       * ie: "ledgerlive://buy" -> will redirect to the main exchange page
+       */
+      [NavigatorName.Exchange]: {
+        initialRouteName: "buy",
+        screens: {
+          [ScreenName.ExchangeBuy]: "buy",
+          [ScreenName.Coinify]: "buy/coinify",
+        },
+      },
+      /**
+       * ie: "ledgerlive://swap" -> will redirect to the main swap page
+       */
+      [NavigatorName.Swap]: "swap",
+      [NavigatorName.Settings]: {
+        initialRouteName: [ScreenName.SettingsScreen],
+        screens: {
+          /**
+           * ie: "ledgerlive://settings/experimental" -> will redirect to the experimental settings panel
+           */
+          [ScreenName.SettingsScreen]: "settings",
+          [ScreenName.GeneralSettings]: "settings/general",
+          [ScreenName.AccountsSettings]: "settings/accounts",
+          [ScreenName.AboutSettings]: "settings/about",
+          [ScreenName.HelpSettings]: "settings/help",
+          [ScreenName.ExperimentalSettings]: "settings/experimental",
+          [ScreenName.DeveloperSettings]: "settings/developer",
+        },
+      },
+    },
+  },
+};
+
+// Deep linking screens config for the onboarding, always available
+// WIP: not final deep links path/name
+const onboardingLinkingConfigScreens = {
+  [NavigatorName.BaseOnboarding]: {
+    screens: {
+      [NavigatorName.SyncOnboarding]: {
+        screens: {
+          /**
+           * ie: "ledgerlive://onboarding/sync -> will redirect to the synchronous onboarding
+           */
+          [ScreenName.SyncOnboardingWelcome]: "onboarding/sync",
+        },
+      },
+      [NavigatorName.Onboarding]: {
+        screens: {
+          /**
+           * ie: "ledgerlive://onboarding/sync -> will redirect to select device during onboarding
+           */
+          [ScreenName.OnboardingDeviceSelection]: "onboarding/select",
         },
       },
     },
@@ -367,13 +392,19 @@ const DeepLinkingNavigator = ({ children }: { children: React$Node }) => {
   const hasCompletedOnboarding = useSelector(hasCompletedOnboardingSelector);
   const wcContext = useContext(_wcContext);
 
+  // The available deep linking depends on wether the user has already been onbarded or not
   const linking = useMemo(
     () => ({
       ...linkingOptions,
-      enabled:
-        hasCompletedOnboarding &&
-        wcContext.initDone &&
-        !wcContext.session.session,
+      config: {
+        screens: {
+          ...onboardingLinkingConfigScreens,
+          ...(hasCompletedOnboarding
+            ? alreadyOnboardedLinkingConfigScreens
+            : {}),
+        },
+      },
+      enabled: wcContext.initDone && !wcContext.session.session,
     }),
     [hasCompletedOnboarding, wcContext.initDone, wcContext.session.session],
   );

src/locales/en/common.json

@@ -884,6 +884,7 @@
       "nanoS": "Nano S",
       "nanoSP": "Nano S Plus",
       "nanoX": "Nano X",
+      "nanoDev": "Nano Dev",
       "blue": "Blue",
       "chooseDevice": "Choose your device"
     },