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/app/screens/Nostr/ConfirmSignMessage.tsx

@@ -90,7 +90,7 @@ function ConfirmSignMessage() {
                     defaultValue: t("kinds.unknown", { kind: event.kind }),
                   }),
                 })}
-                content={event.content || t("no_content")}
+                content={event.content || ""}
               />
               <div className="flex justify-center mb-4 gap-4">
                 <Hyperlink onClick={toggleShowJSON}>

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/de/translation.json

@@ -627,10 +627,8 @@
         "30008": "Profilabzeichen",
         "30009": "Badge Beschreibung",
         "30023": "Langform Inhalte",
-        "30078": "anwendungsspezifische Daten",
-        "unknown": "nostr Ereignis der Art {{kind}}"
-      },
-      "allow_sign_event": "Erlaube {{host}}, eine {{kind}} zu unterzeichnen:"
+        "30078": "anwendungsspezifische Daten"
+      }
     },
     "confirm_request_permission": {
       "title": "Antrag genehmigen",

src/i18n/locales/en/translation.json

@@ -1,4 +1,4 @@
 {
   "translation": {
     "welcome": {
       "title": "Welcome to Alby",
@@ -894,14 +894,16 @@
       "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}}",
+        "unknown": "kind {{kind}}",
         "0": "metadata",
         "1": "short text note",
         "2": "recommend relay",
@@ -1148,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/i18n/locales/es/translation.json

@@ -553,7 +553,6 @@
       "allow_sign": "Permitir que {{host}} firme:",
       "block_and_ignore": "Bloquear e ignorar {{host}}",
       "block_added": "Se agregó {{host}} a la lista de bloqueados, vuelva a cargar el sitio web.",
-      "allow_sign_event": "Permitir que {{host}} firme un {{kind}}:",
       "view_details": "Más información",
       "hide_details": "Ocultar los detalles",
       "no_content": "(Sin contenido)",
@@ -580,8 +579,7 @@
         "30008": "distintivos del perfil",
         "30009": "definición del distintivo",
         "30023": "contenidos largos",
-        "30078": "datos específicos de la aplicación",
-        "unknown": "nostr evento del tipo {{kind}}"
+        "30078": "datos específicos de la aplicación"
       }
     },
     "discover": {

src/i18n/locales/fa/translation.json

@@ -724,7 +724,6 @@
       "allow": "به این وبسایت اجازه دهید که:",
       "content": "این وبسایت از شما می خواهد که امضا کنید:",
       "allow_sign": "به {{host}} اجاره امضا بدهید:",
-      "allow_sign_event": "به {{host}} اجازه امضای {{kind}} را بده:",
       "view_details": "مشاهده جزییات",
       "hide_details": "پنهان کردن جزییات",
       "no_content": "(بدون محتوا)",
@@ -753,8 +752,7 @@
         "30008": "مدال های نمایه",
         "30009": "تعریف مدال",
         "30023": "محتوای طولانی",
-        "30078": "داده ویژه اپلیکیشن",
-        "unknown": "رویداد ناستر از نوع {{kind}}"
+        "30078": "داده ویژه اپلیکیشن"
       }
     },
     "transactions": {

src/i18n/locales/hi/translation.json

@@ -504,7 +504,6 @@
       "allow": "इस वेबसाइट को इसकी अनुमति दें:",
       "content": "यह वेबसाइट आपसे हस्ताक्षर करने के लिए कहती है:",
       "allow_sign": "{{host}} को हस्ताक्षर करने की अनुमति दें:",
-      "allow_sign_event": "{{host}} को {{kind}} पर हस्ताक्षर करने की अनुमति दें:",
       "view_details": "विवरण देखें",
       "hide_details": "विवरण छिपाएं",
       "no_content": "(कोई सामग्री नहीं)",
@@ -533,8 +532,7 @@
         "30008": "प्रोफ़ाइल बैज",
         "30009": "बैज परिभाषा",
         "30023": "लंबी सामग्री",
-        "30078": "एप्लिकेशन-विशिष्ट डेटा",
-        "unknown": "Nostr तरह की कोई घटना {{kind}}"
+        "30078": "एप्लिकेशन-विशिष्ट डेटा"
       }
     },
     "transactions": {

src/i18n/locales/mr/translation.json

@@ -582,7 +582,6 @@
       "allow": "या वेबसाइटला परवानगी द्या:",
       "content": "ही वेबसाइट तुम्हाला स्वाक्षरी करण्यास सांगते:",
       "allow_sign": "{{host}} ला स्वाक्षरी करण्याची परवानगी द्या:",
-      "allow_sign_event": "{{host}} ला {{kind}} वर स्वाक्षरी करण्याची परवानगी द्या:",
       "view_details": "तपशील पहा",
       "hide_details": "तपशील लपवा",
       "no_content": "(कोणतीही सामग्री नाही)",
@@ -611,8 +610,7 @@
         "30008": "profile बॅज",
         "30009": "बिल्ला व्याख्या",
         "30023": "दीर्घ स्वरूपाची सामग्री",
-        "30078": "अनुप्रयोग-विशिष्ट डेटा",
-        "unknown": "nostr event of kind {{kind}}"
+        "30078": "अनुप्रयोग-विशिष्ट डेटा"
       }
     },
     "transactions": {

src/i18n/locales/pl/translation.json

@@ -629,10 +629,8 @@
         "30008": "odznaki profile",
         "30009": "definicja odznaki",
         "30023": "treść długiego formatu",
-        "30078": "dane specyficzne dla aplikacji",
-        "unknown": "zdarzenia nostr typu {{kind}}"
+        "30078": "dane specyficzne dla aplikacji"
       },
