feat: new ui home screen and receive screen

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

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>

src/app/screens/Home/DefaultView/index.tsx

@@ -2,13 +2,20 @@ 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";
 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,10 +175,75 @@ 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}
-              noResultMsg={t("default_view.no_transactions")}
             />
 
             {!isLoading && transactions.length > 0 && (

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

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

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"