buttons to save settings.

extension/manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "nos2x",
   "description": "Nostr Signer Extension",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "homepage_url": "https://github.com/fiatjaf/nos2x",
   "manifest_version": 3,
   "icons": {

extension/options.jsx

@@ -2,7 +2,6 @@ import browser from 'webextension-polyfill'
 import React, {useState, useCallback, useEffect} from 'react'
 import {render} from 'react-dom'
 import {normalizeRelayURL} from 'nostr-tools/relay'
-import {useDebouncedCallback} from 'use-debounce'
 
 import {getPermissionsString, readPermissions} from './common'
 
@@ -18,21 +17,6 @@ function Options() {
     setTimeout(setMessage, 3000)
   })
 
-  const saveRelays = useDebouncedCallback(async () => {
-    await browser.storage.local.set({
-      relays: Object.fromEntries(
-        relays
-          .filter(({url}) => url.trim() !== '')
-          .map(({url, policy}) => [url.trim(), policy])
-      )
-    })
-    showMessage('saved relays!')
-  }, 700)
-
-  useEffect(() => {
-    saveRelays()
-  }, [relays])
-
   useEffect(() => {
     browser.storage.local.get(['private_key', 'relays']).then(results => {
       if (results.private_key) setKey(results.private_key)
@@ -75,7 +59,7 @@ function Options() {
           {relays.map(({url, policy}, i) => (
             <div key={i} style={{display: 'flex'}}>
               <input
-                style={{marginRight: '10px'}}
+                style={{marginRight: '10px', width: '400px'}}
                 value={url}
                 onChange={changeRelayURL.bind(null, i)}
               />
@@ -99,17 +83,33 @@ function Options() {
           ))}
           <div style={{display: 'flex'}}>
             <input
+              style={{width: '400px'}}
               value={newRelayURL}
               onChange={e => setNewRelayURL(e.target.value)}
               onBlur={addNewRelay}
             />
           </div>
+          <div>
+            <button onClick={saveRelays}>save</button>
+          </div>
         </div>
       </div>
       <div>
         <label>
-          private key:&nbsp;
+          <div>private key:&nbsp;</div>
-          <input value={key} onChange={handleKeyChange} />
+          <div style={{marginLeft: '10px'}}>
+            <input
+              style={{width: '500px'}}
+              value={key}
+              onChange={handleKeyChange}
+            />
+            <button
+              disabled={!(key.match(/^[a-f0-9]{64}$/) || key === '')}
+              onClick={saveKey}
+            >
+              save
+            </button>
+          </div>
         </label>
         {permissions?.length > 0 && (
           <>
@@ -150,14 +150,14 @@ function Options() {
   async function handleKeyChange(e) {
     let key = e.target.value.toLowerCase().trim()
     setKey(key)
+  }
 
-    if (key.match(/^[a-f0-9]{64}$/) || key === '') {
+  async function saveKey() {
     await browser.storage.local.set({
       private_key: key
     })
     showMessage('saved private key!')
   }
-  }
 
   function changeRelayURL(i, ev) {
     setRelays([
@@ -186,6 +186,17 @@ function Options() {
     setRelays(relays)
     setNewRelayURL('')
   }
+
+  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!')
+  }
 }
 
 render(<Options />, document.getElementById('main'))