Enhance payment status handling in ReceiveDialog and WalletService

- Introduced computed properties in ReceiveDialog.vue to dynamically display payment status, including color coding and status text based on transaction updates.
- Updated WalletService.ts to improve payment status mapping, handling various payment states more explicitly and ensuring accurate timestamp parsing.
- Adjusted the transaction display logic to convert amounts from millisats to sats for better clarity.

These changes improve the user experience by providing real-time feedback on payment statuses and ensuring accurate transaction information.

src/modules/wallet/components/ReceiveDialog.vue

@@ -57,6 +57,40 @@ const isLoadingQR = ref(false)
 const isCreating = computed(() => walletService?.isCreatingInvoice?.value || false)
 const error = computed(() => walletService?.error?.value)
 
+// Watch for payment status updates
+const paymentStatus = computed(() => {
+  if (!createdInvoice.value) return 'pending'
+
+  // Look for this invoice in the transactions list
+  const transaction = walletService?.transactions?.value?.find(
+    (tx: any) => tx.id === createdInvoice.value?.payment_hash
+  )
+
+  if (transaction) {
+    return transaction.status
+  }
+
+  return 'pending'
+})
+
+const statusColor = computed(() => {
+  switch (paymentStatus.value) {
+    case 'confirmed': return 'text-green-600'
+    case 'failed': return 'text-red-600'
+    case 'pending':
+    default: return 'text-yellow-600'
+  }
+})
+
+const statusText = computed(() => {
+  switch (paymentStatus.value) {
+    case 'confirmed': return 'Paid'
+    case 'failed': return 'Failed'
+    case 'pending':
+    default: return 'Pending'
+  }
+})
+
 // Methods
 const onSubmit = form.handleSubmit(async (formValues) => {
   try {
@@ -224,7 +258,7 @@ function formatExpiry(seconds: number): string {
             </div>
             <div>
               <span class="text-muted-foreground">Status:</span>
-              <span class="font-medium ml-2 text-yellow-600">Pending</span>
+              <span class="font-medium ml-2" :class="statusColor">{{ statusText }}</span>
             </div>
           </div>
 

src/modules/wallet/services/WalletService.ts

@@ -470,13 +470,57 @@ export default class WalletService extends BaseService {
    * Map LNbits payment object to our transaction format
    */
   private mapPaymentToTransaction(payment: any): PaymentTransaction {
+    // Handle timestamp parsing - try different formats
+    let timestamp = new Date()
+    if (payment.time) {
+      if (typeof payment.time === 'string') {
+        // ISO string format
+        timestamp = new Date(payment.time)
+      } else if (typeof payment.time === 'number') {
+        // Unix timestamp (seconds)
+        timestamp = new Date(payment.time * 1000)
+      }
+    }
+
+    // For the transaction display, convert amount from millisats to sats
+    const amountSats = Math.abs(payment.amount) / 1000
+
+    // Map status correctly - be more explicit about the mapping
+    let status: 'pending' | 'confirmed' | 'failed' = 'pending'
+
+    // Check for pending first
+    if (payment.pending === true) {
+      status = 'pending'
+    }
+    // Check for success status
+    else if (payment.status === 'success' || payment.status === 'settled' || payment.status === 'confirmed') {
+      status = 'confirmed'
+    }
+    // Check for failed status
+    else if (payment.status === 'failed') {
+      status = 'failed'
+    }
+    // If status is success but no pending field, assume confirmed
+    else if (payment.status === 'success' && payment.pending !== true) {
+      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,
-      amount: payment.amount || 0,
+      amount: amountSats,
       description: payment.description || payment.memo || 'Payment',
-      timestamp: payment.time ? new Date(payment.time * 1000) : new Date(),
+      timestamp: timestamp,
       type: payment.amount > 0 ? 'received' : 'sent',
-      status: payment.pending ? 'pending' : payment.status === 'settled' ? 'confirmed' : 'failed',
+      status: status,
       fee: payment.fee_msat ? payment.fee_msat / 1000 : undefined,
       tag: payment.tag || null
     }