Refactor WalletPage.vue to streamline layout and enhance user experience
- Removed unused tab components and associated state management to simplify the codebase. - Improved button and QR code display elements for better interaction and visibility. - Adjusted layout for transaction history to enhance readability and organization. - Cleaned up commented-out code and unnecessary variables, improving overall code clarity. These changes contribute to a more efficient and user-friendly wallet interface.
This commit is contained in:
parent
91c76e80e7
commit
112b391a7e
1 changed files with 142 additions and 283 deletions
|
|
@ -3,7 +3,6 @@ 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 { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { ScrollArea } from '@/components/ui/scroll-area'
|
||||
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog'
|
||||
|
|
@ -25,7 +24,6 @@ const showReceiveDialog = ref(false)
|
|||
const showSendDialog = ref(false)
|
||||
const showQRScanner = ref(false)
|
||||
const scannedDestination = ref<string>('')
|
||||
const selectedTab = ref('transactions')
|
||||
const defaultQrCode = ref<string | null>(null)
|
||||
const isGeneratingQR = ref(false)
|
||||
const copiedField = ref<string | null>(null)
|
||||
|
|
@ -37,16 +35,9 @@ 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)
|
||||
const baseDomain = computed(() => {
|
||||
try {
|
||||
const baseUrl = paymentService?.config?.baseUrl || 'http://localhost'
|
||||
return new URL(baseUrl).hostname
|
||||
} catch {
|
||||
return 'localhost'
|
||||
}
|
||||
})
|
||||
|
||||
// Get transactions grouped by date
|
||||
const groupedTransactions = computed(() => {
|
||||
|
|
@ -190,12 +181,7 @@ onMounted(async () => {
|
|||
<Wallet class="h-6 w-6 sm:h-8 sm:w-8" />
|
||||
Wallet
|
||||
</h1>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
@click="refresh"
|
||||
:disabled="isLoading"
|
||||
>
|
||||
<Button variant="ghost" size="sm" @click="refresh" :disabled="isLoading">
|
||||
<RefreshCw class="h-4 w-4" :class="{ 'animate-spin': isLoading }" />
|
||||
</Button>
|
||||
</div>
|
||||
|
|
@ -213,34 +199,25 @@ onMounted(async () => {
|
|||
<!-- 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>
|
||||
{{ 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"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
|
|
@ -261,16 +238,14 @@ onMounted(async () => {
|
|||
<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">
|
||||
<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 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">
|
||||
|
|
@ -293,13 +268,9 @@ onMounted(async () => {
|
|||
<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"
|
||||
<Button variant="outline" size="sm"
|
||||
@click="copyToClipboard(firstPayLink.lnaddress || '', 'lightning-address')"
|
||||
class="h-auto px-2 shrink-0"
|
||||
title="Copy 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>
|
||||
|
|
@ -311,251 +282,142 @@ onMounted(async () => {
|
|||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Tabs -->
|
||||
<Tabs v-model="selectedTab" class="w-full">
|
||||
<TabsList class="grid w-full grid-cols-2 h-9 sm:h-10">
|
||||
<TabsTrigger value="transactions" class="text-sm sm:text-base">Transaction History</TabsTrigger>
|
||||
<TabsTrigger value="addresses" class="text-sm sm:text-base">Receive Addresses</TabsTrigger>
|
||||
</TabsList>
|
||||
<!-- 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>
|
||||
|
||||
<!-- Transactions Tab -->
|
||||
<TabsContent value="transactions" class="space-y-3 sm:space-y-4 mt-3 sm:mt-4">
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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 '--:--'
|
||||
<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')
|
||||
}
|
||||
})()
|
||||
}}</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>
|
||||
</TabsContent>
|
||||
|
||||
<!-- Addresses Tab -->
|
||||
<TabsContent value="addresses" class="space-y-3 sm:space-y-4 mt-3 sm:mt-4">
|
||||
<Card>
|
||||
<CardHeader class="pb-3 sm:pb-6">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 sm:gap-0">
|
||||
<div>
|
||||
<CardTitle class="text-lg sm:text-xl">Receive Addresses</CardTitle>
|
||||
<CardDescription class="text-sm">Your LNURL and Lightning addresses for receiving payments</CardDescription>
|
||||
</div>
|
||||
<Button
|
||||
variant="default"
|
||||
size="sm"
|
||||
@click="showReceiveDialog = true"
|
||||
class="w-full sm:w-auto"
|
||||
>
|
||||
<QrCode class="h-4 w-4 mr-2" />
|
||||
New Address
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent class="pt-0">
|
||||
<div v-if="walletService?.payLinks?.value?.length === 0" class="text-center py-8 sm:py-12 text-muted-foreground">
|
||||
<QrCode 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 receive addresses created</p>
|
||||
<p class="text-xs sm:text-sm mt-1 sm:mt-2">Create an address to start receiving payments</p>
|
||||
<Button
|
||||
variant="outline"
|
||||
class="mt-3 sm:mt-4"
|
||||
@click="showReceiveDialog = true"
|
||||
>
|
||||
Create Your First Address
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div v-else class="space-y-3 sm:space-y-4">
|
||||
<div
|
||||
v-for="link in walletService?.payLinks?.value"
|
||||
:key="link.id"
|
||||
class="p-3 sm:p-4 border rounded-lg hover:bg-accent/50 transition-colors"
|
||||
>
|
||||
<div class="flex flex-col sm:flex-row sm:items-start justify-between gap-3 sm:gap-0">
|
||||
<div class="flex-1">
|
||||
<p class="font-medium text-sm sm:text-base">{{ link.description }}</p>
|
||||
<div class="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4 mt-2 text-sm text-muted-foreground">
|
||||
<span class="text-xs sm:text-sm">{{ link.min }}-{{ link.max }} sats</span>
|
||||
<Badge v-if="link.username" variant="secondary" class="w-fit text-xs">
|
||||
{{ link.username }}@{{ baseDomain }}
|
||||
</Badge>
|
||||
return '--:--'
|
||||
} catch (error) {
|
||||
console.warn('Failed to format timestamp:', tx.timestamp, error)
|
||||
return '--:--'
|
||||
}
|
||||
})()
|
||||
}}</span>
|
||||
</div>
|
||||
|
||||
<div class="mt-2 sm:mt-3 space-y-1.5 sm:space-y-2">
|
||||
<div v-if="link.lnaddress" class="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-2">
|
||||
<span class="text-xs text-muted-foreground">Lightning Address:</span>
|
||||
<code class="text-xs bg-muted px-2 py-1 rounded break-all">{{ link.lnaddress }}</code>
|
||||
</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>
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
@click="showReceiveDialog = true"
|
||||
>
|
||||
<QrCode class="h-4 w-4" />
|
||||
</Button>
|
||||
<!-- 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>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Dialogs -->
|
||||
<ReceiveDialog
|
||||
:open="showReceiveDialog"
|
||||
@update:open="showReceiveDialog = $event"
|
||||
/>
|
||||
<ReceiveDialog :open="showReceiveDialog" @update:open="showReceiveDialog = $event" />
|
||||
|
||||
<SendDialog
|
||||
v-if="showSendDialog"
|
||||
:open="showSendDialog"
|
||||
:initial-destination="scannedDestination"
|
||||
@update:open="(open) => {
|
||||
showSendDialog = open
|
||||
if (!open) scannedDestination = ''
|
||||
}"
|
||||
/>
|
||||
<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">
|
||||
|
|
@ -570,10 +432,7 @@ onMounted(async () => {
|
|||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<QRScanner
|
||||
@result="handleQRScanResult"
|
||||
@close="closeQRScanner"
|
||||
/>
|
||||
<QRScanner @result="handleQRScanResult" @close="closeQRScanner" />
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue