⚡️ [FEAT] : WalletSync - Synchronize with LLD 🔄 (#7023)

* ⚡[FEAT]: WS Manage your Backup in LLD

.changeset/shy-vans-smoke.md

@@ -0,0 +1,5 @@
+---
+"@ledgerhq/react-ui": patch
+---
+
+Add new Numbered List component

.changeset/ten-kids-reflect.md

@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": patch
+---
+
+WalletSync - Synchronize Flow

apps/ledger-live-desktop/src/newArch/WalletSync/Flows/Activation/03-ActivationOrSynchroWithTrustchain.tsx

@@ -12,10 +12,11 @@ export default function ActivationOrSynchroWithTrustchain({ goNext }: Props) {
 
   const hasError = false;
 
+  // TO CHANGE WHEN INTRAGRATION WITH TRUSTCHAIN
   const stuffHandledByTrustchain = useCallback(() => {
     goNext();
   }, [goNext]);
-
+  // TO CHANGE WHEN INTRAGRATION WITH TRUSTCHAIN
   useEffect(() => {
     setTimeout(() => {
       !hasError && stuffHandledByTrustchain();

apps/ledger-live-desktop/src/newArch/WalletSync/Flows/Activation/03-UnsecuredError.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import { useDispatch } from "react-redux";
 import styled, { useTheme } from "styled-components";
-import { setFlow, setStep } from "~/renderer/actions/walletSync";
+import { setFlow } from "~/renderer/actions/walletSync";
 import ButtonV3 from "~/renderer/components/ButtonV3";
 import { Flow, Step } from "~/renderer/reducers/walletSync";
 
@@ -21,8 +21,7 @@ export const UnsecuredError = () => {
   const dispatch = useDispatch();
   const tryAgain = () => console.log("try again");
   const goToDelete = () => {
-    dispatch(setFlow(Flow.ManageBackups));
-    dispatch(setStep(Step.ManageBackup));
+    dispatch(setFlow({ flow: Flow.ManageBackups, step: Step.ManageBackup }));
   };
   const { t } = useTranslation();
   const { colors } = useTheme();

apps/ledger-live-desktop/src/newArch/WalletSync/Flows/Activation/index.tsx

@@ -18,7 +18,7 @@ const WalletSyncActivation = () => {
   const { currentStep, goToNextScene } = useFlows({ flow: Flow.Activation });
 
   const goToSync = () => {
-    dispatch(setFlow(Flow.Synchronize));
+    dispatch(setFlow({ flow: Flow.Synchronize, step: Step.SynchronizeMode }));
   };
 
   const createNewBackupAction = () => {

apps/ledger-live-desktop/src/newArch/WalletSync/Flows/Manage/index.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import useTheme from "~/renderer/hooks/useTheme";
 import { useDispatch } from "react-redux";
-import { setFlow, setStep } from "~/renderer/actions/walletSync";
+import { setFlow } from "~/renderer/actions/walletSync";
 import { Flow, Step } from "~/renderer/reducers/walletSync";
 import { OptionContainer, Option, OptionProps } from "./Option";
 
@@ -18,20 +18,19 @@ const WalletSyncManage = () => {
 
   const dispatch = useDispatch();
 
-  const goToSynch = () => {
-    dispatch(setFlow(Flow.Synchronize));
+  const goToSync = () => {
+    dispatch(setFlow({ flow: Flow.Synchronize, step: Step.SynchronizeMode }));
   };
 
   const goToManageBackups = () => {
-    dispatch(setFlow(Flow.ManageBackups));
-    dispatch(setStep(Step.ManageBackup));
+    dispatch(setFlow({ flow: Flow.ManageBackups, step: Step.ManageBackup }));
   };
 
   const Options: OptionProps[] = [
     {
       label: t("walletSync.manage.synchronize.label"),
       description: t("walletSync.manage.synchronize.description"),
-      onClick: goToSynch,
+      onClick: goToSync,
       testId: "walletSync-synchronize",
     },
     {

apps/ledger-live-desktop/src/newArch/WalletSync/Flows/ManageBackup/01-ManageBackupStep.tsx

@@ -22,7 +22,7 @@ export default function ManageBackupStep({ goToDeleteBackup }: ManageBackupStepP
   return (
     <Flex flexDirection="column" rowGap="24px">
       <TrackPage category={AnalyticsPage.ManageBackup} />
-      <Text fontSize={23} variant="large">
+      <Text fontSize={23} variant="large" color="neutral.c100">
         {t("walletSync.manageBackups.title")}
       </Text>
 

apps/ledger-live-desktop/src/newArch/WalletSync/Flows/Synchronize/01-SyncModeStep.tsx

@@ -0,0 +1,56 @@
+import { Flex, Icons, Text } from "@ledgerhq/react-ui";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Card } from "../../components/Card";
+import styled, { useTheme } from "styled-components";
+
+type Props = {
+  goToQRCode: () => void;
+  goToSyncWithDevice: () => void;
+};
+
+export default function SynchronizeModeStep({ goToQRCode, goToSyncWithDevice }: Props) {
+  const { t } = useTranslation();
+  const { colors } = useTheme();
+  return (
+    <Flex flexDirection="column" rowGap="16px">
+      <Text fontSize={23} variant="large" color="neutral.c100">
+        {t("walletSync.synchronize.chooseMethod.title")}
+      </Text>
+
+      <Text fontSize={13} variant="body" color="neutral.c70">
+        {t("walletSync.synchronize.chooseMethod.description")}
+      </Text>
+
+      <Card
+        testId="walletSync-synchronize-connectDevice"
+        title="walletSync.synchronize.chooseMethod.connectDevice.title"
+        description="walletSync.synchronize.chooseMethod.connectDevice.description"
+        onClick={goToSyncWithDevice}
+        leftIcon={
+          <IconContainer alignItems="center" justifyContent="center">
+            <Icons.LedgerDevices size="M" color={colors.primary.c80} />
+          </IconContainer>
+        }
+      />
+
+      <Card
+        testId="walletSync-synchronize-scan"
+        title="walletSync.synchronize.chooseMethod.scan.title"
+        description="walletSync.synchronize.chooseMethod.scan.description"
+        onClick={goToQRCode}
+        leftIcon={
+          <IconContainer alignItems="center" justifyContent="center">
+            <Icons.QrCode size="M" color={colors.primary.c80} />
+          </IconContainer>
+        }
+      />
+    </Flex>
+  );
+}
+
+const IconContainer = styled(Flex)`
+  border-radius: 8px;
+  height: 40px;
+  width: 40px;
+`;

apps/ledger-live-desktop/src/newArch/WalletSync/Flows/Synchronize/02-QRCodeStep.tsx

@@ -0,0 +1,93 @@
+import React, { useEffect } from "react";
+import { Trans, useTranslation } from "react-i18next";
+import { Flex, Icons, NumberedList, Text } from "@ledgerhq/react-ui";
+import styled, { useTheme } from "styled-components";
+
+type Props = {
+  displayPinCode: () => void;
+};
+export default function SynchWithQRCodeStep({ displayPinCode }: Props) {
+  const { t } = useTranslation();
+
+  const { colors } = useTheme();
+
+  const steps = [
+    { element: t("walletSync.synchronize.qrCode.steps.step1") },
+    { element: t("walletSync.synchronize.qrCode.steps.step2") },
+    { element: t("walletSync.synchronize.qrCode.steps.step3") },
+  ];
+
+  // TO CHANGE WHEN INTRAGRATION WITH TRUSTCHAIN
+  useEffect(() => {
+    setTimeout(() => {
+      displayPinCode();
+    }, 3000);
+  }, [displayPinCode]);
+
+  return (
+    <Flex flexDirection="column" rowGap="24px" alignItems="center" flex={1}>
+      <Text
+        fontSize={23}
+        variant="large"
+        fontWeight="semiBold"
+        color="neutral.c100"
+        textAlign="center"
+      >
+        {t("walletSync.synchronize.qrCode.title")}
+      </Text>
+      <Flex
+        flexDirection="column"
+        flex={1}
+        rowGap="40px"
+        alignItems="center"
+        justifyContent="center"
+      >
+        <QRContainer
+          height={200}
+          width={200}
+          borderRadius={24}
+          position="relative"
+          bg="constant.white"
+          alignItems="center"
+          justifyContent="center"
+        >
+          <Flex
+            alignItems="center"
+            justifyContent="center"
+            width={24}
+            height={24}
+            position="absolute"
+          >
+            <Icons.LedgerLogo size="L" color="constant.black" />
+          </Flex>
+        </QRContainer>
+
+        <MiddleContainer
+          rowGap="24px"
+          flexDirection="column"
+          p={"24px"}
+          backgroundColor={colors.opacityDefault.c05}
+        >
+          <Text fontSize={16} variant="large" fontWeight="500" color="neutral.c100">
+            <Trans i18nKey="walletSync.synchronize.qrCode.description">
+              <Text color="primary.c80" />
+            </Trans>
+          </Text>
+          <NumberedList steps={steps} />
+        </MiddleContainer>
+
+        <Text fontSize={14} variant="paragraph" fontWeight="semiBold" color="neutral.c70">
+          {t("walletSync.synchronize.qrCode.hint")}
+        </Text>
+      </Flex>
+    </Flex>
+  );
+}
+
+const MiddleContainer = styled(Flex)`
+  border-radius: 12px;
+`;
+
+const QRContainer = styled(Flex)`
+  border: 1px solid ${({ theme }) => theme.colors.opacityDefault.c10};
+`;

apps/ledger-live-desktop/src/newArch/WalletSync/Flows/Synchronize/03-PinCodeStep.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Flex, Text } from "@ledgerhq/react-ui";
+import styled, { useTheme } from "styled-components";
+
+export default function PinCodeStep() {
+  const { t } = useTranslation();
+  const { colors } = useTheme();
+
+  const PIN_CODE = [1, 5, 7];
+
+  return (
+    <Flex flexDirection="column" rowGap="16px" justifyContent="center" flex={1}>
+      <Text
+        fontSize={24}
+        variant="large"
+        fontWeight="semiBold"
+        color="neutral.c100"
+        textAlign="center"
+      >
+        {t("walletSync.synchronize.pinCode.title")}
+      </Text>
+
+      <Text fontSize={14} variant="body" fontWeight="500" color="neutral.c70" textAlign="center">
+        {t("walletSync.synchronize.pinCode.description")}
+      </Text>
+
+      <Flex flexDirection="row" justifyContent="center" columnGap="12px" mt={"16px"}>
+        {PIN_CODE.map((number, index) => (
+          <NumberContainer
+            key={index}
+            backgroundColor={colors.opacityDefault.c05}
+            alignItems="center"
+            justifyContent="center"
+          >
+            <Text fontSize={14} variant="body" fontWeight="medium" color="neutral.c100">
+              {number}
+            </Text>
+          </NumberContainer>
+        ))}
+      </Flex>
+    </Flex>
+  );
+}
+
+const NumberContainer = styled(Flex)`
+  border-radius: 8px;
+  height: 50px;
+  width: 50px;
+`;

apps/ledger-live-desktop/src/newArch/WalletSync/Flows/Synchronize/04-SyncFinalStep.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+//import { Error } from "../../components/Error";
+import { Success } from "../../components/Success";
+import { useTranslation } from "react-i18next";
+import { Flex } from "@ledgerhq/react-ui";
+
+export default function SyncFinalStep() {
+  const { t } = useTranslation();
+  const title = "walletSync.success.synch.title";
+  const desc = "walletSync.success.synch.desc";
+  return (
+    <Flex flex={1}>
+      <Success title={t(title)} description={t(desc)} />
+    </Flex>
+  );
+}

apps/ledger-live-desktop/src/newArch/WalletSync/Flows/Synchronize/index.tsx

@@ -0,0 +1,46 @@
+import { Flex } from "@ledgerhq/react-ui";
+import React from "react";
+import { useDispatch } from "react-redux";
+import { setFlow } from "~/renderer/actions/walletSync";
+import { Flow, Step } from "~/renderer/reducers/walletSync";
+import { useFlows } from "../useFlows";
+import SynchronizeModeStep from "./01-SyncModeStep";
+import SynchWithQRCodeStep from "./02-QRCodeStep";
+import PinCodeStep from "./03-PinCodeStep";
+import SyncFinalStep from "./04-SyncFinalStep";
+
+const SynchronizeWallet = () => {
+  const dispatch = useDispatch();
+
+  const { currentStep, goToNextScene } = useFlows({
+    flow: Flow.Synchronize,
+  });
+
+  const goToActivation = () => {
+    dispatch(setFlow({ flow: Flow.Activation, step: Step.CreateOrSynchronize }));
+  };
+
+  const getStep = () => {
+    switch (currentStep) {
+      default:
+      case Step.SynchronizeMode:
+        return (
+          <SynchronizeModeStep goToQRCode={goToNextScene} goToSyncWithDevice={goToActivation} />
+        );
+      case Step.SynchronizeWithQRCode:
+        return <SynchWithQRCodeStep displayPinCode={goToNextScene} />;
+      case Step.PinCode:
+        return <PinCodeStep />;
+      case Step.Synchronized:
+        return <SyncFinalStep />;
+    }
+  };
+
+  return (
+    <Flex flexDirection="column" height="100%" paddingX="40px" rowGap="48px">
+      {getStep()}
+    </Flex>
+  );
+};
+
+export default SynchronizeWallet;