diff --git a/extension/icons.jsx b/extension/icons.jsx index b38fff9..54add30 100644 --- a/extension/icons.jsx +++ b/extension/icons.jsx @@ -1,6 +1,6 @@ import React from 'react' -export function Logo({props}) { +export function LogoIcon() { return ( ) } + +export function SettingsIcon(props) { + return ( + + + + + ) +} diff --git a/extension/options.jsx b/extension/options.jsx index 0b0aa0e..a36d6b6 100644 --- a/extension/options.jsx +++ b/extension/options.jsx @@ -4,7 +4,7 @@ import {render} from 'react-dom' import {generatePrivateKey, nip19} from 'nostr-tools' import QRCode from 'react-qr-code' import * as Tabs from '@radix-ui/react-tabs' -import {Logo} from './icons' +import {LogoIcon} from './icons' import {removePermissions} from './common' function Options() { @@ -83,7 +83,7 @@ function Options() {
- +

Nostr Connect

Nostr signer

@@ -153,10 +153,7 @@ function Options() {
- + - - -nos2x - -
- - + + + + nos2x + + + + +
+ + + diff --git a/extension/popup.jsx b/extension/popup.jsx index 4259559..2a67f06 100644 --- a/extension/popup.jsx +++ b/extension/popup.jsx @@ -1,12 +1,30 @@ import browser from 'webextension-polyfill' import {render} from 'react-dom' import {getPublicKey, nip19} from 'nostr-tools' -import React, {useState, useRef, useEffect} from 'react' +import React, {useState, useMemo, useRef, 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([]) + + let keys = useRef({npub: '', hex: '', nprofile: ''}) + let avatarURI = useMemo( + () => + pubKey + ? 'data:image/svg+xml;utf8,' + + encodeURIComponent(minidenticon(pubKey, 90, 30)) + : null, + [pubKey] + ) + + const gotoSettings = () => { + browser.tabs.create({ + url: browser.runtime.getURL('/options.html') + }) + } useEffect(() => { browser.storage.local.get(['private_key', 'relays']).then(results => { @@ -16,8 +34,8 @@ function Popup() { setPubKey(npubKey) - keys.current.push(npubKey) - keys.current.push(hexKey) + keys.current.npub = npubKey + keys.current.hex = hexKey if (results.relays) { let relaysList = [] @@ -32,7 +50,7 @@ function Popup() { pubkey: hexKey, relays: relaysList }) - keys.current.push(nprofileKey) + keys.current.nprofile = nprofileKey } } } else { @@ -42,53 +60,106 @@ function Popup() { }, []) return ( - <> -

nos2x

- {pubKey === null ? ( -

- you don't have a private key set. use the options page to set one. -

- ) : ( - <> -

- ↩️ your public key: -

- 
-            {pubKey}
-
- -
- +
+ {!pubKey ? ( +
+
+

+ Click here to enter or create +
+ your first identity +

+ + +
- + +
+ ) : ( +
+
+
+ {avatarURI ? ( + + ) : ( +
+ )} +

Account

+
+ +
+
+ + + + npub + + + hex + + + naddr + + + +
+ +
+
+ +
+ + +
+
)} - +
) - - function toggleKeyType(e) { - e.preventDefault() - let nextKeyType = - keys.current[(keys.current.indexOf(pubKey) + 1) % keys.current.length] - setPubKey(nextKeyType) - } } render(, document.getElementById('main')) diff --git a/extension/prompt.html b/extension/prompt.html index 2b6fdd5..2b1fdf4 100644 --- a/extension/prompt.html +++ b/extension/prompt.html @@ -1,8 +1,13 @@ - - -nos2x - -
- - + + + + nos2x + + + + +
+ + + diff --git a/package.json b/package.json index 48ad46b..52ae9b7 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "eslint-plugin-babel": "^5.3.1", "eslint-plugin-react": "^7.33.2", "events": "^3.3.0", + "minidenticons": "^4.2.0", "nostr-tools": "^1.17.0", "prettier": "^2.8.8", "react": "^17.0.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ee40d3f..5b5caf9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -26,6 +26,9 @@ dependencies: events: specifier: ^3.3.0 version: 3.3.0 + minidenticons: + specifier: ^4.2.0 + version: 4.2.0 nostr-tools: specifier: ^1.17.0 version: 1.17.0 @@ -4947,6 +4950,11 @@ packages: engines: {node: '>=6'} dev: false + /minidenticons@4.2.0: + resolution: {integrity: sha512-2T3VU1N30yI3kXMRbdLsJ5DgsBoGLi2+2hbm1xTOU2RQXWW5wwpmz9XQohVSsVlhymf4W69sMGj6s39t796PBA==} + engines: {node: '>=15.14.0'} + dev: false + /minimatch@3.1.2: resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==} dependencies: