From 00f383ff2e5500975577244f5370af48ea63c809 Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Tue, 15 Jul 2025 15:49:26 -0700
Subject: [PATCH] Add qr scanning for wallet connect

---
 package.json                            |   3 +++
 pnpm-lock.yaml                          | Bin 338009 -> 338663 bytes
 src/app/components/WalletConnect.svelte |  20 ++++++++++++++-
 src/lib/components/Scanner.svelte       |  32 ++++++++++++++++++++++++
 svelte.config.js                        |   5 ++++
 5 files changed, 59 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/components/Scanner.svelte

diff --git a/package.json b/package.json
index dd44cc7..f03a8fe 100644
--- a/package.json
+++ b/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": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f42538fe87b98551cbfeea4799c4daa00a46af44..0554ffee2806b40605538b0de102f658c7c308f0 100644
GIT binary patch
delta 2454
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

delta 2057
zcmZ`)ORU>i8CGl4+uPgT-sxNl6aj;TL?Ke`yc~Ow24cra{EVH%@nb-$A8}$Qj`MOH
zTO*BF%?_1`G+wYAAvP2Sb#XTcR=gHSESLoni_Q#>wo{l^3}Oc)xp8N%1iRz!{NMS{
z_y51Y^VheJ|M0uxw=V7_Z(IXDo7{dL*uVGcUIzdQw{ppI2ViBpIQIbf+CA;y>E7x)
z&%bo<`ti4Zf3C24`oo)@n9I)wOhb!Wn9(1ValKV3SiLgAj};H0TwAvK5jCSoj5Hg$
zF*4(<sM@t-xa@Hi%a7;@?6*8GLsyWQF(jQC-4Hb_T)p$KwEEfO?7rz+-EZV><+jNr
zi^;kT4_3NxA8koWN1_EcUtY>amM_Fzd|(M$)sHidRM*XM<Z;fZo+W}{z+=)l^jZ$A
z3ig!Zm;s@OMY%!7ZU=3yo<2ZVPab{hjXwbgJ5gbNlBIQ78-@(3*S%_CIIT|fAv>G#
z1I=&cr!EUQEqH-o6Uc5;*c_HUVp*h@g<PpC4SA}q6&0Ug(YO~d-l!!QRe#Z2i{e*%
z?_b#^iReh|a&VEwJGEk=)sJEt<}fN3ms!*0rag=?Ap>cY@}%6NYV1%I`ZZjII)STI
zwL*g;icTh)GR<jz6#FiMI#e8*&nlO|hv5Dv($alJ8pAjq7RIq#9~rLPs_I?Uv~7h&
z@Wl)@T5Pit7m<m8xey}Pkx`GuMUnHG%#7};qu4;PBB!|}q%_A1<h(~9gE-_iiZ*Tf
z`l%ubY2#Q8m)hfeg=&oFVqlP+#X3WW=`U?IF4Li`DsBjq1Fb$~(6%Vxd69D24ison
z4r>OklN(^AXub@V_O#}Uim%Lf?YX}C&EL}YRB|KV!y-sQa-k)_iZ~4XA}UfsTysgi
zhk6vmC=MNXY{O9qT&c|h1D|QK)!>{WlPRcmd&W++5n+=RvQ)~eMWHuJ#blG)&w=~9
z9@)+UX}9X=eBicGB8$4sd?;b~B&!wSzOtN0UZvihjK)-DK3=+1Z!kB}QEw1Lvuw5}
zwV50$;Wf#yaE~^vye}wKrmt->ajQEYTui5J#$@}Gsi@PWuZJ_a+OUlNP#2r*+z7~F
zIiTX2pBpulayj1(rWrd}4_yc0yGA9VroMpCk^vVg93|&Nh-|AhB8J)1LExXfwChcf
zg{7*OmmOQG*$50tH8wD5H_S?Kc2sE<CaPSauyJi+sg?u7qlKt9co#7xrT{IVXgZAz
z*})1U8_hvWWn70RGR365Nxu0IxVlT!)e6N(9}M-ZTxM$R;)Iv+xV&iaQL8#Pct7Ou
ziJC)28)us1Y?bZjg(XA^nI7#hZh1_1O%rLCtqd{cE9_Lp2M8&4SN9*H8$U?C@CZoD
zHXEBJz0^&|ZQGf#h4Z~ArtD><WwMMrH^+-IL55J#nW^zmgBNT>l*GO)c2T#hk{rTd
zk?Jg|z}KS=D#}eOKaXo$=OI>~{>Pg;HHDr~kVTjvx~dVBxK73`RY|zkG`xCD8<3;-
zEk2`_AQcM~-OE^l)#7=~l*CDsR3VcVGG!tTDjA$!bSC4F?;swuaUAvD>mLG#uc5%X
z6BIcA-s-ix$@!DJ32?-ucKf~L-+u<KA3QU_wHvQZ_-4ZW1$a66&wIe-H1HH!U3mX6
zMNX+(2iV&>z$teNe<=;x((LqWN7;;i3hmBa&uNOhoi28_*mOOGb_Z<wlS11lab3)#
z<mF!i$I1O)fR~e>{}kLm`QsztC+E|!E%U<a^$$OP()c?d?4A7jpFs7K+ubwI&q_P^
zZF2iE*iVT!lOJ6HZzMl{7r3<l<riPryb^1n-~B$wBrkC1FKvo+@naj?>a7`H-SR&Q
zTN~x6if7R3gU25~F(uwe9v^~N&azjpKH2{tIc{wJh=b&<tKfyR@yX#4c<GFQqvXy5
z;9Al>0zb3GzkLKg*e=e9Pwrm@kCT7B3En?>_Zs-ho&OVYvW}>qJ9GYxwbOtfUGZeC
a@&{kMxE-tPtzz=dE8yo&?*0mV(flugw#woF

diff --git a/src/app/components/WalletConnect.svelte b/src/app/components/WalletConnect.svelte
index b52385e..e94e508 100644
--- a/src/app/components/WalletConnect.svelte
+++ b/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" />
diff --git a/src/lib/components/Scanner.svelte b/src/lib/components/Scanner.svelte
new file mode 100644
index 0000000..19d5e8b
--- /dev/null
+++ b/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>
diff --git a/svelte.config.js b/svelte.config.js
index 232bea4..0699ce9 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -25,4 +25,9 @@ export default {
       },
     },
   },
+  compilerOptions: {
+    warningFilter: (warning) => {
+      return !['a11y_media_has_caption'].includes(warning.code)
+    },
+  }
 }