working v1.

extension/options.jsx

@@ -0,0 +1,91 @@
+import browser from 'webextension-polyfill'
+import React, {useState, useEffect} from 'react'
+import {render} from 'react-dom'
+
+import {getPermissionsString, readPermissions} from './common'
+
+function Options() {
+  let [key, setKey] = useState('')
+  let [permissions, setPermissions] = useState()
+  let [message, setMessage] = useState('')
+
+  useEffect(() => {
+    browser.storage.local.get(['private_key']).then(results => {
+      if (results.private_key) setKey(results.private_key)
+    })
+  }, [])
+
+  useEffect(() => {
+    readPermissions().then(permissions => {
+      setPermissions(
+        Object.entries(permissions).map(
+          ([host, {level, condition, created_at}]) => ({
+            host,
+            level,
+            condition,
+            created_at
+          })
+        )
+      )
+    })
+  }, [])
+
+  return (
+    <>
+      <h1>nos2x</h1>
+      <p>nostr signer extension</p>
+      <h2>options</h2>
+      <label>
+        private key:&nbsp;
+        <input value={key} onChange={handleKeyChange} />
+      </label>
+      {permissions?.length > 0 && (
+        <>
+          <h2>permissions</h2>
+          <table>
+            <thead>
+              <tr>
+                <th>domain</th>
+                <th>permissions</th>
+                <th>condition</th>
+                <th>since</th>
+              </tr>
+            </thead>
+            <tbody>
+              {permissions.map(({host, level, condition, created_at}) => (
+                <tr key={host}>
+                  <td>{host}</td>
+                  <td>{getPermissionsString(level)}</td>
+                  <td>{condition}</td>
+                  <td>
+                    {new Date(created_at * 1000)
+                      .toISOString()
+                      .split('.')[0]
+                      .split('T')
+                      .join(' ')}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </>
+      )}
+      <div>{message}</div>
+    </>
+  )
+
+  async function handleKeyChange(e) {
+    let key = e.target.value.toLowerCase().trim()
+    setKey(key)
+
+    if (key.match(/^[a-f0-9]{64}$/) || key === '') {
+      await browser.storage.local.set({
+        private_key: key
+      })
+      setMessage('saved!')
+      setTimeout(setMessage, 3000)
+    }
+  }
+}
+
+render(<Options />, document.getElementById('main'))