Add profile share qr code

package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "vite build",
     "preview": "vite preview",
     "check:es": "eslint src/*/** --quiet",
@@ -39,6 +39,7 @@
     "localforage-memoryStorageDriver": "^0.9.2",
     "nostr-tools": "^1.2.1",
     "npm-run-all": "^4.1.5",
+    "qrcode": "^1.5.1",
     "ramda": "^0.28.0",
     "svelte-check": "^3.0.3",
     "svelte-link-preview": "^0.3.3",

src/App.svelte

@@ -31,6 +31,7 @@
   import PubKeyLogin from "src/views/PubKeyLogin.svelte"
   import NoteDetail from "src/views/NoteDetail.svelte"
   import PersonSettings from "src/views/PersonSettings.svelte"
+  import PersonShare from "src/views/PersonShare.svelte"
   import NoteCreate from "src/views/NoteCreate.svelte"
   import ChatEdit from "src/views/ChatEdit.svelte"
   import NotFound from "src/routes/NotFound.svelte"
@@ -109,12 +110,12 @@
       console.log(
         'Connection stats',
         pool.getConnections()
-          .map(({url, stats: s}) => ({url, avgRequest: s.timer / s.count}))
+          .map(({nostr: {url}, stats: s}) => ({url, avgRequest: s.timer / s.count}))
       )
 
       // Alert the user to any heinously slow connections
       slowConnections = pool.getConnections()
-        .filter(({url, stats: s}) => relayUrls.includes(url) && s.timer / s.count > 3000)
+        .filter(({nostr: {url}, stats: s}) => relayUrls.includes(url) && s.timer / s.count > 3000)
     }
 
     const retrieveRelayMeta = async () => {
@@ -360,6 +361,8 @@
         <PubKeyLogin />
       {:else if $modal.type === 'person/settings'}
         <PersonSettings />
+      {:else if $modal.type === 'person/share'}
+        <PersonShare />
       {:else if $modal.type === 'person/list'}
         <PersonList pubkeys={$modal.pubkeys} />
       {:else if $modal.type === 'message'}

src/routes/Person.svelte

@@ -93,6 +93,10 @@
   const openAdvanced = () => {
     modal.set({type: 'person/settings', person})
   }
+
+  const share = () => {
+    modal.set({type: 'person/share', person})
+  }
 </script>
 
 <div
@@ -141,6 +145,9 @@
             </Anchor>
             {/if}
           {/if}
+          <Anchor type="button-circle" on:click={share}>
+            <i class="fa fa-qrcode" />
+          </Anchor>
         </div>
       </div>
       <p>{@html renderContent(person.about || '')}</p>

src/views/PersonShare.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import QRCode from 'qrcode'
+  import {prop} from 'ramda'
+  import {nip19} from 'nostr-tools'
+  import {copyToClipboard} from "src/util/html"
+  import {onMount} from 'svelte'
+  import Content from 'src/partials/Content.svelte'
+  import Input from 'src/partials/Input.svelte'
+  import {getBestRelay} from 'src/agent/helpers'
+  import {modal, toast} from 'src/app'
+
+  const {pubkey} = $modal.person
+  const relays = [prop('url', getBestRelay(pubkey))]
+  const nprofile = nip19.nprofileEncode({pubkey, relays})
+
+  let canvas
+
+  const copyKey = () => {
+    copyToClipboard(nprofile)
+    toast.show("info", "Profile has been copied to the clipboard!")
+  }
+
+  onMount(() => QRCode.toCanvas(canvas, nprofile))
+</script>
+
+<Content size="lg">
+  <canvas class="m-auto" bind:this={canvas} />
+  <Input value={nprofile}>
+    <button slot="after" class="fa fa-copy" on:click={copyKey} />
+  </Input>
+</Content>