Enhance ReceiveDialog.vue with improved invoice handling and payment status display

- Updated invoice assignment to ensure reactivity by using Object.assign, improving state management.
- Enhanced QR code generation logic to utilize either payment_request or bolt11 for better flexibility.
- Added conditional rendering for payment status messages, providing clear feedback for confirmed and failed payments.
- Improved input handling for displaying payment request and hash, ensuring accurate data representation.

These changes enhance the user experience by providing clearer feedback on payment statuses and improving invoice management functionality.

src/modules/wallet/components/ReceiveDialog.vue

@@ -101,9 +101,15 @@ const onSubmit = form.handleSubmit(async (formValues) => {
     })
 
     if (invoice) {
-      createdInvoice.value = invoice
+      // Force reactivity by using Object.assign with a new object
-      console.log(createdInvoice.value)
+      createdInvoice.value = Object.assign({}, invoice)
-      await generateQRCode(invoice.payment_request)
+      console.log('Created invoice assigned:', createdInvoice.value)
+
+      // Use the invoice's payment_request or bolt11 for QR generation
+      const paymentRequest = invoice.payment_request || invoice.bolt11
+      if (paymentRequest) {
+        await generateQRCode(paymentRequest)
+      }
       toastService?.success('Invoice created successfully!')
     }
   } catch (error) {
@@ -269,7 +275,7 @@ function formatExpiry(seconds: number): string {
         </div>
 
         <!-- QR Code Display -->
-        <div class="flex flex-col items-center space-y-4">
+        <div v-if="paymentStatus === 'pending'" class="flex flex-col items-center space-y-4">
           <div v-if="isLoadingQR" class="w-64 h-64 flex items-center justify-center bg-muted rounded-lg">
             <Loader2 class="h-8 w-8 animate-spin text-muted-foreground" />
           </div>
@@ -285,19 +291,44 @@ function formatExpiry(seconds: number): string {
           </div>
         </div>
 
+        <!-- Payment Success Message -->
+        <div v-else-if="paymentStatus === 'confirmed'" class="flex flex-col items-center space-y-4">
+          <div class="w-64 h-64 flex flex-col items-center justify-center bg-green-50 dark:bg-green-950/20 rounded-lg border border-green-200 dark:border-green-800">
+            <Check class="h-16 w-16 text-green-600 dark:text-green-400 mb-4" />
+            <div class="text-center">
+              <p class="text-lg font-semibold text-green-800 dark:text-green-200">Payment Received!</p>
+              <p class="text-sm text-green-600 dark:text-green-400 mt-1">{{ createdInvoice.amount }} sats</p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Payment Failed Message -->
+        <div v-else-if="paymentStatus === 'failed'" class="flex flex-col items-center space-y-4">
+          <div class="w-64 h-64 flex flex-col items-center justify-center bg-red-50 dark:bg-red-950/20 rounded-lg border border-red-200 dark:border-red-800">
+            <svg class="h-16 w-16 text-red-600 dark:text-red-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+            </svg>
+            <div class="text-center">
+              <p class="text-lg font-semibold text-red-800 dark:text-red-200">Payment Failed</p>
+              <p class="text-sm text-red-600 dark:text-red-400 mt-1">Invoice has expired or failed</p>
+            </div>
+          </div>
+        </div>
+
         <!-- Lightning Invoice (BOLT11) -->
         <div class="space-y-2">
           <Label>Lightning Invoice (BOLT11)</Label>
           <div class="flex gap-2">
             <Input
-              :value="createdInvoice.payment_request"
+              :key="`bolt11-${createdInvoice?.payment_hash}`"
+              :model-value="createdInvoice?.payment_request || createdInvoice?.bolt11 || ''"
               readonly
               class="font-mono text-xs"
             />
             <Button
               variant="outline"
               size="sm"
-              @click="copyToClipboard(createdInvoice.payment_request, 'bolt11')"
+              @click="copyToClipboard(createdInvoice.payment_request || createdInvoice.bolt11, 'bolt11')"
             >
               <Check v-if="copiedField === 'bolt11'" class="h-4 w-4 text-green-600" />
               <Copy v-else class="h-4 w-4" />
@@ -313,7 +344,8 @@ function formatExpiry(seconds: number): string {
           <Label>Payment Hash</Label>
           <div class="flex gap-2">
             <Input
-              :value="createdInvoice.payment_hash"
+              :key="`hash-${createdInvoice?.payment_hash}`"
+              :model-value="createdInvoice?.payment_hash || ''"
               readonly
               class="font-mono text-xs"
             />

src/modules/wallet/services/WalletService.ts

@@ -505,14 +505,6 @@ export default class WalletService extends BaseService {
       status = 'confirmed'
     }
 
-    console.log('WalletService: Mapping payment', {
-      originalAmount: payment.amount,
-      convertedAmount: amountSats,
-      originalStatus: payment.status,
-      pending: payment.pending,
-      mappedStatus: status,
-      timestamp: timestamp
-    })
 
     return {
       id: payment.payment_hash || payment.checking_id || payment.id,