From 61f4fef1cc64819bc628efa32c30b966697f9bff Mon Sep 17 00:00:00 2001
From: pavanjoshi914 <pavanj914@gmail.com>
Date: Thu, 5 Dec 2024 03:56:18 +0530
Subject: [PATCH 1/3] feat: allow to close wallet update banner

---
 src/app/components/Alert/index.tsx            | 41 ++++++++++++++++---
 src/app/screens/Home/DefaultView/index.tsx    | 16 +++++++-
 src/common/lib/api.ts                         |  1 +
 .../actions/accounts/__tests__/get.test.ts    |  2 +
 .../actions/accounts/edit.ts                  |  5 +++
 .../background-script/actions/accounts/get.ts |  1 +
 src/types.ts                                  |  2 +
 7 files changed, 60 insertions(+), 8 deletions(-)

diff --git a/src/app/components/Alert/index.tsx b/src/app/components/Alert/index.tsx
index 00a9be9862..68ce81703d 100644
--- a/src/app/components/Alert/index.tsx
+++ b/src/app/components/Alert/index.tsx
@@ -1,22 +1,51 @@
+import { PopiconsXLine } from "@popicons/react";
+import { useState } from "react";
 import { classNames } from "~/app/utils";
 
 type Props = {
   type: "warn" | "info";
   children: React.ReactNode;
+  showClose?: boolean;
+  onClose?: () => void; // Optional callback function
 };
 
