Add deeplink for synchronous onboarding (#1455)

* feat(mobile): add a deeplink redirection to sync onboarding

* chore: generate changeset

* refactor(mobile): redo the deeplink redirection cleanly

* fix(mobile): update how terms are checked

* chore(mobile): update code doc for pairing flow navigation

* fix(mobile): revert default navigation to previous state in pairing flow

* fix(mobile): add some comments

* fix(mobile): rechange navigation type stuff

* fix(mobile): redirect properly to welcome screen when hitting back

.changeset/shaggy-queens-think.md

@@ -0,0 +1,5 @@
+---
+"live-mobile": minor
+---
+
+Add deeplink to open the sync onboarding flow

apps/ledger-live-mobile/src/components/DeviceSetupView.tsx

@@ -28,9 +28,8 @@ const DeviceSetupView = ({
   const navigation = useNavigation();
   const { colors } = useTheme();
 
-  const canGoBack = navigation.canGoBack();
-  const canRenderBackButton = (canGoBack && hasBackButton) || onBack;
-  const canRenderCloseButton = (canGoBack && hasCloseButton) || onClose;
+  const canRenderBackButton = hasBackButton || onBack;
+  const canRenderCloseButton = hasCloseButton || onClose;
 
   const handleBack = () => {
     navigation.goBack();

apps/ledger-live-mobile/src/components/RootNavigator/BaseNavigator.tsx

@@ -595,7 +595,6 @@ export default function BaseNavigator() {
         name={ScreenName.BleDevicePairingFlow as "BleDevicePairingFlow"}
         component={BleDevicePairingFlow}
         options={{
-          title: "",
           headerShown: false,
         }}
       />

apps/ledger-live-mobile/src/index.tsx

@@ -8,6 +8,7 @@ import React, {
   useContext,
   useMemo,
   useEffect,
+  useState,
 } from "react";
 import { connect, useDispatch, useSelector } from "react-redux";
 import * as Sentry from "@sentry/react-native";
@@ -109,6 +110,7 @@ import DelayedTrackingProvider from "./components/DelayedTrackingProvider";
 import { useFilteredManifests } from "./screens/Platform/shared";
 import { setWallectConnectUri } from "./actions/walletconnect";
 import PostOnboardingProviderWrapped from "./logic/postOnboarding/PostOnboardingProviderWrapped";
+import { isAcceptedTerms } from "./logic/terms";
 
 const themes = {
   light: lightTheme,
@@ -294,6 +296,8 @@ const linkingOptions: LinkingOptions<ReactNavigation.RootParamList> = {
 
           [ScreenName.PostBuyDeviceScreen]: "hw-purchase-success",
 
+          [ScreenName.BleDevicePairingFlow]: "sync-onboarding",
+
           /**
            * @params ?platform: string
            * ie: "ledgerlive://discover/paraswap?theme=light" will open the catalog and the paraswap dapp with a light theme as parameter
@@ -440,19 +444,24 @@ const linkingOptions: LinkingOptions<ReactNavigation.RootParamList> = {
     },
   },
 };
-const linkingOptionsOnboarding = {
+
+const getOnboardingLinkingOptions = (acceptedTermsOfUse: boolean) => ({
   ...linkingOptions,
   config: {
-    screens: {
-      [NavigatorName.Base]: {
-        initialRouteName: NavigatorName.Main,
-        screens: {
-          [ScreenName.PostBuyDeviceScreen]: "hw-purchase-success",
+    screens: !acceptedTermsOfUse
+      ? {}
+      : {
+          [NavigatorName.Base]: {
+            initialRouteName: NavigatorName.Main,
+            screens: {
+              [ScreenName.PostBuyDeviceScreen]: "hw-purchase-success",
+              [ScreenName.BleDevicePairingFlow]: "sync-onboarding",
+            },
+          },
         },
-      },
-    },
   },
-};
+});
+
 const platformManifestFilterParams = {
   private: true,
   branches: undefined, // will override & having it to undefined makes all branches valid
@@ -466,9 +475,16 @@ const DeepLinkingNavigator = ({ children }: { children: React.ReactNode }) => {
   const liveAppProviderInitialized =
     !!remoteLiveAppState.value || !!remoteLiveAppState.error;
   const filteredManifests = useFilteredManifests(platformManifestFilterParams);
+  // Can be either true, false or null, meaning we don't know yet
+  const [userAcceptedTerms, setUserAcceptedTerms] = useState<boolean | null>(
+    null,
+  );
+
   const linking = useMemo<LinkingOptions<ReactNavigation.RootParamList>>(
     () => ({
-      ...(hasCompletedOnboarding ? linkingOptions : linkingOptionsOnboarding),
+      ...(hasCompletedOnboarding
+        ? linkingOptions
+        : getOnboardingLinkingOptions(!!userAcceptedTerms)),
       enabled: wcContext.initDone && !wcContext.session.session,
       subscribe(listener) {
         const sub = Linking.addEventListener("url", ({ url }) => {
@@ -544,13 +560,17 @@ const DeepLinkingNavigator = ({ children }: { children: React.ReactNode }) => {
       dispatch,
       liveAppProviderInitialized,
       filteredManifests,
+      userAcceptedTerms,
     ],
   );
   const [isReady, setIsReady] = React.useState(false);
+
   useEffect(() => {
     if (!wcContext.initDone) return;
+    if (userAcceptedTerms === null) return;
     setIsReady(true);
-  }, [wcContext.initDone]);
+  }, [wcContext.initDone, userAcceptedTerms]);
+
   React.useEffect(
     () => () => {
       isReadyRef.current = false;
@@ -566,6 +586,12 @@ const DeepLinkingNavigator = ({ children }: { children: React.ReactNode }) => {
       dispatch(setOsTheme(currentOsTheme));
     }
   }, [dispatch, osTheme]);
+
+  useEffect(() => {
+    const loadTerms = async () => setUserAcceptedTerms(await isAcceptedTerms());
+    loadTerms();
+  }, []);
+
   useEffect(() => {
     compareOsTheme();
 

apps/ledger-live-mobile/src/screens/BleDevicePairingFlow/BleDevicesScanning.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { ScrollView } from "react-native";
+import { BackHandler, ScrollView } from "react-native";
 import {
   Flex,
   InfiniteLoader,
@@ -13,13 +13,15 @@ import { useSelector } from "react-redux";
 import { getDeviceModel } from "@ledgerhq/devices";
 import { Device, DeviceModelId } from "@ledgerhq/types-devices";
 import TransportBLE from "@ledgerhq/react-native-hw-transport-ble";
+import { useNavigation } from "@react-navigation/native";
 
 import Animation from "../../components/Animation";
 import { knownDevicesSelector } from "../../reducers/ble";
 import LocationRequired from "../LocationRequired";
 import BleDeviceItem from "./BleDeviceItem";
 import lottie from "./assets/bluetooth.json";
 import DeviceSetupView from "../../components/DeviceSetupView";
+import { NavigatorName, ScreenName } from "../../const";
 
 export type FilterByDeviceModelId = null | DeviceModelId;
 
@@ -35,6 +37,43 @@ export const BleDevicesScanning = ({
   areKnownDevicesDisplayed,
 }: BleDevicesScanningProps) => {
   const { t } = useTranslation();
+  const navigation = useNavigation();
+
+  const handleBack = useCallback(() => {
+    const routes = navigation.getState().routes;
+
+    const isNavigationFromDeeplink =
+      routes[routes.length - 1]?.params === undefined;
+
+    if (!isNavigationFromDeeplink) {
+      navigation.goBack();
+    } else {
+      navigation.reset({
+        index: 0,
+        routes: [
+          {
+            name: NavigatorName.BaseOnboarding,
+            state: {
+              routes: [
+                {
+                  name: ScreenName.OnboardingWelcome,
+                },
+              ],
+            },
+          },
+        ],
+      });
+    }
+  }, [navigation]);
+
+  useEffect(() => {
+    const listener = BackHandler.addEventListener("hardwareBackPress", () => {
+      handleBack();
+      return true;
+    });
+
+    return () => listener.remove();
+  }, [handleBack]);
 
   const productName = filterByDeviceModelId
     ? getDeviceModel(filterByDeviceModelId).productName || filterByDeviceModelId
@@ -107,7 +146,7 @@ export const BleDevicesScanning = ({
   }
 
   return (
-    <DeviceSetupView hasBackButton>
+    <DeviceSetupView onBack={handleBack}>
       <ScrollListContainer display="flex" flex={1} px={4}>
         <Flex height={180} alignItems="center" justifyContent="center">
           <Animation source={lottie} />

apps/ledger-live-mobile/src/screens/BleDevicePairingFlow/index.tsx

@@ -10,12 +10,37 @@ import RequiresBLE from "../../components/RequiresBLE";
 import { BleDevicesScanning } from "./BleDevicesScanning";
 import { BleDevicePairing } from "./BleDevicePairing";
 import { addKnownDevice } from "../../actions/ble";
+import { NavigatorName, ScreenName } from "../../const";
 
 export type NavigateInput = {
   name: string;
   params: object;
 };
 
+// Necessary when the pairing flow is opened from a deeplink without any params
+// Shouldn't be relied upon for other usages
+const defaultNavigationParams = {
+  filterByDeviceModelId: DeviceModelId.nanoFTS, // This needs to be removed when nanos are supported
+  areKnownDevicesDisplayed: true,
+  onSuccessAddToKnownDevices: false,
+  successNavigateToConfig: {
+    navigationType: "navigate",
+    pathToDeviceParam: "params.params.params.device",
+    navigateInput: {
+      name: NavigatorName.BaseOnboarding,
+      params: {
+        screen: NavigatorName.SyncOnboarding,
+        params: {
+          screen: ScreenName.SyncOnboardingCompanion,
+          params: {
+            device: null,
+          },
+        },
+      },
+    },
+  },
+};
+
 export type PathToDeviceParam = PropertyPath;
 export type NavigationType = "navigate" | "replace" | "push";
 
@@ -61,6 +86,8 @@ export type BleDevicePairingFlowProps = StackScreenProps<
  *     From the ex of navigateInput, it would be: "params.params.pairedDevice"
  *   - navigationType: (optional, default to "navigate") when navigating after a successful pairing,
  *     choose between a "replace" or a "navigate"
+ *   The default success config will navigate to the synchronous onboarding, however it shouldn't be
+ *   relied upon and exist solely to simplify deeplinking to the sync onboarding.
  * - onSuccessAddToKnownDevices: boolean, if true the successfully paired device is added to the redux
  *   list of known devices. Not added if false (default to false).
  * @returns a JSX component
@@ -71,16 +98,21 @@ export const BleDevicePairingFlow = ({
 }: BleDevicePairingFlowProps) => {
   const dispatchRedux = useDispatch();
 
+  const params = route?.params || defaultNavigationParams;
+
   const {
-    filterByDeviceModelId,
+    filterByDeviceModelId = undefined,
     areKnownDevicesDisplayed = true,
     onSuccessAddToKnownDevices = false,
-    onSuccessNavigateToConfig: {
-      navigateInput,
-      pathToDeviceParam,
-      navigationType = "navigate",
-    },
-  } = route.params;
+    onSuccessNavigateToConfig = defaultNavigationParams.successNavigateToConfig,
+  } = params;
+
+  const {
+    navigateInput,
+    pathToDeviceParam,
+    navigationType = "navigate",
+  } = onSuccessNavigateToConfig;
+
   const [deviceToPair, setDeviceToPair] = useState<Device | null>(null);
 
   const onDeviceSelect = useCallback((item: Device) => {