update examples on protocol handlers.

extension/options.jsx

@@ -11,7 +11,7 @@ function Options() {
   let [relays, setRelays] = useState([])
   let [newRelayURL, setNewRelayURL] = useState('')
   let [policies, setPermissions] = useState([])
-  let [protocolHandler, setProtocolHandler] = useState('')
+  let [protocolHandler, setProtocolHandler] = useState('https://njump.me/{raw}')
   let [hidingPrivateKey, hidePrivateKey] = useState(true)
   let [showNotifications, setNotifications] = useState(false)
   let [messages, setMessages] = useState([])
@@ -83,10 +83,25 @@ function Options() {
       <h1 style={{fontSize: '25px', marginBlockEnd: '0px'}}>nos2x</h1>
       <p style={{marginBlockStart: '0px'}}>nostr signer extension</p>
       <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>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'}}>
               <input
                 type={hidingPrivateKey ? 'password' : 'text'}
@@ -95,10 +110,16 @@ function Options() {
                 onChange={handleKeyChange}
               />
               {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>
-            {privKey && !isKeyValid() && <div style={{color: 'red'}}>private key is invalid!</div>}
+            {privKey && !isKeyValid() && (
+              <div style={{color: 'red'}}>private key is invalid!</div>
+            )}
             {!hidingPrivateKey && isKeyValid() && (
               <div
                 style={{
@@ -120,9 +141,19 @@ function Options() {
         </div>
         <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) => (
-              <div key={i} style={{display: 'flex', alignItems: 'center', gap: '15px'}}>
+              <div
+                key={i}
+                style={{display: 'flex', alignItems: 'center', gap: '15px'}}
+              >
                 <input
                   style={{width: '400px'}}
                   value={url}
@@ -146,9 +177,7 @@ function Options() {
                     />
                   </label>
                 </div>
-                <button onClick={removeRelay.bind(null, i)}>
+                <button onClick={removeRelay.bind(null, i)}>remove</button>
-                  remove
-                </button>
               </div>
             ))}
             <div style={{display: 'flex', gap: '10px', marginTop: '5px'}}>
@@ -156,9 +185,13 @@ function Options() {
                 style={{width: '400px'}}
                 value={newRelayURL}
                 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>
@@ -185,23 +218,27 @@ function Options() {
                     onChange={handleChangeProtocolHandler}
                     style={{width: '680px', maxWidth: '90%'}}
                   />
-                  {!showProtocolHandlerHelp && <button onClick={changeShowProtocolHandlerHelp}>?</button>}
+                  {!showProtocolHandlerHelp && (
+                    <button onClick={changeShowProtocolHandlerHelp}>?</button>
+                  )}
                 </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
     {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
     {relay0} = first relay in a nprofile or nevent
     {relay1} = second 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
 
     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>
@@ -214,7 +251,11 @@ function Options() {
             onChange={handleNotifications}
           />
         </label>
-        <button disabled={!unsavedChanges.length} onClick={saveChanges} style={{padding: '5px 20px'}}>
+        <button
+          disabled={!unsavedChanges.length}
+          onClick={saveChanges}
+          style={{padding: '5px 20px'}}
+        >
           save
         </button>
         <div style={{fontSize: '120%'}}>
@@ -237,8 +278,7 @@ function Options() {
             </tr>
           </thead>
           <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)}>
                 <td>{host}</td>
                 <td>{type}</td>
@@ -266,12 +306,23 @@ function Options() {
                   </button>
                 </td>
               </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>
         </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>
     </>
   )
@@ -342,10 +393,7 @@ function Options() {
   }
 
   function removeRelay(i) {
-    setRelays([
+    setRelays([...relays.slice(0, i), ...relays.slice(i + 1)])
-      ...relays.slice(0, i),
-      ...relays.slice(i + 1)
-    ])
     addUnsavedChanges('relays')
   }