feat: new ui for mnemonic onboarding

package.json

@@ -42,7 +42,7 @@
     "@lightninglabs/lnc-web": "^0.2.4-alpha",
     "@noble/curves": "^1.1.0",
     "@noble/secp256k1": "^2.0.0",
-    "@popicons/react": "^0.0.8",
+    "@popicons/react": "^0.0.9",
     "@scure/bip32": "^1.3.1",
     "@scure/bip39": "^1.2.1",
     "@tailwindcss/forms": "^0.5.4",

src/app/components/ContentBox/index.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 export function ContentBox({ children }: React.PropsWithChildren<object>) {
   return (
-    <div className="mt-6 bg-white rounded-md p-8 border border-gray-200 dark:border-neutral-700 dark:bg-surface-01dp flex flex-col gap-6">
+    <div className="mt-6 bg-white rounded-2xl p-10 border border-gray-200 dark:border-neutral-700 dark:bg-surface-01dp flex flex-col gap-6">
       {children}
     </div>
   );

src/app/components/form/Input/index.tsx

@@ -50,7 +50,7 @@ export default function Input({
           : "pr-0 border-0 focus:ring-0",
         disabled
           ? "bg-gray-50 dark:bg-surface-01dp text-gray-500 dark:text-neutral-500"
-          : "bg-white dark:bg-black dark:text-white",
+          : "bg-gray-100 dark:bg-black dark:text-white",
         !!className && className
       )}
       placeholder={placeholder}
@@ -83,7 +83,7 @@ export default function Input({
       {inputNode}
       {suffix && (
         <span
-          className="flex items-center px-3 font-medium bg-white dark:bg-surface-00dp dark:text-white"
+          className="flex items-center px-3 font-medium bg-gray-100 dark:bg-surface-00dp dark:text-white"
           onClick={() => {
             inputEl.current?.focus();
           }}
@@ -94,7 +94,7 @@ export default function Input({
       {endAdornment && (
         <span
           className={classNames(
-            "flex items-center bg-white dark:bg-black dark:text-neutral-400",
+            "flex items-center bg-gray-100 dark:bg-black dark:text-neutral-400",
             !!disabled && "bg-gray-50 dark:bg-surface-01dp"
           )}
         >

src/app/components/mnemonic/MnemonicBackupDescription/index.tsx

@@ -0,0 +1,68 @@
+import {
+  PopiconsLifebuoyLine,
+  PopiconsShieldLine,
+  PopiconsTriangleExclamationLine,
+} from "@popicons/react";
+import { useTranslation } from "react-i18next";
+import { classNames } from "~/app/utils";
+
+function MnemonicBackupDescription() {
+  const { t } = useTranslation("translation", {
+    keyPrefix: "accounts.account_view.mnemonic",
+  });
+
+  return (
+    <>
+      <div className="flex flex-col gap-4">
+        <ListItem
+          icon={<PopiconsLifebuoyLine />}
+          title={t("backup.items.recovery_phrase")}
+          type="info"
+        />
+        <ListItem
+          icon={<PopiconsShieldLine />}
+          title={t("backup.items.secure_recovery_phrase")}
+          type="info"
+        />
+        <ListItem
+          icon={<PopiconsTriangleExclamationLine />}
+          title={t("backup.items.warning")}
+          type="warn"
+        />
+      </div>
+    </>
+  );
+}
+
+export default MnemonicBackupDescription;
+
+type ListItemProps = {
+  icon: React.ReactNode;
+  title: string;
+  type: "warn" | "info";
+};
+
+function ListItem({ icon, title, type }: ListItemProps) {
+  return (
+    <div className="flex gap-2 items-center">
+      <div
+        className={classNames(
+          type == "warn" && "text-orange-700 dark:text-orange-200",
+          "shrink-0",
+          type == "info" && "text-gray-600 dark:text-neutral-400"
+        )}
+      >
+        {icon}
+      </div>
+      <span
+        className={classNames(
+          type == "warn" && "text-orange-700 dark:text-orange-200",
+          type == "info" && "text-gray-600 dark:text-neutral-400",
+          "text-sm"
+        )}
+      >
+        {title}
+      </span>
+    </div>
+  );
+}

src/app/components/mnemonic/MnemonicDescription/index.tsx

@@ -1,26 +1,26 @@
-import {
-  KeyIcon,
-  MnemonicIcon,
-  PasswordIcon,
-  SafeIcon,
-} from "@bitcoin-design/bitcoin-icons-react/outline";
+import { PopiconsDownloadLine, PopiconsKeyLine } from "@popicons/react";
 import { useTranslation } from "react-i18next";
+import { useTheme } from "~/app/utils";
 
 function MnemonicDescription() {
   const { t } = useTranslation("translation", {
     keyPrefix: "accounts.account_view.mnemonic",
   });
 
+  const theme = useTheme();
+
   return (
     <>
-      <div className="flex flex-col gap-2">
-        <ListItem icon={<KeyIcon />} title={t("backup.items.keys")} />
+      <div className="flex flex-col gap-4">
+        <ListItem icon={<PopiconsKeyLine />} title={t("new.items.keys")} />
+        <ListItem
+          icon={<img src={`assets/images/face_surprise_${theme}.png`} />}
+          title={t("new.items.usage")}
+        />
         <ListItem
-          icon={<MnemonicIcon />}
-          title={t("backup.items.recovery_phrase")}
+          icon={<PopiconsDownloadLine />}
+          title={t("new.items.recovery_phrase")}
         />
-        <ListItem icon={<PasswordIcon />} title={t("backup.items.words")} />
-        <ListItem icon={<SafeIcon />} title={t("backup.items.storage")} />
       </div>
     </>
   );
@@ -33,10 +33,10 @@ type ListItemProps = { icon: React.ReactNode; title: string };
 function ListItem({ icon, title }: ListItemProps) {
   return (
     <div className="flex gap-2 items-center">
-      <div className="shrink-0 w-8 h-8 text-gray-600 dark:text-neutral-400">
-        {icon}
-      </div>
-      <span className="text-gray-600 dark:text-neutral-400">{title}</span>
+      <div className="shrink-0 text-gray-600 dark:text-neutral-400">{icon}</div>
+      <span className="text-gray-600 text-sm dark:text-neutral-400">
+        {title}
+      </span>
     </div>
   );
 }

src/app/components/mnemonic/MnemonicInputs/index.tsx

@@ -29,7 +29,7 @@ export default function MnemonicInputs({
   }
 
   return (
-    <div className="border border-gray-200 dark:border-neutral-700 rounded-lg p-6 flex flex-col gap-4 items-center justify-center">
+    <div className="border border-gray-200 dark:border-neutral-700 rounded-2xl p-6 flex flex-col gap-4 items-center justify-center">
       <h3 className="text-lg font-semibold dark:text-white">
         {t("inputs.title")}
       </h3>
@@ -50,7 +50,7 @@ export default function MnemonicInputs({
                   onBlur={() => setRevealedIndex(undefined)}
                   readOnly={readOnly}
                   block={false}
-                  className="w-32 text-center"
+                  className="w-full text-center"
                   list={readOnly ? undefined : "wordlist"}
                   value={isRevealed ? word : word.length ? "•••••" : ""}
                   onChange={(e) => {

src/app/screens/Accounts/BackupMnemonic/index.tsx

@@ -6,7 +6,7 @@ import { useNavigate, useParams } from "react-router-dom";
 import Button from "~/app/components/Button";
 import { ContentBox } from "~/app/components/ContentBox";
 import toast from "~/app/components/Toast";
-import MnemonicDescription from "~/app/components/mnemonic/MnemonicDescription";
+import MnemonicBackupDescription from "~/app/components/mnemonic/MnemonicBackupDescription";
 import MnemonicInputs from "~/app/components/mnemonic/MnemonicInputs";
 import api from "~/common/lib/api";
 
@@ -49,15 +49,18 @@ function BackupMnemonic() {
           <h1 className="font-bold text-2xl dark:text-white">
             {t("backup.title")}
           </h1>
-          <MnemonicDescription />
+          <MnemonicBackupDescription />
           <MnemonicInputs mnemonic={mnemonic} readOnly />
+
+          <div className="flex justify-center mt-6 w-64 mx-auto">
+            <Button
+              label={tCommon("actions.finish")}
+              primary
+              flex
+              onClick={() => navigate(-1)}
+            />
+          </div>
         </ContentBox>
-        <div className="flex justify-center my-6 gap-4">
-          <Button
-            label={tCommon("actions.back")}
-            onClick={() => navigate(-1)}
-          />
-        </div>
       </Container>
     </div>
   );

src/app/screens/Accounts/GenerateMnemonic/new.tsx

@@ -1,6 +1,6 @@
 import Container from "@components/Container";
 import { useTranslation } from "react-i18next";
-import { useNavigate, useParams } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import Button from "~/app/components/Button";
 import { ContentBox } from "~/app/components/ContentBox";
 import MnemonicDescription from "~/app/components/mnemonic/MnemonicDescription";
@@ -9,37 +9,32 @@ import { useTheme } from "~/app/utils";
 function MnemonicExplanation() {
   const navigate = useNavigate();
   const theme = useTheme();
-  const { id } = useParams() as { id: string };
 
   const { t } = useTranslation("translation", {
     keyPrefix: "accounts.account_view.mnemonic.new",
   });
   const { t: tCommon } = useTranslation("common");
 
-  function cancel() {
-    // go to account settings
-    navigate(`/accounts/${id}`);
-  }
-
   return (
     <Container>
       <ContentBox>
         <h1 className="font-bold text-2xl dark:text-white">{t("title")}</h1>
+        <MnemonicDescription />
         <img
           src={`assets/images/master_key_${theme}.png`}
           alt="Master Key"
           className="max-w-[412px] mx-auto w-full"
         />
-        <MnemonicDescription />
+
+        <div className="flex justify-center mt-6 w-64 mx-auto">
+          <Button
+            label={tCommon("actions.continue")}
+            primary
+            flex
+            onClick={() => navigate("../secret-key/generate")}
+          />
+        </div>
       </ContentBox>
-      <div className="flex justify-center my-6 gap-4">
-        <Button label={tCommon("actions.cancel")} onClick={cancel} />
-        <Button
-          label={tCommon("actions.continue")}
-          primary
-          onClick={() => navigate("../secret-key/generate")}
-        />
-      </div>
     </Container>
   );
 }

src/i18n/locales/en/translation.json

@@ -1,4 +1,4 @@
 {
   "translation": {
     "welcome": {
       "title": "Welcome to Alby",
@@ -400,7 +400,12 @@
           "saved": "Master Key encrypted & saved successfully.",
           "existing_nostr_key_notice": "ℹ️ This account already has a nostr private key set and will not be derived from this Master Key. You can manage your Nostr key from your account settings.",
           "new": {
-            "title": "What is a Master Key?"
+            "title": "What is a Master Key?",
+            "items": {
+              "keys": "Master Key is your identity that allows you to interact with protocols like Nostr, Liquid Network or base layer of bitcoin",
+              "usage": "You can import and use the same Master Key in each connected wallet in the Alby Extension",
+              "recovery_phrase": "You can import and use the same Master Key in each connected wallet in the Alby Extension"
+            }
           },
           "generate": {
             "title": "Generate new Master Key",
@@ -410,16 +415,15 @@
             "error_confirm": "Please confirm that you have backed up the recovery phrase."
           },
           "backup": {
-            "title": "Back up your recovery phrase",
+            "title": "Back up your Master Key",
             "save": "Save Master Key",
             "button": "View recovery phrase",
             "warning": "⚠️ Don't forget to back up your recovery phrase! Not backing it up might result in permanently losing access to your Master Key, Nostr identity or assets you manage with this key.",
             "description": "Write down the recovery phrase to be able to restore your Master Key on a new device or in case you lose access to your account.",
             "items": {
-              "keys": "Master Key allows you to interact with various protocols such as: Nostr, Liquid or base layer of Bitcoin.",
-              "recovery_phrase": "You can always access your Master Key by using it's recovery phrase.",
-              "words": "Recovery phrase is set of 12 words that works like a password, however it can't be changed or reset in case it's lost.",
-              "storage": "Make sure to write it down somewhere safe and private!"
+              "warning": "Recovery phrase cannot recover this wallet or funds in it. It only recovers the identity you can use across aforementioned protocols",
+              "secure_recovery_phrase": "Make sure to write them down somewhere safe and and keep them private",
+              "recovery_phrase": "Recovery phrase is set of 12 words that backs up your Master Key"
             },
             "protocols": {
               "nostr": "Nostr"
@@ -431,7 +435,7 @@
             "button": "Import Master Key"
           },
           "inputs": {
-            "title": "Recovery Phrase"
+            "title": "Recovery phrase to your Master Key"
           },
           "lnurl": {
             "title": "Login with Lightning",
@@ -1028,6 +1032,7 @@
       "cancel": "Cancel",
       "confirm": "Confirm",
       "continue": "Continue",
+      "finish": "Finish",
       "connect": "Connect",
       "lock": "Lock",
       "unlock": "Unlock",

yarn.lock

@@ -1127,10 +1127,10 @@
   resolved "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.21.tgz"
   integrity sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==
 
-"@popicons/react@^0.0.8":
-  version "0.0.8"
-  resolved "https://registry.yarnpkg.com/@popicons/react/-/react-0.0.8.tgz#b329abf0f0f12da76e6eb1a1824f075cac23eb2d"
-  integrity sha512-/WyuFuSAThK9zCHiIY7N+jxAWnqu4C8kkhXIkj5PcPlBYGKw9T93UheWz+KkSLnAQIUI+jovVrSMV/AZuPROqg==
+"@popicons/react@^0.0.9":
+  version "0.0.9"
+  resolved "https://registry.yarnpkg.com/@popicons/react/-/react-0.0.9.tgz#4dd1e83dcb8a121258f0a074f5f4ce6954718efb"
+  integrity sha512-uS3/R4JriCX96CmULktVG0KLoOfapWbKXc+R8Z07G8FWY2O+YrMTufc/sgTCnH+y3SFScI5FV3peX0FWKGLzKQ==
 
 "@puppeteer/[email protected]":
   version "1.8.0"