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

saner QR code behavior on popup.

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

96
extension/popup.jsx
View File

@@ -6,24 +6,10 @@ import QRCode from 'react-qr-code'
function Popup() { function Popup() {
let [pubKey, setPubKey] = useState('') let [pubKey, setPubKey] = useState('')
let [privKey, setPrivKey] = useState('')
let keys = useRef([]) let keys = useRef([])
let [showQR, setShowQR] = useState('')
const QrIcon = () => (
<svg width="30px" height="30px" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" className="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 013.75 9.375v-4.5zM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0113.5 9.375v-4.5z"/>
<path stroke-linecap="round" stroke-linejoin="round"
d="M6.75 6.75h.75v.75h-.75v-.75zM6.75 16.5h.75v.75h-.75v-.75zM16.5 6.75h.75v.75h-.75v-.75zM13.5 13.5h.75v.75h-.75v-.75zM13.5 19.5h.75v.75h-.75v-.75zM19.5 13.5h.75v.75h-.75v-.75zM19.5 19.5h.75v.75h-.75v-.75zM16.5 16.5h.75v.75h-.75v-.75z"/>
</svg>
)
useEffect(() => { useEffect(() => {
browser.storage.local.get(['private_key', 'relays']).then(results => { browser.storage.local.get(['private_key', 'relays']).then(results => {
setPrivKey(results.private_key)
if (results.private_key) { if (results.private_key) {
let hexKey = getPublicKey(results.private_key) let hexKey = getPublicKey(results.private_key)
let npubKey = nip19.npubEncode(hexKey) let npubKey = nip19.npubEncode(hexKey)
@@ -56,59 +42,51 @@ function Popup() {
}, []) }, [])
return ( return (
<> <>
<h2>nos2x</h2> <h2>nos2x</h2>
{pubKey === null ? ( {pubKey === null ? (
<p style={{width: '150px'}}> <p style={{width: '150px'}}>
you don't have a private key set. use the options page to set one. you don't have a private key set. use the options page to set one.
</p> </p>
) : ( ) : (
<> <>
<p> <p>
<a onClick={toggleKeyType}>↩️</a> your public key: <a onClick={toggleKeyType}>↩️</a> your public key:
</p> </p>
<pre <pre
style={{ style={{
whiteSpace: 'pre-wrap', whiteSpace: 'pre-wrap',
wordBreak: 'break-all', wordBreak: 'break-all',
width: '200px' width: '200px'
}} }}
> >
<code>{pubKey}</code> <code>{pubKey}</code>
</pre> </pre>
<div style={{float: 'left', marginRight: '30px', marginBottom: '20px'}}> <div
<a onClick={() => setShowQR('pub')}> style={{
<QrIcon></QrIcon> PUB height: 'auto',
</a> margin: '0 auto',
</div> maxWidth: 256,
width: '100%'
<div style={{float: 'left', marginRight: '30px', marginBottom: '20px'}}> }}
<a onClick={() => setShowQR('priv')}> >
<QrIcon></QrIcon> PRIV <QRCode
</a> size={256}
</div> style={{height: 'auto', maxWidth: '100%', width: '100%'}}
value={pubKey.startsWith('n') ? pubKey.toUpperCase() : pubKey}
{ showQR && ( viewBox={`0 0 256 256`}
<div id={'qrCodeDiv'} style={{ height: 'auto', margin: '0 auto', maxWidth: 256, width: '100%', marginTop: '50px' }}> />
{showQR === 'priv' ? (<p>PRIVATE KEY</p>) : (<p>PUBLIC KEY</p>)} </div>
<QRCode </>
size={256} )}
style={{ height: 'auto', maxWidth: '100%', width: '100%' }} </>
value={showQR === 'priv' ? privKey : pubKey}
viewBox={`0 0 256 256`}
/>
</div>
)}
</>
)}
</>
) )
function toggleKeyType(e) { function toggleKeyType(e) {
e.preventDefault() e.preventDefault()
let nextKeyType = let nextKeyType =
keys.current[(keys.current.indexOf(pubKey) + 1) % keys.current.length] keys.current[(keys.current.indexOf(pubKey) + 1) % keys.current.length]
setPubKey(nextKeyType) setPubKey(nextKeyType)
} }
} }