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 11:03:30 +07:00
parent 9c9d591b46
commit 8aa1741699
9 changed files with 7609 additions and 1479 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored Normal file
View File

Binary file not shown.

37
extension/options.html
View File

@@ -1,24 +1,15 @@
<!DOCTYPE html> <!DOCTYPE html>
<html>
<meta charset="utf-8" /> <head>
<title>nos2x</title> <meta charset="utf-8" />
<style> <title>nos2x</title>
* { <meta name="viewport" content="width=device-width, initial-scale=1.0" />
font-family: monospace; <link href="output.css" rel="stylesheet" />
} </head>
</style> <body
class="bg-gray-50 dark:bg-gray-950 text-sm font-sans antialiased text-gray-700 dark:text-gray-300"
<div id="main" /> >
<div id="main" />
<script src="options.build.js"></script> <script src="options.build.js"></script>
</body>
<style> </html>
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid;
padding: 1px 2px;
}
</style>

158
extension/options.jsx
View File

@@ -79,44 +79,48 @@ function Options() {
} }
return ( return (
<> <div className="mt-10 p-8 bg-white dark:bg-black border border-gray-100 dark:border-gray-900 rounded-2xl max-w-xl mx-auto">
<h1 style={{fontSize: '25px', marginBlockEnd: '0px'}}>nos2x</h1> <div className="flex items-center gap-4">
<p style={{marginBlockStart: '0px'}}>nostr signer extension</p> <div className="w-12 h-12 bg-gray-200 dark:bg-gray-800 rounded-xl" />
<h2 style={{marginBlockStart: '20px', marginBlockEnd: '5px'}}>options</h2>
<div
style={{
marginBottom: '10px',
display: 'flex',
flexDirection: 'column',
gap: '10px',
width: 'fit-content'
}}
>
<div> <div>
<div>private key:&nbsp;</div> <h1 className="text-lg font-bold">Nostr Connect</h1>
<div <p className="text-base text-gray-500 font-medium">Nostr signer</p>
style={{ </div>
marginLeft: '10px', </div>
display: 'flex', <div className="mt-4 flex flex-col">
flexDirection: 'column', <div className="mb-6 flex flex-col gap-2">
gap: '10px' <div className="font-semibold text-base">Private key:</div>
}} <div>
> <div className="flex gap-2">
<div style={{display: 'flex', gap: '10px'}}>
<input <input
type={hidingPrivateKey ? 'password' : 'text'} type={hidingPrivateKey ? 'password' : 'text'}
style={{width: '600px'}}
value={privKey} value={privKey}
onChange={handleKeyChange} onChange={handleKeyChange}
className="flex-1 h-9 bg-transparent border px-3 py-1 border-gray-200 dark:border-gray-800 rounded-lg"
/> />
{privKey === '' && <button onClick={generate}>generate</button>} <div className="shrink-0">
{!privKey && (
<button
onClick={generate}
className="px-3 h-9 font-bold border border-gray-200 shadow-sm dark:border-gray-800 rounded-lg inline-flex items-center justify-center"
>
Generate
</button>
)}
{privKey && hidingPrivateKey && ( {privKey && hidingPrivateKey && (
<button onClick={() => hidePrivateKey(false)}>show key</button> <button onClick={() => hidePrivateKey(false)}>
Show key
</button>
)} )}
{privKey && !hidingPrivateKey && ( {privKey && !hidingPrivateKey && (
<button onClick={() => hidePrivateKey(true)}>hide key</button> <button onClick={() => hidePrivateKey(true)}>Hide key</button>
)} )}
</div> </div>
</div>
<p className="text-gray-500 text-sm mt-1">
Your key is stored locally. The developer has no way of seeing
your keys.
</p>
{privKey && !isKeyValid() && ( {privKey && !isKeyValid() && (
<div style={{color: 'red'}}>private key is invalid!</div> <div style={{color: 'red'}}>private key is invalid!</div>
)} )}
@@ -139,16 +143,24 @@ function Options() {
)} )}
</div> </div>
</div> </div>
<div className="mb-4 flex flex-col">
<div className="mb-4 w-full border-b border-gray-100 h-11 flex items-center gap-6">
<div className="text-indigo-600 font-medium flex gap-2 items-center h-11 border-b border-indigo-600">
Relays
<span className="px-3 h-6 inline-flex items-center justify-center bg-indigo-100 text-indigo-600 rounded-full">
10
</span>
</div>
<div className="text-gray-300 font-medium flex items-center gap-2 h-11">
Permissions
<span className="px-3 h-6 inline-flex items-center justify-center bg-gray-100 rounded-full">
0
</span>
</div>
</div>
<div className="flex flex-col gap-2">
<div className="font-semibold text-base">Preferred Relays:</div>
<div> <div>
<div>preferred relays:</div>
<div
style={{
marginLeft: '10px',
display: 'flex',
flexDirection: 'column',
gap: '1px'
}}
>
{relays.map(({url, policy}, i) => ( {relays.map(({url, policy}, i) => (
<div <div
key={i} key={i}
@@ -180,7 +192,7 @@ function Options() {
<button onClick={removeRelay.bind(null, i)}>remove</button> <button onClick={removeRelay.bind(null, i)}>remove</button>
</div> </div>
))} ))}
<div style={{display: 'flex', gap: '10px', marginTop: '5px'}}> <div className="flex gap-2">
<input <input
style={{width: '400px'}} style={{width: '400px'}}
value={newRelayURL} value={newRelayURL}
@@ -188,14 +200,50 @@ function Options() {
onKeyDown={e => { onKeyDown={e => {
if (e.key === 'Enter') addNewRelay() if (e.key === 'Enter') addNewRelay()
}} }}
className="flex-1 h-9 bg-transparent border px-3 py-1 border-gray-200 dark:border-gray-800 rounded-lg"
/> />
<button disabled={!newRelayURL} onClick={addNewRelay}> <button
add relay disabled={!newRelayURL}
onClick={addNewRelay}
className="shrink-0 px-3 h-9 font-bold border border-gray-200 shadow-sm dark:border-gray-800 rounded-lg inline-flex items-center justify-center disabled:text-gray-300"
>
Add Relay
</button> </button>
</div> </div>
</div> </div>
</div> </div>
</div>
<div className="mb-6">
<label className="flex gap-2 items-center">
<input
type="checkbox"
checked={showNotifications}
onChange={handleNotifications}
className="w-6 h-6 rounded-md border border-gray-200 dark:border-gray-800 appearance-none"
/>
Show desktop notifications when a permissions has been used
</label>
</div>
<div className="mb-4 flex items-center justify-between">
<div className="font-semibold text-base">Advanced</div>
<div> <div>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="w-5 h-5"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M19.5 8.25l-7.5 7.5-7.5-7.5"
/>
</svg>
</div>
</div>
{/*<div>
<label style={{display: 'flex', alignItems: 'center'}}> <label style={{display: 'flex', alignItems: 'center'}}>
<div> <div>
handle{' '} handle{' '}
@@ -242,29 +290,14 @@ function Options() {
</div> </div>
)} )}
</div> </div>
</div> </div>*/}
<label style={{display: 'flex', alignItems: 'center'}}> {/*<div style={{fontSize: '120%'}}>
show notifications when permissions are used:
<input
type="checkbox"
checked={showNotifications}
onChange={handleNotifications}
/>
</label>
<button
disabled={!unsavedChanges.length}
onClick={saveChanges}
style={{padding: '5px 20px'}}
>
save
</button>
<div style={{fontSize: '120%'}}>
{messages.map((message, i) => ( {messages.map((message, i) => (
<div key={i}>{message}</div> <div key={i}>{message}</div>
))} ))}
</div>*/}
</div> </div>
</div> {/*<div>
<div>
<h2>permissions</h2> <h2>permissions</h2>
<table> <table>
<thead> <thead>
@@ -323,8 +356,15 @@ function Options() {
no permissions have been granted yet no permissions have been granted yet
</div> </div>
)} )}
</div>*/}
<button
disabled={!unsavedChanges.length}
onClick={saveChanges}
className="w-full h-10 bg-indigo-600 rounded-xl font-bold inline-flex items-center justify-center text-white"
>
Save
</button>
</div> </div>
</>
) )
async function handleKeyChange(e) { async function handleKeyChange(e) {

1001
extension/output.css Normal file
View File

File diff suppressed because it is too large Load Diff

3
extension/style.css Normal file
View File

@@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

19
package.json
View File

@@ -2,24 +2,27 @@
"license": "WTFPL", "license": "WTFPL",
"dependencies": { "dependencies": {
"async-mutex": "^0.3.2", "async-mutex": "^0.3.2",
"esbuild": "^0.14.11", "esbuild": "^0.14.54",
"eslint": "^8.6.0", "eslint": "^8.54.0",
"eslint-plugin-babel": "^5.3.1", "eslint-plugin-babel": "^5.3.1",
"eslint-plugin-react": "^7.28.0", "eslint-plugin-react": "^7.33.2",
"events": "^3.3.0", "events": "^3.3.0",
"nostr-tools": "^1.12.0", "nostr-tools": "^1.17.0",
"prettier": "^2.5.1", "prettier": "^2.8.8",
"react": "^17.0.2", "react": "^17.0.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-native-svg": "^13.8.0", "react-native-svg": "^13.14.0",
"react-qr-code": "^2.0.11", "react-qr-code": "^2.0.12",
"use-boolean-state": "^1.0.2", "use-boolean-state": "^1.0.2",
"use-debounce": "^7.0.1", "use-debounce": "^7.0.1",
"webextension-polyfill": "^0.8.0" "webextension-polyfill": "^0.8.0"
}, },
"scripts": { "scripts": {
"build": "./build.js prod", "build": "./build.js prod",
"watch": "ag -l --js | entr ./build.js", "watch": "ag -l --js | entr ./build.js; pnpm exec tailwindcss -i ./extension/style.css -o ./extension/output.css --watch",
"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"
},
"devDependencies": {
"tailwindcss": "^3.3.5"
} }
} }

6429
pnpm-lock.yaml generated Normal file
View File

File diff suppressed because it is too large Load Diff

9
tailwind.config.js Normal file
View File

@@ -0,0 +1,9 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./extension/**/*.{html,js,jsx}'],
theme: {
extend: {},
},
plugins: [],
}

1346
yarn.lock
View File

File diff suppressed because it is too large Load Diff