From 981fc2342250f8615b2bcf982cf096fa66f1c996 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Sun, 14 Sep 2025 23:42:09 +0200
Subject: [PATCH] Enhance ReceiveDialog and WalletService for LNURL handling
 and transaction tagging

- Added functionality to encode LNURL for QR code generation in ReceiveDialog, improving payment link sharing.
- Updated WalletService to include a tag property for transactions, allowing for better categorization and display in WalletPage.
- Enhanced WalletPage to display transaction tags, improving user visibility of transaction details.

These changes improve the user experience by providing clearer payment information and enhancing the functionality of the wallet module.
---
 .../wallet/components/ReceiveDialog.vue       | 55 ++++++++++++++++---
 src/modules/wallet/services/WalletService.ts  |  4 +-
 src/modules/wallet/views/WalletPage.vue       |  3 +
 3 files changed, 52 insertions(+), 10 deletions(-)

diff --git a/src/modules/wallet/components/ReceiveDialog.vue b/src/modules/wallet/components/ReceiveDialog.vue
index fb1182b..40b37ce 100644
--- a/src/modules/wallet/components/ReceiveDialog.vue
+++ b/src/modules/wallet/components/ReceiveDialog.vue
@@ -3,6 +3,7 @@ import { ref, computed, nextTick } from 'vue'
 import { useForm } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
 import * as z from 'zod'
+import { nip19 } from 'nostr-tools'
 import { injectService, SERVICE_TOKENS } from '@/core/di-container'
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog'
 import { Button } from '@/components/ui/button'
@@ -106,13 +107,29 @@ async function copyToClipboard(text: string, field: string) {
   }
 }
 
+function encodeLNURL(url: string): string {
+  try {
+    // Convert URL to bytes
+    const bytes = new TextEncoder().encode(url)
+    // Encode as bech32 with 'lnurl' prefix
+    const bech32 = nip19.encodeBytes('lnurl', bytes)
+    // Return with lightning: prefix in uppercase
+    return `lightning:${bech32.toUpperCase()}`
+  } catch (error) {
+    console.error('Failed to encode LNURL:', error)
+    return url // Fallback to original URL
+  }
+}
+
 async function generateQRCode(data: string) {
   if (!data) return
-  
+
   isLoadingQR.value = true
   try {
+    // Encode LNURL with proper bech32 format and lightning: prefix
+    const encodedLNURL = encodeLNURL(data)
     // Use the existing PaymentService QR code generation
-    qrCode.value = await paymentService?.generateQRCode(data)
+    qrCode.value = await paymentService?.generateQRCode(encodedLNURL)
   } catch (error) {
     console.error('Failed to generate QR code:', error)
     toastService?.error('Failed to generate QR code')
@@ -331,17 +348,37 @@ function onOpenChange(open: boolean) {
                   <QrCode class="h-12 w-12 text-muted-foreground opacity-50" />
                 </div>
                 
-                <!-- LNURL -->
+                <!-- Encoded LNURL (for QR) -->
                 <div class="w-full space-y-2">
-                  <Label>LNURL</Label>
+                  <Label>LNURL (Encoded)</Label>
                   <div class="flex gap-2">
-                    <Input 
-                      :value="selectedPayLink.lnurl" 
-                      readonly 
+                    <Input
+                      :value="selectedPayLink.lnurl ? encodeLNURL(selectedPayLink.lnurl) : ''"
+                      readonly
                       class="font-mono text-xs"
                     />
-                    <Button 
-                      variant="outline" 
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      @click="copyToClipboard(selectedPayLink.lnurl ? encodeLNURL(selectedPayLink.lnurl) : '', 'encoded-lnurl')"
+                    >
+                      <Check v-if="copiedField === 'encoded-lnurl'" class="h-4 w-4 text-green-600" />
+                      <Copy v-else class="h-4 w-4" />
+                    </Button>
+                  </div>
+                </div>
+
+                <!-- Raw LNURL -->
+                <div class="w-full space-y-2">
+                  <Label>LNURL (Raw)</Label>
+                  <div class="flex gap-2">
+                    <Input
+                      :value="selectedPayLink.lnurl"
+                      readonly
+                      class="font-mono text-xs"
+                    />
+                    <Button
+                      variant="outline"
                       size="sm"
                       @click="copyToClipboard(selectedPayLink.lnurl || '', 'lnurl')"
                     >
diff --git a/src/modules/wallet/services/WalletService.ts b/src/modules/wallet/services/WalletService.ts
index f392b2b..fac772a 100644
--- a/src/modules/wallet/services/WalletService.ts
+++ b/src/modules/wallet/services/WalletService.ts
@@ -29,6 +29,7 @@ export interface PaymentTransaction {
   type: 'sent' | 'received'
   status: 'pending' | 'confirmed' | 'failed'
   fee?: number
+  tag?: string | null
 }
 
 export default class WalletService extends BaseService {
@@ -274,7 +275,8 @@ export default class WalletService extends BaseService {
           timestamp: payment.time ? new Date(payment.time * 1000) : new Date(),
           type: payment.amount > 0 ? 'received' : 'sent',
           status: payment.pending ? 'pending' : 'confirmed',
-          fee: payment.fee ? payment.fee / 1000 : undefined
+          fee: payment.fee ? payment.fee / 1000 : undefined,
+          tag: payment.tag || (payment.extra && payment.extra.tag) || null
         })).sort((a: PaymentTransaction, b: PaymentTransaction) =>
           b.timestamp.getTime() - a.timestamp.getTime()
         )
diff --git a/src/modules/wallet/views/WalletPage.vue b/src/modules/wallet/views/WalletPage.vue
index f0e0871..85df833 100644
--- a/src/modules/wallet/views/WalletPage.vue
+++ b/src/modules/wallet/views/WalletPage.vue
@@ -202,6 +202,9 @@ onMounted(() => {
                           <Badge :variant="getStatusColor(tx.status)" class="text-xs">
                             {{ tx.status }}
                           </Badge>
+                          <Badge v-if="tx.tag" variant="outline" class="text-xs">
+                            {{ tx.tag }}
+                          </Badge>
                         </div>
                       </div>
                     </div>