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

wip

Browse Source
This commit is contained in:
reya
2023-11-20 14:29:38 +07:00
parent d932f129b2
commit c5a29598ae
10 changed files with 203 additions and 1168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -1,3 +1,4 @@
node_modules node_modules
*.build.js *.build.js
*.zip *.zip
/extension/build/style.css

4
build.js
View File

@@ -14,12 +14,12 @@ esbuild
'background.build': './extension/background.js', 'background.build': './extension/background.js',
'content-script.build': './extension/content-script.js' 'content-script.build': './extension/content-script.js'
}, },
outdir: './extension', outdir: './extension/build',
sourcemap: prod ? false : 'inline', sourcemap: prod ? false : 'inline',
define: { define: {
window: 'self', window: 'self',
global: 'self' global: 'self'
}, },
watch: !prod, watch: !prod
}) })
.then(() => console.log('build success.')) .then(() => console.log('build success.'))

4
extension/manifest.json
View File

@@ -12,7 +12,7 @@
}, },
"options_page": "options.html", "options_page": "options.html",
"background": { "background": {
"service_worker": "background.build.js" "service_worker": "/build/background.build.js"
}, },
"action": { "action": {
"default_title": "Nostr Connect", "default_title": "Nostr Connect",
@@ -21,7 +21,7 @@
"content_scripts": [ "content_scripts": [
{ {
"matches": ["<all_urls>"], "matches": ["<all_urls>"],
"js": ["content-script.build.js"], "js": ["/build/content-script.build.js"],
"all_frames": true "all_frames": true
} }
], ],

4
extension/options.html
View File

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

193
extension/options.jsx
View File

@@ -3,7 +3,7 @@ import React, {useState, useCallback, useEffect} from 'react'
import {render} from 'react-dom' 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 {Logo} from './icons' import {Logo} from './icons'
import {removePermissions} from './common' import {removePermissions} from './common'
@@ -81,7 +81,7 @@ function Options() {
return ( return (
<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"> <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" /> <Logo className="w-14 h-14" />
<div> <div>
@@ -89,8 +89,8 @@ function Options() {
<p className="text-sm text-muted font-medium">Nostr signer</p> <p className="text-sm text-muted font-medium">Nostr signer</p>
</div> </div>
</div> </div>
<div className="mt-4 flex flex-col"> <div className="flex flex-col">
<div className="mb-6 flex flex-col gap-2"> <div className="mb-4 flex flex-col gap-2">
<div className="font-semibold text-base">Private key:</div> <div className="font-semibold text-base">Private key:</div>
<div> <div>
<div className="flex gap-2"> <div className="flex gap-2">
@@ -152,21 +152,31 @@ function Options() {
)} )}
</div> </div>
</div> </div>
<div className="mb-4 flex flex-col"> <Tabs.Root className="mb-4" defaultValue="relays">
<div className="mb-4 w-full border-b border-gray-100 h-11 flex items-center gap-6"> <Tabs.List
<div className="text-primary font-medium flex gap-2 items-center h-11 border-b border-secondary"> className="mb-4 w-full border-b border-primary h-11 flex items-center gap-6"
aria-label="Manage relay"
>
<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"
>
Relays Relays
<span className="px-3 h-6 inline-flex items-center justify-center bg-secondary text-primary rounded-full"> <span className="px-3 h-6 inline-flex items-center justify-center bg-muted data-[state=active]:text-primary rounded-full">
{relays.length} {relays.length}
</span> </span>
</div> </Tabs.Trigger>
<div className="font-medium flex items-center text-muted gap-2 h-11"> <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="permissions"
>
Permissions Permissions
<span className="px-3 h-6 inline-flex items-center justify-center bg-muted rounded-full"> <span className="px-3 h-6 inline-flex items-center justify-center bg-muted data-[state=active]:text-primary rounded-full">
0 {policies.length}
</span> </span>
</div> </Tabs.Trigger>
</div> </Tabs.List>
<Tabs.Content value="relays">
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<div className="font-semibold text-base">Preferred Relays:</div> <div className="font-semibold text-base">Preferred Relays:</div>
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
@@ -223,8 +233,93 @@ function Options() {
</div> </div>
</div> </div>
</div> </div>
</Tabs.Content>
<Tabs.Content value="permissions">
<div className="flex flex-col gap-2">
<div className="font-semibold text-base">Permissions:</div>
{!policies.length ? (
<div className="text-muted">
You haven't granted any permissions to any apps yet
</div> </div>
<div className="mb-6"> ) : (
<table className="table-auto">
<thead>
<tr className="mb-2">
<th className="text-left border-b-8 border-transparent">
Domain
</th>
<th className="text-left border-b-8 border-transparent">
Permission
</th>
<th className="text-left border-b-8 border-transparent">
Answer
</th>
<th className="text-left border-b-8 border-transparent">
Conditions
</th>
<th className="text-left border-b-8 border-transparent">
Since
</th>
<th></th>
</tr>
</thead>
<tbody>
{policies.map(
({host, type, accept, conditions, created_at}) => (
<tr
key={
host + type + accept + JSON.stringify(conditions)
}
>
<td className="font-semibold">{host}</td>
<td className="text-muted">{type}</td>
<td className="text-muted">
{accept === 'true' ? 'allow' : 'deny'}
</td>
<td className="text-muted">
{conditions.kinds
? `kinds: ${Object.keys(conditions.kinds).join(
', '
)}`
: 'always'}
</td>
<td className="text-muted">
{new Date(created_at * 1000)
.toISOString()
.split('.')[0]
.split('T')
.join(' ')}
</td>
<td>
<button
onClick={handleRevoke}
data-host={host}
data-accept={accept}
data-type={type}
className="text-primary font-semibold"
>
Revoke
</button>
</td>
</tr>
)
)}
{!policies.length && (
<tr>
{Array(5)
.fill('N/A')
.map((v, i) => (
<td key={i}>{v}</td>
))}
</tr>
)}
</tbody>
</table>
)}
</div>
</Tabs.Content>
</Tabs.Root>
<div className="mb-3">
<label className="flex gap-2 items-center"> <label className="flex gap-2 items-center">
<input <input
type="checkbox" type="checkbox"
@@ -235,7 +330,8 @@ function Options() {
Show desktop notifications when a permissions has been used Show desktop notifications when a permissions has been used
</label> </label>
</div> </div>
<details className="mb-4"> <div>
<details>
<summary className="flex items-center justify-between"> <summary className="flex items-center justify-between">
<div className="font-semibold text-base">Advanced</div> <div className="font-semibold text-base">Advanced</div>
<div> <div>
@@ -255,7 +351,7 @@ function Options() {
</svg> </svg>
</div> </div>
</summary> </summary>
<div className="mt-2"> <div className="mt-3">
<label className="flex gap-2 items-center"> <label className="flex gap-2 items-center">
<input <input
type="checkbox" type="checkbox"
@@ -267,6 +363,7 @@ function Options() {
</label> </label>
</div> </div>
</details> </details>
</div>
{/*<div> {/*<div>
<label style={{display: 'flex', alignItems: 'center'}}> <label style={{display: 'flex', alignItems: 'center'}}>
<div> <div>
@@ -321,70 +418,10 @@ function Options() {
))} ))}
</div>*/} </div>*/}
</div> </div>
{/*<div>
<h2>permissions</h2>
<table>
<thead>
<tr>
<th>domain</th>
<th>permission</th>
<th>answer</th>
<th>conditions</th>
<th>since</th>
<th></th>
</tr>
</thead>
<tbody>
{policies.map(({host, type, accept, conditions, created_at}) => (
<tr key={host + type + accept + JSON.stringify(conditions)}>
<td>{host}</td>
<td>{type}</td>
<td>{accept === 'true' ? 'allow' : 'deny'}</td>
<td>
{conditions.kinds
? `kinds: ${Object.keys(conditions.kinds).join(', ')}`
: 'always'}
</td>
<td>
{new Date(created_at * 1000)
.toISOString()
.split('.')[0]
.split('T')
.join(' ')}
</td>
<td>
<button
onClick={handleRevoke}
data-host={host}
data-accept={accept}
data-type={type}
>
revoke
</button>
</td>
</tr>
))}
{!policies.length && (
<tr>
{Array(5)
.fill('N/A')
.map((v, i) => (
<td key={i}>{v}</td>
))}
</tr>
)}
</tbody>
</table>
{!policies.length && (
<div style={{marginTop: '5px'}}>
no permissions have been granted yet
</div>
)}
</div>*/}
<button <button
disabled={!unsavedChanges.length} disabled={!unsavedChanges.length}
onClick={saveChanges} onClick={saveChanges}
className="w-full h-10 bg-primary rounded-xl font-bold inline-flex items-center justify-center text-white" className="w-full h-10 bg-primary rounded-xl font-bold inline-flex items-center justify-center text-white disabled:cursor-not-allowed"
> >
Save Save
</button> </button>

1007
extension/output.css
View File

File diff suppressed because it is too large Load Diff

2
extension/popup.html
View File

@@ -5,4 +5,4 @@
<div id="main" /> <div id="main" />
<script src="popup.build.js"></script> <script src="/build/popup.build.js"></script>

2
extension/prompt.html
View File

@@ -5,4 +5,4 @@
<div id="main" style="width: 300px; height: 200px; margin: auto" /> <div id="main" style="width: 300px; height: 200px; margin: auto" />
<script src="prompt.build.js"></script> <script src="build/prompt.build.js"></script>

4
extension/style.css
View File

@@ -1,3 +1,7 @@
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
.data-\[state\=active\]\:text-primary[data-state=active] > .bg-muted {
@apply bg-secondary
}

2
package.json
View File

@@ -19,7 +19,7 @@
"webextension-polyfill": "^0.8.0" "webextension-polyfill": "^0.8.0"
}, },
"scripts": { "scripts": {
"dev": "./build.js; pnpm exec tailwindcss -i ./extension/style.css -o ./extension/output.css --watch", "dev": "./build.js; pnpm exec tailwindcss -i ./extension/style.css -o ./extension/build/style.css --watch",
"build": "./build.js prod", "build": "./build.js prod",
"package": "./build.js prod; cd extension; zip -r archive *; cd ..; mv extension/archive.zip ./nos2x.zip" "package": "./build.js prod; cd extension; zip -r archive *; cd ..; mv extension/archive.zip ./nos2x.zip"
}, },