[FEAT] : Manage instances in LLD

.changeset/plenty-elephants-tie.md

@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": patch
+---
+
+Add manage Synchronized instances in Debugger + WalletSync

.changeset/red-maps-know.md

@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": patch
+---
+
+Manage your Backup for WalletSync

.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/.unimportedrc.json

@@ -9,7 +9,7 @@
   ],
   "extensions": [".ts", ".js", ".jsx", ".tsx"],
   "ignorePatterns": ["**/node_modules/**"],
-  "ignoreUnresolved": ["unzip-crx-3", "../../../../release-notes.json"],
+  "ignoreUnresolved": ["../../../../release-notes.json", "unzip-crx-3"],
   "ignoreUnimported": [
     "**/*.test.*",
     "**/*.spec.*",

apps/ledger-live-desktop/src/newArch/WalletSync/SideContent/Activation/index.tsx → apps/ledger-live-desktop/src/newArch/WalletSync/Flows/Activation/01-CreateOrSynchronizeStep.tsx

@@ -1,37 +1,21 @@
-import { Box, Flex, Icons, Text } from "@ledgerhq/react-ui";
-import React, { PropsWithChildren } from "react";
+import { Flex, Icons, Box, Text } from "@ledgerhq/react-ui";
+import React from "react";
 import { useTranslation } from "react-i18next";
+import { useTheme } from "styled-components";
 import ButtonV3 from "~/renderer/components/ButtonV3";
-import useTheme from "~/renderer/hooks/useTheme";
+import { LogoWrapper } from "LLD/WalletSync/components/LogoWrapper";
 
-const LogoWrapper = ({ children, opacity = "70%" }: PropsWithChildren & { opacity?: string }) => (
-  <Box>
-    <Flex padding="7px" borderRadius="13px" border="1px solid hsla(0, 0%, 100%, 0.05)">
-      <Flex
-        borderRadius="9px"
-        backgroundColor="hsla(248, 100%, 85%, 0.08)"
-        padding="5px"
-        opacity={opacity}
-      >
-        {children}
-      </Flex>
-    </Flex>
-  </Box>
-);
+type Props = {
+  goToCreateBackup: () => void;
+  goToSync: () => void;
+};
 
-const WalletSyncActivation = () => {
+export default function CreateOrSynchronizeStep({ goToCreateBackup, goToSync }: Props) {
   const { colors } = useTheme();
   const { t } = useTranslation();
 
   return (
-    <Flex
-      flexDirection="column"
-      height="100%"
-      paddingX="64px"
-      alignSelf="center"
-      justifyContent="center"
-      rowGap="48px"
-    >
+    <>
       <Flex flexDirection="column" alignSelf="center" justifyContent="center" rowGap="24px">
         <Flex justifyContent="center" alignItems="center">
           <LogoWrapper>
@@ -54,7 +38,9 @@ const WalletSyncActivation = () => {
           {t("walletSync.activate.description")}
         </Text>
         <Flex justifyContent="center">
-          <ButtonV3 variant="main"> {t("walletSync.activate.cta")}</ButtonV3>
+          <ButtonV3 variant="main" onClick={goToCreateBackup}>
+            {t("walletSync.activate.cta")}
+          </ButtonV3>
         </Flex>
       </Flex>
 
@@ -70,12 +56,12 @@ const WalletSyncActivation = () => {
             {t("walletSync.alreadySync.title")}
           </Text>
           <Box>
-            <ButtonV3 variant="shade">{t("walletSync.alreadySync.cta")}</ButtonV3>
+            <ButtonV3 variant="shade" onClick={goToSync}>
+              {t("walletSync.alreadySync.cta")}
+            </ButtonV3>
           </Box>
         </Flex>
       </Box>
-    </Flex>
+    </>
   );
-};
-
-export default WalletSyncActivation;
+}

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

@@ -0,0 +1,20 @@
+import { getEnv } from "@ledgerhq/live-env";
+import React, { useMemo } from "react";
+import DeviceAction from "~/renderer/components/DeviceAction";
+import { mockedEventEmitter } from "~/renderer/components/debug/DebugMock";
+import connectApp from "@ledgerhq/live-common/hw/connectApp";
+import { createAction } from "@ledgerhq/live-common/hw/actions/app";
+import { getCryptoCurrencyById } from "@ledgerhq/live-common/currencies/index";
+
+const action = createAction(getEnv("MOCK") ? mockedEventEmitter : connectApp);
+
+type Props = {
+  goNext: () => void;
+};
+
+export default function DeviceActionStep({ goNext }: Props) {
+  //const request = { appName: "BOLOS" };
+  const currency = getCryptoCurrencyById("bitcoin");
+  const request = useMemo(() => ({ currency }), [currency]);
+  return <DeviceAction action={action} request={request} onResult={() => goNext()} />;
+}

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

@@ -0,0 +1,31 @@
+import React, { useCallback, useEffect } from "react";
+import Loading from "../../components/LoadingStep";
+import { useTranslation } from "react-i18next";
+import { UnsecuredError } from "./03-UnsecuredError";
+
+type Props = {
+  goNext: () => void;
+};
+
+export default function ActivationOrSynchroWithTrustchain({ goNext }: Props) {
+  const { t } = useTranslation();
+
+  const hasError = false;
+
+  // TO CHANGE WHEN INTRAGRATION WITH TRUSTCHAIN
+  const stuffHandledByTrustchain = useCallback(() => {
+    goNext();
+  }, [goNext]);
+  // TO CHANGE WHEN INTRAGRATION WITH TRUSTCHAIN
+  useEffect(() => {
+    setTimeout(() => {
+      !hasError && stuffHandledByTrustchain();
+    }, 3000);
+  }, [hasError, stuffHandledByTrustchain]);
+
+  return hasError ? (
+    <UnsecuredError />
+  ) : (
+    <Loading title={t("walletSync.loading.title")} subtitle={t("walletSync.loading.activation")} />
+  );
+}

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

@@ -0,0 +1,59 @@
+import { Box, Flex, Icons, Text } from "@ledgerhq/react-ui";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { useDispatch } from "react-redux";
+import styled, { useTheme } from "styled-components";
+import { setFlow } from "~/renderer/actions/walletSync";
+import ButtonV3 from "~/renderer/components/ButtonV3";
+import { Flow, Step } from "~/renderer/reducers/walletSync";
+
+const Container = styled(Box)`
+  background-color: ${p => p.theme.colors.opacityDefault.c05};
+  border-radius: 100%;
+  height: 72px;
+  width: 72px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const UnsecuredError = () => {
+  const dispatch = useDispatch();
+  const tryAgain = () => console.log("try again");
+  const goToDelete = () => {
+    dispatch(setFlow({ flow: Flow.ManageBackups, step: Step.ManageBackup }));
+  };
+  const { t } = useTranslation();
+  const { colors } = useTheme();
+  return (
+    <Flex
+      flexDirection="column"
+      alignItems="center"
+      justifyContent="center"
+      height="100%"
+      rowGap="24px"
+      paddingX={50}
+    >
+      <Container>
+        <Icons.DeleteCircleFill size={"L"} color={colors.error.c60} />
+      </Container>
+      <Text fontSize={24} variant="h4Inter" color="neutral.c100" textAlign="center">
+        {t("walletSync.unsecuredError.title")}
+      </Text>
+
+      <Flex flexDirection="column" rowGap="16px">
+        <Text variant="bodyLineHeight" color="neutral.c70" textAlign="center" fontSize={14}>
+          {t("walletSync.unsecuredError.description")}
+        </Text>
+        <Text variant="bodyLineHeight" color="neutral.c70" textAlign="center" fontSize={14}>
+          {t("walletSync.unsecuredError.info")}
+        </Text>
+      </Flex>
+
+      <ButtonV3 variant="shade" onClick={tryAgain}>
+        {t("walletSync.unsecuredError.cta")}
+      </ButtonV3>
+      <ButtonV3 onClick={goToDelete}>{t("walletSync.unsecuredError.ctaDelete")}</ButtonV3>
+    </Flex>
+  );
+};

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

@@ -0,0 +1,15 @@
+import React from "react";
+//import { Error } from "../../components/Error";
+import { Success } from "../../components/Success";
+import { useTranslation } from "react-i18next";
+
+type Props = {
+  hasBackup: boolean;
+};
+
+export default function ActivationFinalStep({ hasBackup }: Props) {
+  const { t } = useTranslation();
+  const title = !hasBackup ? "walletSync.success.backup.title" : "walletSync.success.synch.title";
+  const desc = !hasBackup ? "walletSync.success.backup.desc" : "walletSync.success.synch.desc";
+  return <Success title={t(title)} description={t(desc)} withCta={!hasBackup} />;
+}

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

@@ -0,0 +1,64 @@
+import React from "react";
+import { useDispatch } from "react-redux";
+import { Flex } from "@ledgerhq/react-ui";
+import { Flow, Step } from "~/renderer/reducers/walletSync";
+import { setFlow } from "~/renderer/actions/walletSync";
+
+import { useFlows } from "../useFlows";
+import CreateOrSynchronizeStep from "./01-CreateOrSynchronizeStep";
+import DeviceActionStep from "./02-DeviceActionStep";
+import ActivationOrSynchroWithTrustchain from "./03-ActivationOrSynchroWithTrustchain";
+import ActivationFinalStep from "./04-ActivationFinalStep";
+import { useBackup } from "../ManageBackup/useBackup";
+import { useInstances } from "../ManageInstances/useInstances";
+
+const WalletSyncActivation = () => {
+  const dispatch = useDispatch();
+  const { hasBackup, createBackup } = useBackup();
+  const { createInstance } = useInstances();
+
+  const { currentStep, goToNextScene } = useFlows({ flow: Flow.Activation });
+
+  const goToSync = () => {
+    dispatch(setFlow({ flow: Flow.Synchronize, step: Step.SynchronizeMode }));
+  };
+
+  const createNewBackupAction = () => {
+    goToNextScene();
+    createBackup();
+    createInstance({
+      name: "Iphone 8",
+      id: "1",
+      typeOfDevice: "mobile",
+    });
+  };
+
+  const getStep = () => {
+    switch (currentStep) {
+      default:
+      case Step.CreateOrSynchronize:
+        return <CreateOrSynchronizeStep goToCreateBackup={goToNextScene} goToSync={goToSync} />;
+      case Step.DeviceAction:
+        return <DeviceActionStep goNext={goToNextScene} />;
+      case Step.CreateOrSynchronizeTrustChain:
+        return <ActivationOrSynchroWithTrustchain goNext={createNewBackupAction} />;
+      case Step.ActivationFinal:
+        return <ActivationFinalStep hasBackup={hasBackup} />;
+    }
+  };
+
+  return (
+    <Flex
+      flexDirection="column"
+      height="100%"
+      paddingX="64px"
+      alignSelf="center"
+      justifyContent="center"
+      rowGap="48px"
+    >
+      {getStep()}
+    </Flex>
+  );
+};
+
+export default WalletSyncActivation;

apps/ledger-live-desktop/src/newArch/WalletSync/SideContent/Manage/Option.tsx → apps/ledger-live-desktop/src/newArch/WalletSync/Flows/Manage/Option.tsx

@@ -1,10 +1,12 @@
 import { Flex, Box, Icons, Text } from "@ledgerhq/react-ui";
 import React from "react";
-import styled from "styled-components";
+import styled, { useTheme } from "styled-components";
 
 export type OptionProps = {
   label: string;
   description: string;
+  onClick?: () => void;
+  testId: string;
 };
 
 export const OptionContainer = styled.div`
@@ -13,17 +15,13 @@ export const OptionContainer = styled.div`
   }
 `;
 
-export const Separator = styled.div`
-  &::after {
-    content: "";
-    font-size: 13px;
-    color: ${p => p.theme.colors.palette.divider};
-    padding: 0 15px;
-  }
-`;
+export const Separator = () => {
+  const { colors } = useTheme();
+  return <Box height="1px" width="100%" backgroundColor={colors.opacityDefault.c05} />;
+};
 
-export const Option = ({ label, description }: OptionProps) => (
-  <OptionContainer>
+export const Option = ({ label, description, onClick, testId }: OptionProps) => (
+  <OptionContainer onClick={onClick} data-testid={testId}>
     <Flex>
       <Box paddingY={24} width={304}>
         <Box>