-      "allow_sign_event": "Pozwól {{host}} na podpisywanie {{kind}}:",
       "view_details": "Pokaż szczegóły"
     },
     "transactions": {

src/i18n/locales/pt_BR/translation.json

@@ -661,7 +661,6 @@
       "block_added": "{{host}} adicionado na lista de bloqueio, por favor recarregue o site.",
       "allow_sign": "Permitir {{host}} assinar:",
       "view_details": "Ver detalhes",
-      "allow_sign_event": "Permitir {{host}} assinar {{kind}}:",
       "hide_details": "Ocultar detalhes",
       "kinds": {
         "0": "metadados",
@@ -670,8 +669,7 @@
         "4": "mensagens diretas criptografadas",
         "5": "exclusão de evento",
         "7": "reação",
-        "9735": "zap",
-        "unknown": "evento nostr do tipo {{kind}}"
+        "9735": "zap"
       },
       "no_content": "(Sem conteúdo)"
     },

src/i18n/locales/sv/translation.json

@@ -684,13 +684,11 @@
         "30008": "profil badges",
         "30009": "badge definition",
         "30023": "långformigt innehåll",
-        "30078": "applikationsspecifika data",
-        "unknown": "nostr event av sort {{kind}}"
+        "30078": "applikationsspecifika data"
       },
       "view_details": "Visa detaljer",
       "hide_details": "Göm detaljer",
       "block_added": "Lade till {{host}} till blockeringslistan, ladda om webbplatsen.",
-      "allow_sign_event": "Tillåt {{host}} att signera en {{kind}}:",
       "no_content": "(Inget innehåll)",
       "allow_sign": "Tillåt {{host}} att signera:",
       "content": "Den här webbplatsen ber dig att signera:"

src/i18n/locales/th/translation.json

@@ -425,8 +425,7 @@
         "30008": "โปรไฟล์เหรียญตรา",
         "30009": "คำจำกัดความของเหรียญตรา",
         "30023": "เนื้อหาแบบยาว",
-        "30078": "ข้อมูลเฉพาะแอปพลิเคชัน",
-        "unknown": "ประเภทของ nostr event {{kind}}"
+        "30078": "ข้อมูลเฉพาะแอปพลิเคชัน"
       },
       "title": "Nostr",
       "block_added": "เพื่ม {{host}} เข้าสู่แบล็คลิส โปรดรีเฟรชหน้าเว็บใหม่",
@@ -435,8 +434,7 @@
       "view_details": "ดูรายละเอียด",
       "hide_details": "ซ่อนรายละเอียด",
       "no_content": "(ไม่มีเนื้อหา)",
-      "allow_sign": "อนุญาตให้ {{host}} ลงนาม:",
-      "allow_sign_event": "อนุญาตให้ {{host}} ลงนามใน {{kind}}:"
+      "allow_sign": "อนุญาตให้ {{host}} ลงนาม:"
     },
     "choose_path": {
       "other": {

src/i18n/locales/zh_Hans/translation.json

@@ -600,7 +600,6 @@
       "content": "该网站要求你签署:",
       "allow_sign": "允许{{host}}签署：",
       "block_added": "已将{{host}}添加到屏蔽列表，请重新加载网站。",
-      "allow_sign_event": "允许 {{host}} 签署 {{kind}}：",
       "view_details": "查看详情",
       "hide_details": "隐藏详情",
       "no_content": "(无内容)",
@@ -627,8 +626,7 @@
         "30008": "个人资料徽章",
         "30009": "徽章定义",
         "30023": "长篇内容",
-        "30078": "应用程序特定数据",
-        "unknown": "nostr 事件类型 {{kind}}"
+        "30078": "应用程序特定数据"
       }
     },
     "lnurlpay": {