🛣️ [FEAT]: Create the /ledgersync deeplink (#7706)

* Create LLDs /ledgersync deeplink

* Use redux to show the ledger sync activation drawer

* Create LLMs /ledgersync deeplink

* Update change log

---------

Co-authored-by: Theophile Sandoz <Theophile Sandoz>

.changeset/wise-brooms-enjoy.md

@@ -0,0 +1,6 @@
+---
+"ledger-live-desktop": minor
+"live-mobile": minor
+---
+
+Create the `/ledgersync` deeplink

apps/ledger-live-desktop/src/renderer/hooks/useDeeplinking.ts

@@ -18,6 +18,7 @@ import { Account, SubAccount } from "@ledgerhq/types-live";
 import { useStorylyContext } from "~/storyly/StorylyProvider";
 import { useNavigateToPostOnboardingHubCallback } from "~/renderer/components/PostOnboardingHub/logic/useNavigateToPostOnboardingHubCallback";
 import { usePostOnboardingDeeplinkHandler } from "@ledgerhq/live-common/postOnboarding/hooks/index";
+import { setDrawerVisibility as setLedgerSyncDrawerVisibility } from "../actions/walletSync";
 
 const getAccountsOrSubAccountsByCurrency = (
   currency: CryptoOrTokenCurrency,
@@ -346,6 +347,11 @@ export function useDeepLinkHandler() {
           postOnboardingDeeplinkHandler(query.device);
           break;
         }
+        case "ledgersync": {
+          navigate("/settings/display");
+          dispatch(setLedgerSyncDrawerVisibility(true));
+          break;
+        }
         case "portfolio":
         default:
           navigate("/");

apps/ledger-live-mobile/src/actions/types.ts

@@ -529,10 +529,12 @@ export type MarketPayload =
 // === WALLETSYNC ACTIONS ===
 export enum WalletSyncActionTypes {
   WALLET_SYNC_SET_MANAGE_KEY_DRAWER = "WALLET_SYNC_SET_MANAGE_KEY_DRAWER",
+  LEDGER_SYNC_SET_ACTIVATE_DRAWER = "LEDGER_SYNC_SET_ACTIVATE_DRAWER",
 }
 
 export type WalletSyncSetManageKeyDrawerPayload = boolean;
-export type WalletSyncPayload = WalletSyncSetManageKeyDrawerPayload;
+export type WalletSyncSetActivateDrawer = boolean;
+export type WalletSyncPayload = WalletSyncSetManageKeyDrawerPayload | WalletSyncSetActivateDrawer;
 
 // === PAYLOADS ===
 

apps/ledger-live-mobile/src/actions/walletSync.ts

@@ -1,7 +1,11 @@
 import { createAction } from "redux-actions";
 import { WalletSyncActionTypes } from "./types";
-import type { WalletSyncSetManageKeyDrawerPayload } from "./types";
+import type { WalletSyncSetActivateDrawer, WalletSyncSetManageKeyDrawerPayload } from "./types";
 
 export const setWallectSyncManageKeyDrawer = createAction<WalletSyncSetManageKeyDrawerPayload>(
   WalletSyncActionTypes.WALLET_SYNC_SET_MANAGE_KEY_DRAWER,
 );
+
+export const setLedgerSyncActivateDrawer = createAction<WalletSyncSetActivateDrawer>(
+  WalletSyncActionTypes.LEDGER_SYNC_SET_ACTIVATE_DRAWER,
+);

apps/ledger-live-mobile/src/components/RootNavigator/types/WalletSyncNavigator.ts

@@ -2,6 +2,8 @@ import { TrustchainMember } from "@ledgerhq/trustchain/types";
 import { ScreenName } from "~/const";
 
 export type WalletSyncNavigatorStackParamList = {
+  [ScreenName.LedgerSyncDeepLinkHandler]: undefined;
+
   [ScreenName.WalletSyncActivationInit]: undefined;
 
   [ScreenName.WalletSyncSuccess]: {

apps/ledger-live-mobile/src/const/navigation.ts

@@ -520,6 +520,7 @@ export enum ScreenName {
   WalletSyncUnSynchSuccess = "WalletSyncUnSynchSuccess",
   WalletSyncManageInstancesProcess = "WalletSyncManageInstancesProcess",
   WalletSyncManageInstancesSuccess = "WalletSyncManageInstancesSuccess",
+  LedgerSyncDeepLinkHandler = "LedgerSyncDeepLinkHandler",
 
   MockedAddAssetButton = "MockedAddAssetButton",
   GenericLandingPage = "GenericLandingPage",

apps/ledger-live-mobile/src/navigation/DeeplinksProvider.tsx

@@ -359,6 +359,12 @@ const linkingOptions = () => ({
               [ScreenName.GenericLandingPage]: "landing-page",
             },
           },
+
+          [NavigatorName.WalletSync]: {
+            screens: {
+              [ScreenName.LedgerSyncDeepLinkHandler]: "ledgersync",
+            },
+          },
         },
       },
     },

apps/ledger-live-mobile/src/newArch/features/WalletSync/WalletSyncNavigator.tsx

@@ -14,6 +14,7 @@ import { useTranslation } from "react-i18next";
 import { WalletSyncManageKeyDeletionSuccess } from "./screens/ManageKey/DeletionSuccess";
 import { ManageInstancesProcess } from "./screens/ManageInstances/ManageInstancesProcess";
 import { WalletSyncManageInstanceDeletionSuccess } from "./screens/ManageInstances/DeletionSuccess";
+import { LedgerSyncDeepLinkHandler } from "./screens/LedgerSyncDeepLinkHandler";
 import { NavigationHeaderCloseButton } from "~/components/NavigationHeaderCloseButton";
 
 const Stack = createStackNavigator<WalletSyncNavigatorStackParamList>();
@@ -99,6 +100,14 @@ export default function WalletSyncNavigator() {
           headerLeft: () => null,
         }}
       />
+      <Stack.Screen
+        name={ScreenName.LedgerSyncDeepLinkHandler}
+        component={LedgerSyncDeepLinkHandler}
+        options={{
+          title: "",
+          headerRight: () => null,
+        }}
+      />
     </Stack.Navigator>
   );
 }

