Merge pull request #2598 from getAlby/feat/secret-key-rename

fix: rename secret key to master key
getAlby · Jul 28, 2023 · a7613b1 · a7613b1
2 parents 84fe120 + 9441cf6
commit a7613b1
Show file tree

Hide file tree

Showing 13 changed files with 131 additions and 116 deletions.
diff --git a/src/app/components/Alert/index.tsx b/src/app/components/Alert/index.tsx
@@ -9,7 +9,7 @@ export default function Alert({ type, children }: Props) {
   return (
     <div
       className={classNames(
-        "rounded-md font-medium p-4",
+        "rounded-md p-4",
         type == "warn" &&
           "text-orange-700 bg-orange-50 dark:text-orange-200 dark:bg-orange-900",
         type == "info" &&

diff --git a/src/app/components/mnemonic/MnemonicInputs/index.tsx b/src/app/components/mnemonic/MnemonicInputs/index.tsx
@@ -32,8 +32,10 @@ export default function MnemonicInputs({
   }
 
   return (
-    <div className="border-[1px] border-gray-200 rounded-lg py-8 px-4 flex flex-col gap-8 items-center justify-center w-[580px] self-center">
-      <h3 className="font-semibold dark:text-white">{t("inputs.title")}</h3>
+    <div className="border border-gray-200 rounded-lg p-8 flex flex-col gap-8 items-center justify-center max-w-[580px] self-center">
+      <h3 className="text-lg font-semibold dark:text-white">
+        {t("inputs.title")}
+      </h3>
       <div className="flex flex-wrap gap-4 justify-center items-center">
         {words.map((word, i) => {
           const isRevealed = revealedIndex === i;

diff --git a/src/app/components/mnemonic/SecretKeyDescription/index.tsx b/src/app/components/mnemonic/SecretKeyDescription/index.tsx
@@ -1,5 +1,9 @@
+import {
+  MnemonicIcon,
+  PasswordIcon,
+  SafeIcon,
+} from "@bitcoin-design/bitcoin-icons-react/outline";
 import { useTranslation } from "react-i18next";
-import NostrIcon from "~/app/icons/NostrIcon";
 
 function SecretKeyDescription() {
   const { t } = useTranslation("translation", {
@@ -8,31 +12,28 @@ function SecretKeyDescription() {
 
   return (
     <>
-      <p className="text-gray-500 dark:text-neutral-500">
-        {t("backup.description1")}
-      </p>
       <div className="flex flex-col gap-4">
-        <ProtocolListItem
-          icon={<NostrIcon className="text-gray-500 dark:text-neutral-500" />}
-          title={t("backup.protocols.nostr")}
+        <ListItem
+          icon={<MnemonicIcon />}
+          title={t("backup.items.recovery_phrase")}
         />
+        <ListItem icon={<PasswordIcon />} title={t("backup.items.words")} />
+        <ListItem icon={<SafeIcon />} title={t("backup.items.storage")} />
       </div>
-
-      <p className="mb-8 text-gray-500 dark:text-neutral-500">
-        {t("backup.description2")}
-      </p>
     </>
   );
 }
 
 export default SecretKeyDescription;
 
-type ProtocolListItemProps = { icon: React.ReactNode; title: string };
+type ListItemProps = { icon: React.ReactNode; title: string };
 
-function ProtocolListItem({ icon, title }: ProtocolListItemProps) {
+function ListItem({ icon, title }: ListItemProps) {
   return (
-    <div className="flex gap-2">
-      {icon}
+    <div className="flex gap-2 items-center">
+      <div className="shrink-0 w-8 h-8 text-gray-500 dark:text-neutral-500">
+        {icon}
+      </div>
       <span className="text-gray-500 dark:text-neutral-500">{title}</span>
     </div>
   );

diff --git a/src/app/screens/Accounts/BackupSecretKey/index.tsx b/src/app/screens/Accounts/BackupSecretKey/index.tsx
@@ -2,17 +2,20 @@ import Container from "@components/Container";
 import Loading from "@components/Loading";
 import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import { toast } from "react-toastify";
+import Button from "~/app/components/Button";
 import { ContentBox } from "~/app/components/ContentBox";
 import MnemonicInputs from "~/app/components/mnemonic/MnemonicInputs";
 import SecretKeyDescription from "~/app/components/mnemonic/SecretKeyDescription";
 import api from "~/common/lib/api";
 
 function BackupSecretKey() {
+  const { t: tCommon } = useTranslation("common");
   const { t } = useTranslation("translation", {
     keyPrefix: "accounts.account_view.mnemonic",
   });
+  const navigate = useNavigate();
 
   const [mnemonic, setMnemonic] = useState<string | undefined>();
   const [loading, setLoading] = useState<boolean>(true);
@@ -49,6 +52,12 @@ function BackupSecretKey() {
           <SecretKeyDescription />
           <MnemonicInputs mnemonic={mnemonic} readOnly />
         </ContentBox>
+        <div className="flex justify-center mt-8 mb-16 gap-4">
+          <Button
+            label={tCommon("actions.back")}
+            onClick={() => navigate(-1)}
+          />
+        </div>
       </Container>
     </div>
   );

diff --git a/src/app/screens/Accounts/Detail/index.tsx b/src/app/screens/Accounts/Detail/index.tsx
@@ -316,12 +316,9 @@ function AccountDetail() {
             )}
           </div>
 
-          <h2 className="text-2xl mt-12 font-bold dark:text-white">
+          <h2 className="text-2xl mt-12 mb-6 font-bold dark:text-white">
             {t("mnemonic.title")}
           </h2>
-          <p className="mb-6 text-gray-500 dark:text-neutral-500 text-sm">
-            {t("mnemonic.description")}
-          </p>
 
           <div className="shadow bg-white sm:rounded-md sm:overflow-hidden p-6 dark:bg-surface-02dp flex flex-col gap-4">
             {hasMnemonic && (
@@ -338,7 +335,11 @@ function AccountDetail() {
                   )}
                 </p>
                 <p className="text-gray-500 text-sm dark:text-neutral-500">
-                  {t("mnemonic.description2")}
+                  {t(
+                    hasMnemonic
+                      ? "mnemonic.backup.description"
+                      : "mnemonic.generate.description"
+                  )}
                 </p>
               </div>
 
@@ -382,26 +383,33 @@ function AccountDetail() {
               </>
             )}
             <MenuDivider />
-            <div className="flex justify-between items-end">
-              <div className="w-7/12 flex items-center gap-2">
-                <TextField
-                  id="nostrPublicKey"
-                  label={t("nostr.public_key.label")}
-                  value={nostrPublicKey}
-                  disabled
-                  endAdornment={
-                    nostrPublicKey && <InputCopyButton value={nostrPublicKey} />
-                  }
-                />
-                {nostrPublicKey && hasImportedNostrKey && (
-                  <Badge
-                    label="imported"
-                    color="green-bitcoin"
-                    textColor="white"
+            <div className="flex justify-between items-center">
+              <div className="w-7/12">
+                <div className="flex flex-col">
+                  <TextField
+                    id="nostrPublicKey"
+                    label={t("nostr.public_key.label")}
+                    value={nostrPublicKey}
+                    disabled
+                    endAdornment={
+                      nostrPublicKey && (
+                        <InputCopyButton value={nostrPublicKey} />
+                      )
+                    }
                   />
+                </div>
+              </div>
+              <div>
+                {nostrPublicKey && hasImportedNostrKey && (
+                  <div className="">
+                    <Badge
+                      label="imported"
+                      color="green-bitcoin"
+                      textColor="white"
+                    />
+                  </div>
                 )}
               </div>
-
               <div className="w-1/5 flex-none">
                 <Link to="nostr/settings">
                   <Button label={t("nostr.settings.label")} primary fullWidth />

diff --git a/src/app/screens/Accounts/NostrSettings/index.tsx b/src/app/screens/Accounts/NostrSettings/index.tsx
@@ -150,6 +150,23 @@ function NostrSettings() {
               </p>
             </div>
 
+            {!hasMnemonic && !nostrPrivateKey && (
+              <Alert type="info">
+                <Trans
+                  i18nKey={"nostr.settings.no_secret_key"}
+                  t={t}
+                  components={[
+                    // eslint-disable-next-line react/jsx-key
+                    <Link
+                      to="../../secret-key/generate"
+                      relative="path"
+                      className="underline"
+                    />,
+                  ]}
+                />
+              </Alert>
+            )}
+
             {hasMnemonic &&
             currentPrivateKey &&
             nostrPrivateKey === currentPrivateKey ? (
@@ -202,40 +219,22 @@ function NostrSettings() {
                 disabled
                 endAdornment={<InputCopyButton value={nostrPublicKey} />}
               />
-              <div className="mt-4 flex gap-4 items-center">
+              <div className="mt-4 flex gap-4 items-center justify-center">
                 {nostrPrivateKey && (
                   <Button
                     error
-                    label={t("nostr.settings.delete")}
+                    label={t("nostr.settings.remove")}
                     onClick={handleDeleteKeys}
                   />
                 )}
                 {hasImportedNostrKey &&
-                  nostrPrivateKey === currentPrivateKey && (
-                    <>
-                      {hasMnemonic ? (
-                        <Button
-                          outline
-                          label={t("nostr.settings.derive")}
-                          onClick={handleDeriveNostrKeyFromSecretKey}
-                        />
-                      ) : (
-                        <Alert type="warn">
-                          <Trans
-                            i18nKey={"nostr.settings.no_secret_key"}
-                            t={t}
-                            components={[
-                              // eslint-disable-next-line react/jsx-key
-                              <Link
-                                to="../secret-key/generate"
-                                relative="path"
-                                className="underline"
-                              />,
-                            ]}
-                          />
-                        </Alert>
-                      )}
-                    </>
+                  nostrPrivateKey === currentPrivateKey &&
+                  hasMnemonic && (
+                    <Button
+                      outline
+                      label={t("nostr.settings.derive")}
+                      onClick={handleDeriveNostrKeyFromSecretKey}
+                    />
                   )}
               </div>
             </div>

diff --git a/src/i18n/locales/de/translation.json b/src/i18n/locales/de/translation.json
@@ -522,7 +522,6 @@
           "import": {
             "title": "Importieren eines geheimen Schlüssels",
             "description": "Verwende einen vorhandenen Geheimschlüssel, um deine abgeleiteten Schlüssel wiederherzustellen.",
-            "confirm_overwrite": "Du hast bereits einen geheimen Schlüssel, bist du sicher, dass du ihn überschreiben willst?",
             "button": "Geheimen Schlüssel importieren"
           },
           "inputs": {