feat: nostr signing improvements

src/app/components/ContentMessage/index.tsx

@@ -1,5 +1,5 @@
 type Props = {
-  heading: string;
+  heading: string | React.ReactNode;
   content: string;
 };
 

src/app/router/Prompt/Prompt.tsx

@@ -28,7 +28,8 @@ 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 NostrConfirmEncryptOrDecrypt from "~/app/screens/Nostr/ConfirmEncryptOrDecrypt";
+import NostrConfirmDecrypt from "~/app/screens/Nostr/ConfirmDecrypt";
+import NostrConfirmEncrypt from "~/app/screens/Nostr/ConfirmEncrypt";
 import type { NavigationState, OriginData } from "~/types";
 
 // Parse out the parameters from the querystring.
@@ -124,8 +125,12 @@ function Prompt() {
               element={<ConfirmSignPset />}
             />
             <Route
-              path="public/nostr/confirmEncryptOrDecrypt"
-              element={<NostrConfirmEncryptOrDecrypt />}
+              path="public/nostr/confirmEncrypt"
+              element={<NostrConfirmEncrypt />}
+            />
+            <Route
+              path="public/nostr/confirmDecrypt"
+              element={<NostrConfirmDecrypt />}
             />
             <Route
               path="public/nostr/confirmGetPublicKey"

src/app/screens/Nostr/ConfirmDecrypt.tsx

@@ -0,0 +1,112 @@
+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 { useState } from "react";
+import { useTranslation } from "react-i18next";
+import ScreenHeader from "~/app/components/ScreenHeader";
+import Checkbox from "~/app/components/form/Checkbox";
+import { useNavigationState } from "~/app/hooks/useNavigationState";
+import { USER_REJECTED_ERROR } from "~/common/constants";
+import msg from "~/common/lib/msg";
+import { OriginData } from "~/types";
+
+function NostrConfirmDecrypt() {
+  const { t } = useTranslation("translation", {
+    keyPrefix: "nostr",
+  });
+  const { t: tPermissions } = useTranslation("permissions");
+  const { t: tCommon } = useTranslation("common");
+  const navState = useNavigationState();
+  const origin = navState.origin as OriginData;
+
+  const [loading, setLoading] = useState(false);
+
+  const [rememberPermission, setRememberPermission] = useState(true);
+
+  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 msg.request("addBlocklist", {
+      domain: origin.domain,
+      host: origin.host,
+    });
+    alert(`Added ${origin.host} to the blocklist, please reload the website`);
+    msg.error(USER_REJECTED_ERROR);
+  }
+
+  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    confirm();
+  }
+
+  return (
+    <div className="h-full flex flex-col overflow-y-auto no-scrollbar">
+      <ScreenHeader title={t("title")} />
+      <form onSubmit={handleSubmit} className="h-full">
+        <Container justifyBetween maxWidth="sm">
+          <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" />
+              {tPermissions("nostr.nip04decrypt")}
+            </p>
+          </div>
+
+          <div className="text-center flex flex-col">
+            <div className="flex items-center mb-4">
+              <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"
+              >
+                {tCommon("actions.remember")}
+              </label>
+            </div>
+            <ConfirmOrCancel
+              disabled={loading}
+              loading={loading}
+              label={tCommon("actions.confirm")}
+              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: origin.host })}
+            </a>
+          </div>
+        </Container>
+      </form>
+    </div>
+  );
+}
+
+export default NostrConfirmDecrypt;

src/app/screens/Nostr/ConfirmEncryptOrDecrypt.tsx → src/app/screens/Nostr/ConfirmEncrypt.tsx

@@ -12,16 +12,16 @@ import { USER_REJECTED_ERROR } from "~/common/constants";
 import msg from "~/common/lib/msg";
 import { OriginData } from "~/types";
 