apps/ledger-live-mobile/src/newArch/features/WalletSync/screens/LedgerSyncDeepLinkHandler.tsx

@@ -0,0 +1,27 @@
+import { StackActions, useNavigation } from "@react-navigation/native";
+import { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { trustchainSelector } from "@ledgerhq/trustchain/store";
+import { setLedgerSyncActivateDrawer } from "~/actions/walletSync";
+import { NavigatorName, ScreenName } from "~/const";
+
+export function LedgerSyncDeepLinkHandler() {
+  const hasTrustchain = !!useSelector(trustchainSelector)?.rootId;
+  const navigation = useNavigation();
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    if (hasTrustchain) {
+      const routeName = NavigatorName.WalletSync;
+      const screen = ScreenName.WalletSyncActivated;
+      navigation.dispatch(StackActions.replace(routeName, { screen }));
+    } else {
+      const routeName = NavigatorName.Settings;
+      const screen = ScreenName.GeneralSettings;
+      navigation.dispatch(StackActions.replace(routeName, { screen }));
+      dispatch(setLedgerSyncActivateDrawer(true));
+    }
+  }, [hasTrustchain, navigation, dispatch]);
+
+  return null;
+}

apps/ledger-live-mobile/src/reducers/types.ts

@@ -346,6 +346,7 @@ export type MarketState = {
 
 export type WalletSyncState = {
   isManageKeyDrawerOpen: boolean;
+  isActivateDrawerOpen: boolean;
 };
 
 // === ROOT STATE ===

apps/ledger-live-mobile/src/reducers/walletSync.ts

@@ -1,21 +1,33 @@
 import { handleActions } from "redux-actions";
 import type { Action, ReducerMap } from "redux-actions";
 import type { State, WalletSyncState } from "./types";
-import { WalletSyncPayload, WalletSyncSetManageKeyDrawerPayload } from "../actions/types";
+import {
+  WalletSyncActionTypes,
+  WalletSyncPayload,
+  WalletSyncSetActivateDrawer,
+  WalletSyncSetManageKeyDrawerPayload,
+} from "../actions/types";
 
 export const INITIAL_STATE: WalletSyncState = {
   isManageKeyDrawerOpen: false,
+  isActivateDrawerOpen: false,
 };
 
 const handlers: ReducerMap<WalletSyncState, WalletSyncPayload> = {
-  WALLET_SYNC_SET_MANAGE_KEY_DRAWER: (state, action) => ({
+  [WalletSyncActionTypes.WALLET_SYNC_SET_MANAGE_KEY_DRAWER]: (state, action) => ({
     ...state,
     isManageKeyDrawerOpen: (action as Action<WalletSyncSetManageKeyDrawerPayload>).payload,
   }),
+  [WalletSyncActionTypes.LEDGER_SYNC_SET_ACTIVATE_DRAWER]: (state, action) => ({
+    ...state,
+    isActivateDrawerOpen: (action as Action<WalletSyncSetActivateDrawer>).payload,
+  }),
 };
 
 export const storeSelector = (state: State): WalletSyncState => state.walletSync;
 export const manageKeyDrawerSelector = (state: State): boolean =>
   state.walletSync.isManageKeyDrawerOpen;
+export const activateDrawerSelector = (state: State): boolean =>
+  state.walletSync.isActivateDrawerOpen;
 
 export default handleActions<WalletSyncState, WalletSyncPayload>(handlers, INITIAL_STATE);

apps/ledger-live-mobile/src/screens/Settings/General/WalletSyncRow.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from "react";
+import React, { useCallback } from "react";
 import SettingsRow from "~/components/SettingsRow";
 import { useTranslation } from "react-i18next";
 import { useNavigation } from "@react-navigation/native";
@@ -8,20 +8,24 @@ import {
   AnalyticsPage,
   AnalyticsButton,
 } from "LLM/features/WalletSync/hooks/useLedgerSyncAnalytics";
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { trustchainSelector } from "@ledgerhq/trustchain/store";
 import ActivationDrawer from "LLM/features/WalletSync/screens/Activation/ActivationDrawer";
 import { Steps } from "LLM/features/WalletSync/types/Activation";
+import { activateDrawerSelector } from "~/reducers/walletSync";
+import { setLedgerSyncActivateDrawer } from "~/actions/walletSync";
 
 const WalletSyncRow = () => {
   const { t } = useTranslation();
   const { onClickTrack } = useLedgerSyncAnalytics();
   const navigation = useNavigation();
-  const [isDrawerVisible, setIsDrawerVisible] = useState(false);
+
+  const isDrawerVisible = useSelector(activateDrawerSelector);
+  const dispatch = useDispatch();
 
   const closeDrawer = useCallback(() => {
-    setIsDrawerVisible(false);
-  }, []);
+    dispatch(setLedgerSyncActivateDrawer(false));
+  }, [dispatch]);
   const trustchain = useSelector(trustchainSelector);
 
   const navigateToWalletSyncActivationScreen = useCallback(() => {
@@ -33,9 +37,9 @@ const WalletSyncRow = () => {
         screen: ScreenName.WalletSyncActivated,
       });
     } else {
-      setIsDrawerVisible(true);
+      dispatch(setLedgerSyncActivateDrawer(true));
     }
-  }, [navigation, onClickTrack, trustchain?.rootId]);
+  }, [navigation, onClickTrack, trustchain?.rootId, dispatch]);
 
   return (
     <>