Feat/llm ledger sync redirection on sync again (#7729)

feat(llm): Ledger sync redirect to qr code method on sync again
LedgerHQ · Sep 3, 2024 · f5c8891 · f5c8891
1 parent c8ac662
commit f5c8891
Show file tree

Hide file tree

Showing 17 changed files with 103 additions and 50 deletions.
diff --git a/.changeset/strange-shrimps-clean.md b/.changeset/strange-shrimps-clean.md
@@ -0,0 +1,5 @@
+---
+"live-mobile": minor
+---
+
+LLM - Ledger Sync redirects to Qr code when syncing again after a successful sync
diff --git a/apps/ledger-live-mobile/src/actions/types.ts b/apps/ledger-live-mobile/src/actions/types.ts
@@ -36,6 +36,7 @@ import type {
 import type { Unpacked } from "../types/helpers";
 import { HandlersPayloads } from "@ledgerhq/live-wallet/store";
 import { ImportAccountsReduceInput } from "@ledgerhq/live-wallet/liveqr/importAccounts";
+import { Steps } from "LLM/features/WalletSync/types/Activation";
 
 //  === ACCOUNTS ACTIONS ===
 
@@ -530,11 +531,16 @@ export type MarketPayload =
 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",
+  LEDGER_SYNC_SET_ACTIVATE_STEP = "LEDGER_SYNC_SET_ACTIVATE_STEP",
 }
 
 export type WalletSyncSetManageKeyDrawerPayload = boolean;
 export type WalletSyncSetActivateDrawer = boolean;
-export type WalletSyncPayload = WalletSyncSetManageKeyDrawerPayload | WalletSyncSetActivateDrawer;
+export type WalletSyncSetActivateStep = Steps;
+export type WalletSyncPayload =
+  | WalletSyncSetManageKeyDrawerPayload
+  | WalletSyncSetActivateDrawer
+  | WalletSyncSetActivateStep;
 
 // === PAYLOADS ===
 

diff --git a/apps/ledger-live-mobile/src/actions/walletSync.ts b/apps/ledger-live-mobile/src/actions/walletSync.ts
@@ -1,6 +1,10 @@
 import { createAction } from "redux-actions";
 import { WalletSyncActionTypes } from "./types";
-import type { WalletSyncSetActivateDrawer, WalletSyncSetManageKeyDrawerPayload } from "./types";
+import type {
+  WalletSyncSetActivateDrawer,
+  WalletSyncSetActivateStep,
+  WalletSyncSetManageKeyDrawerPayload,
+} from "./types";
 
 export const setWallectSyncManageKeyDrawer = createAction<WalletSyncSetManageKeyDrawerPayload>(
   WalletSyncActionTypes.WALLET_SYNC_SET_MANAGE_KEY_DRAWER,
@@ -9,3 +13,7 @@ export const setWallectSyncManageKeyDrawer = createAction<WalletSyncSetManageKey
 export const setLedgerSyncActivateDrawer = createAction<WalletSyncSetActivateDrawer>(
   WalletSyncActionTypes.LEDGER_SYNC_SET_ACTIVATE_DRAWER,
 );
+
+export const setLedgerSyncActivateStep = createAction<WalletSyncSetActivateStep>(
+  WalletSyncActionTypes.LEDGER_SYNC_SET_ACTIVATE_STEP,
+);
diff --git a/...dger-live-mobile/src/newArch/features/Accounts/screens/AddAccount/components/StepFlow.tsx b/...dger-live-mobile/src/newArch/features/Accounts/screens/AddAccount/components/StepFlow.tsx
@@ -11,14 +11,13 @@ import PinCodeDisplay from "LLM/features/WalletSync/screens/Synchronize/PinCodeD
 import PinCodeInput from "LLM/features/WalletSync/screens/Synchronize/PinCodeInput";
 import { useInitMemberCredentials } from "LLM/features/WalletSync/hooks/useInitMemberCredentials";
 import { useSyncWithQrCode } from "LLM/features/WalletSync/hooks/useSyncWithQrCode";
-import { SpecificError } from "~/newArch/features/WalletSync/components/Error/SpecificError";
-import { ErrorReason } from "~/newArch/features/WalletSync/hooks/useSpecificError";
+import { SpecificError } from "LLM/features/WalletSync/components/Error/SpecificError";
+import { ErrorReason } from "LLM/features/WalletSync/hooks/useSpecificError";
+import { useCurrentStep } from "LLM/features/WalletSync/hooks/useCurrentStep";
 
 type Props = {
-  currentStep: Steps;
   currency?: CryptoCurrency | TokenCurrency | null;
   doesNotHaveAccount?: boolean;
-  setCurrentStep: (step: Steps) => void;
   setCurrentOption: (option: Options) => void;
   currentOption: Options;
   navigateToChooseSyncMethod: () => void;
@@ -36,23 +35,22 @@ type Props = {
 const StepFlow = ({
   doesNotHaveAccount,
   currency,
-  currentStep,
   setCurrentOption,
   currentOption,
   navigateToChooseSyncMethod,
   navigateToQrCodeMethod,
   onQrCodeScanned,
   qrProcess,
-  setCurrentStep,
   onCreateKey,
 }: Props) => {
+  const { currentStep, setCurrentStep } = useCurrentStep();
   const { memberCredentials } = useInitMemberCredentials();
 
   const { handleStart, handleSendDigits, inputCallback, nbDigits } = useSyncWithQrCode();
 
   const handleQrCodeScanned = (data: string) => {
     onQrCodeScanned();
-    if (memberCredentials) handleStart(data, memberCredentials, setCurrentStep);
+    if (memberCredentials) handleStart(data, memberCredentials);
   };
 
   const handlePinCodeSubmit = (input: string) => {

diff --git a/apps/ledger-live-mobile/src/newArch/features/Accounts/screens/AddAccount/index.tsx b/apps/ledger-live-mobile/src/newArch/features/Accounts/screens/AddAccount/index.tsx
@@ -6,6 +6,7 @@ import DrawerHeader from "LLM/features/WalletSync/components/Synchronize/DrawerH
 import { Flex } from "@ledgerhq/native-ui";
 import StepFlow from "./components/StepFlow";
 import { Steps } from "LLM/features/WalletSync/types/Activation";
+import { useCurrentStep } from "LLM/features/WalletSync/hooks/useCurrentStep";
 
 type ViewProps = ReturnType<typeof useAddAccountViewModel> & AddAccountProps;
 
@@ -21,17 +22,16 @@ function View({
   doesNotHaveAccount,
   currency,
   onCloseAddAccountDrawer,
-  currentStep,
   onGoBack,
   currentOption,
-  setCurrentStep,
   setCurrentOption,
   navigateToChooseSyncMethod,
   navigateToQrCodeMethod,
   qrProcess,
   onQrCodeScanned,
   onCreateKey,
 }: ViewProps) {
+  const { currentStep } = useCurrentStep();
   const CustomDrawerHeader = () => <DrawerHeader onClose={onCloseAddAccountDrawer} />;
 
   return (
@@ -46,8 +46,6 @@ function View({
         <StepFlow
           doesNotHaveAccount={doesNotHaveAccount}
           currency={currency}
-          currentStep={currentStep}
-          setCurrentStep={setCurrentStep}
           setCurrentOption={setCurrentOption}
           currentOption={currentOption}
           navigateToChooseSyncMethod={navigateToChooseSyncMethod}

diff --git a/...er-live-mobile/src/newArch/features/Accounts/screens/AddAccount/useAddAccountViewModel.ts b/...er-live-mobile/src/newArch/features/Accounts/screens/AddAccount/useAddAccountViewModel.ts
@@ -1,11 +1,12 @@
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { track } from "~/analytics";
 import { useQRCodeHost } from "LLM/features/WalletSync/hooks/useQRCodeHost";
 import { Options, Steps } from "LLM/features/WalletSync/types/Activation";
 import { NavigatorName, ScreenName } from "~/const";
 import { useNavigation } from "@react-navigation/native";
 import { BaseComposite, StackNavigatorProps } from "~/components/RootNavigator/types/helpers";
 import { WalletSyncNavigatorStackParamList } from "~/components/RootNavigator/types/WalletSyncNavigator";
+import { useCurrentStep } from "LLM/features/WalletSync/hooks/useCurrentStep";
 
 type AddAccountDrawerProps = {
   isOpened: boolean;
@@ -19,12 +20,16 @@ type NavigationProps = BaseComposite<
 const startingStep = Steps.AddAccountMethod;
 
 const useAddAccountViewModel = ({ isOpened, onClose }: AddAccountDrawerProps) => {
-  const [currentStep, setCurrentStep] = useState<Steps>(startingStep);
+  const { currentStep, setCurrentStep } = useCurrentStep();
   const [currentOption, setCurrentOption] = useState<Options>(Options.SCAN);
   const navigateToChooseSyncMethod = () => setCurrentStep(Steps.ChooseSyncMethod);
   const navigateToQrCodeMethod = () => setCurrentStep(Steps.QrCodeMethod);
   const navigation = useNavigation<NavigationProps["navigation"]>();
-  const onGoBack = () => setCurrentStep(prevStep => getPreviousStep(prevStep));
+  const onGoBack = () => setCurrentStep(getPreviousStep(currentStep));
+
+  useEffect(() => {
+    setCurrentStep(startingStep);
+  }, [setCurrentStep]);
 
   const reset = () => {
     setCurrentStep(startingStep);
@@ -49,15 +54,13 @@ const useAddAccountViewModel = ({ isOpened, onClose }: AddAccountDrawerProps) =>
     });
   }, []);
 
-  const onCloseAddAccountDrawer = useCallback(() => {
+  const onCloseAddAccountDrawer = () => {
     trackButtonClick("Close 'x'");
     onClose();
     reset();
-  }, [trackButtonClick, onClose]);
+  };
 
   const { url, error, isLoading, pinCode } = useQRCodeHost({
-    setCurrentStep,
-    currentStep,
     currentOption,
   });
 
@@ -74,10 +77,8 @@ const useAddAccountViewModel = ({ isOpened, onClose }: AddAccountDrawerProps) =>
     onCloseAddAccountDrawer,
     navigateToQrCodeMethod,
     navigateToChooseSyncMethod,
-    currentStep,
     setCurrentOption,
     currentOption,
-    setCurrentStep,
     onQrCodeScanned,
     onGoBack,
     qrProcess: {

diff --git a/...c/newArch/features/WalletSync/__integrations__/synchronizeWithQrCode.integration.test.tsx b/...c/newArch/features/WalletSync/__integrations__/synchronizeWithQrCode.integration.test.tsx
@@ -6,8 +6,6 @@ import getWalletSyncEnvironmentParams from "@ledgerhq/live-common/walletSync/get
 
 jest.mock("../hooks/useQRCodeHost", () => ({
   useQRCodeHost: () => ({
-    setCurrentStep: jest.fn(),
-    currentStep: jest.fn(),
     currentOption: jest.fn(),
     url: "ledger.com",
   }),

diff --git a/...dger-live-mobile/src/newArch/features/WalletSync/components/Activation/ActivationFlow.tsx b/...dger-live-mobile/src/newArch/features/WalletSync/components/Activation/ActivationFlow.tsx
@@ -12,9 +12,9 @@ import { useInitMemberCredentials } from "../../hooks/useInitMemberCredentials";
 import { useSyncWithQrCode } from "../../hooks/useSyncWithQrCode";
 import { SpecificError } from "../Error/SpecificError";
 import { ErrorReason } from "../../hooks/useSpecificError";
+import { useCurrentStep } from "../../hooks/useCurrentStep";
 
 type Props = {
-  currentStep: Steps;
   navigateToChooseSyncMethod: () => void;
   navigateToQrCodeMethod: () => void;
   qrProcess: {
@@ -26,28 +26,26 @@ type Props = {
   onQrCodeScanned: () => void;
   currentOption: Options;
   setOption: (option: Options) => void;
-  setCurrentStep: (step: Steps) => void;
   onCreateKey: () => void;
 };
 
 const ActivationFlow = ({
-  currentStep,
   navigateToChooseSyncMethod,
   navigateToQrCodeMethod,
   qrProcess,
   currentOption,
   setOption,
   onQrCodeScanned,
-  setCurrentStep,
   onCreateKey,
 }: Props) => {
+  const { currentStep, setCurrentStep } = useCurrentStep();
   const { memberCredentials } = useInitMemberCredentials();
 
   const { handleStart, handleSendDigits, inputCallback, nbDigits } = useSyncWithQrCode();
 
   const handleQrCodeScanned = (data: string) => {
     onQrCodeScanned();
-    if (memberCredentials) handleStart(data, memberCredentials, setCurrentStep);
+    if (memberCredentials) handleStart(data, memberCredentials);
   };
 
   const handlePinCodeSubmit = (input: string) => {

diff --git a/apps/ledger-live-mobile/src/newArch/features/WalletSync/hooks/useCurrentStep.ts b/apps/ledger-live-mobile/src/newArch/features/WalletSync/hooks/useCurrentStep.ts
@@ -0,0 +1,21 @@
+import { useDispatch, useSelector } from "react-redux";
+import { activateDrawerStepSelector } from "~/reducers/walletSync";
+import { Steps } from "../types/Activation";
+import { setLedgerSyncActivateStep } from "~/actions/walletSync";
+import { useCallback } from "react";
+
+export function useCurrentStep() {
+  const dispatch = useDispatch();
+  const currentStep = useSelector(activateDrawerStepSelector);
+  const setCurrentStep = useCallback(
+    (step: Steps) => {
+      dispatch(setLedgerSyncActivateStep(step));
+    },
+    [dispatch],
+  );
+
+  return {
+    currentStep,
+    setCurrentStep,
+  };
+}
diff --git a/apps/ledger-live-mobile/src/newArch/features/WalletSync/hooks/useQRCodeHost.ts b/apps/ledger-live-mobile/src/newArch/features/WalletSync/hooks/useQRCodeHost.ts
@@ -21,16 +21,16 @@ import getWalletSyncEnvironmentParams from "@ledgerhq/live-common/walletSync/get
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { QueryKey } from "./type.hooks";
 import { useInstanceName } from "./useInstanceName";
+import { useCurrentStep } from "./useCurrentStep";
 
 const MIN_TIME_TO_REFRESH = 30_000;
 
 interface Props {
-  setCurrentStep: (step: Steps) => void;
-  currentStep: Steps;
   currentOption: Options;
 }
 
-export function useQRCodeHost({ setCurrentStep, currentStep, currentOption }: Props) {
+export function useQRCodeHost({ currentOption }: Props) {
+  const { currentStep, setCurrentStep } = useCurrentStep();
   const queryClient = useQueryClient();
   const trustchain = useSelector(trustchainSelector);
   const memberCredentials = useSelector(memberCredentialsSelector);

diff --git a/apps/ledger-live-mobile/src/newArch/features/WalletSync/hooks/useSyncWithQrCode.ts b/apps/ledger-live-mobile/src/newArch/features/WalletSync/hooks/useSyncWithQrCode.ts
@@ -14,8 +14,10 @@ import { Steps } from "../types/Activation";
 import { NavigatorName, ScreenName } from "~/const";
 import { useInstanceName } from "./useInstanceName";
 import { useTrustchainSdk } from "./useTrustchainSdk";
+import { useCurrentStep } from "./useCurrentStep";
 
 export const useSyncWithQrCode = () => {
+  const { setCurrentStep } = useCurrentStep();
   const [nbDigits, setDigits] = useState<number | null>(null);
   const [input, setInput] = useState<string | null>(null);
   const instanceName = useInstanceName();
@@ -48,11 +50,7 @@ export const useSyncWithQrCode = () => {
   }, [navigation]);
 
   const handleStart = useCallback(
-    async (
-      url: string,
-      memberCredentials: MemberCredentials,
-      setCurrentStep: (step: Steps) => void,
-    ) => {
+    async (url: string, memberCredentials: MemberCredentials) => {
       try {
         const newTrustchain = await createQRCodeCandidateInstance({
           memberCredentials,
@@ -94,7 +92,7 @@ export const useSyncWithQrCode = () => {
         throw e;
       }
     },
-    [instanceName, onRequestQRCodeInput, trustchain, dispatch, onSyncFinished, sdk],
+    [instanceName, onRequestQRCodeInput, trustchain, onSyncFinished, sdk, dispatch, setCurrentStep],
   );
 
   const handleSendDigits = useCallback(

diff --git a/...edger-live-mobile/src/newArch/features/WalletSync/screens/Activation/ActivationDrawer.tsx b/...edger-live-mobile/src/newArch/features/WalletSync/screens/Activation/ActivationDrawer.tsx
@@ -17,7 +17,6 @@ type Props = {
 
 function View({
   isOpen,
-  currentStep,
   hasCustomHeader,
   canGoBack,
   navigateToChooseSyncMethod,
@@ -30,7 +29,6 @@ function View({
   qrProcess,
   currentOption,
   setCurrentOption,
-  setCurrentStep,
 }: ViewProps) {
   const CustomDrawerHeader = () => <DrawerHeader onClose={handleClose} />;
 
@@ -46,14 +44,12 @@ function View({
       >
         <Flex maxHeight={"90%"}>
           <ActivationFlow
-            currentStep={currentStep}
             navigateToChooseSyncMethod={navigateToChooseSyncMethod}
             navigateToQrCodeMethod={navigateToQrCodeMethod}
             qrProcess={qrProcess}
             currentOption={currentOption}
             setOption={setCurrentOption}
             onQrCodeScanned={onQrCodeScanned}
-            setCurrentStep={setCurrentStep}
             onCreateKey={onCreateKey}
           />
         </Flex>

diff --git a/...dger-live-mobile/src/newArch/features/WalletSync/screens/Activation/ActivationSuccess.tsx b/...dger-live-mobile/src/newArch/features/WalletSync/screens/Activation/ActivationSuccess.tsx
@@ -17,6 +17,9 @@ import { BaseNavigatorStackParamList } from "~/components/RootNavigator/types/Ba
 import { setFromLedgerSyncOnboarding } from "~/actions/settings";
 import { AnalyticsButton, AnalyticsFlow, AnalyticsPage } from "../../hooks/useLedgerSyncAnalytics";
 import { track } from "~/analytics";
+import { setLedgerSyncActivateDrawer } from "~/actions/walletSync";
+import { Steps } from "../../types/Activation";
+import { useCurrentStep } from "../../hooks/useCurrentStep";
 
 type Props = BaseComposite<
   StackNavigatorProps<WalletSyncNavigatorStackParamList, ScreenName.WalletSyncSuccess>
@@ -30,6 +33,7 @@ export function ActivationSuccess({ navigation, route }: Props) {
   const desc = created ? "walletSync.success.activationDesc" : "walletSync.success.syncDesc";
   const page = created ? AnalyticsPage.BackupCreationSuccess : AnalyticsPage.SyncSuccess;
   const dispatch = useDispatch();
+  const { setCurrentStep } = useCurrentStep();
 
   const navigationOnbarding =
     useNavigation<RootNavigationComposite<StackNavigatorNavigation<BaseNavigatorStackParamList>>>();
@@ -40,7 +44,14 @@ export function ActivationSuccess({ navigation, route }: Props) {
       page,
       flow: AnalyticsFlow.LedgerSync,
     });
-    navigation.navigate(ScreenName.WalletSyncActivationProcess);
+    if (isFromLedgerSyncOnboarding) {
+      dispatch(setFromLedgerSyncOnboarding(false));
+    }
+    setCurrentStep(Steps.QrCodeMethod);
+    navigation.navigate(NavigatorName.Settings, {
+      screen: ScreenName.GeneralSettings,
+    });
+    dispatch(setLedgerSyncActivateDrawer(true));
   }
 
   function close(): void {