Rework Hook

LedgerHQ · Aug 7, 2024 · 1a0e61b · 1a0e61b
1 parent e2f1b44
commit 1a0e61b
Show file tree

Hide file tree

Showing 8 changed files with 112 additions and 72 deletions.
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
@@ -1,56 +1,42 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React from "react";
 import SelectAddAccountMethod from "./SelectAddAccountMethod";
 import ChooseSyncMethod from "LLM/features/WalletSync/screens/Synchronize/ChooseMethod";
 import QrCodeMethod from "LLM/features/WalletSync/screens/Synchronize/QrCodeMethod";
 import { TrackScreen } from "~/analytics";
 import { CryptoCurrency, TokenCurrency } from "@ledgerhq/types-cryptoassets";
-import { Steps } from "../../../types/enum/addAccount";
 import { AnalyticsPage } from "LLM/features/WalletSync/hooks/useLedgerSyncAnalytics";
-import { Options } from "LLM/features/WalletSync/types/Activation";
+import { Options, Steps } from "LLM/features/WalletSync/types/Activation";
+import SyncError from "LLM/features/WalletSync/screens/Synchronize/SyncError";
+import PinCodeDisplay from "LLM/features/WalletSync/screens/Synchronize/PinCodeDisplay";
+import PinCodeInput from "LLM/features/WalletSync/screens/Synchronize/PinCodeInput";
 
 type Props = {
-  startingStep: Steps;
+  currentStep: Steps;
   currency?: CryptoCurrency | TokenCurrency | null;
   doesNotHaveAccount?: boolean;
-  onStepChange?: (step: Steps) => void;
-  onGoBack?: (callback: () => void) => void;
+  setCurrentStep: (step: Steps) => void;
+  setCurrentOption: (option: Options) => void;
+  currentOption: Options;
+  navigateToChooseSyncMethod: () => void;
+  navigateToQrCodeMethod: () => void;
+  qrProcess: {
+    url: string | null;
+    error: Error | null;
+    isLoading: boolean;
+    pinCode: string | null;
+  };
 };
 
 const StepFlow = ({
-  startingStep,
   doesNotHaveAccount,
   currency,
-  onGoBack,
-  onStepChange,
+  currentStep,
+  setCurrentOption,
+  currentOption,
+  navigateToChooseSyncMethod,
+  navigateToQrCodeMethod,
+  qrProcess,
 }: Props) => {
-  const [currentStep, setCurrentStep] = useState<Steps>(startingStep);
-  const [currentOption, setCurrentOption] = useState<Options>(Options.SCAN);
-
-  useEffect(() => {
-    if (onStepChange) onStepChange(currentStep);
-  }, [currentStep, onStepChange]);
-
-  const navigateToChooseSyncMethod = () => setCurrentStep(Steps.ChooseSyncMethod);
-  const navigateToQrCodeMethod = () => setCurrentStep(Steps.QrCodeMethod);
-
-  const getPreviousStep = useCallback(
-    (step: Steps): Steps => {
-      switch (step) {
-        case Steps.QrCodeMethod:
-          return Steps.ChooseSyncMethod;
-        case Steps.ChooseSyncMethod:
-          return Steps.AddAccountMethod;
-        default:
-          return startingStep;
-      }
-    },
-    [startingStep],
-  );
-
-  useEffect(() => {
-    if (onGoBack) onGoBack(() => setCurrentStep(prevStep => getPreviousStep(prevStep)));
-  }, [getPreviousStep, onGoBack]);
-
   const getScene = () => {
     switch (currentStep) {
       case Steps.AddAccountMethod:
@@ -72,7 +58,17 @@ const StepFlow = ({
           </>
         );
       case Steps.QrCodeMethod:
-        return <QrCodeMethod setSelectedOption={setCurrentOption} currentOption={currentOption} />;
+        return <QrCodeMethod currentOption={currentOption} setSelectedOption={setCurrentOption} />;
+
+      case Steps.PinDisplay:
+        return qrProcess.pinCode ? <PinCodeDisplay pinCode={qrProcess.pinCode} /> : null;
+
+      case Steps.PinInput:
+        return <PinCodeInput />;
+
+      case Steps.SyncError:
+        return <SyncError tryAgain={navigateToQrCodeMethod} />;
+
       default:
         return null;
     }

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
@@ -1,11 +1,11 @@
-import React, { useState } from "react";
+import React from "react";
 import useAddAccountViewModel from "./useAddAccountViewModel";
 import QueuedDrawer from "~/components/QueuedDrawer";
 import { CryptoCurrency, TokenCurrency } from "@ledgerhq/types-cryptoassets";
 import DrawerHeader from "LLM/features/WalletSync/components/Synchronize/DrawerHeader";
 import { Flex } from "@ledgerhq/native-ui";
 import StepFlow from "./components/StepFlow";
-import { Steps } from "../../types/enum/addAccount";
+import { Steps } from "LLM/features/WalletSync/types/Activation";
 
 type ViewProps = ReturnType<typeof useAddAccountViewModel> & AddAccountProps;
 
@@ -16,37 +16,41 @@ type AddAccountProps = {
   onClose: () => void;
 };
 
-const StartingStep = Steps.AddAccountMethod;
-
 function View({
   isAddAccountDrawerVisible,
   doesNotHaveAccount,
   currency,
   onCloseAddAccountDrawer,
+  currentStep,
+  onGoBack,
+  currentOption,
+  setCurrentStep,
+  setCurrentOption,
+  navigateToChooseSyncMethod,
+  navigateToQrCodeMethod,
+  qrProcess,
 }: ViewProps) {
-  const [currentStep, setCurrentStep] = useState<Steps>(StartingStep);
-
   const CustomDrawerHeader = () => <DrawerHeader onClose={onCloseAddAccountDrawer} />;
 
-  const handleStepChange = (step: Steps) => setCurrentStep(step);
-
-  let goBackCallback: () => void;
-
   return (
     <QueuedDrawer
       isRequestingToBeOpened={isAddAccountDrawerVisible}
       onClose={onCloseAddAccountDrawer}
       CustomHeader={currentStep === Steps.QrCodeMethod ? CustomDrawerHeader : undefined}
       hasBackButton={currentStep === Steps.ChooseSyncMethod}
-      onBack={() => goBackCallback()}
+      onBack={onGoBack}
     >
       <Flex maxHeight={"90%"}>
         <StepFlow
-          startingStep={StartingStep}
           doesNotHaveAccount={doesNotHaveAccount}
           currency={currency}
-          onStepChange={handleStepChange}
-          onGoBack={callback => (goBackCallback = callback)}
+          currentStep={currentStep}
+          setCurrentStep={setCurrentStep}
+          setCurrentOption={setCurrentOption}
+          currentOption={currentOption}
+          navigateToChooseSyncMethod={navigateToChooseSyncMethod}
+          navigateToQrCodeMethod={navigateToQrCodeMethod}
+          qrProcess={qrProcess}
         />
       </Flex>
     </QueuedDrawer>

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,12 +1,40 @@
-import { useCallback } from "react";
+import { useCallback, useState } from "react";
 import { track } from "~/analytics";
+import { useQRCodeHost } from "~/newArch/features/WalletSync/hooks/useQRCodeHost";
+import { Options, Steps } from "~/newArch/features/WalletSync/types/Activation";
 
 type AddAccountDrawerProps = {
   isOpened: boolean;
   onClose: () => void;
 };
 
+const startingStep = Steps.AddAccountMethod;
+
 const useAddAccountViewModel = ({ isOpened, onClose }: AddAccountDrawerProps) => {
+  const [currentStep, setCurrentStep] = useState<Steps>(startingStep);
+  const [currentOption, setCurrentOption] = useState<Options>(Options.SCAN);
+
+  const navigateToChooseSyncMethod = () => setCurrentStep(Steps.ChooseSyncMethod);
+  const navigateToQrCodeMethod = () => setCurrentStep(Steps.QrCodeMethod);
+
+  const onGoBack = () => setCurrentStep(prevStep => getPreviousStep(prevStep));
+
+  const reset = () => {
+    setCurrentStep(startingStep);
+    setCurrentOption(Options.SCAN);
+  };
+
+  const getPreviousStep = useCallback((step: Steps): Steps => {
+    switch (step) {
+      case Steps.QrCodeMethod:
+        return Steps.ChooseSyncMethod;
+      case Steps.ChooseSyncMethod:
+        return Steps.AddAccountMethod;
+      default:
+        return startingStep;
+    }
+  }, []);
+
   const trackButtonClick = useCallback((button: string) => {
     track("button_clicked", {
       button,
@@ -17,11 +45,31 @@ const useAddAccountViewModel = ({ isOpened, onClose }: AddAccountDrawerProps) =>
   const onCloseAddAccountDrawer = useCallback(() => {
     trackButtonClick("Close 'x'");
     onClose();
+    reset();
   }, [trackButtonClick, onClose]);
 
+  const { url, error, isLoading, pinCode } = useQRCodeHost({
+    setCurrentStep,
+    currentStep,
+    currentOption,
+  });
+
   return {
     isAddAccountDrawerVisible: isOpened,
     onCloseAddAccountDrawer,
+    navigateToQrCodeMethod,
+    navigateToChooseSyncMethod,
+    currentStep,
+    setCurrentOption,
+    currentOption,
+    setCurrentStep,
+    onGoBack,
+    qrProcess: {
+      url,
+      error,
+      isLoading,
+      pinCode,
+    },
   };
 };
 

diff --git a/apps/ledger-live-mobile/src/newArch/features/Accounts/types/enum/addAccount.ts b/apps/ledger-live-mobile/src/newArch/features/Accounts/types/enum/addAccount.ts
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
@@ -6,9 +6,7 @@ import { trustchainSelector, memberCredentialsSelector } from "@ledgerhq/trustch
 import { useTrustchainSdk } from "./useTrustchainSdk";
 import { Options, Steps } from "../types/Activation";
 import { useNavigation } from "@react-navigation/native";
-import { WalletSyncNavigatorStackParamList } from "~/components/RootNavigator/types/WalletSyncNavigator";
-import { StackNavigatorNavigation } from "~/components/RootNavigator/types/helpers";
-import { ScreenName } from "~/const";
+import { NavigatorName, ScreenName } from "~/const";
 import { useFeature } from "@ledgerhq/live-common/featureFlags/index";
 import getWalletSyncEnvironmentParams from "@ledgerhq/live-common/walletSync/getEnvironmentParams";
 
@@ -33,7 +31,7 @@ export function useQRCodeHost({ setCurrentStep, currentStep, currentOption }: Pr
   const [error, setError] = useState<Error | null>(null);
   const [pinCode, setPinCode] = useState<string | null>(null);
 
-  const navigation = useNavigation<StackNavigatorNavigation<WalletSyncNavigatorStackParamList>>();
+  const navigation = useNavigation();
 
   const startQRCodeProcessing = useCallback(() => {
     if (!trustchain || !memberCredentials || isLoading) return;
@@ -70,8 +68,11 @@ export function useQRCodeHost({ setCurrentStep, currentStep, currentOption }: Pr
       })
       .then(() => {
         if (!error && hasCompleted)
-          navigation.navigate(ScreenName.WalletSyncSuccess, {
-            created: false,
+          navigation.navigate(NavigatorName.WalletSync, {
+            screen: ScreenName.WalletSyncSuccess,
+            params: {
+              created: false,
+            },
           });
       })
       .finally(() => {

diff --git a/...ive-mobile/src/newArch/features/WalletSync/screens/Activation/useActivationDrawerModel.ts b/...ive-mobile/src/newArch/features/WalletSync/screens/Activation/useActivationDrawerModel.ts
@@ -19,10 +19,7 @@ const useActivationDrawerModel = ({ isOpen, startingStep, handleClose }: Props)
   const [currentStep, setCurrentStep] = useState<Steps>(startingStep);
   const [currentOption, setCurrentOption] = useState<Options>(Options.SCAN);
 
-  const hasCustomHeader = useMemo(
-    () => currentStep === Steps.QrCodeMethod && startingStep === Steps.Activation,
-    [currentStep, startingStep],
-  );
+  const hasCustomHeader = useMemo(() => currentStep === Steps.QrCodeMethod, [currentStep]);
   const canGoBack = useMemo(
     () => currentStep === Steps.ChooseSyncMethod && startingStep === Steps.Activation,
     [currentStep, startingStep],

diff --git a/apps/ledger-live-mobile/src/newArch/features/WalletSync/screens/Manage/index.tsx b/apps/ledger-live-mobile/src/newArch/features/WalletSync/screens/Manage/index.tsx
@@ -35,10 +35,7 @@ const WalletSyncManage = () => {
     onClickTrack({ button: AnalyticsButton.Synchronize, page: AnalyticsPage.LedgerSyncActivated });
   };
 
-  const closeSyncDrawer = () => {
-    setIsSyncDrawerOpen(false);
-    onClickTrack({ button: AnalyticsButton.Synchronize, page: AnalyticsPage.LedgerSyncActivated });
-  };
+  const closeSyncDrawer = () => setIsSyncDrawerOpen(false);
 
   const goToManageBackup = () => {
     manageKeyHook.openDrawer();

diff --git a/apps/ledger-live-mobile/src/newArch/features/WalletSync/types/Activation.ts b/apps/ledger-live-mobile/src/newArch/features/WalletSync/types/Activation.ts
@@ -6,6 +6,8 @@ export enum Options {
 export type OptionsType = Options.SCAN | Options.SHOW_QR;
 
 export enum Steps {
+  AddAccountMethod = "AddAccountMethod",
+
   Activation = "Activation",
   ChooseSyncMethod = "ChooseSyncMethod",
   QrCodeMethod = "QrCodeMethod",