450 lines
18 KiB
Vue
450 lines
18 KiB
Vue
<script setup lang="ts">
|
|
import { ref, computed, onMounted } from 'vue'
|
|
import { injectService, SERVICE_TOKENS } from '@/core/di-container'
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Badge } from '@/components/ui/badge'
|
|
import { ScrollArea } from '@/components/ui/scroll-area'
|
|
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog'
|
|
import { RefreshCw, Send, QrCode, ArrowUpRight, ArrowDownLeft, Clock, Wallet, ScanLine, Copy, Check } from 'lucide-vue-next'
|
|
import ReceiveDialog from '../components/ReceiveDialog.vue'
|
|
import SendDialog from '../components/SendDialog.vue'
|
|
import QRScanner from '@/components/ui/qr-scanner.vue'
|
|
import { format } from 'date-fns'
|
|
import { nip19 } from 'nostr-tools'
|
|
|
|
// Services
|
|
const walletService = injectService(SERVICE_TOKENS.WALLET_SERVICE) as any
|
|
const paymentService = injectService(SERVICE_TOKENS.PAYMENT_SERVICE) as any
|
|
const authService = injectService(SERVICE_TOKENS.AUTH_SERVICE) as any
|
|
const toastService = injectService(SERVICE_TOKENS.TOAST_SERVICE) as any
|
|
|
|
// State
|
|
const showReceiveDialog = ref(false)
|
|
const showSendDialog = ref(false)
|
|
const showQRScanner = ref(false)
|
|
const scannedDestination = ref<string>('')
|
|
const defaultQrCode = ref<string | null>(null)
|
|
const isGeneratingQR = ref(false)
|
|
const copiedField = ref<string | null>(null)
|
|
|
|
// Computed
|
|
const transactions = computed(() => walletService?.transactions?.value || [])
|
|
const isLoading = computed(() => walletService?.isLoading?.value || false)
|
|
const error = computed(() => walletService?.error?.value)
|
|
// Use PaymentService for centralized balance calculation
|
|
const totalBalance = computed(() => paymentService?.totalBalance || 0)
|
|
|
|
// TODO: clean up; assuming we only ever give the user one auto-generated paylink
|
|
const payLinks = computed(() => walletService?.payLinks?.value || [])
|
|
const firstPayLink = computed(() => payLinks.value[0] || null)
|
|
|
|
// Get transactions grouped by date
|
|
const groupedTransactions = computed(() => {
|
|
const groups: Record<string, typeof transactions.value> = {}
|
|
|
|
transactions.value.forEach((tx: any) => {
|
|
// Ensure timestamp is valid before formatting
|
|
const timestamp = tx.timestamp instanceof Date && !isNaN(tx.timestamp.getTime())
|
|
? tx.timestamp
|
|
: new Date()
|
|
|
|
const dateKey = format(timestamp, 'MMMM d, yyyy')
|
|
if (!groups[dateKey]) {
|
|
groups[dateKey] = []
|
|
}
|
|
groups[dateKey].push(tx)
|
|
})
|
|
|
|
return groups
|
|
})
|
|
|
|
// Methods
|
|
async function refresh() {
|
|
await walletService?.refresh()
|
|
// Also refresh auth data to update balance
|
|
await authService?.refresh()
|
|
// Regenerate QR if pay link is available
|
|
if (firstPayLink.value) {
|
|
await generateDefaultQR()
|
|
}
|
|
}
|
|
|
|
function getTransactionIcon(type: string, status: string) {
|
|
if (status === 'pending') {
|
|
return Clock
|
|
}
|
|
return type === 'received' ? ArrowDownLeft : ArrowUpRight
|
|
}
|
|
|
|
function getTransactionColor(type: string, status: string) {
|
|
if (status === 'pending') {
|
|
return 'text-amber-500'
|
|
}
|
|
return type === 'received' ? 'text-green-600' : 'text-red-600'
|
|
}
|
|
|
|
|
|
// QR Code generation
|
|
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 generateDefaultQR() {
|
|
if (!firstPayLink.value?.lnurl) return
|
|
|
|
isGeneratingQR.value = true
|
|
try {
|
|
// Encode LNURL with proper bech32 format and lightning: prefix
|
|
const encodedLNURL = encodeLNURL(firstPayLink.value.lnurl)
|
|
// Use the existing PaymentService QR code generation
|
|
defaultQrCode.value = await paymentService?.generateQRCode(encodedLNURL)
|
|
} catch (error) {
|
|
console.error('Failed to generate default QR code:', error)
|
|
} finally {
|
|
isGeneratingQR.value = false
|
|
}
|
|
}
|
|
|
|
// Copy functionality
|
|
async function copyToClipboard(text: string, field: string) {
|
|
try {
|
|
await navigator.clipboard.writeText(text)
|
|
copiedField.value = field
|
|
toastService?.success('Copied to clipboard!')
|
|
|
|
setTimeout(() => {
|
|
copiedField.value = null
|
|
}, 2000)
|
|
} catch (error) {
|
|
console.error('Failed to copy:', error)
|
|
toastService?.error('Failed to copy to clipboard')
|
|
}
|
|
}
|
|
|
|
// Click handler for QR code to copy LNURL
|
|
function handleQRClick() {
|
|
if (firstPayLink.value?.lnurl) {
|
|
// Encode LNURL with proper bech32 format and lightning: prefix (same as QR code)
|
|
const encodedLNURL = encodeLNURL(firstPayLink.value.lnurl)
|
|
copyToClipboard(encodedLNURL, 'qr-lnurl')
|
|
}
|
|
}
|
|
|
|
// QR Scanner functions
|
|
function closeQRScanner() {
|
|
showQRScanner.value = false
|
|
}
|
|
|
|
function handleQRScanResult(result: string) {
|
|
// Clean up the scanned result by removing lightning: prefix if present
|
|
let cleanedResult = result
|
|
if (result.toLowerCase().startsWith('lightning:')) {
|
|
cleanedResult = result.substring(10) // Remove "lightning:" prefix
|
|
}
|
|
|
|
// Store the scanned result and close QR scanner
|
|
scannedDestination.value = cleanedResult
|
|
closeQRScanner()
|
|
|
|
// Open send dialog with the scanned result
|
|
showSendDialog.value = true
|
|
toastService?.success('QR code scanned successfully!')
|
|
}
|
|
|
|
// Initialize on mount
|
|
onMounted(async () => {
|
|
await refresh()
|
|
// Generate QR for first pay link if available
|
|
if (firstPayLink.value) {
|
|
await generateDefaultQR()
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="container mx-auto py-4 sm:py-8 px-3 sm:px-4 max-w-6xl">
|
|
<!-- Header -->
|
|
<div class="mb-4 sm:mb-6">
|
|
<div class="flex items-center justify-between">
|
|
<h1 class="text-2xl sm:text-3xl font-bold flex items-center gap-2">
|
|
<Wallet class="h-6 w-6 sm:h-8 sm:w-8" />
|
|
Wallet
|
|
</h1>
|
|
<Button variant="ghost" size="sm" @click="refresh" :disabled="isLoading">
|
|
<RefreshCw class="h-4 w-4" :class="{ 'animate-spin': isLoading }" />
|
|
</Button>
|
|
</div>
|
|
<p class="text-sm sm:text-base text-muted-foreground mt-1">Manage your Bitcoin transactions</p>
|
|
</div>
|
|
|
|
<!-- Balance Card -->
|
|
<Card class="mb-3 sm:mb-6">
|
|
<CardHeader class="pb-3 sm:pb-6">
|
|
<CardTitle class="text-lg sm:text-xl">Total Balance</CardTitle>
|
|
<CardDescription class="text-sm">Available across all your wallets</CardDescription>
|
|
</CardHeader>
|
|
<CardContent class="pt-0">
|
|
<div class="flex flex-col gap-4 sm:gap-6">
|
|
<!-- Balance Section -->
|
|
<div class="text-center sm:text-left">
|
|
<div class="text-3xl sm:text-4xl font-bold">
|
|
{{ Math.floor(totalBalance / 1000).toLocaleString() }} <span
|
|
class="text-xl sm:text-2xl text-muted-foreground font-normal">sats</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="flex gap-2 sm:gap-3 w-full sm:w-auto">
|
|
<Button variant="default" @click="showReceiveDialog = true"
|
|
class="gap-2 flex-1 sm:flex-none h-10 sm:h-12 text-sm sm:text-base">
|
|
<QrCode class="h-4 w-4 sm:h-5 sm:w-5" />
|
|
Receive
|
|
</Button>
|
|
<Button variant="outline" @click="showSendDialog = true"
|
|
class="gap-2 flex-1 sm:flex-none h-10 sm:h-12 text-sm sm:text-base">
|
|
<Send class="h-4 w-4 sm:h-5 sm:w-5" />
|
|
Send
|
|
</Button>
|
|
<Button variant="outline" @click="showQRScanner = true" class="h-10 w-10 sm:h-12 sm:w-12 p-0"
|
|
title="Scan QR Code">
|
|
<ScanLine class="h-4 w-4 sm:h-5 sm:w-5" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<!-- Quick Receive QR Code -->
|
|
<Card v-if="firstPayLink" class="mb-3 sm:mb-6">
|
|
<CardHeader class="pb-3 sm:pb-6">
|
|
<CardTitle class="flex items-center gap-2 text-lg sm:text-xl">
|
|
<QrCode class="h-4 w-4 sm:h-5 sm:w-5" />
|
|
Quick Receive
|
|
</CardTitle>
|
|
<CardDescription class="text-sm">{{ firstPayLink.description }}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent class="pt-0">
|
|
<div class="flex flex-col sm:flex-row items-center gap-4 sm:gap-6">
|
|
<!-- QR Code -->
|
|
<div class="flex-shrink-0">
|
|
<div v-if="isGeneratingQR"
|
|
class="w-48 h-48 sm:w-56 sm:h-56 flex items-center justify-center bg-muted rounded-lg">
|
|
<RefreshCw class="h-6 w-6 sm:h-8 sm:w-8 animate-spin text-muted-foreground" />
|
|
</div>
|
|
<div v-else-if="defaultQrCode" class="text-center">
|
|
<div class="bg-white p-2 sm:p-4 rounded-lg cursor-pointer hover:bg-gray-50 transition-colors"
|
|
@click="handleQRClick" title="Click to copy LNURL">
|
|
<img :src="defaultQrCode" alt="LNURL QR Code" class="w-48 h-48 sm:w-56 sm:h-56" />
|
|
</div>
|
|
</div>
|
|
<div v-else class="w-48 h-48 sm:w-56 sm:h-56 flex items-center justify-center bg-muted rounded-lg">
|
|
<QrCode class="h-8 w-8 sm:h-12 sm:w-12 text-muted-foreground opacity-50" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Address Info -->
|
|
<div class="flex-1 space-y-3 sm:space-y-4 w-full">
|
|
<div>
|
|
<h4 class="font-medium mb-1 sm:mb-2 text-sm sm:text-base">Payment Range</h4>
|
|
<div class="text-xl sm:text-2xl font-bold text-green-600">
|
|
{{ firstPayLink.min?.toLocaleString() }} - {{ firstPayLink.max?.toLocaleString() }} sats
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="firstPayLink.lnaddress">
|
|
<h4 class="font-medium mb-1 sm:mb-2 text-sm sm:text-base">Lightning Address</h4>
|
|
<div class="flex gap-2">
|
|
<div class="font-mono text-xs sm:text-sm bg-muted px-2 sm:px-3 py-1.5 sm:py-2 rounded flex-1 break-all">
|
|
{{ firstPayLink.lnaddress }}
|
|
</div>
|
|
<Button variant="outline" size="sm"
|
|
@click="copyToClipboard(firstPayLink.lnaddress || '', 'lightning-address')"
|
|
class="h-auto px-2 shrink-0" title="Copy Lightning Address">
|
|
<Check v-if="copiedField === 'lightning-address'" class="h-3 w-3 sm:h-4 sm:w-4 text-green-600" />
|
|
<Copy v-else class="h-3 w-3 sm:h-4 sm:w-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<!-- Transaction History -->
|
|
<Card>
|
|
<CardHeader class="pb-3 sm:pb-6">
|
|
<CardTitle class="text-lg sm:text-xl">Recent Transactions</CardTitle>
|
|
<CardDescription class="text-sm">Your payment history</CardDescription>
|
|
</CardHeader>
|
|
<CardContent class="pt-0">
|
|
<div v-if="error" class="text-center py-6 sm:py-8 text-destructive">
|
|
{{ error }}
|
|
</div>
|
|
|
|
<div v-else-if="transactions.length === 0" class="text-center py-8 sm:py-12 text-muted-foreground">
|
|
<Clock class="h-8 w-8 sm:h-12 sm:w-12 mx-auto mb-3 sm:mb-4 opacity-50" />
|
|
<p class="text-sm sm:text-base">No transactions yet</p>
|
|
<p class="text-xs sm:text-sm mt-1 sm:mt-2">Your transaction history will appear here</p>
|
|
</div>
|
|
|
|
<ScrollArea v-else class="h-[400px] sm:h-[500px] pr-2 sm:pr-4">
|
|
<div v-for="(txs, date) in groupedTransactions" :key="date" class="mb-4 sm:mb-6">
|
|
<div class="text-xs sm:text-sm font-medium text-muted-foreground mb-2 sm:mb-3">{{ date }}</div>
|
|
|
|
<div class="space-y-3 sm:space-y-4">
|
|
<div v-for="tx in txs" :key="tx.id"
|
|
class="relative p-2.5 sm:p-3 rounded-lg border hover:bg-accent/50 transition-colors">
|
|
<!-- Tag badge in top-left corner -->
|
|
<Badge v-if="tx.tag" variant="secondary"
|
|
class="absolute -top-2.75 left-8 sm:left-11 text-xs font-medium z-10 bg-blue-100 text-blue-800 border-blue-200 pointer-events-none">
|
|
{{ tx.tag }}
|
|
</Badge>
|
|
<!-- Mobile Layout: Stack vertically -->
|
|
<div class="block sm:hidden">
|
|
<!-- Header Row: Icon, Amount, Type -->
|
|
<div class="flex items-center justify-between mb-1.5">
|
|
<div class="flex items-center gap-2">
|
|
<div class="p-1 rounded-full bg-background border"
|
|
:class="getTransactionColor(tx.type, tx.status)">
|
|
<component :is="getTransactionIcon(tx.type, tx.status)" class="h-3.5 w-3.5" />
|
|
</div>
|
|
<span class="text-xs text-muted-foreground">{{
|
|
(() => {
|
|
try {
|
|
if (tx.timestamp instanceof Date && !isNaN(tx.timestamp.getTime())) {
|
|
return format(tx.timestamp, 'HH:mm')
|
|
} else if (tx.timestamp) {
|
|
// Try to parse as string or number
|
|
const date = new Date(tx.timestamp)
|
|
if (!isNaN(date.getTime())) {
|
|
return format(date, 'HH:mm')
|
|
}
|
|
}
|
|
return '--:--'
|
|
} catch (error) {
|
|
console.warn('Failed to format timestamp:', tx.timestamp, error)
|
|
return '--:--'
|
|
}
|
|
})()
|
|
}}</span>
|
|
</div>
|
|
|
|
<div class="text-right">
|
|
<p class="font-semibold text-sm" :class="getTransactionColor(tx.type, tx.status)">
|
|
{{ tx.type === 'received' ? '+' : '-' }}{{ tx.amount.toLocaleString() }}
|
|
</p>
|
|
<p class="text-xs text-muted-foreground">sats</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Description Row -->
|
|
<div class="mb-1">
|
|
<p class="font-medium text-xs leading-tight break-words pr-1">{{ tx.description }}</p>
|
|
</div>
|
|
|
|
<!-- Badges Row -->
|
|
<div class="flex items-center gap-1.5 flex-wrap">
|
|
<span v-if="tx.fee" class="text-xs text-muted-foreground">
|
|
Fee: {{ tx.fee }} sats
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Desktop Layout: Better space management -->
|
|
<div class="hidden sm:flex items-start gap-4">
|
|
<div class="flex items-center gap-3 flex-shrink-0">
|
|
<div class="p-2 rounded-full bg-background border" :class="getTransactionColor(tx.type, tx.status)">
|
|
<component :is="getTransactionIcon(tx.type, tx.status)" class="h-4 w-4" />
|
|
</div>
|
|
<span class="text-sm text-muted-foreground">{{
|
|
(() => {
|
|
try {
|
|
if (tx.timestamp instanceof Date && !isNaN(tx.timestamp.getTime())) {
|
|
return format(tx.timestamp, 'HH:mm')
|
|
} else if (tx.timestamp) {
|
|
// Try to parse as string or number
|
|
const date = new Date(tx.timestamp)
|
|
if (!isNaN(date.getTime())) {
|
|
return format(date, 'HH:mm')
|
|
}
|
|
}
|
|
return '--:--'
|
|
} catch (error) {
|
|
console.warn('Failed to format timestamp:', tx.timestamp, error)
|
|
return '--:--'
|
|
}
|
|
})()
|
|
}}</span>
|
|
</div>
|
|
|
|
<!-- Description with flexible width -->
|
|
<div class="min-w-0 flex-1">
|
|
<p class="font-medium break-words leading-tight pr-2">{{ tx.description }}</p>
|
|
<div v-if="tx.fee" class="text-xs text-muted-foreground mt-1">
|
|
Fee: {{ tx.fee }} sats
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Amount - fixed width, always visible -->
|
|
<div class="text-right flex-shrink-0 min-w-[100px]">
|
|
<p class="font-semibold whitespace-nowrap" :class="getTransactionColor(tx.type, tx.status)">
|
|
{{ tx.type === 'received' ? '+' : '-' }}{{ tx.amount.toLocaleString() }} sats
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ScrollArea>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<!-- Dialogs -->
|
|
<ReceiveDialog
|
|
:open="showReceiveDialog"
|
|
@update:open="showReceiveDialog = $event"
|
|
/>
|
|
|
|
<SendDialog
|
|
v-if="showSendDialog"
|
|
:open="showSendDialog"
|
|
:initial-destination="scannedDestination"
|
|
@update:open="(open) => {
|
|
showSendDialog = open
|
|
if (!open) scannedDestination = ''
|
|
}"
|
|
/>
|
|
|
|
<!-- QR Scanner Dialog -->
|
|
<Dialog :open="showQRScanner" @update:open="showQRScanner = $event">
|
|
<DialogContent class="sm:max-w-lg">
|
|
<DialogHeader>
|
|
<DialogTitle class="flex items-center gap-2">
|
|
<ScanLine class="h-5 w-5" />
|
|
Scan QR Code
|
|
</DialogTitle>
|
|
<DialogDescription>
|
|
Point your camera at a Lightning invoice or payment QR code
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<QRScanner
|
|
@result="handleQRScanResult"
|
|
@close="closeQRScanner"
|
|
/>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
</template>
|