Add Monero fee estimates per priority level via daemon RPC

This commit is contained in:
2026-05-25 22:37:54 +08:00
parent bdd841b632
commit 3925f3a4aa
4 changed files with 510 additions and 286 deletions
+13
View File
@@ -814,6 +814,19 @@ const rpc = BrowserView.defineRPC<RPC>({
) )
return details return details
}, },
moneroGetFeeEstimate: async () => {
console.log('[rpc] moneroGetFeeEstimate')
if (!moneroManager)
throw new Error('Monero wallet RPC not started')
try {
const fee = await moneroManager.getFeeEstimate()
console.log('[monero][gas][fee]', fee)
return fee
} catch (error) {
console.log('[monero][gas][error]', error)
return
}
},
evmCreateWallet: async ({ name, phrase, passwordHash }) => { evmCreateWallet: async ({ name, phrase, passwordHash }) => {
console.log('[rpc] evmCreateWallet:', name) console.log('[rpc] evmCreateWallet:', name)
const id = crypto.randomUUID() const id = crypto.randomUUID()
+63 -8
View File
@@ -294,14 +294,19 @@ export class MoneroWalletManager {
hash: t.txid, hash: t.txid,
amount: t.amount?.toString() ?? '0', amount: t.amount?.toString() ?? '0',
timestamp: String(t.timestamp ?? 0), timestamp: String(t.timestamp ?? 0),
direction: dir === 'in' ? ('in' as const) : ('out' as const), direction:
dir === 'in' ? ('in' as const) : ('out' as const),
height: t.height ?? 0, height: t.height ?? 0,
note: t.note, note: t.note,
}) })
} }
} }
all.sort((a: any, b: any) => Number(b.timestamp) - Number(a.timestamp)) all.sort(
console.log(`[monero] transactions: ${all.length} returned${accountIndex !== undefined ? ` for account ${accountIndex}` : ''}`) (a: any, b: any) => Number(b.timestamp) - Number(a.timestamp),
)
console.log(
`[monero] transactions: ${all.length} returned${accountIndex !== undefined ? ` for account ${accountIndex}` : ''}`,
)
return all return all
} }
@@ -312,13 +317,22 @@ export class MoneroWalletManager {
const t = result.transfer const t = result.transfer
const isIn = t.type === 'in' const isIn = t.type === 'in'
const isOut = t.type === 'out' const isOut = t.type === 'out'
const dests = t.destinations?.map((d: any) => ({ const dests =
t.destinations?.map((d: any) => ({
address: d.address, address: d.address,
amount: d.amount?.toString() ?? '0', amount: d.amount?.toString() ?? '0',
})) ?? [] })) ?? []
const subaddrIndices = isIn const subaddrIndices = isIn
? [{ major: t.subaddr_index?.major ?? 0, minor: t.subaddr_index?.minor ?? 0 }] ? [
: (t.subaddr_indices ?? []).map((s: any) => ({ major: s.major ?? 0, minor: s.minor ?? 0 })) {
major: t.subaddr_index?.major ?? 0,
minor: t.subaddr_index?.minor ?? 0,
},
]
: (t.subaddr_indices ?? []).map((s: any) => ({
major: s.major ?? 0,
minor: s.minor ?? 0,
}))
return { return {
hash: t.txid, hash: t.txid,
direction: isIn ? ('in' as const) : ('out' as const), direction: isIn ? ('in' as const) : ('out' as const),
@@ -344,6 +358,43 @@ export class MoneroWalletManager {
return height return height
} }
async getFeeEstimate(): Promise<{
fee: string
fees: string[]
estimatedFee: string
}> {
try {
const conn = new MoneroRpcConnection({
uri: `http://${this.daemonAddress}`,
})
const res = await conn.sendJsonRequest('get_fee_estimate', {
grace_blocks: 10,
})
if (res?.error) throw new Error(res.error.message)
console.log('[rpc][get_fee_estimate][response]', res)
const result = res?.result
const txSizeKb = 2.5
const feePerKb = BigInt(result.fee ?? '0')
const fees = (result.fees ?? []).map((f: string) =>
BigInt(f).toString(),
)
const estimated =
(feePerKb * BigInt(Math.round(txSizeKb * 10))) / 10n
return {
fee: feePerKb.toString(),
fees,
estimatedFee: estimated.toString(),
}
} catch (e) {
console.log('[monero] getFeeEstimate error:', e)
return {
fee: '0',
fees: ['0', '0', '0', '0'],
estimatedFee: '0',
}
}
}
async getDaemonHeight(): Promise<number> { async getDaemonHeight(): Promise<number> {
if (!this.wallet) throw new Error('Wallet RPC not started') if (!this.wallet) throw new Error('Wallet RPC not started')
try { try {
@@ -366,7 +417,9 @@ export class MoneroWalletManager {
accountIndex: number = 0, accountIndex: number = 0,
): Promise<{ txHash: string; fee: string; amount: string }> { ): Promise<{ txHash: string; fee: string; amount: string }> {
if (!this.wallet) throw new Error('Wallet RPC not started') if (!this.wallet) throw new Error('Wallet RPC not started')
console.log(`[monero] transfer: ${address} amount=${amount.toString()} priority=${priority} account=${accountIndex}`) console.log(
`[monero] transfer: ${address} amount=${amount.toString()} priority=${priority} account=${accountIndex}`,
)
const result = await this.rawRpc('transfer', { const result = await this.rawRpc('transfer', {
destinations: [{ address, amount: amount.toString() }], destinations: [{ address, amount: amount.toString() }],
priority, priority,
@@ -375,7 +428,9 @@ export class MoneroWalletManager {
get_tx_hex: false, get_tx_hex: false,
get_tx_metadata: false, get_tx_metadata: false,
}) })
console.log(`[monero] transfer result: tx_hash=${result.tx_hash} fee=${result.fee} amount=${result.amount}`) console.log(
`[monero] transfer result: tx_hash=${result.tx_hash} fee=${result.fee} amount=${result.amount}`,
)
return { return {
txHash: result.tx_hash, txHash: result.tx_hash,
fee: result.fee?.toString() ?? '0', fee: result.fee?.toString() ?? '0',
+7
View File
@@ -73,6 +73,12 @@ export type MoneroAccountEntry = {
subaddresses: MoneroSubaddressEntry[] subaddresses: MoneroSubaddressEntry[]
} }
export type MoneroFeeEstimate = {
fee: string
fees: string[]
estimatedFee: string
}
export type TxEntry = { export type TxEntry = {
hash: string hash: string
timeStamp: string timeStamp: string
@@ -164,6 +170,7 @@ export type RPC = {
moneroListWallets: { params: {}; response: string[] } moneroListWallets: { params: {}; response: string[] }
moneroTransfer: { params: { address: string; amount: string; priority?: number; accountIndex?: number }; response: MoneroSendResult } moneroTransfer: { params: { address: string; amount: string; priority?: number; accountIndex?: number }; response: MoneroSendResult }
moneroGetTransferDetails: { params: { txid: string }; response: MoneroTransferDetails | null } moneroGetTransferDetails: { params: { txid: string }; response: MoneroTransferDetails | null }
moneroGetFeeEstimate: { params: {}; response: MoneroFeeEstimate | null }
evmCreateWallet: { params: { name: string; phrase: string; passwordHash?: string }; response: { id: string; name: string; createdAt: string } } evmCreateWallet: { params: { name: string; phrase: string; passwordHash?: string }; response: { id: string; name: string; createdAt: string } }
evmListWallets: { params: {}; response: EvmWalletInfo[] } evmListWallets: { params: {}; response: EvmWalletInfo[] }
evmGetSeed: { params: { vaultKey: string }; response: string } evmGetSeed: { params: { vaultKey: string }; response: string }
+205 -56
View File
@@ -1,5 +1,9 @@
<script lang="ts"> <script lang="ts">
import { moneroWallet, atomicToXmr } from '$lib/states/monero-wallet.svelte.js' import {
moneroWallet,
atomicToXmr,
} from '$lib/states/monero-wallet.svelte.js'
import { electrobun } from '$lib/electrobun.js'
import { Button } from '$lib/components/ui/button/index.js' import { Button } from '$lib/components/ui/button/index.js'
import { Textarea } from '$lib/components/ui/textarea/index.js' import { Textarea } from '$lib/components/ui/textarea/index.js'
import { Input } from '$lib/components/ui/input/index.js' import { Input } from '$lib/components/ui/input/index.js'
@@ -29,7 +33,13 @@
let moneroUseBiometric = $state(false) let moneroUseBiometric = $state(false)
let initStarted = false let initStarted = false
let autoRefreshTimer: ReturnType<typeof setInterval> | undefined = $state() let autoRefreshTimer: ReturnType<typeof setInterval> | undefined =
$state()
let feeEstimate = $state<{
fee: string
fees: string[]
estimatedFee: string
} | null>(null)
$effect(() => { $effect(() => {
if (w.walletOpen && !autoRefreshTimer) { if (w.walletOpen && !autoRefreshTimer) {
@@ -46,6 +56,14 @@
} }
}) })
$effect(() => {
if (w.walletOpen) {
electrobun.rpc?.request
.moneroGetFeeEstimate({})
.then((fee) => (feeEstimate = fee))
}
})
$effect(() => { $effect(() => {
if (!initStarted) { if (!initStarted) {
initStarted = true initStarted = true
@@ -60,33 +78,45 @@
<div class="mx-auto mt-16 max-w-md"> <div class="mx-auto mt-16 max-w-md">
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4">
{#if !w.ready} {#if !w.ready}
<p class="text-center text-muted-foreground text-sm mt-8">Loading...</p> <p class="text-center text-muted-foreground text-sm mt-8">
Loading...
</p>
{:else if !w.accountType} {:else if !w.accountType}
<p class="text-center text-muted-foreground text-sm mt-8"> <p class="text-center text-muted-foreground text-sm mt-8">
<a href="/" class="underline">Go to welcome page</a> to get started <a href="/" class="underline">Go to welcome page</a>
to get started
</p> </p>
{:else if w.accountType === 'monero'} {:else if w.accountType === 'monero'}
{#if w.downloading} {#if w.downloading}
<Card> <Card>
<CardContent> <CardContent>
<p class="text-muted-foreground text-xs">Downloading Monero binary (70MB)...</p> <p class="text-muted-foreground text-xs">
Downloading Monero binary (70MB)...
</p>
</CardContent> </CardContent>
</Card> </Card>
{:else if !w.installed} {:else if !w.installed}
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle>Monero Setup</CardTitle> <CardTitle>Monero Setup</CardTitle>
<CardDescription>Download monero-wallet-rpc to get started</CardDescription> <CardDescription>
Download monero-wallet-rpc to get started
</CardDescription>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<Button onclick={() => w.download()}>Download (~70MB)</Button> <Button onclick={() => w.download()}>
Download (~70MB)
</Button>
</CardContent> </CardContent>
</Card> </Card>
{:else if !w.running} {:else if !w.running}
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle>Monero Wallet</CardTitle> <CardTitle>Monero Wallet</CardTitle>
<CardDescription>Start the wallet RPC server to connect to the Monero network</CardDescription> <CardDescription>
Start the wallet RPC server to connect to the Monero
network
</CardDescription>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<Button onclick={() => w.start()} disabled={w.loading}> <Button onclick={() => w.start()} disabled={w.loading}>
@@ -110,13 +140,19 @@
<CardContent> <CardContent>
<div class="flex flex-col gap-3"> <div class="flex flex-col gap-3">
{#if w.wallets.length > 0} {#if w.wallets.length > 0}
<p class="text-xs font-medium">Select a wallet to open:</p> <p class="text-xs font-medium">
Select a wallet to open:
</p>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
{#each w.wallets as name} {#each w.wallets as name}
<Button <Button
variant={moneroSelectedWallet === name ? 'default' : 'outline'} variant={moneroSelectedWallet === name
onclick={() => { moneroSelectedWallet = name; moneroSelectedWalletPass = '' }} ? 'default'
> : 'outline'}
onclick={() => {
moneroSelectedWallet = name
moneroSelectedWalletPass = ''
}}>
{name} {name}
</Button> </Button>
{/each} {/each}
@@ -128,8 +164,12 @@
onclick={async () => { onclick={async () => {
const ok = await w.biometricAuth() const ok = await w.biometricAuth()
if (ok) { if (ok) {
await w.openExistingWallet(moneroSelectedWallet) await w.openExistingWallet(
if (!w.walletOpen) w.error = 'No password saved for this wallet' moneroSelectedWallet,
)
if (!w.walletOpen)
w.error =
'No password saved for this wallet'
} }
}} }}
disabled={w.loading}> disabled={w.loading}>
@@ -141,12 +181,15 @@
<Input <Input
type="password" type="password"
placeholder="Enter password" placeholder="Enter password"
bind:value={moneroSelectedWalletPass} bind:value={moneroSelectedWalletPass} />
/>
<Button <Button
onclick={() => w.openExistingWallet(moneroSelectedWallet, moneroSelectedWalletPass)} onclick={() =>
disabled={w.loading || !moneroSelectedWalletPass} w.openExistingWallet(
> moneroSelectedWallet,
moneroSelectedWalletPass,
)}
disabled={w.loading ||
!moneroSelectedWalletPass}>
Open Open
</Button> </Button>
</div> </div>
@@ -154,38 +197,78 @@
{/if} {/if}
<hr class="border-muted" /> <hr class="border-muted" />
{/if} {/if}
<p class="text-xs text-muted-foreground">Or create a new wallet:</p> <p class="text-xs text-muted-foreground">
<Input placeholder="Wallet name" bind:value={moneroWalletName} /> Or create a new wallet:
</p>
<Input
placeholder="Wallet name"
bind:value={moneroWalletName} />
{#if w.biometricAvailable} {#if w.biometricAvailable}
<label class="flex items-center gap-2 text-xs cursor-pointer"> <label
<input type="checkbox" bind:checked={moneroUseBiometric} /> class="flex items-center gap-2 text-xs cursor-pointer">
<input
type="checkbox"
bind:checked={moneroUseBiometric} />
Save password with Touch ID Save password with Touch ID
</label> </label>
{/if} {/if}
{#if !moneroUseBiometric} {#if !moneroUseBiometric}
<Input type="password" placeholder="Password" bind:value={moneroWalletPass} /> <Input
type="password"
placeholder="Password"
bind:value={moneroWalletPass} />
{/if} {/if}
<div class="flex gap-2"> <div class="flex gap-2">
<Button <Button
onclick={async () => { onclick={async () => {
const pw = moneroUseBiometric ? crypto.randomUUID() : moneroWalletPass const pw = moneroUseBiometric
const result = await w.createWallet(moneroWalletName, pw, moneroUseBiometric) ? crypto.randomUUID()
: moneroWalletPass
const result = await w.createWallet(
moneroWalletName,
pw,
moneroUseBiometric,
)
moneroMnemonic = result.mnemonic moneroMnemonic = result.mnemonic
}} }}
disabled={w.loading || !moneroWalletName || (!moneroUseBiometric && !moneroWalletPass)}> disabled={w.loading ||
!moneroWalletName ||
(!moneroUseBiometric && !moneroWalletPass)}>
Create Wallet Create Wallet
</Button> </Button>
</div> </div>
<hr class="border-muted" /> <hr class="border-muted" />
<p class="text-xs text-muted-foreground">Restore from seed</p> <p class="text-xs text-muted-foreground">
<Textarea placeholder="Enter your Monero seed phrase (16 or 25 words)" bind:value={moneroMnemonic} /> Restore from seed
<Input type="number" placeholder="Restore height (optional)" bind:value={moneroRestoreHeight} /> </p>
<Textarea
placeholder="Enter your Monero seed phrase (16 or 25 words)"
bind:value={moneroMnemonic} />
<Input
type="number"
placeholder="Restore height (optional)"
bind:value={moneroRestoreHeight} />
{#if !moneroUseBiometric} {#if !moneroUseBiometric}
<Input type="password" placeholder="Password" bind:value={moneroWalletPass} /> <Input
type="password"
placeholder="Password"
bind:value={moneroWalletPass} />
{/if} {/if}
<Button <Button
onclick={() => w.restoreWallet(moneroWalletName, moneroUseBiometric ? crypto.randomUUID() : moneroWalletPass, moneroMnemonic, moneroRestoreHeight, moneroUseBiometric)} onclick={() =>
disabled={w.loading || !moneroWalletName || (!moneroUseBiometric && !moneroWalletPass) || !moneroMnemonic.trim()}> w.restoreWallet(
moneroWalletName,
moneroUseBiometric
? crypto.randomUUID()
: moneroWalletPass,
moneroMnemonic,
moneroRestoreHeight,
moneroUseBiometric,
)}
disabled={w.loading ||
!moneroWalletName ||
(!moneroUseBiometric && !moneroWalletPass) ||
!moneroMnemonic.trim()}>
Restore Wallet Restore Wallet
</Button> </Button>
</div> </div>
@@ -198,8 +281,14 @@
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<CardTitle>Monero Wallet</CardTitle> <CardTitle>Monero Wallet</CardTitle>
<div class="flex items-center gap-1.5"> <div class="flex items-center gap-1.5">
<div class="size-2 rounded-full {w.connected ? 'bg-green-500' : 'bg-red-500'}"></div> <div
<span class="text-xs text-muted-foreground">{w.connected ? 'Connected' : 'Disconnected'}</span> class="size-2 rounded-full {w.connected
? 'bg-green-500'
: 'bg-red-500'}">
</div>
<span class="text-xs text-muted-foreground">
{w.connected ? 'Connected' : 'Disconnected'}
</span>
</div> </div>
</div> </div>
<CardDescription> <CardDescription>
@@ -216,7 +305,9 @@
<QrCode text={w.address} size={128} /> <QrCode text={w.address} size={128} />
<div class="min-w-0 flex-1 space-y-1"> <div class="min-w-0 flex-1 space-y-1">
<p class="font-medium text-xs">Address</p> <p class="font-medium text-xs">Address</p>
<p class="font-mono text-xs break-all">{w.address}</p> <p class="font-mono text-xs break-all">
{w.address}
</p>
</div> </div>
</div> </div>
<p class="mt-2 font-medium text-xs">Balance</p> <p class="mt-2 font-medium text-xs">Balance</p>
@@ -226,23 +317,47 @@
Unlocked: {w.unlocked} XMR Unlocked: {w.unlocked} XMR
</p> </p>
{/if} {/if}
{#if feeEstimate}
{@const labels = ['Unimportant', 'Normal', 'Elevated', 'Priority']}
<div class="mt-1 space-y-0.5">
{#each feeEstimate.fees as f, i}
{@const feeAtomic = (BigInt(f) * 2500n) / 1000n}
<p class="text-xs text-muted-foreground">
{labels[i]}: ~{atomicToXmr(feeAtomic.toString())} XMR
</p>
{/each}
</div>
{/if}
</div> </div>
{#if moneroMnemonic} {#if moneroMnemonic}
<div class="mb-4 rounded-md bg-muted p-3"> <div class="mb-4 rounded-md bg-muted p-3">
<p class="text-xs font-medium mb-1">Seed phrase (save this!)</p> <p class="text-xs font-medium mb-1">
<p class="font-mono text-xs break-all">{moneroMnemonic}</p> Seed phrase (save this!)
</p>
<p class="font-mono text-xs break-all">
{moneroMnemonic}
</p>
</div> </div>
{/if} {/if}
<div class="flex gap-2"> <div class="flex gap-2">
<Button variant="outline" onclick={() => navigate('/monero/send')}> <Button
variant="outline"
onclick={() => navigate('/monero/send')}>
Send Send
</Button> </Button>
<Button variant="outline" onclick={() => navigate('/monero/settings')}> <Button
variant="outline"
onclick={() => navigate('/monero/settings')}>
<SettingsIcon size={16} /> <SettingsIcon size={16} />
</Button> </Button>
<Button variant="outline" onclick={async () => { await w.logout(); window.location.href = '/' }}> <Button
variant="outline"
onclick={async () => {
await w.logout()
window.location.href = '/'
}}>
Logout Logout
</Button> </Button>
</div> </div>
@@ -258,8 +373,14 @@
<div class="flex flex-wrap gap-1.5 mt-1"> <div class="flex flex-wrap gap-1.5 mt-1">
{#each w.accounts as acct} {#each w.accounts as acct}
<button <button
onclick={() => { w.selectedAccountIndex = acct.index; w.refresh() }} onclick={() => {
class="rounded-md px-2 py-0.5 text-xs transition-colors {w.selectedAccountIndex === acct.index ? 'bg-primary text-primary-foreground' : 'bg-muted text-muted-foreground hover:bg-muted/80'}"> w.selectedAccountIndex = acct.index
w.refresh()
}}
class="rounded-md px-2 py-0.5 text-xs transition-colors {w.selectedAccountIndex ===
acct.index
? 'bg-primary text-primary-foreground'
: 'bg-muted text-muted-foreground hover:bg-muted/80'}">
Account {acct.index} Account {acct.index}
</button> </button>
{/each} {/each}
@@ -273,14 +394,19 @@
<Loader /> <Loader />
</div> </div>
{:else if w.txs.length === 0} {:else if w.txs.length === 0}
<p class="text-muted-foreground text-xs">No transactions found</p> <p class="text-muted-foreground text-xs">
No transactions found
</p>
{:else} {:else}
<div class="max-h-96 space-y-1 overflow-y-auto"> <div class="max-h-96 space-y-1 overflow-y-auto">
{#each w.txs as tx} {#each w.txs as tx}
<button <button
onclick={() => navigate(`/monero/tx/${tx.hash}`)} onclick={() => navigate(`/monero/tx/${tx.hash}`)}
class="flex w-full items-start gap-2 rounded-md bg-muted px-3 py-2 text-xs text-left cursor-pointer hover:bg-muted/80 transition-colors"> class="flex w-full items-start gap-2 rounded-md bg-muted px-3 py-2 text-xs text-left cursor-pointer hover:bg-muted/80 transition-colors">
<div class="shrink-0 mt-0.5 {tx.direction === 'in' ? 'text-green-500' : 'text-muted-foreground'}"> <div
class="shrink-0 mt-0.5 {tx.direction === 'in'
? 'text-green-500'
: 'text-muted-foreground'}">
{#if tx.direction === 'in'} {#if tx.direction === 'in'}
<ArrowDown size={16} /> <ArrowDown size={16} />
{:else} {:else}
@@ -295,9 +421,14 @@
{atomicToXmr(tx.amount)} XMR {atomicToXmr(tx.amount)} XMR
</p> </p>
{#if tx.timestamp && tx.timestamp !== '0'} {#if tx.timestamp && tx.timestamp !== '0'}
<p class="text-muted-foreground">{new Date(Number(tx.timestamp) * 1000).toLocaleString()}</p> <p class="text-muted-foreground">
{new Date(
Number(tx.timestamp) * 1000,
).toLocaleString()}
</p>
{/if} {/if}
<p class="text-muted-foreground/50 truncate font-mono"> <p
class="text-muted-foreground/50 truncate font-mono">
{tx.hash.slice(0, 12)}... {tx.hash.slice(0, 12)}...
</p> </p>
</div> </div>
@@ -313,34 +444,52 @@
<CardHeader> <CardHeader>
<CardTitle>Accounts & Addresses</CardTitle> <CardTitle>Accounts & Addresses</CardTitle>
<CardDescription> <CardDescription>
{w.accounts.length} account{w.accounts.length !== 1 ? 's' : ''} {w.accounts.length} account{w.accounts.length !== 1
? 's'
: ''}
</CardDescription> </CardDescription>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
{#each w.accounts as account} {#each w.accounts as account}
<div class="mb-3 rounded-md bg-muted p-3"> <div class="mb-3 rounded-md bg-muted p-3">
<div class="mb-1 flex items-center justify-between"> <div class="mb-1 flex items-center justify-between">
<p class="text-xs font-medium">Account {account.index}</p> <p class="text-xs font-medium">
Account {account.index}
</p>
<p class="text-xs text-muted-foreground"> <p class="text-xs text-muted-foreground">
{atomicToXmr(account.balance)} XMR {atomicToXmr(account.balance)} XMR
</p> </p>
</div> </div>
<p class="mb-2 font-mono text-xs text-muted-foreground break-all"> <p
class="mb-2 font-mono text-xs text-muted-foreground break-all">
{account.primaryAddress} {account.primaryAddress}
</p> </p>
{#if account.subaddresses.length > 1} {#if account.subaddresses.length > 1}
<div class="space-y-1 border-t border-border pt-2"> <div class="space-y-1 border-t border-border pt-2">
<p class="text-xs text-muted-foreground mb-1">Subaddresses</p> <p class="text-xs text-muted-foreground mb-1">
Subaddresses
</p>
{#each account.subaddresses as sub} {#each account.subaddresses as sub}
<div class="rounded-sm bg-background px-2 py-1.5 text-xs"> <div
class="rounded-sm bg-background px-2 py-1.5 text-xs">
<div class="flex items-start gap-2"> <div class="flex items-start gap-2">
<QrCode text={sub.address} size={64} /> <QrCode text={sub.address} size={64} />
<div class="min-w-0 flex-1"> <div class="min-w-0 flex-1">
<div class="flex items-center justify-between"> <div
<p class="font-medium">#{sub.index}{sub.label ? ` - ${sub.label}` : ''}</p> class="flex items-center justify-between">
<p class="text-muted-foreground">{atomicToXmr(sub.balance)} XMR</p> <p class="font-medium">
#{sub.index}{sub.label
? ` - ${sub.label}`
: ''}
</p>
<p class="text-muted-foreground">
{atomicToXmr(sub.balance)} XMR
</p>
</div> </div>
<p class="font-mono text-muted-foreground/50 truncate mt-0.5">{sub.address}</p> <p
class="font-mono text-muted-foreground/50 truncate mt-0.5">
{sub.address}
</p>
</div> </div>
</div> </div>
</div> </div>