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

update examples on protocol handlers.

Browse Source
This commit is contained in:
fiatjaf
2023-10-18 10:51:28 -03:00
parent 34d41e27ec
commit 9c9d591b46
1 changed files with 112 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

176
extension/options.jsx
View File

@@ -11,7 +11,7 @@ function Options() {
let [relays, setRelays] = useState([]) let [relays, setRelays] = useState([])
let [newRelayURL, setNewRelayURL] = useState('') let [newRelayURL, setNewRelayURL] = useState('')
let [policies, setPermissions] = useState([]) let [policies, setPermissions] = useState([])
let [protocolHandler, setProtocolHandler] = useState('') let [protocolHandler, setProtocolHandler] = useState('https://njump.me/{raw}')
let [hidingPrivateKey, hidePrivateKey] = useState(true) let [hidingPrivateKey, hidePrivateKey] = useState(true)
let [showNotifications, setNotifications] = useState(false) let [showNotifications, setNotifications] = useState(false)
let [messages, setMessages] = useState([]) let [messages, setMessages] = useState([])
@@ -83,10 +83,25 @@ function Options() {
<h1 style={{fontSize: '25px', marginBlockEnd: '0px'}}>nos2x</h1> <h1 style={{fontSize: '25px', marginBlockEnd: '0px'}}>nos2x</h1>
<p style={{marginBlockStart: '0px'}}>nostr signer extension</p> <p style={{marginBlockStart: '0px'}}>nostr signer extension</p>
<h2 style={{marginBlockStart: '20px', marginBlockEnd: '5px'}}>options</h2> <h2 style={{marginBlockStart: '20px', marginBlockEnd: '5px'}}>options</h2>
<div style={{marginBottom: '10px', display: 'flex', flexDirection: 'column', gap: '10px', width: 'fit-content'}}> <div
style={{
marginBottom: '10px',
display: 'flex',
flexDirection: 'column',
gap: '10px',
width: 'fit-content'
}}
>
<div> <div>
<div>private key:&nbsp;</div> <div>private key:&nbsp;</div>
<div style={{marginLeft: '10px', display: 'flex', flexDirection: 'column', gap: '10px'}}> <div
style={{
marginLeft: '10px',
display: 'flex',
flexDirection: 'column',
gap: '10px'
}}
>
<div style={{display: 'flex', gap: '10px'}}> <div style={{display: 'flex', gap: '10px'}}>
<input <input
type={hidingPrivateKey ? 'password' : 'text'} type={hidingPrivateKey ? 'password' : 'text'}
@@ -95,10 +110,16 @@ function Options() {
onChange={handleKeyChange} onChange={handleKeyChange}
/> />
{privKey === '' && <button onClick={generate}>generate</button>} {privKey === '' && <button onClick={generate}>generate</button>}
{privKey && hidingPrivateKey && <button onClick={() => hidePrivateKey(false)}>show key</button>} {privKey && hidingPrivateKey && (
{privKey && !hidingPrivateKey && <button onClick={() => hidePrivateKey(true)}>hide key</button>} <button onClick={() => hidePrivateKey(false)}>show key</button>
)}
{privKey && !hidingPrivateKey && (
<button onClick={() => hidePrivateKey(true)}>hide key</button>
)}
</div> </div>
{privKey && !isKeyValid() && <div style={{color: 'red'}}>private key is invalid!</div>} {privKey && !isKeyValid() && (
<div style={{color: 'red'}}>private key is invalid!</div>
)}
{!hidingPrivateKey && isKeyValid() && ( {!hidingPrivateKey && isKeyValid() && (
<div <div
style={{ style={{
@@ -120,9 +141,19 @@ function Options() {
</div> </div>
<div> <div>
<div>preferred relays:</div> <div>preferred relays:</div>
<div style={{marginLeft: '10px', display: 'flex', flexDirection: 'column', gap: '1px'}}> <div
style={{
marginLeft: '10px',
display: 'flex',
flexDirection: 'column',
gap: '1px'
}}
>
{relays.map(({url, policy}, i) => ( {relays.map(({url, policy}, i) => (
<div key={i} style={{display: 'flex', alignItems: 'center', gap: '15px'}}> <div
key={i}
style={{display: 'flex', alignItems: 'center', gap: '15px'}}
>
<input <input
style={{width: '400px'}} style={{width: '400px'}}
value={url} value={url}
@@ -146,9 +177,7 @@ function Options() {
/> />
</label> </label>
</div> </div>
<button onClick={removeRelay.bind(null, i)}> <button onClick={removeRelay.bind(null, i)}>remove</button>
remove
</button>
</div> </div>
))} ))}
<div style={{display: 'flex', gap: '10px', marginTop: '5px'}}> <div style={{display: 'flex', gap: '10px', marginTop: '5px'}}>
@@ -156,19 +185,23 @@ function Options() {
style={{width: '400px'}} style={{width: '400px'}}
value={newRelayURL} value={newRelayURL}
onChange={e => setNewRelayURL(e.target.value)} onChange={e => setNewRelayURL(e.target.value)}
onKeyDown={e => { if (e.key === 'Enter') addNewRelay()}} onKeyDown={e => {
if (e.key === 'Enter') addNewRelay()
}}
/> />
<button disabled={!newRelayURL} onClick={addNewRelay}>add relay</button> <button disabled={!newRelayURL} onClick={addNewRelay}>
add relay
</button>
</div> </div>
</div> </div>
</div> </div>
<div> <div>
<label style={{ display: 'flex', alignItems: 'center' }}> <label style={{display: 'flex', alignItems: 'center'}}>
<div> <div>
handle{' '} handle{' '}
<span style={{padding: '2px', background: 'silver'}}>nostr:</span>{' '} <span style={{padding: '2px', background: 'silver'}}>nostr:</span>{' '}
links: links:
</div> </div>
<input <input
type="checkbox" type="checkbox"
checked={handleNostrLinks} checked={handleNostrLinks}
@@ -185,28 +218,32 @@ function Options() {
onChange={handleChangeProtocolHandler} onChange={handleChangeProtocolHandler}
style={{width: '680px', maxWidth: '90%'}} style={{width: '680px', maxWidth: '90%'}}
/> />
{!showProtocolHandlerHelp && <button onClick={changeShowProtocolHandlerHelp}>?</button>} {!showProtocolHandlerHelp && (
<button onClick={changeShowProtocolHandlerHelp}>?</button>
)}
</div> </div>
{showProtocolHandlerHelp && (<pre>{` {showProtocolHandlerHelp && (
<pre>{`
{raw} = anything after the colon, i.e. the full nip19 bech32 string
{hex} = hex pubkey for npub or nprofile, hex event id for note or nevent {hex} = hex pubkey for npub or nprofile, hex event id for note or nevent
{p_or_e} = "p" for npub or nprofile, "e" for note or nevent {p_or_e} = "p" for npub or nprofile, "e" for note or nevent
{u_or_n} = "u" for npub or nprofile, "n" for note or nevent {u_or_n} = "u" for npub or nprofile, "n" for note or nevent
{relay0} = first relay in a nprofile or nevent {relay0} = first relay in a nprofile or nevent
{relay1} = second relay in a nprofile or nevent {relay1} = second relay in a nprofile or nevent
{relay2} = third relay in a nprofile or nevent {relay2} = third relay in a nprofile or nevent
{raw} = anything after the colon, i.e. the full nip19 bech32 string
{hrp} = human-readable prefix of the nip19 string {hrp} = human-readable prefix of the nip19 string
examples: examples:
- https://nostr.guru/{p_or_e}/{hex} - https://njump.me/{raw}
- https://brb.io/{u_or_n}/{hex} - https://snort.social/{raw}
- https://notes.blockcore.net/{p_or_e}/{hex} - https://nostr.band/{raw}
`}</pre>)} `}</pre>
)}
</div> </div>
)} )}
</div> </div>
</div> </div>
<label style={{ display: 'flex', alignItems: 'center' }}> <label style={{display: 'flex', alignItems: 'center'}}>
show notifications when permissions are used: show notifications when permissions are used:
<input <input
type="checkbox" type="checkbox"
@@ -214,7 +251,11 @@ function Options() {
onChange={handleNotifications} onChange={handleNotifications}
/> />
</label> </label>
<button disabled={!unsavedChanges.length} onClick={saveChanges} style={{padding: '5px 20px'}}> <button
disabled={!unsavedChanges.length}
onClick={saveChanges}
style={{padding: '5px 20px'}}
>
save save
</button> </button>
<div style={{fontSize: '120%'}}> <div style={{fontSize: '120%'}}>
@@ -237,41 +278,51 @@ function Options() {
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{policies.map( {policies.map(({host, type, accept, conditions, created_at}) => (
({host, type, accept, conditions, created_at}) => ( <tr key={host + type + accept + JSON.stringify(conditions)}>
<tr key={host + type + accept + JSON.stringify(conditions)}> <td>{host}</td>
<td>{host}</td> <td>{type}</td>
<td>{type}</td> <td>{accept === 'true' ? 'allow' : 'deny'}</td>
<td>{accept === 'true' ? 'allow' : 'deny'}</td> <td>
<td> {conditions.kinds
{conditions.kinds ? `kinds: ${Object.keys(conditions.kinds).join(', ')}`
? `kinds: ${Object.keys(conditions.kinds).join(', ')}` : 'always'}
: 'always'} </td>
</td> <td>
<td> {new Date(created_at * 1000)
{new Date(created_at * 1000) .toISOString()
.toISOString() .split('.')[0]
.split('.')[0] .split('T')
.split('T') .join(' ')}
.join(' ')} </td>
</td> <td>
<td> <button
<button onClick={handleRevoke}
onClick={handleRevoke} data-host={host}
data-host={host} data-accept={accept}
data-accept={accept} data-type={type}
data-type={type} >
> revoke
revoke </button>
</button> </td>
</td> </tr>
</tr> ))}
) {!policies.length && (
<tr>
{Array(5)
.fill('N/A')
.map((v, i) => (
<td key={i}>{v}</td>
))}
</tr>
)} )}
{!policies.length && <tr>{Array(5).fill('N/A').map((v, i) => (<td key={i}>{v}</td>))}</tr>}
</tbody> </tbody>
</table> </table>
{!policies.length && <div style={{marginTop: '5px'}}>no permissions have been granted yet</div>} {!policies.length && (
<div style={{marginTop: '5px'}}>
no permissions have been granted yet
</div>
)}
</div> </div>
</> </>
) )
@@ -342,10 +393,7 @@ function Options() {
} }
function removeRelay(i) { function removeRelay(i) {
setRelays([ setRelays([...relays.slice(0, i), ...relays.slice(i + 1)])
...relays.slice(0, i),
...relays.slice(i + 1)
])
addUnsavedChanges('relays') addUnsavedChanges('relays')
} }