reya/nostr-connect
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update prompt page

Browse Source
This commit is contained in:
reya
2023-11-20 18:32:40 +07:00
parent c5a29598ae
commit ee97d461c8
7 changed files with 181 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
extension/icons.jsx
View File

@@ -1,6 +1,6 @@
import React from 'react' import React from 'react'
export function Logo({props}) { export function LogoIcon() {
return ( return (
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -8,7 +8,6 @@ export function Logo({props}) {
height="56" height="56"
fill="none" fill="none"
viewBox="0 0 56 56" viewBox="0 0 56 56"
{...props}
> >
<rect width="56" height="56" fill="#DCD6FF" rx="16"></rect> <rect width="56" height="56" fill="#DCD6FF" rx="16"></rect>
<rect <rect
@@ -53,3 +52,27 @@ export function Logo({props}) {
</svg> </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>
)
}

9
extension/options.jsx
View File

@@ -4,7 +4,7 @@ import {render} from 'react-dom'
import {generatePrivateKey, nip19} from 'nostr-tools' import {generatePrivateKey, nip19} from 'nostr-tools'
import QRCode from 'react-qr-code' import QRCode from 'react-qr-code'
import * as Tabs from '@radix-ui/react-tabs' import * as Tabs from '@radix-ui/react-tabs'
import {Logo} from './icons' import {LogoIcon} from './icons'
import {removePermissions} from './common' import {removePermissions} from './common'
function Options() { function Options() {
@@ -83,7 +83,7 @@ function Options() {
<div className="w-screen h-screen flex flex-col items-center justify-center"> <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="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"> <div className="flex items-center gap-4">
<Logo className="w-14 h-14" /> <LogoIcon />
<div> <div>
<h1 className="text-lg font-semibold">Nostr Connect</h1> <h1 className="text-lg font-semibold">Nostr Connect</h1>
<p className="text-sm text-muted font-medium">Nostr signer</p> <p className="text-sm text-muted font-medium">Nostr signer</p>
@@ -153,10 +153,7 @@ function Options() {
</div> </div>
</div> </div>
<Tabs.Root className="mb-4" defaultValue="relays"> <Tabs.Root className="mb-4" defaultValue="relays">
<Tabs.List <Tabs.List className="mb-4 w-full border-b border-primary h-11 flex items-center gap-6">
className="mb-4 w-full border-b border-primary h-11 flex items-center gap-6"
aria-label="Manage relay"
>
<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" 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" value="relays"

19
extension/popup.html
View File

@@ -1,8 +1,13 @@
<!DOCTYPE html> <!DOCTYPE html>
<html>
<meta charset="utf-8" /> <head>
<title>nos2x</title> <meta charset="utf-8" />
<title>nos2x</title>
<div id="main" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/build/style.css" rel="stylesheet" />
<script src="/build/popup.build.js"></script> </head>
<body class="bg-background text-foreground text-sm font-sans antialiased">
<div id="main" />
<script src="/build/popup.build.js"></script>
</body>
</html>

157
extension/popup.jsx
View File

@@ -1,12 +1,30 @@
import browser from 'webextension-polyfill' import browser from 'webextension-polyfill'
import {render} from 'react-dom' import {render} from 'react-dom'
import {getPublicKey, nip19} from 'nostr-tools' 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 QRCode from 'react-qr-code'
import {SettingsIcon} from './icons'
import {minidenticon} from 'minidenticons'
import * as Tabs from '@radix-ui/react-tabs'
function Popup() { function Popup() {
let [pubKey, setPubKey] = useState('') 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(() => { useEffect(() => {
browser.storage.local.get(['private_key', 'relays']).then(results => { browser.storage.local.get(['private_key', 'relays']).then(results => {
@@ -16,8 +34,8 @@ function Popup() {
setPubKey(npubKey) setPubKey(npubKey)
keys.current.push(npubKey) keys.current.npub = npubKey
keys.current.push(hexKey) keys.current.hex = hexKey
if (results.relays) { if (results.relays) {
let relaysList = [] let relaysList = []
@@ -32,7 +50,7 @@ function Popup() {
pubkey: hexKey, pubkey: hexKey,
relays: relaysList relays: relaysList
}) })
keys.current.push(nprofileKey) keys.current.nprofile = nprofileKey
} }
} }
} else { } else {
@@ -42,53 +60,106 @@ function Popup() {
}, []) }, [])
return ( return (
<> <div className="w-[320px] p-6">
<h2>nos2x</h2> {!pubKey ? (
{pubKey === null ? ( <div className="flex items-center justify-between gap-6">
<p style={{width: '150px'}}> <div className="flex-1 flex items-center justify-between">
you don't have a private key set. use the options page to set one. <p className="text-sm font-medium">
Click here to enter or create
<br />
your first identity
</p> </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>
<p> <div className="mb-2 flex items-center justify-between">
<a onClick={toggleKeyType}>↩️</a> your public key: <div className="flex items-center gap-2">
</p> {avatarURI ? (
<pre <img
style={{ src={avatarURI}
whiteSpace: 'pre-wrap', className="w-9 h-9 rounded-full bg-muted"
wordBreak: 'break-all', />
width: '200px' ) : (
}} <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"
> >
<code>{pubKey}</code> <SettingsIcon className="w-5 h-5 text-muted" />
</pre> </button>
</div>
<div <div>
style={{ <Tabs.Root defaultValue="npub">
height: 'auto', <Tabs.List className="w-full border-b border-primary h-10 flex items-center">
margin: '0 auto', <Tabs.Trigger
maxWidth: 256, value="npub"
width: '100%' 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 <QRCode
size={256} size={128}
style={{height: 'auto', maxWidth: '100%', width: '100%'}} value={
value={pubKey.startsWith('n') ? pubKey.toUpperCase() : pubKey} pubKey.startsWith('n') ? pubKey.toUpperCase() : pubKey
viewBox={`0 0 256 256`} }
/> />
</div> </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')) render(<Popup />, document.getElementById('main'))

19
extension/prompt.html
View File

@@ -1,8 +1,13 @@
<!DOCTYPE html> <!DOCTYPE html>
<html>
<meta charset="utf-8" /> <head>
<title>nos2x</title> <meta charset="utf-8" />
<title>nos2x</title>
<div id="main" style="width: 300px; height: 200px; margin: auto" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/build/style.css" rel="stylesheet" />
<script src="build/prompt.build.js"></script> </head>
<body class="bg-background text-foreground text-sm font-sans antialiased">
<div id="main" />
<script src="build/prompt.build.js"></script>
</body>
</html>

1
package.json
View File

@@ -8,6 +8,7 @@
"eslint-plugin-babel": "^5.3.1", "eslint-plugin-babel": "^5.3.1",
"eslint-plugin-react": "^7.33.2", "eslint-plugin-react": "^7.33.2",
"events": "^3.3.0", "events": "^3.3.0",
"minidenticons": "^4.2.0",
"nostr-tools": "^1.17.0", "nostr-tools": "^1.17.0",
"prettier": "^2.8.8", "prettier": "^2.8.8",
"react": "^17.0.2", "react": "^17.0.2",

8
pnpm-lock.yaml generated
View File

@@ -26,6 +26,9 @@ dependencies:
events: events:
specifier: ^3.3.0 specifier: ^3.3.0
version: 3.3.0 version: 3.3.0
minidenticons:
specifier: ^4.2.0
version: 4.2.0
nostr-tools: nostr-tools:
specifier: ^1.17.0 specifier: ^1.17.0
version: 1.17.0 version: 1.17.0
@@ -4947,6 +4950,11 @@ packages:
engines: {node: '>=6'} engines: {node: '>=6'}
dev: false dev: false
/minidenticons@4.2.0:
resolution: {integrity: sha512-2T3VU1N30yI3kXMRbdLsJ5DgsBoGLi2+2hbm1xTOU2RQXWW5wwpmz9XQohVSsVlhymf4W69sMGj6s39t796PBA==}
engines: {node: '>=15.14.0'}
dev: false
/minimatch@3.1.2: /minimatch@3.1.2:
resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==} resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
dependencies: dependencies: