feat(ui): Update UI for seedphrase flow (#884)

Co-authored-by: Vu Van Duc <[email protected]>

src/locales/en/en.json

@@ -48,20 +48,65 @@
   },
   "generateseedphrase": {
     "onboarding": {
-      "title": "Generate recovery phrase",
+      "title": "Your recovery phrase",
       "paragraph": {
-        "top": "Think of your secret recovery phrase as a safety net for your identity. If you ever lose your phone or switch to a new wallet, this phrase will help you recover your identity.",
-        "bottom": "It's important to keep these words safe and sound! Store them in a secure location and remember to never share them with anyone."
+        "bottom": "Keep these words safe! Store them securely and never share them with anyone."
       },
       "button": {
-        "continue": "Generate",
-        "switch": "Switch to recover a wallet"
+        "continue": "Continue",
+        "switch": "Switch to recover a wallet",
+        "recoverydocumentation": "What’s a recovery phrase?"
+      },
+      "recoveryseedphrasedocs": {
+        "title": "Recovery phrase",
+        "button": {
+          "done": "Done"
+        },
+        "alert": "We can’t recover your wallet if you lose your recovery phrase. Keeping it safe means keeping your identity safe.",
+        "content": {
+          "what": {
+            "title": "What is a recovery phrase?",
+            "content": [
+              {
+                "text": "Your recovery phrase is like a master key for your wallet. It’s a unique set of 18 words that lets you securely access your identity wallet—even if you lose your phone or need to restore it on a new device."
+              }
+            ]
+          },
+          "why": {
+            "title": "Why is it so important?",
+            "content": [
+              {
+                "text": "<strong>Your wallet, your control:</strong> Unlike traditional accounts, no one—not even us—can reset your wallet for you. This keeps your identity and data secure and fully under your control."
+              },
+              {
+                "text": "<strong>One-of-a-kind key:</strong> The recovery phrase is the only way to restore your wallet if something happens to your device. Without it, you could permanently lose access to your identity."
+              },
+              {
+                "text": "<strong>Stay protected:</strong> Think of it like a spare key to your house. If you lose it, no one can unlock the door—even you!"
+              }
+            ]
+          },
+          "how": {
+            "title": "How to keep it safe:",
+            "content": [
+              {
+                "text": "<strong>Write it down:</strong> Store it somewhere secure, like a locked drawer or safe."
+              },
+              {
+                "text": "<strong>Don’t share it:</strong> Anyone with your recovery phrase can access your wallet. Keep it private."
+              },
+              {
+                "text": "<strong>No screenshots:</strong> Don’t save it on your phone or in the cloud—this protects it from hackers."
+              }
+            ]
+          }
+        }
       }
     },
     "segment": "{{length}} words",
     "privacy": {
       "overlay": {
-        "text": "Press the ‘view’ button when you’re ready to see your recovery phrase. Remember to make sure nobody is looking!",
+        "text": "Press the ‘view recovery phrase’ button when you’re ready to see your recovery phrase. Remember to make sure nobody is looking!",
         "button": "View Recovery Phrase"
       }
     },
@@ -1819,4 +1864,4 @@
     "more": "Read more",
     "less": "Read less"
   }
-}
+}

src/ui/App.scss

