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

@@ -286,13 +286,18 @@ 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">
+          <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" />
           </div>