update prompt page

2023-11-20 18:32:40 +07:00
parent c5a29598ae
commit ee97d461c8
7 changed files with 181 additions and 71 deletions
--- a/extension/icons.jsx
+++ b/extension/icons.jsx
@@ -1,6 +1,6 @@
 import React from 'react'

-export function Logo({props}) {
+export function LogoIcon() {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
@@ -8,7 +8,6 @@ export function Logo({props}) {
      height="56"
      fill="none"
      viewBox="0 0 56 56"
-      {...props}
    >
      <rect width="56" height="56" fill="#DCD6FF" rx="16"></rect>
      <rect
@@ -53,3 +52,27 @@ export function Logo({props}) {
    </svg>
  )
 }
+
+export function SettingsIcon(props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      {...props}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"
+      />
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+      />
+    </svg>
+  )
+}
--- a/extension/options.jsx
+++ b/extension/options.jsx
@@ -4,7 +4,7 @@ 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 {Logo} from './icons'
+import {LogoIcon} from './icons'
 import {removePermissions} from './common'

 function Options() {
@@ -83,7 +83,7 @@ function Options() {
    <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">
-          <Logo className="w-14 h-14" />
+          <LogoIcon />
          <div>
            <h1 className="text-lg font-semibold">Nostr Connect</h1>
            <p className="text-sm text-muted font-medium">Nostr signer</p>
@@ -153,10 +153,7 @@ function Options() {
            </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"
-              aria-label="Manage relay"
-            >
+            <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"
--- a/extension/popup.html
+++ b/extension/popup.html
@@ -1,8 +1,13 @@
 <!DOCTYPE html>
-
-<meta charset="utf-8" />
-<title>nos2x</title>
-
-<div id="main" />
-
-<script src="/build/popup.build.js"></script>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>nos2x</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link href="/build/style.css" rel="stylesheet" />
+  </head>
+  <body class="bg-background text-foreground text-sm font-sans antialiased">
+    <div id="main" />
+    <script src="/build/popup.build.js"></script>
+  </body>
+</html>
--- a/extension/popup.jsx
+++ b/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'))
--- a/extension/prompt.html
+++ b/extension/prompt.html
@@ -1,8 +1,13 @@
 <!DOCTYPE html>
-
-<meta charset="utf-8" />
-<title>nos2x</title>
-
-<div id="main" style="width: 300px; height: 200px; margin: auto" />
-
-<script src="build/prompt.build.js"></script>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>nos2x</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link href="/build/style.css" rel="stylesheet" />
+  </head>
+  <body class="bg-background text-foreground text-sm font-sans antialiased">
+    <div id="main" />
+    <script src="build/prompt.build.js"></script>
+  </body>
+</html>