chore: revert last 3 commits

.eslintrc.json

@@ -0,0 +1,148 @@
+{
+  "root": true,
+  "parserOptions": {
+    "ecmaVersion": 2020,
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "sourceType": "module",
+    "allowImportExportEverywhere": false
+  },
+
+  "env": {
+    "es6": true,
+    "node": true
+  },
+
+  "plugins": [
+    "react",
+    "babel"
+  ],
+
+  "globals": {
+    "document": false,
+    "navigator": false,
+    "window": false,
+    "location": false,
+    "URL": false,
+    "URLSearchParams": false,
+    "fetch": false,
+    "EventSource": false,
+    "localStorage": false,
+    "sessionStorage": false
+  },
+
+  "rules": {
+    "react/jsx-uses-vars": 2,
+    "react/jsx-no-undef": 2,
+    "react/jsx-uses-react": 2,
+    "accessor-pairs": 2,
+    "arrow-spacing": [2, { "before": true, "after": true }],
+    "block-spacing": [2, "always"],
+    "brace-style": [2, "1tbs", { "allowSingleLine": true }],
+    "comma-dangle": 0,
+    "comma-spacing": [2, { "before": false, "after": true }],
+    "comma-style": [2, "last"],
+    "constructor-super": 2,
+    "curly": [0, "multi-line"],
+    "dot-location": [2, "property"],
+    "eol-last": 2,
+    "eqeqeq": [2, "allow-null"],
+    "generator-star-spacing": [2, { "before": true, "after": true }],
+    "handle-callback-err": [2, "^(err|error)$" ],
+    "indent": 0,
+    "jsx-quotes": [2, "prefer-double"],
+    "key-spacing": [2, { "beforeColon": false, "afterColon": true }],
+    "keyword-spacing": [2, { "before": true, "after": true }],
+    "new-cap": 0,
+    "new-parens": 0,
+    "no-array-constructor": 2,
+    "no-caller": 2,
+    "no-class-assign": 2,
+    "no-cond-assign": 2,
+    "no-const-assign": 2,
+    "no-control-regex": 0,
+    "no-debugger": 0,
+    "no-delete-var": 2,
+    "no-dupe-args": 2,
+    "no-dupe-class-members": 2,
+    "no-dupe-keys": 2,
+    "no-duplicate-case": 2,
+    "no-empty-character-class": 2,
+    "no-empty-pattern": 2,
+    "no-eval": 0,
+    "no-ex-assign": 2,
+    "no-extend-native": 2,
+    "no-extra-bind": 2,
+    "no-extra-boolean-cast": 2,
+    "no-extra-parens": [2, "functions"],
+    "no-fallthrough": 2,
+    "no-floating-decimal": 2,
+    "no-func-assign": 2,
+    "no-implied-eval": 2,
+    "no-inner-declarations": [0, "functions"],
+    "no-invalid-regexp": 2,
+    "no-irregular-whitespace": 2,
+    "no-iterator": 2,
+    "no-label-var": 2,
+    "no-labels": [2, { "allowLoop": false, "allowSwitch": false }],
+    "no-lone-blocks": 2,
+    "no-mixed-spaces-and-tabs": 2,
+    "no-multi-spaces": 2,
+    "no-multi-str": 2,
+    "no-multiple-empty-lines": [2, { "max": 2 }],
+    "no-native-reassign": 2,
+    "no-negated-in-lhs": 2,
+    "no-new": 0,
+    "no-new-func": 2,
+    "no-new-object": 2,
+    "no-new-require": 2,
+    "no-new-symbol": 2,
+    "no-new-wrappers": 2,
+    "no-obj-calls": 2,
+    "no-octal": 2,
+    "no-octal-escape": 2,
+    "no-path-concat": 0,
+    "no-proto": 2,
+    "no-redeclare": 2,
+    "no-regex-spaces": 2,
+    "no-return-assign": 0,
+    "no-self-assign": 2,
+    "no-self-compare": 2,
+    "no-sequences": 2,
+    "no-shadow-restricted-names": 2,
+    "no-spaced-func": 2,
+    "no-sparse-arrays": 2,
+    "no-this-before-super": 2,
+    "no-throw-literal": 2,
+    "no-trailing-spaces": 2,
+    "no-undef": 2,
+    "no-undef-init": 2,
+    "no-unexpected-multiline": 2,
+    "no-unneeded-ternary": [2, { "defaultAssignment": false }],
+    "no-unreachable": 2,
+    "no-unused-vars": [2, { "vars": "local", "args": "none", "varsIgnorePattern": "^_"}],
+    "no-useless-call": 2,
+    "no-useless-constructor": 2,
+    "no-with": 2,
+    "one-var": [0, { "initialized": "never" }],
+    "operator-linebreak": [2, "after", { "overrides": { "?": "before", ":": "before" } }],
+    "padded-blocks": [2, "never"],
+    "quotes": [2, "single", { "avoidEscape": true, "allowTemplateLiterals": true }],
+    "semi": [2, "never"],
+    "semi-spacing": [2, { "before": false, "after": true }],
+    "space-before-blocks": [2, "always"],
+    "space-before-function-paren": 0,
+    "space-in-parens": [2, "never"],
+    "space-infix-ops": 2,
+    "space-unary-ops": [2, { "words": true, "nonwords": false }],
+    "spaced-comment": 0,
+    "template-curly-spacing": [2, "never"],
+    "use-isnan": 2,
+    "valid-typeof": 2,
+    "wrap-iife": [2, "any"],
+    "yield-star-spacing": [2, "both"],
+    "yoda": 0,
+    "no-unsafe-optional-chaning": 0
+  }
+}

.prettierrc.yaml

@@ -0,0 +1,9 @@
+arrowParens: avoid
+bracketSpacing: false
+jsxBracketSameLine: false
+printWidth: 80
+proseWrap: preserve
+semi: false
+singleQuote: true
+trailingComma: none
+useTabs: false

biome.json

@@ -1,28 +0,0 @@
-{
-	"$schema": "https://biomejs.dev/schemas/1.4.1/schema.json",
-	"organizeImports": {
-		"enabled": true
-	},
-	"files": {
-		"ignore": []
-	},
-	"linter": {
-		"enabled": true,
-		"rules": {
-			"recommended": true,
-			"style": {
-				"noNonNullAssertion": "off",
-				"noUselessElse": "off"
-			},
-			"correctness": {
-				"useExhaustiveDependencies": "off"
-			},
-			"a11y": {
-				"noSvgWithoutTitle": "off"
-			},
-			"complexity": {
-				"noStaticOnlyClass": "off"
-			}
-		}
-	}
-}

build.js

@@ -1,25 +1,25 @@
 #!/usr/bin/env node
-import esbuild from "esbuild";
+const {copy} = require('esbuild-plugin-copy')
-import copy from "esbuild-copy-plugin";
+const esbuild = require('esbuild')
 
-const isProd = process.argv.indexOf("prod") !== -1;
+const isProd = process.argv.indexOf('prod') !== -1
-const isFirefox = process.argv.indexOf("firefox") !== -1;
+const isFirefox = process.argv.indexOf('firefox') !== -1
 
 esbuild
   .build({
     bundle: true,
     entryPoints: {
-			"popup.build": "./extension/popup.tsx",
+      'popup.build': './extension/popup.jsx',
-			"prompt.build": "./extension/prompt.tsx",
+      'prompt.build': './extension/prompt.jsx',
-			"options.build": "./extension/options.jsx",
+      'options.build': './extension/options.jsx',
-			"background.build": "./extension/background.js",
+      'background.build': './extension/background.js',
-			"content-script.build": "./extension/content-script.js",
+      'content-script.build': './extension/content-script.js'
     },
-		outdir: "./extension/output",
+    outdir: './extension/output',
-		sourcemap: isProd ? false : "inline",
+    sourcemap: isProd ? false : 'inline',
     define: {
-			window: "self",
+      window: 'self',
-			global: "self",
+      global: 'self'
     },
     plugins: [
       copy({
@@ -27,30 +27,30 @@ esbuild
           {
             from: [
               isFirefox
-								? "./extension/firefox/manifest.json"
+                ? './extension/firefox/manifest.json'
-								: "./extension/chrome/manifest.json",
+                : './extension/chrome/manifest.json'
             ],
-						to: ["./"],
+            to: ['./']
           },
           {
-						from: ["./extension/*.html"],
+            from: ['./extension/*.html'],
-						to: ["./"],
+            to: ['./']
           },
           {
-						from: ["./extension/common.js"],
+            from: ['./extension/common.js'],
-						to: ["./"],
+            to: ['./']
           },
           {
-						from: ["./extension/nostr-provider.js"],
+            from: ['./extension/nostr-provider.js'],
-						to: ["./"],
+            to: ['./']
           },
           {
-						from: ["./extension/icons/*"],
+            from: ['./extension/icons/*'],
-						to: ["./icons"],
+            to: ['./icons']
-					},
+          }
-				],
+        ]
-			}),
-		],
       })
-	.then(() => console.log("Build success."))
+    ]
-	.catch((err) => console.error("Build error.", err));
+  })
+  .then(() => console.log('Build success.'))
+  .catch(err => console.error('Build error.', err))

extension/background.js

@@ -1,227 +1,225 @@
-import { Mutex } from "async-mutex";
+import browser from 'webextension-polyfill'
 import {
+  validateEvent,
+  getSignature,
   getEventHash,
   getPublicKey,
-	getSignature,
+  nip19
-	nip19,
+} from 'nostr-tools'
-	validateEvent,
+import {nip04} from 'nostr-tools'
-} from "nostr-tools";
+import {Mutex} from 'async-mutex'
-import { nip04 } from "nostr-tools";
-import browser from "webextension-polyfill";
 
 import {
   NO_PERMISSIONS_REQUIRED,
   getPermissionStatus,
-	showNotification,
   updatePermission,
-} from "./common";
+  showNotification
+} from './common'
 
-const { encrypt, decrypt } = nip04;
+const {encrypt, decrypt} = nip04
 
-let openPrompt = null;
+let openPrompt = null
-const promptMutex = new Mutex();
+let promptMutex = new Mutex()
-let releasePromptMutex = () => {};
+let releasePromptMutex = () => {}
 
 browser.runtime.onInstalled.addListener((_, __, reason) => {
-	if (reason === "install") browser.runtime.openOptionsPage();
+  if (reason === 'install') browser.runtime.openOptionsPage()
-});
+})
 
 browser.runtime.onMessage.addListener(async (req, sender) => {
-	const { prompt } = req;
+  let {prompt} = req
 
   if (prompt) {
-		handlePromptMessage(req, sender);
+    handlePromptMessage(req, sender)
   } else {
-		return handleContentScriptMessage(req);
+    return handleContentScriptMessage(req)
   }
-});
+})
 
 browser.runtime.onMessageExternal.addListener(
   async ({type, params}, sender) => {
-		const extensionId = new URL(sender.url).host;
+    let extensionId = new URL(sender.url).host
-		return handleContentScriptMessage({ type, params, host: extensionId });
+    return handleContentScriptMessage({type, params, host: extensionId})
-	},
+  }
-);
+)
 
