feat: 💄Skip drawer when user clicks on delete Sync (#7849)

.changeset/silly-rice-push.md

@@ -0,0 +1,5 @@
+---
+"live-mobile": patch
+---
+
+Skip drawer when user clicks on delete Sync + update copy

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

@@ -6793,21 +6793,15 @@
         "description": "Synchronize your accounts with another Ledger Live app for a seamless experience."
       },
       "manageKey": {
-        "title": "Manage Key",
-        "description": "Secure or delete your encryption key via another Ledger.",
-        "success": "Your devices have been unsynchronized and your key has been deleted",
-        "drawer": {
-          "step1": {
-            "title": "Manage your key",
-            "titleCta": "Delete your key",
-            "descCta": "All synced accounts will be removed. This won’t affect your local accounts."
-          },
-          "step2": {
-            "delete": "Delete",
-            "cancel": "Cancel",
-            "title": "Do you really want to delete your encryption key?",
-            "desc": "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."
-          }
+        "title": "Delete Sync",
+        "description": "Your crypto accounts across different phones and computers will stop synching.",
+        "success": "Your Ledger Live apps are no longer synched",
+        "successHint": "You can turn on sync again anytime.",
+        "confirm": {
+          "delete": "Yes, delete",
+          "cancel": "Keep sync",
+          "title": "Sure you want delete sync?",
+          "desc": "Your crypto accounts on different phones and computers will stop being in sync. This does not impact your funds in any way."
         }
       },
       "manageInstances": {

apps/ledger-live-mobile/src/newArch/features/WalletSync/__integrations__/manageInstances.integration.test.tsx

@@ -146,6 +146,6 @@ describe("ManageInstances", () => {
     await user.press(screen.getAllByText("Remove")[0]);
     expect(screen.getByText(/You can’t remove the current instance/i)).toBeDefined();
     await user.press(await screen.findByText(/Delete my encryption key/i));
-    await waitFor(() => screen.findByText(/Manage your key/i));
+    await waitFor(() => screen.findByText(/Sure you want delete sync?/i));
   });
 });

apps/ledger-live-mobile/src/newArch/features/WalletSync/__integrations__/manageKey.integration.test.tsx

@@ -60,24 +60,14 @@ describe("ManageKey", () => {
     await user.press(await screen.findByText(/ledger sync/i));
 
     //Manage Key Flow
-    expect(await screen.findByText(/Manage Key/i)).toBeVisible();
+    expect(await screen.findByText(/Delete Sync/i)).toBeVisible();
 
-    await user.press(await screen.findByText(/Manage Key/i));
+    await user.press(await screen.findByText(/Delete Sync/i));
 
-    expect(await screen.findByText(/Delete your key/i)).toBeVisible();
-
-    await user.press(await screen.findByText(/Delete your key/i));
-
-    expect(
-      await screen.findByText(/Do you really want to delete your encryption key?/i),
-    ).toBeVisible();
+    expect(await screen.findByText(/Sure you want delete sync?/i)).toBeVisible();
 
     await user.press(await screen.findByTestId("delete-trustchain"));
 
-    expect(
-      await screen.findByText(
-        /Your devices have been unsynchronized and your key has been deleted/i,
-      ),
-    ).toBeVisible();
+    expect(await screen.findByText(/Your Ledger Live apps are no longer synched/i)).toBeVisible();
   });
 });

apps/ledger-live-mobile/src/newArch/features/WalletSync/__integrations__/walletSyncActivated.integration.test.tsx

@@ -52,7 +52,7 @@ describe("WalletSyncActivated", () => {
 
     // Check if the activated screen is visible
 
-    expect(await screen.findByText(/Manage Key/i)).toBeVisible();
+    expect(await screen.findByText(/Delete Sync/i)).toBeVisible();
 
     expect(await screen.findByText(/Manage now/i)).toBeVisible();
   });

apps/ledger-live-mobile/src/newArch/features/WalletSync/components/ManageKey/Confirm.tsx

