Enhance PaymentService and useTicketPurchase composable for improved wallet handling

- Introduced asynchronous methods in PaymentService for retrieving user wallets and checking wallet balances, allowing for dual authentication detection.
- Updated getUserWalletsAsync, hasWalletWithBalanceAsync, and getWalletWithBalanceAsync methods to streamline wallet access and balance checks.
- Refactored useTicketPurchase composable to load user wallets asynchronously on component mount, improving user experience during ticket purchases.
- Enhanced error handling and logging for wallet loading and payment processes.

These changes improve the reliability and responsiveness of wallet interactions within the payment flow.

src/modules/events/components/PurchaseTicketDialog.vue

@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script setup lang="ts">
-import { onUnmounted } from 'vue'
+import { onUnmounted, watch } from 'vue'
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog'
 import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
@@ -44,7 +44,8 @@ const {
   cleanup,
   ticketQRCode,
   purchasedTicketId,
-  showTicketQR
+  showTicketQR,
+  loadWallets
 } = useTicketPurchase()
 
 async function handlePurchase() {
@@ -62,6 +63,13 @@ function handleClose() {
   resetPaymentState()
 }
 
+// Reload wallets when dialog opens
+watch(() => props.isOpen, async (newVal) => {
+  if (newVal && isAuthenticated.value) {
+    await loadWallets()
+  }
+})
+
 // Cleanup on unmount
 onUnmounted(() => {
   cleanup()

src/modules/events/composables/useTicketPurchase.ts

@@ -1,4 +1,4 @@
-import { ref, computed, onUnmounted } from 'vue'
+import { ref, computed, onUnmounted, onMounted } from 'vue'
 import { purchaseTicket, checkPaymentStatus } from '@/lib/api/events'
 import { useAuth } from '@/composables/useAuth'
 import { toast } from 'vue-sonner'
@@ -23,6 +23,10 @@ export function useTicketPurchase() {
   const ticketQRCode = ref<string | null>(null)
   const purchasedTicketId = ref<string | null>(null)
   const showTicketQR = ref(false)
+  
+  // Wallet state (loaded asynchronously)
+  const userWallets = ref<any[]>([])
+  const hasWalletWithBalance = ref(false)
 
   // Computed properties
   const canPurchase = computed(() => isAuthenticated.value && currentUser.value)
@@ -34,10 +38,30 @@ export function useTicketPurchase() {
     }
   })
   
-  // Delegate to PaymentService
-  const userWallets = computed(() => paymentService.userWallets) // getter method
-  const hasWalletWithBalance = computed(() => paymentService.hasWalletWithBalance) // getter method
+  // Delegate to PaymentService for processing status
   const isPayingWithWallet = computed(() => paymentService.isProcessingPayment.value) // computed ref
+  
+  // Load wallets asynchronously
+  async function loadWallets() {
+    try {
+      const wallets = await paymentService.getUserWalletsAsync()
+      userWallets.value = wallets
+      hasWalletWithBalance.value = await paymentService.hasWalletWithBalanceAsync()
+      console.log('Loaded wallets for ticket purchase:', {
+        count: wallets.length,
+        hasBalance: hasWalletWithBalance.value
+      })
+    } catch (error) {
+      console.error('Failed to load wallets:', error)
+      userWallets.value = []
+      hasWalletWithBalance.value = false
+    }
+  }
+  
+  // Load wallets on mount
+  onMounted(() => {
+    loadWallets()
+  })
 
   // Generate QR code for Lightning payment - delegate to PaymentService
   async function generateQRCode(bolt11: string) {
@@ -217,6 +241,7 @@ export function useTicketPurchase() {
     handleOpenLightningWallet,
     resetPaymentState,
     cleanup,
-    generateTicketQRCode
+    generateTicketQRCode,
+    loadWallets
   }
 }