Add Monero fee estimates per priority level via daemon RPC

apps/desktop/src/bun/index.ts

@@ -814,6 +814,19 @@ const rpc = BrowserView.defineRPC<RPC>({
 				)
 				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 }) => {
 				console.log('[rpc] evmCreateWallet:', name)
 				const id = crypto.randomUUID()

apps/desktop/src/bun/lib/monero/wallet.ts

@@ -294,14 +294,19 @@ export class MoneroWalletManager {
 					hash: t.txid,
 					amount: t.amount?.toString() ?? '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,
 					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
 	}
 
@@ -312,13 +317,22 @@ export class MoneroWalletManager {
 		const t = result.transfer
 		const isIn = t.type === 'in'
 		const isOut = t.type === 'out'
-		const dests = t.destinations?.map((d: any) => ({
+		const dests =
-			address: d.address,
+			t.destinations?.map((d: any) => ({
-			amount: d.amount?.toString() ?? '0',
+				address: d.address,
-		})) ?? []
+				amount: d.amount?.toString() ?? '0',
+			})) ?? []
 		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 {
 			hash: t.txid,
 			direction: isIn ? ('in' as const) : ('out' as const),
@@ -344,6 +358,43 @@ export class MoneroWalletManager {
 		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> {
 		if (!this.wallet) throw new Error('Wallet RPC not started')
 		try {
@@ -366,7 +417,9 @@ export class MoneroWalletManager {
 		accountIndex: number = 0,
 	): Promise<{ txHash: string; fee: string; amount: string }> {
 		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', {
 			destinations: [{ address, amount: amount.toString() }],
 			priority,
@@ -375,7 +428,9 @@ export class MoneroWalletManager {
 			get_tx_hex: 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 {
 			txHash: result.tx_hash,
 			fee: result.fee?.toString() ?? '0',

apps/desktop/src/lib/rpc-schema.ts

@@ -73,6 +73,12 @@ export type MoneroAccountEntry = {
 	subaddresses: MoneroSubaddressEntry[]
 }
 
+export type MoneroFeeEstimate = {
+	fee: string
+	fees: string[]
+	estimatedFee: string
+}
+
 export type TxEntry = {
 	hash: string
 	timeStamp: string
@@ -164,6 +170,7 @@ export type RPC = {
 			moneroListWallets: { params: {}; response: string[] }
 			moneroTransfer: { params: { address: string; amount: string; priority?: number; accountIndex?: number }; response: MoneroSendResult }
 			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 } }
 			evmListWallets: { params: {}; response: EvmWalletInfo[] }
 			evmGetSeed: { params: { vaultKey: string }; response: string }

apps/desktop/src/routes/monero/index.svelte

@@ -1,5 +1,9 @@
 <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 { Textarea } from '$lib/components/ui/textarea/index.js'
 	import { Input } from '$lib/components/ui/input/index.js'
@@ -29,7 +33,13 @@
 	let moneroUseBiometric = $state(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(() => {
 		if (w.walletOpen && !autoRefreshTimer) {
@@ -46,6 +56,14 @@
 		}
 	})
 
+	$effect(() => {
+		if (w.walletOpen) {
+			electrobun.rpc?.request
+				.moneroGetFeeEstimate({})
+				.then((fee) => (feeEstimate = fee))
+		}
+	})
+
 	$effect(() => {
 		if (!initStarted) {
 			initStarted = true
@@ -60,298 +78,429 @@
 <div class="mx-auto mt-16 max-w-md">
 	<div class="flex flex-col gap-4">
 		{#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}
 			<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>
 		{:else if w.accountType === 'monero'}
 			{#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">
-				</CardContent>
+							Downloading Monero binary (70MB)...
-			</Card>
+						</p>
-		{:else if !w.installed}
+					</CardContent>
-			<Card>
+				</Card>
-				<CardHeader>
+			{:else if !w.installed}
-					<CardTitle>Monero Setup</CardTitle>
+				<Card>
-					<CardDescription>Download monero-wallet-rpc to get started</CardDescription>
+					<CardHeader>
-				</CardHeader>
+						<CardTitle>Monero Setup</CardTitle>
-				<CardContent>
+						<CardDescription>
-					<Button onclick={() => w.download()}>Download (~70MB)</Button>
+							Download monero-wallet-rpc to get started
-				</CardContent>
+						</CardDescription>
-			</Card>
+					</CardHeader>
-		{:else if !w.running}
+					<CardContent>
-			<Card>
+						<Button onclick={() => w.download()}>
-				<CardHeader>
+							Download (~70MB)
-					<CardTitle>Monero Wallet</CardTitle>
+						</Button>
-					<CardDescription>Start the wallet RPC server to connect to the Monero network</CardDescription>
+					</CardContent>
-				</CardHeader>
+				</Card>
-				<CardContent>
+			{:else if !w.running}
-					<Button onclick={() => w.start()} disabled={w.loading}>
+				<Card>
-						{#if w.loading}
+					<CardHeader>
-							<Loader />
+						<CardTitle>Monero Wallet</CardTitle>
-						{/if}
+						<CardDescription>
-						Start
+							Start the wallet RPC server to connect to the Monero
-					</Button>
+							network
-				</CardContent>
+						</CardDescription>
-			</Card>
+					</CardHeader>
-		{:else if !w.walletOpen}
+					<CardContent>
-			<Card>
+						<Button onclick={() => w.start()} disabled={w.loading}>
-				<CardHeader>
+							{#if w.loading}
-					<CardTitle>Monero Wallet</CardTitle>
+								<Loader />
-					<CardDescription>
-						{w.wallets.length > 0
-							? `${w.wallets.length} wallet${w.wallets.length > 1 ? 's' : ''} found on disk`
-							: 'No existing wallets found'}
-					</CardDescription>
-				</CardHeader>
-				<CardContent>
-					<div class="flex flex-col gap-3">
-						{#if w.wallets.length > 0}
-							<p class="text-xs font-medium">Select a wallet to open:</p>
-							<div class="flex flex-wrap gap-2">
-								{#each w.wallets as name}
-									<Button
-										variant={moneroSelectedWallet === name ? 'default' : 'outline'}
-										onclick={() => { moneroSelectedWallet = name; moneroSelectedWalletPass = '' }}
-									>
-										{name}
-									</Button>
-								{/each}
-							</div>
-							{#if moneroSelectedWallet}
-								<div class="flex flex-col gap-2">
-									{#if w.biometricAvailable}
-										<Button
-											onclick={async () => {
-												const ok = await w.biometricAuth()
-												if (ok) {
-													await w.openExistingWallet(moneroSelectedWallet)
-													if (!w.walletOpen) w.error = 'No password saved for this wallet'
-												}
-											}}
-											disabled={w.loading}>
-											<Fingerprint size={14} />
-											Open with Touch ID
-										</Button>
-									{/if}
-									<div class="flex gap-2 items-end">
-										<Input
-											type="password"
-											placeholder="Enter password"
-											bind:value={moneroSelectedWalletPass}
-										/>
-										<Button
-											onclick={() => w.openExistingWallet(moneroSelectedWallet, moneroSelectedWalletPass)}
-											disabled={w.loading || !moneroSelectedWalletPass}
-										>
-											Open
-										</Button>
-									</div>
-								</div>
 							{/if}
+							Start
+						</Button>
+					</CardContent>
+				</Card>
+			{:else if !w.walletOpen}
+				<Card>
+					<CardHeader>
+						<CardTitle>Monero Wallet</CardTitle>
+						<CardDescription>
+							{w.wallets.length > 0
+								? `${w.wallets.length} wallet${w.wallets.length > 1 ? 's' : ''} found on disk`
+								: 'No existing wallets found'}
+						</CardDescription>
+					</CardHeader>
+					<CardContent>
+						<div class="flex flex-col gap-3">
+							{#if w.wallets.length > 0}
+								<p class="text-xs font-medium">
+									Select a wallet to open:
+								</p>
+								<div class="flex flex-wrap gap-2">
+									{#each w.wallets as name}
+										<Button
+											variant={moneroSelectedWallet === name
+												? 'default'
+												: 'outline'}
+											onclick={() => {
+												moneroSelectedWallet = name
+												moneroSelectedWalletPass = ''
+											}}>
+											{name}
+										</Button>
+									{/each}
+								</div>
+								{#if moneroSelectedWallet}
+									<div class="flex flex-col gap-2">
+										{#if w.biometricAvailable}
+											<Button
+												onclick={async () => {
+													const ok = await w.biometricAuth()
+													if (ok) {
+														await w.openExistingWallet(
+															moneroSelectedWallet,
+														)
+														if (!w.walletOpen)
+															w.error =
+																'No password saved for this wallet'
+													}
+												}}
+												disabled={w.loading}>
+												<Fingerprint size={14} />
+												Open with Touch ID
+											</Button>
+										{/if}
+										<div class="flex gap-2 items-end">
+											<Input
+												type="password"
+												placeholder="Enter password"
+												bind:value={moneroSelectedWalletPass} />
+											<Button
+												onclick={() =>
+													w.openExistingWallet(
+														moneroSelectedWallet,
+														moneroSelectedWalletPass,
+													)}
+												disabled={w.loading ||
+													!moneroSelectedWalletPass}>
+												Open
+											</Button>
+										</div>
+									</div>
+								{/if}
+								<hr class="border-muted" />
+							{/if}
+							<p class="text-xs text-muted-foreground">
+								Or create a new wallet:
+							</p>
+							<Input
+								placeholder="Wallet name"
+								bind:value={moneroWalletName} />
+							{#if w.biometricAvailable}
+								<label
+									class="flex items-center gap-2 text-xs cursor-pointer">
+									<input
+										type="checkbox"
+										bind:checked={moneroUseBiometric} />
+									Save password with Touch ID
+								</label>
+							{/if}
+							{#if !moneroUseBiometric}
+								<Input
+									type="password"
+									placeholder="Password"
+									bind:value={moneroWalletPass} />
+							{/if}
+							<div class="flex gap-2">
+								<Button
+									onclick={async () => {
+										const pw = moneroUseBiometric
+											? crypto.randomUUID()
+											: moneroWalletPass
+										const result = await w.createWallet(
+											moneroWalletName,
+											pw,
+											moneroUseBiometric,
+										)
+										moneroMnemonic = result.mnemonic
+									}}
+									disabled={w.loading ||
+										!moneroWalletName ||
+										(!moneroUseBiometric && !moneroWalletPass)}>
+									Create Wallet
+								</Button>
+							</div>
 							<hr class="border-muted" />
-						{/if}
+							<p class="text-xs text-muted-foreground">
-						<p class="text-xs text-muted-foreground">Or create a new wallet:</p>
+								Restore from seed
-						<Input placeholder="Wallet name" bind:value={moneroWalletName} />
+							</p>
-						{#if w.biometricAvailable}
+							<Textarea
-							<label class="flex items-center gap-2 text-xs cursor-pointer">
+								placeholder="Enter your Monero seed phrase (16 or 25 words)"
-								<input type="checkbox" bind:checked={moneroUseBiometric} />
+								bind:value={moneroMnemonic} />
-								Save password with Touch ID
+							<Input
-							</label>
+								type="number"
-						{/if}
+								placeholder="Restore height (optional)"
-						{#if !moneroUseBiometric}
+								bind:value={moneroRestoreHeight} />
-							<Input type="password" placeholder="Password" bind:value={moneroWalletPass} />
+							{#if !moneroUseBiometric}
-						{/if}
+								<Input
-						<div class="flex gap-2">
+									type="password"
+									placeholder="Password"
+									bind:value={moneroWalletPass} />
+							{/if}
 							<Button
-								onclick={async () => {
+								onclick={() =>
-									const pw = moneroUseBiometric ? crypto.randomUUID() : moneroWalletPass
+									w.restoreWallet(
-									const result = await w.createWallet(moneroWalletName, pw, moneroUseBiometric)
+										moneroWalletName,
-									moneroMnemonic = result.mnemonic
+										moneroUseBiometric
-								}}
+											? crypto.randomUUID()
-								disabled={w.loading || !moneroWalletName || (!moneroUseBiometric && !moneroWalletPass)}>
+											: moneroWalletPass,
-								Create Wallet
+										moneroMnemonic,
+										moneroRestoreHeight,
+										moneroUseBiometric,
+									)}
+								disabled={w.loading ||
+									!moneroWalletName ||
+									(!moneroUseBiometric && !moneroWalletPass) ||
+									!moneroMnemonic.trim()}>
+								Restore Wallet
 							</Button>
 						</div>
-						<hr class="border-muted" />
+					</CardContent>
-						<p class="text-xs text-muted-foreground">Restore from seed</p>
+				</Card>
-						<Textarea placeholder="Enter your Monero seed phrase (16 or 25 words)" bind:value={moneroMnemonic} />
+			{:else}
-						<Input type="number" placeholder="Restore height (optional)" bind:value={moneroRestoreHeight} />
+				<!-- Monero wallet unlocked -->
-						{#if !moneroUseBiometric}
+				<Card>
-							<Input type="password" placeholder="Password" bind:value={moneroWalletPass} />
+					<CardHeader>
-						{/if}
+						<div class="flex items-center justify-between">
-						<Button
+							<CardTitle>Monero Wallet</CardTitle>
-							onclick={() => w.restoreWallet(moneroWalletName, moneroUseBiometric ? crypto.randomUUID() : moneroWalletPass, moneroMnemonic, moneroRestoreHeight, moneroUseBiometric)}
+							<div class="flex items-center gap-1.5">
-							disabled={w.loading || !moneroWalletName || (!moneroUseBiometric && !moneroWalletPass) || !moneroMnemonic.trim()}>
+								<div
-							Restore Wallet
+									class="size-2 rounded-full {w.connected
-						</Button>
+										? 'bg-green-500'
-					</div>
+										: 'bg-red-500'}">
-				</CardContent>
+								</div>
-			</Card>
+								<span class="text-xs text-muted-foreground">
-		{:else}
+									{w.connected ? 'Connected' : 'Disconnected'}
-			<!-- Monero wallet unlocked -->
+								</span>
-			<Card>
-				<CardHeader>
-					<div class="flex items-center justify-between">
-						<CardTitle>Monero Wallet</CardTitle>
-						<div class="flex items-center gap-1.5">
-							<div 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>
-					<CardDescription>
-						{#if w.height < w.daemonHeight}
-							Scanning: {w.height.toLocaleString()} / {w.daemonHeight.toLocaleString()}
-						{:else}
-							Height: {w.height.toLocaleString()}
-						{/if}
-					</CardDescription>
-				</CardHeader>
-				<CardContent>
-					<div class="mb-4 space-y-1">
-						<div class="flex items-start gap-3">
-							<QrCode text={w.address} size={128} />
-							<div class="min-w-0 flex-1 space-y-1">
-								<p class="font-medium text-xs">Address</p>
-								<p class="font-mono text-xs break-all">{w.address}</p>
 							</div>
 						</div>
-						<p class="mt-2 font-medium text-xs">Balance</p>
-						<p class="font-mono text-lg">{w.balance} XMR</p>
-						{#if w.unlockedAtomic !== w.balAtomic}
-							<p class="text-xs text-muted-foreground">
-								Unlocked: {w.unlocked} XMR
-							</p>
-						{/if}
-					</div>
-
-					{#if moneroMnemonic}
-						<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="font-mono text-xs break-all">{moneroMnemonic}</p>
-						</div>
-					{/if}
-
-					<div class="flex gap-2">
-						<Button variant="outline" onclick={() => navigate('/monero/send')}>
-							Send
-						</Button>
-						<Button variant="outline" onclick={() => navigate('/monero/settings')}>
-							<SettingsIcon size={16} />
-						</Button>
-						<Button variant="outline" onclick={async () => { await w.logout(); window.location.href = '/' }}>
-							Logout
-						</Button>
-					</div>
-				</CardContent>
-			</Card>
-
-			<!-- Monero transactions -->
-			<Card>
-				<CardHeader>
-					<CardTitle>Transactions</CardTitle>
-					{#if w.accounts.length > 0}
 						<CardDescription>
-							<div class="flex flex-wrap gap-1.5 mt-1">
+							{#if w.height < w.daemonHeight}
-								{#each w.accounts as acct}
+								Scanning: {w.height.toLocaleString()} / {w.daemonHeight.toLocaleString()}
+							{:else}
+								Height: {w.height.toLocaleString()}
+							{/if}
+						</CardDescription>
+					</CardHeader>
+					<CardContent>
+						<div class="mb-4 space-y-1">
+							<div class="flex items-start gap-3">
+								<QrCode text={w.address} size={128} />
+								<div class="min-w-0 flex-1 space-y-1">
+									<p class="font-medium text-xs">Address</p>
+									<p class="font-mono text-xs break-all">
+										{w.address}
+									</p>
+								</div>
+							</div>
+							<p class="mt-2 font-medium text-xs">Balance</p>
+							<p class="font-mono text-lg">{w.balance} XMR</p>
+							{#if w.unlockedAtomic !== w.balAtomic}
+								<p class="text-xs text-muted-foreground">
+									Unlocked: {w.unlocked} XMR
+								</p>
+							{/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>
+
+						{#if moneroMnemonic}
+							<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="font-mono text-xs break-all">
+									{moneroMnemonic}
+								</p>
+							</div>
+						{/if}
+
+						<div class="flex gap-2">
+							<Button
+								variant="outline"
+								onclick={() => navigate('/monero/send')}>
+								Send
+							</Button>
+							<Button
+								variant="outline"
+								onclick={() => navigate('/monero/settings')}>
+								<SettingsIcon size={16} />
+							</Button>
+							<Button
+								variant="outline"
+								onclick={async () => {
+									await w.logout()
+									window.location.href = '/'
+								}}>
+								Logout
+							</Button>
+						</div>
+					</CardContent>
+				</Card>
+
+				<!-- Monero transactions -->
+				<Card>
+					<CardHeader>
+						<CardTitle>Transactions</CardTitle>
+						{#if w.accounts.length > 0}
+							<CardDescription>
+								<div class="flex flex-wrap gap-1.5 mt-1">
+									{#each w.accounts as acct}
+										<button
+											onclick={() => {
+												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}
+										</button>
+									{/each}
+								</div>
+							</CardDescription>
+						{/if}
+					</CardHeader>
+					<CardContent>
+						{#if w.loading}
+							<div class="flex justify-center py-4">
+								<Loader />
+							</div>
+						{:else if w.txs.length === 0}
+							<p class="text-muted-foreground text-xs">
+								No transactions found
+							</p>
+						{:else}
+							<div class="max-h-96 space-y-1 overflow-y-auto">
+								{#each w.txs as tx}
 									<button
-										onclick={() => { w.selectedAccountIndex = acct.index; w.refresh() }}
+										onclick={() => navigate(`/monero/tx/${tx.hash}`)}
-										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'}">
+										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">
-										Account {acct.index}
+										<div
+											class="shrink-0 mt-0.5 {tx.direction === 'in'
+												? 'text-green-500'
+												: 'text-muted-foreground'}">
+											{#if tx.direction === 'in'}
+												<ArrowDown size={16} />
+											{:else}
+												<ArrowUp size={16} />
+											{/if}
+										</div>
+										<div class="min-w-0 flex-1 space-y-0.5">
+											<p class="font-medium">
+												{tx.direction === 'in' ? 'Received' : 'Sent'}
+											</p>
+											<p class="font-mono text-muted-foreground">
+												{atomicToXmr(tx.amount)} XMR
+											</p>
+											{#if tx.timestamp && tx.timestamp !== '0'}
+												<p class="text-muted-foreground">
+													{new Date(
+														Number(tx.timestamp) * 1000,
+													).toLocaleString()}
+												</p>
+											{/if}
+											<p
+												class="text-muted-foreground/50 truncate font-mono">
+												{tx.hash.slice(0, 12)}...
+											</p>
+										</div>
 									</button>
 								{/each}
 							</div>
-						</CardDescription>
+						{/if}
-					{/if}
+					</CardContent>
-				</CardHeader>
+				</Card>
-				<CardContent>
-					{#if w.loading}
-						<div class="flex justify-center py-4">
-							<Loader />
-						</div>
-					{:else if w.txs.length === 0}
-						<p class="text-muted-foreground text-xs">No transactions found</p>
-					{:else}
-						<div class="max-h-96 space-y-1 overflow-y-auto">
-							{#each w.txs as tx}
-								<button
-									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">
-									<div class="shrink-0 mt-0.5 {tx.direction === 'in' ? 'text-green-500' : 'text-muted-foreground'}">
-										{#if tx.direction === 'in'}
-											<ArrowDown size={16} />
-										{:else}
-											<ArrowUp size={16} />
-										{/if}
-									</div>
-									<div class="min-w-0 flex-1 space-y-0.5">
-										<p class="font-medium">
-											{tx.direction === 'in' ? 'Received' : 'Sent'}
-										</p>
-										<p class="font-mono text-muted-foreground">
-											{atomicToXmr(tx.amount)} XMR
-										</p>
-										{#if tx.timestamp && tx.timestamp !== '0'}
-											<p class="text-muted-foreground">{new Date(Number(tx.timestamp) * 1000).toLocaleString()}</p>
-										{/if}
-										<p class="text-muted-foreground/50 truncate font-mono">
-											{tx.hash.slice(0, 12)}...
-										</p>
-									</div>
-								</button>
-							{/each}
-						</div>
-					{/if}
-				</CardContent>
-			</Card>
 
-			<!-- Monero accounts & subaddresses -->
+				<!-- Monero accounts & subaddresses -->
-			<Card>
+				<Card>
-				<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
-					</CardDescription>
+								? 's'
-				</CardHeader>
+								: ''}
-				<CardContent>
+						</CardDescription>
-					{#each w.accounts as account}
+					</CardHeader>
-						<div class="mb-3 rounded-md bg-muted p-3">
+					<CardContent>
-							<div class="mb-1 flex items-center justify-between">
+						{#each w.accounts as account}
-								<p class="text-xs font-medium">Account {account.index}</p>
+							<div class="mb-3 rounded-md bg-muted p-3">
-								<p class="text-xs text-muted-foreground">
+								<div class="mb-1 flex items-center justify-between">
-									{atomicToXmr(account.balance)} XMR
+									<p class="text-xs font-medium">
-								</p>
+										Account {account.index}
-							</div>
+									</p>
-							<p class="mb-2 font-mono text-xs text-muted-foreground break-all">
+									<p class="text-xs text-muted-foreground">
-								{account.primaryAddress}
+										{atomicToXmr(account.balance)} XMR
-							</p>
+									</p>
-							{#if account.subaddresses.length > 1}
-								<div class="space-y-1 border-t border-border pt-2">
-									<p class="text-xs text-muted-foreground mb-1">Subaddresses</p>
-								{#each account.subaddresses as sub}
-									<div class="rounded-sm bg-background px-2 py-1.5 text-xs">
-										<div class="flex items-start gap-2">
-											<QrCode text={sub.address} size={64} />
-											<div class="min-w-0 flex-1">
-												<div class="flex items-center justify-between">
-													<p class="font-medium">#{sub.index}{sub.label ? ` - ${sub.label}` : ''}</p>
-													<p class="text-muted-foreground">{atomicToXmr(sub.balance)} XMR</p>
-												</div>
-												<p class="font-mono text-muted-foreground/50 truncate mt-0.5">{sub.address}</p>
-											</div>
-										</div>
-									</div>
-								{/each}
 								</div>
-							{/if}
+								<p
-						</div>
+									class="mb-2 font-mono text-xs text-muted-foreground break-all">
-					{/each}
+									{account.primaryAddress}
-				</CardContent>
+								</p>
-			</Card>
+								{#if account.subaddresses.length > 1}
+									<div class="space-y-1 border-t border-border pt-2">
+										<p class="text-xs text-muted-foreground mb-1">
+											Subaddresses
+										</p>
+										{#each account.subaddresses as sub}
+											<div
+												class="rounded-sm bg-background px-2 py-1.5 text-xs">
+												<div class="flex items-start gap-2">
+													<QrCode text={sub.address} size={64} />
+													<div class="min-w-0 flex-1">
+														<div
+															class="flex items-center justify-between">
+															<p class="font-medium">
+																#{sub.index}{sub.label
+																	? ` - ${sub.label}`
+																	: ''}
+															</p>
+															<p class="text-muted-foreground">
+																{atomicToXmr(sub.balance)} XMR
+															</p>
+														</div>
+														<p
+															class="font-mono text-muted-foreground/50 truncate mt-0.5">
+															{sub.address}
+														</p>
+													</div>
+												</div>
+											</div>
+										{/each}
+									</div>
+								{/if}
+							</div>
+						{/each}
+					</CardContent>
+				</Card>
+			{/if}
 		{/if}
-	{/if}
 	</div>
 </div>