Merge pull request #3285 from getAlby/import-nostr-key

feat: separate card for just importing nostr key
getAlby · Dec 11, 2024 · 0dd9d2d · 0dd9d2d
2 parents 6f08fe9 + f1ce43f
commit 0dd9d2d
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 27 deletions.
diff --git a/src/app/components/CardButton/Group.tsx b/src/app/components/CardButton/Group.tsx
@@ -3,7 +3,5 @@ export type Props = {
 };
 
 export default function CardButtonGroup({ children }: Props) {
-  return (
-    <div className="grid gap-5 grid-cols-1 sm:grid-cols-2">{children}</div>
-  );
+  return <div className="flex flex-col sm:flex-row gap-5">{children}</div>;
 }
diff --git a/src/app/components/CardButton/index.tsx b/src/app/components/CardButton/index.tsx
@@ -21,14 +21,14 @@ export default function CardButton({
 }: Props) {
   return (
     <button
-      className="flex flex-col flex-1 text-left border border-gray-200 dark:border-neutral-700 rounded-md p-6 bg-white dark:bg-surface-01dp hover:bg-gray-100 dark:hover:bg-surface-02dp hover:border-gray-300 dark:hover:border-neutral-700 focus:bg-amber-50 dark:focus:bg-surface-02dp cursor-pointer focus:ring-primary focus:border-primary dark:focus:border-primary focus:ring-1 gap-2"
+      className="flex flex-col flex-1 text-left border border-gray-200 dark:border-neutral-700 rounded-xl p-6 bg-white dark:bg-surface-01dp hover:bg-gray-100 dark:hover:bg-surface-02dp hover:border-gray-300 dark:hover:border-neutral-700 focus:bg-amber-50 dark:focus:bg-surface-02dp cursor-pointer focus:ring-primary focus:border-primary dark:focus:border-primary focus:ring-1 gap-2"
       onClick={onClick}
     >
       <Icon className="w-8 h-8 text-gray-700 dark:text-white" />
-      <h3 className="font-medium leading-6 text-md text-gray-800 dark:text-neutral-200">
+      <h3 className="font-medium leading-6 text-sm text-gray-800 dark:text-neutral-200">
         {title}
       </h3>
-      <p className="text-gray-600 dark:text-neutral-400 text-sm leading-5">
+      <p className="text-gray-600 dark:text-neutral-400 text-xs leading-5">
         {description}
       </p>
     </button>

diff --git a/src/app/screens/Accounts/GenerateMnemonic/new.tsx b/src/app/screens/Accounts/GenerateMnemonic/new.tsx
@@ -1,8 +1,12 @@
 import Container from "@components/Container";
-import { PopiconsDownloadLine, PopiconsKeyLine } from "@popicons/react";
+import {
+  PopiconsDownloadLine,
+  PopiconsOstrichLine,
+  PopiconsShieldLine,
+} from "@popicons/react";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Link, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import Button from "~/app/components/Button";
 import CardButton from "~/app/components/CardButton";
 import CardButtonGroup from "~/app/components/CardButton/Group";
@@ -43,15 +47,6 @@ function MnemonicExplanation() {
 
   return (
     <Container maxWidth="md">
-      <div className="flex justify-end mt-6 -mb-4 text-xs">
-        <Link
-          to="../../nostr/settings"
-          relative="path"
-          className="text-blue-600 hover:text-blue-700"
-        >
-          {t("nostr")}
-        </Link>
-      </div>
       <ContentBox>
         <div className="flex flex-col gap-4">
           <h1 className="font-bold text-2xl dark:text-white">{t("title")}</h1>
@@ -67,7 +62,7 @@ function MnemonicExplanation() {
             <CardButton
               title={t("secure.title")}
               description={t("secure.description")}
-              icon={PopiconsKeyLine}
+              icon={PopiconsShieldLine}
               onClick={() => setSelectedCard("backup")}
             />
             <CardButton
@@ -76,6 +71,12 @@ function MnemonicExplanation() {
               icon={PopiconsDownloadLine}
               onClick={() => setSelectedCard("import")}
             />
+            <CardButton
+              title={t("import_nostr.title")}
+              description={t("import_nostr.description")}
+              icon={PopiconsOstrichLine}
+              onClick={() => setSelectedCard("importNostr")}
+            />
           </CardButtonGroup>
         </div>
 
@@ -84,13 +85,17 @@ function MnemonicExplanation() {
             label={tCommon("actions.next")}
             primary
             flex
-            onClick={() =>
-              selectedCard == "backup"
-                ? hasMnemonic
+            onClick={() => {
+              if (selectedCard === "backup") {
+                hasMnemonic
                   ? navigate("../secret-key/backup")
-                  : navigate("../secret-key/generate")
-                : navigate("../secret-key/import")
-            }
+                  : navigate("../secret-key/generate");
+              } else if (selectedCard === "import") {
+                navigate("../secret-key/import");
+              } else if (selectedCard === "importNostr") {
+                navigate("../nostr/settings");
+              }
+            }}
           />
         </div>
       </ContentBox>

diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json
@@ -453,19 +453,22 @@
           "error_confirm": "Please confirm that you have backed up the recovery phrase.",
           "new": {
             "title": "Setup Master Key",
-            "nostr": "Import an existing Nostr account",
             "items": {
               "keys": "Master Key allows you to interact with protocols like <0>Nostr</0>, <0>Liquid</0> or <0>base layer of Bitcoin</0>",
               "usage": "You can import and use the same Master Key in <0>each connected wallet in Alby</0>",
               "nostr_key": "You can always import existing keys Nostr and override those generated by Master Key"
             },
             "secure": {
-              "title": "Secure Your Master Key",
+              "title": "Secure Master Key",
               "description": "Get to know what Master Key is and back up 12-words recovery phrase"
             },
             "import": {
-              "title": "Have a Master key Already?",
+              "title": "Import Master Key",
               "description": "Enter your recovery phrase to import Master Key into this wallet"
+            },
+            "import_nostr": {
+              "title": "Import Nostr Key",
+              "description": "Have a Nostr identity already? Import it to use it with this account"
             }
           },
           "generate": {