From 58e2c3349b10dfbc338e6148f88b214ca2aea299 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Aaron?= <rene@twentyuno.net>
Date: Thu, 7 Sep 2023 15:03:20 +0200
Subject: [PATCH 01/17] feat: sketch

---
 src/app/screens/Enable/index.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/app/screens/Enable/index.tsx b/src/app/screens/Enable/index.tsx
index 984736cfce..6ba83ea7f6 100644
--- a/src/app/screens/Enable/index.tsx
+++ b/src/app/screens/Enable/index.tsx
@@ -22,6 +22,10 @@ function Enable(props: Props) {
   });
   const { t: tCommon } = useTranslation("common");
 
+  // Fetch acount and check for keys if this is a call that requires keys
+  // Render onboarding prompt (instead of enable screen)
+  // Remove all content script changes introduced with the previous PR
+
   const enable = useCallback(() => {
     try {
       setLoading(true);

From 8d565e22d2e75a51edce7b3dfc4155a5ddd52f36 Mon Sep 17 00:00:00 2001
From: pavanjoshi914 <pavanj914@gmail.com>
Date: Mon, 11 Sep 2023 10:15:27 +0530
Subject: [PATCH 02/17] feat: onboard in enable

---
 src/app/components/Enable/index.tsx           | 122 ++++++++++++++++++
 src/app/router/Prompt/Prompt.tsx              |   7 +-
 src/app/screens/Enable/NostrEnable.tsx        |  92 +++++++++++++
 src/app/screens/Enable/index.tsx              |   4 -
 .../actions/allowances/enable.ts              |   4 +-
 src/extension/content-script/nostr.js         |  11 +-
 6 files changed, 222 insertions(+), 18 deletions(-)
 create mode 100644 src/app/components/Enable/index.tsx
 create mode 100644 src/app/screens/Enable/NostrEnable.tsx

diff --git a/src/app/components/Enable/index.tsx b/src/app/components/Enable/index.tsx
new file mode 100644
index 0000000000..00fd3f3301
--- /dev/null
+++ b/src/app/components/Enable/index.tsx
@@ -0,0 +1,122 @@
+import { CheckIcon } from "@bitcoin-design/bitcoin-icons-react/filled";
+import ConfirmOrCancel from "@components/ConfirmOrCancel";
+import Container from "@components/Container";
+import PublisherCard from "@components/PublisherCard";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import ScreenHeader from "~/app/components/ScreenHeader";
+import toast from "~/app/components/Toast";
+import { USER_REJECTED_ERROR } from "~/common/constants";
+import msg from "~/common/lib/msg";
+import type { OriginData } from "~/types";
+
+type Props = {
+  origin: OriginData;
+};
+function Enable(props: Props) {
+  const hasFetchedData = useRef(false);
+  const [loading, setLoading] = useState(false);
+  const { t } = useTranslation("translation", {
+    keyPrefix: "enable",
+  });
+  const { t: tCommon } = useTranslation("common");
+
+  const enable = useCallback(() => {
+    try {
+      setLoading(true);
+      msg.reply({
+        enabled: true,
+        remember: true,
+      });
+    } catch (e) {
+      console.error(e);
+      if (e instanceof Error) toast.error(`${tCommon("error")}: ${e.message}`);
+    } finally {
+      setLoading(false);
+    }
+  }, [tCommon]);
+
+  function reject(event: React.MouseEvent<HTMLAnchorElement>) {
+    event.preventDefault();
+    msg.error(USER_REJECTED_ERROR);
+  }
+
+  async function block(event: React.MouseEvent<HTMLAnchorElement>) {
+    event.preventDefault();
+    await msg.request("addBlocklist", {
+      domain: props.origin.domain,
+      host: props.origin.host,
+    });
+    alert(t("block_added", { host: props.origin.host }));
+    msg.error(USER_REJECTED_ERROR);
+  }
+
+  useEffect(() => {
+    async function getAllowance() {
+      try {
+        const allowance = await msg.request("getAllowance", {
+          domain: props.origin.domain,
+          host: props.origin.host,
+        });
+        if (allowance && allowance.enabled) {
+          enable();
+        }
+      } catch (e) {
+        if (e instanceof Error) console.error(e.message);
+      }
+    }
+
+    // Run once.
+    if (!hasFetchedData.current) {
+      getAllowance();
+      hasFetchedData.current = true;
+    }
+  }, [enable, props.origin.domain, props.origin.host]);
+
+  return (
+    <div className="h-full flex flex-col overflow-y-auto no-scrollbar">
+      <ScreenHeader title={t("title")} />
+      <Container justifyBetween maxWidth="sm">
+        <div>
+          <PublisherCard
+            title={props.origin.name}
+            image={props.origin.icon}
+            url={props.origin.host}
+            isSmall={false}
+          />
+
+          <div className="dark:text-white pt-6">
+            <p className="mb-2">{t("allow")}</p>
+
+            <div className="mb-2 flex items-center">
+              <CheckIcon className="w-5 h-5 mr-2" />
+              <p className="dark:text-white">{t("request1")}</p>
+            </div>
+            <div className="mb-2 flex items-center">
+              <CheckIcon className="w-5 h-5 mr-2" />
+              <p className="dark:text-white">{t("request2")}</p>
+            </div>
+          </div>
+        </div>
+        <div className="text-center flex flex-col">
+          <ConfirmOrCancel
+            disabled={loading}
+            loading={loading}
+            label={tCommon("actions.connect")}
+            onConfirm={enable}
+            onCancel={reject}
+          />
+          <a
+            className="mt-4 underline text-sm text-gray-400 overflow-hidden text-ellipsis whitespace-nowrap"
+            href="#"
+            onClick={block}
+          >
+            {t("block_and_ignore", { host: props.origin.host })}
+          </a>
+        </div>
+      </Container>
+    </div>
+  );
+}
+
+export default Enable;
diff --git a/src/app/router/Prompt/Prompt.tsx b/src/app/router/Prompt/Prompt.tsx
index 3f4b13d4a9..a5d283ca9a 100644
--- a/src/app/router/Prompt/Prompt.tsx
+++ b/src/app/router/Prompt/Prompt.tsx
@@ -1,4 +1,3 @@
-import AccountMenu from "@components/AccountMenu";
 import ConfirmAddAccount from "@screens/ConfirmAddAccount";
 import ConfirmKeysend from "@screens/ConfirmKeysend";
 import ConfirmPayment from "@screens/ConfirmPayment";
@@ -23,6 +22,7 @@ import Toaster from "~/app/components/Toast/Toaster";
 import Providers from "~/app/context/Providers";
 import RequireAuth from "~/app/router/RequireAuth";
 import BitcoinConfirmGetAddress from "~/app/screens/Bitcoin/ConfirmGetAddress";
+import NostrEnable from "~/app/screens/Enable/NostrEnable";
 import Onboard from "~/app/screens/Onboard/Prompt";
 import type { NavigationState, OriginData } from "~/types";
 
@@ -86,7 +86,9 @@ function Prompt() {
             />
             <Route
               path="public/nostr/enable"
-              element={<Enable origin={navigationState.origin as OriginData} />} // prompt will always have an `origin` set, just the type is optional to support usage via PopUp
+              element={
+                <NostrEnable origin={navigationState.origin as OriginData} />
+              } // prompt will always have an `origin` set, just the type is optional to support usage via PopUp
             />
             <Route
               path="public/webbtc/enable"
@@ -158,7 +160,6 @@ const Layout = () => {
         <div className="w-24 shrink-0">
           <AlbyLogo />
         </div>
-        <AccountMenu showOptions={false} />
       </div>
 
       <main className="flex flex-col grow min-h-0">
diff --git a/src/app/screens/Enable/NostrEnable.tsx b/src/app/screens/Enable/NostrEnable.tsx
new file mode 100644
index 0000000000..f2ce9479ce
--- /dev/null
+++ b/src/app/screens/Enable/NostrEnable.tsx
@@ -0,0 +1,92 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import Enable from "~/app/components/Enable";
+import toast from "~/app/components/Toast";
+import Onboard from "~/app/screens/Onboard/Prompt";
+import api from "~/common/lib/api";
+import msg from "~/common/lib/msg";
+import type { OriginData } from "~/types";
+
+type Props = {
+  origin: OriginData;
+};
+
+function NostrEnable(props: Props) {
+  const hasFetchedData = useRef(false);
+  const [loading, setLoading] = useState(false);
+  const [accountComponent, setAccountComponent] =
+    useState<React.ReactNode | null>(null); // State to store the component to render
+
+  const { t: tCommon } = useTranslation("common");
+
+  const enable = useCallback(() => {
+    try {
+      setLoading(true);
+      msg.reply({
+        enabled: true,
+        remember: true,
+      });
+    } catch (e) {
+      console.error(e);
+      if (e instanceof Error) toast.error(`${tCommon("error")}: ${e.message}`);
+    } finally {
+      setLoading(false);
+    }
+  }, [tCommon]);
+
+  useEffect(() => {
+    async function getAllowance() {
+      try {
+        const allowance = await msg.request("getAllowance", {
+          domain: props.origin.domain,
+          host: props.origin.host,
+        });
+        const account = await api.getAccount();
+        if (allowance && allowance.enabled && account.nostrEnabled) {
+          enable();
+        }
+      } catch (e) {
+        if (e instanceof Error) console.error(e.message);
+      }
+    }
+
+    // Run once.
+    if (!hasFetchedData.current) {
+      getAllowance();
+      hasFetchedData.current = true;
+    }
+  }, [enable, props.origin.domain, props.origin.host]);
+
+  useEffect(() => {
+    // Fetch account data and set the component to render based on the result
+    async function fetchAccountAndSetComponent() {
+      try {
+        const account = await api.getAccount();
+
+        if (account.nostrEnabled) {
+          setAccountComponent(<Enable origin={props.origin} />);
+        } else {
+          setAccountComponent(<Onboard />);
+        }
+      } catch (e) {
+        // Handle any errors that occur during account fetching
+        console.error(e);
+      }
+    }
+
+    fetchAccountAndSetComponent(); // Call the function when the component mounts
+  }, [props.origin]);
+
+  return (
+    <div>
+      {loading ? (
+        <div>Loading...</div>
+      ) : (
+        // Render the component based on the accountComponent state
+        accountComponent
+      )}
+    </div>
+  );
+}
+
+export default NostrEnable;
diff --git a/src/app/screens/Enable/index.tsx b/src/app/screens/Enable/index.tsx
index 45e36a2267..07a76a6876 100644
--- a/src/app/screens/Enable/index.tsx
+++ b/src/app/screens/Enable/index.tsx
@@ -22,10 +22,6 @@ function Enable(props: Props) {
   });
   const { t: tCommon } = useTranslation("common");
 
-  // Fetch acount and check for keys if this is a call that requires keys
-  // Render onboarding prompt (instead of enable screen)
-  // Remove all content script changes introduced with the previous PR
-
   const enable = useCallback(() => {
     try {
       setLoading(true);
diff --git a/src/extension/background-script/actions/allowances/enable.ts b/src/extension/background-script/actions/allowances/enable.ts
index ceb6665d07..5bb4c0b2d2 100644
--- a/src/extension/background-script/actions/allowances/enable.ts
+++ b/src/extension/background-script/actions/allowances/enable.ts
@@ -15,7 +15,9 @@ const enable = async (message: MessageAllowanceEnable, sender: Sender) => {
     .where("host")
     .equalsIgnoreCase(host)
     .first();
-
+  // remove this? cause next time the allowance is set and enable is called we directly return from here.hence onboarding will work only once
+  // i suggest to not remove it. as if we go to the screen everytime. for other providers. it will be a flickering glitch.
+  // screen will popup for a second and close automatically as allowance is set but we are returning from the screen if we remove it.
   if (isUnlocked && allowance && allowance.enabled) {
     return {
       data: { enabled: true },
diff --git a/src/extension/content-script/nostr.js b/src/extension/content-script/nostr.js
index 76fc586729..92ff55266c 100644
--- a/src/extension/content-script/nostr.js
+++ b/src/extension/content-script/nostr.js
@@ -1,6 +1,5 @@
 import browser from "webextension-polyfill";
 
-import api from "~/common/lib/api";
 import getOriginData from "./originData";
 import shouldInject from "./shouldInject";
 
@@ -23,7 +22,6 @@ const disabledCalls = ["nostr/enable"];
 
 let isEnabled = false; // store if nostr is enabled for this content page
 let isRejected = false; // store if the nostr enable call failed. if so we do not prompt again
-let account;
 
 async function init() {
   const inject = await shouldInject();
@@ -84,14 +82,7 @@ async function init() {
         origin: getOriginData(),
       };
 
-      // Overrides the enable action so the user can go through onboarding to setup their keys
-      if (!account || !account.nostrEnabled) {
-        account = await api.getAccount();
-        if (!account.nostrEnabled) {
-          messageWithOrigin.action = ev.data.action = `public/nostr/onboard`;
-        }
-      }
-
+      // we don't handle onboard in content script. hence we will be resolving original call nostr/enable with an error hence we need reload the next time we execute the call
       const replyFunction = (response) => {
         if (ev.data.action === "nostr/enable") {
           isEnabled = response.data?.enabled;

From a60e8d91d02a219c090cd4546b44087350aa1578 Mon Sep 17 00:00:00 2001
From: pavanjoshi914 <pavanj914@gmail.com>
Date: Mon, 11 Sep 2023 10:30:33 +0530
Subject: [PATCH 03/17] chore: add comment

---
 src/app/router/Prompt/Prompt.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/app/router/Prompt/Prompt.tsx b/src/app/router/Prompt/Prompt.tsx
index a5d283ca9a..842bacd43e 100644
--- a/src/app/router/Prompt/Prompt.tsx
+++ b/src/app/router/Prompt/Prompt.tsx
@@ -161,6 +161,8 @@ const Layout = () => {
           <AlbyLogo />
         </div>
       </div>
+      {/* maybe just remove accounts from the prompt and use previous method, in this way we acheive no need of reloading as well and don't reject original promise
+      what is the use of doing account switching in the prompt? */}
 
       <main className="flex flex-col grow min-h-0">
         <Outlet />

From e8d30b9ecc5058112d66c3d22872ef2cb5db67ae Mon Sep 17 00:00:00 2001
From: pavanjoshi914 <pavanj914@gmail.com>
Date: Wed, 13 Sep 2023 11:58:34 +0530
Subject: [PATCH 04/17] feat: onboarding shall work even after allowance is set
 by some other provider

---
 src/app/router/Prompt/Prompt.tsx              |  5 +-
 src/app/screens/Enable/NostrEnable.tsx        |  1 +
 .../allowances/__tests__/enable.test.ts       |  2 +-
 .../actions/allowances/{ => enable}/enable.ts |  4 +-
 .../allowances/enable/mnemonicEnable.ts       | 83 ++++++++++++++++++
 .../actions/allowances/enable/nostrEnable.ts  | 86 +++++++++++++++++++
 .../actions/allowances/index.ts               | 16 +++-
 src/extension/background-script/router.ts     |  6 +-
 8 files changed, 192 insertions(+), 11 deletions(-)
 rename src/extension/background-script/actions/allowances/{ => enable}/enable.ts (96%)
 create mode 100644 src/extension/background-script/actions/allowances/enable/mnemonicEnable.ts
 create mode 100644 src/extension/background-script/actions/allowances/enable/nostrEnable.ts

diff --git a/src/app/router/Prompt/Prompt.tsx b/src/app/router/Prompt/Prompt.tsx
index 842bacd43e..0bc8c10bfb 100644
--- a/src/app/router/Prompt/Prompt.tsx
+++ b/src/app/router/Prompt/Prompt.tsx
@@ -17,6 +17,7 @@ import NostrConfirmSignMessage from "@screens/Nostr/ConfirmSignMessage";
 import NostrConfirmSignSchnorr from "@screens/Nostr/ConfirmSignSchnorr";
 import Unlock from "@screens/Unlock";
 import { HashRouter, Navigate, Outlet, Route, Routes } from "react-router-dom";
+import AccountMenu from "~/app/components/AccountMenu";
 import AlbyLogo from "~/app/components/AlbyLogo";
 import Toaster from "~/app/components/Toast/Toaster";
 import Providers from "~/app/context/Providers";
@@ -160,10 +161,8 @@ const Layout = () => {
         <div className="w-24 shrink-0">
           <AlbyLogo />
         </div>
+        <AccountMenu showOptions={false} />
       </div>
-      {/* maybe just remove accounts from the prompt and use previous method, in this way we acheive no need of reloading as well and don't reject original promise
-      what is the use of doing account switching in the prompt? */}
-
       <main className="flex flex-col grow min-h-0">
         <Outlet />
       </main>
diff --git a/src/app/screens/Enable/NostrEnable.tsx b/src/app/screens/Enable/NostrEnable.tsx
index f2ce9479ce..dda491d7bb 100644
--- a/src/app/screens/Enable/NostrEnable.tsx
+++ b/src/app/screens/Enable/NostrEnable.tsx
@@ -59,6 +59,7 @@ function NostrEnable(props: Props) {
 
   useEffect(() => {
     // Fetch account data and set the component to render based on the result
+
     async function fetchAccountAndSetComponent() {
       try {
         const account = await api.getAccount();
diff --git a/src/extension/background-script/actions/allowances/__tests__/enable.test.ts b/src/extension/background-script/actions/allowances/__tests__/enable.test.ts
index d84e67197d..32fa3c4404 100644
--- a/src/extension/background-script/actions/allowances/__tests__/enable.test.ts
+++ b/src/extension/background-script/actions/allowances/__tests__/enable.test.ts
@@ -4,7 +4,7 @@ import state from "~/extension/background-script/state";
 import { allowanceFixture } from "~/fixtures/allowances";
 import type { DbAllowance, MessageAllowanceEnable, Sender } from "~/types";
 
-import enableAllowance from "../enable";
+import enableAllowance from "../enable/enable";
 
 jest.mock("~/extension/background-script/state");
 
diff --git a/src/extension/background-script/actions/allowances/enable.ts b/src/extension/background-script/actions/allowances/enable/enable.ts
similarity index 96%
rename from src/extension/background-script/actions/allowances/enable.ts
rename to src/extension/background-script/actions/allowances/enable/enable.ts
index 5bb4c0b2d2..488b3db9ba 100644
--- a/src/extension/background-script/actions/allowances/enable.ts
+++ b/src/extension/background-script/actions/allowances/enable/enable.ts
@@ -3,8 +3,8 @@ import { getHostFromSender } from "~/common/utils/helpers";
 import db from "~/extension/background-script/db";
 import type { MessageAllowanceEnable, Sender } from "~/types";
 
-import state from "../../state";
-import { ExtensionIcon, setIcon } from "../setup/setIcon";
+import state from "../../../state";
+import { ExtensionIcon, setIcon } from "../../setup/setIcon";
 
 const enable = async (message: MessageAllowanceEnable, sender: Sender) => {
   const host = getHostFromSender(sender);
diff --git a/src/extension/background-script/actions/allowances/enable/mnemonicEnable.ts b/src/extension/background-script/actions/allowances/enable/mnemonicEnable.ts
new file mode 100644
index 0000000000..abafb6944c
--- /dev/null
+++ b/src/extension/background-script/actions/allowances/enable/mnemonicEnable.ts
@@ -0,0 +1,83 @@
+import utils from "~/common/lib/utils";
+import { getHostFromSender } from "~/common/utils/helpers";
+import db from "~/extension/background-script/db";
+import type { MessageAllowanceEnable, Sender } from "~/types";
+
+import state from "../../../state";
+import { ExtensionIcon, setIcon } from "../../setup/setIcon";
+
+const mnemonicEnable = async (
+  message: MessageAllowanceEnable,
+  sender: Sender
+) => {
+  const host = getHostFromSender(sender);
+  if (!host) return;
+
+  const isUnlocked = await state.getState().isUnlocked();
+  const account = await state.getState().getAccount();
+  const allowance = await db.allowances
+    .where("host")
+    .equalsIgnoreCase(host)
+    .first();
+  // remove this? cause next time the allowance is set and enable is called we directly return from here.hence onboarding will work only once
+  // i suggest to not remove it. as if we go to the screen everytime. for other providers. it will be a flickering glitch.
+  // screen will popup for a second and close automatically as allowance is set but we are returning from the screen if we remove it.
+  if (isUnlocked && allowance && allowance.enabled && account?.mnemonic) {
+    return {
+      data: { enabled: true },
+    };
+  } else {
+    try {
+      const response = await utils.openPrompt<{
+        enabled: boolean;
+        remember: boolean;
+      }>(message);
+
+      if (response.data.enabled && sender.tab) {
+        await setIcon(ExtensionIcon.Active, sender.tab.id as number); // highlight the icon when enabled
+      }
+
+      // if the response should be saved/remembered we update the allowance for the domain
+      // as this returns a promise we must wait until it resolves
+      if (response.data.enabled && response.data.remember) {
+        if (allowance) {
+          if (!allowance.id) {
+            return { data: { error: "id is missing" } };
+          }
+          await db.allowances.update(allowance.id, {
+            enabled: true,
+            name: message.origin.name,
+            imageURL: message.origin.icon,
+          });
+        } else {
+          await db.allowances.add({
+            host: host,
+            name: message.origin.name,
+            imageURL: message.origin.icon,
+            enabled: true,
+            lastPaymentAt: 0,
+            totalBudget: 0,
+            remainingBudget: 0,
+            createdAt: Date.now().toString(),
+            lnurlAuth: false,
+            tag: "",
+          });
+        }
+        await db.saveToStorage();
+      }
+      return {
+        data: {
+          enabled: response.data.enabled,
+          remember: response.data.remember,
+        },
+      };
+    } catch (e) {
+      console.error(e);
+      if (e instanceof Error) {
+        return { error: e.message };
+      }
+    }
+  }
+};
+
+export default mnemonicEnable;
diff --git a/src/extension/background-script/actions/allowances/enable/nostrEnable.ts b/src/extension/background-script/actions/allowances/enable/nostrEnable.ts
new file mode 100644
index 0000000000..3b073a704f
--- /dev/null
+++ b/src/extension/background-script/actions/allowances/enable/nostrEnable.ts
@@ -0,0 +1,86 @@
+import utils from "~/common/lib/utils";
+import { getHostFromSender } from "~/common/utils/helpers";
+import db from "~/extension/background-script/db";
+import type { MessageAllowanceEnable, Sender } from "~/types";
+
+import state from "../../../state";
+import { ExtensionIcon, setIcon } from "../../setup/setIcon";
+
+const nostrEnable = async (message: MessageAllowanceEnable, sender: Sender) => {
+  const host = getHostFromSender(sender);
+  if (!host) return;
+
+  const isUnlocked = await state.getState().isUnlocked();
+  const account = await state.getState().getAccount();
+  const allowance = await db.allowances
+
+    .where("host")
+    .equalsIgnoreCase(host)
+    .first();
+  // remove this? cause next time the allowance is set and enable is called we directly return from here.hence onboarding will work only once
+  // i suggest to not remove it. as if we go to the screen everytime. for other providers. it will be a flickering glitch.
+  // screen will popup for a second and close automatically as allowance is set but we are returning from the screen if we remove it.
+  if (
+    isUnlocked &&
+    allowance &&
+    allowance.enabled &&
+    account?.nostrPrivateKey
+  ) {
+    return {
+      data: { enabled: true },
+    };
+  } else {
+    try {
+      const response = await utils.openPrompt<{
+        enabled: boolean;
+        remember: boolean;
+      }>(message);
+
+      if (response.data.enabled && sender.tab) {
+        await setIcon(ExtensionIcon.Active, sender.tab.id as number); // highlight the icon when enabled
+      }
+
+      // if the response should be saved/remembered we update the allowance for the domain
+      // as this returns a promise we must wait until it resolves
+      if (response.data.enabled && response.data.remember) {
+        if (allowance) {
+          if (!allowance.id) {
+            return { data: { error: "id is missing" } };
+          }
+          await db.allowances.update(allowance.id, {
+            enabled: true,
+            name: message.origin.name,
+            imageURL: message.origin.icon,
+          });
+        } else {
+          await db.allowances.add({
+            host: host,
+            name: message.origin.name,
+            imageURL: message.origin.icon,
+            enabled: true,
+            lastPaymentAt: 0,
+            totalBudget: 0,
+            remainingBudget: 0,
+            createdAt: Date.now().toString(),
+            lnurlAuth: false,
+            tag: "",
+          });
+        }
+        await db.saveToStorage();
+      }
+      return {
+        data: {
+          enabled: response.data.enabled,
+          remember: response.data.remember,
+        },
+      };
+    } catch (e) {
+      console.error(e);
+      if (e instanceof Error) {
+        return { error: e.message };
+      }
+    }
+  }
+};
+
+export default nostrEnable;
diff --git a/src/extension/background-script/actions/allowances/index.ts b/src/extension/background-script/actions/allowances/index.ts
index 072d493211..cc0c68bc8d 100644
--- a/src/extension/background-script/actions/allowances/index.ts
+++ b/src/extension/background-script/actions/allowances/index.ts
@@ -1,9 +1,21 @@
 import add from "./add";
 import deleteAllowance from "./delete";
-import enable from "./enable";
+import enable from "./enable/enable";
+import mnemonicEnable from "./enable/mnemonicEnable";
+import nostrEnable from "./enable/nostrEnable";
 import get from "./get";
 import getById from "./getById";
 import list from "./list";
 import updateAllowance from "./update";
 
-export { add, deleteAllowance, enable, get, getById, list, updateAllowance };
+export {
+  add,
+  deleteAllowance,
+  enable,
+  get,
+  getById,
+  list,
+  mnemonicEnable,
+  nostrEnable,
+  updateAllowance,
+};
diff --git a/src/extension/background-script/router.ts b/src/extension/background-script/router.ts
index ed63b54de8..f10f6437a2 100644
--- a/src/extension/background-script/router.ts
+++ b/src/extension/background-script/router.ts
@@ -85,7 +85,7 @@ const routes = {
   public: {
     webbtc: {
       onboard: onboard.prompt,
-      enable: allowances.enable,
+      enable: allowances.mnemonicEnable,
       getInfo: webbtc.getInfo,
       getAddressOrPrompt: webbtc.getAddressOrPrompt,
     },
@@ -106,13 +106,13 @@ const routes = {
     },
     liquid: {
       onboard: onboard.prompt,
-      enable: allowances.enable,
+      enable: allowances.mnemonicEnable,
       getAddressOrPrompt: liquid.getAddressOrPrompt,
       signPsetWithPrompt: liquid.signPsetWithPrompt,
     },
     nostr: {
       onboard: onboard.prompt,
-      enable: allowances.enable,
+      enable: allowances.nostrEnable,
       getPublicKeyOrPrompt: nostr.getPublicKeyOrPrompt,
       signEventOrPrompt: nostr.signEventOrPrompt,
       signSchnorrOrPrompt: nostr.signSchnorrOrPrompt,

From b575a937291c6870692dbbd3d88f6edf0a58d73c Mon Sep 17 00:00:00 2001
From: pavanjoshi914 <pavanj914@gmail.com>
Date: Thu, 14 Sep 2023 11:27:26 +0530
Subject: [PATCH 05/17] refactor: refactor providers

---
 src/app/router/Prompt/Prompt.tsx        |  25 ++---
 src/app/screens/Enable/AlbyEnable.tsx   |   9 ++
 src/app/screens/Enable/LiquidEnable.tsx |  91 ++++++++++++++++++
 src/app/screens/Enable/WebbtcEnable.tsx |  91 ++++++++++++++++++
 src/app/screens/Enable/WeblnEnable.tsx  |   9 ++
 src/app/screens/Enable/index.tsx        | 123 ------------------------
 6 files changed, 213 insertions(+), 135 deletions(-)
 create mode 100644 src/app/screens/Enable/AlbyEnable.tsx
 create mode 100644 src/app/screens/Enable/LiquidEnable.tsx
 create mode 100644 src/app/screens/Enable/WebbtcEnable.tsx
 create mode 100644 src/app/screens/Enable/WeblnEnable.tsx
 delete mode 100644 src/app/screens/Enable/index.tsx

diff --git a/src/app/router/Prompt/Prompt.tsx b/src/app/router/Prompt/Prompt.tsx
index 0bc8c10bfb..29dd7727ef 100644
--- a/src/app/router/Prompt/Prompt.tsx
+++ b/src/app/router/Prompt/Prompt.tsx
@@ -1,9 +1,9 @@
+import AccountMenu from "@components/AccountMenu";
 import ConfirmAddAccount from "@screens/ConfirmAddAccount";
 import ConfirmKeysend from "@screens/ConfirmKeysend";
 import ConfirmPayment from "@screens/ConfirmPayment";
 import ConfirmRequestPermission from "@screens/ConfirmRequestPermission";
 import ConfirmSignMessage from "@screens/ConfirmSignMessage";
-import Enable from "@screens/Enable";
 import LNURLAuth from "@screens/LNURLAuth";
 import LNURLChannel from "@screens/LNURLChannel";
 import LNURLPay from "@screens/LNURLPay";
@@ -17,13 +17,16 @@ import NostrConfirmSignMessage from "@screens/Nostr/ConfirmSignMessage";
 import NostrConfirmSignSchnorr from "@screens/Nostr/ConfirmSignSchnorr";
 import Unlock from "@screens/Unlock";
 import { HashRouter, Navigate, Outlet, Route, Routes } from "react-router-dom";
-import AccountMenu from "~/app/components/AccountMenu";
 import AlbyLogo from "~/app/components/AlbyLogo";
 import Toaster from "~/app/components/Toast/Toaster";
 import Providers from "~/app/context/Providers";
 import RequireAuth from "~/app/router/RequireAuth";
 import BitcoinConfirmGetAddress from "~/app/screens/Bitcoin/ConfirmGetAddress";
+import AlbyEnable from "~/app/screens/Enable/AlbyEnable";
+import LiquidEnable from "~/app/screens/Enable/LiquidEnable";
 import NostrEnable from "~/app/screens/Enable/NostrEnable";
+import WebbtcEnable from "~/app/screens/Enable/WebbtcEnable";
+import WeblnEnable from "~/app/screens/Enable/WeblnEnable";
 import Onboard from "~/app/screens/Onboard/Prompt";
 import type { NavigationState, OriginData } from "~/types";
 
@@ -73,17 +76,13 @@ function Prompt() {
                 />
               }
             />
-            <Route
-              path="public/alby/enable"
-              element={<Enable origin={navigationState.origin as OriginData} />} // prompt will always have an `origin` set, just the type is optional to support usage via PopUp
-            />
-            <Route
-              path="public/webln/enable"
-              element={<Enable origin={navigationState.origin as OriginData} />} // prompt will always have an `origin` set, just the type is optional to support usage via PopUp
-            />
+            <Route path="public/alby/enable" element={<AlbyEnable />} />
+            <Route path="public/webln/enable" element={<WeblnEnable />} />
             <Route
               path="public/liquid/enable"
-              element={<Enable origin={navigationState.origin as OriginData} />} // prompt will always have an `origin` set, just the type is optional to support usage via PopUp
+              element={
+                <LiquidEnable origin={navigationState.origin as OriginData} />
+              } // prompt will always have an `origin` set, just the type is optional to support usage via PopUp
             />
             <Route
               path="public/nostr/enable"
@@ -93,7 +92,9 @@ function Prompt() {
             />
             <Route
               path="public/webbtc/enable"
-              element={<Enable origin={navigationState.origin as OriginData} />} // prompt will always have an `origin` set, just the type is optional to support usage via PopUp
+              element={
+                <WebbtcEnable origin={navigationState.origin as OriginData} />
+              } // prompt will always have an `origin` set, just the type is optional to support usage via PopUp
             />
             <Route
               path="public/webbtc/confirmGetAddress"
diff --git a/src/app/screens/Enable/AlbyEnable.tsx b/src/app/screens/Enable/AlbyEnable.tsx
new file mode 100644
index 0000000000..ae6a5b0055
--- /dev/null
+++ b/src/app/screens/Enable/AlbyEnable.tsx
@@ -0,0 +1,9 @@
+import Enable from "~/app/components/Enable";
+import { useNavigationState } from "~/app/hooks/useNavigationState";
+import { OriginData } from "~/types";
+
+export default function AlbyEnable() {
+  const navState = useNavigationState();
+  const origin = navState.origin as OriginData;
+  return <Enable origin={origin} />;
+}
diff --git a/src/app/screens/Enable/LiquidEnable.tsx b/src/app/screens/Enable/LiquidEnable.tsx
new file mode 100644
index 0000000000..4ae5fa3a24
--- /dev/null
+++ b/src/app/screens/Enable/LiquidEnable.tsx
@@ -0,0 +1,91 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import Enable from "~/app/components/Enable";
+import toast from "~/app/components/Toast";
+import Onboard from "~/app/screens/Onboard/Prompt";
+import api from "~/common/lib/api";
+import msg from "~/common/lib/msg";
+import type { OriginData } from "~/types";
+
+type Props = {
+  origin: OriginData;
+};
+
+export default function LiquidEnable(props: Props) {
+  const hasFetchedData = useRef(false);
+  const [loading, setLoading] = useState(false);
+  const [accountComponent, setAccountComponent] =
+    useState<React.ReactNode | null>(null); // State to store the component to render
+
+  const { t: tCommon } = useTranslation("common");
+
+  const enable = useCallback(() => {
+    try {
+      setLoading(true);
+      msg.reply({
+        enabled: true,
+        remember: true,
+      });
+    } catch (e) {
+      console.error(e);
+      if (e instanceof Error) toast.error(`${tCommon("error")}: ${e.message}`);
+    } finally {
+      setLoading(false);
+    }
+  }, [tCommon]);
+
+  useEffect(() => {
+    async function getAllowance() {
+      try {
+        const allowance = await msg.request("getAllowance", {
+          domain: props.origin.domain,
+          host: props.origin.host,
+        });
+        const account = await api.getAccount();
+        if (allowance && allowance.enabled && account.nostrEnabled) {
+          enable();
+        }
+      } catch (e) {
+        if (e instanceof Error) console.error(e.message);
+      }
+    }
+
+    // Run once.
+    if (!hasFetchedData.current) {
+      getAllowance();
+      hasFetchedData.current = true;
+    }
+  }, [enable, props.origin.domain, props.origin.host]);
+
+  useEffect(() => {
+    // Fetch account data and set the component to render based on the result
+
+    async function fetchAccountAndSetComponent() {
+      try {
+        const account = await api.getAccount();
+
+        if (account.nostrEnabled) {
+          setAccountComponent(<Enable origin={props.origin} />);
+        } else {
+          setAccountComponent(<Onboard />);
+        }
+      } catch (e) {
+        // Handle any errors that occur during account fetching
+        console.error(e);
+      }
+    }
+
+    fetchAccountAndSetComponent(); // Call the function when the component mounts
+  }, [props.origin]);
+
+  return (
+    <div>
+      {loading ? (
+        <div>Loading...</div>
+      ) : (
+        // Render the component based on the accountComponent state
+        accountComponent
+      )}
+    </div>
+  );
+}
diff --git a/src/app/screens/Enable/WebbtcEnable.tsx b/src/app/screens/Enable/WebbtcEnable.tsx
new file mode 100644
index 0000000000..64b6100eae
--- /dev/null
+++ b/src/app/screens/Enable/WebbtcEnable.tsx
@@ -0,0 +1,91 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import Enable from "~/app/components/Enable";
+import toast from "~/app/components/Toast";
+import Onboard from "~/app/screens/Onboard/Prompt";
+import api from "~/common/lib/api";
+import msg from "~/common/lib/msg";
+import type { OriginData } from "~/types";
+
+type Props = {
+  origin: OriginData;
+};
+
+export default function WebbtcEnable(props: Props) {
+  const hasFetchedData = useRef(false);
+  const [loading, setLoading] = useState(false);
+  const [accountComponent, setAccountComponent] =
+    useState<React.ReactNode | null>(null); // State to store the component to render
+
+  const { t: tCommon } = useTranslation("common");
+
+  const enable = useCallback(() => {
+    try {
+      setLoading(true);
+      msg.reply({
+        enabled: true,
+        remember: true,
+      });
+    } catch (e) {
+      console.error(e);
+      if (e instanceof Error) toast.error(`${tCommon("error")}: ${e.message}`);
+    } finally {
+      setLoading(false);
+    }
+  }, [tCommon]);
+
+  useEffect(() => {
+    async function getAllowance() {
+      try {
+        const allowance = await msg.request("getAllowance", {
+          domain: props.origin.domain,
+          host: props.origin.host,
+        });
+        const account = await api.getAccount();
+        if (allowance && allowance.enabled && account.nostrEnabled) {
+          enable();
+        }
+      } catch (e) {
+        if (e instanceof Error) console.error(e.message);
+      }
+    }
+
+    // Run once.
+    if (!hasFetchedData.current) {
+      getAllowance();
+      hasFetchedData.current = true;
+    }
+  }, [enable, props.origin.domain, props.origin.host]);
+
+  useEffect(() => {
+    // Fetch account data and set the component to render based on the result
+
+    async function fetchAccountAndSetComponent() {
+      try {
+        const account = await api.getAccount();
+
+        if (account.nostrEnabled) {
+          setAccountComponent(<Enable origin={props.origin} />);
+        } else {
+          setAccountComponent(<Onboard />);
+        }
+      } catch (e) {
+        // Handle any errors that occur during account fetching
+        console.error(e);
+      }
+    }
+
+    fetchAccountAndSetComponent(); // Call the function when the component mounts
+  }, [props.origin]);
+
+  return (
+    <div>
+      {loading ? (
+        <div>Loading...</div>
+      ) : (
+        // Render the component based on the accountComponent state
+        accountComponent
+      )}
+    </div>
+  );
+}
diff --git a/src/app/screens/Enable/WeblnEnable.tsx b/src/app/screens/Enable/WeblnEnable.tsx
new file mode 100644
index 0000000000..e28a60a8f6
--- /dev/null
+++ b/src/app/screens/Enable/WeblnEnable.tsx
@@ -0,0 +1,9 @@
+import Enable from "~/app/components/Enable";
+import { useNavigationState } from "~/app/hooks/useNavigationState";
+import { OriginData } from "~/types";
+
+export default function WeblnEnable() {
+  const navState = useNavigationState();
+  const origin = navState.origin as OriginData;
+  return <Enable origin={origin} />;
+}
diff --git a/src/app/screens/Enable/index.tsx b/src/app/screens/Enable/index.tsx
deleted file mode 100644
index 07a76a6876..0000000000
--- a/src/app/screens/Enable/index.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-import { CheckIcon } from "@bitcoin-design/bitcoin-icons-react/filled";
-import ConfirmOrCancel from "@components/ConfirmOrCancel";
-import Container from "@components/Container";
-import PublisherCard from "@components/PublisherCard";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
-import ScreenHeader from "~/app/components/ScreenHeader";
-import toast from "~/app/components/Toast";
-import { USER_REJECTED_ERROR } from "~/common/constants";
-import msg from "~/common/lib/msg";
-import type { OriginData } from "~/types";
-
-type Props = {
-  origin: OriginData;
-};
-
-function Enable(props: Props) {
-  const hasFetchedData = useRef(false);
-  const [loading, setLoading] = useState(false);
-  const { t } = useTranslation("translation", {
-    keyPrefix: "enable",
-  });
-  const { t: tCommon } = useTranslation("common");
-
-  const enable = useCallback(() => {
-    try {
-      setLoading(true);
-      msg.reply({
-        enabled: true,
-        remember: true,
-      });
-    } catch (e) {
-      console.error(e);
-      if (e instanceof Error) toast.error(`${tCommon("error")}: ${e.message}`);
-    } finally {
-      setLoading(false);
-    }
-  }, [tCommon]);
-
-  function reject(event: React.MouseEvent<HTMLAnchorElement>) {
-    event.preventDefault();
-    msg.error(USER_REJECTED_ERROR);
-  }
-
-  async function block(event: React.MouseEvent<HTMLAnchorElement>) {
-    event.preventDefault();
-    await msg.request("addBlocklist", {
-      domain: props.origin.domain,
-      host: props.origin.host,
-    });
-    alert(t("block_added", { host: props.origin.host }));
-    msg.error(USER_REJECTED_ERROR);
-  }
-
-  useEffect(() => {
-    async function getAllowance() {
-      try {
-        const allowance = await msg.request("getAllowance", {
-          domain: props.origin.domain,
-          host: props.origin.host,
-        });
-        if (allowance && allowance.enabled) {
-          enable();
-        }
-      } catch (e) {
-        if (e instanceof Error) console.error(e.message);
-      }
-    }
-
-    // Run once.
-    if (!hasFetchedData.current) {
-      getAllowance();
-      hasFetchedData.current = true;
-    }
-  }, [enable, props.origin.domain, props.origin.host]);
-
-  return (
-    <div className="h-full flex flex-col overflow-y-auto no-scrollbar">
-      <ScreenHeader title={t("title")} />
-      <Container justifyBetween maxWidth="sm">
-        <div>
-          <PublisherCard
-            title={props.origin.name}
-            image={props.origin.icon}
-            url={props.origin.host}
-            isSmall={false}
-          />
-
-          <div className="dark:text-white pt-6">
-            <p className="mb-2">{t("allow")}</p>
-
-            <div className="mb-2 flex items-center">
-              <CheckIcon className="w-5 h-5 mr-2" />
-              <p className="dark:text-white">{t("request1")}</p>
-            </div>
-            <div className="mb-2 flex items-center">
-              <CheckIcon className="w-5 h-5 mr-2" />
-              <p className="dark:text-white">{t("request2")}</p>
-            </div>
-          </div>
-        </div>
-        <div className="text-center flex flex-col">
-          <ConfirmOrCancel
-            disabled={loading}
-            loading={loading}
-            label={tCommon("actions.connect")}
-            onConfirm={enable}
-            onCancel={reject}
-          />
-          <a
-            className="mt-4 underline text-sm text-gray-400 overflow-hidden text-ellipsis whitespace-nowrap"
-            href="#"
-            onClick={block}
-          >
-            {t("block_and_ignore", { host: props.origin.host })}
-          </a>
-        </div>
-      </Container>
-    </div>
-  );
-}
-
-export default Enable;

From d2a32c276db2337685b4766bf5193296d5c8ffc1 Mon Sep 17 00:00:00 2001
From: pavanjoshi914 <pavanj914@gmail.com>
Date: Thu, 14 Sep 2023 12:25:44 +0530
Subject: [PATCH 06/17] feat: cleanup screens

---
 src/app/router/Prompt/Prompt.tsx        | 14 ++++-
 src/app/screens/Enable/AlbyEnable.tsx   | 11 ++--
 src/app/screens/Enable/LiquidEnable.tsx | 70 +++--------------------
 src/app/screens/Enable/NostrEnable.tsx  | 74 +++----------------------
 src/app/screens/Enable/WebbtcEnable.tsx | 70 +++--------------------
 src/app/screens/Enable/WeblnEnable.tsx  | 11 ++--
 6 files changed, 49 insertions(+), 201 deletions(-)

diff --git a/src/app/router/Prompt/Prompt.tsx b/src/app/router/Prompt/Prompt.tsx
index 655ca7e640..18ee8696b0 100644
--- a/src/app/router/Prompt/Prompt.tsx
+++ b/src/app/router/Prompt/Prompt.tsx
@@ -76,8 +76,18 @@ function Prompt() {
                 />
               }
             />
-            <Route path="public/alby/enable" element={<AlbyEnable />} />
-            <Route path="public/webln/enable" element={<WeblnEnable />} />
+            <Route
+              path="public/alby/enable"
+              element={
+                <AlbyEnable origin={navigationState.origin as OriginData} />
+              } // prompt will always have an `origin` set, just the type is optional to support usage via PopUp
+            />
+            <Route
+              path="public/webln/enable"
+              element={
+                <WeblnEnable origin={navigationState.origin as OriginData} />
+              } // prompt will always have an `origin` set, just the type is optional to support usage via PopUp
+            />
             <Route
               path="public/liquid/enable"
               element={
diff --git a/src/app/screens/Enable/AlbyEnable.tsx b/src/app/screens/Enable/AlbyEnable.tsx
index ae6a5b0055..837e139e7b 100644
--- a/src/app/screens/Enable/AlbyEnable.tsx
+++ b/src/app/screens/Enable/AlbyEnable.tsx
@@ -1,9 +1,10 @@
 import Enable from "~/app/components/Enable";
-import { useNavigationState } from "~/app/hooks/useNavigationState";
 import { OriginData } from "~/types";
 
-export default function AlbyEnable() {
-  const navState = useNavigationState();
-  const origin = navState.origin as OriginData;
-  return <Enable origin={origin} />;
+type Props = {
+  origin: OriginData;
+};
+
+export default function AlbyEnable(props: Props) {
+  return <Enable origin={props.origin} />;
 }
diff --git a/src/app/screens/Enable/LiquidEnable.tsx b/src/app/screens/Enable/LiquidEnable.tsx
index 4ae5fa3a24..fb1726323b 100644
--- a/src/app/screens/Enable/LiquidEnable.tsx
+++ b/src/app/screens/Enable/LiquidEnable.tsx
@@ -1,10 +1,8 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
+import React, { useEffect, useState } from "react";
 import Enable from "~/app/components/Enable";
-import toast from "~/app/components/Toast";
+import { useAccount } from "~/app/context/AccountContext";
 import Onboard from "~/app/screens/Onboard/Prompt";
 import api from "~/common/lib/api";
-import msg from "~/common/lib/msg";
 import type { OriginData } from "~/types";
 
 type Props = {
@@ -12,80 +10,28 @@ type Props = {
 };
 
 export default function LiquidEnable(props: Props) {
-  const hasFetchedData = useRef(false);
-  const [loading, setLoading] = useState(false);
   const [accountComponent, setAccountComponent] =
     useState<React.ReactNode | null>(null); // State to store the component to render
 
-  const { t: tCommon } = useTranslation("common");
-
-  const enable = useCallback(() => {
-    try {
-      setLoading(true);
-      msg.reply({
-        enabled: true,
-        remember: true,
-      });
-    } catch (e) {
-      console.error(e);
-      if (e instanceof Error) toast.error(`${tCommon("error")}: ${e.message}`);
-    } finally {
-      setLoading(false);
-    }
-  }, [tCommon]);
-
-  useEffect(() => {
-    async function getAllowance() {
-      try {
-        const allowance = await msg.request("getAllowance", {
-          domain: props.origin.domain,
-          host: props.origin.host,
-        });
-        const account = await api.getAccount();
-        if (allowance && allowance.enabled && account.nostrEnabled) {
-          enable();
-        }
-      } catch (e) {
-        if (e instanceof Error) console.error(e.message);
-      }
-    }
-
-    // Run once.
-    if (!hasFetchedData.current) {
-      getAllowance();
-      hasFetchedData.current = true;
-    }
-  }, [enable, props.origin.domain, props.origin.host]);
+  const { account } = useAccount();
 
   useEffect(() => {
-    // Fetch account data and set the component to render based on the result
-
     async function fetchAccountAndSetComponent() {
       try {
-        const account = await api.getAccount();
+        const fetchedAccount = await api.getAccount();
 
-        if (account.nostrEnabled) {
+        if (fetchedAccount.hasMnemonic) {
           setAccountComponent(<Enable origin={props.origin} />);
         } else {
           setAccountComponent(<Onboard />);
         }
       } catch (e) {
-        // Handle any errors that occur during account fetching
         console.error(e);
       }
     }
 
-    fetchAccountAndSetComponent(); // Call the function when the component mounts
-  }, [props.origin]);
+    fetchAccountAndSetComponent();
+  }, [props.origin, account]);
 
-  return (
-    <div>
-      {loading ? (
-        <div>Loading...</div>
-      ) : (
-        // Render the component based on the accountComponent state
-        accountComponent
-      )}
-    </div>
-  );
+  return <div>{accountComponent}</div>;
 }
diff --git a/src/app/screens/Enable/NostrEnable.tsx b/src/app/screens/Enable/NostrEnable.tsx
index dda491d7bb..192ab49452 100644
--- a/src/app/screens/Enable/NostrEnable.tsx
+++ b/src/app/screens/Enable/NostrEnable.tsx
@@ -1,93 +1,37 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
+import React, { useEffect, useState } from "react";
 import Enable from "~/app/components/Enable";
-import toast from "~/app/components/Toast";
+import { useAccount } from "~/app/context/AccountContext";
 import Onboard from "~/app/screens/Onboard/Prompt";
 import api from "~/common/lib/api";
-import msg from "~/common/lib/msg";
 import type { OriginData } from "~/types";
 
 type Props = {
   origin: OriginData;
 };
 
-function NostrEnable(props: Props) {
-  const hasFetchedData = useRef(false);
-  const [loading, setLoading] = useState(false);
+export default function NostrEnable(props: Props) {
   const [accountComponent, setAccountComponent] =
     useState<React.ReactNode | null>(null); // State to store the component to render
 
-  const { t: tCommon } = useTranslation("common");
-
-  const enable = useCallback(() => {
-    try {
-      setLoading(true);
-      msg.reply({
-        enabled: true,
-        remember: true,
-      });
-    } catch (e) {
-      console.error(e);
-      if (e instanceof Error) toast.error(`${tCommon("error")}: ${e.message}`);
-    } finally {
-      setLoading(false);
-    }
-  }, [tCommon]);
+  const { account } = useAccount();
 
   useEffect(() => {
-    async function getAllowance() {
-      try {
-        const allowance = await msg.request("getAllowance", {
-          domain: props.origin.domain,
-          host: props.origin.host,
-        });
-        const account = await api.getAccount();
-        if (allowance && allowance.enabled && account.nostrEnabled) {
-          enable();
-        }
-      } catch (e) {
-        if (e instanceof Error) console.error(e.message);
-      }
-    }
-
-    // Run once.
-    if (!hasFetchedData.current) {
-      getAllowance();
-      hasFetchedData.current = true;
-    }
-  }, [enable, props.origin.domain, props.origin.host]);
-
-  useEffect(() => {
-    // Fetch account data and set the component to render based on the result
-
     async function fetchAccountAndSetComponent() {
       try {
-        const account = await api.getAccount();
+        const fetchedAccount = await api.getAccount();
 
-        if (account.nostrEnabled) {
+        if (fetchedAccount.nostrEnabled) {
           setAccountComponent(<Enable origin={props.origin} />);
         } else {
           setAccountComponent(<Onboard />);
         }
       } catch (e) {
-        // Handle any errors that occur during account fetching
         console.error(e);
       }
     }
 
-    fetchAccountAndSetComponent(); // Call the function when the component mounts
-  }, [props.origin]);
+    fetchAccountAndSetComponent();
+  }, [props.origin, account]);
 
-  return (
-    <div>
-      {loading ? (
-        <div>Loading...</div>
-      ) : (
-        // Render the component based on the accountComponent state
-        accountComponent
-      )}
-    </div>
-  );
+  return <div>{accountComponent}</div>;
 }
-
-export default NostrEnable;
diff --git a/src/app/screens/Enable/WebbtcEnable.tsx b/src/app/screens/Enable/WebbtcEnable.tsx
index 64b6100eae..fea71485d3 100644
--- a/src/app/screens/Enable/WebbtcEnable.tsx
+++ b/src/app/screens/Enable/WebbtcEnable.tsx
@@ -1,10 +1,8 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
+import React, { useEffect, useState } from "react";
 import Enable from "~/app/components/Enable";
-import toast from "~/app/components/Toast";
+import { useAccount } from "~/app/context/AccountContext";
 import Onboard from "~/app/screens/Onboard/Prompt";
 import api from "~/common/lib/api";
-import msg from "~/common/lib/msg";
 import type { OriginData } from "~/types";
 
 type Props = {
@@ -12,80 +10,28 @@ type Props = {
 };
 
 export default function WebbtcEnable(props: Props) {
-  const hasFetchedData = useRef(false);
-  const [loading, setLoading] = useState(false);
   const [accountComponent, setAccountComponent] =
     useState<React.ReactNode | null>(null); // State to store the component to render
 
-  const { t: tCommon } = useTranslation("common");
-
-  const enable = useCallback(() => {
-    try {
-      setLoading(true);
-      msg.reply({
-        enabled: true,
-        remember: true,
-      });
-    } catch (e) {
-      console.error(e);
-      if (e instanceof Error) toast.error(`${tCommon("error")}: ${e.message}`);
-    } finally {
-      setLoading(false);
-    }
-  }, [tCommon]);
-
-  useEffect(() => {
-    async function getAllowance() {
-      try {
-        const allowance = await msg.request("getAllowance", {
-          domain: props.origin.domain,
-          host: props.origin.host,
-        });
-        const account = await api.getAccount();
-        if (allowance && allowance.enabled && account.nostrEnabled) {
-          enable();
-        }
-      } catch (e) {
-        if (e instanceof Error) console.error(e.message);
-      }
-    }
-
-    // Run once.
-    if (!hasFetchedData.current) {
-      getAllowance();
-      hasFetchedData.current = true;
-    }
-  }, [enable, props.origin.domain, props.origin.host]);
+  const { account } = useAccount();
 
   useEffect(() => {
-    // Fetch account data and set the component to render based on the result
-
     async function fetchAccountAndSetComponent() {
       try {
-        const account = await api.getAccount();
+        const fetchedAccount = await api.getAccount();
 
-        if (account.nostrEnabled) {
+        if (fetchedAccount.hasMnemonic) {
           setAccountComponent(<Enable origin={props.origin} />);
         } else {
           setAccountComponent(<Onboard />);
         }
       } catch (e) {
-        // Handle any errors that occur during account fetching
         console.error(e);
       }
     }
 
-    fetchAccountAndSetComponent(); // Call the function when the component mounts
-  }, [props.origin]);
+    fetchAccountAndSetComponent();
+  }, [props.origin, account]);
 
-  return (
-    <div>
-      {loading ? (
-        <div>Loading...</div>
-      ) : (
-        // Render the component based on the accountComponent state
-        accountComponent
-      )}
-    </div>
-  );
+  return <div>{accountComponent}</div>;
 }
diff --git a/src/app/screens/Enable/WeblnEnable.tsx b/src/app/screens/Enable/WeblnEnable.tsx
index e28a60a8f6..a999b4b0ca 100644
--- a/src/app/screens/Enable/WeblnEnable.tsx
+++ b/src/app/screens/Enable/WeblnEnable.tsx
@@ -1,9 +1,10 @@
 import Enable from "~/app/components/Enable";
-import { useNavigationState } from "~/app/hooks/useNavigationState";
 import { OriginData } from "~/types";
 
-export default function WeblnEnable() {
-  const navState = useNavigationState();
-  const origin = navState.origin as OriginData;
-  return <Enable origin={origin} />;
+type Props = {
+  origin: OriginData;
+};
+
+export default function WeblnEnable(props: Props) {
+  return <Enable origin={props.origin} />;
 }

From 49b69339e206c1fb45dfc0d66bf48ffb1b1829a6 Mon Sep 17 00:00:00 2001
From: pavanjoshi914 <pavanj914@gmail.com>
Date: Thu, 14 Sep 2023 12:33:49 +0530
Subject: [PATCH 07/17] refactor: move onboarding to components

---
 .../{screens/Onboard/Prompt => components/onboard}/index.tsx    | 0
 src/app/router/Prompt/Prompt.tsx                                | 2 +-
 src/app/screens/Enable/LiquidEnable.tsx                         | 2 +-
 src/app/screens/Enable/NostrEnable.tsx                          | 2 +-
 src/app/screens/Enable/WebbtcEnable.tsx                         | 2 +-
 5 files changed, 4 insertions(+), 4 deletions(-)
 rename src/app/{screens/Onboard/Prompt => components/onboard}/index.tsx (100%)

diff --git a/src/app/screens/Onboard/Prompt/index.tsx b/src/app/components/onboard/index.tsx
similarity index 100%
rename from src/app/screens/Onboard/Prompt/index.tsx
rename to src/app/components/onboard/index.tsx
diff --git a/src/app/router/Prompt/Prompt.tsx b/src/app/router/Prompt/Prompt.tsx
index 18ee8696b0..f713015da4 100644
--- a/src/app/router/Prompt/Prompt.tsx
+++ b/src/app/router/Prompt/Prompt.tsx
@@ -19,6 +19,7 @@ import Unlock from "@screens/Unlock";
 import { HashRouter, Navigate, Outlet, Route, Routes } from "react-router-dom";
 import AlbyLogo from "~/app/components/AlbyLogo";
 import Toaster from "~/app/components/Toast/Toaster";
+import Onboard from "~/app/components/onboard";
 import Providers from "~/app/context/Providers";
 import RequireAuth from "~/app/router/RequireAuth";
 import BitcoinConfirmGetAddress from "~/app/screens/Bitcoin/ConfirmGetAddress";
@@ -27,7 +28,6 @@ import LiquidEnable from "~/app/screens/Enable/LiquidEnable";
 import NostrEnable from "~/app/screens/Enable/NostrEnable";
 import WebbtcEnable from "~/app/screens/Enable/WebbtcEnable";
 import WeblnEnable from "~/app/screens/Enable/WeblnEnable";
-import Onboard from "~/app/screens/Onboard/Prompt";
 import type { NavigationState, OriginData } from "~/types";
 
 // Parse out the parameters from the querystring.
diff --git a/src/app/screens/Enable/LiquidEnable.tsx b/src/app/screens/Enable/LiquidEnable.tsx
index fb1726323b..0e2b79e654 100644
--- a/src/app/screens/Enable/LiquidEnable.tsx
+++ b/src/app/screens/Enable/LiquidEnable.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import Enable from "~/app/components/Enable";
+import Onboard from "~/app/components/onboard";
 import { useAccount } from "~/app/context/AccountContext";
-import Onboard from "~/app/screens/Onboard/Prompt";
 import api from "~/common/lib/api";
 import type { OriginData } from "~/types";
 
diff --git a/src/app/screens/Enable/NostrEnable.tsx b/src/app/screens/Enable/NostrEnable.tsx
index 192ab49452..a1cc51f4eb 100644
--- a/src/app/screens/Enable/NostrEnable.tsx
+++ b/src/app/screens/Enable/NostrEnable.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import Enable from "~/app/components/Enable";
+import Onboard from "~/app/components/onboard";
 import { useAccount } from "~/app/context/AccountContext";
-import Onboard from "~/app/screens/Onboard/Prompt";
 import api from "~/common/lib/api";
 import type { OriginData } from "~/types";
 
diff --git a/src/app/screens/Enable/WebbtcEnable.tsx b/src/app/screens/Enable/WebbtcEnable.tsx
index fea71485d3..235878298d 100644
--- a/src/app/screens/Enable/WebbtcEnable.tsx
+++ b/src/app/screens/Enable/WebbtcEnable.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import Enable from "~/app/components/Enable";
+import Onboard from "~/app/components/onboard";
 import { useAccount } from "~/app/context/AccountContext";
-import Onboard from "~/app/screens/Onboard/Prompt";
 import api from "~/common/lib/api";
 import type { OriginData } from "~/types";
 

From 552d1a0293a398d7aabd5bc4e94fbbe815e4ba8e Mon Sep 17 00:00:00 2001
From: pavanjoshi914 <pavanj914@gmail.com>
Date: Thu, 14 Sep 2023 14:19:05 +0530
Subject: [PATCH 08/17] refactor: background prompts and screens for the
 providers

---
 .../Enable/{index.tsx => AlbyEnable.tsx}      |   4 +-
 src/app/components/Enable/LiquidEnable.tsx    | 122 ++++++++++++++++++
 src/app/components/Enable/NostrEnable.tsx     | 122 ++++++++++++++++++
 src/app/components/Enable/WebbtcEnable.tsx    | 122 ++++++++++++++++++
 src/app/components/Enable/WeblnEnable.tsx     | 122 ++++++++++++++++++
 src/app/screens/Enable/AlbyEnable.tsx         |   4 +-
 src/app/screens/Enable/LiquidEnable.tsx       |   5 +-
 src/app/screens/Enable/NostrEnable.tsx        |   4 +-
 src/app/screens/Enable/WebbtcEnable.tsx       |   4 +-
 src/app/screens/Enable/WeblnEnable.tsx        |   4 +-
 .../{allowances/enable => alby}/enable.ts     |   4 +-
 .../background-script/actions/alby/index.ts   |   2 +
 .../allowances/__tests__/enable.test.ts       |   2 +-
 .../actions/allowances/index.ts               |  15 +--
 .../mnemonicEnable.ts => liquid/enable.ts}    |  11 +-
 .../background-script/actions/liquid/index.ts |   2 +
 .../enable/nostrEnable.ts => nostr/enable.ts} |   8 +-
 .../background-script/actions/nostr/index.ts  |   2 +
 .../actions/webbtc/enable.ts                  |  80 ++++++++++++
 .../background-script/actions/webbtc/index.ts |   3 +-
 .../background-script/actions/webln/enable.ts |  79 ++++++++++++
 .../background-script/actions/webln/index.ts  |  10 +-
 src/extension/background-script/router.ts     |  14 +-
 23 files changed, 692 insertions(+), 53 deletions(-)
 rename src/app/components/Enable/{index.tsx => AlbyEnable.tsx} (97%)
 create mode 100644 src/app/components/Enable/LiquidEnable.tsx
 create mode 100644 src/app/components/Enable/NostrEnable.tsx
 create mode 100644 src/app/components/Enable/WebbtcEnable.tsx
 create mode 100644 src/app/components/Enable/WeblnEnable.tsx
 rename src/extension/background-script/actions/{allowances/enable => alby}/enable.ts (96%)
 create mode 100644 src/extension/background-script/actions/alby/index.ts
 rename src/extension/background-script/actions/{allowances/enable/mnemonicEnable.ts => liquid/enable.ts} (92%)
 rename src/extension/background-script/actions/{allowances/enable/nostrEnable.ts => nostr/enable.ts} (92%)
 create mode 100644 src/extension/background-script/actions/webbtc/enable.ts
 create mode 100644 src/extension/background-script/actions/webln/enable.ts

diff --git a/src/app/components/Enable/index.tsx b/src/app/components/Enable/AlbyEnable.tsx
similarity index 97%
rename from src/app/components/Enable/index.tsx
rename to src/app/components/Enable/AlbyEnable.tsx
index 00fd3f3301..81f611cbb7 100644
--- a/src/app/components/Enable/index.tsx
+++ b/src/app/components/Enable/AlbyEnable.tsx
@@ -13,7 +13,7 @@ import type { OriginData } from "~/types";
 type Props = {
   origin: OriginData;
 };
-function Enable(props: Props) {
+function AlbyEnableComponent(props: Props) {
   const hasFetchedData = useRef(false);
   const [loading, setLoading] = useState(false);
   const { t } = useTranslation("translation", {
@@ -119,4 +119,4 @@ function Enable(props: Props) {
   );
 }
 
-export default Enable;
+export default AlbyEnableComponent;
diff --git a/src/app/components/Enable/LiquidEnable.tsx b/src/app/components/Enable/LiquidEnable.tsx
new file mode 100644
index 0000000000..3ebd732f12
--- /dev/null
+++ b/src/app/components/Enable/LiquidEnable.tsx
@@ -0,0 +1,122 @@
+import { CheckIcon } from "@bitcoin-design/bitcoin-icons-react/filled";
+import ConfirmOrCancel from "@components/ConfirmOrCancel";
+import Container from "@components/Container";
+import PublisherCard from "@components/PublisherCard";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import ScreenHeader from "~/app/components/ScreenHeader";
+import toast from "~/app/components/Toast";
+import { USER_REJECTED_ERROR } from "~/common/constants";
+import msg from "~/common/lib/msg";
+import type { OriginData } from "~/types";
+
+type Props = {
+  origin: OriginData;
+};
+function LiquidEnableComponent(props: Props) {
+  const hasFetchedData = useRef(false);
+  const [loading, setLoading] = useState(false);
+  const { t } = useTranslation("translation", {
+    keyPrefix: "enable",
+  });
+  const { t: tCommon } = useTranslation("common");
+
+  const enable = useCallback(() => {
+    try {
+      setLoading(true);
+      msg.reply({
+        enabled: true,
+        remember: true,
+      });
+    } catch (e) {
+      console.error(e);
+      if (e instanceof Error) toast.error(`${tCommon("error")}: ${e.message}`);
+    } finally {
+      setLoading(false);
+    }
+  }, [tCommon]);
+
+  function reject(event: React.MouseEvent<HTMLAnchorElement>) {
+    event.preventDefault();
+    msg.error(USER_REJECTED_ERROR);
+  }
+
+  async function block(event: React.MouseEvent<HTMLAnchorElement>) {
+    event.preventDefault();
+    await msg.request("addBlocklist", {
+      domain: props.origin.domain,
+      host: props.origin.host,
+    });
+    alert(t("block_added", { host: props.origin.host }));
+    msg.error(USER_REJECTED_ERROR);
+  }
+
+  useEffect(() => {
+    async function getAllowance() {
+      try {
+        const allowance = await msg.request("getAllowance", {
+          domain: props.origin.domain,
+          host: props.origin.host,
+        });
+        if (allowance && allowance.enabled) {
+          enable();
+        }
+      } catch (e) {
+        if (e instanceof Error) console.error(e.message);
+      }
+    }
+
+    // Run once.
+    if (!hasFetchedData.current) {
+      getAllowance();
+      hasFetchedData.current = true;
+    }
+  }, [enable, props.origin.domain, props.origin.host]);
+
+  return (
+    <div className="h-full flex flex-col overflow-y-auto no-scrollbar">
+      <ScreenHeader title={t("title")} />
+      <Container justifyBetween maxWidth="sm">
+        <div>
+          <PublisherCard
+            title={props.origin.name}
+            image={props.origin.icon}
+            url={props.origin.host}
+            isSmall={false}
+          />
+
+          <div className="dark:text-white pt-6">
+            <p className="mb-2">{t("allow")}</p>
+
+            <div className="mb-2 flex items-center">
+              <CheckIcon className="w-5 h-5 mr-2" />
+              <p className="dark:text-white">{t("request1")}</p>
+            </div>
+            <div className="mb-2 flex items-center">
+              <CheckIcon className="w-5 h-5 mr-2" />
+              <p className="dark:text-white">{t("request2")}</p>
+            </div>
+          </div>
+        </div>
+        <div className="text-center flex flex-col">
+          <ConfirmOrCancel
+            disabled={loading}
+            loading={loading}
+            label={tCommon("actions.connect")}
+            onConfirm={enable}
+            onCancel={reject}
+          />
+          <a
+            className="mt-4 underline text-sm text-gray-400 overflow-hidden text-ellipsis whitespace-nowrap"
+            href="#"
+            onClick={block}
+          >
+            {t("block_and_ignore", { host: props.origin.host })}
+          </a>
+        </div>
+      </Container>
+    </div>
+  );
+}
+
+export default LiquidEnableComponent;
diff --git a/src/app/components/Enable/NostrEnable.tsx b/src/app/components/Enable/NostrEnable.tsx
new file mode 100644
index 0000000000..0003fe94c5
--- /dev/null
+++ b/src/app/components/Enable/NostrEnable.tsx
@@ -0,0 +1,122 @@
+import { CheckIcon } from "@bitcoin-design/bitcoin-icons-react/filled";
+import ConfirmOrCancel from "@components/ConfirmOrCancel";
+import Container from "@components/Container";
+import PublisherCard from "@components/PublisherCard";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import ScreenHeader from "~/app/components/ScreenHeader";
+import toast from "~/app/components/Toast";
+import { USER_REJECTED_ERROR } from "~/common/constants";
+import msg from "~/common/lib/msg";
+import type { OriginData } from "~/types";
+
+type Props = {
+  origin: OriginData;
+};
+function NostrEnableComponent(props: Props) {
+  const hasFetchedData = useRef(false);
+  const [loading, setLoading] = useState(false);
+  const { t } = useTranslation("translation", {
+    keyPrefix: "enable",
+  });
+  const { t: tCommon } = useTranslation("common");
+
+  const enable = useCallback(() => {
+    try {
+      setLoading(true);
+      msg.reply({
+        enabled: true,
+        remember: true,
+      });
+    } catch (e) {
+      console.error(e);
+      if (e instanceof Error) toast.error(`${tCommon("error")}: ${e.message}`);
+    } finally {
+      setLoading(false);
+    }
+  }, [tCommon]);
+
+  function reject(event: React.MouseEvent<HTMLAnchorElement>) {
+    event.preventDefault();
+    msg.error(USER_REJECTED_ERROR);
+  }
+
+  async function block(event: React.MouseEvent<HTMLAnchorElement>) {
+    event.preventDefault();
+    await msg.request("addBlocklist", {
+      domain: props.origin.domain,
+      host: props.origin.host,
+    });
+    alert(t("block_added", { host: props.origin.host }));
+    msg.error(USER_REJECTED_ERROR);
+  }
+
+  useEffect(() => {
+    async function getAllowance() {
+      try {
+        const allowance = await msg.request("getAllowance", {
+          domain: props.origin.domain,
+          host: props.origin.host,
+        });
+        if (allowance && allowance.enabled) {
+          enable();
+        }
+      } catch (e) {
+        if (e instanceof Error) console.error(e.message);
+      }
+    }
+
+    // Run once.
+    if (!hasFetchedData.current) {
+      getAllowance();
+      hasFetchedData.current = true;
+    }
+  }, [enable, props.origin.domain, props.origin.host]);
+
+  return (
+    <div className="h-full flex flex-col overflow-y-auto no-scrollbar">
+      <ScreenHeader title={t("title")} />
+      <Container justifyBetween maxWidth="sm">
+        <div>
+          <PublisherCard
+            title={props.origin.name}
+            image={props.origin.icon}
+            url={props.origin.host}
+            isSmall={false}
+          />
+
+          <div className="dark:text-white pt-6">
+            <p className="mb-2">{t("allow")}</p>
+
+            <div className="mb-2 flex items-center">
+              <CheckIcon className="w-5 h-5 mr-2" />
+              <p className="dark:text-white">{t("request1")}</p>
+            </div>
+            <div className="mb-2 flex items-center">
+              <CheckIcon className="w-5 h-5 mr-2" />
+              <p className="dark:text-white">{t("request2")}</p>
+            </div>
+          </div>
+        </div>
+        <div className="text-center flex flex-col">
+          <ConfirmOrCancel
+            disabled={loading}
+            loading={loading}
+            label={tCommon("actions.connect")}
+            onConfirm={enable}
+            onCancel={reject}
+          />
+          <a
+            className="mt-4 underline text-sm text-gray-400 overflow-hidden text-ellipsis whitespace-nowrap"
+            href="#"
+            onClick={block}
+          >
+            {t("block_and_ignore", { host: props.origin.host })}
+          </a>
+        </div>
+      </Container>
+    </div>
+  );
+}
+
+export default NostrEnableComponent;
diff --git a/src/app/components/Enable/WebbtcEnable.tsx b/src/app/components/Enable/WebbtcEnable.tsx
new file mode 100644
index 0000000000..e8f4fb469f
--- /dev/null
+++ b/src/app/components/Enable/WebbtcEnable.tsx
@@ -0,0 +1,122 @@
+import { CheckIcon } from "@bitcoin-design/bitcoin-icons-react/filled";
+import ConfirmOrCancel from "@components/ConfirmOrCancel";
+import Container from "@components/Container";
+import PublisherCard from "@components/PublisherCard";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import ScreenHeader from "~/app/components/ScreenHeader";
+import toast from "~/app/components/Toast";
+import { USER_REJECTED_ERROR } from "~/common/constants";
+import msg from "~/common/lib/msg";
+import type { OriginData } from "~/types";
+
+type Props = {
+  origin: OriginData;
+};
+function WebbtcEnableComponent(props: Props) {
+  const hasFetchedData = useRef(false);
+  const [loading, setLoading] = useState(false);
+  const { t } = useTranslation("translation", {
+    keyPrefix: "enable",
+  });
+  const { t: tCommon } = useTranslation("common");
+
+  const enable = useCallback(() => {
+    try {
+      setLoading(true);
+      msg.reply({
+        enabled: true,
+        remember: true,
+      });
+    } catch (e) {
+      console.error(e);
+      if (e instanceof Error) toast.error(`${tCommon("error")}: ${e.message}`);
+    } finally {
+      setLoading(false);
+    }
+  }, [tCommon]);
+
+  function reject(event: React.MouseEvent<HTMLAnchorElement>) {
+    event.preventDefault();
+    msg.error(USER_REJECTED_ERROR);
+  }
+
+  async function block(event: React.MouseEvent<HTMLAnchorElement>) {
+    event.preventDefault();
+    await msg.request("addBlocklist", {
+      domain: props.origin.domain,
+      host: props.origin.host,
+    });
+    alert(t("block_added", { host: props.origin.host }));
+    msg.error(USER_REJECTED_ERROR);
+  }
+
+  useEffect(() => {
+    async function getAllowance() {
+      try {
+        const allowance = await msg.request("getAllowance", {
+          domain: props.origin.domain,
+          host: props.origin.host,
+        });
+        if (allowance && allowance.enabled) {
+          enable();
+        }
+      } catch (e) {
+        if (e instanceof Error) console.error(e.message);
+      }
+    }
+
+    // Run once.
+    if (!hasFetchedData.current) {
+      getAllowance();
+      hasFetchedData.current = true;
+    }
+  }, [enable, props.origin.domain, props.origin.host]);
+
+  return (
+    <div className="h-full flex flex-col overflow-y-auto no-scrollbar">
+      <ScreenHeader title={t("title")} />
+      <Container justifyBetween maxWidth="sm">
+        <div>
+          <PublisherCard
+            title={props.origin.name}
+            image={props.origin.icon}
+            url={props.origin.host}
+            isSmall={false}
+          />
+
+          <div className="dark:text-white pt-6">
+            <p className="mb-2">{t("allow")}</p>
+
+            <div className="mb-2 flex items-center">
+              <CheckIcon className="w-5 h-5 mr-2" />
+              <p className="dark:text-white">{t("request1")}</p>
+            </div>
+            <div className="mb-2 flex items-center">
+              <CheckIcon className="w-5 h-5 mr-2" />
+              <p className="dark:text-white">{t("request2")}</p>
+            </div>
+          </div>
+        </div>
+        <div className="text-center flex flex-col">
+          <ConfirmOrCancel
+            disabled={loading}
+            loading={loading}
+            label={tCommon("actions.connect")}
+            onConfirm={enable}
+            onCancel={reject}
+          />
+          <a
+            className="mt-4 underline text-sm text-gray-400 overflow-hidden text-ellipsis whitespace-nowrap"
+            href="#"
+            onClick={block}
+          >
+            {t("block_and_ignore", { host: props.origin.host })}
+          </a>
+        </div>
+      </Container>
+    </div>
+  );
+}
+
+export default WebbtcEnableComponent;
diff --git a/src/app/components/Enable/WeblnEnable.tsx b/src/app/components/Enable/WeblnEnable.tsx
new file mode 100644
index 0000000000..c153a0e718
--- /dev/null
+++ b/src/app/components/Enable/WeblnEnable.tsx
@@ -0,0 +1,122 @@
+import { CheckIcon } from "@bitcoin-design/bitcoin-icons-react/filled";
+import ConfirmOrCancel from "@components/ConfirmOrCancel";
+import Container from "@components/Container";
+import PublisherCard from "@components/PublisherCard";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import ScreenHeader from "~/app/components/ScreenHeader";
+import toast from "~/app/components/Toast";
+import { USER_REJECTED_ERROR } from "~/common/constants";
+import msg from "~/common/lib/msg";
+import type { OriginData } from "~/types";
+
+type Props = {
+  origin: OriginData;
+};
+function WeblnEnableComponent(props: Props) {
+  const hasFetchedData = useRef(false);
+  const [loading, setLoading] = useState(false);
+  const { t } = useTranslation("translation", {
+    keyPrefix: "enable",
+  });
+  const { t: tCommon } = useTranslation("common");
+
+  const enable = useCallback(() => {
+    try {
+      setLoading(true);
+      msg.reply({
+        enabled: true,
+        remember: true,
+      });
+    } catch (e) {
+      console.error(e);
+      if (e instanceof Error) toast.error(`${tCommon("error")}: ${e.message}`);
+    } finally {
+      setLoading(false);
+    }
+  }, [tCommon]);
+
+  function reject(event: React.MouseEvent<HTMLAnchorElement>) {
+    event.preventDefault();
+    msg.error(USER_REJECTED_ERROR);
+  }
+
+  async function block(event: React.MouseEvent<HTMLAnchorElement>) {
+    event.preventDefault();
+    await msg.request("addBlocklist", {
+      domain: props.origin.domain,
+      host: props.origin.host,
+    });
+    alert(t("block_added", { host: props.origin.host }));
+    msg.error(USER_REJECTED_ERROR);
+  }
+
+  useEffect(() => {
+    async function getAllowance() {
+      try {
+        const allowance = await msg.request("getAllowance", {
+          domain: props.origin.domain,
+          host: props.origin.host,
+        });
+        if (allowance && allowance.enabled) {
+          enable();
+        }
+      } catch (e) {
+        if (e instanceof Error) console.error(e.message);
+      }
+    }
+
+    // Run once.
+    if (!hasFetchedData.current) {
+      getAllowance();
+      hasFetchedData.current = true;
+    }
+  }, [enable, props.origin.domain, props.origin.host]);
+
+  return (
+    <div className="h-full flex flex-col overflow-y-auto no-scrollbar">
+      <ScreenHeader title={t("title")} />
+      <Container justifyBetween maxWidth="sm">
+        <div>
+          <PublisherCard
+            title={props.origin.name}
+            image={props.origin.icon}
+            url={props.origin.host}
+            isSmall={false}
+          />
+
+          <div className="dark:text-white pt-6">
+            <p className="mb-2">{t("allow")}</p>
+
+            <div className="mb-2 flex items-center">
+              <CheckIcon className="w-5 h-5 mr-2" />
+              <p className="dark:text-white">{t("request1")}</p>
+            </div>
+            <div className="mb-2 flex items-center">
+              <CheckIcon className="w-5 h-5 mr-2" />
+              <p className="dark:text-white">{t("request2")}</p>
+            </div>
+          </div>
+        </div>
+        <div className="text-center flex flex-col">
+          <ConfirmOrCancel
+            disabled={loading}
+            loading={loading}
+            label={tCommon("actions.connect")}
+            onConfirm={enable}
+            onCancel={reject}
+          />
+          <a
+            className="mt-4 underline text-sm text-gray-400 overflow-hidden text-ellipsis whitespace-nowrap"
+            href="#"
+            onClick={block}
+          >
+            {t("block_and_ignore", { host: props.origin.host })}
+          </a>
+        </div>
+      </Container>
+    </div>
+  );
+}
+
+export default WeblnEnableComponent;
diff --git a/src/app/screens/Enable/AlbyEnable.tsx b/src/app/screens/Enable/AlbyEnable.tsx
index 837e139e7b..18238c7a8b 100644
--- a/src/app/screens/Enable/AlbyEnable.tsx
+++ b/src/app/screens/Enable/AlbyEnable.tsx
@@ -1,4 +1,4 @@
-import Enable from "~/app/components/Enable";
+import AlbyEnableComponent from "~/app/components/Enable/AlbyEnable";
 import { OriginData } from "~/types";
 
 type Props = {
@@ -6,5 +6,5 @@ type Props = {
 };
 
 export default function AlbyEnable(props: Props) {
-  return <Enable origin={props.origin} />;
+  return <AlbyEnableComponent origin={props.origin} />;
 }
diff --git a/src/app/screens/Enable/LiquidEnable.tsx b/src/app/screens/Enable/LiquidEnable.tsx
index 0e2b79e654..351b927059 100644
--- a/src/app/screens/Enable/LiquidEnable.tsx
+++ b/src/app/screens/Enable/LiquidEnable.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
-import Enable from "~/app/components/Enable";
+import LiquidEnableComponent from "~/app/components/Enable/LiquidEnable";
+
 import Onboard from "~/app/components/onboard";
 import { useAccount } from "~/app/context/AccountContext";
 import api from "~/common/lib/api";
@@ -21,7 +22,7 @@ export default function LiquidEnable(props: Props) {
         const fetchedAccount = await api.getAccount();
 
         if (fetchedAccount.hasMnemonic) {
-          setAccountComponent(<Enable origin={props.origin} />);
+          setAccountComponent(<LiquidEnableComponent origin={props.origin} />);
         } else {
           setAccountComponent(<Onboard />);
         }
diff --git a/src/app/screens/Enable/NostrEnable.tsx b/src/app/screens/Enable/NostrEnable.tsx
index a1cc51f4eb..28188146ca 100644
--- a/src/app/screens/Enable/NostrEnable.tsx
+++ b/src/app/screens/Enable/NostrEnable.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import Enable from "~/app/components/Enable";
+import NostrEnableComponent from "~/app/components/Enable/NostrEnable";
 import Onboard from "~/app/components/onboard";
 import { useAccount } from "~/app/context/AccountContext";
 import api from "~/common/lib/api";
@@ -21,7 +21,7 @@ export default function NostrEnable(props: Props) {
         const fetchedAccount = await api.getAccount();
 
         if (fetchedAccount.nostrEnabled) {
-          setAccountComponent(<Enable origin={props.origin} />);
+          setAccountComponent(<NostrEnableComponent origin={props.origin} />);
         } else {
           setAccountComponent(<Onboard />);
         }
diff --git a/src/app/screens/Enable/WebbtcEnable.tsx b/src/app/screens/Enable/WebbtcEnable.tsx
index 235878298d..0b180787c4 100644
--- a/src/app/screens/Enable/WebbtcEnable.tsx
+++ b/src/app/screens/Enable/WebbtcEnable.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import Enable from "~/app/components/Enable";
+import WebbtcEnableComponent from "~/app/components/Enable/WebbtcEnable";
 import Onboard from "~/app/components/onboard";
 import { useAccount } from "~/app/context/AccountContext";
 import api from "~/common/lib/api";
@@ -21,7 +21,7 @@ export default function WebbtcEnable(props: Props) {
         const fetchedAccount = await api.getAccount();
 
         if (fetchedAccount.hasMnemonic) {
-          setAccountComponent(<Enable origin={props.origin} />);
+          setAccountComponent(<WebbtcEnableComponent origin={props.origin} />);
         } else {
           setAccountComponent(<Onboard />);
         }
diff --git a/src/app/screens/Enable/WeblnEnable.tsx b/src/app/screens/Enable/WeblnEnable.tsx
index a999b4b0ca..827dd18865 100644
--- a/src/app/screens/Enable/WeblnEnable.tsx
+++ b/src/app/screens/Enable/WeblnEnable.tsx
@@ -1,4 +1,4 @@
-import Enable from "~/app/components/Enable";
+import WeblnEnableComponent from "~/app/components/Enable/WeblnEnable";
 import { OriginData } from "~/types";
 
 type Props = {
@@ -6,5 +6,5 @@ type Props = {
 };
 
 export default function WeblnEnable(props: Props) {
-  return <Enable origin={props.origin} />;
+  return <WeblnEnableComponent origin={props.origin} />;
 }
diff --git a/src/extension/background-script/actions/allowances/enable/enable.ts b/src/extension/background-script/actions/alby/enable.ts
similarity index 96%
rename from src/extension/background-script/actions/allowances/enable/enable.ts
rename to src/extension/background-script/actions/alby/enable.ts
index 488b3db9ba..5bb4c0b2d2 100644
--- a/src/extension/background-script/actions/allowances/enable/enable.ts
+++ b/src/extension/background-script/actions/alby/enable.ts
@@ -3,8 +3,8 @@ import { getHostFromSender } from "~/common/utils/helpers";
 import db from "~/extension/background-script/db";
 import type { MessageAllowanceEnable, Sender } from "~/types";
 
-import state from "../../../state";
-import { ExtensionIcon, setIcon } from "../../setup/setIcon";
+import state from "../../state";
+import { ExtensionIcon, setIcon } from "../setup/setIcon";
 
 const enable = async (message: MessageAllowanceEnable, sender: Sender) => {
   const host = getHostFromSender(sender);
diff --git a/src/extension/background-script/actions/alby/index.ts b/src/extension/background-script/actions/alby/index.ts
new file mode 100644
index 0000000000..e9478e1569
--- /dev/null
+++ b/src/extension/background-script/actions/alby/index.ts
@@ -0,0 +1,2 @@
+import enable from "./enable";
+export { enable };
diff --git a/src/extension/background-script/actions/allowances/__tests__/enable.test.ts b/src/extension/background-script/actions/allowances/__tests__/enable.test.ts
index 32fa3c4404..e8b957b5d2 100644
--- a/src/extension/background-script/actions/allowances/__tests__/enable.test.ts
+++ b/src/extension/background-script/actions/allowances/__tests__/enable.test.ts
@@ -4,7 +4,7 @@ import state from "~/extension/background-script/state";
 import { allowanceFixture } from "~/fixtures/allowances";
 import type { DbAllowance, MessageAllowanceEnable, Sender } from "~/types";
 
-import enableAllowance from "../enable/enable";
+import enableAllowance from "../../webln/enable";
 
 jest.mock("~/extension/background-script/state");
 
diff --git a/src/extension/background-script/actions/allowances/index.ts b/src/extension/background-script/actions/allowances/index.ts
index cc0c68bc8d..bc39862c9d 100644
--- a/src/extension/background-script/actions/allowances/index.ts
+++ b/src/extension/background-script/actions/allowances/index.ts
@@ -1,21 +1,8 @@
 import add from "./add";
 import deleteAllowance from "./delete";
-import enable from "./enable/enable";
-import mnemonicEnable from "./enable/mnemonicEnable";
-import nostrEnable from "./enable/nostrEnable";
 import get from "./get";
 import getById from "./getById";
 import list from "./list";
 import updateAllowance from "./update";
 
-export {
-  add,
-  deleteAllowance,
-  enable,
-  get,
-  getById,
-  list,
-  mnemonicEnable,
-  nostrEnable,
-  updateAllowance,
-};
+export { add, deleteAllowance, get, getById, list, updateAllowance };
diff --git a/src/extension/background-script/actions/allowances/enable/mnemonicEnable.ts b/src/extension/background-script/actions/liquid/enable.ts
similarity index 92%
rename from src/extension/background-script/actions/allowances/enable/mnemonicEnable.ts
rename to src/extension/background-script/actions/liquid/enable.ts
index abafb6944c..166205438c 100644
--- a/src/extension/background-script/actions/allowances/enable/mnemonicEnable.ts
+++ b/src/extension/background-script/actions/liquid/enable.ts
@@ -3,13 +3,10 @@ import { getHostFromSender } from "~/common/utils/helpers";
 import db from "~/extension/background-script/db";
 import type { MessageAllowanceEnable, Sender } from "~/types";
 
-import state from "../../../state";
-import { ExtensionIcon, setIcon } from "../../setup/setIcon";
+import state from "../../state";
+import { ExtensionIcon, setIcon } from "../setup/setIcon";
 
-const mnemonicEnable = async (
-  message: MessageAllowanceEnable,
-  sender: Sender
-) => {
+const enable = async (message: MessageAllowanceEnable, sender: Sender) => {
   const host = getHostFromSender(sender);
   if (!host) return;
 
@@ -80,4 +77,4 @@ const mnemonicEnable = async (
   }
 };
 
-export default mnemonicEnable;
+export default enable;
diff --git a/src/extension/background-script/actions/liquid/index.ts b/src/extension/background-script/actions/liquid/index.ts
index 27255b8e1d..e1e48d8bd0 100644
--- a/src/extension/background-script/actions/liquid/index.ts
+++ b/src/extension/background-script/actions/liquid/index.ts
@@ -1,3 +1,4 @@
+import enable from "./enable";
 import fetchAssetRegistry from "./fetchAssetRegistry";
 import getAddressOrPrompt from "./getAddressOrPrompt";
 import getPsetPreview from "./getPsetPreview";
@@ -5,6 +6,7 @@ import signPset from "./signPset";
 import signPsetWithPrompt from "./signPsetWithPrompt";
 
 export {
+  enable,
   fetchAssetRegistry,
   getAddressOrPrompt,
   getPsetPreview,
diff --git a/src/extension/background-script/actions/allowances/enable/nostrEnable.ts b/src/extension/background-script/actions/nostr/enable.ts
similarity index 92%
rename from src/extension/background-script/actions/allowances/enable/nostrEnable.ts
rename to src/extension/background-script/actions/nostr/enable.ts
index 3b073a704f..0b3f078201 100644
--- a/src/extension/background-script/actions/allowances/enable/nostrEnable.ts
+++ b/src/extension/background-script/actions/nostr/enable.ts
@@ -3,10 +3,10 @@ import { getHostFromSender } from "~/common/utils/helpers";
 import db from "~/extension/background-script/db";
 import type { MessageAllowanceEnable, Sender } from "~/types";
 
-import state from "../../../state";
-import { ExtensionIcon, setIcon } from "../../setup/setIcon";
+import state from "../../state";
+import { ExtensionIcon, setIcon } from "../setup/setIcon";
 
-const nostrEnable = async (message: MessageAllowanceEnable, sender: Sender) => {
+const enable = async (message: MessageAllowanceEnable, sender: Sender) => {
   const host = getHostFromSender(sender);
   if (!host) return;
 
@@ -83,4 +83,4 @@ const nostrEnable = async (message: MessageAllowanceEnable, sender: Sender) => {
   }
 };
 
-export default nostrEnable;
+export default enable;
diff --git a/src/extension/background-script/actions/nostr/index.ts b/src/extension/background-script/actions/nostr/index.ts
index cf1e1d38f5..54ae6b8c47 100644
--- a/src/extension/background-script/actions/nostr/index.ts
+++ b/src/extension/background-script/actions/nostr/index.ts
@@ -1,6 +1,7 @@
 import getPublicKey from "~/extension/background-script/actions/nostr/getPublicKey";
 
 import decryptOrPrompt from "./decryptOrPrompt";
+import enable from "./enable";
 import encryptOrPrompt from "./encryptOrPrompt";
 import generatePrivateKey from "./generatePrivateKey";
 import getPrivateKey from "./getPrivateKey";
@@ -13,6 +14,7 @@ import signSchnorrOrPrompt from "./signSchnorrOrPrompt";
 
 export {
   decryptOrPrompt,
+  enable,
   encryptOrPrompt,
   generatePrivateKey,
   getPrivateKey,
diff --git a/src/extension/background-script/actions/webbtc/enable.ts b/src/extension/background-script/actions/webbtc/enable.ts
new file mode 100644
index 0000000000..166205438c
--- /dev/null
+++ b/src/extension/background-script/actions/webbtc/enable.ts
@@ -0,0 +1,80 @@
+import utils from "~/common/lib/utils";
+import { getHostFromSender } from "~/common/utils/helpers";
+import db from "~/extension/background-script/db";
+import type { MessageAllowanceEnable, Sender } from "~/types";
+
+import state from "../../state";
+import { ExtensionIcon, setIcon } from "../setup/setIcon";
+
+const enable = async (message: MessageAllowanceEnable, sender: Sender) => {
+  const host = getHostFromSender(sender);
+  if (!host) return;
+
+  const isUnlocked = await state.getState().isUnlocked();
+  const account = await state.getState().getAccount();
+  const allowance = await db.allowances
+    .where("host")
+    .equalsIgnoreCase(host)
+    .first();
+  // remove this? cause next time the allowance is set and enable is called we directly return from here.hence onboarding will work only once
+  // i suggest to not remove it. as if we go to the screen everytime. for other providers. it will be a flickering glitch.
+  // screen will popup for a second and close automatically as allowance is set but we are returning from the screen if we remove it.
+  if (isUnlocked && allowance && allowance.enabled && account?.mnemonic) {
+    return {
+      data: { enabled: true },
+    };
+  } else {
+    try {
+      const response = await utils.openPrompt<{
+        enabled: boolean;
+        remember: boolean;
+      }>(message);
+
+      if (response.data.enabled && sender.tab) {
+        await setIcon(ExtensionIcon.Active, sender.tab.id as number); // highlight the icon when enabled
+      }
+
+      // if the response should be saved/remembered we update the allowance for the domain
+      // as this returns a promise we must wait until it resolves
+      if (response.data.enabled && response.data.remember) {
+        if (allowance) {
+          if (!allowance.id) {
+            return { data: { error: "id is missing" } };
+          }
+          await db.allowances.update(allowance.id, {
+            enabled: true,
+            name: message.origin.name,
+            imageURL: message.origin.icon,
+          });
+        } else {
+          await db.allowances.add({
+            host: host,
+            name: message.origin.name,
+            imageURL: message.origin.icon,
+            enabled: true,
+            lastPaymentAt: 0,
+            totalBudget: 0,
+            remainingBudget: 0,
+            createdAt: Date.now().toString(),
+            lnurlAuth: false,
+            tag: "",
+          });
+        }
+        await db.saveToStorage();
+      }
+      return {
+        data: {
+          enabled: response.data.enabled,
+          remember: response.data.remember,
+        },
+      };
+    } catch (e) {
+      console.error(e);
+      if (e instanceof Error) {
+        return { error: e.message };
+      }
+    }
+  }
+};
+
+export default enable;
diff --git a/src/extension/background-script/actions/webbtc/index.ts b/src/extension/background-script/actions/webbtc/index.ts
index ece0f0d4f7..18779f9280 100644
--- a/src/extension/background-script/actions/webbtc/index.ts
+++ b/src/extension/background-script/actions/webbtc/index.ts
@@ -1,5 +1,6 @@
+import enable from "./enable";
 import getAddress from "./getAddress";
 import getAddressOrPrompt from "./getAddressOrPrompt";
 import getInfo from "./getInfo";
 
-export { getAddress, getAddressOrPrompt, getInfo };
+export { enable, getAddress, getAddressOrPrompt, getInfo };
diff --git a/src/extension/background-script/actions/webln/enable.ts b/src/extension/background-script/actions/webln/enable.ts
new file mode 100644
index 0000000000..5bb4c0b2d2
--- /dev/null
+++ b/src/extension/background-script/actions/webln/enable.ts
@@ -0,0 +1,79 @@
+import utils from "~/common/lib/utils";
+import { getHostFromSender } from "~/common/utils/helpers";
+import db from "~/extension/background-script/db";
+import type { MessageAllowanceEnable, Sender } from "~/types";
+
+import state from "../../state";
+import { ExtensionIcon, setIcon } from "../setup/setIcon";
+
+const enable = async (message: MessageAllowanceEnable, sender: Sender) => {
+  const host = getHostFromSender(sender);
+  if (!host) return;
+
+  const isUnlocked = await state.getState().isUnlocked();
+  const allowance = await db.allowances
+    .where("host")
+    .equalsIgnoreCase(host)
+    .first();
+  // remove this? cause next time the allowance is set and enable is called we directly return from here.hence onboarding will work only once
+  // i suggest to not remove it. as if we go to the screen everytime. for other providers. it will be a flickering glitch.
+  // screen will popup for a second and close automatically as allowance is set but we are returning from the screen if we remove it.
+  if (isUnlocked && allowance && allowance.enabled) {
+    return {
+      data: { enabled: true },
+    };
+  } else {
+    try {
+      const response = await utils.openPrompt<{
+        enabled: boolean;
+        remember: boolean;
+      }>(message);
+
+      if (response.data.enabled && sender.tab) {
+        await setIcon(ExtensionIcon.Active, sender.tab.id as number); // highlight the icon when enabled
+      }
+
+      // if the response should be saved/remembered we update the allowance for the domain
+      // as this returns a promise we must wait until it resolves
+      if (response.data.enabled && response.data.remember) {
+        if (allowance) {
+          if (!allowance.id) {
+            return { data: { error: "id is missing" } };
+          }
+          await db.allowances.update(allowance.id, {
+            enabled: true,
+            name: message.origin.name,
+            imageURL: message.origin.icon,
+          });
+        } else {
+          await db.allowances.add({
+            host: host,
+            name: message.origin.name,
+            imageURL: message.origin.icon,
+            enabled: true,
+            lastPaymentAt: 0,
+            totalBudget: 0,
+            remainingBudget: 0,
+            createdAt: Date.now().toString(),
+            lnurlAuth: false,
+            tag: "",
+          });
+        }
+        await db.saveToStorage();
+      }
+      return {
+        data: {
+          enabled: response.data.enabled,
+          remember: response.data.remember,
+        },
+      };
+    } catch (e) {
+      console.error(e);
+      if (e instanceof Error) {
+        return { error: e.message };
+      }
+    }
+  }
+};
+
+export default enable;
diff --git a/src/extension/background-script/actions/webln/index.ts b/src/extension/background-script/actions/webln/index.ts
index 16cb886fbd..faa8513fec 100644
--- a/src/extension/background-script/actions/webln/index.ts
+++ b/src/extension/background-script/actions/webln/index.ts
@@ -1,3 +1,4 @@
+import enable from "./enable";
 import getBalanceOrPrompt from "./getBalanceOrPrompt";
 import keysendOrPrompt from "./keysendOrPrompt";
 import lnurl from "./lnurl";
@@ -6,10 +7,11 @@ import { sendPaymentOrPrompt } from "./sendPaymentOrPrompt";
 import signMessageOrPrompt from "./signMessageOrPrompt";
 
 export {
-  sendPaymentOrPrompt,
+  enable,
+  getBalanceOrPrompt,
   keysendOrPrompt,
-  signMessageOrPrompt,
-  makeInvoiceOrPrompt,
   lnurl,
-  getBalanceOrPrompt,
+  makeInvoiceOrPrompt,
+  sendPaymentOrPrompt,
+  signMessageOrPrompt,
 };
diff --git a/src/extension/background-script/router.ts b/src/extension/background-script/router.ts
index 81fe8f19e1..1cd1b50b4e 100644
--- a/src/extension/background-script/router.ts
+++ b/src/extension/background-script/router.ts
@@ -1,4 +1,5 @@
 import * as accounts from "./actions/accounts";
+import * as alby from "./actions/alby";
 import * as allowances from "./actions/allowances";
 import * as blocklist from "./actions/blocklist";
 import * as cache from "./actions/cache";
@@ -84,18 +85,17 @@ const routes = {
   // Public calls that are accessible from the inpage script (through the content script)
   public: {
     webbtc: {
-      onboard: onboard.prompt,
-      enable: allowances.mnemonicEnable,
+      enable: webbtc.enable,
       getInfo: webbtc.getInfo,
       getAddressOrPrompt: webbtc.getAddressOrPrompt,
     },
     alby: {
-      enable: allowances.enable,
+      enable: alby.enable,
       addAccount: accounts.promptAdd,
     },
     webln: {
       onboard: onboard.prompt,
-      enable: allowances.enable,
+      enable: webln.enable,
       getInfo: ln.getInfo,
       sendPaymentOrPrompt: webln.sendPaymentOrPrompt,
       keysendOrPrompt: webln.keysendOrPrompt,
@@ -106,14 +106,12 @@ const routes = {
       request: ln.request,
     },
     liquid: {
-      onboard: onboard.prompt,
-      enable: allowances.mnemonicEnable,
+      enable: liquid.enable,
       getAddressOrPrompt: liquid.getAddressOrPrompt,
       signPsetWithPrompt: liquid.signPsetWithPrompt,
     },
     nostr: {
-      onboard: onboard.prompt,
-      enable: allowances.nostrEnable,
+      enable: nostr.enable,
       getPublicKeyOrPrompt: nostr.getPublicKeyOrPrompt,
       signEventOrPrompt: nostr.signEventOrPrompt,
       signSchnorrOrPrompt: nostr.signSchnorrOrPrompt,

From 77d1472b57889aee99d5dd0e2487b27714f164ab Mon Sep 17 00:00:00 2001
From: pavanjoshi914 <pavanj914@gmail.com>
Date: Thu, 14 Sep 2023 14:20:27 +0530
Subject: [PATCH 09/17] chore: remove onboarding from content script

---
 src/extension/content-script/liquid.js | 10 ----------
 src/extension/content-script/webbtc.js | 11 +----------
 2 files changed, 1 insertion(+), 20 deletions(-)

diff --git a/src/extension/content-script/liquid.js b/src/extension/content-script/liquid.js
index 65d22d4f24..0d1f5e147a 100644
--- a/src/extension/content-script/liquid.js
+++ b/src/extension/content-script/liquid.js
@@ -1,6 +1,5 @@
 import browser from "webextension-polyfill";
 
-import api from "~/common/lib/api";
 import getOriginData from "./originData";
 import shouldInject from "./shouldInject";
 
@@ -16,7 +15,6 @@ const disabledCalls = ["liquid/enable"];
 
 let isEnabled = false; // store if liquid is enabled for this content page
 let isRejected = false; // store if the liquid enable call failed. if so we do not prompt again
-let account;
 
 const SCOPE = "liquid";
 
@@ -68,14 +66,6 @@ async function init() {
         origin: getOriginData(),
       };
 
-      // Overrides the enable action so the user can go through onboarding to setup their keys
-      if (!account || !account.hasMnemonic) {
-        account = await api.getAccount();
-        if (!account.hasMnemonic) {
-          messageWithOrigin.action = ev.data.action = `public/liquid/onboard`;
-        }
-      }
-
       const replyFunction = (response) => {
         if (ev.data.action === `${SCOPE}/enable`) {
           isEnabled = response.data?.enabled;
diff --git a/src/extension/content-script/webbtc.js b/src/extension/content-script/webbtc.js
index 2470b6d4cd..db2ff09d87 100644
--- a/src/extension/content-script/webbtc.js
+++ b/src/extension/content-script/webbtc.js
@@ -1,6 +1,5 @@
 import browser from "webextension-polyfill";
 
-import api from "~/common/lib/api";
 import getOriginData from "./originData";
 import shouldInject from "./shouldInject";
 // WebBTC calls that can be executed from the WebBTC Provider.
@@ -15,7 +14,7 @@ const disabledCalls = ["webbtc/enable"];
 
 let isEnabled = false; // store if webbtc is enabled for this content page
 let isRejected = false; // store if the webbtc enable call failed. if so we do not prompt again
-let account;
+
 const SCOPE = "webbtc";
 
 async function init() {
@@ -66,14 +65,6 @@ async function init() {
         origin: getOriginData(),
       };
 
-      // Overrides the enable action so the user can go through onboarding to setup their keys
-      if (!account || !account.hasMnemonic) {
-        account = await api.getAccount();
-        if (!account.hasMnemonic) {
-          messageWithOrigin.action = ev.data.action = `public/webbtc/onboard`;
-        }
-      }
-
       const replyFunction = (response) => {
         if (ev.data.action === `${SCOPE}/enable`) {
           isEnabled = response.data?.enabled;

From 6d2785ca2a62c13b2a4e1499ae3f2d479f279501 Mon Sep 17 00:00:00 2001
From: pavanjoshi914 <pavanj914@gmail.com>
Date: Thu, 14 Sep 2023 14:23:49 +0530
Subject: [PATCH 10/17] chore: remove comments

---
 src/extension/background-script/actions/alby/enable.ts   | 4 +---
 src/extension/background-script/actions/liquid/enable.ts | 4 +---
 src/extension/background-script/actions/nostr/enable.ts  | 4 +---
 src/extension/background-script/actions/webbtc/enable.ts | 4 +---
 src/extension/background-script/actions/webln/enable.ts  | 4 +---
 5 files changed, 5 insertions(+), 15 deletions(-)

diff --git a/src/extension/background-script/actions/alby/enable.ts b/src/extension/background-script/actions/alby/enable.ts
index 5bb4c0b2d2..ceb6665d07 100644
--- a/src/extension/background-script/actions/alby/enable.ts
+++ b/src/extension/background-script/actions/alby/enable.ts
@@ -15,9 +15,7 @@ const enable = async (message: MessageAllowanceEnable, sender: Sender) => {
     .where("host")
     .equalsIgnoreCase(host)
     .first();
-  // remove this? cause next time the allowance is set and enable is called we directly return from here.hence onboarding will work only once
-  // i suggest to not remove it. as if we go to the screen everytime. for other providers. it will be a flickering glitch.
-  // screen will popup for a second and close automatically as allowance is set but we are returning from the screen if we remove it.
+
   if (isUnlocked && allowance && allowance.enabled) {
     return {
       data: { enabled: true },
diff --git a/src/extension/background-script/actions/liquid/enable.ts b/src/extension/background-script/actions/liquid/enable.ts
index 166205438c..b560416bbf 100644
--- a/src/extension/background-script/actions/liquid/enable.ts
+++ b/src/extension/background-script/actions/liquid/enable.ts
@@ -16,9 +16,7 @@ const enable = async (message: MessageAllowanceEnable, sender: Sender) => {
     .where("host")
     .equalsIgnoreCase(host)
     .first();
-  // remove this? cause next time the allowance is set and enable is called we directly return from here.hence onboarding will work only once
-  // i suggest to not remove it. as if we go to the screen everytime. for other providers. it will be a flickering glitch.
-  // screen will popup for a second and close automatically as allowance is set but we are returning from the screen if we remove it.
+
   if (isUnlocked && allowance && allowance.enabled && account?.mnemonic) {
     return {
       data: { enabled: true },
diff --git a/src/extension/background-script/actions/nostr/enable.ts b/src/extension/background-script/actions/nostr/enable.ts
index 0b3f078201..d8c9fa8d98 100644
--- a/src/extension/background-script/actions/nostr/enable.ts
+++ b/src/extension/background-script/actions/nostr/enable.ts
@@ -17,9 +17,7 @@ const enable = async (message: MessageAllowanceEnable, sender: Sender) => {
     .where("host")
     .equalsIgnoreCase(host)
     .first();
-  // remove this? cause next time the allowance is set and enable is called we directly return from here.hence onboarding will work only once
-  // i suggest to not remove it. as if we go to the screen everytime. for other providers. it will be a flickering glitch.
-  // screen will popup for a second and close automatically as allowance is set but we are returning from the screen if we remove it.
+
   if (
     isUnlocked &&
     allowance &&
diff --git a/src/extension/background-script/actions/webbtc/enable.ts b/src/extension/background-script/actions/webbtc/enable.ts
index 166205438c..b560416bbf 100644
--- a/src/extension/background-script/actions/webbtc/enable.ts
+++ b/src/extension/background-script/actions/webbtc/enable.ts
@@ -16,9 +16,7 @@ const enable = async (message: MessageAllowanceEnable, sender: Sender) => {
     .where("host")
     .equalsIgnoreCase(host)
     .first();
-  // remove this? cause next time the allowance is set and enable is called we directly return from here.hence onboarding will work only once
-  // i suggest to not remove it. as if we go to the screen everytime. for other providers. it will be a flickering glitch.
-  // screen will popup for a second and close automatically as allowance is set but we are returning from the screen if we remove it.
+
   if (isUnlocked && allowance && allowance.enabled && account?.mnemonic) {
     return {
       data: { enabled: true },
diff --git a/src/extension/background-script/actions/webln/enable.ts b/src/extension/background-script/actions/webln/enable.ts
index 5bb4c0b2d2..ceb6665d07 100644
--- a/src/extension/background-script/actions/webln/enable.ts
+++ b/src/extension/background-script/actions/webln/enable.ts
@@ -15,9 +15,7 @@ const enable = async (message: MessageAllowanceEnable, sender: Sender) => {
     .where("host")
     .equalsIgnoreCase(host)
     .first();
-  // remove this? cause next time the allowance is set and enable is called we directly return from here.hence onboarding will work only once
-  // i suggest to not remove it. as if we go to the screen everytime. for other providers. it will be a flickering glitch.
-  // screen will popup for a second and close automatically as allowance is set but we are returning from the screen if we remove it.
+
   if (isUnlocked && allowance && allowance.enabled) {
     return {
       data: { enabled: true },

From c39c77398702c41e43a0162e87de507dbad07c64 Mon Sep 17 00:00:00 2001
From: pavanjoshi914 <pavanj914@gmail.com>
Date: Thu, 14 Sep 2023 15:02:22 +0530
Subject: [PATCH 11/17] feat: redesign component rendering for provider screens

---
 src/app/screens/Enable/LiquidEnable.tsx | 21 +++++++++++++--------
 src/app/screens/Enable/NostrEnable.tsx  | 20 +++++++++++++-------
 src/app/screens/Enable/WebbtcEnable.tsx | 22 ++++++++++++++--------
 3 files changed, 40 insertions(+), 23 deletions(-)

diff --git a/src/app/screens/Enable/LiquidEnable.tsx b/src/app/screens/Enable/LiquidEnable.tsx
index 351b927059..813acd07de 100644
--- a/src/app/screens/Enable/LiquidEnable.tsx
+++ b/src/app/screens/Enable/LiquidEnable.tsx
@@ -1,6 +1,5 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import LiquidEnableComponent from "~/app/components/Enable/LiquidEnable";
-
 import Onboard from "~/app/components/onboard";
 import { useAccount } from "~/app/context/AccountContext";
 import api from "~/common/lib/api";
@@ -11,10 +10,8 @@ type Props = {
 };
 
 export default function LiquidEnable(props: Props) {
-  const [accountComponent, setAccountComponent] =
-    useState<React.ReactNode | null>(null); // State to store the component to render
-
   const { account } = useAccount();
+  const [hasMnemonic, setHasMnemonic] = useState(false);
 
   useEffect(() => {
     async function fetchAccountAndSetComponent() {
@@ -22,9 +19,9 @@ export default function LiquidEnable(props: Props) {
         const fetchedAccount = await api.getAccount();
 
         if (fetchedAccount.hasMnemonic) {
-          setAccountComponent(<LiquidEnableComponent origin={props.origin} />);
+          setHasMnemonic(true);
         } else {
-          setAccountComponent(<Onboard />);
+          setHasMnemonic(false);
         }
       } catch (e) {
         console.error(e);
@@ -34,5 +31,13 @@ export default function LiquidEnable(props: Props) {
     fetchAccountAndSetComponent();
   }, [props.origin, account]);
 
-  return <div>{accountComponent}</div>;
+  return (
+    <div>
+      {hasMnemonic ? (
+        <LiquidEnableComponent origin={props.origin} />
+      ) : (
+        <Onboard />
+      )}
+    </div>
+  );
 }
diff --git a/src/app/screens/Enable/NostrEnable.tsx b/src/app/screens/Enable/NostrEnable.tsx
index 28188146ca..e52c7bf783 100644
--- a/src/app/screens/Enable/NostrEnable.tsx
+++ b/src/app/screens/Enable/NostrEnable.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import NostrEnableComponent from "~/app/components/Enable/NostrEnable";
 import Onboard from "~/app/components/onboard";
 import { useAccount } from "~/app/context/AccountContext";
@@ -10,10 +10,8 @@ type Props = {
 };
 
 export default function NostrEnable(props: Props) {
-  const [accountComponent, setAccountComponent] =
-    useState<React.ReactNode | null>(null); // State to store the component to render
-
   const { account } = useAccount();
+  const [hasNostrKeys, setHasNostrkeys] = useState(false);
 
   useEffect(() => {
     async function fetchAccountAndSetComponent() {
@@ -21,9 +19,9 @@ export default function NostrEnable(props: Props) {
         const fetchedAccount = await api.getAccount();
 
         if (fetchedAccount.nostrEnabled) {
-          setAccountComponent(<NostrEnableComponent origin={props.origin} />);
+          setHasNostrkeys(true);
         } else {
-          setAccountComponent(<Onboard />);
+          setHasNostrkeys(false);
         }
       } catch (e) {
         console.error(e);
@@ -33,5 +31,13 @@ export default function NostrEnable(props: Props) {
     fetchAccountAndSetComponent();
   }, [props.origin, account]);
 
-  return <div>{accountComponent}</div>;
+  return (
+    <div>
+      {hasNostrKeys ? (
+        <NostrEnableComponent origin={props.origin} />
+      ) : (
+        <Onboard />
+      )}
+    </div>
+  );
 }
diff --git a/src/app/screens/Enable/WebbtcEnable.tsx b/src/app/screens/Enable/WebbtcEnable.tsx
index 0b180787c4..a7e1267266 100644
--- a/src/app/screens/Enable/WebbtcEnable.tsx
+++ b/src/app/screens/Enable/WebbtcEnable.tsx
@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from "react";
-import WebbtcEnableComponent from "~/app/components/Enable/WebbtcEnable";
+import { useEffect, useState } from "react";
+import LiquidEnableComponent from "~/app/components/Enable/LiquidEnable";
 import Onboard from "~/app/components/onboard";
 import { useAccount } from "~/app/context/AccountContext";
 import api from "~/common/lib/api";
@@ -10,10 +10,8 @@ type Props = {
 };
 
 export default function WebbtcEnable(props: Props) {
-  const [accountComponent, setAccountComponent] =
-    useState<React.ReactNode | null>(null); // State to store the component to render
-
   const { account } = useAccount();
+  const [hasMnemonic, setHasMnemonic] = useState(false);
 
   useEffect(() => {
     async function fetchAccountAndSetComponent() {
@@ -21,9 +19,9 @@ export default function WebbtcEnable(props: Props) {
         const fetchedAccount = await api.getAccount();
 
         if (fetchedAccount.hasMnemonic) {
-          setAccountComponent(<WebbtcEnableComponent origin={props.origin} />);
+          setHasMnemonic(true);
         } else {
-          setAccountComponent(<Onboard />);
+          setHasMnemonic(false);
         }
       } catch (e) {
         console.error(e);
@@ -33,5 +31,13 @@ export default function WebbtcEnable(props: Props) {
     fetchAccountAndSetComponent();
   }, [props.origin, account]);
 
-  return <div>{accountComponent}</div>;
+  return (
+    <div>
+      {hasMnemonic ? (
+        <LiquidEnableComponent origin={props.origin} />
+      ) : (
+        <Onboard />
+      )}
+    </div>
+  );
 }

From 9f018d649673d41850d241e603a4cb0b3d3e5bc9 Mon Sep 17 00:00:00 2001
From: pavanjoshi914 <pavanj914@gmail.com>
Date: Mon, 18 Sep 2023 11:21:50 +0530
Subject: [PATCH 12/17] chore: remove existing lnurl-auth onboard from webln

---
 src/extension/content-script/webln.js | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/src/extension/content-script/webln.js b/src/extension/content-script/webln.js
index fa5822ff03..21b51e9f99 100644
--- a/src/extension/content-script/webln.js
+++ b/src/extension/content-script/webln.js
@@ -1,6 +1,5 @@
 import browser from "webextension-polyfill";
 
-import api from "~/common/lib/api";
 import extractLightningData from "./batteries";
 import getOriginData from "./originData";
 import shouldInject from "./shouldInject";
@@ -26,7 +25,6 @@ const disabledCalls = ["webln/enable"];
 
 let isEnabled = false; // store if webln is enabled for this content page
 let isRejected = false; // store if the webln enable call failed. if so we do not prompt again
-let account;
 
 async function init() {
   const inject = await shouldInject();
@@ -91,16 +89,6 @@ async function init() {
         origin: getOriginData(),
       };
 
-      // Overrides the enable action so the user can go through onboarding to setup their keys
-
-      // Overrides the enable action so the user can go through onboarding to setup their keys
-      if (!account || !account.hasMnemonic) {
-        account = await api.getAccount();
-        if (!account.hasMnemonic) {
-          messageWithOrigin.action = ev.data.action = `public/webln/onboard`;
-        }
-      }
-
       const replyFunction = (response) => {
         // if it is the enable call we store if webln is enabled for this content script
         if (ev.data.action === "webln/enable") {

From 6780075fe2af09aa8437e7fccfe0df932244b72d Mon Sep 17 00:00:00 2001
From: pavanjoshi914 <pavanj914@gmail.com>
Date: Mon, 18 Sep 2023 11:38:43 +0530
Subject: [PATCH 13/17] chore: remove onboard routes as no longer required

---
 src/app/router/Prompt/Prompt.tsx | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/app/router/Prompt/Prompt.tsx b/src/app/router/Prompt/Prompt.tsx
index f713015da4..36ffae360c 100644
--- a/src/app/router/Prompt/Prompt.tsx
+++ b/src/app/router/Prompt/Prompt.tsx
@@ -19,7 +19,6 @@ import Unlock from "@screens/Unlock";
 import { HashRouter, Navigate, Outlet, Route, Routes } from "react-router-dom";
 import AlbyLogo from "~/app/components/AlbyLogo";
 import Toaster from "~/app/components/Toast/Toaster";
-import Onboard from "~/app/components/onboard";
 import Providers from "~/app/context/Providers";
 import RequireAuth from "~/app/router/RequireAuth";
 import BitcoinConfirmGetAddress from "~/app/screens/Bitcoin/ConfirmGetAddress";
@@ -141,10 +140,6 @@ function Prompt() {
             <Route path="confirmKeysend" element={<ConfirmKeysend />} />
             <Route path="confirmSignMessage" element={<ConfirmSignMessage />} />
             <Route path="confirmAddAccount" element={<ConfirmAddAccount />} />
-            <Route path="public/nostr/onboard" element={<Onboard />} />
-            <Route path="public/liquid/onboard" element={<Onboard />} />
-            <Route path="public/webbtc/onboard" element={<Onboard />} />
-            <Route path="public/webln/onboard" element={<Onboard />} />
             <Route
               path="public/confirmRequestPermission"
               element={<ConfirmRequestPermission />}

From ca8189cbd6ba4c09a9f73f29857361bcac5868cf Mon Sep 17 00:00:00 2001
From: pavanjoshi914 <pavanj914@gmail.com>
Date: Mon, 18 Sep 2023 14:31:19 +0530
Subject: [PATCH 14/17] refactor: separate translations for each provider
 modify contents in the screen clean up blocklist, allowance and enable
 functions in the provider signed-off-by: pavan joshi <pavanj914@gmail.com>

---
 src/app/components/Enable/AlbyEnable.tsx   | 41 ++++++----------------
 src/app/components/Enable/LiquidEnable.tsx | 41 ++++++----------------
 src/app/components/Enable/NostrEnable.tsx  | 37 ++++---------------
 src/app/components/Enable/WebbtcEnable.tsx | 41 ++++++----------------
 src/app/components/Enable/WeblnEnable.tsx  | 41 ++++++----------------
 src/app/screens/Enable/LiquidEnable.tsx    |  4 +--
 src/app/screens/Enable/NostrEnable.tsx     | 10 +++---
 src/app/screens/Enable/WebbtcEnable.tsx    |  4 +--
 src/i18n/locales/en/translation.json       | 34 +++++++++++++-----
 9 files changed, 82 insertions(+), 171 deletions(-)

diff --git a/src/app/components/Enable/AlbyEnable.tsx b/src/app/components/Enable/AlbyEnable.tsx
index 81f611cbb7..4af8083253 100644
--- a/src/app/components/Enable/AlbyEnable.tsx
+++ b/src/app/components/Enable/AlbyEnable.tsx
@@ -2,7 +2,7 @@ import { CheckIcon } from "@bitcoin-design/bitcoin-icons-react/filled";
 import ConfirmOrCancel from "@components/ConfirmOrCancel";
 import Container from "@components/Container";
 import PublisherCard from "@components/PublisherCard";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import ScreenHeader from "~/app/components/ScreenHeader";
 import toast from "~/app/components/Toast";
@@ -14,14 +14,13 @@ type Props = {
   origin: OriginData;
 };
 function AlbyEnableComponent(props: Props) {
-  const hasFetchedData = useRef(false);
   const [loading, setLoading] = useState(false);
   const { t } = useTranslation("translation", {
-    keyPrefix: "enable",
+    keyPrefix: "alby_enable",
   });
   const { t: tCommon } = useTranslation("common");
 
-  const enable = useCallback(() => {
+  const enable = () => {
     try {
       setLoading(true);
       msg.reply({
@@ -34,7 +33,7 @@ function AlbyEnableComponent(props: Props) {
     } finally {
       setLoading(false);
     }
-  }, [tCommon]);
+  };
 
   function reject(event: React.MouseEvent<HTMLAnchorElement>) {
     event.preventDefault();
@@ -47,32 +46,10 @@ function AlbyEnableComponent(props: Props) {
       domain: props.origin.domain,
       host: props.origin.host,
     });
-    alert(t("block_added", { host: props.origin.host }));
+    alert(tCommon("block_added", { host: props.origin.host }));
     msg.error(USER_REJECTED_ERROR);
   }
 
-  useEffect(() => {
-    async function getAllowance() {
-      try {
-        const allowance = await msg.request("getAllowance", {
-          domain: props.origin.domain,
-          host: props.origin.host,
-        });
-        if (allowance && allowance.enabled) {
-          enable();
-        }
-      } catch (e) {
-        if (e instanceof Error) console.error(e.message);
-      }
-    }
-
-    // Run once.
-    if (!hasFetchedData.current) {
-      getAllowance();
-      hasFetchedData.current = true;
-    }
-  }, [enable, props.origin.domain, props.origin.host]);
-
   return (
     <div className="h-full flex flex-col overflow-y-auto no-scrollbar">
       <ScreenHeader title={t("title")} />
@@ -86,11 +63,13 @@ function AlbyEnableComponent(props: Props) {
           />
 
           <div className="dark:text-white pt-6">
-            <p className="mb-2">{t("allow")}</p>
+            <p className="mb-2">{tCommon("allow")}</p>
 
             <div className="mb-2 flex items-center">
               <CheckIcon className="w-5 h-5 mr-2" />
-              <p className="dark:text-white">{t("request1")}</p>
+              <p className="dark:text-white">
+                {tCommon("request_transaction_approval")}
+              </p>
             </div>
             <div className="mb-2 flex items-center">
               <CheckIcon className="w-5 h-5 mr-2" />
@@ -111,7 +90,7 @@ function AlbyEnableComponent(props: Props) {
             href="#"
             onClick={block}
           >
-            {t("block_and_ignore", { host: props.origin.host })}
+            {tCommon("actions.block_and_ignore", { host: props.origin.host })}
           </a>
         </div>
       </Container>
diff --git a/src/app/components/Enable/LiquidEnable.tsx b/src/app/components/Enable/LiquidEnable.tsx
index 3ebd732f12..eb0248d5d8 100644
--- a/src/app/components/Enable/LiquidEnable.tsx
+++ b/src/app/components/Enable/LiquidEnable.tsx
@@ -2,7 +2,7 @@ import { CheckIcon } from "@bitcoin-design/bitcoin-icons-react/filled";
 import ConfirmOrCancel from "@components/ConfirmOrCancel";
 import Container from "@components/Container";
 import PublisherCard from "@components/PublisherCard";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import ScreenHeader from "~/app/components/ScreenHeader";
 import toast from "~/app/components/Toast";
@@ -14,14 +14,13 @@ type Props = {
   origin: OriginData;
 };
 function LiquidEnableComponent(props: Props) {
-  const hasFetchedData = useRef(false);
   const [loading, setLoading] = useState(false);
   const { t } = useTranslation("translation", {
-    keyPrefix: "enable",
+    keyPrefix: "liquid_enable",
   });
   const { t: tCommon } = useTranslation("common");
 
-  const enable = useCallback(() => {
+  const enable = () => {
     try {
       setLoading(true);
       msg.reply({
@@ -34,7 +33,7 @@ function LiquidEnableComponent(props: Props) {
     } finally {
       setLoading(false);
     }
-  }, [tCommon]);
+  };
 
   function reject(event: React.MouseEvent<HTMLAnchorElement>) {
     event.preventDefault();
@@ -47,32 +46,10 @@ function LiquidEnableComponent(props: Props) {
       domain: props.origin.domain,
       host: props.origin.host,
     });
-    alert(t("block_added", { host: props.origin.host }));
+    alert(tCommon("block_added", { host: props.origin.host }));
     msg.error(USER_REJECTED_ERROR);
   }
 
-  useEffect(() => {
-    async function getAllowance() {
-      try {
-        const allowance = await msg.request("getAllowance", {
-          domain: props.origin.domain,
-          host: props.origin.host,
-        });
-        if (allowance && allowance.enabled) {
-          enable();
-        }
-      } catch (e) {
-        if (e instanceof Error) console.error(e.message);
-      }
-    }
-
-    // Run once.
-    if (!hasFetchedData.current) {
-      getAllowance();
-      hasFetchedData.current = true;
-    }
-  }, [enable, props.origin.domain, props.origin.host]);
-
   return (
     <div className="h-full flex flex-col overflow-y-auto no-scrollbar">
       <ScreenHeader title={t("title")} />
@@ -86,11 +63,13 @@ function LiquidEnableComponent(props: Props) {
           />
 
           <div className="dark:text-white pt-6">
-            <p className="mb-2">{t("allow")}</p>
+            <p className="mb-2">{tCommon("allow")}</p>
 
             <div className="mb-2 flex items-center">
               <CheckIcon className="w-5 h-5 mr-2" />
-              <p className="dark:text-white">{t("request1")}</p>
+              <p className="dark:text-white">
+                {tCommon("request_transaction_approval")}
+              </p>
             </div>
             <div className="mb-2 flex items-center">
               <CheckIcon className="w-5 h-5 mr-2" />
@@ -111,7 +90,7 @@ function LiquidEnableComponent(props: Props) {
             href="#"
             onClick={block}
           >
-            {t("block_and_ignore", { host: props.origin.host })}
+            {tCommon("actions.block_and_ignore", { host: props.origin.host })}
           </a>
         </div>
       </Container>
diff --git a/src/app/components/Enable/NostrEnable.tsx b/src/app/components/Enable/NostrEnable.tsx
index 0003fe94c5..72919c1329 100644
--- a/src/app/components/Enable/NostrEnable.tsx
+++ b/src/app/components/Enable/NostrEnable.tsx
@@ -2,7 +2,7 @@ import { CheckIcon } from "@bitcoin-design/bitcoin-icons-react/filled";
 import ConfirmOrCancel from "@components/ConfirmOrCancel";
 import Container from "@components/Container";
 import PublisherCard from "@components/PublisherCard";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import ScreenHeader from "~/app/components/ScreenHeader";
 import toast from "~/app/components/Toast";
@@ -14,14 +14,13 @@ type Props = {
   origin: OriginData;
 };
 function NostrEnableComponent(props: Props) {
-  const hasFetchedData = useRef(false);
   const [loading, setLoading] = useState(false);
   const { t } = useTranslation("translation", {
-    keyPrefix: "enable",
+    keyPrefix: "nostr_enable",
   });
   const { t: tCommon } = useTranslation("common");
 
-  const enable = useCallback(() => {
+  const enable = () => {
     try {
       setLoading(true);
       msg.reply({
@@ -34,7 +33,7 @@ function NostrEnableComponent(props: Props) {
     } finally {
       setLoading(false);
     }
-  }, [tCommon]);
+  };
 
   function reject(event: React.MouseEvent<HTMLAnchorElement>) {
     event.preventDefault();
@@ -47,32 +46,10 @@ function NostrEnableComponent(props: Props) {
       domain: props.origin.domain,
       host: props.origin.host,
     });
-    alert(t("block_added", { host: props.origin.host }));
+    alert(tCommon("block_added", { host: props.origin.host }));
     msg.error(USER_REJECTED_ERROR);
   }
 
-  useEffect(() => {
-    async function getAllowance() {
-      try {
-        const allowance = await msg.request("getAllowance", {
-          domain: props.origin.domain,
-          host: props.origin.host,
-        });
-        if (allowance && allowance.enabled) {
-          enable();
-        }
-      } catch (e) {
-        if (e instanceof Error) console.error(e.message);
-      }
-    }
-
-    // Run once.
-    if (!hasFetchedData.current) {
-      getAllowance();
-      hasFetchedData.current = true;
-    }
-  }, [enable, props.origin.domain, props.origin.host]);
-
   return (
     <div className="h-full flex flex-col overflow-y-auto no-scrollbar">
       <ScreenHeader title={t("title")} />
@@ -86,7 +63,7 @@ function NostrEnableComponent(props: Props) {
           />
 
           <div className="dark:text-white pt-6">
-            <p className="mb-2">{t("allow")}</p>
+            <p className="mb-2">{tCommon("allow")}</p>
 
             <div className="mb-2 flex items-center">
               <CheckIcon className="w-5 h-5 mr-2" />
@@ -111,7 +88,7 @@ function NostrEnableComponent(props: Props) {
             href="#"
             onClick={block}
           >
-            {t("block_and_ignore", { host: props.origin.host })}
+            {tCommon("actions.block_and_ignore", { host: props.origin.host })}
           </a>
         </div>
       </Container>
diff --git a/src/app/components/Enable/WebbtcEnable.tsx b/src/app/components/Enable/WebbtcEnable.tsx
index e8f4fb469f..19f471c569 100644
--- a/src/app/components/Enable/WebbtcEnable.tsx
+++ b/src/app/components/Enable/WebbtcEnable.tsx
@@ -2,7 +2,7 @@ import { CheckIcon } from "@bitcoin-design/bitcoin-icons-react/filled";
 import ConfirmOrCancel from "@components/ConfirmOrCancel";
 import Container from "@components/Container";
 import PublisherCard from "@components/PublisherCard";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import ScreenHeader from "~/app/components/ScreenHeader";
 import toast from "~/app/components/Toast";
@@ -14,14 +14,13 @@ type Props = {
   origin: OriginData;
 };
 function WebbtcEnableComponent(props: Props) {
-  const hasFetchedData = useRef(false);
   const [loading, setLoading] = useState(false);
   const { t } = useTranslation("translation", {
-    keyPrefix: "enable",
+    keyPrefix: "webbtc_enable",
   });
   const { t: tCommon } = useTranslation("common");
 
-  const enable = useCallback(() => {
+  const enable = () => {
     try {
       setLoading(true);
       msg.reply({
@@ -34,7 +33,7 @@ function WebbtcEnableComponent(props: Props) {
     } finally {
       setLoading(false);
     }
-  }, [tCommon]);
+  };
 
   function reject(event: React.MouseEvent<HTMLAnchorElement>) {
     event.preventDefault();
@@ -47,32 +46,10 @@ function WebbtcEnableComponent(props: Props) {
       domain: props.origin.domain,
       host: props.origin.host,
     });
-    alert(t("block_added", { host: props.origin.host }));
+    alert(tCommon("block_added", { host: props.origin.host }));
     msg.error(USER_REJECTED_ERROR);
   }
 
-  useEffect(() => {
-    async function getAllowance() {
-      try {
-        const allowance = await msg.request("getAllowance", {
-          domain: props.origin.domain,
-          host: props.origin.host,
-        });
-        if (allowance && allowance.enabled) {
-          enable();
-        }
-      } catch (e) {
-        if (e instanceof Error) console.error(e.message);
-      }
-    }
-
-    // Run once.
-    if (!hasFetchedData.current) {
-      getAllowance();
-      hasFetchedData.current = true;
-    }
-  }, [enable, props.origin.domain, props.origin.host]);
-
   return (
     <div className="h-full flex flex-col overflow-y-auto no-scrollbar">
       <ScreenHeader title={t("title")} />
@@ -86,11 +63,13 @@ function WebbtcEnableComponent(props: Props) {
           />
 
           <div className="dark:text-white pt-6">
-            <p className="mb-2">{t("allow")}</p>
+            <p className="mb-2">{tCommon("allow")}</p>
 
             <div className="mb-2 flex items-center">
               <CheckIcon className="w-5 h-5 mr-2" />
-              <p className="dark:text-white">{t("request1")}</p>
+              <p className="dark:text-white">
+                {tCommon("request_transaction_approval")}
+              </p>
             </div>
             <div className="mb-2 flex items-center">
               <CheckIcon className="w-5 h-5 mr-2" />
@@ -111,7 +90,7 @@ function WebbtcEnableComponent(props: Props) {
             href="#"
             onClick={block}
           >
-            {t("block_and_ignore", { host: props.origin.host })}
+            {tCommon("actions.block_and_ignore", { host: props.origin.host })}
           </a>
         </div>
       </Container>
diff --git a/src/app/components/Enable/WeblnEnable.tsx b/src/app/components/Enable/WeblnEnable.tsx
index c153a0e718..1ada6d86b3 100644
--- a/src/app/components/Enable/WeblnEnable.tsx
+++ b/src/app/components/Enable/WeblnEnable.tsx
@@ -2,7 +2,7 @@ import { CheckIcon } from "@bitcoin-design/bitcoin-icons-react/filled";
 import ConfirmOrCancel from "@components/ConfirmOrCancel";
 import Container from "@components/Container";
 import PublisherCard from "@components/PublisherCard";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import ScreenHeader from "~/app/components/ScreenHeader";
 import toast from "~/app/components/Toast";
@@ -14,14 +14,13 @@ type Props = {
   origin: OriginData;
 };
 function WeblnEnableComponent(props: Props) {
-  const hasFetchedData = useRef(false);
   const [loading, setLoading] = useState(false);
   const { t } = useTranslation("translation", {
-    keyPrefix: "enable",
+    keyPrefix: "webln_enable",
   });
   const { t: tCommon } = useTranslation("common");
 
-  const enable = useCallback(() => {
+  const enable = () => {
     try {
       setLoading(true);
       msg.reply({
@@ -34,7 +33,7 @@ function WeblnEnableComponent(props: Props) {
     } finally {
       setLoading(false);
     }
-  }, [tCommon]);
+  };
 
   function reject(event: React.MouseEvent<HTMLAnchorElement>) {
     event.preventDefault();
@@ -47,32 +46,10 @@ function WeblnEnableComponent(props: Props) {
       domain: props.origin.domain,
       host: props.origin.host,
     });
-    alert(t("block_added", { host: props.origin.host }));
+    alert(tCommon("block_added", { host: props.origin.host }));
     msg.error(USER_REJECTED_ERROR);
   }
 
-  useEffect(() => {
-    async function getAllowance() {
-      try {
-        const allowance = await msg.request("getAllowance", {
-          domain: props.origin.domain,
-          host: props.origin.host,
-        });
-        if (allowance && allowance.enabled) {
-          enable();
-        }
-      } catch (e) {
-        if (e instanceof Error) console.error(e.message);
-      }
-    }
-
-    // Run once.
-    if (!hasFetchedData.current) {
-      getAllowance();
-      hasFetchedData.current = true;
-    }
-  }, [enable, props.origin.domain, props.origin.host]);
-
   return (
     <div className="h-full flex flex-col overflow-y-auto no-scrollbar">
       <ScreenHeader title={t("title")} />
@@ -86,11 +63,13 @@ function WeblnEnableComponent(props: Props) {
           />
 
           <div className="dark:text-white pt-6">
-            <p className="mb-2">{t("allow")}</p>
+            <p className="mb-2">{tCommon("allow")}</p>
 
             <div className="mb-2 flex items-center">
               <CheckIcon className="w-5 h-5 mr-2" />
-              <p className="dark:text-white">{t("request1")}</p>
+              <p className="dark:text-white">
+                {tCommon("request_transaction_approval")}
+              </p>
             </div>
             <div className="mb-2 flex items-center">
               <CheckIcon className="w-5 h-5 mr-2" />
@@ -111,7 +90,7 @@ function WeblnEnableComponent(props: Props) {
             href="#"
             onClick={block}
           >
-            {t("block_and_ignore", { host: props.origin.host })}
+            {tCommon("actions.block_and_ignore", { host: props.origin.host })}
           </a>
         </div>
       </Container>
diff --git a/src/app/screens/Enable/LiquidEnable.tsx b/src/app/screens/Enable/LiquidEnable.tsx
index 813acd07de..27f54eaba0 100644
--- a/src/app/screens/Enable/LiquidEnable.tsx
+++ b/src/app/screens/Enable/LiquidEnable.tsx
@@ -14,7 +14,7 @@ export default function LiquidEnable(props: Props) {
   const [hasMnemonic, setHasMnemonic] = useState(false);
 
   useEffect(() => {
-    async function fetchAccountAndSetComponent() {
+    async function fetchAccountInfo() {
       try {
         const fetchedAccount = await api.getAccount();
 
@@ -28,7 +28,7 @@ export default function LiquidEnable(props: Props) {
       }
     }
 
-    fetchAccountAndSetComponent();
+    fetchAccountInfo();
   }, [props.origin, account]);
 
   return (
diff --git a/src/app/screens/Enable/NostrEnable.tsx b/src/app/screens/Enable/NostrEnable.tsx
index e52c7bf783..3cb043e8c3 100644
--- a/src/app/screens/Enable/NostrEnable.tsx
+++ b/src/app/screens/Enable/NostrEnable.tsx
@@ -11,24 +11,24 @@ type Props = {
 
 export default function NostrEnable(props: Props) {
   const { account } = useAccount();
-  const [hasNostrKeys, setHasNostrkeys] = useState(false);
+  const [hasNostrKeys, setHasNostrKeys] = useState(false);
 
   useEffect(() => {
-    async function fetchAccountAndSetComponent() {
+    async function fetchAccountInfo() {
       try {
         const fetchedAccount = await api.getAccount();
 
         if (fetchedAccount.nostrEnabled) {
-          setHasNostrkeys(true);
+          setHasNostrKeys(true);
         } else {
-          setHasNostrkeys(false);
+          setHasNostrKeys(false);
         }
       } catch (e) {
         console.error(e);
       }
     }
 
-    fetchAccountAndSetComponent();
+    fetchAccountInfo();
   }, [props.origin, account]);
 
   return (
diff --git a/src/app/screens/Enable/WebbtcEnable.tsx b/src/app/screens/Enable/WebbtcEnable.tsx
index a7e1267266..b3a6fa9e46 100644
--- a/src/app/screens/Enable/WebbtcEnable.tsx
+++ b/src/app/screens/Enable/WebbtcEnable.tsx
@@ -14,7 +14,7 @@ export default function WebbtcEnable(props: Props) {
   const [hasMnemonic, setHasMnemonic] = useState(false);
 
   useEffect(() => {
-    async function fetchAccountAndSetComponent() {
+    async function fetchAccountInfo() {
       try {
         const fetchedAccount = await api.getAccount();
 
@@ -28,7 +28,7 @@ export default function WebbtcEnable(props: Props) {
       }
     }
 
-    fetchAccountAndSetComponent();
+    fetchAccountInfo();
   }, [props.origin, account]);
 
   return (
diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json
index 4c2960a1dd..a72bb5a7d8 100644
--- a/src/i18n/locales/en/translation.json
+++ b/src/i18n/locales/en/translation.json
@@ -528,13 +528,27 @@
         "add_account": "Add account"
       }
     },
-    "enable": {
-      "title": "Connect",
-      "allow": "Allow this website to:",
-      "request1": "Request approval for transactions",
-      "request2": "Request invoices and lightning information",
-      "block_and_ignore": "Block and ignore {{host}}",
-      "block_added": "Added {{host}} to the blocklist, please reload the website."
+    "webln_enable": {
+      "title": "Connect to WebLN",
+
+      "request2": "Request invoices and lightning information"
+    },
+    "alby_enable": {
+      "title": "Connect to Alby",
+      "request2": "Request invoices and alby information"
+    },
+    "nostr_enable": {
+      "title": "Connect to Nostr",
+      "request1": "Request approval to read your Nostr public key",
+      "request2": "sign events using your Nostr private key"
+    },
+    "liquid_enable": {
+      "title": "Connect to Liquid",
+      "request2": "Request invoices and liquid information"
+    },
+    "webbtc_enable": {
+      "title": "Connect to WebBTC",
+      "request2": "Request invoices and liquid information"
     },
     "unlock": {
       "unlock_to_continue": "Unlock to continue",
@@ -957,6 +971,7 @@
     }
   },
   "common": {
+    "allow": "Allow this website to:",
     "password": "Password",
     "confirm_password": "Confirm Password",
     "advanced": "Advanced",
@@ -983,6 +998,8 @@
     "help": "Help",
     "balance": "Balance",
     "or": "or",
+    "block_added": "Added {{host}} to the blocklist, please reload the website.",
+    "request_transaction_approval": "Request approval for transactions",
     "actions": {
       "back": "Back",
       "delete": "Delete",
@@ -1015,7 +1032,8 @@
       "more": "More",
       "disconnect": "Disconnect",
       "review": "Review",
-      "download": "Download"
+      "download": "Download",
+      "block_and_ignore": "Block and ignore {{host}}"
     },
     "connectors": {
       "lnd": "LND",

From bb3906949633df52b6275baa42963627f0e61d2a Mon Sep 17 00:00:00 2001
From: pavanjoshi914 <pavanj914@gmail.com>
Date: Mon, 18 Sep 2023 14:52:51 +0530
Subject: [PATCH 15/17] feat: correct confirm or cancel button position

---
 src/app/screens/Enable/LiquidEnable.tsx | 4 ++--
 src/app/screens/Enable/NostrEnable.tsx  | 4 ++--
 src/app/screens/Enable/WebbtcEnable.tsx | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/app/screens/Enable/LiquidEnable.tsx b/src/app/screens/Enable/LiquidEnable.tsx
index 27f54eaba0..f7712f67be 100644
--- a/src/app/screens/Enable/LiquidEnable.tsx
+++ b/src/app/screens/Enable/LiquidEnable.tsx
@@ -32,12 +32,12 @@ export default function LiquidEnable(props: Props) {
   }, [props.origin, account]);
 
   return (
-    <div>
+    <>
       {hasMnemonic ? (
         <LiquidEnableComponent origin={props.origin} />
       ) : (
         <Onboard />
       )}
-    </div>
+    </>
   );
 }
diff --git a/src/app/screens/Enable/NostrEnable.tsx b/src/app/screens/Enable/NostrEnable.tsx
index 3cb043e8c3..3e720a239b 100644
--- a/src/app/screens/Enable/NostrEnable.tsx
+++ b/src/app/screens/Enable/NostrEnable.tsx
@@ -32,12 +32,12 @@ export default function NostrEnable(props: Props) {
   }, [props.origin, account]);
 
   return (
-    <div>
+    <>
       {hasNostrKeys ? (
         <NostrEnableComponent origin={props.origin} />
       ) : (
         <Onboard />
       )}
-    </div>
+    </>
   );
 }
diff --git a/src/app/screens/Enable/WebbtcEnable.tsx b/src/app/screens/Enable/WebbtcEnable.tsx
index b3a6fa9e46..99fc52d15e 100644
--- a/src/app/screens/Enable/WebbtcEnable.tsx
+++ b/src/app/screens/Enable/WebbtcEnable.tsx
@@ -32,12 +32,12 @@ export default function WebbtcEnable(props: Props) {
   }, [props.origin, account]);
 
   return (
-    <div>
+    <>
       {hasMnemonic ? (
         <LiquidEnableComponent origin={props.origin} />
       ) : (
         <Onboard />
       )}
-    </div>
+    </>
   );
 }

From 56b6278a12867814a386a274c29552ba5a9ccf0c Mon Sep 17 00:00:00 2001
From: pavanjoshi914 <pavanj914@gmail.com>
Date: Mon, 18 Sep 2023 16:28:46 +0530
Subject: [PATCH 16/17] feat: restructure translations

---
 src/app/components/Enable/AlbyEnable.tsx   | 10 ++++------
 src/app/components/Enable/LiquidEnable.tsx | 10 ++++------
 src/app/components/Enable/NostrEnable.tsx  |  6 +++---
 src/app/components/Enable/WebbtcEnable.tsx | 10 ++++------
 src/app/components/Enable/WeblnEnable.tsx  | 10 ++++------
 src/i18n/locales/en/translation.json       | 12 +++++++-----
 6 files changed, 26 insertions(+), 32 deletions(-)

diff --git a/src/app/components/Enable/AlbyEnable.tsx b/src/app/components/Enable/AlbyEnable.tsx
index 4af8083253..f0d77ad086 100644
--- a/src/app/components/Enable/AlbyEnable.tsx
+++ b/src/app/components/Enable/AlbyEnable.tsx
@@ -46,7 +46,7 @@ function AlbyEnableComponent(props: Props) {
       domain: props.origin.domain,
       host: props.origin.host,
     });
-    alert(tCommon("block_added", { host: props.origin.host }));
+    alert(tCommon("enable.block_added", { host: props.origin.host }));
     msg.error(USER_REJECTED_ERROR);
   }
 
@@ -63,13 +63,11 @@ function AlbyEnableComponent(props: Props) {
           />
 
           <div className="dark:text-white pt-6">
-            <p className="mb-2">{tCommon("allow")}</p>
+            <p className="mb-2">{tCommon("enable.allow")}</p>
 
             <div className="mb-2 flex items-center">
               <CheckIcon className="w-5 h-5 mr-2" />
-              <p className="dark:text-white">
-                {tCommon("request_transaction_approval")}
-              </p>
+              <p className="dark:text-white">{tCommon("enable.request1")}</p>
             </div>
             <div className="mb-2 flex items-center">
               <CheckIcon className="w-5 h-5 mr-2" />
@@ -90,7 +88,7 @@ function AlbyEnableComponent(props: Props) {
             href="#"
             onClick={block}
           >
-            {tCommon("actions.block_and_ignore", { host: props.origin.host })}
+            {tCommon("enable.block_and_ignore", { host: props.origin.host })}
           </a>
         </div>
       </Container>
diff --git a/src/app/components/Enable/LiquidEnable.tsx b/src/app/components/Enable/LiquidEnable.tsx
index eb0248d5d8..3b34f56655 100644
--- a/src/app/components/Enable/LiquidEnable.tsx
+++ b/src/app/components/Enable/LiquidEnable.tsx
@@ -46,7 +46,7 @@ function LiquidEnableComponent(props: Props) {
       domain: props.origin.domain,
       host: props.origin.host,
     });
-    alert(tCommon("block_added", { host: props.origin.host }));
+    alert(tCommon("enable.block_added", { host: props.origin.host }));
     msg.error(USER_REJECTED_ERROR);
   }
 
@@ -63,13 +63,11 @@ function LiquidEnableComponent(props: Props) {
           />
 
           <div className="dark:text-white pt-6">
-            <p className="mb-2">{tCommon("allow")}</p>
+            <p className="mb-2">{tCommon("enable.allow")}</p>
 
             <div className="mb-2 flex items-center">
               <CheckIcon className="w-5 h-5 mr-2" />
-              <p className="dark:text-white">
-                {tCommon("request_transaction_approval")}
-              </p>
+              <p className="dark:text-white">{tCommon("enable.request1")}</p>
             </div>
             <div className="mb-2 flex items-center">
               <CheckIcon className="w-5 h-5 mr-2" />
@@ -90,7 +88,7 @@ function LiquidEnableComponent(props: Props) {
             href="#"
             onClick={block}
           >
-            {tCommon("actions.block_and_ignore", { host: props.origin.host })}
+            {tCommon("enable.block_and_ignore", { host: props.origin.host })}
           </a>
         </div>
       </Container>
diff --git a/src/app/components/Enable/NostrEnable.tsx b/src/app/components/Enable/NostrEnable.tsx
index 72919c1329..8b7d0d0245 100644
--- a/src/app/components/Enable/NostrEnable.tsx
+++ b/src/app/components/Enable/NostrEnable.tsx
@@ -46,7 +46,7 @@ function NostrEnableComponent(props: Props) {
       domain: props.origin.domain,
       host: props.origin.host,
     });
-    alert(tCommon("block_added", { host: props.origin.host }));
+    alert(tCommon("enable.block_added", { host: props.origin.host }));
     msg.error(USER_REJECTED_ERROR);
   }
 
@@ -63,7 +63,7 @@ function NostrEnableComponent(props: Props) {
           />
 
           <div className="dark:text-white pt-6">
-            <p className="mb-2">{tCommon("allow")}</p>
+            <p className="mb-2">{tCommon("enable.allow")}</p>
 
             <div className="mb-2 flex items-center">
               <CheckIcon className="w-5 h-5 mr-2" />
@@ -88,7 +88,7 @@ function NostrEnableComponent(props: Props) {
             href="#"
             onClick={block}
           >
-            {tCommon("actions.block_and_ignore", { host: props.origin.host })}
+            {tCommon("enable.block_and_ignore", { host: props.origin.host })}
           </a>
         </div>
       </Container>
diff --git a/src/app/components/Enable/WebbtcEnable.tsx b/src/app/components/Enable/WebbtcEnable.tsx
index 19f471c569..61c8179b8d 100644
--- a/src/app/components/Enable/WebbtcEnable.tsx
+++ b/src/app/components/Enable/WebbtcEnable.tsx
@@ -46,7 +46,7 @@ function WebbtcEnableComponent(props: Props) {
       domain: props.origin.domain,
       host: props.origin.host,
     });
-    alert(tCommon("block_added", { host: props.origin.host }));
+    alert(tCommon("enable.block_added", { host: props.origin.host }));
     msg.error(USER_REJECTED_ERROR);
   }
 
@@ -63,13 +63,11 @@ function WebbtcEnableComponent(props: Props) {
           />
 
           <div className="dark:text-white pt-6">
-            <p className="mb-2">{tCommon("allow")}</p>
+            <p className="mb-2">{tCommon("enable.allow")}</p>
 
             <div className="mb-2 flex items-center">
               <CheckIcon className="w-5 h-5 mr-2" />
-              <p className="dark:text-white">
-                {tCommon("request_transaction_approval")}
-              </p>
+              <p className="dark:text-white">{tCommon("enable.request1")}</p>
             </div>
             <div className="mb-2 flex items-center">
               <CheckIcon className="w-5 h-5 mr-2" />
@@ -90,7 +88,7 @@ function WebbtcEnableComponent(props: Props) {
             href="#"
             onClick={block}
           >
-            {tCommon("actions.block_and_ignore", { host: props.origin.host })}
+            {tCommon("enable.block_and_ignore", { host: props.origin.host })}
           </a>
         </div>
       </Container>
diff --git a/src/app/components/Enable/WeblnEnable.tsx b/src/app/components/Enable/WeblnEnable.tsx
index 1ada6d86b3..d857ebaaa4 100644
--- a/src/app/components/Enable/WeblnEnable.tsx
+++ b/src/app/components/Enable/WeblnEnable.tsx
@@ -46,7 +46,7 @@ function WeblnEnableComponent(props: Props) {
       domain: props.origin.domain,
       host: props.origin.host,
     });
-    alert(tCommon("block_added", { host: props.origin.host }));
+    alert(tCommon("enable.block_added", { host: props.origin.host }));
     msg.error(USER_REJECTED_ERROR);
   }
 
@@ -63,13 +63,11 @@ function WeblnEnableComponent(props: Props) {
           />
 
           <div className="dark:text-white pt-6">
-            <p className="mb-2">{tCommon("allow")}</p>
+            <p className="mb-2">{tCommon("enable.allow")}</p>
 
             <div className="mb-2 flex items-center">
               <CheckIcon className="w-5 h-5 mr-2" />
-              <p className="dark:text-white">
-                {tCommon("request_transaction_approval")}
-              </p>
+              <p className="dark:text-white">{tCommon("enable.request1")}</p>
             </div>
             <div className="mb-2 flex items-center">
               <CheckIcon className="w-5 h-5 mr-2" />
@@ -90,7 +88,7 @@ function WeblnEnableComponent(props: Props) {
             href="#"
             onClick={block}
           >
-            {tCommon("actions.block_and_ignore", { host: props.origin.host })}
+            {tCommon("enable.block_and_ignore", { host: props.origin.host })}
           </a>
         </div>
       </Container>
diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json
index a72bb5a7d8..67c55260ce 100644
--- a/src/i18n/locales/en/translation.json
+++ b/src/i18n/locales/en/translation.json
@@ -971,7 +971,6 @@
     }
   },
   "common": {
-    "allow": "Allow this website to:",
     "password": "Password",
     "confirm_password": "Confirm Password",
     "advanced": "Advanced",
@@ -998,8 +997,6 @@
     "help": "Help",
     "balance": "Balance",
     "or": "or",
-    "block_added": "Added {{host}} to the blocklist, please reload the website.",
-    "request_transaction_approval": "Request approval for transactions",
     "actions": {
       "back": "Back",
       "delete": "Delete",
@@ -1032,8 +1029,7 @@
       "more": "More",
       "disconnect": "Disconnect",
       "review": "Review",
-      "download": "Download",
-      "block_and_ignore": "Block and ignore {{host}}"
+      "download": "Download"
     },
     "connectors": {
       "lnd": "LND",
@@ -1056,6 +1052,12 @@
       "between": "between {{min}} and {{max}}",
       "lessThanOrEqual": "≤ {{max}}",
       "greaterOrEqual": "≥ {{min}}"
+    },
+    "enable": {
+      "allow": "Allow this website to:",
+      "block_added": "Added {{host}} to the blocklist, please reload the website.",
+      "request1": "Request approval for transactions",
+      "block_and_ignore": "Block and ignore {{host}}"
     }
   },
   "components": {

From ad07912fc9d6f5ae5a4c85735e56fd110f26559e Mon Sep 17 00:00:00 2001
From: Roland Bewick <roland.bewick@gmail.com>
Date: Mon, 18 Sep 2023 20:09:08 +0700
Subject: [PATCH 17/17] chore: make nostr enable text fit on one line

---
 src/i18n/locales/en/translation.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json
index 67c55260ce..44750cf601 100644
--- a/src/i18n/locales/en/translation.json
+++ b/src/i18n/locales/en/translation.json
@@ -539,8 +539,8 @@
     },
     "nostr_enable": {
       "title": "Connect to Nostr",
-      "request1": "Request approval to read your Nostr public key",
-      "request2": "sign events using your Nostr private key"
+      "request1": "Request to read your Nostr public key",
+      "request2": "Sign events using your Nostr private key"
     },
     "liquid_enable": {
       "title": "Connect to Liquid",