diff --git a/babel.config.js b/babel.config.js index c51e84d..2554df1 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,5 +1,3 @@ - - module.exports = api => { return { presets: [ diff --git a/build.js b/build.js index 94e9d10..77253b4 100755 --- a/build.js +++ b/build.js @@ -19,6 +19,7 @@ esbuild define: { window: 'self', global: 'self' - } + }, + watch: !prod, }) .then(() => console.log('build success.')) diff --git a/extension/icons.jsx b/extension/icons.jsx new file mode 100644 index 0000000..b38fff9 --- /dev/null +++ b/extension/icons.jsx @@ -0,0 +1,55 @@ +import React from 'react' + +export function Logo({props}) { + return ( + + + + + + + + + + + + + + + + + + ) +} diff --git a/extension/manifest.json b/extension/manifest.json index cc25531..10939b1 100644 --- a/extension/manifest.json +++ b/extension/manifest.json @@ -1,5 +1,5 @@ { - "name": "nos2x", + "name": "Nostr Connect (formerly nos2x)", "description": "Nostr Signer Extension", "version": "2.2.0", "homepage_url": "https://github.com/fiatjaf/nos2x", @@ -15,7 +15,7 @@ "service_worker": "background.build.js" }, "action": { - "default_title": "nos2x", + "default_title": "Nostr Connect", "default_popup": "popup.html" }, "content_scripts": [ diff --git a/extension/options.html b/extension/options.html index 8eb1649..6bee505 100644 --- a/extension/options.html +++ b/extension/options.html @@ -6,9 +6,7 @@ - +
diff --git a/extension/options.jsx b/extension/options.jsx index 27405a1..16d1214 100644 --- a/extension/options.jsx +++ b/extension/options.jsx @@ -4,6 +4,7 @@ import {render} from 'react-dom' import {generatePrivateKey, nip19} from 'nostr-tools' import QRCode from 'react-qr-code' +import {Logo} from './icons' import {removePermissions} from './common' function Options() { @@ -79,171 +80,194 @@ function Options() { } return ( -
-
-
-
-

Nostr Connect

-

Nostr signer

-
-
-
-
-
Private key:
+
+
+
+
-
- -
- {!privKey && ( - - )} - {privKey && hidingPrivateKey && ( - - )} - {privKey && !hidingPrivateKey && ( - - )} -
-
-

- Your key is stored locally. The developer has no way of seeing - your keys. -

- {privKey && !isKeyValid() && ( -
private key is invalid!
- )} - {!hidingPrivateKey && isKeyValid() && ( -
- -
- )} +

Nostr Connect

+

Nostr signer

-
-
-
- Relays - - 10 - -
-
- Permissions - - 0 - -
-
-
-
Preferred Relays:
+
+
+
Private key:
- {relays.map(({url, policy}, i) => ( -
- -
- - -
- -
- ))}
setNewRelayURL(e.target.value)} - 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" + type={hidingPrivateKey ? 'password' : 'text'} + value={privKey} + onChange={handleKeyChange} + className="flex-1 h-9 bg-transparent border border-primary px-3 py-1 rounded-lg" /> - +
+ {!privKey && ( + + )} + {privKey && hidingPrivateKey && ( + + )} + {privKey && !hidingPrivateKey && ( + + )} +
+
+
+ {privKey && !isKeyValid() ? ( +

Private key is invalid!

+ ) : ( +

+ Your key is stored locally. The developer has no way of + seeing your keys. +

+ )} +
+ {!hidingPrivateKey && isKeyValid() && ( +
+ +
+ )} +
+
+
+
+
+ Relays + + {relays.length} + +
+
+ Permissions + + 0 + +
+
+
+
Preferred Relays:
+
+ {relays.map(({url, policy}, i) => ( +
+ +
+ + +
+ +
+ ))} +
+ setNewRelayURL(e.target.value)} + onKeyDown={e => { + if (e.key === 'Enter') addNewRelay() + }} + placeholder="wss://" + className="flex-1 h-9 bg-transparent border px-3 py-1 border-primary rounded-lg placeholder:text-muted" + /> + +
-
-
- -
-
-
Advanced
-
- - + + Show desktop notifications when a permissions has been used +
-
- {/*
+
+ +
Advanced
+
+ + + +
+ +
+ +
+
+ {/*
*/} - {/*
+ {/*
{messages.map((message, i) => (
{message}
))}
*/} -
- {/*
+
+ {/*

permissions

@@ -357,13 +381,14 @@ function Options() { )} */} - + + ) diff --git a/extension/output.css b/extension/output.css index deffc01..dcdf100 100644 --- a/extension/output.css +++ b/extension/output.css @@ -625,14 +625,18 @@ video { margin-top: 0.25rem; } -.mt-10 { - margin-top: 2.5rem; +.mt-2 { + margin-top: 0.5rem; } .mt-4 { margin-top: 1rem; } +.mt-5 { + margin-top: 1.25rem; +} + .block { display: block; } @@ -665,8 +669,8 @@ video { height: 2.75rem; } -.h-12 { - height: 3rem; +.h-14 { + height: 3.5rem; } .h-5 { @@ -681,8 +685,16 @@ video { height: 2.25rem; } -.w-12 { - width: 3rem; +.h-screen { + height: 100vh; +} + +.w-14 { + width: 3.5rem; +} + +.w-24 { + width: 6rem; } .w-5 { @@ -697,6 +709,14 @@ video { width: 100%; } +.w-screen { + width: 100vw; +} + +.max-w-full { + max-width: 100%; +} + .max-w-xl { max-width: 36rem; } @@ -793,45 +813,36 @@ video { border-color: rgb(229 231 235 / var(--tw-border-opacity)); } -.border-indigo-600 { +.border-primary { --tw-border-opacity: 1; - border-color: rgb(79 70 229 / var(--tw-border-opacity)); + border-color: rgb(225 227 234 / var(--tw-border-opacity)); } -.bg-gray-100 { - --tw-bg-opacity: 1; - background-color: rgb(243 244 246 / var(--tw-bg-opacity)); +.border-secondary { + border-color: rgba(90, 65, 244, 1); } -.bg-gray-200 { +.bg-background { --tw-bg-opacity: 1; - background-color: rgb(229 231 235 / var(--tw-bg-opacity)); + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } -.bg-gray-50 { - --tw-bg-opacity: 1; - background-color: rgb(249 250 251 / var(--tw-bg-opacity)); +.bg-muted { + background-color: rgba(240, 240, 246, 1); } -.bg-indigo-100 { - --tw-bg-opacity: 1; - background-color: rgb(224 231 255 / var(--tw-bg-opacity)); +.bg-primary { + background-color: rgba(90, 65, 244, 1); } -.bg-indigo-600 { - --tw-bg-opacity: 1; - background-color: rgb(79 70 229 / var(--tw-bg-opacity)); +.bg-secondary { + background-color: rgba(90, 65, 244, 0.1); } .bg-transparent { background-color: transparent; } -.bg-white { - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); -} - .p-8 { padding: 2rem; } @@ -889,9 +900,9 @@ video { text-transform: capitalize; } -.text-gray-300 { +.text-foreground { --tw-text-opacity: 1; - color: rgb(209 213 219 / var(--tw-text-opacity)); + color: rgb(54 54 74 / var(--tw-text-opacity)); } .text-gray-500 { @@ -899,14 +910,18 @@ video { color: rgb(107 114 128 / var(--tw-text-opacity)); } -.text-gray-700 { +.text-muted { --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity)); + color: rgb(129 132 152 / var(--tw-text-opacity)); } -.text-indigo-600 { +.text-primary { + color: rgba(90, 65, 244, 1); +} + +.text-red-500 { --tw-text-opacity: 1; - color: rgb(79 70 229 / var(--tw-text-opacity)); + color: rgb(239 68 68 / var(--tw-text-opacity)); } .text-white { @@ -925,6 +940,12 @@ video { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } +.shadow-primary { + --tw-shadow: 0px 10px 36px 0px rgba(64, 47, 132, 0.04); + --tw-shadow-colored: 0px 10px 36px 0px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + .shadow-sm { --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); @@ -963,9 +984,19 @@ video { transition-duration: 150ms; } -.disabled\:text-gray-300:disabled { +.placeholder\:text-muted::-moz-placeholder { --tw-text-opacity: 1; - color: rgb(209 213 219 / var(--tw-text-opacity)); + color: rgb(129 132 152 / var(--tw-text-opacity)); +} + +.placeholder\:text-muted::placeholder { + --tw-text-opacity: 1; + color: rgb(129 132 152 / var(--tw-text-opacity)); +} + +.disabled\:text-muted:disabled { + --tw-text-opacity: 1; + color: rgb(129 132 152 / var(--tw-text-opacity)); } @media (prefers-color-scheme: dark) { @@ -973,29 +1004,4 @@ video { --tw-border-opacity: 1; border-color: rgb(31 41 55 / var(--tw-border-opacity)); } - - .dark\:border-gray-900 { - --tw-border-opacity: 1; - border-color: rgb(17 24 39 / var(--tw-border-opacity)); - } - - .dark\:bg-black { - --tw-bg-opacity: 1; - background-color: rgb(0 0 0 / var(--tw-bg-opacity)); - } - - .dark\:bg-gray-800 { - --tw-bg-opacity: 1; - background-color: rgb(31 41 55 / var(--tw-bg-opacity)); - } - - .dark\:bg-gray-950 { - --tw-bg-opacity: 1; - background-color: rgb(3 7 18 / var(--tw-bg-opacity)); - } - - .dark\:text-gray-300 { - --tw-text-opacity: 1; - color: rgb(209 213 219 / var(--tw-text-opacity)); - } } diff --git a/package.json b/package.json index b99e381..90aa43b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,7 @@ { "license": "WTFPL", "dependencies": { + "@radix-ui/react-tabs": "^1.0.4", "async-mutex": "^0.3.2", "esbuild": "^0.14.54", "eslint": "^8.54.0", @@ -18,8 +19,8 @@ "webextension-polyfill": "^0.8.0" }, "scripts": { + "dev": "./build.js; pnpm exec tailwindcss -i ./extension/style.css -o ./extension/output.css --watch", "build": "./build.js prod", - "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": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ee09bae..ee40d3f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -5,6 +5,9 @@ settings: excludeLinksFromLockfile: false dependencies: + '@radix-ui/react-tabs': + specifier: ^1.0.4 + version: 1.0.4(react-dom@17.0.2)(react@17.0.2) async-mutex: specifier: ^0.3.2 version: 0.3.2 @@ -1718,6 +1721,233 @@ packages: '@nodelib/fs.scandir': 2.1.5 fastq: 1.15.0 + /@radix-ui/primitive@1.0.1: + resolution: {integrity: sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==} + dependencies: + '@babel/runtime': 7.23.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: + '@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/react-compose-refs': 1.0.1(react@17.0.2) + '@radix-ui/react-context': 1.0.1(react@17.0.2) + '@radix-ui/react-primitive': 1.0.3(react-dom@17.0.2)(react@17.0.2) + '@radix-ui/react-slot': 1.0.2(react@17.0.2) + react: 17.0.2 + react-dom: 17.0.2(react@17.0.2) + dev: false + + /@radix-ui/react-compose-refs@1.0.1(react@17.0.2): + resolution: {integrity: sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==} + 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-context@1.0.1(react@17.0.2): + resolution: {integrity: sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==} + 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-direction@1.0.1(react@17.0.2): + resolution: {integrity: sha512-RXcvnXgyvYvBEOhCBuddKecVkoMiI10Jcm5cTI7abJRAHYfFxeu+FBQs/DvdxSYucxR5mna0dNsL6QFlds5TMA==} + 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-id@1.0.1(react@17.0.2): + resolution: {integrity: sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==} + 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 + + /@radix-ui/react-presence@1.0.1(react-dom@17.0.2)(react@17.0.2): + resolution: {integrity: sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==} + 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/react-compose-refs': 1.0.1(react@17.0.2) + '@radix-ui/react-use-layout-effect': 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-primitive@1.0.3(react-dom@17.0.2)(react@17.0.2): + resolution: {integrity: sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==} + 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/react-slot': 1.0.2(react@17.0.2) + react: 17.0.2 + react-dom: 17.0.2(react@17.0.2) + dev: false + + /@radix-ui/react-roving-focus@1.0.4(react-dom@17.0.2)(react@17.0.2): + resolution: {integrity: sha512-2mUg5Mgcu001VkGy+FfzZyzbmuUWzgWkj3rvv4yu+mLw03+mTzbxZHvfcGyFp2b8EkQeMkpRQ5FiA2Vr2O6TeQ==} + 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-collection': 1.0.3(react-dom@17.0.2)(react@17.0.2) + '@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-direction': 1.0.1(react@17.0.2) + '@radix-ui/react-id': 1.0.1(react@17.0.2) + '@radix-ui/react-primitive': 1.0.3(react-dom@17.0.2)(react@17.0.2) + '@radix-ui/react-use-callback-ref': 1.0.1(react@17.0.2) + '@radix-ui/react-use-controllable-state': 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-slot@1.0.2(react@17.0.2): + resolution: {integrity: sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.23.2 + '@radix-ui/react-compose-refs': 1.0.1(react@17.0.2) + react: 17.0.2 + dev: false + + /@radix-ui/react-tabs@1.0.4(react-dom@17.0.2)(react@17.0.2): + resolution: {integrity: sha512-egZfYY/+wRNCflXNHx+dePvnz9FbmssDTJBtgRfDY7e8SE5oIo3Py2eCB1ckAbh1Q7cQ/6yJZThJ++sgbxibog==} + 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-context': 1.0.1(react@17.0.2) + '@radix-ui/react-direction': 1.0.1(react@17.0.2) + '@radix-ui/react-id': 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-roving-focus': 1.0.4(react-dom@17.0.2)(react@17.0.2) + '@radix-ui/react-use-controllable-state': 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-use-callback-ref@1.0.1(react@17.0.2): + resolution: {integrity: sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==} + 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-controllable-state@1.0.1(react@17.0.2): + resolution: {integrity: sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==} + 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-callback-ref': 1.0.1(react@17.0.2) + react: 17.0.2 + dev: false + + /@radix-ui/react-use-layout-effect@1.0.1(react@17.0.2): + resolution: {integrity: sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==} + 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 + /@react-native-community/cli-clean@11.3.10: resolution: {integrity: sha512-g6QjW+DSqoWRHzmIQW3AH22k1AnynWuOdy2YPwYEGgPddTeXZtJphIpEVwDOiC0L4mZv2VmiX33/cGNUwO0cIA==} dependencies: diff --git a/tailwind.config.js b/tailwind.config.js index f20cd2b..9d6d67a 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -2,8 +2,30 @@ module.exports = { content: ['./extension/**/*.{html,js,jsx}'], theme: { - extend: {}, + extend: { + colors: { + background: '#FFF', + foreground: '#36364A', + muted: '#818498' + }, + boxShadow: { + primary: '0px 10px 36px 0px rgba(64, 47, 132, 0.04)', + secondary: + '0px 1px 2px 0px rgba(18, 43, 105, 0.1), 0px 2px 6px 0px rgba(18, 43, 105, 0.04), 0px 0px 0px 1px rgba(18, 43, 105, 0.08)' + }, + borderColor: { + primary: '#E1E3EA', + secondary: 'rgba(90, 65, 244, 1)' + }, + backgroundColor: { + primary: 'rgba(90, 65, 244, 1)', + secondary: 'rgba(90, 65, 244, 0.1)', + muted: 'rgba(240, 240, 246, 1)' + }, + textColor: { + primary: 'rgba(90, 65, 244, 1)' + } + } }, - plugins: [], + plugins: [] } -