@@ -13,22 +13,22 @@ export function ConfirmManageKey({ onClickConfirm, onCancel }: Props) {
   return (
     <Flex pb={4}>
       <Text variant="h5" fontWeight="semiBold" color="neutral.c100" mb={6}>
-        {t("walletSync.walletSyncActivated.manageKey.drawer.step2.title")}
+        {t("walletSync.walletSyncActivated.manageKey.confirm.title")}
       </Text>
 
       <Text variant="bodyLineHeight" fontWeight="medium" color="neutral.c70" mb={7}>
-        {t("walletSync.walletSyncActivated.manageKey.drawer.step2.desc")}
+        {t("walletSync.walletSyncActivated.manageKey.confirm.desc")}
       </Text>
 
       <Flex flexDirection="row" justifyContent="space-between">
         <Flex flex={1} mr={2}>
           <Button onPress={onCancel} outline type="main">
-            {t("walletSync.walletSyncActivated.manageKey.drawer.step2.cancel")}
+            {t("walletSync.walletSyncActivated.manageKey.confirm.cancel")}
           </Button>
         </Flex>
         <Flex flex={1} ml={2}>
           <Button onPress={onClickConfirm} type="main" testID="delete-trustchain">
-            {t("walletSync.walletSyncActivated.manageKey.drawer.step2.delete")}
+            {t("walletSync.walletSyncActivated.manageKey.confirm.delete")}
           </Button>
         </Flex>
       </Flex>

apps/ledger-live-mobile/src/newArch/features/WalletSync/screens/ManageKey/DeletionSuccess.tsx

@@ -26,6 +26,7 @@ export function WalletSyncManageKeyDeletionSuccess({ navigation }: Props) {
   return (
     <Success
       title={t("walletSync.walletSyncActivated.manageKey.success")}
+      desc={t("walletSync.walletSyncActivated.manageKey.successHint")}
       secondaryButton={{
         label: t("walletSync.success.close"),
         onPress: close,

apps/ledger-live-mobile/src/newArch/features/WalletSync/screens/ManageKey/ManageKeyDrawer.tsx

@@ -4,16 +4,13 @@ import QueuedDrawer from "LLM/components/QueuedDrawer";
 import GenericErrorView from "~/components/GenericErrorView";
 import { Flex, InfiniteLoader } from "@ledgerhq/native-ui";
 
-import { ManageKey } from "../../components/ManageKey/ManageKey";
 import { ConfirmManageKey } from "../../components/ManageKey/Confirm";
-import { HookResult, Scene } from "./useManageKeyDrawer";
+import { HookResult } from "./useManageKeyDrawer";
 
 const ManageKeyDrawer = ({
   isDrawerVisible,
   handleClose,
   deleteMutation,
-  scene,
-  onClickDelete,
   onClickConfirm,
   handleCancel,
 }: HookResult) => {
@@ -36,12 +33,8 @@ const ManageKeyDrawer = ({
         </Flex>
       );
     }
-    if (scene === Scene.Manage) {
-      return <ManageKey onClickDelete={onClickDelete} />;
-    }
-    if (scene === Scene.Confirm) {
-      return <ConfirmManageKey onClickConfirm={onClickConfirm} onCancel={handleCancel} />;
-    }
+
+    return <ConfirmManageKey onClickConfirm={onClickConfirm} onCancel={handleCancel} />;
   };
 
   return (

apps/ledger-live-mobile/src/newArch/features/WalletSync/screens/ManageKey/useManageKeyDrawer.ts

@@ -1,5 +1,5 @@
 import { useNavigation } from "@react-navigation/native";
-import { useState, useCallback } from "react";
+import { useCallback } from "react";
 import { StackNavigatorNavigation } from "~/components/RootNavigator/types/helpers";
 import { WalletSyncNavigatorStackParamList } from "~/components/RootNavigator/types/WalletSyncNavigator";
 import { ScreenName } from "~/const";
@@ -14,18 +14,11 @@ import { AnalyticsButton, AnalyticsPage } from "../../hooks/useLedgerSyncAnalyti
 
 const messageLog = "Follow Steps on device";
 
-export enum Scene {
-  Manage,
-  Confirm,
-}
-
 export type HookResult = {
   isDrawerVisible: boolean;
   openDrawer: () => void;
   closeDrawer: () => void;
   handleClose: () => void;
-  onClickDelete: () => void;
-  scene: Scene;
   onClickConfirm: () => Promise<void>;
   deleteMutation: UseMutationResult<void, Error, void, unknown>;
   handleCancel: () => void;
@@ -38,24 +31,13 @@ export const useManageKeyDrawer = () => {
 
   const dispatch = useDispatch();
 
-  const [scene, setScene] = useState(Scene.Manage);
-
-  const onClickDelete = () => {
-    track("button_clicked", {
-      button: AnalyticsButton.DeleteKey,
-      page: AnalyticsPage.ManageBackup,
-    });
-    setScene(Scene.Confirm);
-  };
-
   const openDrawer = useCallback(() => {
     dispatch(setWallectSyncManageKeyDrawer(true));
 
     logDrawer(messageLog, "open");
   }, [dispatch]);
 
   const closeDrawer = useCallback(() => {
-    setScene(Scene.Manage);
     dispatch(setWallectSyncManageKeyDrawer(false));
     logDrawer(messageLog, "close");
   }, [dispatch]);
@@ -95,8 +77,6 @@ export const useManageKeyDrawer = () => {
     openDrawer,
     closeDrawer,
     handleClose,
-    onClickDelete,
-    scene,
     onClickConfirm,
     deleteMutation,
     handleCancel,