From 28763c4f09a1a6dd231f17de8a62f4b630ca9808 Mon Sep 17 00:00:00 2001
From: Dorian <dorian@Dorians-MacBook-Air.local>
Date: Thu, 19 Mar 2026 00:18:41 +0000
Subject: [PATCH] fix: add QR codes to Home wallet receive modal

ReceiveBitcoinModal was missing QR code generation that Web5.vue has.
Added canvas refs + qrcode rendering for both on-chain (bitcoin: URI)
and lightning (lightning: URI) receive flows. Matches Web5 pattern.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/components/ReceiveBitcoinModal.vue    | 22 +++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/neode-ui/src/components/ReceiveBitcoinModal.vue b/neode-ui/src/components/ReceiveBitcoinModal.vue
index 9266efc8..6e899d98 100644
--- a/neode-ui/src/components/ReceiveBitcoinModal.vue
+++ b/neode-ui/src/components/ReceiveBitcoinModal.vue
@@ -25,7 +25,8 @@
             <label class="text-white/60 text-sm block mb-1">Memo (optional)</label>
             <input v-model="invoiceMemo" type="text" placeholder="Payment for..." class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-white/30" />
           </div>
-          <div v-if="invoiceResult" class="mb-3 p-2 bg-white/5 rounded-lg">
+          <div v-if="invoiceResult" class="mb-3 p-3 bg-white/5 rounded-lg text-center">
+            <canvas ref="lightningQrCanvas" class="mx-auto mb-3 rounded-lg" style="image-rendering: pixelated;"></canvas>
             <p class="text-white/50 text-xs mb-1">Invoice (share with sender):</p>
             <p class="text-xs font-mono text-white/80 break-all">{{ invoiceResult }}</p>
             <button @click="copyText(invoiceResult)" class="mt-2 text-xs text-orange-400 hover:text-orange-300">Copy</button>
@@ -35,6 +36,7 @@
         <!-- On-chain -->
         <div v-if="receiveMethod === 'onchain'">
           <div v-if="onchainAddress" class="mb-3 p-3 bg-white/5 rounded-lg text-center">
+            <canvas ref="onchainQrCanvas" class="mx-auto mb-3 rounded-lg" style="image-rendering: pixelated;"></canvas>
             <p class="text-white/50 text-xs mb-2">Your Bitcoin address:</p>
             <p class="text-sm font-mono text-white/90 break-all">{{ onchainAddress }}</p>
             <button @click="copyText(onchainAddress)" class="mt-2 text-xs text-orange-400 hover:text-orange-300">Copy</button>
@@ -67,7 +69,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, nextTick } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { rpcClient } from '@/api/rpc-client'
 
@@ -83,9 +85,23 @@ const invoiceResult = ref('')
 const onchainAddress = ref('')
 const ecashToken = ref('')
 const ecashResult = ref('')
+const onchainQrCanvas = ref<HTMLCanvasElement | null>(null)
+const lightningQrCanvas = ref<HTMLCanvasElement | null>(null)
 const processing = ref(false)
 const error = ref('')
 
+async function renderQr(data: string, canvas: HTMLCanvasElement | null, prefix = '') {
+  if (!canvas || !data) return
+  try {
+    const QRCode = await import('qrcode')
+    await QRCode.toCanvas(canvas, prefix ? `${prefix}${data}` : data, {
+      width: 200,
+      margin: 2,
+      color: { dark: '#000000', light: '#ffffff' },
+    })
+  } catch { /* QR rendering failed silently */ }
+}
+
 function close() {
   invoiceResult.value = ''
   onchainAddress.value = ''
@@ -110,9 +126,11 @@ async function receive() {
         params: { amount_sats: invoiceAmount.value, memo: invoiceMemo.value || undefined },
       })
       invoiceResult.value = res.payment_request
+      nextTick(() => renderQr(res.payment_request, lightningQrCanvas.value, 'lightning:'))
     } else if (receiveMethod.value === 'onchain') {
       const res = await rpcClient.call<{ address: string }>({ method: 'lnd.newaddress' })
       onchainAddress.value = res.address
+      nextTick(() => renderQr(res.address, onchainQrCanvas.value, 'bitcoin:'))
     } else {
       if (!ecashToken.value.trim()) { error.value = 'Paste an ecash token'; return }
       await rpcClient.call<{ amount_sats: number }>({