This commit is contained in:
reya
2023-11-21 08:28:41 +07:00
parent ee97d461c8
commit daf7a4d466
8 changed files with 377 additions and 179 deletions

View File

@@ -2,7 +2,7 @@
<html>
<head>
<meta charset="utf-8" />
<title>nos2x</title>
<title>Nostr Connect (formerly nos2x)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/build/style.css" rel="stylesheet" />
</head>

View File

@@ -6,6 +6,7 @@ import QRCode from 'react-qr-code'
import * as Tabs from '@radix-ui/react-tabs'
import {LogoIcon} from './icons'
import {removePermissions} from './common'
import * as Checkbox from '@radix-ui/react-checkbox'
function Options() {
let [privKey, setPrivKey] = useState('')
@@ -185,23 +186,77 @@ function Options() {
className="flex-1 h-9 bg-transparent border px-3 py-1 border-primary rounded-lg placeholder:text-muted"
/>
<div className="flex items-center gap-2">
<label className="inline-flex items-center gap-2 text-muted font-medium">
<input
type="checkbox"
<div className="inline-flex items-center gap-2">
<Checkbox.Root
id={`read-${i}`}
checked={policy.read}
onChange={toggleRelayPolicy.bind(null, i, 'read')}
onCheckedChange={toggleRelayPolicy.bind(
null,
i,
'read'
)}
className="flex h-6 w-6 appearance-none items-center justify-center rounded-lg bg-white outline-none border border-primary data-[state=checked]:bg-primary data-[state=checked]:border-secondary"
>
<Checkbox.Indicator className="text-white">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="w-4 h-4"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M4.5 12.75l6 6 9-13.5"
/>
<p>Read</p>
</svg>
</Checkbox.Indicator>
</Checkbox.Root>
<label
htmlFor={`read-${i}`}
className="text-muted font-medium"
>
Read
</label>
<label className="inline-flex items-center gap-2 text-muted font-medium">
<input
type="checkbox"
</div>
<div className="inline-flex items-center gap-2">
<Checkbox.Root
id={`write-${i}`}
checked={policy.write}
onChange={toggleRelayPolicy.bind(null, i, 'write')}
onCheckedChange={toggleRelayPolicy.bind(
null,
i,
'write'
)}
className="flex h-6 w-6 appearance-none items-center justify-center rounded-lg bg-white outline-none border border-primary data-[state=checked]:bg-primary data-[state=checked]:border-secondary"
>
<Checkbox.Indicator className="text-white">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="w-4 h-4"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M4.5 12.75l6 6 9-13.5"
/>
<p>Write</p>
</svg>
</Checkbox.Indicator>
</Checkbox.Root>
<label
htmlFor={`write-${i}`}
className="text-muted font-medium"
>
Write
</label>
</div>
</div>
<button
onClick={removeRelay.bind(null, i)}
className="shrink-0 px-3 w-24 h-9 font-semibold border border-primary shadow-sm rounded-lg inline-flex items-center justify-center disabled:text-muted"
@@ -317,16 +372,35 @@ function Options() {
</Tabs.Content>
</Tabs.Root>
<div className="mb-3">
<label className="flex gap-2 items-center">
<input
type="checkbox"
<div className="flex items-center gap-2">
<Checkbox.Root
id="notification"
className="flex h-6 w-6 appearance-none items-center justify-center rounded-lg bg-white outline-none border border-primary data-[state=checked]:bg-primary data-[state=checked]:border-secondary"
checked={showNotifications}
onChange={handleNotifications}
className="w-6 h-6 rounded-md border border-gray-200 dark:border-gray-800 appearance-none"
onCheckedChange={handleNotifications}
>
<Checkbox.Indicator className="text-white">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="w-4 h-4"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M4.5 12.75l6 6 9-13.5"
/>
</svg>
</Checkbox.Indicator>
</Checkbox.Root>
<label htmlFor="notification">
Show desktop notifications when a permissions has been used
</label>
</div>
</div>
<div>
<details>
<summary className="flex items-center justify-between">
@@ -349,47 +423,48 @@ function Options() {
</div>
</summary>
<div className="mt-3">
<label className="flex gap-2 items-center">
<input
type="checkbox"
<div className="flex items-center gap-2">
<Checkbox.Root
id="notification"
className="flex h-6 w-6 appearance-none items-center justify-center rounded-lg bg-white outline-none border border-primary data-[state=checked]:bg-primary data-[state=checked]:border-secondary"
checked={handleNostrLinks}
onChange={changeHandleNostrLinks}
className="w-6 h-6 rounded-md border border-gray-200 dark:border-gray-800 appearance-none"
onCheckedChange={changeHandleNostrLinks}
>
<Checkbox.Indicator className="text-white">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="w-4 h-4"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M4.5 12.75l6 6 9-13.5"
/>
Handle nostr links
</label>
</svg>
</Checkbox.Indicator>
</Checkbox.Root>
<label htmlFor="notification">Handle nostr links</label>
</div>
</details>
</div>
{/*<div>
<label style={{display: 'flex', alignItems: 'center'}}>
<div>
handle{' '}
<span style={{padding: '2px', background: 'silver'}}>nostr:</span>{' '}
links:
</div>
<input
type="checkbox"
checked={handleNostrLinks}
onChange={changeHandleNostrLinks}
/>
</label>
<div style={{marginLeft: '10px'}}>
{handleNostrLinks && (
<div>
<div style={{display: 'flex'}}>
<div className="mt-3">
<div className="flex">
<input
placeholder="url template"
value={protocolHandler}
onChange={handleChangeProtocolHandler}
style={{width: '680px', maxWidth: '90%'}}
/>
{!showProtocolHandlerHelp && (
<button onClick={changeShowProtocolHandlerHelp}>?</button>
<button onClick={changeShowProtocolHandlerHelp}>
?
</button>
)}
</div>
{showProtocolHandlerHelp && (
<pre>{`
<pre className="bg-muted p-2 rounded-xl break-all">{`
{raw} = anything after the colon, i.e. the full nip19 bech32 string
{hex} = hex pubkey for npub or nprofile, hex event id for note or nevent
{p_or_e} = "p" for npub or nprofile, "e" for note or nevent
@@ -408,12 +483,8 @@ function Options() {
</div>
)}
</div>
</div>*/}
{/*<div style={{fontSize: '120%'}}>
{messages.map((message, i) => (
<div key={i}>{message}</div>
))}
</div>*/}
</details>
</div>
</div>
<button
disabled={!unsavedChanges.length}

View File

@@ -2,7 +2,7 @@
<html>
<head>
<meta charset="utf-8" />
<title>nos2x</title>
<title>Nostr Connect (formerly nos2x)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/build/style.css" rel="stylesheet" />
</head>

View File

@@ -1,23 +1,21 @@
import browser from 'webextension-polyfill'
import {render} from 'react-dom'
import {getPublicKey, nip19} from 'nostr-tools'
import React, {useState, useMemo, useRef, useEffect} from 'react'
import React, {useState, useMemo, 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({npub: '', hex: '', nprofile: ''})
let [keys, setKeys] = useState(null)
let avatarURI = useMemo(
() =>
pubKey
keys
? 'data:image/svg+xml;utf8,' +
encodeURIComponent(minidenticon(pubKey, 90, 30))
encodeURIComponent(minidenticon(keys.npub, 90, 30))
: null,
[pubKey]
[keys]
)
const gotoSettings = () => {
@@ -32,10 +30,7 @@ function Popup() {
let hexKey = getPublicKey(results.private_key)
let npubKey = nip19.npubEncode(hexKey)
setPubKey(npubKey)
keys.current.npub = npubKey
keys.current.hex = hexKey
setKeys({npub: npubKey, hex: hexKey})
if (results.relays) {
let relaysList = []
@@ -50,18 +45,18 @@ function Popup() {
pubkey: hexKey,
relays: relaysList
})
keys.current.nprofile = nprofileKey
setKeys(prev => ({...prev, nprofile: nprofileKey}))
}
}
} else {
setPubKey(null)
setKeys(null)
}
})
}, [])
return (
<div className="w-[320px] p-6">
{!pubKey ? (
{!keys ? (
<div className="flex items-center justify-between gap-6">
<div className="flex-1 flex items-center justify-between">
<p className="text-sm font-medium">
@@ -129,31 +124,53 @@ function Popup() {
>
hex
</Tabs.Trigger>
{keys.nprofile ? (
<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
nprofile
</Tabs.Trigger>
) : null}
</Tabs.List>
<Tabs.Content value="npub">
<div className="my-4">
<textarea
value={keys.npub}
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>
<div className="w-full rounded-xl border border-primary p-4 flex items-center justify-center">
<QRCode size={128} value={keys.npub} />
</div>
</Tabs.Content>
<Tabs.Content value="hex">
<div className="my-4">
<textarea
value={keys.hex}
readOnly
className="w-full h-20 resize-none p-3 bg-muted rounded-xl"
/>
</div>
<div className="w-full rounded-xl border border-primary p-4 flex items-center justify-center">
<QRCode size={128} value={keys.hex} />
</div>
</Tabs.Content>
{keys.nprofile ? (
<Tabs.Content value="nprofile">
<div className="my-4">
<textarea
value={keys.nprofile}
readOnly
className="w-full h-20 resize-none p-3 bg-muted rounded-xl"
/>
</div>
<div className="w-full rounded-xl border border-primary p-4 flex items-center justify-center">
<QRCode size={128} value={keys.nprofile} />
</div>
</Tabs.Content>
) : null}
</Tabs.Root>
</div>
</div>

View File

@@ -2,7 +2,7 @@
<html>
<head>
<meta charset="utf-8" />
<title>nos2x</title>
<title>Nostr Connect (formerly nos2x)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/build/style.css" rel="stylesheet" />
</head>

View File

@@ -1,15 +1,20 @@
import browser from 'webextension-polyfill'
import {render} from 'react-dom'
import React from 'react'
import React, {useState} from 'react'
import {PERMISSION_NAMES} from './common'
import {LogoIcon} from './icons'
import * as Checkbox from '@radix-ui/react-checkbox'
function Prompt() {
const [isRemember, setIsRemember] = useState(false)
let qs = new URLSearchParams(location.search)
let id = qs.get('id')
let host = qs.get('host')
let type = qs.get('type')
let params, event
try {
params = JSON.parse(qs.get('params'))
if (Object.keys(params).length === 0) params = null
@@ -18,24 +23,85 @@ function Prompt() {
params = null
}
function authorizeHandler(accept) {
const conditions = isRemember ? {} : null
return function (ev) {
ev.preventDefault()
browser.runtime.sendMessage({
prompt: true,
id,
host,
type,
accept,
conditions
})
}
}
return (
<>
<div>
<b style={{display: 'block', textAlign: 'center', fontSize: '200%'}}>
{host}
</b>{' '}
<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-5">
<div className="flex flex-col items-center gap-5">
<LogoIcon />
<div className="flex flex-col items-center text-center">
<h1 className="font-semibold text-lg">{host}</h1>
<p>
is requesting your permission to <b>{PERMISSION_NAMES[type]}:</b>
is requesting your permission to <b>{PERMISSION_NAMES[type]}</b>
</p>
</div>
</div>
{params && (
<>
<p>now acting on</p>
<pre style={{overflow: 'auto', maxHeight: '120px'}}>
<div>
<p>Now acting on</p>
<pre className="bg-muted rounded-xl p-3">
<code>{JSON.stringify(event || params, null, 2)}</code>
</pre>
</>
</div>
)}
<div className="flex flex-col gap-4">
<div className="flex items-center justify-center gap-2">
<Checkbox.Root
id="remember"
className="flex h-6 w-6 appearance-none items-center justify-center rounded-lg bg-white outline-none border border-primary data-[state=checked]:bg-primary data-[state=checked]:border-secondary"
onCheckedChange={setIsRemember}
>
<Checkbox.Indicator className="text-white">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="w-4 h-4"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M4.5 12.75l6 6 9-13.5"
/>
</svg>
</Checkbox.Indicator>
</Checkbox.Root>
<label htmlFor="remember" className="text-muted">
Remember my preference forever
</label>
</div>
<div className="flex gap-3">
<button
onClick={authorizeHandler(false)}
className="flex-1 h-10 rounded-lg shadow-sm border border-primary inline-flex items-center justify-center font-semibold"
>
Reject
</button>
<button
onClick={authorizeHandler(true)}
className="flex-1 h-10 rounded-lg shadow-sm border border-secondary bg-primary text-white inline-flex items-center justify-center font-semibold"
>
Authorize
</button>
</div>
</div>
{/*
<div
style={{
display: 'flex',
@@ -90,23 +156,10 @@ function Prompt() {
<button style={{marginTop: '5px'}} onClick={authorizeHandler(false)}>
reject
</button>
</div>*/}
</div>
</div>
</>
)
function authorizeHandler(accept, conditions) {
return function (ev) {
ev.preventDefault()
browser.runtime.sendMessage({
prompt: true,
id,
host,
type,
accept,
conditions
})
}
}
}
render(<Prompt />, document.getElementById('main'))

View File

@@ -1,6 +1,7 @@
{
"license": "WTFPL",
"dependencies": {
"@radix-ui/react-checkbox": "^1.0.4",
"@radix-ui/react-tabs": "^1.0.4",
"async-mutex": "^0.3.2",
"esbuild": "^0.14.54",

56
pnpm-lock.yaml generated
View File

@@ -5,6 +5,9 @@ settings:
excludeLinksFromLockfile: false
dependencies:
'@radix-ui/react-checkbox':
specifier: ^1.0.4
version: 1.0.4(react-dom@17.0.2)(react@17.0.2)
'@radix-ui/react-tabs':
specifier: ^1.0.4
version: 1.0.4(react-dom@17.0.2)(react@17.0.2)
@@ -1730,6 +1733,32 @@ packages:
'@babel/runtime': 7.23.2
dev: false
/@radix-ui/react-checkbox@1.0.4(react-dom@17.0.2)(react@17.0.2):
resolution: {integrity: sha512-CBuGQa52aAYnADZVt/KBQzXrwx6TqnlwtcIPGtVt5JkkzQwMOLJjPukimhfKEr4GQNd43C+djUh5Ikopj8pSLg==}
peerDependencies:
'@types/react': '*'
'@types/react-dom': '*'
react: ^16.8 || ^17.0 || ^18.0
react-dom: ^16.8 || ^17.0 || ^18.0
peerDependenciesMeta:
'@types/react':
optional: true
'@types/react-dom':
optional: true
dependencies:
'@babel/runtime': 7.23.2
'@radix-ui/primitive': 1.0.1
'@radix-ui/react-compose-refs': 1.0.1(react@17.0.2)
'@radix-ui/react-context': 1.0.1(react@17.0.2)
'@radix-ui/react-presence': 1.0.1(react-dom@17.0.2)(react@17.0.2)
'@radix-ui/react-primitive': 1.0.3(react-dom@17.0.2)(react@17.0.2)
'@radix-ui/react-use-controllable-state': 1.0.1(react@17.0.2)
'@radix-ui/react-use-previous': 1.0.1(react@17.0.2)
'@radix-ui/react-use-size': 1.0.1(react@17.0.2)
react: 17.0.2
react-dom: 17.0.2(react@17.0.2)
dev: false
/@radix-ui/react-collection@1.0.3(react-dom@17.0.2)(react@17.0.2):
resolution: {integrity: sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==}
peerDependencies:
@@ -1951,6 +1980,33 @@ packages:
react: 17.0.2
dev: false
/@radix-ui/react-use-previous@1.0.1(react@17.0.2):
resolution: {integrity: sha512-cV5La9DPwiQ7S0gf/0qiD6YgNqM5Fk97Kdrlc5yBcrF3jyEZQwm7vYFqMo4IfeHgJXsRaMvLABFtd0OVEmZhDw==}
peerDependencies:
'@types/react': '*'
react: ^16.8 || ^17.0 || ^18.0
peerDependenciesMeta:
'@types/react':
optional: true
dependencies:
'@babel/runtime': 7.23.2
react: 17.0.2
dev: false
/@radix-ui/react-use-size@1.0.1(react@17.0.2):
resolution: {integrity: sha512-ibay+VqrgcaI6veAojjofPATwledXiSmX+C0KrBk/xgpX9rBzPV3OsfwlhQdUOFbh+LKQorLYT+xTXW9V8yd0g==}
peerDependencies:
'@types/react': '*'
react: ^16.8 || ^17.0 || ^18.0
peerDependenciesMeta:
'@types/react':
optional: true
dependencies:
'@babel/runtime': 7.23.2
'@radix-ui/react-use-layout-effect': 1.0.1(react@17.0.2)
react: 17.0.2
dev: false
/@react-native-community/cli-clean@11.3.10:
resolution: {integrity: sha512-g6QjW+DSqoWRHzmIQW3AH22k1AnynWuOdy2YPwYEGgPddTeXZtJphIpEVwDOiC0L4mZv2VmiX33/cGNUwO0cIA==}
dependencies: