Merge pull request #6866 from LedgerHQ/feat/LIVE-12214

[LLD] - [LIVE-12214] - Add Wallet Sync Manage screen

.changeset/small-worms-flash.md

@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": patch
+---
+
+Add Wallet Sync manage screen

apps/ledger-live-desktop/.unimportedrc.json

@@ -16,9 +16,11 @@
     "**/*.d.ts",
     "**/types.js",
     "**/types.*",
+    "node_modules/**",
+    "src/generate-cryptoassets-md.test.ts",
     "src/generate-cryptoassets-md.ts",
     "src/newArch/Collectibles/**",
-    "src/renderer/screens/settings/sections/General/WalletSync/setupTests/shared.tsx"
+    "src/newArch/WalletSync/**"
   ],
   "ignoreUnused": ["@types/semver", "@types/qrcode", "@types/react-key-handler", "prop-types", "allure-commandline"],
   "aliases": {

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

@@ -0,0 +1,46 @@
+import { Flex, Box, Icons, Text } from "@ledgerhq/react-ui";
+import React from "react";
+import styled from "styled-components";
+
+export type OptionProps = {
+  label: string;
+  description: string;
+};
+
+export const OptionContainer = styled.div`
+  &:hover {
+    cursor: pointer;
+  }
+`;
+
+export const Separator = styled.div`
+  &::after {
+    content: "";
+    font-size: 13px;
+    color: ${p => p.theme.colors.palette.divider};
+    padding: 0 15px;
+  }
+`;
+
+export const Option = ({ label, description }: OptionProps) => (
+  <OptionContainer>
+    <Flex>
+      <Box paddingY={24} width={304}>
+        <Box>
+          <Text fontSize={13.44} variant="body">
+            {label}
+          </Text>
+        </Box>
+        <Text fontSize={13.44} variant="body" color="hsla(0, 0%, 58%, 1)">
+          {description}
+        </Text>
+      </Box>
+
+      <Flex flexGrow={1} alignItems={"center"} justifyContent={"end"}>
+        <Icons.ChevronRight size="S" />
+      </Flex>
+    </Flex>
+
+    <Separator />
+  </OptionContainer>
+);

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

@@ -0,0 +1,54 @@
+import { Box, Flex, Text, Icons } from "@ledgerhq/react-ui";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import useTheme from "~/renderer/hooks/useTheme";
+import { Option, OptionContainer, OptionProps } from "./Option";
+
+const Separator = () => {
+  const { colors } = useTheme();
+  return <Box height="1px" width="100%" backgroundColor={colors.opacityDefault.c05} />;
+};
+
+const WalletSyncManage = () => {
+  const { t } = useTranslation();
+
+  const Options: OptionProps[] = [
+    {
+      label: t("walletSync.manage.synchronize.label"),
+      description: t("walletSync.manage.synchronize.description"),
+    },
+    {
+      label: t("walletSync.manage.backup.label"),
+      description: t("walletSync.manage.backup.description"),
+    },
+  ];
+
+  return (
+    <Box height="100%" paddingX="40px">
+      <Box marginBottom={"24px"}>
+        <Text fontSize={23} variant="large">
+          {t("walletSync.title")}
+        </Text>
+      </Box>
+
+      <Separator />
+
+      {Options.map((props, index) => (
+        <Option {...props} key={index} />
+      ))}
+
+      <Flex paddingY={24} justifyContent="space-between">
+        <Text fontSize={13.44}>{t("walletSync.manage.instance.label", { nbInstances: 0 })}</Text>
+
+        <OptionContainer>
+          <Flex columnGap={"8px"} alignItems={"center"}>
+            <Text fontSize={13.44}>{t("walletSync.manage.instance.cta")}</Text>
+            <Icons.ChevronRight size="S" />
+          </Flex>
+        </OptionContainer>
+      </Flex>
+    </Box>
+  );
+};
+
+export default WalletSyncManage;

apps/ledger-live-desktop/src/renderer/screens/settings/sections/General/WalletSync/__tests__/walletSync.test.tsx → apps/ledger-live-desktop/src/newArch/WalletSync/__tests__/walletSync.test.tsx

@@ -1,22 +1,28 @@
 /**
  * @jest-environment jsdom
  */
-
+import "@testing-library/jest-dom";
 import { describe, it, expect } from "@jest/globals";
 
 import React from "react";
 import { render, screen, waitFor } from "tests/testUtils";
-import "@testing-library/jest-dom";
-import { WalletSyncPages } from "../setupTests/shared";
+import WalletSyncRow from "~/renderer/screens/settings/sections/General/WalletSync";
+
+const WalletSyncTestApp = () => (
+  <>
+    <div id="modals"></div>
+    <WalletSyncRow />
+  </>
+);
 
 describe("Rendering", () => {
   it("should loads and displays WalletSync Row", async () => {
-    render(<WalletSyncPages />);
+    render(<WalletSyncTestApp />);
     expect(screen.getByRole("button", { name: "Manage" })).toBeTruthy();
   });
 
   it("should open drawer and display Wallet Sync Activation flow", async () => {
-    const { user } = render(<WalletSyncPages />);
+    const { user } = render(<WalletSyncTestApp />);
     const button = screen.getByRole("button", { name: "Manage" });
 
     await user.click(button);

apps/ledger-live-desktop/src/renderer/screens/settings/sections/General/WalletSync/index.tsx → apps/ledger-live-desktop/src/renderer/screens/settings/sections/General/WalletSync.tsx

@@ -3,8 +3,8 @@ import { useSelector } from "react-redux";
 import Button from "~/renderer/components/Button";
 import { SideDrawer } from "~/renderer/components/SideDrawer";
 import { walletSyncSelector } from "~/renderer/reducers/walletSync";
-import WalletSyncActivation from "./SideContent/Activation";
-import WalletSyncManage from "./SideContent/Manage";
+import WalletSyncActivation from "LLD/WalletSync/SideContent/Activation";
+import WalletSyncManage from "LLD/WalletSync/SideContent/Manage";
 import { useTranslation } from "react-i18next";
 
 const WalletSyncRow = () => {
@@ -19,7 +19,7 @@ const WalletSyncRow = () => {
       </SideDrawer>
 
       <Button small event="Manage WalletSync" primary onClick={() => setOpen(true)}>
-        {t("walletSync.manage")}
+        {t("walletSync.manage.cta")}
       </Button>
     </>
   );

apps/ledger-live-desktop/static/i18n/en/app.json

@@ -6279,7 +6279,7 @@
     }
   },
   "walletSync": {
-    "manage": "Manage",
+    "title": "Wallet Sync",
     "activate": {
       "title": "Activate wallet sync",
       "description": "Create a secure backup of your Ledger Live and synchronize multiple instances of Ledger Live, both on mobile and desktop.",
@@ -6288,6 +6288,21 @@
     "alreadySync": {
       "title": "Already created a back-up on another Device?",
       "cta": "Synchronize"
+    },
+    "manage": {
+      "cta": "Manage",
+      "synchronize": {
+        "label": "Synchronize",
+        "description": "Synchronize your app data with another Ledger Live app for a seemless experience."
+      },
+      "backup": {
+        "label": "Manage your backup",
+        "description": "Secure your backup with another Ledger or delete it."
+      },
+      "instance": {
+        "label": "{{ nbInstances }} synchronized instances",
+        "cta": "Manage"
+      }
     }
   }
 }