From c849258b5f911cc8aa599fe18961c71df0f1d62a Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Thu, 18 Sep 2025 22:09:46 +0200
Subject: [PATCH] Enhance QR code interaction in ReceiveDialog.vue

- Updated the QR code display to include a clickable area that allows users to copy the invoice directly to the clipboard.
- Added a descriptive message below the QR code to inform users about the copy functionality, improving usability and accessibility.

These changes enhance the user experience by making it easier to interact with the QR code for invoice management.
---
 src/modules/wallet/components/ReceiveDialog.vue | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/modules/wallet/components/ReceiveDialog.vue b/src/modules/wallet/components/ReceiveDialog.vue
index 10d10fa..a35f9af 100644
--- a/src/modules/wallet/components/ReceiveDialog.vue
+++ b/src/modules/wallet/components/ReceiveDialog.vue
@@ -286,12 +286,17 @@ function formatExpiry(seconds: number): string {
           <div v-if="isLoadingQR" class="w-48 h-48 sm:w-64 sm:h-64 flex items-center justify-center bg-muted rounded-lg">
             <Loader2 class="h-6 w-6 sm:h-8 sm:w-8 animate-spin text-muted-foreground" />
           </div>
-          <div v-else-if="qrCode" class="bg-white p-2 sm:p-4 rounded-lg">
-            <img
-              :src="qrCode"
-              alt="Lightning Invoice QR Code"
-              class="w-48 h-48 sm:w-64 sm:h-64"
-            />
+          <div v-else-if="qrCode" class="text-center">
+            <div class="bg-white p-2 sm:p-4 rounded-lg cursor-pointer hover:bg-gray-50 transition-colors" @click="copyToClipboard(createdInvoice.payment_request || createdInvoice.bolt11, 'qr')">
+              <img
+                :src="qrCode"
+                alt="Lightning Invoice QR Code"
+                class="w-48 h-48 sm:w-64 sm:h-64"
+              />
+            </div>
+            <p class="text-xs text-muted-foreground mt-2">
+              Click QR code to copy invoice
+            </p>
           </div>
           <div v-else class="w-48 h-48 sm:w-64 sm:h-64 flex items-center justify-center bg-muted rounded-lg">
             <QrCode class="h-8 w-8 sm:h-12 sm:w-12 text-muted-foreground opacity-50" />