-export default function Alert({ type, children }: Props) {
+export default function Alert({
+  type,
+  children,
+  showClose = false,
+  onClose,
+}: Props) {
+  const [isVisible, setIsVisible] = useState(true);
+
+  const handleClose = () => {
+    setIsVisible(false);
+    if (onClose) {
+      onClose(); // Invoke the callback function if provided
+    }
+  };
+
+  if (!isVisible) return null;
+
   return (
     <div
       className={classNames(
-        "border rounded-md p-3",
-        type == "warn" &&
-          "text-orange-700 dark:text-orange-300 bg-orange-50 dark:bg-orange-900  border-orange-100 dark:border-orange-900",
-        type == "info" &&
+        "border rounded-md p-3 flex justify-between relative",
+        type === "warn" &&
+          "text-orange-700 dark:text-orange-300 bg-orange-50 dark:bg-orange-900 border-orange-100 dark:border-orange-900",
+        type === "info" &&
           "text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-900 border-blue-100 dark:border-blue-900"
       )}
     >
-      {children}
+      {showClose && (
+        <button
+          onClick={handleClose}
+          className="absolute right-2 top-2 text-gray-600 dark:text-neutral-400 hover:text-gray-700 dark:hover:text-neutral-300"
+          aria-label="Close alert"
+        >
+          <PopiconsXLine className="w-5 h-5" />
+        </button>
+      )}
+      <div className="pr-8">{children}</div>
     </div>
   );
 }
diff --git a/src/app/screens/Home/DefaultView/index.tsx b/src/app/screens/Home/DefaultView/index.tsx
index b74e603f18..022be71d7b 100644
--- a/src/app/screens/Home/DefaultView/index.tsx
+++ b/src/app/screens/Home/DefaultView/index.tsx
@@ -55,6 +55,8 @@ const DefaultView: FC<Props> = (props) => {
   const [isBlockedUrl, setIsBlockedUrl] = useState<boolean>(false);
   const [currentAccount, setCurrentAccount] = useState<GetAccountRes>();
   const [nostrPublicKey, setNostrPublicKey] = useState("");
+  const [seenSharedNodeBanner, setSeenSharedNodeBanner] =
+    useState<boolean>(false);
 
   const { transactions, isLoadingTransactions, loadTransactions } =
     useTransactions();
@@ -85,6 +87,8 @@ const DefaultView: FC<Props> = (props) => {
         const userAccount = await api.getAccount();
         const nostrPrivateKey = await api.nostr.getPrivateKey(userAccount.id);
 
+        setSeenSharedNodeBanner(userAccount.seenSharedNodeBanner); //SharedNodeBanner); //SharedNodeBanner);
+
         setNostrPublicKey(
           nostrPrivateKey ? await nostr.derivePublicKey(nostrPrivateKey) : ""
         );
@@ -176,8 +180,16 @@ const DefaultView: FC<Props> = (props) => {
           </Alert>
         )}
 
-        {account?.sharedNode && (
-          <Alert type="info">
+        {account?.sharedNode && !seenSharedNodeBanner && (
+          <Alert
+            type="info"
+            showClose
+            onClose={async () =>
+              await api.editAccount(account.id, {
+                seenSharedNodeBanner: true,
+              })
+            }
+          >
             <div className="flex items-center gap-2">
               <div className="shrink-0">
                 <PopiconsCircleExclamationLine className="w-5 h-5" />
diff --git a/src/common/lib/api.ts b/src/common/lib/api.ts
index 7791c4991f..fef639cc0c 100644
--- a/src/common/lib/api.ts
+++ b/src/common/lib/api.ts
@@ -75,6 +75,7 @@ export interface GetAccountRes extends Pick<Account, "id" | "name"> {
   hasMnemonic: boolean;
   isMnemonicBackupDone: boolean;
   hasImportedNostrKey: boolean;
+  seenSharedNodeBanner: 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 71f714eb89..21ce5da431 100644
--- a/src/extension/background-script/actions/accounts/__tests__/get.test.ts
+++ b/src/extension/background-script/actions/accounts/__tests__/get.test.ts
@@ -63,6 +63,7 @@ describe("account info", () => {
       nostrEnabled: false,
       liquidEnabled: false,
       hasMnemonic: false,
+      seenSharedNodeBanner: false,
       hasImportedNostrKey: true,
       bitcoinNetwork: "bitcoin",
       useMnemonicForLnurlAuth: false,
@@ -91,6 +92,7 @@ describe("account info", () => {
       nostrEnabled: true,
       liquidEnabled: true,
       hasMnemonic: true,
+      seenSharedNodeBanner: true,
       hasImportedNostrKey: true,
       bitcoinNetwork: "regtest",
       useMnemonicForLnurlAuth: true,
diff --git a/src/extension/background-script/actions/accounts/edit.ts b/src/extension/background-script/actions/accounts/edit.ts
index 262c48fb75..ddcc853e72 100644
--- a/src/extension/background-script/actions/accounts/edit.ts
+++ b/src/extension/background-script/actions/accounts/edit.ts
@@ -27,6 +27,11 @@ const edit = async (message: MessageAccountEdit) => {
         message.args.isMnemonicBackupDone;
     }
 
+    if (message.args.seenSharedNodeBanner !== undefined) {
+      accounts[accountId].seenSharedNodeBanner =
+        message.args.seenSharedNodeBanner;
+    }
+
     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 2c2a8dc749..66a15f9f46 100644
--- a/src/extension/background-script/actions/accounts/get.ts
+++ b/src/extension/background-script/actions/accounts/get.ts
@@ -30,6 +30,7 @@ const get = async (message: MessageAccountGet) => {
     // Note: undefined (default for new accounts) it is also considered imported
     hasImportedNostrKey: account.hasImportedNostrKey !== false,
     bitcoinNetwork: account.bitcoinNetwork || "bitcoin",
+    seenSharedNodeBanner: account.seenSharedNodeBanner || false,
     useMnemonicForLnurlAuth: account.useMnemonicForLnurlAuth || false,
   };
 
diff --git a/src/types.ts b/src/types.ts
index 60ffc958ac..c32937e31d 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -27,6 +27,7 @@ export interface Account {
   nostrPrivateKey?: string | null;
   mnemonic?: string | null;
   hasImportedNostrKey?: boolean;
+  seenSharedNodeBanner?: boolean;
   bitcoinNetwork?: BitcoinNetworkType;
   isMnemonicBackupDone?: boolean;
   useMnemonicForLnurlAuth?: boolean;
@@ -269,6 +270,7 @@ export interface MessageAccountEdit extends MessageDefault {
     bitcoinNetwork?: BitcoinNetworkType;
     useMnemonicForLnurlAuth?: boolean;
     isMnemonicBackupDone?: boolean;
+    seenSharedNodeBanner?: boolean;
   };
   action: "editAccount";
 }

From 797cb7ff1ff03205d6a88a26d766a21191a0b746 Mon Sep 17 00:00:00 2001
From: pavanjoshi914 <pavanj914@gmail.com>
Date: Fri, 6 Dec 2024 01:11:01 +0530
Subject: [PATCH 2/3] fix: test

---
 .../background-script/actions/accounts/__tests__/get.test.ts    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 21ce5da431..6cae95a36f 100644
--- a/src/extension/background-script/actions/accounts/__tests__/get.test.ts
+++ b/src/extension/background-script/actions/accounts/__tests__/get.test.ts
@@ -92,7 +92,7 @@ describe("account info", () => {
       nostrEnabled: true,
       liquidEnabled: true,
       hasMnemonic: true,
-      seenSharedNodeBanner: true,
+      seenSharedNodeBanner: false,
       hasImportedNostrKey: true,
       bitcoinNetwork: "regtest",
       useMnemonicForLnurlAuth: true,

From 973e6890d02a58d5ef9869beaaf8aff66e4ed89d Mon Sep 17 00:00:00 2001
From: pavanjoshi914 <pavanj914@gmail.com>
Date: Fri, 6 Dec 2024 01:13:35 +0530
Subject: [PATCH 3/3] chore: cleanup

---
 src/app/screens/Home/DefaultView/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/screens/Home/DefaultView/index.tsx b/src/app/screens/Home/DefaultView/index.tsx
index 022be71d7b..1ce3c79670 100644
--- a/src/app/screens/Home/DefaultView/index.tsx
+++ b/src/app/screens/Home/DefaultView/index.tsx
@@ -87,7 +87,7 @@ const DefaultView: FC<Props> = (props) => {
         const userAccount = await api.getAccount();
         const nostrPrivateKey = await api.nostr.getPrivateKey(userAccount.id);
 
-        setSeenSharedNodeBanner(userAccount.seenSharedNodeBanner); //SharedNodeBanner); //SharedNodeBanner);
+        setSeenSharedNodeBanner(userAccount.seenSharedNodeBanner);
 
         setNostrPublicKey(
           nostrPrivateKey ? await nostr.derivePublicKey(nostrPrivateKey) : ""