show npub key by default.

extension/popup.jsx

@@ -1,15 +1,26 @@
 import browser from 'webextension-polyfill'
 import {render} from 'react-dom'
 import {getPublicKey} from 'nostr-tools'
-import React, {useState, useEffect} from 'react'
+import {bech32} from 'bech32'
+import React, {useState, useRef, useEffect} from 'react'
 
 function Popup() {
   let [key, setKey] = useState('')
+  let keys = useRef([])
 
   useEffect(() => {
     browser.storage.local.get('private_key').then(results => {
       if (results.private_key) {
-        setKey(getPublicKey(results.private_key))
+        let hexKey = getPublicKey(results.private_key)
+        let npubKey = bech32.encode(
+          'npub',
+          bech32.toWords(Buffer.from(hexKey, 'hex'))
+        )
+
+        setKey(npubKey)
+
+        keys.current.push(hexKey)
+        keys.current.push(npubKey)
       } else {
         setKey(null)
       }
@@ -25,7 +36,9 @@ function Popup() {
         </p>
       ) : (
         <>
-          <p>your public key:</p>
+          <p>
+            <a onClick={toggleKeyType}>↩️</a> your public key:
+          </p>
           <pre
             style={{
               whiteSpace: 'pre-wrap',
@@ -39,6 +52,13 @@ function Popup() {
       )}
     </>
   )
+
+  function toggleKeyType(e) {
+    e.preventDefault()
+    let nextKeyType =
+      keys.current[(keys.current.indexOf(key) + 1) % keys.current.length]
+    setKey(nextKeyType)
+  }
 }
 
 render(<Popup />, document.getElementById('main'))