💄 fix(lld): Backup companion step refinements

LedgerHQ · Apr 22, 2024 · 7f5fb20 · 7f5fb20
1 parent 9729cb9
commit 7f5fb20
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 41 deletions.
diff --git a/.changeset/dull-jeans-attack.md b/.changeset/dull-jeans-attack.md
@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": patch
+---
+
+Backup companion refinements
diff --git a/apps/ledger-live-desktop/src/renderer/components/SyncOnboarding/Manual/BackupStep.tsx b/apps/ledger-live-desktop/src/renderer/components/SyncOnboarding/Manual/BackupStep.tsx
@@ -30,8 +30,8 @@ type ChoiceBodyProps = {
 type Choice = {
   id: "backup" | "keep_on_paper";
   icon: React.ReactNode;
-  title: string;
-  tag: React.ReactNode;
+  getTitle: (selected?: boolean) => string;
+  tag?: React.ReactNode;
   body: React.ComponentType<ChoiceBodyProps>;
 };
 
@@ -94,9 +94,7 @@ const BackupBody: React.FC<ChoiceBodyProps> = ({ isOpened }) => {
 
   return isOpened ? (
     <Flex rowGap={3} flexDirection={"column"}>
-      <ChoiceText mb={3}>
-        {t("syncOnboarding.manual.backup.backupChoice.longDescription")}
-      </ChoiceText>
+      <ChoiceText mb={3}>{t("syncOnboarding.manual.backup.backupChoice.description")}</ChoiceText>
       <ButtonV3
         size="small"
         variant="main"
@@ -117,18 +115,14 @@ const BackupBody: React.FC<ChoiceBodyProps> = ({ isOpened }) => {
       </ButtonV3>
       <VideoLink />
     </Flex>
-  ) : (
-    <ChoiceText>{t("syncOnboarding.manual.backup.backupChoice.shortDescription")}</ChoiceText>
-  );
+  ) : null;
 };
 
 const KeepOnPaperBody: React.FC<ChoiceBodyProps> = ({ isOpened, onPressKeepManualBackup }) => {
   const { t } = useTranslation();
   return isOpened ? (
-    <Flex flexDirection={"column"}>
-      <ChoiceText mb={6}>
-        {t("syncOnboarding.manual.backup.manualBackup.longDescription")}
-      </ChoiceText>
+    <Flex flexDirection={"column"} mt={3}>
+      <ChoiceText mb={6}>{t("syncOnboarding.manual.backup.manualBackup.description")}</ChoiceText>
       <ButtonV3
         size="small"
         variant="main"
@@ -139,9 +133,7 @@ const KeepOnPaperBody: React.FC<ChoiceBodyProps> = ({ isOpened, onPressKeepManua
         {t("syncOnboarding.manual.backup.manualBackup.cta")}
       </ButtonV3>
     </Flex>
-  ) : (
-    <ChoiceText>{t("syncOnboarding.manual.backup.manualBackup.shortDescription")}</ChoiceText>
-  );
+  ) : null;
 };
 
 const WrappedTag: React.FC<{ text: string } & ComponentProps<typeof Tag>> = ({
@@ -164,7 +156,10 @@ const WrappedTag: React.FC<{ text: string } & ComponentProps<typeof Tag>> = ({
 const choices: Choice[] = [
   {
     id: "backup",
-    title: "syncOnboarding.manual.backup.backupChoice.title",
+    getTitle: selected =>
+      selected
+        ? "syncOnboarding.manual.backup.backupChoice.titleSelected"
+        : "syncOnboarding.manual.backup.backupChoice.title",
     icon: <Icons.ShieldCheck size={"S"} color="primary.c80" />,
     tag: (
       <WrappedTag
@@ -178,17 +173,8 @@ const choices: Choice[] = [
   },
   {
     id: "keep_on_paper",
-    title: "syncOnboarding.manual.backup.manualBackup.title",
+    getTitle: () => "syncOnboarding.manual.backup.manualBackup.title",
     icon: <Icons.Note size={"S"} color="neutral.c80" />,
-    tag: (
-      <WrappedTag
-        text={"syncOnboarding.manual.backup.manualBackup.tag"}
-        type="opacity"
-        active
-        disabled
-        bg="opacityDefault.c10"
-      />
-    ),
     body: KeepOnPaperBody,
   },
 ];
@@ -213,7 +199,7 @@ const BackupStep: React.FC<Props> = props => {
       <TrackPage flow="Device onboarding" category="Backup for your Secret Recovery Phrase" />
       {/* @ts-expect-error weird props issue with React 18 */}
       <StepText mb={2}>{t("syncOnboarding.manual.backup.description")}</StepText>
-      {choices.map(({ id, title, icon, tag, body: Body }) => (
+      {choices.map(({ id, getTitle, icon, tag, body: Body }) => (
         <div key={id} onClick={() => setChoice(id)}>
           <Flex
             flexDirection={"column"}
@@ -224,13 +210,15 @@ const BackupStep: React.FC<Props> = props => {
             borderRadius={radii[2]}
             p={6}
           >
-            <Flex flexDirection="row" alignItems="center" justifyContent="flex-end" mb={3}>
+            <Flex flexDirection="row" alignItems="center" justifyContent="flex-end">
               <Flex flexDirection="row" alignItems="center" columnGap={3} flex={1}>
                 {icon}
                 {/* @ts-expect-error weird props issue with React 18 */}
-                <StepSubtitleText m={0}>{t(title)}</StepSubtitleText>
+                <StepSubtitleText m={0} ml={3}>
+                  {t(getTitle(choice === id))}
+                </StepSubtitleText>
               </Flex>
-              {tag}
+              {tag ?? null}
             </Flex>
             <Body
               isOpened={choice === id}

diff --git a/apps/ledger-live-desktop/static/i18n/en/app.json b/apps/ledger-live-desktop/static/i18n/en/app.json
@@ -1207,22 +1207,20 @@
       },
       "backup": {
         "title": "Backup for your Secret Recovery Phrase",
-        "description": "Having a backup ensures you never get locked out of your wallet when you can’t access your Phrase and your Ledger.\n\nChoose how you’d like to back up your Phrase:",
+        "description": "With a digital encrypted backup, restore access to your wallet without your Secret Recovery Phrase.\n\nChoose if you’d like a digital backup:",
         "backupChoice": {
-          "title": "Ledger Recover",
+          "title": "I want a digital backup",
+          "titleSelected": "Ledger Recover",
           "tag": "Popular",
-          "shortDescription": "Lets you restore wallet access anytime with an encrypted Phrase backup.",
-          "longDescription": "Get a secure and encrypted backup with a free 30-day trial, then $9.99/m.",
+          "description": "Subscribe to Ledger Recover for $9.99 per month. Start for free. Cancel anytime!",
           "tryCta": "Try it for free",
-          "redeemCodeCta": "Apply your redeem code",
-          "howItWorksCta": "How it works?"
+          "redeemCodeCta": "I have a redeem code",
+          "howItWorksCta": "I want to know more"
         },
         "manualBackup": {
-          "title": "Manual backup",
-          "tag": "Advanced",
-          "shortDescription": "Create your own paper backup to the Recovery Sheet and secure it at a different location.",
-          "longDescription": "Keep it on paper and place it in a safe location.",
-          "cta": "Keep it on paper"
+          "title": "No, I’m good with paper",
+          "description": "Without a digital backup, the Recovery Sheet is your only way to restore wallet access. Don’t lose it.",
+          "cta": "I understand"
         }
       },
       "softwareCheckContent": {