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>