✨feat(llm): show WS qr code / pincode (#7467)

* ✨feat(llm): show WS qr code

* ✨feat(llm): add tabSelector to UI lib

* ✨feat(llm): import account flow change

* ✨feat(llm): add back arrow to queued drawer

* ✨feat(llm): rework activation flow

* ✨feat(llm): add analytics to WS flow

* ✨feat(llm): clean

* [FEAT]: PinCode Display / Input / error (#7492)

* [FEAT]: PinCode Display and Input

* [FEAT]: Error component

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

* ✨feat(llm): add qr code drawer from manage ws

* ✨feat(llm): refactor of ws setting inte test

* ✨feat(llm): fix color

* ✨feat(llm): name size const for qr code

---------

Co-authored-by: Martin CAYUELAS <[email protected]>

.changeset/good-students-drop.md

@@ -0,0 +1,6 @@
+---
+"live-mobile": patch
+"@ledgerhq/native-ui": patch
+---
+
+Add the show qr code implementation for WS flow. Create tabSelector in RN UI Lib

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",

apps/ledger-live-mobile/jest.config.js

@@ -18,6 +18,7 @@ const transformIncludePatterns = [
   "react-native-ble-plx",
   "react-native-android-location-services-dialog-box",
   "react-native-vector-icons",
+  "react-native-qrcode-svg",
 ];
 
 /** @type {import('ts-jest').JestConfigWithTsJest} */

apps/ledger-live-mobile/src/locales/en/common.json

@@ -6792,6 +6792,31 @@
         "connectDevice": {
           "title": "Use your Ledger"
         }
+      },
+      "qrCode": {
+        "show": {
+          "title": "Show QR",
+          "explanation": {
+            "title": "Scan and synchronize your accounts using another Ledger Live app",
+            "steps": {
+              "step1": "Open the Ledger Live app you want to sync",
+              "step2": "Go to <0>Settings</0> <1>></1> <0>General</0> <1>></1> <0>Ledger Sync</0> <1>></1> <0>Synchronize</0>",
+              "step3": "Scan QR code until loader hits 100%."
+            }
+          }
+        },
+        "scan": {
+          "title": "Scan"
+        },
+        "pinCode": {
+          "title": "Enter your code",
+          "desc": "Type the code displayed on the Ledger Live you want to sync with.",
+          "error": {
+            "title": "Codes do not match",
+            "desc": "Make sure the code you type is the one displayed on the other Ledger Live instance.",
+            "tryAgain": "Try again"
+          }
+        }
       }
     }
   },

apps/ledger-live-mobile/src/newArch/components/QueuedDrawer/index.tsx

