feat: refactor nip-04 screens

src/app/router/Prompt/Prompt.tsx

@@ -11,7 +11,6 @@ import LNURLWithdraw from "@screens/LNURLWithdraw";
 import LiquidConfirmGetAddress from "@screens/Liquid/ConfirmGetAddress";
 import ConfirmSignPset from "@screens/Liquid/ConfirmSignPset";
 import MakeInvoice from "@screens/MakeInvoice";
-import NostrConfirm from "@screens/Nostr/Confirm";
 import NostrConfirmGetPublicKey from "@screens/Nostr/ConfirmGetPublicKey";
 import NostrConfirmSignMessage from "@screens/Nostr/ConfirmSignMessage";
 import NostrConfirmSignSchnorr from "@screens/Nostr/ConfirmSignSchnorr";
@@ -29,6 +28,7 @@ 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 type { NavigationState, OriginData } from "~/types";
 
 // Parse out the parameters from the querystring.
@@ -123,7 +123,10 @@ function Prompt() {
               path="public/liquid/confirmSignPset"
               element={<ConfirmSignPset />}
             />
-            <Route path="public/nostr/confirm" element={<NostrConfirm />} />
+            <Route
+              path="public/nostr/confirmEncryptOrDecrypt"
+              element={<NostrConfirmEncryptOrDecrypt />}
+            />
             <Route
               path="public/nostr/confirmGetPublicKey"
               element={<NostrConfirmGetPublicKey />}

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

@@ -1,26 +1,31 @@
-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 ContentMessage from "~/app/components/ContentMessage";
+import Hyperlink from "~/app/components/Hyperlink";
 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 NostrConfirm() {
+function NostrConfirmEncryptOrDecrypt() {
   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 action = navState.args?.encryptOrDecrypt?.action;
+  const peer = navState.args?.encryptOrDecrypt?.peer;
+  const message = navState.args?.encryptOrDecrypt?.message;
+
   const [loading, setLoading] = useState(false);
+  const [showDetails, setShowDetails] = useState(false);
+
   const [rememberPermission, setRememberPermission] = useState(true);
 
   function confirm() {
@@ -47,6 +52,10 @@ function NostrConfirm() {
     msg.error(USER_REJECTED_ERROR);
   }
 
+  function toggleShowDetails() {
+    setShowDetails((current) => !current);
+  }
+
   function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
     event.preventDefault();
     confirm();
@@ -62,21 +71,29 @@ function NostrConfirm() {
               title={origin.name}
               image={origin.icon}
               url={origin.host}
-              isSmall={false}
+              isSmall={true}
             />
-            <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>
-                  </>
+            {message && (
+              <ContentMessage
+                heading={t(
+                  action == "encrypt" ? "allow_encrypt" : "allow_decrypt",
+                  {
+                    host: origin.host,
+                  }
                 )}
-              </p>
+                content={message}
+              />
+            )}
+            <div className="flex justify-center mb-4 gap-4">
+              <Hyperlink onClick={toggleShowDetails}>
+                {showDetails ? t("hide_details") : t("view_details")}
+              </Hyperlink>
             </div>
+            {showDetails && (
+              <div className="whitespace-pre-wrap break-words p-2 mb-4 shadow bg-white rounded-lg dark:bg-surface-02dp text-gray-500 dark:text-gray-400">
+                {t("peer")}: {peer}
+              </div>
+            )}
           </div>
           <div className="text-center flex flex-col">
             <div className="flex items-center mb-4">
@@ -115,4 +132,4 @@ function NostrConfirm() {
   );
 }
 
-export default NostrConfirm;
+export default NostrConfirmEncryptOrDecrypt;

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

@@ -6,7 +6,6 @@ import {
   hasPermissionFor,
 } from "~/extension/background-script/permissions";
 import state from "~/extension/background-script/state";
-import i18n from "~/i18n/i18nConfig";
 import { MessageDecryptGet, PermissionMethodNostr, Sender } from "~/types";
 
 const decryptOrPrompt = async (message: MessageDecryptGet, sender: Sender) => {
@@ -33,9 +32,13 @@ const decryptOrPrompt = async (message: MessageDecryptGet, sender: Sender) => {
         rememberPermission: boolean;
       }>({
         ...message,
-        action: "public/nostr/confirm",
+        action: "public/nostr/confirmEncryptOrDecrypt",
         args: {
-          description: i18n.t("permissions:nostr.nip04decrypt"),
+          encryptOrDecrypt: {
+            action: "decrypt",
+            peer: message.args.peer,
+            message: message.args.ciphertext,
+          },
         },
       });
 

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

@@ -6,7 +6,6 @@ import {
   hasPermissionFor,
 } from "~/extension/background-script/permissions";
 import state from "~/extension/background-script/state";
-import i18n from "~/i18n/i18nConfig";
 import { MessageEncryptGet, PermissionMethodNostr, Sender } from "~/types";
 
 const encryptOrPrompt = async (message: MessageEncryptGet, sender: Sender) => {
@@ -24,17 +23,20 @@ const encryptOrPrompt = async (message: MessageEncryptGet, sender: Sender) => {
         message.args.peer,
         message.args.plaintext
       );
-
       return { data: response };
     } else {
       const promptResponse = await utils.openPrompt<{
         confirm: boolean;
         rememberPermission: boolean;
       }>({
         ...message,
-        action: "public/nostr/confirm",
+        action: "public/nostr/confirmEncryptOrDecrypt",
         args: {
-          description: i18n.t("permissions:nostr.nip04encrypt"),
+          encryptOrDecrypt: {
+            action: "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",
@@ -894,12 +894,15 @@
       "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}}:",
+      "allow_sign_event": "Allow {{host}} to sign a {{kind}} 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",
       "no_content": "(No content)",
       "block_and_ignore": "Block and ignore {{host}}",
       "block_added": "Added {{host}} to the blocklist, please reload the website.",
+      "peer": "Peer",
       "kinds": {
         "unknown": "nostr event of kind {{kind}}",
         "0": "metadata",
@@ -1147,9 +1150,9 @@
     },
     "nostr": {
       "getpublickey": "Read your public key",
+      "signmessage": "Sign message with your key",
       "nip04encrypt": "Encrypt data",
-      "nip04decrypt": "Decrypt data",
-      "signmessage": "Sign message with your key"
+      "nip04decrypt": "Decrypt data"
     },
     "bitcoin": {
       "getaddress": "Read your Bitcoin receive address"

src/types.ts

@@ -168,8 +168,14 @@ export type NavigationState = {
     message?: string;
     event?: Event;
     sigHash?: string;
-    description?: string;
-    details?: string;
+
+    // nostr
+    encryptOrDecrypt?: {
+      action: "encrypt" | "decrypt";
+      peer: string;
+      message: string;
+    };
+
     psbt?: string;
     requestPermission: {
       method: string;