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

saner QR code behavior on options page.

Browse Source
This commit is contained in:
fiatjaf
2023-06-10 22:37:00 -03:00
parent adf3116597
commit 287dac6085
1 changed files with 18 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
extension/options.jsx
View File

@@ -1,13 +1,12 @@
import browser from 'webextension-polyfill' import browser from 'webextension-polyfill'
import React, {useState, useCallback, useEffect} from 'react' import React, {useState, useCallback, useEffect} from 'react'
import {render} from 'react-dom' import {render} from 'react-dom'
import {generatePrivateKey, getPublicKey, nip19} from 'nostr-tools' import {generatePrivateKey, nip19} from 'nostr-tools'
import QRCode from 'react-qr-code' import QRCode from 'react-qr-code'
import {removePermissions, PERMISSION_NAMES} from './common' import {removePermissions, PERMISSION_NAMES} from './common'
function Options() { function Options() {
let [pubKey, setPubKey] = useState('')
let [privKey, setPrivKey] = useState('') let [privKey, setPrivKey] = useState('')
let [relays, setRelays] = useState([]) let [relays, setRelays] = useState([])
let [newRelayURL, setNewRelayURL] = useState('') let [newRelayURL, setNewRelayURL] = useState('')
@@ -15,7 +14,6 @@ function Options() {
let [protocolHandler, setProtocolHandler] = useState(null) let [protocolHandler, setProtocolHandler] = useState(null)
let [hidingPrivateKey, hidePrivateKey] = useState(true) let [hidingPrivateKey, hidePrivateKey] = useState(true)
let [message, setMessage] = useState('') let [message, setMessage] = useState('')
let [showQR, setShowQR] = useState('')
const showMessage = useCallback(msg => { const showMessage = useCallback(msg => {
setMessage(msg) setMessage(msg)
@@ -28,11 +26,6 @@ function Options() {
.then(results => { .then(results => {
if (results.private_key) { if (results.private_key) {
setPrivKey(nip19.nsecEncode(results.private_key)) setPrivKey(nip19.nsecEncode(results.private_key))
let hexKey = getPublicKey(results.private_key)
let npubKey = nip19.npubEncode(hexKey)
setPubKey(npubKey)
} }
if (results.relays) { if (results.relays) {
let relaysList = [] let relaysList = []
@@ -127,6 +120,23 @@ function Options() {
<label> <label>
<div>private key:&nbsp;</div> <div>private key:&nbsp;</div>
<div style={{marginLeft: '10px'}}> <div style={{marginLeft: '10px'}}>
{!hidingPrivateKey && (
<div
style={{
height: 'auto',
maxWidth: 256,
width: '100%'
}}
>
<QRCode
size={256}
style={{height: 'auto', maxWidth: '100%', width: '100%'}}
value={privKey.toUpperCase()}
viewBox={`0 0 256 256`}
/>
</div>
)}
<div style={{display: 'flex'}}> <div style={{display: 'flex'}}>
<input <input
type={hidingPrivateKey ? 'password' : 'text'} type={hidingPrivateKey ? 'password' : 'text'}
@@ -142,34 +152,6 @@ function Options() {
<button disabled={!isKeyValid()} onClick={saveKey}> <button disabled={!isKeyValid()} onClick={saveKey}>
save save
</button> </button>
<button disabled={!isKeyValid()} onClick={() => setShowQR('priv')}>
Show QR for private key
</button>
<button disabled={!isKeyValid()} onClick={() => setShowQR('pub')}>
Show QR for public key
</button>
{showQR && (
<div
id={'qrCodeDiv'}
style={{
height: 'auto',
maxWidth: 256,
width: '100%',
marginTop: '20px',
marginBottom: '30px'
}}
>
<QRCode
size={256}
style={{height: 'auto', maxWidth: '100%', width: '100%'}}
value={showQR === 'priv' ? privKey : pubKey}
viewBox={`0 0 256 256`}
/>
</div>
)}
</div> </div>
</label> </label>
{policies?.length > 0 && ( {policies?.length > 0 && (