update prompt page

extension/popup.jsx

@@ -1,12 +1,30 @@
 import browser from 'webextension-polyfill'
 import {render} from 'react-dom'
 import {getPublicKey, nip19} from 'nostr-tools'
-import React, {useState, useRef, useEffect} from 'react'
+import React, {useState, useMemo, useRef, 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 [pubKey, setPubKey] = useState('')
-  let keys = useRef([])
+
+  let keys = useRef({npub: '', hex: '', nprofile: ''})
+  let avatarURI = useMemo(
+    () =>
+      pubKey
+        ? 'data:image/svg+xml;utf8,' +
+          encodeURIComponent(minidenticon(pubKey, 90, 30))
+        : null,
+    [pubKey]
+  )
+
+  const gotoSettings = () => {
+    browser.tabs.create({
+      url: browser.runtime.getURL('/options.html')
+    })
+  }
 
   useEffect(() => {
     browser.storage.local.get(['private_key', 'relays']).then(results => {
@@ -16,8 +34,8 @@ function Popup() {
 
         setPubKey(npubKey)
 
-        keys.current.push(npubKey)
-        keys.current.push(hexKey)
+        keys.current.npub = npubKey
+        keys.current.hex = hexKey
 
         if (results.relays) {
           let relaysList = []
@@ -32,7 +50,7 @@ function Popup() {
               pubkey: hexKey,
               relays: relaysList
             })
-            keys.current.push(nprofileKey)
+            keys.current.nprofile = nprofileKey
           }
         }
       } else {
@@ -42,53 +60,106 @@ function Popup() {
   }, [])
 
   return (
-    <>
-      <h2>nos2x</h2>
-      {pubKey === null ? (
-        <p style={{width: '150px'}}>
-          you don't have a private key set. use the options page to set one.
-        </p>
-      ) : (
-        <>
-          <p>
-            <a onClick={toggleKeyType}>↩️</a> your public key:
-          </p>
-          <pre
-            style={{
-              whiteSpace: 'pre-wrap',
-              wordBreak: 'break-all',
-              width: '200px'
-            }}
-          >
-            <code>{pubKey}</code>
-          </pre>
-
-          <div
-            style={{
-              height: 'auto',
-              margin: '0 auto',
-              maxWidth: 256,
-              width: '100%'
-            }}
-          >
-            <QRCode
-              size={256}
-              style={{height: 'auto', maxWidth: '100%', width: '100%'}}
-              value={pubKey.startsWith('n') ? pubKey.toUpperCase() : pubKey}
-              viewBox={`0 0 256 256`}
-            />
+    <div className="w-[320px] p-6">
+      {!pubKey ? (
+        <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>
+                <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"
+                >
+                  naddr
+                </Tabs.Trigger>
+              </Tabs.List>
+              <Tabs.Content value="npub">
+                <div className="my-4">
+                  <textarea
+                    readOnly
+                    className="w-full h-20 resize-none p-3 bg-muted rounded-xl"
+                  >
+                    {pubKey}
+                  </textarea>
+                </div>
+                <div className="w-full rounded-xl border border-primary p-4 flex items-center justify-center">
+                  <QRCode
+                    size={128}
+                    value={
+                      pubKey.startsWith('n') ? pubKey.toUpperCase() : pubKey
+                    }
+                  />
+                </div>
+              </Tabs.Content>
+            </Tabs.Root>
+          </div>
+        </div>
       )}
-    </>
+    </div>
   )
-
-  function toggleKeyType(e) {
-    e.preventDefault()
-    let nextKeyType =
-      keys.current[(keys.current.indexOf(pubKey) + 1) % keys.current.length]
-    setPubKey(nextKeyType)
-  }
 }
 
 render(<Popup />, document.getElementById('main'))