💄(lld): skip drawer and update copy (#7850)

.changeset/neat-cameras-own.md

@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": patch
+---
+
+Change delete sync flow on LS to skip a step and update copy

apps/ledger-live-desktop/src/newArch/features/WalletSync/__tests__/manageSynchronizedInstances.test.tsx

@@ -52,7 +52,7 @@ describe("manageSynchronizedInstances", () => {
 
     await waitFor(() => expect(row).toBeDefined());
 
-    expect(screen.getByText("2 Synchronized instances")).toBeDefined();
+    expect(screen.getByText("2 Ledger Live apps synched")).toBeDefined();
 
     await user.click(row);
 

apps/ledger-live-desktop/src/newArch/features/WalletSync/__tests__/manageYourBackup.test.tsx

@@ -42,33 +42,17 @@ describe("ManageYourBackup", () => {
 
     await user.click(row);
 
-    await waitFor(() =>
-      expect(screen.getByTestId("walletSync-manage-backup-delete")).toBeDefined(),
-    );
-    const deleteCard = screen.getByTestId("walletSync-manage-backup-delete");
-    await user.click(deleteCard);
-
-    await waitFor(() =>
-      expect(screen.getByText("Do you really want to delete your encryption key?")).toBeDefined(),
-    );
-
     // First we cancel the deletion
-    const cancelButton = screen.getByRole("button", { name: "Cancel" });
+    const cancelButton = screen.getByRole("button", { name: "Keep sync" });
     expect(cancelButton).toBeDefined();
 
     await user.click(cancelButton);
 
-    await waitFor(() => expect(screen.getByText("Manage your key")).toBeDefined());
-    expect(screen.getByTestId("walletSync-manage-backup-delete")).toBeDefined();
-
-    // go back to confirmation screen
-    await user.click(screen.getByTestId("walletSync-manage-backup-delete"));
-    await waitFor(() =>
-      expect(screen.getByText("Do you really want to delete your encryption key?")).toBeDefined(),
-    );
+    await waitFor(() => expect(row).toBeDefined());
+    await user.click(screen.getByText(/Delete sync/i));
 
     // Then we do the deletion
-    const deleteButton = screen.getByRole("button", { name: "Delete" });
+    const deleteButton = screen.getByRole("button", { name: "Yes, delete" });
     expect(deleteButton).toBeDefined();
     await user.click(deleteButton);
 

apps/ledger-live-desktop/src/newArch/features/WalletSync/screens/ManageBackup/02-DeleteBackupStep.tsx → apps/ledger-live-desktop/src/newArch/features/WalletSync/screens/ManageBackup/01-DeleteBackupStep.tsx

@@ -27,14 +27,15 @@ export default function DeleteBackupStep({ cancel }: DeleteBackupStepProps) {
   return (
     <Flex flexDirection="column" rowGap="24px">
       <TrackPage category={AnalyticsPage.ConfirmDeleteBackup} />
-      <Text fontSize={23} variant="large" color="neutral.c100">
-        {t("walletSync.manageBackup.deleteBackup.title")}
-      </Text>
-
-      <Text fontSize={14} variant="body" color="neutral.c70">
-        {t("walletSync.manageBackup.deleteBackup.description")}
-      </Text>
-
+      <Flex flexDirection="column" rowGap="8px">
+        <Text fontSize={23} variant="large" color="neutral.c100">
+          {t("walletSync.manageBackup.deleteBackup.title")}
+        </Text>
+
+        <Text fontSize={14} variant="body" color="neutral.c70">
+          {t("walletSync.manageBackup.deleteBackup.description")}
+        </Text>
+      </Flex>
       <Flex flexDirection="row" alignItems="flex-start">
         <ButtonV3 onClick={handleCancel} variant="shade">
           {t("walletSync.manageBackup.deleteBackup.cancel")}

apps/ledger-live-desktop/src/newArch/features/WalletSync/screens/ManageBackup/index.tsx

@@ -2,19 +2,12 @@ import React, { forwardRef, useImperativeHandle } from "react";
 import { Flex } from "@ledgerhq/react-ui";
 import { Flow, Step } from "~/renderer/reducers/walletSync";
 import { BackProps, BackRef } from "../router";
-import ManageBackupStep from "./01-ManageBackupStep";
-import DeleteBackupStep from "./02-DeleteBackupStep";
-import BackupDeleted from "./03-FinalStep";
+import DeleteBackupStep from "./01-DeleteBackupStep";
+import BackupDeleted from "./02-FinalStep";
 import { useFlows } from "LLD/features/WalletSync/hooks/useFlows";
 
 const WalletSyncManageBackup = forwardRef<BackRef, BackProps>((_props, ref) => {
-  const {
-    currentStep,
-    goToNextScene,
-    goToPreviousScene,
-    FlowOptions,
-    goToWelcomeScreenWalletSync,
-  } = useFlows();
+  const { currentStep, goToPreviousScene, FlowOptions, goToWelcomeScreenWalletSync } = useFlows();
 
   useImperativeHandle(ref, () => ({
     goBack,
@@ -31,8 +24,6 @@ const WalletSyncManageBackup = forwardRef<BackRef, BackProps>((_props, ref) => {
   const getStep = () => {
     switch (currentStep) {
       default:
-      case Step.ManageBackup:
-        return <ManageBackupStep goToDeleteBackup={goToNextScene} />;
       case Step.DeleteBackup:
         return <DeleteBackupStep cancel={goBack} />;
       case Step.BackupDeleted:

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

@@ -6461,12 +6461,12 @@
         "description": "Synchronize your accounts with another Ledger Live app for a seamless experience."
       },
       "backup": {
-        "label": "Manage Key",
-        "description": "Secure or delete your encryption key via another Ledger."
+        "label": "Delete sync",
+        "description": "Your synched crypto accounts across different Ledger Live apps will stop synching."
       },
       "instance": {
-        "label": "1 Synchronized instance",
-        "label_other": "{{count}} Synchronized instances",
+        "label": "1 Ledger Live app synched",
+        "label_other": "{{count}} Ledger Live apps synched",
         "cta": "Manage"
       }
     },
@@ -6520,17 +6520,11 @@
     },
     "manageBackup": {
       "title": "Manage your key",
-      "options": {
-        "deleteBackup": {
-          "title": "Delete your backup",
-          "description": "All synced accounts will be removed. This won’t affect your local accounts."
-        }
-      },
       "deleteBackup": {
-        "title": "Do you really want to delete your encryption key?",
-        "description": "By clicking delete, your apps will be unsynchronized, and your backup will be deleted. Rest assured, this action does not affect your funds or your accounts in Ledger Live. You may resync your accounts at any time.",
-        "delete": "Delete",
-        "cancel": "Cancel"
+        "title": "Sure you want to delete sync?",
+        "description": "Your crypto accounts across Ledger Live apps on different phones and computers will stop being in sync. This does not impact your funds in any way. ",
+        "delete": "Yes, delete",
+        "cancel": "Keep sync"
       },
       "deleteBackupSuccess": {
         "title": "Your devices have been unsynchronized and your key has been deleted"

apps/ledger-live-desktop/tests/page/drawer/ledger.sync.drawer.ts

@@ -7,7 +7,6 @@ export class LedgerSyncDrawer extends Drawer {
   private syncAccountsButton = this.page.getByRole("button", { name: "Sync your accounts" });
   private closeLedgerSyncButton = this.page.getByRole("button", { name: "Close" });
   private manageBackupButton = this.page.getByTestId("walletSync-manage-backup");
-  private deleteBackupButton = this.page.getByTestId("walletSync-manage-backup-delete");
   private confirmBackupDeletionButton = this.page.getByRole("button", { name: "Delete" });
   private successTextElement = this.page.locator("span", { hasText: "Success" }).first();
   private backupDeletionSuccessText = this.page.getByText(
@@ -32,12 +31,6 @@ export class LedgerSyncDrawer extends Drawer {
     await this.manageBackupButton.click();
   }
 
-  @step("Click on the 'Delete your data' button")
-  async deleteBackup() {
-    await expect(this.deleteBackupButton).toBeVisible();
-    await this.deleteBackupButton.click();
-  }
-
   @step("Confirm the deletion of the data")
   async confirmBackupDeletion() {
     await expect(this.confirmBackupDeletionButton).toBeVisible();
@@ -47,7 +40,6 @@ export class LedgerSyncDrawer extends Drawer {
   @step("Destroy the trustchain - Delete the data")
   async destroyTrustchain() {
     await this.manageBackup();
-    await this.deleteBackup();
     await this.confirmBackupDeletion();
   }