Add Monero fee estimates per priority level via daemon RPC
This commit is contained in:
@@ -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()
|
||||
|
||||
@@ -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))
|
||||
console.log(`[monero] transactions: ${all.length} returned${accountIndex !== undefined ? ` for account ${accountIndex}` : ''}`)
|
||||
all.sort(
|
||||
(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) => ({
|
||||
address: d.address,
|
||||
amount: d.amount?.toString() ?? '0',
|
||||
})) ?? []
|
||||
const dests =
|
||||
t.destinations?.map((d: any) => ({
|
||||
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',
|
||||
|
||||
@@ -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 }
|
||||
|
||||
@@ -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>
|
||||
<CardContent>
|
||||
<p class="text-muted-foreground text-xs">Downloading Monero binary (70MB)...</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
{:else if !w.installed}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Monero Setup</CardTitle>
|
||||
<CardDescription>Download monero-wallet-rpc to get started</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Button onclick={() => w.download()}>Download (~70MB)</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
{:else if !w.running}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Monero Wallet</CardTitle>
|
||||
<CardDescription>Start the wallet RPC server to connect to the Monero network</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Button onclick={() => w.start()} disabled={w.loading}>
|
||||
{#if w.loading}
|
||||
<Loader />
|
||||
{/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>
|
||||
<Card>
|
||||
<CardContent>
|
||||
<p class="text-muted-foreground text-xs">
|
||||
Downloading Monero binary (70MB)...
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
{:else if !w.installed}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Monero Setup</CardTitle>
|
||||
<CardDescription>
|
||||
Download monero-wallet-rpc to get started
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Button onclick={() => w.download()}>
|
||||
Download (~70MB)
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
{:else if !w.running}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Monero Wallet</CardTitle>
|
||||
<CardDescription>
|
||||
Start the wallet RPC server to connect to the Monero
|
||||
network
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Button onclick={() => w.start()} disabled={w.loading}>
|
||||
{#if w.loading}
|
||||
<Loader />
|
||||
{/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">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">
|
||||
<p class="text-xs text-muted-foreground">
|
||||
Restore from seed
|
||||
</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}
|
||||
<Input
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
bind:value={moneroWalletPass} />
|
||||
{/if}
|
||||
<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
|
||||
onclick={() =>
|
||||
w.restoreWallet(
|
||||
moneroWalletName,
|
||||
moneroUseBiometric
|
||||
? crypto.randomUUID()
|
||||
: moneroWalletPass,
|
||||
moneroMnemonic,
|
||||
moneroRestoreHeight,
|
||||
moneroUseBiometric,
|
||||
)}
|
||||
disabled={w.loading ||
|
||||
!moneroWalletName ||
|
||||
(!moneroUseBiometric && !moneroWalletPass) ||
|
||||
!moneroMnemonic.trim()}>
|
||||
Restore Wallet
|
||||
</Button>
|
||||
</div>
|
||||
<hr class="border-muted" />
|
||||
<p class="text-xs text-muted-foreground">Restore from seed</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}
|
||||
<Input type="password" placeholder="Password" bind:value={moneroWalletPass} />
|
||||
{/if}
|
||||
<Button
|
||||
onclick={() => w.restoreWallet(moneroWalletName, moneroUseBiometric ? crypto.randomUUID() : moneroWalletPass, moneroMnemonic, moneroRestoreHeight, moneroUseBiometric)}
|
||||
disabled={w.loading || !moneroWalletName || (!moneroUseBiometric && !moneroWalletPass) || !moneroMnemonic.trim()}>
|
||||
Restore Wallet
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
{:else}
|
||||
<!-- Monero wallet unlocked -->
|
||||
<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>
|
||||
</CardContent>
|
||||
</Card>
|
||||
{:else}
|
||||
<!-- Monero wallet unlocked -->
|
||||
<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>
|
||||
<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">
|
||||
{#each w.accounts as acct}
|
||||
{#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}
|
||||
{#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() }}
|
||||
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}
|
||||
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>
|
||||
</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={() => 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>
|
||||
{/if}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Monero accounts & subaddresses -->
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Accounts & Addresses</CardTitle>
|
||||
<CardDescription>
|
||||
{w.accounts.length} account{w.accounts.length !== 1 ? 's' : ''}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{#each w.accounts as account}
|
||||
<div class="mb-3 rounded-md bg-muted p-3">
|
||||
<div class="mb-1 flex items-center justify-between">
|
||||
<p class="text-xs font-medium">Account {account.index}</p>
|
||||
<p class="text-xs text-muted-foreground">
|
||||
{atomicToXmr(account.balance)} XMR
|
||||
</p>
|
||||
</div>
|
||||
<p class="mb-2 font-mono text-xs text-muted-foreground break-all">
|
||||
{account.primaryAddress}
|
||||
</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}
|
||||
<!-- Monero accounts & subaddresses -->
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Accounts & Addresses</CardTitle>
|
||||
<CardDescription>
|
||||
{w.accounts.length} account{w.accounts.length !== 1
|
||||
? 's'
|
||||
: ''}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{#each w.accounts as account}
|
||||
<div class="mb-3 rounded-md bg-muted p-3">
|
||||
<div class="mb-1 flex items-center justify-between">
|
||||
<p class="text-xs font-medium">
|
||||
Account {account.index}
|
||||
</p>
|
||||
<p class="text-xs text-muted-foreground">
|
||||
{atomicToXmr(account.balance)} XMR
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</CardContent>
|
||||
</Card>
|
||||
<p
|
||||
class="mb-2 font-mono text-xs text-muted-foreground break-all">
|
||||
{account.primaryAddress}
|
||||
</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}
|
||||
</div>
|
||||
{/each}
|
||||
</CardContent>
|
||||
</Card>
|
||||
{/if}
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user