nostr permissions + nip04

src/app/router/Prompt/Prompt.tsx

@@ -9,13 +9,14 @@ import LNURLChannel from "@screens/LNURLChannel";
 import LNURLPay from "@screens/LNURLPay";
 import LNURLWithdraw from "@screens/LNURLWithdraw";
 import MakeInvoice from "@screens/MakeInvoice";
+import NostrConfirm from "@screens/Nostr/Confirm";
+import NostrConfirmGetPublicKey from "@screens/Nostr/ConfirmGetPublicKey";
+import NostrConfirmSignMessage from "@screens/Nostr/ConfirmSignMessage";
 import Unlock from "@screens/Unlock";
 import { HashRouter, Outlet, Route, Routes, Navigate } from "react-router-dom";
 import { ToastContainer } from "react-toastify";
 import Providers from "~/app/context/Providers";
 import RequireAuth from "~/app/router/RequireAuth";
-import NostrConfirmGetPublicKey from "~/app/screens/Nostr/ConfirmGetPublicKey";
-import NostrConfirmSignMessage from "~/app/screens/Nostr/ConfirmSignMessage";
 import type { NavigationState, OriginData } from "~/types";
 
 // Parse out the parameters from the querystring.
@@ -68,6 +69,11 @@ function Prompt() {
               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/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
+            />
+            <Route path="public/nostr/confirm" element={<NostrConfirm />} />
             <Route
               path="public/nostr/confirmGetPublicKey"
               element={<NostrConfirmGetPublicKey />}

src/app/screens/Nostr/Confirm.tsx

@@ -0,0 +1,113 @@
+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 Checkbox from "@components/form/Checkbox";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import ScreenHeader from "~/app/components/ScreenHeader";
+import { useNavigationState } from "~/app/hooks/useNavigationState";
+import { USER_REJECTED_ERROR } from "~/common/constants";
+import msg from "~/common/lib/msg";
+import utils from "~/common/lib/utils";
+import { OriginData } from "~/types";
+
+function NostrConfirm() {
+  const { t } = useTranslation("translation", {
+    keyPrefix: "nostr",
+  });
+  const { t: tCommon } = useTranslation("common");
+  const navState = useNavigationState();
+  const origin = navState.origin as OriginData;
+  const description = navState.args?.description;
+  const details = navState.args?.details;
+  const [loading, setLoading] = useState(false);
+  const [rememberPermission, setRememberPermission] = useState(false);
+
+  function confirm() {
+    setLoading(true);
+    msg.reply({
+      confirm: true,
+      rememberPermission,
+    });
+    setLoading(false);
+  }
+
+  function reject(event: React.MouseEvent<HTMLAnchorElement>) {
+    event.preventDefault();
+    msg.error(USER_REJECTED_ERROR);
+  }
+
+  async function block(event: React.MouseEvent<HTMLAnchorElement>) {
+    event.preventDefault();
+    await utils.call("addBlocklist", {
+      domain: origin.domain,
+      host: origin.host,
+    });
+    msg.error(USER_REJECTED_ERROR);
+  }
+
+  return (
+    <div className="h-full flex flex-col overflow-y-auto no-scrollbar">
+      <ScreenHeader title={t("title")} />
+      <Container justifyBetween maxWidth="sm">
+        <div>
+          <PublisherCard
+            title={origin.name}
+            image={origin.icon}
+            url={origin.host}
+            isSmall={false}
+          />
+          <div className="dark:text-white pt-6 mb-4">
+            <p className="mb-2">{t("allow", { host: origin.host })}</p>
+            <p className="dark:text-white">
+              <CheckIcon className="w-5 h-5 mr-2 inline" />
+              {description}
+              {details && (
+                <>
+                  <br />
+                  <i className="ml-7">{details}</i>
+                </>
+              )}
+            </p>
+          </div>
+
+          <div className="flex items-center">
+            <Checkbox
+              id="remember_permission"
+              name="remember_permission"
+              checked={rememberPermission}
+              onChange={(event) => {
+                setRememberPermission(event.target.checked);
+              }}
+            />
+            <label
+              htmlFor="remember_permission"
+              className="cursor-pointer ml-2 block text-sm text-gray-900 font-medium dark:text-white"
+            >
+              {t("confirm_sign_message.remember.label")}
+            </label>
+          </div>
+        </div>
+        <div className="mb-4 text-center flex flex-col">
+          <ConfirmOrCancel
+            disabled={loading}
+            loading={loading}
+            label={tCommon("actions.confirm")}
+            onConfirm={confirm}
+            onCancel={reject}
+          />
+          <a
+            className="underline text-sm text-gray-400 mx-4 overflow-hidden text-ellipsis whitespace-nowrap"
+            href="#"
+            onClick={block}
+          >
+            {t("block_and_ignore", { host: origin.host })}
+          </a>
+        </div>
+      </Container>
+    </div>
+  );
+}
+
+export default NostrConfirm;

src/app/screens/Nostr/ConfirmGetPublicKey.tsx

@@ -2,6 +2,8 @@ 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 Checkbox from "@components/form/Checkbox";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import ScreenHeader from "~/app/components/ScreenHeader";
 import { useNavigationState } from "~/app/hooks/useNavigationState";
@@ -17,11 +19,16 @@ function NostrConfirmGetPublicKey() {
   const { t: tCommon } = useTranslation("common");
   const navState = useNavigationState();
   const origin = navState.origin as OriginData;
+  const [loading, setLoading] = useState(false);
+  const [rememberPermission, setRememberPermission] = useState(false);
 
-  function enable() {
+  function confirm() {
+    setLoading(true);
     msg.reply({
       confirm: true,
+      rememberPermission,
     });
+    setLoading(false);
   }
 
   function reject(event: React.MouseEvent<HTMLAnchorElement>) {
@@ -49,19 +56,37 @@ function NostrConfirmGetPublicKey() {
             url={origin.host}
             isSmall={false}
           />
-
           <div className="dark:text-white pt-6 mb-4">
             <p className="mb-2">{t("allow", { host: origin.host })}</p>
             <div className="mb-2 flex items-center">
               <CheckIcon className="w-5 h-5 mr-2" />
               <p className="dark:text-white">{t("read_public_key")}</p>
             </div>
           </div>
+
+          <div className="flex items-center">
+            <Checkbox
+              id="remember_permission"
+              name="remember_permission"
+              checked={rememberPermission}
+              onChange={(event) => {
+                setRememberPermission(event.target.checked);
+              }}
+            />
+            <label
+              htmlFor="remember_permission"
+              className="cursor-pointer ml-2 block text-sm text-gray-900 font-medium dark:text-white"
+            >
+              {t("confirm_sign_message.remember.label")}
+            </label>
+          </div>
         </div>
         <div className="mb-4 text-center flex flex-col">
           <ConfirmOrCancel
-            label={tCommon("actions.connect")}
-            onConfirm={enable}
+            disabled={loading}
+            loading={loading}
+            label={tCommon("actions.confirm")}
+            onConfirm={confirm}
             onCancel={reject}
           />
           <a

src/app/screens/Nostr/ConfirmSignMessage.tsx

@@ -1,9 +1,9 @@
-//import Checkbox from "../../components/Form/Checkbox";
 import ConfirmOrCancel from "@components/ConfirmOrCancel";
 import Container from "@components/Container";
 import ContentMessage from "@components/ContentMessage";
 import PublisherCard from "@components/PublisherCard";
 import SuccessMessage from "@components/SuccessMessage";
+import Checkbox from "@components/form/Checkbox";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
@@ -19,21 +19,23 @@ function ConfirmSignMessage() {
   const navState = useNavigationState();
   const { t: tCommon } = useTranslation("common");
   const { t } = useTranslation("translation", {
-    keyPrefix: "confirm_sign_message",
+    keyPrefix: "nostr",
   });
   const navigate = useNavigate();
 
   const event = navState.args?.event as Event;
   const origin = navState.origin as OriginData;
   const [loading, setLoading] = useState(false);
   const [successMessage, setSuccessMessage] = useState("");
+  const [rememberPermission, setRememberPermission] = useState(false);
 
   // TODO: refactor: the success message and loading will not be displayed because after the reply the prompt is closed.
   async function confirm() {
     try {
       setLoading(true);
       msg.reply({
         confirm: true,
+        rememberPermission,
       });
       setSuccessMessage(tCommon("success"));
     } catch (e) {
@@ -73,6 +75,22 @@ function ConfirmSignMessage() {
               heading={t("content", { host: origin.host })}
               content={event.content}
             />
+            <div className="flex items-center">
+              <Checkbox
+                id="remember_permission"
+                name="remember_permission"
+                checked={rememberPermission}
+                onChange={(event) => {
+                  setRememberPermission(event.target.checked);
+                }}
+              />
+              <label
+                htmlFor="remember_permission"
+                className="cursor-pointer ml-2 block text-sm text-gray-900 font-medium dark:text-white"
+              >
+                {t("confirm_sign_message.remember.label")}
+              </label>
+            </div>
           </div>
           <ConfirmOrCancel
             disabled={loading}

src/extension/background-script/actions/allowances/__tests__/delete.test.ts

@@ -1,5 +1,6 @@
 import db from "~/extension/background-script/db";
 import type { DbAllowance, MessageAllowanceDelete } from "~/types";
+import { PermissionMethod } from "~/types";
 
 import deleteAllowance from "../delete";
 
@@ -38,7 +39,7 @@ const mockPermissions = [
     allowanceId: 1,
     createdAt: "1667291216372",
     host: "pro.kollider.xyz",
-    method: "listChannels",
+    method: PermissionMethod["NOSTR_SIGNMESSAGE"],
     blocked: false,
     enabled: true,
   },
@@ -47,7 +48,7 @@ const mockPermissions = [
     allowanceId: 2,
     createdAt: "1667291216372",
     host: "lnmarkets.com",
-    method: "getinfo",
+    method: PermissionMethod["NOSTR_SIGNMESSAGE"],
     blocked: false,
     enabled: true,
   },
@@ -56,7 +57,7 @@ const mockPermissions = [
     allowanceId: 2,
     createdAt: "1667291216372",
     host: "lnmarkets.com",
-    method: "some-method",
+    method: PermissionMethod["NOSTR_SIGNMESSAGE"],
     blocked: false,
     enabled: true,
   },

src/extension/background-script/actions/allowances/__tests__/enable.test.ts

@@ -59,7 +59,7 @@ describe("enable allowance", () => {
     const message: MessageAllowanceEnable = {
       application: "LBE",
       prompt: true,
-      action: "enableAllowance",
+      action: "public/webln/enable",
       origin: {
         location: "test",
         domain: "",
@@ -95,7 +95,7 @@ describe("enable allowance", () => {
     const message: MessageAllowanceEnable = {
       application: "LBE",
       prompt: true,
-      action: "enableAllowance",
+      action: "public/webln/enable",
       origin: {
         location: "test",
         domain: "",

src/extension/background-script/actions/allowances/enable.ts

@@ -27,9 +27,11 @@ const enable = async (
         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) {

src/extension/background-script/actions/ln/request.ts

@@ -1,5 +1,5 @@
 import utils from "~/common/lib/utils";
-import { MessageGenericRequest } from "~/types";
+import { MessageGenericRequest, PermissionMethod } from "~/types";
 
 import db from "../../db";
 import state from "../../state";
@@ -36,7 +36,7 @@ const request = async (
     }
 
     // prefix method with webln to prevent potential naming conflicts (e.g. with nostr calls that also use the permissions)
-    const weblnMethod = `${WEBLN_PREFIX}${method}`;
+    const weblnMethod = `${WEBLN_PREFIX}${method}` as PermissionMethod;
 
     const permission = await db.permissions
       .where("host")