-browser.windows.onRemoved.addListener((windowId) => {
+browser.windows.onRemoved.addListener(windowId => {
   if (openPrompt) {
     // calling this with a simple "no" response will not store anything, so it's fine
     // it will just return a failure
-		handlePromptMessage({ accept: false }, null);
+    handlePromptMessage({accept: false}, null)
   }
-});
+})
 
 async function handleContentScriptMessage({type, params, host}) {
   if (NO_PERMISSIONS_REQUIRED[type]) {
     // authorized, and we won't do anything with private key here, so do a separate handler
     switch (type) {
-			case "replaceURL": {
+      case 'replaceURL': {
-				const { protocol_handler: ph } = await browser.storage.local.get([
+        let {protocol_handler: ph} = await browser.storage.local.get([
-					"protocol_handler",
+          'protocol_handler'
-				]);
+        ])
-				if (!ph) return false;
+        if (!ph) return false
 
-				const { url } = params;
+        let {url} = params
-				const raw = url.split("nostr:")[1];
+        let raw = url.split('nostr:')[1]
-				const { type, data } = nip19.decode(raw);
+        let {type, data} = nip19.decode(raw)
-				const replacements = {
+        let replacements = {
           raw,
           hrp: type,
           hex:
-						type === "npub" || type === "note"
+            type === 'npub' || type === 'note'
               ? data
-							: type === "nprofile"
+              : type === 'nprofile'
               ? data.pubkey
-								: type === "nevent"
+              : type === 'nevent'
               ? data.id
               : null,
-					p_or_e: { npub: "p", note: "e", nprofile: "p", nevent: "e" }[type],
+          p_or_e: {npub: 'p', note: 'e', nprofile: 'p', nevent: 'e'}[type],
-					u_or_n: { npub: "u", note: "n", nprofile: "u", nevent: "n" }[type],
+          u_or_n: {npub: 'u', note: 'n', nprofile: 'u', nevent: 'n'}[type],
-					relay0: type === "nprofile" ? data.relays[0] : null,
+          relay0: type === 'nprofile' ? data.relays[0] : null,
-					relay1: type === "nprofile" ? data.relays[1] : null,
+          relay1: type === 'nprofile' ? data.relays[1] : null,
-					relay2: type === "nprofile" ? data.relays[2] : null,
+          relay2: type === 'nprofile' ? data.relays[2] : null
-				};
+        }
-				let result = ph;
+        let result = ph
-				// biome-ignore lint/complexity/noForEach: TODO: fix this
         Object.entries(replacements).forEach(([pattern, value]) => {
-					result = result.replace(new RegExp(`{ *${pattern} *}`, "g"), value);
+          result = result.replace(new RegExp(`{ *${pattern} *}`, 'g'), value)
-				});
+        })
 
-				return result;
+        return result
       }
     }
 
-		return;
+    return
   } else {
     // acquire mutex here before reading policies
-		releasePromptMutex = await promptMutex.acquire();
+    releasePromptMutex = await promptMutex.acquire()
 
-		const allowed = await getPermissionStatus(
+    let allowed = await getPermissionStatus(
       host,
       type,
-			type === "signEvent" ? params.event : undefined,
+      type === 'signEvent' ? params.event : undefined
-		);
+    )
 
     if (allowed === true) {
       // authorized, proceed
-			releasePromptMutex();
+      releasePromptMutex()
-			showNotification(host, allowed, type, params);
+      showNotification(host, allowed, type, params)
     } else if (allowed === false) {
       // denied, just refuse immediately
-			releasePromptMutex();
+      releasePromptMutex()
-			showNotification(host, allowed, type, params);
+      showNotification(host, allowed, type, params)
       return {
-				error: "denied",
+        error: 'denied'
-			};
+      }
     } else {
       // ask for authorization
       try {
-				const id = Math.random().toString().slice(4);
+        let id = Math.random().toString().slice(4)
-				const qs = new URLSearchParams({
+        let qs = new URLSearchParams({
           host,
           id,
           params: JSON.stringify(params),
-					type,
+          type
-				});
+        })
 
         // prompt will be resolved with true or false
-				const accept = await new Promise((resolve, reject) => {
+        let accept = await new Promise((resolve, reject) => {
-					openPrompt = { resolve, reject };
+          openPrompt = {resolve, reject}
           const url = `${browser.runtime.getURL(
-						"prompt.html",
+            'prompt.html'
-					)}?${qs.toString()}`;
+          )}?${qs.toString()}`
 
           if (browser.windows) {
             browser.windows.create({
               url,
-							type: "popup",
+              type: 'popup',
               width: 600,
-							height: 600,
+              height: 600
-						});
+            })
           } else {
             browser.tabs.create({
               url,
-							active: true,
+              active: true
-						});
+            })
           }
-				});
+        })
 
         // denied, stop here
-				if (!accept) return { error: "denied" };
+        if (!accept) return {error: 'denied'}
       } catch (err) {
         // errored, stop here
-				releasePromptMutex();
+        releasePromptMutex()
         return {
-					error: `error: ${err}`,
+          error: `error: ${err}`
-				};
+        }
       }
     }
   }
 
   // if we're here this means it was accepted
-	const results = await browser.storage.local.get("private_key");
+  let results = await browser.storage.local.get('private_key')
   if (!results || !results.private_key) {
-		return { error: "no private key found" };
+    return {error: 'no private key found'}
   }
 
-	const sk = results.private_key;
+  let sk = results.private_key
 
   try {
     switch (type) {
-			case "getPublicKey": {
+      case 'getPublicKey': {
-				return getPublicKey(sk);
+        return getPublicKey(sk)
       }
-			case "getRelays": {
+      case 'getRelays': {
-				const results = await browser.storage.local.get("relays");
+        let results = await browser.storage.local.get('relays')
-				return results.relays || {};
+        return results.relays || {}
       }
-			case "signEvent": {
+      case 'signEvent': {
-				const { event } = params;
+        let {event} = params
 
-				if (!event.pubkey) event.pubkey = getPublicKey(sk);
+        if (!event.pubkey) event.pubkey = getPublicKey(sk)
-				if (!event.id) event.id = getEventHash(event);
+        if (!event.id) event.id = getEventHash(event)
-				if (!validateEvent(event))
+        if (!validateEvent(event)) return {error: {message: 'invalid event'}}
-					return { error: { message: "invalid event" } };
 
-				event.sig = await getSignature(event, sk);
+        event.sig = await getSignature(event, sk)
-				return event;
+        return event
       }
-			case "nip04.encrypt": {
+      case 'nip04.encrypt': {
-				const { peer, plaintext } = params;
+        let {peer, plaintext} = params
-				return encrypt(sk, peer, plaintext);
+        return encrypt(sk, peer, plaintext)
       }
-			case "nip04.decrypt": {
+      case 'nip04.decrypt': {
-				const { peer, ciphertext } = params;
+        let {peer, ciphertext} = params
-				return decrypt(sk, peer, ciphertext);
+        return decrypt(sk, peer, ciphertext)
       }
     }
   } catch (error) {
-		return { error: { message: error.message, stack: error.stack } };
+    return {error: {message: error.message, stack: error.stack}}
   }
 }
 
 async function handlePromptMessage({host, type, accept, conditions}, sender) {
   // return response
-	openPrompt?.resolve?.(accept);
+  openPrompt?.resolve?.(accept)
 
   // update policies
   if (conditions) {
-		await updatePermission(host, type, accept, conditions);
+    await updatePermission(host, type, accept, conditions)
   }
 
   // cleanup this
-	openPrompt = null;
+  openPrompt = null
 
   // release mutex here after updating policies
-	releasePromptMutex();
+  releasePromptMutex()
 
   // close prompt
   if (sender) {
     if (browser.windows) {
-			browser.windows.remove(sender.tab.windowId);
+      browser.windows.remove(sender.tab.windowId)
     } else {
       // Android Firefox
-			browser.tabs.remove(sender.tab.id);
+      browser.tabs.remove(sender.tab.id)
     }
   }
 }

extension/common.js

@@ -1,118 +1,116 @@
-import browser from "webextension-polyfill";
+import browser from 'webextension-polyfill'
 
 export const NO_PERMISSIONS_REQUIRED = {
-	replaceURL: true,
+  replaceURL: true
-};
+}
 
 export const PERMISSION_NAMES = Object.fromEntries([
-	["getPublicKey", "read your public key"],
+  ['getPublicKey', 'read your public key'],
-	["getRelays", "read your list of preferred relays"],
+  ['getRelays', 'read your list of preferred relays'],
-	["signEvent", "sign events using your private key"],
+  ['signEvent', 'sign events using your private key'],
-	["nip04.encrypt", "encrypt messages to peers"],
+  ['nip04.encrypt', 'encrypt messages to peers'],
-	["nip04.decrypt", "decrypt messages from peers"],
+  ['nip04.decrypt', 'decrypt messages from peers']
-]);
+])
 
 function matchConditions(conditions, event) {
   if (conditions?.kinds) {
-		if (event.kind in conditions.kinds) return true;
+    if (event.kind in conditions.kinds) return true
-		else return false;
+    else return false
   }
 
-	return true;
+  return true
 }
 
 export async function getPermissionStatus(host, type, event) {
-	const { policies } = await browser.storage.local.get("policies");
+  let {policies} = await browser.storage.local.get('policies')
 
-	const answers = [true, false];
+  let answers = [true, false]
   for (let i = 0; i < answers.length; i++) {
-		const accept = answers[i];
+    let accept = answers[i]
-		const { conditions } = policies?.[host]?.[accept]?.[type] || {};
+    let {conditions} = policies?.[host]?.[accept]?.[type] || {}
 
     if (conditions) {
-			if (type === "signEvent") {
+      if (type === 'signEvent') {
         if (matchConditions(conditions, event)) {
-					return accept; // may be true or false
+          return accept // may be true or false
         } else {
           // if this doesn't match we just continue so it will either match for the opposite answer (reject)
           // or it will end up returning undefined at the end
-					// biome-ignore lint/correctness/noUnnecessaryContinue: <explanation>
+          continue
-					continue;
         }
       } else {
-				return accept; // may be true or false
+        return accept // may be true or false
       }
     }
   }
 
-	return undefined;
+  return undefined
 }
 
 export async function updatePermission(host, type, accept, conditions) {
-	const { policies = {} } = await browser.storage.local.get("policies");
+  let {policies = {}} = await browser.storage.local.get('policies')
 
   // if the new conditions is "match everything", override the previous
   if (Object.keys(conditions).length === 0) {
-		conditions = {};
+    conditions = {}
   } else {
     // if we already had a policy for this, merge the conditions
-		const existingConditions = policies[host]?.[accept]?.[type]?.conditions;
+    let existingConditions = policies[host]?.[accept]?.[type]?.conditions
-
     if (existingConditions) {
       if (existingConditions.kinds && conditions.kinds) {
-				Object.keys(existingConditions.kinds).forEach((kind) => {
+        Object.keys(existingConditions.kinds).forEach(kind => {
-					conditions.kinds[kind] = true;
+          conditions.kinds[kind] = true
-				});
+        })
       }
     }
   }
 
   // if we have a reverse policy (accept / reject) that is exactly equal to this, remove it
-	const other = !accept;
+  let other = !accept
-	const reverse = policies?.[host]?.[other]?.[type];
+  let reverse = policies?.[host]?.[other]?.[type]
   if (
     reverse &&
     JSON.stringify(reverse.conditions) === JSON.stringify(conditions)
   ) {
-		delete policies[host][other][type];
+    delete policies[host][other][type]
   }
 
   // insert our new policy
-	policies[host] = policies[host] || {};
+  policies[host] = policies[host] || {}
-	policies[host][accept] = policies[host][accept] || {};
+  policies[host][accept] = policies[host][accept] || {}
   policies[host][accept][type] = {
     conditions, // filter that must match the event (in case of signEvent)
-		created_at: Math.round(Date.now() / 1000),
+    created_at: Math.round(Date.now() / 1000)
-	};
+  }
 
-	browser.storage.local.set({ policies });
+  browser.storage.local.set({policies})
 }
 
 export async function removePermissions(host, accept, type) {
-	const { policies = {} } = await browser.storage.local.get("policies");
+  let {policies = {}} = await browser.storage.local.get('policies')
-	delete policies[host]?.[accept]?.[type];
+  delete policies[host]?.[accept]?.[type]
-	browser.storage.local.set({ policies });
+  browser.storage.local.set({policies})
 }
 
 export async function showNotification(host, answer, type, params) {
-	const ok = await browser.storage.local.get("notifications");
+  let ok = await browser.storage.local.get('notifications')
   if (ok) {
-		const action = answer ? "allowed" : "denied";
+    let action = answer ? 'allowed' : 'denied'
     browser.notifications.create(undefined, {
-			type: "basic",
+      type: 'basic',
       title: `${type} ${action} for ${host}`,
       message: JSON.stringify(
         params?.event
           ? {
               kind: params.event.kind,
               content: params.event.content,
-							tags: params.event.tags,
+              tags: params.event.tags
             }
           : params,
         null,
-				2,
+        2
       ),
-			iconUrl: "icons/48x48.png",
+      iconUrl: 'icons/48x48.png'
-		});
+    })
   }
 }

extension/content-script.js

@@ -1,37 +1,36 @@
-import browser from "webextension-polyfill";
+import browser from 'webextension-polyfill'
 
-const EXTENSION = "nostrconnect";
+const EXTENSION = 'nostrconnect'
 
 // inject the script that will provide window.nostr
-const script = document.createElement("script");
+let script = document.createElement('script')
-script.setAttribute("async", "false");
+script.setAttribute('async', 'false')
-script.setAttribute("type", "text/javascript");
+script.setAttribute('type', 'text/javascript')
-script.setAttribute("src", browser.runtime.getURL("nostr-provider.js"));
+script.setAttribute('src', browser.runtime.getURL('nostr-provider.js'))
-document.head.appendChild(script);
+document.head.appendChild(script)
 
 // listen for messages from that script
-window.addEventListener("message", async (message) => {
+window.addEventListener('message', async message => {
-	if (message.source !== window) return;
+  if (message.source !== window) return
-	if (!message.data) return;
+  if (!message.data) return
-	if (!message.data.params) return;
+  if (!message.data.params) return
-	if (message.data.ext !== EXTENSION) return;
+  if (message.data.ext !== EXTENSION) return
 
   // pass on to background
-	let response;
+  var response
-
   try {
     response = await browser.runtime.sendMessage({
       type: message.data.type,
       params: message.data.params,
-			host: location.host,
+      host: location.host
-		});
+    })
   } catch (error) {
-		response = { error };
+    response = {error}
   }
 
   // return response
   window.postMessage(
     {id: message.data.id, ext: EXTENSION, response},
-		message.origin,
+    message.origin
-	);
+  )
-});
+})

extension/global.d.ts

@@ -1,7 +0,0 @@
-import type { WindowNostr } from "nostr-tools/nip07";
-
-declare global {
-	interface Window {
-		nostr?: WindowNostr;
-	}
-}

extension/icons.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react'
 
 export function LogoIcon() {
   return (
@@ -9,7 +9,7 @@ export function LogoIcon() {
       fill="none"
       viewBox="0 0 56 56"
     >
-			<rect width="56" height="56" fill="#EEECFD" rx="16" />
+      <rect width="56" height="56" fill="#EEECFD" rx="16"></rect>
       <rect
         width="55"
         height="55"
@@ -18,7 +18,7 @@ export function LogoIcon() {
         stroke="#5A41F4"
         strokeOpacity="0.25"
         rx="15.5"
-			/>
+      ></rect>
       <rect
         width="39"
         height="39"
@@ -26,10 +26,17 @@ export function LogoIcon() {
         y="8.5"
         fill="url(#paint0_linear_24_2379)"
         rx="19.5"
-			/>
+      ></rect>
-			<rect width="39" height="39" x="8.5" y="8.5" stroke="#6149F6" rx="19.5" />
+      <rect
+        width="39"
+        height="39"
+        x="8.5"
+        y="8.5"
+        stroke="#6149F6"
+        rx="19.5"
+      ></rect>
       <g fill="#fff" stroke="#6149F6" clipPath="url(#clip0_24_2379)">
-				<path d="M23.78 20.634l.408-.235-.21-.422a4.432 4.432 0 01-.458-1.797l-.031-.78-.696.355A11.533 11.533 0 0016.5 27.998h0V28c.002.87.103 1.738.302 2.585a3.525 3.525 0 102.843-1.058A8.377 8.377 0 0119.5 28a8.523 8.523 0 014.28-7.366zM36.5 28.023v.468l.467.03c.621.042 1.227.212 1.778.5l.687.36.044-.774.005-.075c.01-.166.02-.349.02-.532v-.001a11.524 11.524 0 00-8.142-10.99 3.526 3.526 0 10-.501 2.989A8.524 8.524 0 0136.5 28s0 0 0 0v.022zM33.185 32.622a3.49 3.49 0 00.311 1.844 8.442 8.442 0 01-9.766.877l-.407-.239-.262.392c-.343.514-.79.95-1.311 1.282l-.652.414.645.425a11.39 11.39 0 0014.092-1.23c.264.069.536.107.81.113h.01a3.5 3.5 0 002.803-5.6h.556l-1.603-.932a3.49 3.49 0 00-5.226 2.654z" />
+        <path d="M23.78 20.634l.408-.235-.21-.422a4.432 4.432 0 01-.458-1.797l-.031-.78-.696.355A11.533 11.533 0 0016.5 27.998h0V28c.002.87.103 1.738.302 2.585a3.525 3.525 0 102.843-1.058A8.377 8.377 0 0119.5 28a8.523 8.523 0 014.28-7.366zM36.5 28.023v.468l.467.03c.621.042 1.227.212 1.778.5l.687.36.044-.774.005-.075c.01-.166.02-.349.02-.532v-.001a11.524 11.524 0 00-8.142-10.99 3.526 3.526 0 10-.501 2.989A8.524 8.524 0 0136.5 28s0 0 0 0v.022zM33.185 32.622a3.49 3.49 0 00.311 1.844 8.442 8.442 0 01-9.766.877l-.407-.239-.262.392c-.343.514-.79.95-1.311 1.282l-.652.414.645.425a11.39 11.39 0 0014.092-1.23c.264.069.536.107.81.113h.01a3.5 3.5 0 002.803-5.6h.556l-1.603-.932a3.49 3.49 0 00-5.226 2.654z"></path>
       </g>
       <defs>
         <linearGradient
@@ -40,15 +47,19 @@ export function LogoIcon() {
           y2="48"
           gradientUnits="userSpaceOnUse"
         >
-					<stop stopColor="#8E7CFF" />
+          <stop stopColor="#8E7CFF"></stop>
-					<stop offset="1" stopColor="#5A41F4" />
+          <stop offset="1" stopColor="#5A41F4"></stop>
         </linearGradient>
         <clipPath id="clip0_24_2379">
-					<path fill="#fff" d="M0 0H24V24H0z" transform="translate(16 15)" />
+          <path
+            fill="#fff"
+            d="M0 0H24V24H0z"
+            transform="translate(16 15)"
+          ></path>
         </clipPath>
       </defs>
     </svg>
-	);
+  )
 }
 
 export function SettingsIcon(props) {
@@ -72,5 +83,5 @@ export function SettingsIcon(props) {
         d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
       />
     </svg>
-	);
+  )
 }

extension/nostr-provider.js

@@ -1,61 +1,66 @@
-const EXTENSION = "nostrconnect";
+const EXTENSION = 'nostrconnect'
 
 window.nostr = {
   _requests: {},
   _pubkey: null,
 
   async getPublicKey() {
-		if (this._pubkey) return this._pubkey;
+    if (this._pubkey) return this._pubkey
-		this._pubkey = await this._call("getPublicKey", {});
+    this._pubkey = await this._call('getPublicKey', {})
-		return this._pubkey;
+    return this._pubkey
   },
 
   async signEvent(event) {
-		return this._call("signEvent", { event });
+    return this._call('signEvent', {event})
   },
 
   async getRelays() {
-		return this._call("getRelays", {});
+    return this._call('getRelays', {})
   },
 
   nip04: {
     async encrypt(peer, plaintext) {
-			return window.nostr._call("nip04.encrypt", { peer, plaintext });
+      return window.nostr._call('nip04.encrypt', {peer, plaintext})
     },
 
     async decrypt(peer, ciphertext) {
-			return window.nostr._call("nip04.decrypt", { peer, ciphertext });
+      return window.nostr._call('nip04.decrypt', {peer, ciphertext})
-		},
+    }
   },
 
   _call(type, params) {
-		const id = Math.random().toString().slice(-4);
+    let id = Math.random().toString().slice(-4)
     console.log(
-			`%c[nostrconnect:%c${id}%c]%c calling %c${type}%c with %c${JSON.stringify(params || {})}`,
+      '%c[nostrconnect:%c' +
-			"background-color:#f1b912;font-weight:bold;color:white",
+        id +
-			"background-color:#f1b912;font-weight:bold;color:#a92727",
+        '%c]%c calling %c' +
-			"background-color:#f1b912;color:white;font-weight:bold",
+        type +
-			"color:auto",
+        '%c with %c' +
-			"font-weight:bold;color:#08589d;font-family:monospace",
+        JSON.stringify(params || {}),
-			"color:auto",
+      'background-color:#f1b912;font-weight:bold;color:white',
-			"font-weight:bold;color:#90b12d;font-family:monospace",
+      'background-color:#f1b912;font-weight:bold;color:#a92727',
-		);
+      'background-color:#f1b912;color:white;font-weight:bold',
+      'color:auto',
+      'font-weight:bold;color:#08589d;font-family:monospace',
+      'color:auto',
+      'font-weight:bold;color:#90b12d;font-family:monospace'
+    )
     return new Promise((resolve, reject) => {
-			this._requests[id] = { resolve, reject };
+      this._requests[id] = {resolve, reject}
       window.postMessage(
         {
           id,
           ext: EXTENSION,
           type,
-					params,
+          params
         },
-				"*",
+        '*'
-			);
+      )
-		});
+    })
-	},
+  }
-};
+}
 
-window.addEventListener("message", (message) => {
+window.addEventListener('message', message => {
   if (
     !message.data ||
     message.data.response === null ||
@@ -63,46 +68,47 @@ window.addEventListener("message", (message) => {
     message.data.ext !== EXTENSION ||
     !window.nostr._requests[message.data.id]
   )
-		return;
+    return
 
   if (message.data.response.error) {
-		const error = new Error(
+    let error = new Error(
-			`${EXTENSION}: ${message.data.response.error.message}`,
+      `${EXTENSION}: ` + message.data.response.error.message
-		);
+    )
-		error.stack = message.data.response.error.stack;
+    error.stack = message.data.response.error.stack
-		window.nostr._requests[message.data.id].reject(error);
+    window.nostr._requests[message.data.id].reject(error)
   } else {
-		window.nostr._requests[message.data.id].resolve(message.data.response);
+    window.nostr._requests[message.data.id].resolve(message.data.response)
   }
 
   console.log(
-		`%c[nostrconnect:%c${message.data.id}%c]%c result: %c${JSON.stringify(
+    '%c[nostrconnect:%c' +
-			message?.data?.response || message?.data?.response?.error?.message || {},
+      message.data.id +
-		)}`,
+      '%c]%c result: %c' +
-		"background-color:#f1b912;font-weight:bold;color:white",
+      JSON.stringify(
-		"background-color:#f1b912;font-weight:bold;color:#a92727",
+        message?.data?.response || message?.data?.response?.error?.message || {}
-		"background-color:#f1b912;color:white;font-weight:bold",
+      ),
-		"color:auto",
+    'background-color:#f1b912;font-weight:bold;color:white',
-		"font-weight:bold;color:#08589d",
+    'background-color:#f1b912;font-weight:bold;color:#a92727',
-	);
+    'background-color:#f1b912;color:white;font-weight:bold',
+    'color:auto',
+    'font-weight:bold;color:#08589d'
+  )
 
-	delete window.nostr._requests[message.data.id];
+  delete window.nostr._requests[message.data.id]
-});
+})
 
 // hack to replace nostr:nprofile.../etc links with something else
-let replacing = null;
+let replacing = null
-document.addEventListener("mousedown", replaceNostrSchemeLink);
+document.addEventListener('mousedown', replaceNostrSchemeLink)
 async function replaceNostrSchemeLink(e) {
-	if (e.target.tagName !== "A" || !e.target.href.startsWith("nostr:")) return;
+  if (e.target.tagName !== 'A' || !e.target.href.startsWith('nostr:')) return
-	if (replacing === false) return;
+  if (replacing === false) return
 
-	const response = await window.nostr._call("replaceURL", {
+  let response = await window.nostr._call('replaceURL', {url: e.target.href})
-		url: e.target.href,
-	});
   if (response === false) {
-		replacing = false;
+    replacing = false
-		return;
+    return
   }
 
-	e.target.href = response;
+  e.target.href = response
 }

extension/options.jsx

@@ -0,0 +1,676 @@
+import browser from 'webextension-polyfill'
+import React, {useState, useCallback, useEffect} from 'react'
+import {render} from 'react-dom'
+import {generatePrivateKey, nip19} from 'nostr-tools'
+import QRCode from 'react-qr-code'
+import * as Tabs from '@radix-ui/react-tabs'
+import {LogoIcon} from './icons'
+import {removePermissions} from './common'
+import * as Checkbox from '@radix-ui/react-checkbox'
+
+function Options() {
+  let [privKey, setPrivKey] = useState('')
+  let [relays, setRelays] = useState([])
+  let [newRelayURL, setNewRelayURL] = useState('')
+  let [policies, setPermissions] = useState([])
+  let [protocolHandler, setProtocolHandler] = useState('https://njump.me/{raw}')
+  let [hidingPrivateKey, hidePrivateKey] = useState(true)
+  let [showNotifications, setNotifications] = useState(false)
+  let [messages, setMessages] = useState([])
+  let [handleNostrLinks, setHandleNostrLinks] = useState(false)
+  let [showProtocolHandlerHelp, setShowProtocolHandlerHelp] = useState(false)
+  let [unsavedChanges, setUnsavedChanges] = useState([])
+
+  const showMessage = useCallback(msg => {
+    messages.push(msg)
+    setMessages(messages)
+    setTimeout(() => setMessages([]), 3000)
+  })
+
+  useEffect(() => {
+    browser.storage.local
+      .get(['private_key', 'relays', 'protocol_handler', 'notifications'])
+      .then(results => {
+        if (results.private_key) {
+          setPrivKey(nip19.nsecEncode(results.private_key))
+        }
+        if (results.relays) {
+          let relaysList = []
+          for (let url in results.relays) {
+            relaysList.push({
+              url,
+              policy: results.relays[url]
+            })
+          }
+          setRelays(relaysList)
+        }
+        if (results.protocol_handler) {
+          setProtocolHandler(results.protocol_handler)
+          setHandleNostrLinks(true)
+          setShowProtocolHandlerHelp(false)
+        }
+        if (results.notifications) {
+          setNotifications(true)
+        }
+      })
+  }, [])
+
+  useEffect(() => {
+    loadPermissions()
+  }, [])
+
+  async function loadPermissions() {
+    let {policies = {}} = await browser.storage.local.get('policies')
+    let list = []
+
+    Object.entries(policies).forEach(([host, accepts]) => {
+      Object.entries(accepts).forEach(([accept, types]) => {
+        Object.entries(types).forEach(([type, {conditions, created_at}]) => {
+          list.push({
+            host,
+            type,
+            accept,
+            conditions,
+            created_at
+          })
+        })
+      })
+    })
+
+    setPermissions(list)
+  }
+
+  return (
+    <div className="w-screen h-screen flex flex-col items-center justify-center">
+      <div className="p-8 shadow-primary border border-primary rounded-2xl max-w-xl mx-auto flex flex-col gap-4">
+        <div className="flex items-center gap-4">
+          <LogoIcon />
+          <div>
+            <h1 className="text-lg font-semibold">Nostr Connect</h1>
+            <p className="text-sm text-muted font-medium">Nostr signer</p>
+          </div>
+        </div>
+        <div className="flex flex-col">
+          <div className="mb-4 flex flex-col gap-2">
+            <div className="font-semibold text-base">Private key:</div>
+            <div>
+              <div className="flex gap-2">
+                <input
+                  type={hidingPrivateKey ? 'password' : 'text'}
+                  value={privKey}
+                  onChange={handleKeyChange}
+                  className="flex-1 h-9 bg-transparent border border-primary px-3 py-1 rounded-lg"
+                />
+                <div className="shrink-0">
+                  {!privKey && (
+                    <button
+                      type="button"
+                      onClick={generate}
+                      className="px-3 h-9 font-semibold border w-24 border-primary shadow-sm rounded-lg inline-flex items-center justify-center disabled:text-muted"
+                    >
+                      Generate
+                    </button>
+                  )}
+                  {privKey && hidingPrivateKey && (
+                    <button
+                      type="button"
+                      onClick={() => hidePrivateKey(false)}
+                      className="px-3 h-9 font-bold border w-24 border-primary shadow-sm rounded-lg inline-flex items-center justify-center disabled:text-muted"
+                    >
+                      Show key
+                    </button>
+                  )}
+                  {privKey && !hidingPrivateKey && (
+                    <button
+                      type="button"
+                      onClick={() => hidePrivateKey(true)}
+                      className="px-3 h-9 font-bold border w-24 border-primary shadow-sm rounded-lg inline-flex items-center justify-center disabled:text-muted"
+                    >
+                      Hide key
+                    </button>
+                  )}
+                </div>
+              </div>
+              <div className="mt-1 text-sm">
+                {privKey && !isKeyValid() ? (
+                  <p className="text-red-500">Private key is invalid!</p>
+                ) : (
+                  <p className="text-gray-500">
+                    Your key is stored locally. The developer has no way of
+                    seeing your keys.
+                  </p>
+                )}
+              </div>
+              {!hidingPrivateKey && isKeyValid() && (
+                <div className="mt-5 flex flex-col items-center">
+                  <QRCode
+                    size={256}
+                    value={privKey.toUpperCase()}
+                    viewBox={`0 0 256 256`}
+                    className="w-full max-w-full"
+                  />
+                </div>
+              )}
+            </div>
+          </div>
+          <Tabs.Root className="mb-4" defaultValue="relays">
+            <Tabs.List className="mb-4 w-full border-b border-primary h-11 flex items-center gap-6">
+              <Tabs.Trigger
+                className="font-medium flex items-center text-muted gap-2 h-11 data-[state=active]:text-primary data-[state=active]:border-b data-[state=active]:border-secondary"
+                value="relays"
+              >
+                Relays
+                <span className="px-3 h-6 inline-flex items-center justify-center bg-muted data-[state=active]:text-primary rounded-full">
+                  {relays.length}
+                </span>
+              </Tabs.Trigger>
+              <Tabs.Trigger
+                className="font-medium flex items-center text-muted gap-2 h-11 data-[state=active]:text-primary data-[state=active]:border-b data-[state=active]:border-secondary"
+                value="permissions"
+              >
+                Permissions
+                <span className="px-3 h-6 inline-flex items-center justify-center bg-muted data-[state=active]:text-primary rounded-full">
+                  {policies.length}
+                </span>
+              </Tabs.Trigger>
+            </Tabs.List>
+            <Tabs.Content value="relays">
+              <div className="flex flex-col gap-2">
+                <div className="font-semibold text-base">Preferred Relays:</div>
+                <div className="flex flex-col gap-2">
+                  {relays.map(({url, policy}, i) => (
+                    <div key={i} className="flex items-center gap-4">
+                      <input
+                        value={url}
+                        onChange={changeRelayURL.bind(null, i)}
+                        className="flex-1 h-9 bg-transparent border px-3 py-1 border-primary rounded-lg placeholder:text-muted"
+                      />
+                      <div className="flex items-center gap-2">
+                        <div className="inline-flex items-center gap-2">
+                          <Checkbox.Root
+                            id={`read-${i}`}
+                            checked={policy.read}
+                            onCheckedChange={toggleRelayPolicy.bind(
+                              null,
+                              i,
+                              'read'
+                            )}
+                            className="flex h-6 w-6 appearance-none items-center justify-center rounded-lg bg-white outline-none border border-primary data-[state=checked]:bg-primary data-[state=checked]:border-secondary"
+                          >
+                            <Checkbox.Indicator className="text-white">
+                              <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                fill="none"
+                                viewBox="0 0 24 24"
+                                strokeWidth={1.5}
+                                stroke="currentColor"
+                                className="w-4 h-4"
+                              >
+                                <path
+                                  strokeLinecap="round"
+                                  strokeLinejoin="round"
+                                  d="M4.5 12.75l6 6 9-13.5"
+                                />
+                              </svg>
+                            </Checkbox.Indicator>
+                          </Checkbox.Root>
+                          <label
+                            htmlFor={`read-${i}`}
+                            className="text-muted font-medium"
+                          >
+                            Read
+                          </label>
+                        </div>
+                        <div className="inline-flex items-center gap-2">
+                          <Checkbox.Root
+                            id={`write-${i}`}
+                            checked={policy.write}
+                            onCheckedChange={toggleRelayPolicy.bind(
+                              null,
+                              i,
+                              'write'
+                            )}
+                            className="flex h-6 w-6 appearance-none items-center justify-center rounded-lg bg-white outline-none border border-primary data-[state=checked]:bg-primary data-[state=checked]:border-secondary"
+                          >
+                            <Checkbox.Indicator className="text-white">
+                              <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                fill="none"
+                                viewBox="0 0 24 24"
+                                strokeWidth={1.5}
+                                stroke="currentColor"
+                                className="w-4 h-4"
+                              >
+                                <path
+                                  strokeLinecap="round"
+                                  strokeLinejoin="round"
+                                  d="M4.5 12.75l6 6 9-13.5"
+                                />
+                              </svg>
+                            </Checkbox.Indicator>
+                          </Checkbox.Root>
+                          <label
+                            htmlFor={`write-${i}`}
+                            className="text-muted font-medium"
+                          >
+                            Write
+                          </label>
+                        </div>
+                      </div>
+                      <button
+                        onClick={removeRelay.bind(null, i)}
+                        className="shrink-0 px-3 w-24 h-9 font-semibold border border-primary shadow-sm rounded-lg inline-flex items-center justify-center disabled:text-muted"
+                      >
+                        Remove
+                      </button>
+                    </div>
+                  ))}
+                  <div className="flex gap-2">
+                    <input
+                      value={newRelayURL}
+                      onChange={e => setNewRelayURL(e.target.value)}
+                      onKeyDown={e => {
+                        if (e.key === 'Enter') addNewRelay()
+                      }}
+                      placeholder="wss://"
+                      className="flex-1 h-9 bg-transparent border px-3 py-1 border-primary rounded-lg placeholder:text-muted"
+                    />
+                    <button
+                      disabled={!newRelayURL}
+                      onClick={addNewRelay}
+                      className="shrink-0 px-3 w-24 h-9 font-semibold border border-primary shadow-sm rounded-lg inline-flex items-center justify-center disabled:text-muted"
+                    >
+                      Add Relay
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </Tabs.Content>
+            <Tabs.Content value="permissions">
+              <div className="flex flex-col gap-2">
+                <div className="font-semibold text-base">Permissions:</div>
+                {!policies.length ? (
+                  <div className="text-muted">
+                    You haven't granted any permissions to any apps yet
+                  </div>
+                ) : (
+                  <table className="table-auto">
+                    <thead>
+                      <tr className="mb-2">
+                        <th className="text-left border-b-8 border-transparent">
+                          Domain
+                        </th>
+                        <th className="text-left border-b-8 border-transparent">
+                          Permission
+                        </th>
+                        <th className="text-left border-b-8 border-transparent">
+                          Answer
+                        </th>
+                        <th className="text-left border-b-8 border-transparent">
+                          Conditions
+                        </th>
+                        <th className="text-left border-b-8 border-transparent">
+                          Since
+                        </th>
+                        <th></th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {policies.map(
+                        ({host, type, accept, conditions, created_at}) => (
+                          <tr
+                            key={
+                              host + type + accept + JSON.stringify(conditions)
+                            }
+                          >
+                            <td className="font-semibold">{host}</td>
+                            <td className="text-muted">{type}</td>
+                            <td className="text-muted">
+                              {accept === 'true' ? 'allow' : 'deny'}
+                            </td>
+                            <td className="text-muted">
+                              {conditions.kinds
+                                ? `kinds: ${Object.keys(conditions.kinds).join(
+                                    ', '
+                                  )}`
+                                : 'always'}
+                            </td>
+                            <td className="text-muted">
+                              {new Date(created_at * 1000)
+                                .toISOString()
+                                .split('.')[0]
+                                .split('T')
+                                .join(' ')}
+                            </td>
+                            <td>
+                              <button
+                                onClick={handleRevoke}
+                                data-host={host}
+                                data-accept={accept}
+                                data-type={type}
+                                className="text-primary font-semibold"
+                              >
+                                Revoke
+                              </button>
+                            </td>
+                          </tr>
+                        )
+                      )}
+                      {!policies.length && (
+                        <tr>
+                          {Array(5)
+                            .fill('N/A')
+                            .map((v, i) => (
+                              <td key={i}>{v}</td>
+                            ))}
+                        </tr>
+                      )}
+                    </tbody>
+                  </table>
+                )}
+              </div>
+            </Tabs.Content>
+          </Tabs.Root>
+          <div className="mb-3">
+            <div className="flex items-center gap-2">
+              <Checkbox.Root
+                id="notification"
+                className="flex h-6 w-6 appearance-none items-center justify-center rounded-lg bg-white outline-none border border-primary data-[state=checked]:bg-primary data-[state=checked]:border-secondary"
+                checked={showNotifications}
+                onCheckedChange={handleNotifications}
+              >
+                <Checkbox.Indicator className="text-white">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    strokeWidth={1.5}
+                    stroke="currentColor"
+                    className="w-4 h-4"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      d="M4.5 12.75l6 6 9-13.5"
+                    />
+                  </svg>
+                </Checkbox.Indicator>
+              </Checkbox.Root>
+              <label htmlFor="notification">
+                Show desktop notifications when a permissions has been used
+              </label>
+            </div>
+          </div>
+          <div>
+            <details>
+              <summary className="flex items-center justify-between">
+                <div className="font-semibold text-base">Advanced</div>
+                <div>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    strokeWidth={1.5}
+                    stroke="currentColor"
+                    className="w-5 h-5"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      d="M19.5 8.25l-7.5 7.5-7.5-7.5"
+                    />
+                  </svg>
+                </div>
+              </summary>
+              <div className="mt-3">
+                <div className="flex items-center gap-2">
+                  <Checkbox.Root
+                    id="nostrlink"
+                    className="flex h-6 w-6 appearance-none items-center justify-center rounded-lg bg-white outline-none border border-primary data-[state=checked]:bg-primary data-[state=checked]:border-secondary"
+                    checked={handleNostrLinks}
+                    onCheckedChange={changeHandleNostrLinks}
+                  >
+                    <Checkbox.Indicator className="text-white">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        strokeWidth={1.5}
+                        stroke="currentColor"
+                        className="w-4 h-4"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          d="M4.5 12.75l6 6 9-13.5"
+                        />
+                      </svg>
+                    </Checkbox.Indicator>
+                  </Checkbox.Root>
+                  <label htmlFor="nostrlink">Handle nostr links</label>
+                </div>
+                {handleNostrLinks && (
+                  <div className="mt-3">
+                    <div className="flex">
+                      <input
+                        placeholder="url template"
+                        value={protocolHandler}
+                        onChange={handleChangeProtocolHandler}
+                      />
+                      {!showProtocolHandlerHelp && (
+                        <button onClick={changeShowProtocolHandlerHelp}>
+                          ?
+                        </button>
+                      )}
+                    </div>
+                    {showProtocolHandlerHelp && (
+                      <pre className="bg-muted px-2 rounded-xl overflow-scroll">{`
+{raw} = anything after the colon, i.e. the full nip19 bech32 string
+{hex} = hex pubkey for npub or nprofile, hex event id for note or nevent
+{p_or_e} = "p" for npub or nprofile, "e" for note or nevent
+{u_or_n} = "u" for npub or nprofile, "n" for note or nevent
+{relay0} = first relay in a nprofile or nevent
+{relay1} = second relay in a nprofile or nevent
+{relay2} = third relay in a nprofile or nevent
+{hrp} = human-readable prefix of the nip19 string
+
+examples:
+  - https://njump.me/{raw}
+  - https://snort.social/{raw}
+  - https://nostr.band/{raw}
+                `}</pre>
+                    )}
+                  </div>
+                )}
+              </div>
+            </details>
+          </div>
+        </div>
+        <button
+          disabled={!unsavedChanges.length}
+          onClick={saveChanges}
+          className="w-full h-10 bg-primary rounded-xl font-bold inline-flex items-center justify-center text-white disabled:cursor-not-allowed disabled:opacity-70 transform active:translate-y-1 transition-transform ease-in-out duration-75"
+        >
+          Save
+        </button>
+      </div>
+    </div>
+  )
+
+  async function handleKeyChange(e) {
+    let key = e.target.value.toLowerCase().trim()
+    setPrivKey(key)
+    addUnsavedChanges('private_key')
+  }
+
+  async function generate() {
+    setPrivKey(nip19.nsecEncode(generatePrivateKey()))
+    addUnsavedChanges('private_key')
+  }
+
+  async function saveKey() {
+    if (!isKeyValid()) {
+      showMessage('PRIVATE KEY IS INVALID! did not save private key.')
+      return
+    }
+
+    let hexOrEmptyKey = privKey
+
+    try {
+      let {type, data} = nip19.decode(privKey)
+      if (type === 'nsec') hexOrEmptyKey = data
+    } catch (_) {}
+
+    await browser.storage.local.set({
+      private_key: hexOrEmptyKey
+    })
+
+    if (hexOrEmptyKey !== '') {
+      setPrivKey(nip19.nsecEncode(hexOrEmptyKey))
+    }
+
+    showMessage('saved private key!')
+  }
+
+  function isKeyValid() {
+    if (privKey === '') return true
+    if (privKey.match(/^[a-f0-9]{64}$/)) return true
+    try {
+      if (nip19.decode(privKey).type === 'nsec') return true
+    } catch (_) {}
+    return false
+  }
+
+  function changeRelayURL(i, ev) {
+    setRelays([
+      ...relays.slice(0, i),
+      {url: ev.target.value, policy: relays[i].policy},
+      ...relays.slice(i + 1)
+    ])
+    addUnsavedChanges('relays')
+  }
+
+  function toggleRelayPolicy(i, cat) {
+    setRelays([
+      ...relays.slice(0, i),
+      {
+        url: relays[i].url,
+        policy: {...relays[i].policy, [cat]: !relays[i].policy[cat]}
+      },
+      ...relays.slice(i + 1)
+    ])
+    addUnsavedChanges('relays')
+  }
+
+  function removeRelay(i) {
+    setRelays([...relays.slice(0, i), ...relays.slice(i + 1)])
+    addUnsavedChanges('relays')
+  }
+
+  function addNewRelay() {
+    if (newRelayURL.trim() === '') return
+    if (!newRelayURL.startsWith('wss://')) return
+    relays.push({
+      url: newRelayURL,
+      policy: {read: true, write: true}
+    })
+    setRelays(relays)
+    addUnsavedChanges('relays')
+    setNewRelayURL('')
+  }
+
+  async function handleRevoke(e) {
+    let {host, accept, type} = e.target.dataset
+    if (
+      window.confirm(
+        `revoke all ${
+          accept === 'true' ? 'accept' : 'deny'
+        } ${type} policies from ${host}?`
+      )
+    ) {
+      await removePermissions(host, accept, type)
+      showMessage('removed policies')
+      loadPermissions()
+    }
+  }
+
+  function handleNotifications() {
+    setNotifications(!showNotifications)
+    addUnsavedChanges('notifications')
+    if (!showNotifications) requestBrowserNotificationPermissions()
+  }
+
+  async function requestBrowserNotificationPermissions() {
+    let granted = await browser.permissions.request({
+      permissions: ['notifications']
+    })
+    if (!granted) setNotifications(false)
+  }
+
+  async function saveNotifications() {
+    await browser.storage.local.set({notifications: showNotifications})
+    showMessage('saved notifications!')
+  }
+
+  async function saveRelays() {
+    await browser.storage.local.set({
+      relays: Object.fromEntries(
+        relays
+          .filter(({url}) => url.trim() !== '')
+          .map(({url, policy}) => [url.trim(), policy])
+      )
+    })
+    showMessage('saved relays!')
+  }
+
+  function changeShowProtocolHandlerHelp() {
+    setShowProtocolHandlerHelp(true)
+  }
+
+  function changeHandleNostrLinks() {
+    if (handleNostrLinks) {
+      setProtocolHandler('')
+      addUnsavedChanges('protocol_handler')
+    } else setShowProtocolHandlerHelp(true)
+    setHandleNostrLinks(!handleNostrLinks)
+  }
+
+  function handleChangeProtocolHandler(e) {
+    setProtocolHandler(e.target.value)
+    addUnsavedChanges('protocol_handler')
+  }
+
+  async function saveNostrProtocolHandlerSettings() {
+    await browser.storage.local.set({protocol_handler: protocolHandler})
+    showMessage('saved protocol handler!')
+  }
+
+  function addUnsavedChanges(section) {
+    if (!unsavedChanges.find(s => s === section)) {
+      unsavedChanges.push(section)
+      setUnsavedChanges(unsavedChanges)
+    }
+  }
+
+  async function saveChanges() {
+    for (let section of unsavedChanges) {
+      switch (section) {
+        case 'private_key':
+          await saveKey()
+          break
+        case 'relays':
+          await saveRelays()
+          break
+        case 'protocol_handler':
+          await saveNostrProtocolHandlerSettings()
+          break
+        case 'notifications':
+          await saveNotifications()
+          break
+      }
+    }
+    setUnsavedChanges([])
+  }
+}
+
+render(<Options />, document.getElementById('main'))

extension/options.tsx

@@ -1,691 +0,0 @@
-import * as Checkbox from "@radix-ui/react-checkbox";
-import * as Tabs from "@radix-ui/react-tabs";
-import { nip19, generateSecretKey } from "nostr-tools";
-import { useState, useCallback, useEffect } from "react";
-import QRCode from "react-qr-code";
-import browser from "webextension-polyfill";
-import { removePermissions } from "./common";
-import { LogoIcon } from "./icons";
-
-function Options() {
-	const [privKey, setPrivKey] = useState("");
-	const [relays, setRelays] = useState([]);
-	const [newRelayURL, setNewRelayURL] = useState("");
-	const [policies, setPermissions] = useState([]);
-	const [protocolHandler, setProtocolHandler] = useState(
-		"https://njump.me/{raw}",
-	);
-	const [hidingPrivateKey, hidePrivateKey] = useState(true);
-	const [showNotifications, setNotifications] = useState(false);
-	const [messages, setMessages] = useState<string[]>([]);
-	const [handleNostrLinks, setHandleNostrLinks] = useState(false);
-	const [showProtocolHandlerHelp, setShowProtocolHandlerHelp] = useState(false);
-	const [unsavedChanges, setUnsavedChanges] = useState([]);
-
-	const showMessage = useCallback((msg: string) => {
-		messages.push(msg);
-
-		setMessages(messages);
-		setTimeout(() => setMessages([]), 3000);
-	}, []);
-
-	useEffect(() => {
-		browser.storage.local
-			.get(["private_key", "relays", "protocol_handler", "notifications"])
-			.then((results) => {
-				if (results.private_key) {
-					setPrivKey(nip19.nsecEncode(results.private_key));
-				}
-				if (results.relays) {
-					const relaysList = [];
-					for (const url in results.relays) {
-						relaysList.push({
-							url,
-							policy: results.relays[url],
-						});
-					}
-					setRelays(relaysList);
-				}
-				if (results.protocol_handler) {
-					setProtocolHandler(results.protocol_handler);
-					setHandleNostrLinks(true);
-					setShowProtocolHandlerHelp(false);
-				}
-				if (results.notifications) {
-					setNotifications(true);
-				}
-			});
-	}, []);
-
-	useEffect(() => {
-		loadPermissions();
-	}, []);
-
-	async function loadPermissions() {
-		const { policies = {} } = await browser.storage.local.get("policies");
-		const list = [];
-
-		// biome-ignore lint/complexity/noForEach: TODO: fix this
-		Object.entries(policies).forEach(([host, accepts]) => {
-			// biome-ignore lint/complexity/noForEach: TODO: fix this
-			Object.entries(accepts).forEach(([accept, types]) => {
-				// biome-ignore lint/complexity/noForEach: TODO: fix this
-				Object.entries(types).forEach(([type, { conditions, created_at }]) => {
-					list.push({
-						host,
-						type,
-						accept,
-						conditions,
-						created_at,
-					});
-				});
-			});
-		});
-
-		setPermissions(list);
-	}
-
-	return (
-		<div className="w-screen h-screen flex flex-col items-center justify-center">
-			<div className="p-8 shadow-primary border border-primary rounded-2xl max-w-xl mx-auto flex flex-col gap-4">
-				<div className="flex items-center gap-4">
-					<LogoIcon />
-					<div>
-						<h1 className="text-lg font-semibold">Nostr Connect</h1>
-						<p className="text-sm text-muted font-medium">Nostr signer</p>
-					</div>
-				</div>
-				<div className="flex flex-col">
-					<div className="mb-4 flex flex-col gap-2">
-						<div className="font-semibold text-base">Private key:</div>
-						<div>
-							<div className="flex gap-2">
-								<input
-									type={hidingPrivateKey ? "password" : "text"}
-									value={privKey}
-									onChange={handleKeyChange}
-									className="flex-1 h-9 bg-transparent border border-primary px-3 py-1 rounded-lg"
-								/>
-								<div className="shrink-0">
-									{!privKey && (
-										<button
-											type="button"
-											onClick={generate}
-											className="px-3 h-9 font-semibold border w-24 border-primary shadow-sm rounded-lg inline-flex items-center justify-center disabled:text-muted"
-										>
-											Generate
-										</button>
-									)}
-									{privKey && hidingPrivateKey && (
-										<button
-											type="button"
-											onClick={() => hidePrivateKey(false)}
-											className="px-3 h-9 font-bold border w-24 border-primary shadow-sm rounded-lg inline-flex items-center justify-center disabled:text-muted"
-										>
-											Show key
-										</button>
-									)}
-									{privKey && !hidingPrivateKey && (
-										<button
-											type="button"
-											onClick={() => hidePrivateKey(true)}
-											className="px-3 h-9 font-bold border w-24 border-primary shadow-sm rounded-lg inline-flex items-center justify-center disabled:text-muted"
-										>
-											Hide key
-										</button>
-									)}
-								</div>
-							</div>
-							<div className="mt-1 text-sm">
-								{privKey && !isKeyValid() ? (
-									<p className="text-red-500">Private key is invalid!</p>
-								) : (
-									<p className="text-gray-500">
-										Your key is stored locally. The developer has no way of
-										seeing your keys.
-									</p>
-								)}
-							</div>
-							{!hidingPrivateKey && isKeyValid() && (
-								<div className="mt-5 flex flex-col items-center">
-									<QRCode
-										size={256}
-										value={privKey.toUpperCase()}
-										viewBox="0 0 256 256"
-										className="w-full max-w-full"
-									/>
-								</div>
-							)}
-						</div>
-					</div>
-					<Tabs.Root className="mb-4" defaultValue="relays">
-						<Tabs.List className="mb-4 w-full border-b border-primary h-11 flex items-center gap-6">
-							<Tabs.Trigger
-								className="font-medium flex items-center text-muted gap-2 h-11 data-[state=active]:text-primary data-[state=active]:border-b data-[state=active]:border-secondary"
-								value="relays"
-							>
-								Relays
-								<span className="px-3 h-6 inline-flex items-center justify-center bg-muted data-[state=active]:text-primary rounded-full">
-									{relays.length}
-								</span>
-							</Tabs.Trigger>
-							<Tabs.Trigger
-								className="font-medium flex items-center text-muted gap-2 h-11 data-[state=active]:text-primary data-[state=active]:border-b data-[state=active]:border-secondary"
-								value="permissions"
-							>
-								Permissions
-								<span className="px-3 h-6 inline-flex items-center justify-center bg-muted data-[state=active]:text-primary rounded-full">
-									{policies.length}
-								</span>
-							</Tabs.Trigger>
-						</Tabs.List>
-						<Tabs.Content value="relays">
-							<div className="flex flex-col gap-2">
-								<div className="font-semibold text-base">Preferred Relays:</div>
-								<div className="flex flex-col gap-2">
-									{relays.map(({ url, policy }, i) => (
-										<div key={url} className="flex items-center gap-4">
-											<input
-												value={url}
-												onChange={changeRelayURL.bind(null, i)}
-												className="flex-1 h-9 bg-transparent border px-3 py-1 border-primary rounded-lg placeholder:text-muted"
-											/>
-											<div className="flex items-center gap-2">
-												<div className="inline-flex items-center gap-2">
-													<Checkbox.Root
-														id={`read-${i}`}
-														checked={policy.read}
-														onCheckedChange={toggleRelayPolicy.bind(
-															null,
-															i,
-															"read",
-														)}
-														className="flex h-6 w-6 appearance-none items-center justify-center rounded-lg bg-white outline-none border border-primary data-[state=checked]:bg-primary data-[state=checked]:border-secondary"
-													>
-														<Checkbox.Indicator className="text-white">
-															<svg
-																xmlns="http://www.w3.org/2000/svg"
-																fill="none"
-																viewBox="0 0 24 24"
-																strokeWidth={1.5}
-																stroke="currentColor"
-																className="w-4 h-4"
-															>
-																<path
-																	strokeLinecap="round"
-																	strokeLinejoin="round"
-																	d="M4.5 12.75l6 6 9-13.5"
-																/>
-															</svg>
-														</Checkbox.Indicator>
-													</Checkbox.Root>
-													<label
-														htmlFor={`read-${i}`}
-														className="text-muted font-medium"
-													>
-														Read
-													</label>
-												</div>
-												<div className="inline-flex items-center gap-2">
-													<Checkbox.Root
-														id={`write-${i}`}
-														checked={policy.write}
-														onCheckedChange={toggleRelayPolicy.bind(
-															null,
-															i,
-															"write",
-														)}
-														className="flex h-6 w-6 appearance-none items-center justify-center rounded-lg bg-white outline-none border border-primary data-[state=checked]:bg-primary data-[state=checked]:border-secondary"
-													>
-														<Checkbox.Indicator className="text-white">
-															<svg
-																xmlns="http://www.w3.org/2000/svg"
-																fill="none"
-																viewBox="0 0 24 24"
-																strokeWidth={1.5}
-																stroke="currentColor"
-																className="w-4 h-4"
-															>
-																<path
-																	strokeLinecap="round"
-																	strokeLinejoin="round"
-																	d="M4.5 12.75l6 6 9-13.5"
-																/>
-															</svg>
-														</Checkbox.Indicator>
-													</Checkbox.Root>
-													<label
-														htmlFor={`write-${i}`}
-														className="text-muted font-medium"
-													>
-														Write
-													</label>
-												</div>
-											</div>
-											<button
-												type="button"
-												onClick={removeRelay.bind(null, i)}
-												className="shrink-0 px-3 w-24 h-9 font-semibold border border-primary shadow-sm rounded-lg inline-flex items-center justify-center disabled:text-muted"
-											>
-												Remove
-											</button>
-										</div>
-									))}
-									<div className="flex gap-2">
-										<input
-											value={newRelayURL}
-											onChange={(e) => setNewRelayURL(e.target.value)}
-											onKeyDown={(e) => {
-												if (e.key === "Enter") addNewRelay();
-											}}
-											placeholder="wss://"
-											className="flex-1 h-9 bg-transparent border px-3 py-1 border-primary rounded-lg placeholder:text-muted"
-										/>
-										<button
-											type="button"
-											disabled={!newRelayURL}
-											onClick={addNewRelay}
-											className="shrink-0 px-3 w-24 h-9 font-semibold border border-primary shadow-sm rounded-lg inline-flex items-center justify-center disabled:text-muted"
-										>
-											Add Relay
-										</button>
-									</div>
-								</div>
-							</div>
-						</Tabs.Content>
-						<Tabs.Content value="permissions">
-							<div className="flex flex-col gap-2">
-								<div className="font-semibold text-base">Permissions:</div>
-								{!policies.length ? (
-									<div className="text-muted">
-										You haven't granted any permissions to any apps yet
-									</div>
-								) : (
-									<table className="table-auto">
-										<thead>
-											<tr className="mb-2">
-												<th className="text-left border-b-8 border-transparent">
-													Domain
-												</th>
-												<th className="text-left border-b-8 border-transparent">
-													Permission
-												</th>
-												<th className="text-left border-b-8 border-transparent">
-													Answer
-												</th>
-												<th className="text-left border-b-8 border-transparent">
-													Conditions
-												</th>
-												<th className="text-left border-b-8 border-transparent">
-													Since
-												</th>
-												<th />
-											</tr>
-										</thead>
-										<tbody>
-											{policies.map(
-												({ host, type, accept, conditions, created_at }) => (
-													<tr
-														key={
-															host + type + accept + JSON.stringify(conditions)
-														}
-													>
-														<td className="font-semibold">{host}</td>
-														<td className="text-muted">{type}</td>
-														<td className="text-muted">
-															{accept === "true" ? "allow" : "deny"}
-														</td>
-														<td className="text-muted">
-															{conditions.kinds
-																? `kinds: ${Object.keys(conditions.kinds).join(
-																		", ",
-																	)}`
-																: "always"}
-														</td>
-														<td className="text-muted">
-															{new Date(created_at * 1000)
-																.toISOString()
-																.split(".")[0]
-																.split("T")
-																.join(" ")}
-														</td>
-														<td>
-															<button
-																type="button"
-																onClick={handleRevoke}
-																data-host={host}
-																data-accept={accept}
-																data-type={type}
-																className="text-primary font-semibold"
-															>
-																Revoke
-															</button>
-														</td>
-													</tr>
-												),
-											)}
-											{!policies.length && (
-												<tr>
-													{Array(5)
-														.fill("N/A")
-														.map((v) => (
-															<td key={v}>{v}</td>
-														))}
-												</tr>
-											)}
-										</tbody>
-									</table>
-								)}
-							</div>
-						</Tabs.Content>
-					</Tabs.Root>
-					<div className="mb-3">
-						<div className="flex items-center gap-2">
-							<Checkbox.Root
-								id="notification"
-								className="flex h-6 w-6 appearance-none items-center justify-center rounded-lg bg-white outline-none border border-primary data-[state=checked]:bg-primary data-[state=checked]:border-secondary"
-								checked={showNotifications}
-								onCheckedChange={handleNotifications}
-							>
-								<Checkbox.Indicator className="text-white">
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										fill="none"
-										viewBox="0 0 24 24"
-										strokeWidth={1.5}
-										stroke="currentColor"
-										className="w-4 h-4"
-									>
-										<path
-											strokeLinecap="round"
-											strokeLinejoin="round"
-											d="M4.5 12.75l6 6 9-13.5"
-										/>
-									</svg>
-								</Checkbox.Indicator>
-							</Checkbox.Root>
-							<label htmlFor="notification">
-								Show desktop notifications when a permissions has been used
-							</label>
-						</div>
-					</div>
-					<div>
-						<details>
-							<summary className="flex items-center justify-between">
-								<div className="font-semibold text-base">Advanced</div>
-								<div>
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										fill="none"
-										viewBox="0 0 24 24"
-										strokeWidth={1.5}
-										stroke="currentColor"
-										className="w-5 h-5"
-									>
-										<path
-											strokeLinecap="round"
-											strokeLinejoin="round"
-											d="M19.5 8.25l-7.5 7.5-7.5-7.5"
-										/>
-									</svg>
-								</div>
-							</summary>
-							<div className="mt-3">
-								<div className="flex items-center gap-2">
-									<Checkbox.Root
-										id="nostrlink"
-										className="flex h-6 w-6 appearance-none items-center justify-center rounded-lg bg-white outline-none border border-primary data-[state=checked]:bg-primary data-[state=checked]:border-secondary"
-										checked={handleNostrLinks}
-										onCheckedChange={changeHandleNostrLinks}
-									>
-										<Checkbox.Indicator className="text-white">
-											<svg
-												xmlns="http://www.w3.org/2000/svg"
-												fill="none"
-												viewBox="0 0 24 24"
-												strokeWidth={1.5}
-												stroke="currentColor"
-												className="w-4 h-4"
-											>
-												<path
-													strokeLinecap="round"
-													strokeLinejoin="round"
-													d="M4.5 12.75l6 6 9-13.5"
-												/>
-											</svg>
-										</Checkbox.Indicator>
-									</Checkbox.Root>
-									<label htmlFor="nostrlink">Handle nostr links</label>
-								</div>
-								{handleNostrLinks && (
-									<div className="mt-3">
-										<div className="flex">
-											<input
-												placeholder="url template"
-												value={protocolHandler}
-												onChange={handleChangeProtocolHandler}
-											/>
-											{!showProtocolHandlerHelp && (
-												<button
-													type="button"
-													onClick={changeShowProtocolHandlerHelp}
-												>
-													?
-												</button>
-											)}
-										</div>
-										{showProtocolHandlerHelp && (
-											<pre className="bg-muted px-2 rounded-xl overflow-scroll">{`
-{raw} = anything after the colon, i.e. the full nip19 bech32 string
-{hex} = hex pubkey for npub or nprofile, hex event id for note or nevent
-{p_or_e} = "p" for npub or nprofile, "e" for note or nevent
-{u_or_n} = "u" for npub or nprofile, "n" for note or nevent
-{relay0} = first relay in a nprofile or nevent
-{relay1} = second relay in a nprofile or nevent
-{relay2} = third relay in a nprofile or nevent
-{hrp} = human-readable prefix of the nip19 string
-
-examples:
-  - https://njump.me/{raw}
-  - https://snort.social/{raw}
-  - https://nostr.band/{raw}
-                `}</pre>
-										)}
-									</div>
-								)}
-							</div>
-						</details>
-					</div>
-				</div>
-				<button
-					type="button"
-					disabled={!unsavedChanges.length}
-					onClick={saveChanges}
-					className="w-full h-10 bg-primary rounded-xl font-bold inline-flex items-center justify-center text-white disabled:cursor-not-allowed disabled:opacity-70 transform active:translate-y-1 transition-transform ease-in-out duration-75"
-				>
-					Save
-				</button>
-			</div>
-		</div>
-	);
-
-	async function handleKeyChange(e) {
-		const key = e.target.value.toLowerCase().trim();
-		setPrivKey(key);
-		addUnsavedChanges("private_key");
-	}
-
-	async function generate() {
-		setPrivKey(nip19.nsecEncode(generateSecretKey()));
-		addUnsavedChanges("private_key");
-	}
-
-	async function saveKey() {
-		if (!isKeyValid()) {
-			showMessage("PRIVATE KEY IS INVALID! did not save private key.");
-			return;
-		}
-
-		let hexOrEmptyKey = privKey;
-
-		try {
-			const { type, data } = nip19.decode(privKey);
-			if (type === "nsec") hexOrEmptyKey = data;
-		} catch (_) {}
-
-		await browser.storage.local.set({
-			private_key: hexOrEmptyKey,
-		});
-
-		if (hexOrEmptyKey !== "") {
-			setPrivKey(nip19.nsecEncode(hexOrEmptyKey));
-		}
-
-		showMessage("saved private key!");
-	}
-
-	function isKeyValid() {
-		if (privKey === "") return true;
-		if (privKey.match(/^[a-f0-9]{64}$/)) return true;
-		try {
-			if (nip19.decode(privKey).type === "nsec") return true;
-		} catch (_) {}
-		return false;
-	}
-
-	function changeRelayURL(i, ev) {
-		setRelays([
-			...relays.slice(0, i),
-			{ url: ev.target.value, policy: relays[i].policy },
-			...relays.slice(i + 1),
-		]);
-		addUnsavedChanges("relays");
-	}
-
-	function toggleRelayPolicy(i, cat) {
-		setRelays([
-			...relays.slice(0, i),
-			{
-				url: relays[i].url,
-				policy: { ...relays[i].policy, [cat]: !relays[i].policy[cat] },
-			},
-			...relays.slice(i + 1),
-		]);
-		addUnsavedChanges("relays");
-	}
-
-	function removeRelay(i) {
-		setRelays([...relays.slice(0, i), ...relays.slice(i + 1)]);
-		addUnsavedChanges("relays");
-	}
-
-	function addNewRelay() {
-		if (newRelayURL.trim() === "") return;
-		if (!newRelayURL.startsWith("wss://")) return;
-		relays.push({
-			url: newRelayURL,
-			policy: { read: true, write: true },
-		});
-		setRelays(relays);
-		addUnsavedChanges("relays");
-		setNewRelayURL("");
-	}
-
-	async function handleRevoke(e) {
-		const { host, accept, type } = e.target.dataset;
-		if (
-			window.confirm(
-				`revoke all ${
-					accept === "true" ? "accept" : "deny"
-				} ${type} policies from ${host}?`,
-			)
-		) {
-			await removePermissions(host, accept, type);
-			showMessage("removed policies");
-			loadPermissions();
-		}
-	}
-
-	function handleNotifications() {
-		setNotifications(!showNotifications);
-		addUnsavedChanges("notifications");
-		if (!showNotifications) requestBrowserNotificationPermissions();
-	}
-
-	async function requestBrowserNotificationPermissions() {
-		const granted = await browser.permissions.request({
-			permissions: ["notifications"],
-		});
-		if (!granted) setNotifications(false);
-	}
-
-	async function saveNotifications() {
-		await browser.storage.local.set({ notifications: showNotifications });
-		showMessage("saved notifications!");
-	}
-
-	async function saveRelays() {
-		await browser.storage.local.set({
-			relays: Object.fromEntries(
-				relays
-					.filter(({ url }) => url.trim() !== "")
-					.map(({ url, policy }) => [url.trim(), policy]),
-			),
-		});
-		showMessage("saved relays!");
-	}
-
-	function changeShowProtocolHandlerHelp() {
-		setShowProtocolHandlerHelp(true);
-	}
-
-	function changeHandleNostrLinks() {
-		if (handleNostrLinks) {
-			setProtocolHandler("");
-			addUnsavedChanges("protocol_handler");
-		} else setShowProtocolHandlerHelp(true);
-		setHandleNostrLinks(!handleNostrLinks);
-	}
-
-	function handleChangeProtocolHandler(e) {
-		setProtocolHandler(e.target.value);
-		addUnsavedChanges("protocol_handler");
-	}
-
-	async function saveNostrProtocolHandlerSettings() {
-		await browser.storage.local.set({ protocol_handler: protocolHandler });
-		showMessage("saved protocol handler!");
-	}
-
-	function addUnsavedChanges(section) {
-		if (!unsavedChanges.find((s) => s === section)) {
-			unsavedChanges.push(section);
-			setUnsavedChanges(unsavedChanges);
-		}
-	}
-
-	async function saveChanges() {
-		for (const section of unsavedChanges) {
-			switch (section) {
-				case "private_key":
-					await saveKey();
-					break;
-				case "relays":
-					await saveRelays();
-					break;
-				case "protocol_handler":
-					await saveNostrProtocolHandlerSettings();
-					break;
-				case "notifications":
-					await saveNotifications();
-					break;
-			}
-		}
-		setUnsavedChanges([]);
-	}
-}
-
-const container = document.getElementById("main");
-const root = createRoot(container);
-
-root.render(<Options />);

extension/output/common.js

@@ -1,118 +1,116 @@
-import browser from "webextension-polyfill";
+import browser from 'webextension-polyfill'
 
 export const NO_PERMISSIONS_REQUIRED = {
-	replaceURL: true,
+  replaceURL: true
-};
+}
 
 export const PERMISSION_NAMES = Object.fromEntries([
-	["getPublicKey", "read your public key"],
+  ['getPublicKey', 'read your public key'],
-	["getRelays", "read your list of preferred relays"],
+  ['getRelays', 'read your list of preferred relays'],
-	["signEvent", "sign events using your private key"],
+  ['signEvent', 'sign events using your private key'],
-	["nip04.encrypt", "encrypt messages to peers"],
+  ['nip04.encrypt', 'encrypt messages to peers'],
-	["nip04.decrypt", "decrypt messages from peers"],
+  ['nip04.decrypt', 'decrypt messages from peers']
-]);
+])
 
 function matchConditions(conditions, event) {
   if (conditions?.kinds) {
-		if (event.kind in conditions.kinds) return true;
+    if (event.kind in conditions.kinds) return true
-		else return false;
+    else return false
   }
 
-	return true;
+  return true
 }
 
 export async function getPermissionStatus(host, type, event) {
-	const { policies } = await browser.storage.local.get("policies");
+  let {policies} = await browser.storage.local.get('policies')
 
-	const answers = [true, false];
+  let answers = [true, false]
   for (let i = 0; i < answers.length; i++) {
-		const accept = answers[i];
+    let accept = answers[i]
-		const { conditions } = policies?.[host]?.[accept]?.[type] || {};
+    let {conditions} = policies?.[host]?.[accept]?.[type] || {}
 
     if (conditions) {
-			if (type === "signEvent") {
+      if (type === 'signEvent') {
         if (matchConditions(conditions, event)) {
-					return accept; // may be true or false
+          return accept // may be true or false
         } else {
           // if this doesn't match we just continue so it will either match for the opposite answer (reject)
           // or it will end up returning undefined at the end
-					// biome-ignore lint/correctness/noUnnecessaryContinue: <explanation>
+          continue
-					continue;
         }
       } else {
-				return accept; // may be true or false
+        return accept // may be true or false
       }
     }
   }
 
-	return undefined;
+  return undefined
 }
 
 export async function updatePermission(host, type, accept, conditions) {
-	const { policies = {} } = await browser.storage.local.get("policies");
+  let {policies = {}} = await browser.storage.local.get('policies')
 
   // if the new conditions is "match everything", override the previous
   if (Object.keys(conditions).length === 0) {
-		conditions = {};
+    conditions = {}
   } else {
     // if we already had a policy for this, merge the conditions
-		const existingConditions = policies[host]?.[accept]?.[type]?.conditions;
+    let existingConditions = policies[host]?.[accept]?.[type]?.conditions
-
     if (existingConditions) {
       if (existingConditions.kinds && conditions.kinds) {
-				Object.keys(existingConditions.kinds).forEach((kind) => {
+        Object.keys(existingConditions.kinds).forEach(kind => {
-					conditions.kinds[kind] = true;
+          conditions.kinds[kind] = true
-				});
+        })
       }
     }
   }
 
   // if we have a reverse policy (accept / reject) that is exactly equal to this, remove it
-	const other = !accept;
+  let other = !accept
-	const reverse = policies?.[host]?.[other]?.[type];
+  let reverse = policies?.[host]?.[other]?.[type]
   if (
     reverse &&
     JSON.stringify(reverse.conditions) === JSON.stringify(conditions)
   ) {
-		delete policies[host][other][type];
+    delete policies[host][other][type]
   }
 
   // insert our new policy
-	policies[host] = policies[host] || {};
+  policies[host] = policies[host] || {}
-	policies[host][accept] = policies[host][accept] || {};
+  policies[host][accept] = policies[host][accept] || {}
   policies[host][accept][type] = {
     conditions, // filter that must match the event (in case of signEvent)
-		created_at: Math.round(Date.now() / 1000),
+    created_at: Math.round(Date.now() / 1000)
-	};
+  }
 
-	browser.storage.local.set({ policies });
+  browser.storage.local.set({policies})
 }
 
 export async function removePermissions(host, accept, type) {
-	const { policies = {} } = await browser.storage.local.get("policies");
+  let {policies = {}} = await browser.storage.local.get('policies')
-	delete policies[host]?.[accept]?.[type];
+  delete policies[host]?.[accept]?.[type]
-	browser.storage.local.set({ policies });
+  browser.storage.local.set({policies})
 }
 
 export async function showNotification(host, answer, type, params) {
-	const ok = await browser.storage.local.get("notifications");
+  let ok = await browser.storage.local.get('notifications')
   if (ok) {
-		const action = answer ? "allowed" : "denied";
+    let action = answer ? 'allowed' : 'denied'
     browser.notifications.create(undefined, {
-			type: "basic",
+      type: 'basic',
       title: `${type} ${action} for ${host}`,
       message: JSON.stringify(
         params?.event
           ? {
               kind: params.event.kind,
               content: params.event.content,
-							tags: params.event.tags,
+              tags: params.event.tags
             }
           : params,
         null,
-				2,
+        2
       ),
-			iconUrl: "icons/48x48.png",
+      iconUrl: 'icons/48x48.png'
-		});
+    })
   }
 }

extension/output/manifest.json

@@ -3,7 +3,12 @@
   "description": "Nostr Signer Extension",
   "version": "0.1.2",
   "homepage_url": "https://github.com/reyamir/nostr-connect",
-	"manifest_version": 3,
+  "manifest_version": 2,
+  "browser_specific_settings": {
+    "gecko": {
+      "id": "{e665d138-0e5b-4b7a-ab91-7af834eda7a2}"
+    }
+  },
   "icons": {
     "16": "icons/icon16.png",
     "32": "icons/icon32.png",
@@ -12,25 +17,19 @@
   },
   "options_page": "options.html",
   "background": {
-		"service_worker": "background.build.js"
+    "scripts": ["background.build.js"]
   },
-	"action": {
+  "browser_action": {
     "default_title": "Nostr Connect",
     "default_popup": "popup.html"
   },
   "content_scripts": [
     {
       "matches": ["<all_urls>"],
-			"js": ["content-script.build.js"],
+      "js": ["content-script.build.js"]
-			"all_frames": true
     }
   ],
   "permissions": ["storage"],
   "optional_permissions": ["notifications"],
-	"web_accessible_resources": [
+  "web_accessible_resources": ["nostr-provider.js"]
-		{
-			"resources": ["nostr-provider.js"],
-			"matches": ["https://*/*", "http://localhost:*/*"]
-		}
-	]
 }

extension/output/nostr-provider.js

@@ -1,61 +1,66 @@
-const EXTENSION = "nostrconnect";
+const EXTENSION = 'nostrconnect'
 
 window.nostr = {
   _requests: {},
   _pubkey: null,
 
   async getPublicKey() {
-		if (this._pubkey) return this._pubkey;
+    if (this._pubkey) return this._pubkey
-		this._pubkey = await this._call("getPublicKey", {});
+    this._pubkey = await this._call('getPublicKey', {})
-		return this._pubkey;
+    return this._pubkey
   },
 
   async signEvent(event) {
-		return this._call("signEvent", { event });
+    return this._call('signEvent', {event})
   },
 
   async getRelays() {
-		return this._call("getRelays", {});
+    return this._call('getRelays', {})
   },
 
   nip04: {
     async encrypt(peer, plaintext) {
-			return window.nostr._call("nip04.encrypt", { peer, plaintext });
+      return window.nostr._call('nip04.encrypt', {peer, plaintext})
     },
 
     async decrypt(peer, ciphertext) {
-			return window.nostr._call("nip04.decrypt", { peer, ciphertext });
+      return window.nostr._call('nip04.decrypt', {peer, ciphertext})
-		},
+    }
   },
 
   _call(type, params) {
-		const id = Math.random().toString().slice(-4);
+    let id = Math.random().toString().slice(-4)
     console.log(
-			`%c[nostrconnect:%c${id}%c]%c calling %c${type}%c with %c${JSON.stringify(params || {})}`,
+      '%c[nostrconnect:%c' +
-			"background-color:#f1b912;font-weight:bold;color:white",
+        id +
-			"background-color:#f1b912;font-weight:bold;color:#a92727",
+        '%c]%c calling %c' +
-			"background-color:#f1b912;color:white;font-weight:bold",
+        type +
-			"color:auto",
+        '%c with %c' +
-			"font-weight:bold;color:#08589d;font-family:monospace",
+        JSON.stringify(params || {}),
-			"color:auto",
+      'background-color:#f1b912;font-weight:bold;color:white',
-			"font-weight:bold;color:#90b12d;font-family:monospace",
+      'background-color:#f1b912;font-weight:bold;color:#a92727',
-		);
+      'background-color:#f1b912;color:white;font-weight:bold',
+      'color:auto',
+      'font-weight:bold;color:#08589d;font-family:monospace',
+      'color:auto',
+      'font-weight:bold;color:#90b12d;font-family:monospace'
+    )
     return new Promise((resolve, reject) => {
-			this._requests[id] = { resolve, reject };
+      this._requests[id] = {resolve, reject}
       window.postMessage(
         {
           id,
           ext: EXTENSION,
           type,
-					params,
+          params
         },
-				"*",
+        '*'
-			);
+      )
-		});
+    })
-	},
+  }
-};
+}
 
-window.addEventListener("message", (message) => {
+window.addEventListener('message', message => {
   if (
     !message.data ||
     message.data.response === null ||
@@ -63,46 +68,47 @@ window.addEventListener("message", (message) => {
     message.data.ext !== EXTENSION ||
     !window.nostr._requests[message.data.id]
   )
-		return;
+    return
 
   if (message.data.response.error) {
-		const error = new Error(
+    let error = new Error(
-			`${EXTENSION}: ${message.data.response.error.message}`,
+      `${EXTENSION}: ` + message.data.response.error.message
-		);
+    )
-		error.stack = message.data.response.error.stack;
+    error.stack = message.data.response.error.stack
-		window.nostr._requests[message.data.id].reject(error);
+    window.nostr._requests[message.data.id].reject(error)
   } else {
-		window.nostr._requests[message.data.id].resolve(message.data.response);
+    window.nostr._requests[message.data.id].resolve(message.data.response)
   }
 
   console.log(
-		`%c[nostrconnect:%c${message.data.id}%c]%c result: %c${JSON.stringify(
+    '%c[nostrconnect:%c' +
-			message?.data?.response || message?.data?.response?.error?.message || {},
+      message.data.id +
-		)}`,
+      '%c]%c result: %c' +
-		"background-color:#f1b912;font-weight:bold;color:white",
+      JSON.stringify(
-		"background-color:#f1b912;font-weight:bold;color:#a92727",
+        message?.data?.response || message?.data?.response?.error?.message || {}
-		"background-color:#f1b912;color:white;font-weight:bold",
+      ),
-		"color:auto",
+    'background-color:#f1b912;font-weight:bold;color:white',
-		"font-weight:bold;color:#08589d",
+    'background-color:#f1b912;font-weight:bold;color:#a92727',
-	);
+    'background-color:#f1b912;color:white;font-weight:bold',
+    'color:auto',
+    'font-weight:bold;color:#08589d'
+  )
 
-	delete window.nostr._requests[message.data.id];
+  delete window.nostr._requests[message.data.id]
-});
+})
 
 // hack to replace nostr:nprofile.../etc links with something else
-let replacing = null;
+let replacing = null
-document.addEventListener("mousedown", replaceNostrSchemeLink);
+document.addEventListener('mousedown', replaceNostrSchemeLink)
 async function replaceNostrSchemeLink(e) {
-	if (e.target.tagName !== "A" || !e.target.href.startsWith("nostr:")) return;
+  if (e.target.tagName !== 'A' || !e.target.href.startsWith('nostr:')) return
-	if (replacing === false) return;
+  if (replacing === false) return
 
-	const response = await window.nostr._call("replaceURL", {
+  let response = await window.nostr._call('replaceURL', {url: e.target.href})
-		url: e.target.href,
-	});
   if (response === false) {
-		replacing = false;
+    replacing = false
-		return;
+    return
   }
 
-	e.target.href = response;
+  e.target.href = response
 }

extension/popup.jsx

@@ -0,0 +1,182 @@
+import browser from 'webextension-polyfill'
+import {render} from 'react-dom'
+import {getPublicKey, nip19} from 'nostr-tools'
+import React, {useState, useMemo, useEffect} from 'react'
+import QRCode from 'react-qr-code'
+import {SettingsIcon} from './icons'
+import {minidenticon} from 'minidenticons'
+import * as Tabs from '@radix-ui/react-tabs'
+
+function Popup() {
+  let [keys, setKeys] = useState(null)
+  let avatarURI = useMemo(
+    () =>
+      keys
+        ? 'data:image/svg+xml;utf8,' +
+          encodeURIComponent(minidenticon(keys.npub, 90, 30))
+        : null,
+    [keys]
+  )
+
+  const gotoSettings = () => {
+    browser.tabs.create({
+      url: browser.runtime.getURL('/options.html')
+    })
+  }
+
+  useEffect(() => {
+    browser.storage.local.get(['private_key', 'relays']).then(results => {
+      if (results.private_key) {
+        let hexKey = getPublicKey(results.private_key)
+        let npubKey = nip19.npubEncode(hexKey)
+
+        setKeys({npub: npubKey, hex: hexKey})
+
+        if (results.relays) {
+          let relaysList = []
+          for (let url in results.relays) {
+            if (results.relays[url].write) {
+              relaysList.push(url)
+              if (relaysList.length >= 3) break
+            }
+          }
+          if (relaysList.length) {
+            let nprofileKey = nip19.nprofileEncode({
+              pubkey: hexKey,
+              relays: relaysList
+            })
+            setKeys(prev => ({...prev, nprofile: nprofileKey}))
+          }
+        }
+      } else {
+        setKeys(null)
+      }
+    })
+  }, [])
+
+  return (
+    <div className="w-[320px] p-6">
+      {!keys ? (
+        <div className="flex items-center justify-between gap-6">
+          <div className="flex-1 flex items-center justify-between">
+            <p className="text-sm font-medium">
+              Click here to enter or create
+              <br />
+              your first identity
+            </p>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              strokeWidth={1.5}
+              stroke="currentColor"
+              className="w-6 h-6"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"
+              />
+            </svg>
+          </div>
+          <button
+            type="button"
+            onClick={() => gotoSettings()}
+            className="w-9 h-9 shrink-0 border border-primary shadow-sm rounded-xl inline-flex items-center justify-center"
+          >
+            <SettingsIcon className="w-5 h-5 text-muted" />
+          </button>
+        </div>
+      ) : (
+        <div>
+          <div className="mb-2 flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              {avatarURI ? (
+                <img
+                  src={avatarURI}
+                  className="w-9 h-9 rounded-full bg-muted"
+                />
+              ) : (
+                <div className="w-9 h-9 rounded-full bg-muted" />
+              )}
+              <p className="font-semibold">Account</p>
+            </div>
+            <button
+              type="button"
+              onClick={() => gotoSettings()}
+              className="w-9 h-9 shrink-0 border border-primary shadow-sm rounded-xl inline-flex items-center justify-center"
+            >
+              <SettingsIcon className="w-5 h-5 text-muted" />
+            </button>
+          </div>
+          <div>
+            <Tabs.Root defaultValue="npub">
+              <Tabs.List className="w-full border-b border-primary h-10 flex items-center">
+                <Tabs.Trigger
+                  value="npub"
+                  className="font-medium flex-1 flex items-center justify-center text-muted h-10 data-[state=active]:text-primary data-[state=active]:border-b data-[state=active]:border-secondary"
+                >
+                  npub
+                </Tabs.Trigger>
+                <Tabs.Trigger
+                  value="hex"
+                  className="font-medium flex-1 flex items-center justify-center text-muted h-10 data-[state=active]:text-primary data-[state=active]:border-b data-[state=active]:border-secondary"
+                >
+                  hex
+                </Tabs.Trigger>
+                {keys.nprofile ? (
+                  <Tabs.Trigger
+                    value="nprofile"
+                    className="font-medium flex-1 flex items-center justify-center text-muted h-10 data-[state=active]:text-primary data-[state=active]:border-b data-[state=active]:border-secondary"
+                  >
+                    nprofile
+                  </Tabs.Trigger>
+                ) : null}
+              </Tabs.List>
+              <Tabs.Content value="npub">
+                <div className="my-4">
+                  <textarea
+                    value={keys.npub}
+                    readOnly
+                    className="w-full h-20 resize-none p-3 bg-muted rounded-xl"
+                  />
+                </div>
+                <div className="w-full rounded-xl border border-primary p-4 flex items-center justify-center">
+                  <QRCode size={128} value={keys.npub} />
+                </div>
+              </Tabs.Content>
+              <Tabs.Content value="hex">
+                <div className="my-4">
+                  <textarea
+                    value={keys.hex}
+                    readOnly
+                    className="w-full h-20 resize-none p-3 bg-muted rounded-xl"
+                  />
+                </div>
+                <div className="w-full rounded-xl border border-primary p-4 flex items-center justify-center">
+                  <QRCode size={128} value={keys.hex} />
+                </div>
+              </Tabs.Content>
+              {keys.nprofile ? (
+                <Tabs.Content value="nprofile">
+                  <div className="my-4">
+                    <textarea
+                      value={keys.nprofile}
+                      readOnly
+                      className="w-full h-20 resize-none p-3 bg-muted rounded-xl"
+                    />
+                  </div>
+                  <div className="w-full rounded-xl border border-primary p-4 flex items-center justify-center">
+                    <QRCode size={128} value={keys.nprofile} />
+                  </div>
+                </Tabs.Content>
+              ) : null}
+            </Tabs.Root>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+render(<Popup />, document.getElementById('main'))

extension/popup.tsx

@@ -1,204 +0,0 @@
-import * as Tabs from "@radix-ui/react-tabs";
-import { minidenticon } from "minidenticons";
-import { getPublicKey, nip19 } from "nostr-tools";
-import { useState, useMemo, useEffect } from "react";
-import QRCode from "react-qr-code";
-import browser from "webextension-polyfill";
-import { SettingsIcon } from "./icons";
-import { createRoot } from "react-dom/client";
-
-type Keys = {
-	npub: string;
-	hex: string;
-	nprofile: string;
-};
-
-function Popup() {
-	const [keys, setKeys] = useState<Keys | null>(null);
-
-	const avatarURI = useMemo(
-		() =>
-			keys
-				? `data:image/svg+xml;utf8,${encodeURIComponent(minidenticon(keys.npub, 90, 30))}`
-				: null,
-		[keys],
-	);
-
-	const gotoSettings = () => {
-		browser.tabs.create({
-			url: browser.runtime.getURL("/options.html"),
-		});
-	};
-
-	useEffect(() => {
-		browser.storage.local.get(["private_key", "relays"]).then((results) => {
-			if (results.private_key) {
-				const decoded = nip19.decode(results.private_key as unknown as string);
-
-				if (decoded.type === "nsec") {
-					const nsec = decoded.data;
-					const hexKey = getPublicKey(nsec);
-					const npubKey = nip19.npubEncode(hexKey);
-
-					setKeys({ npub: npubKey, hex: hexKey, nprofile: "" });
-
-					if (results.relays) {
-						const relaysList: string[] = [];
-
-						for (const url in results.relays) {
-							if (results.relays[url].write) {
-								relaysList.push(url);
-								if (relaysList.length >= 3) break;
-							}
-						}
-
-						if (relaysList.length) {
-							const nprofileKey = nip19.nprofileEncode({
-								pubkey: hexKey,
-								relays: relaysList,
-							});
-
-							setKeys((prev) =>
-								prev ? { ...prev, nprofile: nprofileKey } : null,
-							);
-						}
-					}
-				} else {
-					setKeys(null);
-				}
-			} else {
-				setKeys(null);
-			}
-		});
-	}, []);
-
-	return (
-		<div className="w-[320px] p-6">
-			{!keys ? (
-				<div className="flex items-center justify-between gap-6">
-					<div className="flex-1 flex items-center justify-between">
-						<p className="text-sm font-medium">
-							Click here to enter or create
-							<br />
-							your first identity
-						</p>
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							fill="none"
-							viewBox="0 0 24 24"
-							strokeWidth={1.5}
-							stroke="currentColor"
-							className="w-6 h-6"
-						>
-							<path
-								strokeLinecap="round"
-								strokeLinejoin="round"
-								d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"
-							/>
-						</svg>
-					</div>
-					<button
-						type="button"
-						onClick={() => gotoSettings()}
-						className="w-9 h-9 shrink-0 border border-primary shadow-sm rounded-xl inline-flex items-center justify-center"
-					>
-						<SettingsIcon className="w-5 h-5 text-muted" />
-					</button>
-				</div>
-			) : (
-				<div>
-					<div className="mb-2 flex items-center justify-between">
-						<div className="flex items-center gap-2">
-							{avatarURI ? (
-								<img
-									src={avatarURI}
-									alt="Avatar"
-									className="w-9 h-9 rounded-full bg-muted"
-								/>
-							) : (
-								<div className="w-9 h-9 rounded-full bg-muted" />
-							)}
-							<p className="font-semibold">Account</p>
-						</div>
-						<button
-							type="button"
-							onClick={() => gotoSettings()}
-							className="w-9 h-9 shrink-0 border border-primary shadow-sm rounded-xl inline-flex items-center justify-center"
-						>
-							<SettingsIcon className="w-5 h-5 text-muted" />
-						</button>
-					</div>
-					<div>
-						<Tabs.Root defaultValue="npub">
-							<Tabs.List className="w-full border-b border-primary h-10 flex items-center">
-								<Tabs.Trigger
-									value="npub"
-									className="font-medium flex-1 flex items-center justify-center text-muted h-10 data-[state=active]:text-primary data-[state=active]:border-b data-[state=active]:border-secondary"
-								>
-									npub
-								</Tabs.Trigger>
-								<Tabs.Trigger
-									value="hex"
-									className="font-medium flex-1 flex items-center justify-center text-muted h-10 data-[state=active]:text-primary data-[state=active]:border-b data-[state=active]:border-secondary"
-								>
-									hex
-								</Tabs.Trigger>
-								{keys.nprofile ? (
-									<Tabs.Trigger
-										value="nprofile"
-										className="font-medium flex-1 flex items-center justify-center text-muted h-10 data-[state=active]:text-primary data-[state=active]:border-b data-[state=active]:border-secondary"
-									>
-										nprofile
-									</Tabs.Trigger>
-								) : null}
-							</Tabs.List>
-							<Tabs.Content value="npub">
-								<div className="my-4">
-									<textarea
-										value={keys.npub}
-										readOnly
-										className="w-full h-20 resize-none p-3 bg-muted rounded-xl"
-									/>
-								</div>
-								<div className="w-full rounded-xl border border-primary p-4 flex items-center justify-center">
-									<QRCode size={128} value={keys.npub} />
-								</div>
-							</Tabs.Content>
-							<Tabs.Content value="hex">
-								<div className="my-4">
-									<textarea
-										value={keys.hex}
-										readOnly
-										className="w-full h-20 resize-none p-3 bg-muted rounded-xl"
-									/>
-								</div>
-								<div className="w-full rounded-xl border border-primary p-4 flex items-center justify-center">
-									<QRCode size={128} value={keys.hex} />
-								</div>
-							</Tabs.Content>
-							{keys.nprofile ? (
-								<Tabs.Content value="nprofile">
-									<div className="my-4">
-										<textarea
-											value={keys.nprofile}
-											readOnly
-											className="w-full h-20 resize-none p-3 bg-muted rounded-xl"
-										/>
-									</div>
-									<div className="w-full rounded-xl border border-primary p-4 flex items-center justify-center">
-										<QRCode size={128} value={keys.nprofile} />
-									</div>
-								</Tabs.Content>
-							) : null}
-						</Tabs.Root>
-					</div>
-				</div>
-			)}
-		</div>
-	);
-}
-
-const container = document.getElementById("main");
-const root = createRoot(container!);
-
-root.render(<Popup />);

extension/prompt.jsx

@@ -0,0 +1,165 @@
+import browser from 'webextension-polyfill'
+import {render} from 'react-dom'
+import React, {useState} from 'react'
+
+import {PERMISSION_NAMES} from './common'
+import {LogoIcon} from './icons'
+import * as Checkbox from '@radix-ui/react-checkbox'
+
+function Prompt() {
+  const [isRemember, setIsRemember] = useState(false)
+
+  let qs = new URLSearchParams(location.search)
+  let id = qs.get('id')
+  let host = qs.get('host')
+  let type = qs.get('type')
+  let params, event
+
+  try {
+    params = JSON.parse(qs.get('params'))
+    if (Object.keys(params).length === 0) params = null
+    else if (params.event) event = params.event
+  } catch (err) {
+    params = null
+  }
+
+  function authorizeHandler(accept) {
+    const conditions = isRemember ? {} : null
+    return function (ev) {
+      ev.preventDefault()
+      browser.runtime.sendMessage({
+        prompt: true,
+        id,
+        host,
+        type,
+        accept,
+        conditions
+      })
+    }
+  }
+
+  return (
+    <div className="w-screen h-screen flex flex-col items-center justify-center">
+      <div className="p-8 shadow-primary border border-primary rounded-2xl max-w-xl mx-auto flex flex-col gap-5">
+        <div className="flex flex-col items-center gap-5">
+          <LogoIcon />
+          <div className="flex flex-col items-center text-center">
+            <h1 className="font-semibold text-lg">{host}</h1>
+            <p>
+              is requesting your permission to <b>{PERMISSION_NAMES[type]}</b>
+            </p>
+          </div>
+        </div>
+        {params && (
+          <div className="flex flex-col gap-1">
+            <p>Now acting on</p>
+            <pre className="bg-muted px-2 rounded-xl overflow-scroll">
+              <code>{JSON.stringify(event || params, null, 2)}</code>
+            </pre>
+          </div>
+        )}
+        <div className="flex flex-col gap-4">
+          <div className="flex items-center justify-center gap-2">
+            <Checkbox.Root
+              id="remember"
+              className="flex h-6 w-6 appearance-none items-center justify-center rounded-lg bg-white outline-none border border-primary data-[state=checked]:bg-primary data-[state=checked]:border-secondary"
+              onCheckedChange={setIsRemember}
+            >
+              <Checkbox.Indicator className="text-white">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  strokeWidth={1.5}
+                  stroke="currentColor"
+                  className="w-4 h-4"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M4.5 12.75l6 6 9-13.5"
+                  />
+                </svg>
+              </Checkbox.Indicator>
+            </Checkbox.Root>
+            <label htmlFor="remember" className="text-muted">
+              Remember my preference forever
+            </label>
+          </div>
+          <div className="flex gap-3">
+            <button
+              onClick={authorizeHandler(false)}
+              className="flex-1 h-10 rounded-lg shadow-sm border border-primary inline-flex items-center justify-center font-semibold"
+            >
+              Reject
+            </button>
+            <button
+              onClick={authorizeHandler(true)}
+              className="flex-1 h-10 rounded-lg shadow-sm border border-secondary bg-primary text-white inline-flex items-center justify-center font-semibold"
+            >
+              Authorize
+            </button>
+          </div>
+        </div>
+        {/*
+        <div
+          style={{
+            display: 'flex',
+            flexWrap: 'wrap',
+            justifyContent: 'space-around'
+          }}
+        >
+          <button
+            style={{marginTop: '5px'}}
+            onClick={authorizeHandler(
+              true,
+              {} // store this and answer true forever
+            )}
+          >
+            authorize forever
+          </button>
+          {event?.kind !== undefined && (
+            <button
+              style={{marginTop: '5px'}}
+              onClick={authorizeHandler(
+                true,
+                {kinds: {[event.kind]: true}} // store and always answer true for all events that match this condition
+              )}
+            >
+              authorize kind {event.kind} forever
+            </button>
+          )}
+          <button style={{marginTop: '5px'}} onClick={authorizeHandler(true)}>
+            authorize just this
+          </button>
+          {event?.kind !== undefined ? (
+            <button
+              style={{marginTop: '5px'}}
+              onClick={authorizeHandler(
+                false,
+                {kinds: {[event.kind]: true}} // idem
+              )}
+            >
+              reject kind {event.kind} forever
+            </button>
+          ) : (
+            <button
+              style={{marginTop: '5px'}}
+              onClick={authorizeHandler(
+                false,
+                {} // idem
+              )}
+            >
+              reject forever
+            </button>
+          )}
+          <button style={{marginTop: '5px'}} onClick={authorizeHandler(false)}>
+            reject
+          </button>
+        </div>*/}
+      </div>
+    </div>
+  )
+}
+
+render(<Prompt />, document.getElementById('main'))

extension/prompt.tsx

@@ -1,123 +0,0 @@
-import { useState } from "react";
-import { createRoot } from "react-dom/client";
-import browser from "webextension-polyfill";
-import * as Checkbox from "@radix-ui/react-checkbox";
-import { PERMISSION_NAMES } from "./common";
-import { LogoIcon } from "./icons";
-
-function Prompt() {
-	const [isRemember, setIsRemember] = useState(false);
-
-	const qs = new URLSearchParams(location.search);
-	const id = qs.get("id");
-	const host = qs.get("host");
-	const type = qs.get("type");
-
-	let params: { [key: string]: string } | null;
-	let event = "";
-
-	try {
-		params = JSON.parse(qs.get("params") as string);
-
-		if (params) {
-			if (Object.keys(params).length === 0) {
-				params = null;
-			} else if (params.event) {
-				event = params.event;
-			}
-		}
-	} catch (err) {
-		params = null;
-	}
-
-	function authorizeHandler(accept: boolean) {
-		const conditions = isRemember ? {} : null;
-
-		return (ev: React.FormEvent<HTMLInputElement>) => {
-			ev.preventDefault();
-			browser.runtime.sendMessage({
-				prompt: true,
-				id,
-				host,
-				type,
-				accept,
-				conditions,
-			});
-		};
-	}
-
-	return (
-		<div className="w-screen h-screen flex flex-col items-center justify-center">
-			<div className="p-8 shadow-primary border border-primary rounded-2xl max-w-xl mx-auto flex flex-col gap-5">
-				<div className="flex flex-col items-center gap-5">
-					<LogoIcon />
-					<div className="flex flex-col items-center text-center">
-						<h1 className="font-semibold text-lg">{host}</h1>
-						<p>
-							is requesting your permission to{" "}
-							<b>{PERMISSION_NAMES[type ? type : "unknown"]}</b>
-						</p>
-					</div>
-				</div>
-				{params && (
-					<div className="flex flex-col gap-1">
-						<p>Now acting on</p>
-						<pre className="bg-muted px-2 rounded-xl overflow-scroll">
-							<code>{JSON.stringify(event || params, null, 2)}</code>
-						</pre>
-					</div>
-				)}
-				<div className="flex flex-col gap-4">
-					<div className="flex items-center justify-center gap-2">
-						<Checkbox.Root
-							id="remember"
-							className="flex h-6 w-6 appearance-none items-center justify-center rounded-lg bg-white outline-none border border-primary data-[state=checked]:bg-primary data-[state=checked]:border-secondary"
-							onCheckedChange={() => setIsRemember((prev) => !prev)}
-						>
-							<Checkbox.Indicator className="text-white">
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									fill="none"
-									viewBox="0 0 24 24"
-									strokeWidth={1.5}
-									stroke="currentColor"
-									className="w-4 h-4"
-								>
-									<path
-										strokeLinecap="round"
-										strokeLinejoin="round"
-										d="M4.5 12.75l6 6 9-13.5"
-									/>
-								</svg>
-							</Checkbox.Indicator>
-						</Checkbox.Root>
-						<label htmlFor="remember" className="text-muted">
-							Remember my preference forever
-						</label>
-					</div>
-					<div className="flex gap-3">
-						<button
-							type="button"
-							onClick={() => authorizeHandler(false)}
-							className="flex-1 h-10 rounded-lg shadow-sm border border-primary inline-flex items-center justify-center font-semibold"
-						>
-							Reject
-						</button>
-						<button
-							type="button"
-							onClick={() => authorizeHandler(true)}
-							className="flex-1 h-10 rounded-lg shadow-sm border border-secondary bg-primary text-white inline-flex items-center justify-center font-semibold"
-						>
-							Authorize
-						</button>
-					</div>
-				</div>
-			</div>
-		</div>
-	);
-}
-
-const container = document.getElementById("main");
-const root = createRoot(container!);
-
-root.render(<Prompt />);

extension/style.css

@@ -2,6 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-.data-\[state\=active\]\:text-primary[data-state="active"] > .bg-muted {
+.data-\[state\=active\]\:text-primary[data-state=active] > .bg-muted {
-	@apply bg-secondary;
+  @apply bg-secondary
 }

package.json

@@ -1,21 +1,24 @@
 {
   "license": "WTFPL",
   "dependencies": {
-		"@noble/hashes": "^1.6.1",
+    "@radix-ui/react-checkbox": "^1.0.4",
-		"@radix-ui/react-checkbox": "^1.1.3",
+    "@radix-ui/react-tabs": "^1.0.4",
-		"@radix-ui/react-tabs": "^1.1.2",
+    "async-mutex": "^0.3.2",
-		"async-mutex": "^0.5.0",
     "esbuild": "^0.14.54",
+    "eslint": "^8.54.0",
+    "eslint-plugin-babel": "^5.3.1",
+    "eslint-plugin-react": "^7.33.2",
     "events": "^3.3.0",
-		"minidenticons": "^4.2.1",
+    "minidenticons": "^4.2.0",
-		"nostr-tools": "^2.10.4",
+    "nostr-tools": "^1.17.0",
-		"react": "^19.0.0",
+    "prettier": "^2.8.8",
-		"react-dom": "^19.0.0",
+    "react": "^17.0.2",
-		"react-native-svg": "^13.14.1",
+    "react-dom": "^17.0.2",
-		"react-qr-code": "^2.0.15",
+    "react-native-svg": "^13.14.0",
+    "react-qr-code": "^2.0.12",
     "use-boolean-state": "^1.0.2",
     "use-debounce": "^7.0.1",
-		"webextension-polyfill": "^0.12.0"
+    "webextension-polyfill": "^0.8.0"
   },
   "scripts": {
     "dev": "./build.js; pnpm exec tailwindcss -i ./extension/style.css -o ./extension/build/style.css --watch",
@@ -24,12 +27,7 @@
     "package:firefox": "pnpm exec tailwindcss -i ./extension/style.css -o ./extension/output/style.css --minify; ./build.js prod firefox; cd extension/output; zip -r archive *; cd ../../; mv extension/output/archive.zip extension/releases/nostrconnect_firefox.xpi"
   },
   "devDependencies": {
-		"@biomejs/biome": "1.9.4",
-		"@types/react": "^19.0.2",
-		"@types/react-dom": "^19.0.2",
-		"@types/webextension-polyfill": "^0.12.1",
     "esbuild-plugin-copy": "^2.1.1",
-		"tailwindcss": "^3.4.17",
+    "tailwindcss": "^3.3.5"
-		"typescript": "^5.7.2"
   }
 }

tsconfig.json

@@ -1,24 +0,0 @@
-{
-	"compilerOptions": {
-		"target": "ESNext",
-		"useDefineForClassFields": true,
-		"lib": ["ESNext", "ES2020", "DOM", "DOM.Iterable"],
-		"module": "ESNext",
-		"skipLibCheck": true,
-		"moduleResolution": "bundler",
-		"allowImportingTsExtensions": true,
-		"resolveJsonModule": true,
-		"isolatedModules": true,
-		"noEmit": true,
-		"jsx": "react-jsx",
-		"strict": true,
-		"noUnusedLocals": true,
-		"noImplicitAny": false,
-		"noUnusedParameters": true,
-		"noFallthroughCasesInSwitch": true,
-		"paths": {
-			"*": ["./extension/*.d.ts"]
-		}
-	},
-	"include": ["extension"]
-}