Add qr scanning for wallet connect

package.json

@@ -53,6 +53,7 @@
     "@sveltejs/adapter-static": "^3.0.4",
     "@tiptap/core": "^2.12.0",
     "@types/qrcode": "^1.5.5",
+    "@types/throttle-debounce": "^5.0.2",
     "@vite-pwa/assets-generator": "^0.2.6",
     "@vite-pwa/sveltekit": "^0.6.6",
     "@welshman/app": "^0.3.10",
@@ -77,7 +78,9 @@
     "nostr-signer-capacitor-plugin": "^0.0.4",
     "nostr-tools": "^2.14.2",
     "prettier-plugin-tailwindcss": "^0.6.5",
+    "qr-scanner": "^1.4.2",
     "qrcode": "^1.5.4",
+    "throttle-debounce": "^5.0.2",
     "tippy.js": "^6.3.7"
   },
   "pnpm": {

src/app/components/WalletConnect.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
+  import {debounce} from "throttle-debounce"
   import {nwc} from "@getalby/sdk"
   import {sleep} from "@welshman/lib"
   import Link from "@lib/components/Link.svelte"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
+  import Scanner from "@lib/components/Scanner.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
   import Field from "@lib/components/Field.svelte"
   import Divider from "@lib/components/Divider.svelte"
@@ -77,7 +79,18 @@
     }
   }
 
+  const toggleScanner = () => {
+    showScanner = !showScanner
+  }
+
+  const onScan = debounce(1000, async (data: string) => {
+    showScanner = false
+    nostrWalletConnectUrl = data
+    await connectWithNWC()
+  })
+
   let nostrWalletConnectUrl = $state("")
+  let showScanner = $state(false)
   let loading = $state(false)
 </script>
 
@@ -121,7 +134,9 @@
           name="flotilla-nwc"
           class="grow"
           type="password" />
-        <Icon icon="qr-code" />
+        <Button onclick={toggleScanner}>
+          <Icon icon="qr-code" />
+        </Button>
       </label>
     {/snippet}
     {#snippet info()}
@@ -131,6 +146,9 @@
       >.
     {/snippet}
   </Field>
+  {#if showScanner}
+    <Scanner onscan={onScan} />
+  {/if}
   <ModalFooter>
     <Button class="btn btn-link" onclick={back}>
       <Icon icon="alt-arrow-left" />

src/lib/components/Scanner.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import {onMount} from "svelte"
+  import QrScanner from "qr-scanner"
+  import Spinner from "@lib/components/Spinner.svelte"
+
+  const {onscan} = $props()
+
+  let video: HTMLVideoElement
+  let scanner: QrScanner
+  let loading = $state(true)
+
+  onMount(() => {
+    scanner = new QrScanner(video, r => onscan(r.data), {
+      returnDetailedScanResult: true,
+    })
+
+    scanner.start().then(() => {
+      loading = false
+    })
+
+    return () => scanner.destroy()
+  })
+</script>
+
+<div class="bg-alt flex min-h-48 w-full flex-col items-center justify-center rounded p-px">
+  {#if loading}
+    <p class="py-20">
+      <Spinner loading>Loading your camera...</Spinner>
+    </p>
+  {/if}
+  <video class="m-auto rounded" class:h-0={loading} bind:this={video}></video>
+</div>

svelte.config.js

@@ -25,4 +25,9 @@ export default {
       },
     },
   },
+  compilerOptions: {
+    warningFilter: (warning) => {
+      return !['a11y_media_has_caption'].includes(warning.code)
+    },
+  }
 }