From 55cc7b2356a889a6e3ab62665f979fc8b6a18b68 Mon Sep 17 00:00:00 2001
From: pavanjoshi914 <pavanj914@gmail.com>
Date: Thu, 4 Jan 2024 15:52:29 +0530
Subject: [PATCH 1/9] feat: new popup ui

---
 .../components/IconLinkCard/IconLinkCard.tsx  |  4 +-
 src/app/screens/Home/DefaultView/index.tsx    | 77 +++++++++++++++++++
 src/i18n/locales/en/translation.json          | 21 ++++-
 3 files changed, 99 insertions(+), 3 deletions(-)

diff --git a/src/app/components/IconLinkCard/IconLinkCard.tsx b/src/app/components/IconLinkCard/IconLinkCard.tsx
index 94898f5913..ecf564f376 100644
--- a/src/app/components/IconLinkCard/IconLinkCard.tsx
+++ b/src/app/components/IconLinkCard/IconLinkCard.tsx
@@ -15,7 +15,7 @@ export function IconLinkCard({
 }: IconLinkCardProps) {
   return (
     <div
-      className="shadow rounded-md p-4 bg-white dark:bg-surface-01dp hover:bg-gray-50 dark:hover:bg-surface-02dp text-gray-800 dark:text-neutral-200 cursor-pointer flex flex-row items-center gap-3"
+      className="shadow rounded-xl p-4 bg-white dark:bg-surface-01dp hover:bg-gray-50 dark:hover:bg-surface-02dp text-gray-800 dark:text-neutral-200 cursor-pointer flex flex-row items-center gap-4"
       onClick={onClick}
     >
       <div className="flex-shrink-0 flex justify-center md:px-3">{icon}</div>
@@ -27,7 +27,7 @@ export function IconLinkCard({
           {description}
         </div>
       </div>
-      <div className="flex-shrink-0 flex justify-end ">
+      <div className="flex-shrink-0 flex justify-end text-gray-400 dark:text-neutral-500 ">
         <CaretRightIcon className="w-8" />
       </div>
     </div>
diff --git a/src/app/screens/Home/DefaultView/index.tsx b/src/app/screens/Home/DefaultView/index.tsx
index 1f7380cb5e..0f7a90536b 100644
--- a/src/app/screens/Home/DefaultView/index.tsx
+++ b/src/app/screens/Home/DefaultView/index.tsx
@@ -2,6 +2,12 @@ import { ArrowRightIcon } from "@bitcoin-design/bitcoin-icons-react/filled";
 import Button from "@components/Button";
 import Loading from "@components/Loading";
 import TransactionsTable from "@components/TransactionsTable";
+import {
+  PopiconsArrowDownLine,
+  PopiconsBulbLine,
+  PopiconsDownloadLine,
+  PopiconsKeyLine,
+} from "@popicons/react";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
 import { FC, useEffect, useState } from "react";
@@ -9,6 +15,7 @@ import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import BalanceBox from "~/app/components/BalanceBox";
 import Hyperlink from "~/app/components/Hyperlink";
+import { IconLinkCard } from "~/app/components/IconLinkCard/IconLinkCard";
 import SkeletonLoader from "~/app/components/SkeletonLoader";
 import toast from "~/app/components/Toast";
 import { useAccount } from "~/app/context/AccountContext";
@@ -88,6 +95,10 @@ const DefaultView: FC<Props> = (props) => {
     }
   }
 
+  function openOptions(path: string) {
+    utils.openPage(`options.html#/${path}`);
+  }
+
   return (
     <div className="w-full max-w-screen-sm h-full mx-auto overflow-y-auto no-scrollbar">
       {props.renderPublisherWidget && !!props.lnDataFromCurrentTab?.length && (
@@ -164,6 +175,72 @@ const DefaultView: FC<Props> = (props) => {
 
         {!isLoading && (
           <div>
+            <div className="flex flex-col gap-2 md:gap-3">
+              {transactions.length == 0 && (
+                <IconLinkCard
+                  title={t("default_view.actions.get_started.title")}
+                  description={t(
+                    "default_view.actions.get_started.description"
+                  )}
+                  icon={
+                    <PopiconsBulbLine className="w-8 h-8 text-gray-400 darK:text-neutral-500" />
+                  }
+                  onClick={() => {
+                    utils.openUrl(
+                      "https://guides.getalby.com/user-guide/v/alby-account-and-browser-extension/"
+                    );
+                  }}
+                />
+              )}
+
+              <IconLinkCard
+                title={t("default_view.actions.backup_masterkey.title")}
+                description={t(
+                  "default_view.actions.backup_masterkey.description"
+                )}
+                icon={
+                  <PopiconsKeyLine className="w-8 h-8 text-gray-400 darK:text-neutral-500" />
+                }
+                onClick={async () => {
+                  const account = await api.getAccount();
+                  if (account.hasMnemonic) {
+                    openOptions(`accounts/${account.id}/secret-key/backup`);
+                  } else {
+                    openOptions(`accounts/${account.id}/secret-key/new`);
+                  }
+                }}
+              />
+
+              {transactions.length == 0 && (
+                <IconLinkCard
+                  title={t("default_view.actions.receive_bitcoin.title")}
+                  description={t(
+                    "default_view.actions.receive_bitcoin.description"
+                  )}
+                  icon={
+                    <PopiconsArrowDownLine className="w-8 h-8 text-gray-400 darK:text-neutral-500" />
+                  }
+                  onClick={() => {
+                    navigate("/receive");
+                  }}
+                />
+              )}
+
+              <IconLinkCard
+                title={t("default_view.actions.import_masterkey.title")}
+                description={t(
+                  "default_view.actions.import_masterkey.description"
+                )}
+                icon={
+                  <PopiconsDownloadLine className="w-8 h-8 text-gray-400 darK:text-neutral-500" />
+                }
+                onClick={async () => {
+                  const account = await api.getAccount();
+
+                  openOptions(`accounts/${account.id}/secret-key/import`);
+                }}
+              />
+            </div>
             <TransactionsTable
               transactions={transactions}
               loading={isLoading}
diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json
index 3c1de989eb..4de8d8b995 100644
--- a/src/i18n/locales/en/translation.json
+++ b/src/i18n/locales/en/translation.json
@@ -373,7 +373,26 @@
         "is_blocked_hint": "Alby is currently disabled on {{host}}",
         "block_removed": "Enabled {{host}}. Please reload the website.",
         "no_transactions": "No transactions for this account yet.",
-        "see_all": "See all"
+        "see_all": "See all",
+        "actions": {
+          "get_started": {
+            "title": "Get Started With Alby Extension",
+            "description": "New to Alby Extension? Check out our guides, videos, and explanations"
+          },
+          "backup_masterkey": {
+            "title": "Back up your Master Key",
+            "description": "Learn what Master Key is, how it’s used for Nostr and make sure to back up"
+          },
+
+          "receive_bitcoin": {
+            "title": "Receive bitcoin",
+            "description": "Get bitcoin to your lightning address, a lightning invoice or bitcoin address."
+          },
+          "import_masterkey": {
+            "title": "Import your Master Key",
+            "description": "If you already have a Master Key, you can import it using recovery phrase"
+          }
+        }
       }
     },
     "accounts": {

From 7b8d171be3f44f2846f694ba9035fac915919bab Mon Sep 17 00:00:00 2001
From: pavanjoshi914 <pavanj914@gmail.com>
Date: Thu, 4 Jan 2024 16:47:23 +0530
Subject: [PATCH 2/9] feat: new receive screens

---
 package.json                               |  2 +-
 src/app/screens/Home/DefaultView/index.tsx |  1 -
 src/app/screens/Receive/index.tsx          | 17 +++++++++++------
 yarn.lock                                  |  8 ++++----
 4 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index 2543491c03..340f04c14d 100644
--- a/package.json
+++ b/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",
diff --git a/src/app/screens/Home/DefaultView/index.tsx b/src/app/screens/Home/DefaultView/index.tsx
index 0f7a90536b..92c587345c 100644
--- a/src/app/screens/Home/DefaultView/index.tsx
+++ b/src/app/screens/Home/DefaultView/index.tsx
@@ -244,7 +244,6 @@ const DefaultView: FC<Props> = (props) => {
             <TransactionsTable
               transactions={transactions}
               loading={isLoading}
-              noResultMsg={t("default_view.no_transactions")}
             />
 
             {!isLoading && transactions.length > 0 && (
diff --git a/src/app/screens/Receive/index.tsx b/src/app/screens/Receive/index.tsx
index 9558692df9..e7c97c985d 100644
--- a/src/app/screens/Receive/index.tsx
+++ b/src/app/screens/Receive/index.tsx
@@ -1,12 +1,12 @@
 import {
-  BitcoinCircleIcon,
+  BitcoinIcon,
   CaretLeftIcon,
   CopyIcon,
-  LightningIcon,
 } from "@bitcoin-design/bitcoin-icons-react/outline";
 import Container from "@components/Container";
 import Header from "@components/Header";
 import IconButton from "@components/IconButton";
+import { PopiconsBoltLine, PopiconsWithdrawalLine } from "@popicons/react";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
@@ -15,7 +15,6 @@ import QRCode from "~/app/components/QRCode";
 import SkeletonLoader from "~/app/components/SkeletonLoader";
 import toast from "~/app/components/Toast";
 import { useAccount } from "~/app/context/AccountContext";
-import RedeemIcon from "~/app/icons/RedeemIcon";
 import { isAlbyLNDHubAccount, isAlbyOAuthAccount } from "~/app/utils";
 import api from "~/common/lib/api";
 import { IconLinkCard } from "../../components/IconLinkCard/IconLinkCard";
@@ -123,7 +122,9 @@ function Receive() {
             <IconLinkCard
               title={t("actions.invoice.title")}
               description={t("actions.invoice.description")}
-              icon={<LightningIcon className="w-8" />}
+              icon={
+                <PopiconsBoltLine className="w-8 h-8 text-gray-400 darK:text-neutral-500" />
+              }
               onClick={() => {
                 navigate("/receive/invoice");
               }}
@@ -132,7 +133,9 @@ function Receive() {
               <IconLinkCard
                 title={t("actions.bitcoin_address.title")}
                 description={t("actions.bitcoin_address.description")}
-                icon={<BitcoinCircleIcon className="w-8" />}
+                icon={
+                  <BitcoinIcon className="w-8 h-8 text-gray-400 darK:text-neutral-500" />
+                }
                 onClick={() => {
                   navigate("/onChainReceive");
                 }}
@@ -141,7 +144,9 @@ function Receive() {
             <IconLinkCard
               title={t("actions.redeem.title")}
               description={t("actions.redeem.description")}
-              icon={<RedeemIcon className="w-8" />}
+              icon={
+                <PopiconsWithdrawalLine className="w-8 h-8 text-gray-400 darK:text-neutral-500" />
+              }
               onClick={() => {
                 navigate("/lnurlRedeem");
               }}
diff --git a/yarn.lock b/yarn.lock
index c5440efc82..702b18812d 100644
--- a/yarn.lock
+++ b/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/browsers@1.8.0":
   version "1.8.0"

From eb014db3367ba8c5a74ba6c608b5973d64cde51b Mon Sep 17 00:00:00 2001
From: pavanjoshi914 <pavanj914@gmail.com>
Date: Tue, 23 Jan 2024 16:21:28 +0530
Subject: [PATCH 3/9] general commit

---
 src/app/components/IconLinkCard/IconLinkCard.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/components/IconLinkCard/IconLinkCard.tsx b/src/app/components/IconLinkCard/IconLinkCard.tsx
index ecf564f376..51cfa4088f 100644
--- a/src/app/components/IconLinkCard/IconLinkCard.tsx
+++ b/src/app/components/IconLinkCard/IconLinkCard.tsx
@@ -15,11 +15,11 @@ export function IconLinkCard({
 }: IconLinkCardProps) {
   return (
     <div
-      className="shadow rounded-xl p-4 bg-white dark:bg-surface-01dp hover:bg-gray-50 dark:hover:bg-surface-02dp text-gray-800 dark:text-neutral-200 cursor-pointer flex flex-row items-center gap-4"
+      className="border border-gray-300 dark:border-neutral-800 rounded-xl p-4 bg-white dark:bg-surface-01dp hover:bg-gray-50 dark:hover:bg-surface-02dp text-gray-800 dark:text-neutral-200 cursor-pointer flex flex-row items-center gap-4"
       onClick={onClick}
     >
       <div className="flex-shrink-0 flex justify-center md:px-3">{icon}</div>
-      <div className="flex-grow">
+      <div className="flex-grow space-y-0.5">
         <div className="font-medium leading-5 text-sm md:text-base">
           {title}
         </div>

From d618c0fb29eed0792e101ab9787a2de10be4b2c4 Mon Sep 17 00:00:00 2001
From: pavanjoshi914 <pavanj914@gmail.com>
Date: Mon, 29 Jan 2024 16:07:46 +0530
Subject: [PATCH 4/9] fix: dark color css

---
 src/app/screens/Home/DefaultView/index.tsx | 8 ++++----
 src/app/screens/Receive/index.tsx          | 6 +++---
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/app/screens/Home/DefaultView/index.tsx b/src/app/screens/Home/DefaultView/index.tsx
index 92c587345c..b77c8694d7 100644
--- a/src/app/screens/Home/DefaultView/index.tsx
+++ b/src/app/screens/Home/DefaultView/index.tsx
@@ -183,7 +183,7 @@ const DefaultView: FC<Props> = (props) => {
                     "default_view.actions.get_started.description"
                   )}
                   icon={
-                    <PopiconsBulbLine className="w-8 h-8 text-gray-400 darK:text-neutral-500" />
+                    <PopiconsBulbLine className="w-8 h-8 text-gray-400 dark:text-neutral-500" />
                   }
                   onClick={() => {
                     utils.openUrl(
@@ -199,7 +199,7 @@ const DefaultView: FC<Props> = (props) => {
                   "default_view.actions.backup_masterkey.description"
                 )}
                 icon={
-                  <PopiconsKeyLine className="w-8 h-8 text-gray-400 darK:text-neutral-500" />
+                  <PopiconsKeyLine className="w-8 h-8 text-gray-400 dark:text-neutral-500" />
                 }
                 onClick={async () => {
                   const account = await api.getAccount();
@@ -218,7 +218,7 @@ const DefaultView: FC<Props> = (props) => {
                     "default_view.actions.receive_bitcoin.description"
                   )}
                   icon={
-                    <PopiconsArrowDownLine className="w-8 h-8 text-gray-400 darK:text-neutral-500" />
+                    <PopiconsArrowDownLine className="w-8 h-8 text-gray-400 dark:text-neutral-500" />
                   }
                   onClick={() => {
                     navigate("/receive");
@@ -232,7 +232,7 @@ const DefaultView: FC<Props> = (props) => {
                   "default_view.actions.import_masterkey.description"
                 )}
                 icon={
-                  <PopiconsDownloadLine className="w-8 h-8 text-gray-400 darK:text-neutral-500" />
+                  <PopiconsDownloadLine className="w-8 h-8 text-gray-400 dark:text-neutral-500" />
                 }
                 onClick={async () => {
                   const account = await api.getAccount();
diff --git a/src/app/screens/Receive/index.tsx b/src/app/screens/Receive/index.tsx
index e7c97c985d..fb913cc41e 100644
--- a/src/app/screens/Receive/index.tsx
+++ b/src/app/screens/Receive/index.tsx
@@ -123,7 +123,7 @@ function Receive() {
               title={t("actions.invoice.title")}
               description={t("actions.invoice.description")}
               icon={
-                <PopiconsBoltLine className="w-8 h-8 text-gray-400 darK:text-neutral-500" />
+                <PopiconsBoltLine className="w-8 h-8 text-gray-400 dark:text-neutral-500" />
               }
               onClick={() => {
                 navigate("/receive/invoice");
@@ -134,7 +134,7 @@ function Receive() {
                 title={t("actions.bitcoin_address.title")}
                 description={t("actions.bitcoin_address.description")}
                 icon={
-                  <BitcoinIcon className="w-8 h-8 text-gray-400 darK:text-neutral-500" />
+                  <BitcoinIcon className="w-8 h-8 text-gray-400 dark:text-neutral-500" />
                 }
                 onClick={() => {
                   navigate("/onChainReceive");
@@ -145,7 +145,7 @@ function Receive() {
               title={t("actions.redeem.title")}
               description={t("actions.redeem.description")}
               icon={
-                <PopiconsWithdrawalLine className="w-8 h-8 text-gray-400 darK:text-neutral-500" />
+                <PopiconsWithdrawalLine className="w-8 h-8 text-gray-400 dark:text-neutral-500" />
               }
               onClick={() => {
                 navigate("/lnurlRedeem");

From 40134b4119c2c5462f0f52fa6a3f61ce1f4f7c0f Mon Sep 17 00:00:00 2001
From: pavanjoshi914 <pavanj914@gmail.com>
Date: Mon, 29 Jan 2024 19:37:09 +0530
Subject: [PATCH 5/9] feat: new property to detect backup done or not

---
 .../screens/Accounts/BackupMnemonic/index.tsx |  1 +
 .../Accounts/GenerateMnemonic/index.tsx       |  5 +-
 src/app/screens/Home/DefaultView/index.tsx    | 77 ++++++++++++-------
 src/common/lib/api.ts                         |  1 +
 .../actions/accounts/__tests__/get.test.ts    |  3 +
 .../actions/accounts/edit.ts                  |  5 ++
 .../background-script/actions/accounts/get.ts |  1 +
 src/types.ts                                  |  2 +
 8 files changed, 65 insertions(+), 30 deletions(-)

diff --git a/src/app/screens/Accounts/BackupMnemonic/index.tsx b/src/app/screens/Accounts/BackupMnemonic/index.tsx
index 395dfaf736..4d81b5faf9 100644
--- a/src/app/screens/Accounts/BackupMnemonic/index.tsx
+++ b/src/app/screens/Accounts/BackupMnemonic/index.tsx
@@ -38,6 +38,7 @@ function BackupMnemonic() {
     fetchData();
   }, [fetchData]);
 
+  // TODO: set isMnemonicBackupDone, once new ui for screen is merged
   return loading ? (
     <div className="flex justify-center mt-5">
       <Loading />
diff --git a/src/app/screens/Accounts/GenerateMnemonic/index.tsx b/src/app/screens/Accounts/GenerateMnemonic/index.tsx
index a9d4843162..b5b563e649 100644
--- a/src/app/screens/Accounts/GenerateMnemonic/index.tsx
+++ b/src/app/screens/Accounts/GenerateMnemonic/index.tsx
@@ -53,7 +53,10 @@ function GenerateMnemonic() {
       }
 
       await api.setMnemonic(id, mnemonic);
-      await api.editAccount(id, { useMnemonicForLnurlAuth: true });
+      await api.editAccount(id, {
+        useMnemonicForLnurlAuth: true,
+        isMnemonicBackupDone: true,
+      });
 
       toast.success(t("saved"));
       // go to account settings
diff --git a/src/app/screens/Home/DefaultView/index.tsx b/src/app/screens/Home/DefaultView/index.tsx
index b77c8694d7..12971857c1 100644
--- a/src/app/screens/Home/DefaultView/index.tsx
+++ b/src/app/screens/Home/DefaultView/index.tsx
@@ -47,6 +47,8 @@ const DefaultView: FC<Props> = (props) => {
   const lightningAddress = account?.lightningAddress || "";
 
   const [isBlockedUrl, setIsBlockedUrl] = useState<boolean>(false);
+  const [isMnemonicBackupDone, setIsMnemonicBackupDone] = useState(false);
+  const [hasMnemonic, setHasMnemonic] = useState(false);
 
   const { transactions, isLoadingTransactions, loadTransactions } =
     useTransactions();
@@ -69,6 +71,19 @@ const DefaultView: FC<Props> = (props) => {
     }
   }, [props.currentUrl]);
 
+  useEffect(() => {
+    (async () => {
+      try {
+        const account = await api.getAccount();
+        setIsMnemonicBackupDone(account.isMnemonicBackupDone);
+        setHasMnemonic(account.hasMnemonic);
+      } catch (e) {
+        console.error(e);
+        if (e instanceof Error) toast.error(`Error: ${e.message}`);
+      }
+    })();
+  }, []);
+
   const unblock = async () => {
     try {
       if (props.currentUrl?.host) {
@@ -193,23 +208,25 @@ const DefaultView: FC<Props> = (props) => {
                 />
               )}
 
-              <IconLinkCard
-                title={t("default_view.actions.backup_masterkey.title")}
-                description={t(
-                  "default_view.actions.backup_masterkey.description"
-                )}
-                icon={
-                  <PopiconsKeyLine className="w-8 h-8 text-gray-400 dark:text-neutral-500" />
-                }
-                onClick={async () => {
-                  const account = await api.getAccount();
-                  if (account.hasMnemonic) {
-                    openOptions(`accounts/${account.id}/secret-key/backup`);
-                  } else {
-                    openOptions(`accounts/${account.id}/secret-key/new`);
+              {!(hasMnemonic && isMnemonicBackupDone) && (
+                <IconLinkCard
+                  title={t("default_view.actions.backup_masterkey.title")}
+                  description={t(
+                    "default_view.actions.backup_masterkey.description"
+                  )}
+                  icon={
+                    <PopiconsKeyLine className="w-8 h-8 text-gray-400 dark:text-neutral-500" />
                   }
-                }}
-              />
+                  onClick={async () => {
+                    const account = await api.getAccount();
+                    if (account.hasMnemonic) {
+                      openOptions(`accounts/${account.id}/secret-key/backup`);
+                    } else {
+                      openOptions(`accounts/${account.id}/secret-key/new`);
+                    }
+                  }}
+                />
+              )}
 
               {transactions.length == 0 && (
                 <IconLinkCard
@@ -226,20 +243,22 @@ const DefaultView: FC<Props> = (props) => {
                 />
               )}
 
-              <IconLinkCard
-                title={t("default_view.actions.import_masterkey.title")}
-                description={t(
-                  "default_view.actions.import_masterkey.description"
-                )}
-                icon={
-                  <PopiconsDownloadLine className="w-8 h-8 text-gray-400 dark:text-neutral-500" />
-                }
-                onClick={async () => {
-                  const account = await api.getAccount();
+              {!(hasMnemonic && isMnemonicBackupDone) && (
+                <IconLinkCard
+                  title={t("default_view.actions.import_masterkey.title")}
+                  description={t(
+                    "default_view.actions.import_masterkey.description"
+                  )}
+                  icon={
+                    <PopiconsDownloadLine className="w-8 h-8 text-gray-400 dark:text-neutral-500" />
+                  }
+                  onClick={async () => {
+                    const account = await api.getAccount();
 
-                  openOptions(`accounts/${account.id}/secret-key/import`);
-                }}
-              />
+                    openOptions(`accounts/${account.id}/secret-key/import`);
+                  }}
+                />
+              )}
             </div>
             <TransactionsTable
               transactions={transactions}
diff --git a/src/common/lib/api.ts b/src/common/lib/api.ts
index 19ddfd1bfe..fb8375ec8c 100644
--- a/src/common/lib/api.ts
+++ b/src/common/lib/api.ts
@@ -57,6 +57,7 @@ export interface GetAccountRes extends Pick<Account, "id" | "name"> {
   liquidEnabled: boolean;
   nostrEnabled: boolean;
   hasMnemonic: boolean;
+  isMnemonicBackupDone: boolean;
   hasImportedNostrKey: boolean;
   bitcoinNetwork: BitcoinNetworkType;
   useMnemonicForLnurlAuth: boolean;
diff --git a/src/extension/background-script/actions/accounts/__tests__/get.test.ts b/src/extension/background-script/actions/accounts/__tests__/get.test.ts
index 6022ed3c94..fbafc7e643 100644
--- a/src/extension/background-script/actions/accounts/__tests__/get.test.ts
+++ b/src/extension/background-script/actions/accounts/__tests__/get.test.ts
@@ -30,6 +30,7 @@ const mockState = {
       mnemonic: btcFixture.mnemonic,
       bitcoinNetwork: "regtest",
       useMnemonicForLnurlAuth: true,
+      isMnemonicBackupDone: true,
     },
     "1e1e8ea6-493e-480b-9855-303d37506e97": {
       config: "config-123-456",
@@ -65,6 +66,7 @@ describe("account info", () => {
       hasImportedNostrKey: true,
       bitcoinNetwork: "bitcoin",
       useMnemonicForLnurlAuth: false,
+      isMnemonicBackupDone: false,
     };
 
     expect(await getAccount(message)).toStrictEqual({
@@ -92,6 +94,7 @@ describe("account info", () => {
       hasImportedNostrKey: true,
       bitcoinNetwork: "regtest",
       useMnemonicForLnurlAuth: true,
+      isMnemonicBackupDone: true,
     };
 
     expect(await getAccount(message)).toStrictEqual({
diff --git a/src/extension/background-script/actions/accounts/edit.ts b/src/extension/background-script/actions/accounts/edit.ts
index 597b56e2bb..262c48fb75 100644
--- a/src/extension/background-script/actions/accounts/edit.ts
+++ b/src/extension/background-script/actions/accounts/edit.ts
@@ -22,6 +22,11 @@ const edit = async (message: MessageAccountEdit) => {
         message.args.useMnemonicForLnurlAuth;
     }
 
+    if (message.args.isMnemonicBackupDone !== undefined) {
+      accounts[accountId].isMnemonicBackupDone =
+        message.args.isMnemonicBackupDone;
+    }
+
     state.setState({ accounts });
     // make sure we immediately persist the updated accounts
     await state.getState().saveToStorage();
diff --git a/src/extension/background-script/actions/accounts/get.ts b/src/extension/background-script/actions/accounts/get.ts
index bffb228e67..37a5697065 100644
--- a/src/extension/background-script/actions/accounts/get.ts
+++ b/src/extension/background-script/actions/accounts/get.ts
@@ -22,6 +22,7 @@ const get = async (message: MessageAccountGet) => {
     liquidEnabled: !!account.mnemonic,
     nostrEnabled: !!account.nostrPrivateKey,
     hasMnemonic: !!account.mnemonic,
+    isMnemonicBackupDone: !!account.isMnemonicBackupDone,
     // Note: undefined (default for new accounts) it is also considered imported
     hasImportedNostrKey: account.hasImportedNostrKey !== false,
     bitcoinNetwork: account.bitcoinNetwork || "bitcoin",
diff --git a/src/types.ts b/src/types.ts
index 594e7e246a..c12738086e 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -25,6 +25,7 @@ export interface Account {
   mnemonic?: string | null;
   hasImportedNostrKey?: boolean;
   bitcoinNetwork?: BitcoinNetworkType;
+  isMnemonicBackupDone?: boolean;
   useMnemonicForLnurlAuth?: boolean;
   avatarUrl?: string;
 }
@@ -231,6 +232,7 @@ export interface MessageAccountEdit extends MessageDefault {
     name?: Account["name"];
     bitcoinNetwork?: BitcoinNetworkType;
     useMnemonicForLnurlAuth?: boolean;
+    isMnemonicBackupDone?: boolean;
   };
   action: "editAccount";
 }

From b71aabf098db8a13c45f8f2e0a78f571dd6460fd Mon Sep 17 00:00:00 2001
From: pavanjoshi914 <pavanj914@gmail.com>
Date: Mon, 29 Jan 2024 19:55:42 +0530
Subject: [PATCH 6/9] chore: reduce api calls

---
 src/app/screens/Home/DefaultView/index.tsx | 35 +++++++++++++---------
 1 file changed, 21 insertions(+), 14 deletions(-)

diff --git a/src/app/screens/Home/DefaultView/index.tsx b/src/app/screens/Home/DefaultView/index.tsx
index 12971857c1..5c4261be98 100644
--- a/src/app/screens/Home/DefaultView/index.tsx
+++ b/src/app/screens/Home/DefaultView/index.tsx
@@ -21,7 +21,7 @@ import toast from "~/app/components/Toast";
 import { useAccount } from "~/app/context/AccountContext";
 import { useTransactions } from "~/app/hooks/useTransactions";
 import { PublisherLnData } from "~/app/screens/Home/PublisherLnData";
-import api from "~/common/lib/api";
+import api, { GetAccountRes } from "~/common/lib/api";
 import msg from "~/common/lib/msg";
 import utils from "~/common/lib/utils";
 import type { Battery } from "~/types";
@@ -47,8 +47,7 @@ const DefaultView: FC<Props> = (props) => {
   const lightningAddress = account?.lightningAddress || "";
 
   const [isBlockedUrl, setIsBlockedUrl] = useState<boolean>(false);
-  const [isMnemonicBackupDone, setIsMnemonicBackupDone] = useState(false);
-  const [hasMnemonic, setHasMnemonic] = useState(false);
+  const [currentAccount, setCurrentAccount] = useState<GetAccountRes>();
 
   const { transactions, isLoadingTransactions, loadTransactions } =
     useTransactions();
@@ -75,8 +74,7 @@ const DefaultView: FC<Props> = (props) => {
     (async () => {
       try {
         const account = await api.getAccount();
-        setIsMnemonicBackupDone(account.isMnemonicBackupDone);
-        setHasMnemonic(account.hasMnemonic);
+        setCurrentAccount(account);
       } catch (e) {
         console.error(e);
         if (e instanceof Error) toast.error(`Error: ${e.message}`);
@@ -208,7 +206,10 @@ const DefaultView: FC<Props> = (props) => {
                 />
               )}
 
-              {!(hasMnemonic && isMnemonicBackupDone) && (
+              {!(
+                currentAccount?.hasMnemonic &&
+                currentAccount?.isMnemonicBackupDone
+              ) && (
                 <IconLinkCard
                   title={t("default_view.actions.backup_masterkey.title")}
                   description={t(
@@ -218,11 +219,14 @@ const DefaultView: FC<Props> = (props) => {
                     <PopiconsKeyLine className="w-8 h-8 text-gray-400 dark:text-neutral-500" />
                   }
                   onClick={async () => {
-                    const account = await api.getAccount();
-                    if (account.hasMnemonic) {
-                      openOptions(`accounts/${account.id}/secret-key/backup`);
+                    if (currentAccount?.hasMnemonic) {
+                      openOptions(
+                        `accounts/${currentAccount?.id}/secret-key/backup`
+                      );
                     } else {
-                      openOptions(`accounts/${account.id}/secret-key/new`);
+                      openOptions(
+                        `accounts/${currentAccount?.id}/secret-key/new`
+                      );
                     }
                   }}
                 />
@@ -243,7 +247,10 @@ const DefaultView: FC<Props> = (props) => {
                 />
               )}
 
-              {!(hasMnemonic && isMnemonicBackupDone) && (
+              {!(
+                currentAccount?.hasMnemonic &&
+                currentAccount?.isMnemonicBackupDone
+              ) && (
                 <IconLinkCard
                   title={t("default_view.actions.import_masterkey.title")}
                   description={t(
@@ -253,9 +260,9 @@ const DefaultView: FC<Props> = (props) => {
                     <PopiconsDownloadLine className="w-8 h-8 text-gray-400 dark:text-neutral-500" />
                   }
                   onClick={async () => {
-                    const account = await api.getAccount();
-
-                    openOptions(`accounts/${account.id}/secret-key/import`);
+                    openOptions(
+                      `accounts/${currentAccount?.id}/secret-key/import`
+                    );
                   }}
                 />
               )}

From e6c62845cdb3b53dd1a4555f795dcfc73d5f3fb2 Mon Sep 17 00:00:00 2001
From: pavanjoshi914 <pavanj914@gmail.com>
Date: Mon, 29 Jan 2024 22:40:51 +0530
Subject: [PATCH 7/9] chore: reduce content gap

---
 src/app/components/IconLinkCard/IconLinkCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/IconLinkCard/IconLinkCard.tsx b/src/app/components/IconLinkCard/IconLinkCard.tsx
index 51cfa4088f..1a7a284343 100644
--- a/src/app/components/IconLinkCard/IconLinkCard.tsx
+++ b/src/app/components/IconLinkCard/IconLinkCard.tsx
@@ -15,7 +15,7 @@ export function IconLinkCard({
 }: IconLinkCardProps) {
   return (
     <div
-      className="border border-gray-300 dark:border-neutral-800 rounded-xl p-4 bg-white dark:bg-surface-01dp hover:bg-gray-50 dark:hover:bg-surface-02dp text-gray-800 dark:text-neutral-200 cursor-pointer flex flex-row items-center gap-4"
+      className="border border-gray-300 dark:border-neutral-800 rounded-xl p-4 bg-white dark:bg-surface-01dp hover:bg-gray-50 dark:hover:bg-surface-02dp text-gray-800 dark:text-neutral-200 cursor-pointer flex flex-row items-center gap-3"
       onClick={onClick}
     >
       <div className="flex-shrink-0 flex justify-center md:px-3">{icon}</div>

From dc9f2f14ed87d6e77f496bd3a2ea5aa6f65a643f Mon Sep 17 00:00:00 2001
From: pavanjoshi914 <pavanj914@gmail.com>
Date: Fri, 9 Feb 2024 22:53:04 +0530
Subject: [PATCH 8/9] feat: for existing accounts consider mnemonic backup
 already done

---
 src/extension/background-script/actions/accounts/add.ts | 1 +
 src/extension/background-script/actions/accounts/get.ts | 5 ++++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/extension/background-script/actions/accounts/add.ts b/src/extension/background-script/actions/accounts/add.ts
index df38e0d0ad..29e8f9eda2 100644
--- a/src/extension/background-script/actions/accounts/add.ts
+++ b/src/extension/background-script/actions/accounts/add.ts
@@ -27,6 +27,7 @@ const add = async (message: MessageAccountAdd) => {
     ...newAccount,
     id: accountId,
     name,
+    isMnemonicBackupDone: false,
   };
 
   const mnemonic = await generateMnemonic({
diff --git a/src/extension/background-script/actions/accounts/get.ts b/src/extension/background-script/actions/accounts/get.ts
index 37a5697065..7d102a892c 100644
--- a/src/extension/background-script/actions/accounts/get.ts
+++ b/src/extension/background-script/actions/accounts/get.ts
@@ -22,7 +22,10 @@ const get = async (message: MessageAccountGet) => {
     liquidEnabled: !!account.mnemonic,
     nostrEnabled: !!account.nostrPrivateKey,
     hasMnemonic: !!account.mnemonic,
-    isMnemonicBackupDone: !!account.isMnemonicBackupDone,
+    // for existing accounts consider mnemonic backup already done
+    isMnemonicBackupDone: account.isMnemonicBackupDone
+      ? account.isMnemonicBackupDone
+      : true,
     // Note: undefined (default for new accounts) it is also considered imported
     hasImportedNostrKey: account.hasImportedNostrKey !== false,
     bitcoinNetwork: account.bitcoinNetwork || "bitcoin",

From 881ac3bab015040c41b128896d3c199eee11b427 Mon Sep 17 00:00:00 2001
From: pavanjoshi914 <pavanj914@gmail.com>
Date: Fri, 16 Feb 2024 18:45:21 +0530
Subject: [PATCH 9/9] fix: tests

---
 .../background-script/actions/accounts/__tests__/add.test.ts   | 3 +++
 .../background-script/actions/accounts/__tests__/get.test.ts   | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/extension/background-script/actions/accounts/__tests__/add.test.ts b/src/extension/background-script/actions/accounts/__tests__/add.test.ts
index 1b6f108575..1948d04cbb 100644
--- a/src/extension/background-script/actions/accounts/__tests__/add.test.ts
+++ b/src/extension/background-script/actions/accounts/__tests__/add.test.ts
@@ -28,6 +28,7 @@ const message: MessageAccountAdd = {
     config: "123456config",
     name: "purple",
     nostrPrivateKey: "123456nostr",
+    isMnemonicBackupDone: false,
   },
   origin: { internal: true },
   prompt: true,
@@ -59,6 +60,7 @@ describe("add account to account-list", () => {
           config: "secret-config-string-42",
           name: "purple",
           nostrPrivateKey: "123456nostr",
+          isMnemonicBackupDone: false,
         },
       },
     });
@@ -107,6 +109,7 @@ describe("add account to account-list", () => {
           config: "secret-config-string-42",
           name: "purple",
           nostrPrivateKey: "123456nostr",
+          isMnemonicBackupDone: false,
         },
         "666": {
           config: "xyz",
diff --git a/src/extension/background-script/actions/accounts/__tests__/get.test.ts b/src/extension/background-script/actions/accounts/__tests__/get.test.ts
index fbafc7e643..71f714eb89 100644
--- a/src/extension/background-script/actions/accounts/__tests__/get.test.ts
+++ b/src/extension/background-script/actions/accounts/__tests__/get.test.ts
@@ -66,7 +66,7 @@ describe("account info", () => {
       hasImportedNostrKey: true,
       bitcoinNetwork: "bitcoin",
       useMnemonicForLnurlAuth: false,
-      isMnemonicBackupDone: false,
+      isMnemonicBackupDone: true,
     };
 
     expect(await getAccount(message)).toStrictEqual({