-function NostrConfirmEncryptOrDecrypt() {
+function NostrConfirmEncrypt() {
   const { t } = useTranslation("translation", {
     keyPrefix: "nostr",
   });
   const { t: tCommon } = useTranslation("common");
   const navState = useNavigationState();
   const origin = navState.origin as OriginData;
-  const action = navState.args?.encryptOrDecrypt?.action;
-  const peer = navState.args?.encryptOrDecrypt?.peer;
-  const message = navState.args?.encryptOrDecrypt?.message;
+
+  const peer = navState.args?.encrypt.peer;
+  const message = navState.args?.encrypt.message;
 
   const [loading, setLoading] = useState(false);
   const [showDetails, setShowDetails] = useState(false);
@@ -75,12 +75,9 @@ function NostrConfirmEncryptOrDecrypt() {
             />
             {message && (
               <ContentMessage
-                heading={t(
-                  action == "encrypt" ? "allow_encrypt" : "allow_decrypt",
-                  {
-                    host: origin.host,
-                  }
-                )}
+                heading={t("allow_encrypt", {
+                  host: origin.host,
+                })}
                 content={message}
               />
             )}
@@ -132,4 +129,4 @@ function NostrConfirmEncryptOrDecrypt() {
   );
 }
 
-export default NostrConfirmEncryptOrDecrypt;
+export default NostrConfirmEncrypt;

src/app/screens/Nostr/ConfirmSignMessage.tsx

@@ -5,7 +5,7 @@ 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 { Trans, useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import Hyperlink from "~/app/components/Hyperlink";
 import ScreenHeader from "~/app/components/ScreenHeader";
@@ -84,12 +84,22 @@ function ConfirmSignMessage() {
                 url={origin.host}
               />
               <ContentMessage
-                heading={t("allow_sign_event", {
-                  host: origin.host,
-                  kind: t(`kinds.${event.kind}`, {
-                    defaultValue: t("kinds.unknown", { kind: event.kind }),
-                  }),
-                })}
+                heading={
+                  <Trans
+                    i18nKey="allow_sign_event"
+                    t={t}
+                    values={{
+                      host: origin.host,
+                      kind: t(`kinds.${event.kind}`, {
+                        defaultValue: t("kinds.unknown", {
+                          kind: event.kind,
+                        }),
+                      }),
+                    }}
+                    // eslint-disable-next-line react/jsx-key
+                    components={[<i></i>]}
+                  />
+                }
                 content={event.content || ""}
               />
               <div className="flex justify-center mb-4 gap-4">

src/extension/background-script/actions/nostr/decryptOrPrompt.ts

@@ -32,14 +32,7 @@ const decryptOrPrompt = async (message: MessageDecryptGet, sender: Sender) => {
         rememberPermission: boolean;
       }>({
         ...message,
-        action: "public/nostr/confirmEncryptOrDecrypt",
-        args: {
-          encryptOrDecrypt: {
-            action: "decrypt",
-            peer: message.args.peer,
-            message: message.args.ciphertext,
-          },
-        },
+        action: "public/nostr/confirmDecrypt",
       });
 
       // add permission to db only if user decided to always allow this request

src/extension/background-script/actions/nostr/encryptOrPrompt.ts

@@ -30,10 +30,9 @@ const encryptOrPrompt = async (message: MessageEncryptGet, sender: Sender) => {
         rememberPermission: boolean;
       }>({
         ...message,
-        action: "public/nostr/confirmEncryptOrDecrypt",
+        action: "public/nostr/confirmEncrypt",
         args: {
-          encryptOrDecrypt: {
-            action: "encrypt",
+          encrypt: {
             peer: message.args.peer,
             message: message.args.plaintext,
           },

src/i18n/locales/en/translation.json

@@ -1,4 +1,4 @@
 {
   "translation": {
     "welcome": {
       "title": "Welcome to Alby",
@@ -941,9 +941,8 @@
       "allow": "Allow this website to:",
       "content": "This website asks you to sign:",
       "allow_sign": "Allow {{host}} to sign:",
-      "allow_sign_event": "Allow {{host}} to sign a {{kind}} event",
+      "allow_sign_event": "Allow {{host}} to sign a <0>{{kind}}</0> event",
       "allow_encrypt": "Allow {{host}} to encrypt the message:",
-      "allow_decrypt": "Allow {{host}} to decrypt the message:",
       "view_details": "View details",
       "hide_details": "Hide details",
       "block_and_ignore": "Block and ignore {{host}}",
@@ -1199,7 +1198,6 @@
     "nostr": {
       "getpublickey": "Read your public key",
       "signmessage": "Sign message with your key",
-      "nip04encrypt": "Encrypt data",
       "nip04decrypt": "Decrypt data"
     },
     "bitcoin": {

src/types.ts

@@ -170,8 +170,7 @@ export type NavigationState = {
     sigHash?: string;
 
     // nostr
-    encryptOrDecrypt?: {
-      action: "encrypt" | "decrypt";
+    encrypt: {
       peer: string;
       message: string;
     };