fix: remove nostr setup, replace component with existing one

getAlby · Mar 11, 2024 · 79f4fcb · 79f4fcb
1 parent 5e714c7
commit 79f4fcb
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 211 deletions.
diff --git a/src/app/components/CardButton/Group.tsx b/src/app/components/CardButton/Group.tsx
@@ -3,5 +3,7 @@ export type Props = {
 };
 
 export default function CardButtonGroup({ children }: Props) {
-  return <div className="grid gap-5 grid-cols-2">{children}</div>;
+  return (
+    <div className="grid gap-5 grid-cols-1 sm:grid-cols-2">{children}</div>
+  );
 }
diff --git a/src/app/components/CardButton/index.tsx b/src/app/components/CardButton/index.tsx
@@ -3,34 +3,30 @@ import React from "react";
 export type Props = {
   title: string;
   description: string;
-  icon: IconType;
+  icon: React.ComponentType<{
+    className?: string;
+  }>;
   onClick: () => void;
 };
 
-interface IconTypeProps {
-  className: string;
-}
-
-type IconType = (props: IconTypeProps) => JSX.Element;
-
 export default function CardButton({
   title,
   description,
-  icon,
+  icon: Icon,
   onClick,
 }: Props) {
   return (
-    <div
-      className="flex flex-col gap-2 p-5 hover:bg-gray-50 dark:hover:bg-surface-08dp rounded-md border border-gray-200 dark:border-neutral-700 hover:border-gray-300 hover:dark:border-neutral-800 cursor-pointer"
+    <button
+      className="flex flex-col flex-1 text-left border border-gray-200 dark:border-neutral-800 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 focus:ring-1 gap-2"
       onClick={onClick}
     >
-      {React.createElement(icon, {
-        className: "w-8 h-8 text-gray-700 dark:text-white",
-      })}
-      <h3 className="font-medium text-gray-700 dark:text-neutral-200">
+      <Icon className="w-8 h-8 text-gray-700 dark:text-white" />
+      <h3 className="font-medium leading-7 text-md text-gray-800 dark:text-neutral-200">
         {title}
       </h3>
-      <p className="text-gray-500 dark:text-neutral-500">{description}</p>
-    </div>
+      <p className="text-gray-600 dark:text-neutral-400 text-sm leading-6">
+        {description}
+      </p>
+    </button>
   );
 }
diff --git a/src/app/components/ExtensionKeyCard/index.tsx b/src/app/components/ExtensionKeyCard/index.tsx
diff --git a/src/app/router/Options/Options.tsx b/src/app/router/Options/Options.tsx
@@ -31,7 +31,6 @@ import GenerateMnemonic from "~/app/screens/Accounts/GenerateMnemonic";
 import NewMnemonic from "~/app/screens/Accounts/GenerateMnemonic/new";
 import ImportMnemonic from "~/app/screens/Accounts/ImportMnemonic";
 import NostrSettings from "~/app/screens/Accounts/NostrSettings";
-import NostrSetup from "~/app/screens/Accounts/NostrSetup/NostrSetup";
 
 import LNURLRedeem from "~/app/screens/LNURLRedeem";
 import OnChainReceive from "~/app/screens/OnChainReceive";
@@ -94,7 +93,6 @@ function Options() {
                 <Route path="secret-key/new" element={<NewMnemonic />} />
                 <Route path="secret-key/import" element={<ImportMnemonic />} />
                 <Route path="nostr/settings" element={<NostrSettings />} />
-                <Route path="nostr/setup" element={<NostrSetup />} />
               </Route>
 
               <Route

diff --git a/src/app/screens/Accounts/GenerateMnemonic/new.tsx b/src/app/screens/Accounts/GenerateMnemonic/new.tsx
@@ -4,8 +4,9 @@ import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link, useNavigate } from "react-router-dom";
 import Button from "~/app/components/Button";
+import CardButton from "~/app/components/CardButton";
+import CardButtonGroup from "~/app/components/CardButton/Group";
 import { ContentBox } from "~/app/components/ContentBox";
-import { ExtensionKeyCard } from "~/app/components/ExtensionKeyCard";
 import MnemonicDescription from "~/app/components/mnemonic/MnemonicDescription";
 import { useTheme } from "~/app/utils";
 import api from "~/common/lib/api";
@@ -19,8 +20,7 @@ function MnemonicExplanation() {
   });
   const { t: tCommon } = useTranslation("common");
 
-  const [cardSelected, setIsCardSelected] = useState("backup");
-
+  const [selectedCard, setSelectedCard] = useState("backup");
   const [hasMnemonic, setHasMnemonic] = useState(false);
 
   useEffect(() => {
@@ -62,27 +62,20 @@ function MnemonicExplanation() {
         />
 
         <div className="flex flex-row justify-between gap-x-6">
-          <ExtensionKeyCard
-            title={t("secure.title")}
-            description={t("secure.description")}
-            icon={
-              <PopiconsKeyLine className="w-8 h-8 text-gray-600 dark:text-neutral-400" />
-            }
-            onClick={async () => {
-              setIsCardSelected("backup");
-            }}
-          />
-
-          <ExtensionKeyCard
-            title={t("import.title")}
-            description={t("import.description")}
-            icon={
-              <PopiconsDownloadLine className="w-8 h-8 text-gray-600 dark:text-neutral-400" />
-            }
-            onClick={async () => {
-              setIsCardSelected("import");
-            }}
-          />
+          <CardButtonGroup>
+            <CardButton
+              title={t("secure.title")}
+              description={t("secure.description")}
+              icon={PopiconsKeyLine}
+              onClick={() => setSelectedCard("backup")}
+            />
+            <CardButton
+              title={t("import.title")}
+              description={t("import.description")}
+              icon={PopiconsDownloadLine}
+              onClick={() => setSelectedCard("import")}
+            />
+          </CardButtonGroup>
         </div>
 
         <div className="flex justify-center w-64 mx-auto">
@@ -91,7 +84,7 @@ function MnemonicExplanation() {
             primary
             flex
             onClick={() =>
-              cardSelected == "backup"
+              selectedCard == "backup"
                 ? hasMnemonic
                   ? navigate("../secret-key/backup")
                   : navigate("../secret-key/generate")

diff --git a/src/app/screens/Accounts/NostrSetup/NostrSetup.tsx b/src/app/screens/Accounts/NostrSetup/NostrSetup.tsx
diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json
@@ -485,21 +485,7 @@
             "new": {
               "label": "Create a new Nostr account",
               "description": "Generate a Master Key with a pair of new Nostr keys."
-            },
-            "import": {
-              "label": "Import a Nostr account",
-              "description": "Use an existing Nostr private key or derive it from your Master Key",
-              "title": "How would you like to import your Nostr account?",
-              "private_key": {
-                "label": "Use Nostr private key",
-                "description": "Paste your Nostr private key to import it to Alby"
-              },
-              "recovery_phrase": {
-                "label": "Use recovery phrase",
-                "description": "Use Master key recovery phrase to import your Nostr keys"
-              }
-            },
-            "new_to_nostr": "New to Nostr? <0>Learn more</0>"
+            }
           },
           "private_key": {
             "title": "Manage your Nostr private key",