@@ -181,6 +181,10 @@ p {
 .tertiary-button {
   --color: var(--ion-color-primary);
   --background: transparent;
+
+  ion-icon {
+    margin-right: 0.5rem;
+  }
 }
 
 .delete-button,

src/ui/components/InfoCard/InfoCard.scss

@@ -6,6 +6,18 @@
     color: var(--ion-color-secondary);
     padding: 1rem 1.25rem;
 
+    &.danger {
+        &.info-card {
+          background: rgba(var(--ion-color-danger-rgb), 0.1);
+
+          .alert-icon {
+            ion-icon {
+              color: var(--ion-color-danger);
+            }
+          }
+        }
+      }
+
     p {
         margin: 0;
     }

src/ui/components/InfoCard/InfoCard.tsx

@@ -4,8 +4,10 @@ import { InfoCardProps } from "./InfoCard.types";
 import { combineClassNames } from "../../utils/style";
 import "./InfoCard.scss";
 
-const InfoCard = ({content ,className, icon}: InfoCardProps) => {
-  const classes = combineClassNames("info-card", className);
+const InfoCard = ({content ,className, icon, danger}: InfoCardProps) => {
+  const classes = combineClassNames("info-card", className, {
+    "danger": !!danger
+  });
 
   return (
     <IonCard className={classes}>

src/ui/components/InfoCard/InfoCard.types.ts

@@ -2,6 +2,7 @@ interface InfoCardProps {
     content: string;
     className?: string;
     icon?: string;
+    danger?: boolean;
 }
 
 export type { InfoCardProps };

src/ui/components/RecoverySeedPhraseModule/RecoverySeedPhraseModule.tsx

@@ -1,6 +1,6 @@
 import { IonButton, IonIcon } from "@ionic/react";
 import { wordlists } from "bip39";
-import { closeOutline } from "ionicons/icons";
+import { closeOutline, refreshOutline } from "ionicons/icons";
 import { forwardRef, useImperativeHandle, useRef, useState } from "react";
 import { Agent } from "../../../core/agent/agent";
 import { i18n } from "../../../i18n";
@@ -11,8 +11,8 @@ import { Alert as AlertFail } from "../Alert";
 import { PageFooter } from "../PageFooter";
 import { SeedPhraseModule } from "../SeedPhraseModule";
 import { SeedPhraseModuleRef } from "../SeedPhraseModule/SeedPhraseModule.types";
-import { SwitchOnboardingMode } from "../SwitchOnboardingMode";
-import { OnboardingMode } from "../SwitchOnboardingMode/SwitchOnboardingMode.types";
+import { SwitchOnboardingModeModal } from "../SwitchOnboardingModeModal";
+import { OnboardingMode } from "../SwitchOnboardingModeModal/SwitchOnboardingModeModal.types";
 import "./RecoverySeedPhraseModule.scss";
 import {
   RecoverySeedPhraseModuleProps,
@@ -44,7 +44,7 @@ const RecoverySeedPhraseModule = forwardRef<
 
     const [alertIsOpen, setAlertIsOpen] = useState(false);
     const [clearAlertOpen, setClearAlertOpen] = useState(false);
-
+    const [showSwitchModeModal, setSwitchModeModal] = useState(false);
     const [seedPhraseInfo, setSeedPhraseInfo] = useState<SeedPhraseInfo[]>([
       {
         value: "",
@@ -289,9 +289,6 @@ const RecoverySeedPhraseModule = forwardRef<
                 {i18n.t("verifyrecoveryseedphrase.button.clear")}
               </IonButton>
             )}
-            {displaySwitchModeButton && (
-              <SwitchOnboardingMode mode={OnboardingMode.Create} />
-            )}
           </div>
           <PageFooter
             pageId={testId}
@@ -302,6 +299,9 @@ const RecoverySeedPhraseModule = forwardRef<
               displaySuggestionError ||
               !isMatchAllSuggestion
             }
+            tertiaryButtonText={displaySwitchModeButton ? `${i18n.t("verifyrecoveryseedphrase.button.switch")}` : undefined}
+            tertiaryButtonAction={() => setSwitchModeModal(true)}
+            tertiaryButtonIcon={refreshOutline}
           />
         </div>
         <AlertFail
@@ -332,6 +332,7 @@ const RecoverySeedPhraseModule = forwardRef<
           actionCancel={closeClearAlert}
           actionDismiss={closeClearAlert}
         />
+        <SwitchOnboardingModeModal mode={OnboardingMode.Create} isOpen={showSwitchModeModal} setOpen={setSwitchModeModal}/>
       </>
     );
   }