fix: rename secret key, ui fixes

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" &&

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;

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>
   );

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>
   );

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

@@ -337,7 +337,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>
 
@@ -381,27 +385,34 @@ 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")}
-                  type="text"
-                  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")}
+                    type="text"
+                    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 />

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 ? (
@@ -213,27 +230,12 @@ function NostrSettings() {
                 {hasImportedNostrKey &&
                   nostrPrivateKey === currentPrivateKey && (
                     <>
-                      {hasMnemonic ? (
+                      {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>
                       )}
                     </>
                   )}

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": {

src/i18n/locales/en/translation.json

@@ -388,39 +388,41 @@
         },
         "mnemonic": {
           "title": "🔑 Key Management",
-          "description": "Your Secret Key allows you to use Alby to interact with protocols such as Nostr.",
-          "description2": "Your Secret Key is a set of 12 words that will allow you to access your keys to protocols such as Nostr on a new device or in case you lose access to your account.",
-          "saved": "Secret Key encrypted & saved successfully.",
-          "existing_nostr_key_notice": "⚠️ This account already has a nostr private key set and will not be derived from this secret key. You can manage your nostr key from your account settings.",
+          "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.",
           "generate": {
-            "title": "Generate your Secret Key",
-            "button": "Generate Secret Key",
-            "confirm": "I've backed my account's Secret Key in a private and secure place",
-            "error_confirm": "Please confirm that you have backed up your secret key."
+            "title": "Generate new Master Key",
+            "description": "Master Key allows you to interact with various protocols such as: Nostr, base layer of Bitcoin or LNURL-Auth.",
+            "button": "Generate Master Key",
+            "confirm": "I've backed up the recovery phrase to my Master Key in a private and secure place.",
+            "error_confirm": "Please confirm that you have backed up the recovery phrase."
           },
           "backup": {
-            "title": "Back up your Secret Key",
-            "save": "Save Secret Key",
-            "button": "Back up Secret Key",
-            "warning": "⚠️ Don't forget to back up your Secret Key! Not backing it up might result in permanently losing access to your Nostr identity or assets you manage with this key.",
-            "description1": "In addition to the Bitcoin Lightning Network, Alby allows you to generate keys and interact with other protocols such as:",
-            "description2": "Your Secret Key is a set of 12 words that will allow you to access your keys to those protocols on a new device or in case you lose access to your account. Make sure to write it down on a piece of paper and keep it safe:",
+            "title": "Back up your recovery phrase",
+            "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": {
+              "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!"
+            },
             "protocols": {
               "nostr": "Nostr"
             }
           },
           "import": {
-            "title": "Import a Secret Key",
-            "description": "Use an existing Secret Key to recover your derived keys.",
-            "button": "Import Secret Key",
-            "confirm_overwrite": "You already have a secret key, are you sure you want to overwrite it?"
+            "title": "Import your Master Key",
+            "description": "Use the recovery phrase to import your Master Key into Alby.",
+            "button": "Import Master Key"
           },
           "inputs": {
-            "title": "Your Secret Key"
+            "title": "Recovery Phrase"
           },
           "lnurl": {
             "title": "Login with Lightning",
-            "use_mnemonic": "Use Secret Key for logging into lightning-powered apps (LNURL Auth)"
+            "use_mnemonic": "Use Master Key for logging into lightning-powered apps (LNURL Auth)"
           }
         },
         "bitcoin": {
@@ -440,32 +442,32 @@
           "settings": {
             "label": "Nostr Settings",
             "title": "Nostr Settings",
-            "description": "Derive Nostr keys from your Secret Key or import your existing private key by pasting it in the \"Nostr Private Key\" field.",
-            "imported_key_warning": "⚠️ You're currently using an imported or randomly generated Nostr key. Your Nostr private key cannot be restored by your Secret Key, so remember to back up your Nostr private key.",
-            "can_restore": "✅ Nostr key derived from your secret key",
-            "derive": "Derive Nostr keys from your Secret Key",
+            "description": "Derive Nostr keys from your Master Key or import your existing private key by pasting it in the \"Nostr Private Key\" field.",
+            "imported_key_warning": "⚠️ You're currently using an imported or randomly generated Nostr key. Your Nostr private key cannot be restored by your recovery phrase, so remember to back up your Nostr private key separately.",
+            "can_restore": "✅ Nostr key derived from your Master Key",
+            "derive": "Derive from Master Key",
             "remove": "Remove current keys",
-            "no_secret_key": "💡 You don't have a secret key yet. <0>Click here</0></div> to create your secret key and derive your nostr keys."
+            "no_secret_key": "💡 You don't have a Master Key yet. <0>Click here</0></div> to create your Master Key and derive your Nostr keys."
           },
           "setup": {
             "title": "Setup your Nostr keys",
             "description": "Choose If you'd like to create a new Nostr account (a pair of private and public keys) or import an existing one.",
             "description2": "Every Nostr account created in Alby comes with a <0>Recovery Phrase</0> – a set of 12 words that always allow you to regain access to your Nostr private keys.",
             "new": {
               "label": "Create a new Nostr account",
-              "description": "Generate a new pair of Nostr keys with Recovery Phrase"
+              "description": "Generate a Master Key with a pair of new Nostr keys."
             },
             "import": {
               "label": "Import a Nostr account",
-              "description": "Import an existing Nostr key or derive from your Recovery Phrase",
+              "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 account’s private key to import it to Alby"
+                "description": "Paste your Nostr private key to import it to Alby"
               },
               "recovery_phrase": {
-                "label": "Use Recovery Phrase",
-                "description": "Derive Nostr keys from your 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>"
@@ -501,18 +503,18 @@
         "remove": {
           "title": "Remove This Account",
           "subtitle": "Removes all allowances, payment data and keys associated with this account.",
-          "confirm": "Please enter the name of the account to confirm the deletion of your account.\n\n ⚠️ All associated keys (Secret Key, Nostr, etc) will be deleted if you continue. Please make sure you have backed them up, there is no other way to restore them.",
+          "confirm": "Please enter the name of the account to confirm the deletion of your account.\n\n ⚠️ All associated keys (Master Key, Nostr, etc) will be deleted if you continue. Please make sure you have backed them up, there is no other way to restore them.",
           "error": "The entered account name didn't match."
         },
         "remove_secretkey": {
-          "title": "Remove Secret Key",
-          "subtitle": "Removes the secret key from this account.",
-          "confirm": "Please enter the name of the account to confirm the deletion of your Secret Key.",
-          "success": "Successfully removed the Secret Key."
+          "title": "Remove Master Key",
+          "subtitle": "Removes the Master Key from this account.",
+          "confirm": "Please enter the name of the account to confirm the deletion of your Master Key.",
+          "success": "Successfully removed the Master Key."
         },
         "actions": {
           "remove_account": "Remove account",
-          "remove_secretkey": "Remove Secret Key",
+          "remove_secretkey": "Remove Master Key",
           "export": "Export"
         }
       },

src/i18n/locales/fa/translation.json

@@ -461,8 +461,7 @@
           "import": {
             "title": "وارد کردن یک کلید مخفی",
             "description": "از کلید مخفی موجود استفاده کنید تا جفت کلیدهای مشتق شده از آن را بازیابی کنید.",
-            "button": "وارد کردن کلید مخفی",
-            "confirm_overwrite": "در حال حاضر یک کلید مخفی دارید، مطمئنید می خواهید آن را پاک کنید و یکی جدید بسازید؟"
+            "button": "وارد کردن کلید مخفی"
           },
           "inputs": {
             "title": "کلید مخفی شما"

src/i18n/locales/pt_BR/translation.json

@@ -403,8 +403,7 @@
           "import": {
             "title": "Importar uma chave secreta",
             "description": "Use uma chave secreta existente para recuperar suas chaves derivadas.",
-            "button": "Importar chave secreta",
-            "confirm_overwrite": "Você já tem uma chave secreta, tem certeza de que deseja substituí-la?"
+            "button": "Importar chave secreta"
           },
           "inputs": {
             "title": "Sua chave secreta"

src/i18n/locales/sv/translation.json

@@ -411,8 +411,7 @@
           "import": {
             "title": "Importera en hemlig nyckel",
             "description": "Använd en befintlig hemlig nyckel för att återställa dina härledda nycklar.",
-            "button": "Importera hemlig nyckel",
-            "confirm_overwrite": "Du har redan en hemlig nyckel, är du säker på att du vill skriva över den?"
+            "button": "Importera hemlig nyckel"
           },
           "title": "Hemlig nyckel",
           "description": "Din konto hemliga nyckel låter dig använda Alby för att interagera med protokoll som Nostr.",