✨feat(llm): change walletsync to ledgersync for tracking

LedgerHQ · Aug 5, 2024 · 01ad9ab · 01ad9ab
1 parent 1e62744
commit 01ad9ab
Show file tree

Hide file tree

Showing 15 changed files with 104 additions and 114 deletions.
diff --git a/apps/ledger-live-mobile/.unimportedrc.json b/apps/ledger-live-mobile/.unimportedrc.json
@@ -17,7 +17,9 @@
     "src/contentCards/cards/vertical/*",
     "src/**/__integrations__/*.tsx",
     "src/MobileStorageProvider.ts",
-    "src/newArch/components/Dummy/*.tsx"
+    "src/newArch/features/WalletSync/components/Error/index.tsx",
+    "src/newArch/features/WalletSync/screens/Synchronize/PinCodeDisplay.tsx",
+    "src/newArch/features/WalletSync/screens/Synchronize/PinCodeInput.tsx"
   ],
   "ignoreUnused": [
     "@react-native-masked-view/masked-view",

diff --git a/apps/ledger-live-mobile/src/newArch/components/Dummy/Drawer.tsx b/apps/ledger-live-mobile/src/newArch/components/Dummy/Drawer.tsx
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
@@ -5,7 +5,7 @@ import QrCodeMethod from "LLM/features/WalletSync/screens/Synchronize/QrCodeMeth
 import { TrackScreen } from "~/analytics";
 import { CryptoCurrency, TokenCurrency } from "@ledgerhq/types-cryptoassets";
 import { Steps } from "../../../types/enum/addAccount";
-import { AnalyticsPage } from "LLM/features/WalletSync/hooks/useWalletSyncAnalytics";
+import { AnalyticsPage } from "LLM/features/WalletSync/hooks/useLedgerSyncAnalytics";
 
 type Props = {
   startingStep: Steps;

diff --git a/apps/ledger-live-mobile/src/newArch/features/WalletSync/components/Activation/Actions.tsx b/apps/ledger-live-mobile/src/newArch/features/WalletSync/components/Activation/Actions.tsx
@@ -2,11 +2,11 @@ import React from "react";
 import { Flex, Button, Link } from "@ledgerhq/native-ui";
 import { useTranslation } from "react-i18next";
 import {
-  useWalletSyncAnalytics,
+  useLedgerSyncAnalytics,
   AnalyticsButton,
   AnalyticsPage,
   AnalyticsFlow,
-} from "LLM/features/WalletSync/hooks/useWalletSyncAnalytics";
+} from "LLM/features/WalletSync/hooks/useLedgerSyncAnalytics";
 
 type Props = {
   onPressSyncAccounts: () => void;
@@ -15,22 +15,22 @@ type Props = {
 
 const Actions = ({ onPressSyncAccounts, onPressHasAlreadyCreatedAKey }: Props) => {
   const { t } = useTranslation();
-  const { onClickTrack } = useWalletSyncAnalytics();
+  const { onClickTrack } = useLedgerSyncAnalytics();
 
   const onPressSync = () => {
     onClickTrack({
       button: AnalyticsButton.SyncYourAccounts,
-      page: AnalyticsPage.ActivateWalletSync,
-      flow: AnalyticsFlow.WalletSync,
+      page: AnalyticsPage.ActivateLedgerSync,
+      flow: AnalyticsFlow.LedgerSync,
     });
     onPressSyncAccounts();
   };
 
   const onPressHasAlreadyAKey = () => {
     onClickTrack({
       button: AnalyticsButton.AlreadyCreatedKey,
-      page: AnalyticsPage.ActivateWalletSync,
-      flow: AnalyticsFlow.WalletSync,
+      page: AnalyticsPage.ActivateLedgerSync,
+      flow: AnalyticsFlow.LedgerSync,
     });
     onPressHasAlreadyCreatedAKey();
   };

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
@@ -4,24 +4,25 @@ import { TrackScreen } from "~/analytics";
 import ChooseSyncMethod from "../../screens/Synchronize/ChooseMethod";
 import QrCodeMethod from "../../screens/Synchronize/QrCodeMethod";
 import { Steps } from "../../types/Activation";
-import useActivationFlowModel from "./useActivationFlowModel";
-import { AnalyticsPage } from "../../hooks/useWalletSyncAnalytics";
-
-type ViewProps = ReturnType<typeof useActivationFlowModel>;
+import { AnalyticsPage } from "../../hooks/useLedgerSyncAnalytics";
 
 type Props = {
-  startingStep: Steps;
-  onStepChange?: (step: Steps) => void;
-  onGoBack?: (callback: () => void) => void;
+  currentStep: Steps;
+  navigateToChooseSyncMethod: () => void;
+  navigateToQrCodeMethod: () => void;
 };
 
-function View({ currentStep, navigateToChooseSyncMethod, navigateToQrCodeMethod }: ViewProps) {
+const ActivationFlow = ({
+  currentStep,
+  navigateToChooseSyncMethod,
+  navigateToQrCodeMethod,
+}: Props) => {
   const getScene = () => {
     switch (currentStep) {
       case Steps.Activation:
         return (
           <>
-            <TrackScreen category={AnalyticsPage.ActivateWalletSync} />
+            <TrackScreen category={AnalyticsPage.ActivateLedgerSync} />
             <Activation onSyncMethodPress={navigateToChooseSyncMethod} />
           </>
         );
@@ -40,10 +41,6 @@ function View({ currentStep, navigateToChooseSyncMethod, navigateToQrCodeMethod
   };
 
   return getScene();
-}
-
-const ActivationFlow = (props: Props) => {
-  return <View {...useActivationFlowModel(props)} />;
 };
 
 export default ActivationFlow;
diff --git a/...-live-mobile/src/newArch/features/WalletSync/components/ManageInstances/DeletionError.tsx b/...-live-mobile/src/newArch/features/WalletSync/components/ManageInstances/DeletionError.tsx
@@ -2,10 +2,10 @@ import React from "react";
 import { Box, Icons, Flex, Text, Button, Link } from "@ledgerhq/native-ui";
 import { useTranslation } from "react-i18next";
 import {
-  useWalletSyncAnalytics,
+  useLedgerSyncAnalytics,
   AnalyticsButton,
   AnalyticsPage,
-} from "../../hooks/useWalletSyncAnalytics";
+} from "../../hooks/useLedgerSyncAnalytics";
 import styled, { useTheme } from "styled-components/native";
 import TrackScreen from "~/analytics/TrackScreen";
 
@@ -32,7 +32,7 @@ type Props = {
 };
 
 export const DeletionError = ({ error, tryAgain, goToDelete, understood }: Props) => {
-  const { onClickTrack } = useWalletSyncAnalytics();
+  const { onClickTrack } = useLedgerSyncAnalytics();
 
   const onTryAgain = () => {
     tryAgain?.();

diff --git a/...alletSync/hooks/useWalletSyncAnalytics.ts → ...alletSync/hooks/useLedgerSyncAnalytics.ts b/...alletSync/hooks/useWalletSyncAnalytics.ts → ...alletSync/hooks/useLedgerSyncAnalytics.ts
@@ -1,7 +1,7 @@
 import { track } from "~/analytics";
 
 export enum AnalyticsPage {
-  ActivateWalletSync = "Activate Wallet Sync",
+  ActivateLedgerSync = "Activate Ledger Sync",
   ChooseSyncMethod = "Choose sync method",
   BackupCreationSuccess = "Backup creation success",
   ScanQRCode = "Scan QR code",
@@ -16,12 +16,12 @@ export enum AnalyticsPage {
   ManageBackup = "Manage backup",
   ConfirmDeleteBackup = "Confirm delete backup",
   SyncWithNoKey = "Sync with no key",
-  WalletSyncActivated = "Wallet Sync activated",
+  LedgerSyncActivated = "Ledger Sync activated",
   AutoRemove = "Remove current instance",
 }
 
 export enum AnalyticsFlow {
-  WalletSync = "Wallet Sync",
+  LedgerSync = "Ledger Sync",
 }
 
 export enum AnalyticsButton {
@@ -53,8 +53,8 @@ type OnClickTrack = {
   flow?: (typeof AnalyticsFlow)[keyof typeof AnalyticsFlow];
 };
 
-export function useWalletSyncAnalytics() {
-  const onClickTrack = ({ button, page, flow = AnalyticsFlow.WalletSync }: OnClickTrack) => {
+export function useLedgerSyncAnalytics() {
+  const onClickTrack = ({ button, page, flow = AnalyticsFlow.LedgerSync }: OnClickTrack) => {
     track("button_clicked", { button, page, flow });
   };
 

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
@@ -1,60 +1,60 @@
-import React, { useState } from "react";
+import React from "react";
 import QueuedDrawer from "LLM/components/QueuedDrawer";
 import { TrackScreen } from "~/analytics";
 import { useWindowDimensions } from "react-native";
 import { Flex } from "@ledgerhq/native-ui";
 import ActivationFlow from "../../components/Activation/ActivationFlow";
 import { Steps } from "../../types/Activation";
 import DrawerHeader from "../../components/Synchronize/DrawerHeader";
+import useActivationDrawerModel from "./useActivationDrawerModel";
+
+type ViewProps = ReturnType<typeof useActivationDrawerModel>;
 
 type Props = {
   isOpen: boolean;
   startingStep: Steps;
   handleClose: () => void;
 };
 
-const ActivationDrawer = ({ isOpen, startingStep, handleClose }: Props) => {
-  const [currentStep, setCurrentStep] = useState<Steps>(startingStep);
+function View({
+  isOpen,
+  currentStep,
+  hasCustomHeader,
+  canGoBack,
+  navigateToChooseSyncMethod,
+  navigateToQrCodeMethod,
+  goBackToPreviousStep,
+  handleClose,
+  onCloseDrawer,
+}: ViewProps) {
   const { height } = useWindowDimensions();
   const maxDrawerHeight = height - 180;
-
   const CustomDrawerHeader = () => <DrawerHeader onClose={handleClose} />;
 
-  const handleStepChange = (step: Steps) => setCurrentStep(step);
-
-  let goBackCallback: () => void;
-
-  const hasCustomHeader = currentStep === Steps.QrCodeMethod && startingStep === Steps.Activation;
-
-  const canGoBack = currentStep === Steps.ChooseSyncMethod && startingStep === Steps.Activation;
-
-  const resetStep = () => setCurrentStep(startingStep);
-
-  const onClose = () => {
-    resetStep();
-    handleClose();
-  };
-
   return (
     <>
       <TrackScreen />
       <QueuedDrawer
         isRequestingToBeOpened={isOpen}
-        onClose={onClose}
+        onClose={onCloseDrawer}
         CustomHeader={hasCustomHeader ? CustomDrawerHeader : undefined}
         hasBackButton={canGoBack}
-        onBack={() => goBackCallback()}
+        onBack={goBackToPreviousStep}
       >
         <Flex maxHeight={maxDrawerHeight}>
           <ActivationFlow
-            startingStep={currentStep}
-            onStepChange={handleStepChange}
-            onGoBack={callback => (goBackCallback = callback)}
+            currentStep={currentStep}
+            navigateToChooseSyncMethod={navigateToChooseSyncMethod}
+            navigateToQrCodeMethod={navigateToQrCodeMethod}
           />
         </Flex>
       </QueuedDrawer>
     </>
   );
+}
+
+const ActivationDrawer = (props: Props) => {
+  return <View {...useActivationDrawerModel(props)} />;
 };
 
 export default ActivationDrawer;
diff --git a/...nts/Activation/useActivationFlowModel.tsx → ...ns/Activation/useActivationDrawerModel.ts b/...nts/Activation/useActivationFlowModel.tsx → ...ns/Activation/useActivationDrawerModel.ts
@@ -1,34 +1,23 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useState } from "react";
 import { Steps } from "../../types/Activation";
 import {
   AnalyticsButton,
   AnalyticsPage,
-  useWalletSyncAnalytics,
-} from "../../hooks/useWalletSyncAnalytics";
+  useLedgerSyncAnalytics,
+} from "../../hooks/useLedgerSyncAnalytics";
 
-type UseActivationFlowProps = {
+type Props = {
+  isOpen: boolean;
   startingStep: Steps;
-  onStepChange?: (step: Steps) => void;
-  onGoBack?: (callback: () => void) => void;
+  handleClose: () => void;
 };
 
-const useActivationFlow = ({ startingStep, onStepChange, onGoBack }: UseActivationFlowProps) => {
+const useActivationDrawerModel = ({ isOpen, startingStep, handleClose }: Props) => {
+  const { onClickTrack } = useLedgerSyncAnalytics();
   const [currentStep, setCurrentStep] = useState<Steps>(startingStep);
-  const { onClickTrack } = useWalletSyncAnalytics();
 
-  useEffect(() => {
-    if (onStepChange) onStepChange(currentStep);
-  }, [currentStep, onStepChange]);
-
-  const navigateToChooseSyncMethod = () => setCurrentStep(Steps.ChooseSyncMethod);
-
-  const navigateToQrCodeMethod = () => {
-    onClickTrack({
-      button: AnalyticsButton.ScanQRCode,
-      page: AnalyticsPage.ChooseSyncMethod,
-    });
-    setCurrentStep(Steps.QrCodeMethod);
-  };
+  const hasCustomHeader = currentStep === Steps.QrCodeMethod && startingStep === Steps.Activation;
+  const canGoBack = currentStep === Steps.ChooseSyncMethod && startingStep === Steps.Activation;
 
   const getPreviousStep = useCallback(
     (step: Steps): Steps => {
@@ -44,15 +33,35 @@ const useActivationFlow = ({ startingStep, onStepChange, onGoBack }: UseActivati
     [startingStep],
   );
 
-  useEffect(() => {
-    if (onGoBack) onGoBack(() => setCurrentStep(prevStep => getPreviousStep(prevStep)));
-  }, [getPreviousStep, onGoBack]);
+  const navigateToChooseSyncMethod = () => setCurrentStep(Steps.ChooseSyncMethod);
+
+  const navigateToQrCodeMethod = () => {
+    onClickTrack({
+      button: AnalyticsButton.ScanQRCode,
+      page: AnalyticsPage.ChooseSyncMethod,
+    });
+    setCurrentStep(Steps.QrCodeMethod);
+  };
+
+  const resetStep = () => setCurrentStep(startingStep);
+  const goBackToPreviousStep = () => setCurrentStep(getPreviousStep(currentStep));
+
+  const onCloseDrawer = () => {
+    resetStep();
+    handleClose();
+  };
 
   return {
+    isOpen,
     currentStep,
+    hasCustomHeader,
+    canGoBack,
     navigateToChooseSyncMethod,
     navigateToQrCodeMethod,
+    onCloseDrawer,
+    handleClose,
+    goBackToPreviousStep,
   };
 };
 
-export default useActivationFlow;
+export default useActivationDrawerModel;
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
@@ -6,8 +6,8 @@ import styled from "styled-components";
 import {
   AnalyticsButton,
   AnalyticsPage,
-  useWalletSyncAnalytics,
-} from "../../hooks/useWalletSyncAnalytics";
+  useLedgerSyncAnalytics,
+} from "../../hooks/useLedgerSyncAnalytics";
 import { Separator } from "../../components/Separator";
 import { TouchableOpacity } from "react-native";
 import { TrustchainNotFound } from "../../hooks/useGetMembers";
@@ -24,24 +24,24 @@ const WalletSyncManage = () => {
 
   const { data, isLoading, isError, error } = manageInstancesHook.memberHook;
 
-  const { onClickTrack } = useWalletSyncAnalytics();
+  const { onClickTrack } = useLedgerSyncAnalytics();
 
   const goToSync = () => {
     //dispatch(setFlow({ flow: Flow.Synchronize, step: Step.SynchronizeMode }));
 
-    onClickTrack({ button: AnalyticsButton.Synchronize, page: AnalyticsPage.WalletSyncActivated });
+    onClickTrack({ button: AnalyticsButton.Synchronize, page: AnalyticsPage.LedgerSyncActivated });
   };
 
   const goToManageBackup = () => {
     manageKeyHook.openDrawer();
-    onClickTrack({ button: AnalyticsButton.ManageKey, page: AnalyticsPage.WalletSyncActivated });
+    onClickTrack({ button: AnalyticsButton.ManageKey, page: AnalyticsPage.LedgerSyncActivated });
   };
 
   const goToManageInstances = () => {
     manageInstancesHook.openDrawer();
     onClickTrack({
       button: AnalyticsButton.ManageSynchronizations,
-      page: AnalyticsPage.WalletSyncActivated,
+      page: AnalyticsPage.LedgerSyncActivated,
     });
   };