@@ -63,6 +63,8 @@ const QueuedDrawer = ({
   isRequestingToBeOpened = false,
   isForcingToBeOpened = false,
   onClose,
+  onBack,
+  hasBackButton,
   onModalHide,
   noCloseButton,
   preventBackdropClick,
@@ -150,6 +152,8 @@ const QueuedDrawer = ({
       preventBackdropClick={areDrawersLocked || preventBackdropClick}
       onClose={handleCloseUserEvent}
       onModalHide={handleModalHide}
+      onBack={onBack}
+      hasBackButton={hasBackButton}
       noCloseButton={areDrawersLocked || noCloseButton}
       modalStyle={style}
       containerStyle={containerStyle}

apps/ledger-live-mobile/src/newArch/features/Accounts/__integrations__/addAccount.integration.test.tsx

@@ -95,6 +95,7 @@ describe("AddAccount", () => {
       await user.press(await screen.getByText(/import via another ledger live app/i));
     });
     await expect(await screen.findByText(/choose your sync method/i)).toBeVisible();
+    await expect(await screen.findByText(/Scan a QR code/i));
   });
 
   /**====== Import from desktop Test =======*/

apps/ledger-live-mobile/src/newArch/features/Accounts/__integrations__/shared.tsx

@@ -14,7 +14,6 @@ const MockComponent = () => {
 
   const openAddModal = () => setAddModalOpened(true);
   const closeAddModal = () => setAddModalOpened(false);
-  const reopenAddModal = () => setAddModalOpened(true);
 
   return (
     <>
@@ -30,11 +29,7 @@ const MockComponent = () => {
       >
         {t("portfolio.emptyState.buttons.import")}
       </Button>
-      <AddAccountDrawer
-        isOpened={isAddModalOpened}
-        onClose={closeAddModal}
-        reopenDrawer={reopenAddModal}
-      />
+      <AddAccountDrawer isOpened={isAddModalOpened} onClose={closeAddModal} />
     </>
   );
 };

apps/ledger-live-mobile/src/newArch/features/Accounts/screens/AddAccount/components/StepFlow.tsx

@@ -0,0 +1,82 @@
+import React, { useCallback, useEffect, useState } 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";
+
+type Props = {
+  startingStep: Steps;
+  currency?: CryptoCurrency | TokenCurrency | null;
+  doesNotHaveAccount?: boolean;
+  onStepChange?: (step: Steps) => void;
+  onGoBack?: (callback: () => void) => void;
+};
+
+const StepFlow = ({
+  startingStep,
+  doesNotHaveAccount,
+  currency,
+  onGoBack,
+  onStepChange,
+}: Props) => {
+  const [currentStep, setCurrentStep] = useState<Steps>(startingStep);
+
+  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:
+        return (
+          <>
+            <TrackScreen category="Add/Import accounts" type="drawer" />
+            <SelectAddAccountMethod
+              doesNotHaveAccount={doesNotHaveAccount}
+              currency={currency}
+              setWalletSyncDrawerVisible={navigateToChooseSyncMethod}
+            />
+          </>
+        );
+      case Steps.ChooseSyncMethod:
+        return (
+          <>
+            <TrackScreen category={AnalyticsPage.ChooseSyncMethod} type="drawer" />
+            <ChooseSyncMethod onScanMethodPress={navigateToQrCodeMethod} />
+          </>
+        );
+      case Steps.QrCodeMethod:
+        return <QrCodeMethod />;
+      default:
+        return null;
+    }
+  };
+
+  return getScene();
+};
+
+export default StepFlow;

apps/ledger-live-mobile/src/newArch/features/Accounts/screens/AddAccount/index.tsx

@@ -1,60 +1,55 @@
-import React from "react";
+import React, { useState } from "react";
 import useAddAccountViewModel from "./useAddAccountViewModel";
 import QueuedDrawer from "~/components/QueuedDrawer";
-import { TrackScreen } from "~/analytics";
-import SelectAddAccountMethod from "./components/SelectAddAccountMethod";
 import { CryptoCurrency, TokenCurrency } from "@ledgerhq/types-cryptoassets";
-import ChooseSyncMethod from "LLM/features/WalletSync/screens/Synchronize/ChooseMethod";
+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";
 
-type ViewProps = {
-  isAddAccountDrawerVisible: boolean;
-  doesNotHaveAccount?: boolean;
-  currency?: CryptoCurrency | TokenCurrency | null;
-  isWalletSyncDrawerVisible: boolean;
-  onCloseAddAccountDrawer: () => void;
-  reopenDrawer: () => void;
-  onRequestToOpenWalletSyncDrawer: () => void;
-  onCloseWalletSyncDrawer: () => void;
-};
+type ViewProps = ReturnType<typeof useAddAccountViewModel> & AddAccountProps;
 
 type AddAccountProps = {
   isOpened: boolean;
   currency?: CryptoCurrency | TokenCurrency | null;
   doesNotHaveAccount?: boolean;
   onClose: () => void;
-  reopenDrawer: () => void;
 };
 
+const StartingStep = Steps.AddAccountMethod;
+
 function View({
   isAddAccountDrawerVisible,
   doesNotHaveAccount,
   currency,
-  isWalletSyncDrawerVisible,
   onCloseAddAccountDrawer,
-  onRequestToOpenWalletSyncDrawer,
-  onCloseWalletSyncDrawer,
 }: 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}
-      >
-        <TrackScreen category="Add/Import accounts" type="drawer" />
-        <SelectAddAccountMethod
+    <QueuedDrawer
+      isRequestingToBeOpened={isAddAccountDrawerVisible}
+      onClose={onCloseAddAccountDrawer}
+      CustomHeader={currentStep === Steps.QrCodeMethod ? CustomDrawerHeader : undefined}
+      hasBackButton={currentStep === Steps.ChooseSyncMethod}
+      onBack={() => goBackCallback()}
+    >
+      <Flex maxHeight={"90%"}>
+        <StepFlow
+          startingStep={StartingStep}
           doesNotHaveAccount={doesNotHaveAccount}
           currency={currency}
-          onClose={onCloseAddAccountDrawer}
-          setWalletSyncDrawerVisible={onRequestToOpenWalletSyncDrawer}
+          onStepChange={handleStepChange}
+          onGoBack={callback => (goBackCallback = callback)}
         />
-      </QueuedDrawer>
-      <QueuedDrawer
-        isRequestingToBeOpened={isWalletSyncDrawerVisible}
-        onClose={onCloseWalletSyncDrawer}
-      >
-        <ChooseSyncMethod />
-      </QueuedDrawer>
-    </>
+      </Flex>
+    </QueuedDrawer>
   );
 }
 

apps/ledger-live-mobile/src/newArch/features/Accounts/screens/AddAccount/useAddAccountViewModel.ts

@@ -1,17 +1,12 @@
-import { useCallback, useState } from "react";
+import { useCallback } from "react";
 import { track } from "~/analytics";
-import { CryptoCurrency, TokenCurrency } from "@ledgerhq/types-cryptoassets";
 
 type AddAccountDrawerProps = {
   isOpened: boolean;
-  currency?: CryptoCurrency | TokenCurrency | null;
   onClose: () => void;
-  reopenDrawer: () => void;
 };
 
-const useAddAccountViewModel = ({ isOpened, onClose, reopenDrawer }: AddAccountDrawerProps) => {
-  const [isWalletSyncDrawerVisible, setWalletSyncDrawerVisible] = useState(false);
-
+const useAddAccountViewModel = ({ isOpened, onClose }: AddAccountDrawerProps) => {
   const trackButtonClick = useCallback((button: string) => {
     track("button_clicked", {
       button,
@@ -24,22 +19,9 @@ const useAddAccountViewModel = ({ isOpened, onClose, reopenDrawer }: AddAccountD
     onClose();
   }, [trackButtonClick, onClose]);
 
-  const onCloseWalletSyncDrawer = () => {
-    setWalletSyncDrawerVisible(false);
-    reopenDrawer();
-  };
-
-  const onRequestToOpenWalletSyncDrawer = () => {
-    onCloseAddAccountDrawer();
-    setWalletSyncDrawerVisible(true);
-  };
-
   return {
     isAddAccountDrawerVisible: isOpened,
-    isWalletSyncDrawerVisible,
     onCloseAddAccountDrawer,
-    onCloseWalletSyncDrawer,
-    onRequestToOpenWalletSyncDrawer,
   };
 };
 

apps/ledger-live-mobile/src/newArch/features/Accounts/types/enum/addAccount.ts

@@ -0,0 +1,5 @@
+export enum Steps {
+  AddAccountMethod = "AddAccountMethod",
+  ChooseSyncMethod = "ChooseSyncMethod",
+  QrCodeMethod = "QrCodeMethod",
+}