Implement Lightning payment handling in OrderHistory component

- Replace the existing openLightningWallet function with payWithLightning for improved payment processing.
- Introduce useLightningPayment composable to manage wallet payment logic and state.
- Update button text dynamically based on payment status and wallet availability.
- Enhance error handling and user feedback during payment attempts, ensuring a smoother user experience.

src/modules/market/components/OrderHistory.vue

@@ -137,10 +137,10 @@
               
               <!-- Payment Actions -->
               <div class="flex gap-2">
-                <Button @click="openLightningWallet(order.paymentRequest || '')" variant="default" size="sm"
-                  class="flex-1" :disabled="!order.paymentRequest">
+                <Button @click="payWithLightning(order)" variant="default" size="sm"
+                  class="flex-1" :disabled="!order.paymentRequest || isPayingWithWallet">
                   <Zap class="w-3 h-3 mr-1" />
-                  Pay with Lightning
+                  {{ isPayingWithWallet ? 'Paying...' : hasWalletWithBalance ? 'Pay with Wallet' : 'Pay with Lightning' }}
                 </Button>
                 <Button @click="toggleQRCode(order.id)" variant="outline" size="sm">
                   <QrCode class="w-3 h-3" />
@@ -230,10 +230,11 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, watch } from 'vue'
 import { useRouter } from 'vue-router'
-import { useMarketStore } from '@/stores/market'
+import { useMarketStore } from '../stores/market'
 // import { useOrderEvents } from '@/composables/useOrderEvents' // TODO: Move to market module
 import { injectService, SERVICE_TOKENS } from '@/core/di-container'
 import { auth } from '@/composables/useAuth'
+import { useLightningPayment } from '../composables/useLightningPayment'
 import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
 import { Package, Store, Zap, Copy, QrCode } from 'lucide-vue-next'
@@ -243,6 +244,8 @@ import type { OrderStatus } from '@/stores/market'
 const router = useRouter()
 const marketStore = useMarketStore()
 const relayHub = injectService(SERVICE_TOKENS.RELAY_HUB)
+const { handlePayment, isPayingWithWallet, hasWalletWithBalance } = useLightningPayment()
+
 // const orderEvents = useOrderEvents() // TODO: Move to market module
 const orderEvents = { 
   isSubscribed: ref(false), 
@@ -382,29 +385,12 @@ const copyPaymentRequest = async (paymentRequest: string) => {
   }
 }
 
-const openLightningWallet = (paymentRequest: string) => {
-  // Try to open with common Lightning wallet protocols
-  const protocols = [
-    `lightning:${paymentRequest}`,
-    `bitcoin:${paymentRequest}`,
-    paymentRequest
-  ]
-
-  // Try each protocol
-  for (const protocol of protocols) {
-    try {
-      window.open(protocol, '_blank')
-      toast.success('Opening Lightning wallet', {
-        description: 'If your wallet doesn\'t open, copy the payment request manually'
-      })
-      return
-    } catch (err) {
-      console.warn('Failed to open protocol:', protocol, err)
-    }
+const payWithLightning = async (order: any) => {
+  try {
+    await handlePayment(order.paymentRequest, order.id)
+  } catch (error) {
+    console.error('Payment failed:', error)
   }
-
-  // Fallback: copy to clipboard
-  copyPaymentRequest(paymentRequest)
 }
 
 const toggleQRCode = async (orderId: string) => {