wip
This commit is contained in:
reya
@@ -1,24 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<title>nos2x</title>
|
||||
<style>
|
||||
* {
|
||||
font-family: monospace;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="main" />
|
||||
|
||||
<script src="options.build.js"></script>
|
||||
|
||||
<style>
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
th,
|
||||
td {
|
||||
border: 1px solid;
|
||||
padding: 1px 2px;
|
||||
}
|
||||
</style>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>nos2x</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link href="output.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body
|
||||
class="bg-gray-50 dark:bg-gray-950 text-sm font-sans antialiased text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
<div id="main" />
|
||||
<script src="options.build.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -79,44 +79,48 @@ function Options() {
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<h1 style={{fontSize: '25px', marginBlockEnd: '0px'}}>nos2x</h1>
|
||||
<p style={{marginBlockStart: '0px'}}>nostr signer extension</p>
|
||||
<h2 style={{marginBlockStart: '20px', marginBlockEnd: '5px'}}>options</h2>
|
||||
<div
|
||||
style={{
|
||||
marginBottom: '10px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '10px',
|
||||
width: 'fit-content'
|
||||
}}
|
||||
>
|
||||
<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">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 bg-gray-200 dark:bg-gray-800 rounded-xl" />
|
||||
<div>
|
||||
<div>private key: </div>
|
||||
<div
|
||||
style={{
|
||||
marginLeft: '10px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '10px'
|
||||
}}
|
||||
>
|
||||
<div style={{display: 'flex', gap: '10px'}}>
|
||||
<h1 className="text-lg font-bold">Nostr Connect</h1>
|
||||
<p className="text-base text-gray-500 font-medium">Nostr signer</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 flex flex-col">
|
||||
<div className="mb-6 flex flex-col gap-2">
|
||||
<div className="font-semibold text-base">Private key:</div>
|
||||
<div>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type={hidingPrivateKey ? 'password' : 'text'}
|
||||
style={{width: '600px'}}
|
||||
value={privKey}
|
||||
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 && (
|
||||
<button onClick={() => hidePrivateKey(false)}>show key</button>
|
||||
<button onClick={() => hidePrivateKey(false)}>
|
||||
Show key
|
||||
</button>
|
||||
)}
|
||||
{privKey && !hidingPrivateKey && (
|
||||
<button onClick={() => hidePrivateKey(true)}>hide key</button>
|
||||
<button onClick={() => hidePrivateKey(true)}>Hide key</button>
|
||||
)}
|
||||
</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() && (
|
||||
<div style={{color: 'red'}}>private key is invalid!</div>
|
||||
)}
|
||||
@@ -139,16 +143,24 @@ function Options() {
|
||||
)}
|
||||
</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>preferred relays:</div>
|
||||
<div
|
||||
style={{
|
||||
marginLeft: '10px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '1px'
|
||||
}}
|
||||
>
|
||||
{relays.map(({url, policy}, i) => (
|
||||
<div
|
||||
key={i}
|
||||
@@ -180,7 +192,7 @@ function Options() {
|
||||
<button onClick={removeRelay.bind(null, i)}>remove</button>
|
||||
</div>
|
||||
))}
|
||||
<div style={{display: 'flex', gap: '10px', marginTop: '5px'}}>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
style={{width: '400px'}}
|
||||
value={newRelayURL}
|
||||
@@ -188,14 +200,50 @@ function Options() {
|
||||
onKeyDown={e => {
|
||||
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}>
|
||||
add relay
|
||||
<button
|
||||
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>
|
||||
</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>
|
||||
<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'}}>
|
||||
<div>
|
||||
handle{' '}
|
||||
@@ -242,29 +290,14 @@ function Options() {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<label style={{display: 'flex', alignItems: 'center'}}>
|
||||
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%'}}>
|
||||
</div>*/}
|
||||
{/*<div style={{fontSize: '120%'}}>
|
||||
{messages.map((message, i) => (
|
||||
<div key={i}>{message}</div>
|
||||
))}
|
||||
</div>*/}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
{/*<div>
|
||||
<h2>permissions</h2>
|
||||
<table>
|
||||
<thead>
|
||||
@@ -323,8 +356,15 @@ function Options() {
|
||||
no permissions have been granted yet
|
||||
</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>
|
||||
</>
|
||||
)
|
||||
|
||||
async function handleKeyChange(e) {
|
||||
|
||||
1001
extension/output.css
Normal file
1001
extension/output.css
Normal file
File diff suppressed because it is too large
Load Diff
3
extension/style.css
Normal file
3
extension/style.css
Normal file
@@ -0,0 +1,3 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
19
package.json
19
package.json
@@ -2,24 +2,27 @@
|
||||
"license": "WTFPL",
|
||||
"dependencies": {
|
||||
"async-mutex": "^0.3.2",
|
||||
"esbuild": "^0.14.11",
|
||||
"eslint": "^8.6.0",
|
||||
"esbuild": "^0.14.54",
|
||||
"eslint": "^8.54.0",
|
||||
"eslint-plugin-babel": "^5.3.1",
|
||||
"eslint-plugin-react": "^7.28.0",
|
||||
"eslint-plugin-react": "^7.33.2",
|
||||
"events": "^3.3.0",
|
||||
"nostr-tools": "^1.12.0",
|
||||
"prettier": "^2.5.1",
|
||||
"nostr-tools": "^1.17.0",
|
||||
"prettier": "^2.8.8",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-native-svg": "^13.8.0",
|
||||
"react-qr-code": "^2.0.11",
|
||||
"react-native-svg": "^13.14.0",
|
||||
"react-qr-code": "^2.0.12",
|
||||
"use-boolean-state": "^1.0.2",
|
||||
"use-debounce": "^7.0.1",
|
||||
"webextension-polyfill": "^0.8.0"
|
||||
},
|
||||
"scripts": {
|
||||
"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"
|
||||
},
|
||||
"devDependencies": {
|
||||
"tailwindcss": "^3.3.5"
|
||||
}
|
||||
}
|
||||
|
||||
6429
pnpm-lock.yaml
generated
Normal file
6429
pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load Diff
9
tailwind.config.js
Normal file
9
tailwind.config.js
Normal file
@@ -0,0 +1,9 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ['./extension/**/*.{html,js,jsx}'],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user