move monero dashboard to separate route, export singleton wallet state
This commit is contained in:
@@ -419,3 +419,5 @@ export const Wallet = () => {
|
|||||||
moneroOpenExistingWallet,
|
moneroOpenExistingWallet,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const wallet = Wallet()
|
||||||
|
|||||||
@@ -1,10 +1,9 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { electrobun, type TxEntry, type MoneroTxEntry } from '$lib/electrobun.js'
|
import { electrobun, type TxEntry } from '$lib/electrobun.js'
|
||||||
import { Wallet, atomicToXmr } from '$lib/states/wallet.svelte.js'
|
import { wallet } from '$lib/states/wallet.svelte.js'
|
||||||
import { Button } from '$lib/components/ui/button/index.js'
|
import { Button } from '$lib/components/ui/button/index.js'
|
||||||
import { navigate } from 'sv-router/generated'
|
|
||||||
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 { navigate } from 'sv-router/generated'
|
||||||
import {
|
import {
|
||||||
Card,
|
Card,
|
||||||
CardContent,
|
CardContent,
|
||||||
@@ -25,12 +24,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
function nativeIcon(id: string) {
|
function nativeIcon(id: string) {
|
||||||
if (id === 'monero') return ''
|
|
||||||
return `${CDN}/${chainDir[id]}/info/logo.png`
|
return `${CDN}/${chainDir[id]}/info/logo.png`
|
||||||
}
|
}
|
||||||
|
|
||||||
function tokenIcon(id: string, address?: string) {
|
function tokenIcon(id: string, address?: string) {
|
||||||
if (!address || id === 'monero') return ''
|
if (!address) return ''
|
||||||
return `${CDN}/${chainDir[id]}/assets/${address}/logo.png`
|
return `${CDN}/${chainDir[id]}/assets/${address}/logo.png`
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -44,17 +42,10 @@
|
|||||||
return dir
|
return dir
|
||||||
}
|
}
|
||||||
|
|
||||||
let w = Wallet()
|
const w = wallet
|
||||||
let inputSeed = $state('')
|
let inputSeed = $state('')
|
||||||
let apiKeyInput = $state('')
|
let apiKeyInput = $state('')
|
||||||
|
|
||||||
let moneroWalletName = $state('')
|
|
||||||
let moneroWalletPass = $state('')
|
|
||||||
let moneroMnemonic = $state('')
|
|
||||||
let moneroRestoreHeight = $state<number | undefined>(undefined)
|
|
||||||
let moneroSelectedWallet = $state('')
|
|
||||||
let moneroSelectedWalletPass = $state('')
|
|
||||||
|
|
||||||
$effect(() => {
|
$effect(() => {
|
||||||
w.init()
|
w.init()
|
||||||
})
|
})
|
||||||
@@ -62,7 +53,7 @@
|
|||||||
|
|
||||||
<div class="mx-auto mt-16 max-w-md">
|
<div class="mx-auto mt-16 max-w-md">
|
||||||
{#if !w.ready}
|
{#if !w.ready}
|
||||||
{:else if !w.vaultExists && !w.isMonero()}
|
{:else if !w.vaultExists}
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<CardTitle>Import Wallet</CardTitle>
|
<CardTitle>Import Wallet</CardTitle>
|
||||||
@@ -86,13 +77,13 @@
|
|||||||
{/if}
|
{/if}
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
{:else if w.isLocked && !w.isMonero()}
|
{:else if w.isLocked}
|
||||||
<Card>
|
<Card>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
<p class="text-muted-foreground text-xs">Unlocking...</p>
|
<p class="text-muted-foreground text-xs">Unlocking...</p>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
{:else}
|
{:else if !w.isMonero()}
|
||||||
<div class="flex flex-col gap-4">
|
<div class="flex flex-col gap-4">
|
||||||
<div class="flex gap-1 justify-center" role="group">
|
<div class="flex gap-1 justify-center" role="group">
|
||||||
{#each w.networks as net}
|
{#each w.networks as net}
|
||||||
@@ -101,425 +92,197 @@
|
|||||||
net.id
|
net.id
|
||||||
? 'bg-primary text-primary-foreground'
|
? 'bg-primary text-primary-foreground'
|
||||||
: 'bg-muted text-muted-foreground hover:bg-muted/80'}"
|
: 'bg-muted text-muted-foreground hover:bg-muted/80'}"
|
||||||
onclick={() => w.switchNetwork(net.id)}>
|
onclick={() => { w.switchNetwork(net.id); if (net.id === 'monero') navigate('/monero') }}>
|
||||||
{net.name}
|
{net.name}
|
||||||
</button>
|
</button>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{#if w.isMonero()}
|
<!-- EVM DASHBOARD -->
|
||||||
<!-- MONERO DASHBOARD -->
|
<Card>
|
||||||
{#if w.moneroDownloading}
|
<CardHeader>
|
||||||
<Card>
|
<div class="flex items-center justify-between">
|
||||||
<CardContent>
|
<div>
|
||||||
<p class="text-muted-foreground text-xs">Downloading Monero binary (70MB)...</p>
|
<CardTitle>Wallet</CardTitle>
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
{:else if !w.moneroInstalled}
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Monero Setup</CardTitle>
|
|
||||||
<CardDescription>Download monero-wallet-rpc to get started</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<Button onclick={() => w.moneroDownload()}>Download (~70MB)</Button>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
{:else if !w.moneroRunning}
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Monero Wallet</CardTitle>
|
|
||||||
<CardDescription>Start the wallet RPC server to connect to the Monero network</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<Button onclick={() => w.moneroStart()} disabled={w.loading}>
|
|
||||||
{w.loading ? 'Starting...' : 'Start'}
|
|
||||||
</Button>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
{:else if !w.moneroWalletOpen}
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Monero Wallet</CardTitle>
|
|
||||||
<CardDescription>
|
<CardDescription>
|
||||||
{w.moneroWallets.length > 0
|
Your wallet is unlocked
|
||||||
? `${w.moneroWallets.length} wallet${w.moneroWallets.length > 1 ? 's' : ''} found on disk`
|
|
||||||
: 'No existing wallets found'}
|
|
||||||
</CardDescription>
|
</CardDescription>
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<div class="flex flex-col gap-3">
|
|
||||||
{#if w.moneroWallets.length > 0}
|
|
||||||
<p class="text-xs font-medium">Select a wallet to open:</p>
|
|
||||||
<div class="flex flex-wrap gap-2">
|
|
||||||
{#each w.moneroWallets as name}
|
|
||||||
<Button
|
|
||||||
variant={moneroSelectedWallet === name ? 'default' : 'outline'}
|
|
||||||
onclick={() => { moneroSelectedWallet = name; moneroSelectedWalletPass = '' }}
|
|
||||||
>
|
|
||||||
{name}
|
|
||||||
</Button>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
{#if moneroSelectedWallet}
|
|
||||||
<div class="flex gap-2 items-end">
|
|
||||||
<Input
|
|
||||||
type="password"
|
|
||||||
placeholder="Enter password"
|
|
||||||
bind:value={moneroSelectedWalletPass}
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
onclick={() => w.moneroOpenExistingWallet(moneroSelectedWallet, moneroSelectedWalletPass)}
|
|
||||||
disabled={w.loading || !moneroSelectedWalletPass}
|
|
||||||
>
|
|
||||||
Open
|
|
||||||
</Button>
|
|
||||||
</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} />
|
|
||||||
<Input type="password" placeholder="Password" bind:value={moneroWalletPass} />
|
|
||||||
<div class="flex gap-2">
|
|
||||||
<Button
|
|
||||||
onclick={async () => {
|
|
||||||
const result = await w.moneroCreateWallet(moneroWalletName, moneroWalletPass)
|
|
||||||
moneroMnemonic = result.mnemonic
|
|
||||||
}}
|
|
||||||
disabled={w.loading || !moneroWalletName || !moneroWalletPass}>
|
|
||||||
Create 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} />
|
|
||||||
<Button
|
|
||||||
onclick={() => w.moneroRestoreWallet(moneroWalletName, moneroWalletPass, moneroMnemonic, moneroRestoreHeight)}
|
|
||||||
disabled={w.loading || !moneroWalletName || !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.moneroConnected ? 'bg-green-500' : 'bg-red-500'}"></div>
|
|
||||||
<span class="text-xs text-muted-foreground">{w.moneroConnected ? 'Connected' : 'Disconnected'}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<CardDescription>
|
|
||||||
{#if w.moneroHeight < w.moneroDaemonHeight}
|
|
||||||
Scanning: {w.moneroHeight.toLocaleString()} / {w.moneroDaemonHeight.toLocaleString()}
|
|
||||||
{:else}
|
|
||||||
Height: {w.moneroHeight.toLocaleString()}
|
|
||||||
{/if}
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<div class="mb-4 space-y-1">
|
|
||||||
<p class="font-medium text-xs">Address</p>
|
|
||||||
<p class="font-mono text-xs break-all">{w.moneroAddress}</p>
|
|
||||||
<p class="mt-2 font-medium text-xs">Balance</p>
|
|
||||||
<p class="font-mono text-lg">{w.moneroBalance} XMR</p>
|
|
||||||
{#if w.moneroUnlockedAtomic !== w.moneroBalAtomic}
|
|
||||||
<p class="text-xs text-muted-foreground">
|
|
||||||
Unlocked: {w.moneroUnlocked} 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 onclick={() => { w.moneroRefresh(); w.moneroFetchAccounts(); }} disabled={w.loading}>
|
|
||||||
{w.loading ? 'Refreshing...' : 'Refresh'}
|
|
||||||
</Button>
|
|
||||||
<Button variant="outline" onclick={() => w.moneroStop()}>
|
|
||||||
Stop
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<!-- Monero transactions -->
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Transactions</CardTitle>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
{#if w.moneroTxs.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.moneroTxs as tx}
|
|
||||||
<div class="flex items-start gap-2 rounded-md bg-muted px-3 py-2 text-xs">
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<!-- Monero accounts & subaddresses -->
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Accounts & Addresses</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
{w.moneroAccounts.length} account{w.moneroAccounts.length !== 1 ? 's' : ''}
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
{#each w.moneroAccounts 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-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">{sub.address}</p>
|
|
||||||
</div>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
{/each}
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
{:else}
|
|
||||||
<!-- EVM DASHBOARD -->
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<div class="flex items-center justify-between">
|
|
||||||
<div>
|
|
||||||
<CardTitle>Wallet</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
Your wallet is unlocked
|
|
||||||
</CardDescription>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</CardHeader>
|
</div>
|
||||||
<CardContent>
|
</CardHeader>
|
||||||
{#if w.address}
|
<CardContent>
|
||||||
<div class="mb-4 space-y-1">
|
{#if w.address}
|
||||||
<p class="font-medium text-xs">Address</p>
|
<div class="mb-4 space-y-1">
|
||||||
<p class="font-mono text-xs break-all">{w.address}</p>
|
<p class="font-medium text-xs">Address</p>
|
||||||
<p class="mt-2 font-medium text-xs">
|
<p class="font-mono text-xs break-all">{w.address}</p>
|
||||||
{w.symbol} Balance
|
<p class="mt-2 font-medium text-xs">
|
||||||
</p>
|
{w.symbol} Balance
|
||||||
<p class="flex items-center gap-1.5 font-mono text-lg">
|
</p>
|
||||||
|
<p class="flex items-center gap-1.5 font-mono text-lg">
|
||||||
|
<img
|
||||||
|
src={nativeIcon(w.network)}
|
||||||
|
alt=""
|
||||||
|
class="size-4 rounded-full"
|
||||||
|
onerror={(e) =>
|
||||||
|
((e.target as HTMLElement).style.display =
|
||||||
|
'none')} />
|
||||||
|
{w.balance}
|
||||||
|
{w.symbol}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="mb-4 space-y-1">
|
||||||
|
<p class="font-medium text-xs">Tokens</p>
|
||||||
|
{#each w.tokenBalances as t}
|
||||||
|
<p
|
||||||
|
class="flex items-center gap-1.5 font-mono text-sm">
|
||||||
<img
|
<img
|
||||||
src={nativeIcon(w.network)}
|
src={t.logo}
|
||||||
alt=""
|
alt=""
|
||||||
class="size-4 rounded-full"
|
class="size-4 rounded-full"
|
||||||
onerror={(e) =>
|
onerror={(e) =>
|
||||||
((e.target as HTMLElement).style.display =
|
((e.target as HTMLElement).style.display =
|
||||||
'none')} />
|
'none')} />
|
||||||
{w.balance}
|
{Number(t.balance) < 0.0001 && Number(t.balance) > 0
|
||||||
{w.symbol}
|
? '<0.0001'
|
||||||
|
: Number(t.balance).toFixed(4)}
|
||||||
|
{t.symbol}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
{/each}
|
||||||
<div class="mb-4 space-y-1">
|
</div>
|
||||||
<p class="font-medium text-xs">Tokens</p>
|
{/if}
|
||||||
{#each w.tokenBalances as t}
|
|
||||||
<p
|
|
||||||
class="flex items-center gap-1.5 font-mono text-sm">
|
|
||||||
<img
|
|
||||||
src={t.logo}
|
|
||||||
alt=""
|
|
||||||
class="size-4 rounded-full"
|
|
||||||
onerror={(e) =>
|
|
||||||
((e.target as HTMLElement).style.display =
|
|
||||||
'none')} />
|
|
||||||
{Number(t.balance) < 0.0001 && Number(t.balance) > 0
|
|
||||||
? '<0.0001'
|
|
||||||
: Number(t.balance).toFixed(4)}
|
|
||||||
{t.symbol}
|
|
||||||
</p>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
{#if w.error}
|
{#if w.error}
|
||||||
<p class="mb-3 text-red-500">{w.error}</p>
|
<p class="mb-3 text-red-500">{w.error}</p>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<div class="flex gap-2">
|
<div class="flex gap-2">
|
||||||
<Button onclick={() => w.refresh()} disabled={w.loading}>
|
<Button onclick={() => w.refresh()} disabled={w.loading}>
|
||||||
{w.loading ? 'Refreshing...' : 'Refresh'}
|
{w.loading ? 'Refreshing...' : 'Refresh'}
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="outline" onclick={() => w.lock()}>
|
<Button variant="outline" onclick={() => w.lock()}>
|
||||||
Lock
|
Lock
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Transactions</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
{#if !w.apiKey}
|
||||||
|
<div class="flex gap-2 items-center">
|
||||||
|
<input
|
||||||
|
class="flex h-8 w-full rounded-md border border-input bg-transparent px-2 py-1 font-mono text-xs"
|
||||||
|
placeholder="Alchemy API key"
|
||||||
|
bind:value={apiKeyInput} />
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
onclick={() => w.saveApiKey(apiKeyInput)}
|
||||||
|
disabled={!apiKeyInput.trim()}>
|
||||||
|
Save
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</CardContent>
|
{:else if w.transactions.length === 0}
|
||||||
</Card>
|
<p class="text-muted-foreground text-xs">
|
||||||
|
No transactions found
|
||||||
<Card>
|
</p>
|
||||||
<CardHeader>
|
{:else}
|
||||||
<CardTitle>Transactions</CardTitle>
|
<div class="max-h-96 space-y-1 overflow-y-auto">
|
||||||
</CardHeader>
|
{#each w.transactions as tx}
|
||||||
<CardContent>
|
<button
|
||||||
{#if !w.apiKey}
|
onclick={() =>
|
||||||
<div class="flex gap-2 items-center">
|
navigate('/tx/:chainid/:hash', {
|
||||||
<input
|
params: {
|
||||||
class="flex h-8 w-full rounded-md border border-input bg-transparent px-2 py-1 font-mono text-xs"
|
chainid: w.chainid,
|
||||||
placeholder="Alchemy API key"
|
hash: tx.hash,
|
||||||
bind:value={apiKeyInput} />
|
},
|
||||||
<Button
|
})}
|
||||||
size="sm"
|
class="flex w-full cursor-pointer items-start gap-2 rounded-md bg-muted px-3 py-2 text-xs text-left hover:bg-muted/80 transition-colors">
|
||||||
onclick={() => w.saveApiKey(apiKeyInput)}
|
<div class="shrink-0 mt-0.5 {tx.from.toLowerCase() === w.address.toLowerCase() ? 'text-muted-foreground' : 'text-green-500'}">
|
||||||
disabled={!apiKeyInput.trim()}>
|
{#if tx.from.toLowerCase() === w.address.toLowerCase()}
|
||||||
Save
|
<ArrowUp size={16} />
|
||||||
</Button>
|
{:else}
|
||||||
</div>
|
<ArrowDown size={16} />
|
||||||
{:else if w.transactions.length === 0}
|
{/if}
|
||||||
<p class="text-muted-foreground text-xs">
|
</div>
|
||||||
No transactions found
|
<div class="min-w-0 flex-1 space-y-0.5">
|
||||||
</p>
|
<p class="font-medium">
|
||||||
{:else}
|
{txAction(tx, w.address)}
|
||||||
<div class="max-h-96 space-y-1 overflow-y-auto">
|
</p>
|
||||||
{#each w.transactions as tx}
|
<p
|
||||||
<button
|
class="flex items-center gap-1 text-muted-foreground font-mono">
|
||||||
onclick={() =>
|
{#if tx.pairedValue}
|
||||||
navigate('/tx/:chainid/:hash', {
|
<img
|
||||||
params: {
|
src={nativeIcon(w.network)}
|
||||||
chainid: w.chainid,
|
alt=""
|
||||||
hash: tx.hash,
|
class="size-3.5 rounded-full"
|
||||||
},
|
onerror={(e) =>
|
||||||
})}
|
((e.target as HTMLElement).style.display =
|
||||||
class="flex w-full cursor-pointer items-start gap-2 rounded-md bg-muted px-3 py-2 text-xs text-left hover:bg-muted/80 transition-colors">
|
'none')} />
|
||||||
<div class="shrink-0 mt-0.5 {tx.from.toLowerCase() === w.address.toLowerCase() ? 'text-muted-foreground' : 'text-green-500'}">
|
{Number(tx.value).toFixed(4)}
|
||||||
{#if tx.from.toLowerCase() === w.address.toLowerCase()}
|
{w.symbol}
|
||||||
<ArrowUp size={16} />
|
<span class="mx-0.5">→</span>
|
||||||
|
<img
|
||||||
|
src={tx.pairedLogo || tokenIcon(
|
||||||
|
w.network,
|
||||||
|
tx.contractAddress,
|
||||||
|
)}
|
||||||
|
alt=""
|
||||||
|
class="size-3.5 rounded-full"
|
||||||
|
onerror={(e) =>
|
||||||
|
((e.target as HTMLElement).style.display =
|
||||||
|
'none')} />
|
||||||
|
{Number(tx.pairedValue).toFixed(4)}
|
||||||
|
{tx.pairedSymbol}
|
||||||
|
{:else if tx.tokenSymbol}
|
||||||
|
<img
|
||||||
|
src={tx.logo || tokenIcon(
|
||||||
|
w.network,
|
||||||
|
tx.contractAddress,
|
||||||
|
)}
|
||||||
|
alt=""
|
||||||
|
class="size-3.5 rounded-full"
|
||||||
|
onerror={(e) =>
|
||||||
|
((e.target as HTMLElement).style.display =
|
||||||
|
'none')} />
|
||||||
|
{Number(tx.value).toFixed(4)}
|
||||||
|
{tx.tokenSymbol}
|
||||||
{:else}
|
{:else}
|
||||||
<ArrowDown size={16} />
|
<img
|
||||||
|
src={nativeIcon(w.network)}
|
||||||
|
alt=""
|
||||||
|
class="size-3.5 rounded-full"
|
||||||
|
onerror={(e) =>
|
||||||
|
((e.target as HTMLElement).style.display =
|
||||||
|
'none')} />
|
||||||
|
{Number(tx.value).toFixed(4)}
|
||||||
|
{w.symbol}
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</p>
|
||||||
<div class="min-w-0 flex-1 space-y-0.5">
|
<p class="text-muted-foreground">
|
||||||
<p class="font-medium">
|
{new Date(
|
||||||
{txAction(tx, w.address)}
|
Number(tx.timeStamp) * 1000,
|
||||||
</p>
|
).toLocaleDateString('en-US', {
|
||||||
<p
|
year: 'numeric',
|
||||||
class="flex items-center gap-1 text-muted-foreground font-mono">
|
month: 'short',
|
||||||
{#if tx.pairedValue}
|
day: 'numeric',
|
||||||
<img
|
hour: '2-digit',
|
||||||
src={nativeIcon(w.network)}
|
minute: '2-digit',
|
||||||
alt=""
|
})}
|
||||||
class="size-3.5 rounded-full"
|
</p>
|
||||||
onerror={(e) =>
|
<p
|
||||||
((e.target as HTMLElement).style.display =
|
class="text-muted-foreground/50 truncate font-mono">
|
||||||
'none')} />
|
{tx.hash.slice(0, 10)}...
|
||||||
{Number(tx.value).toFixed(4)}
|
</p>
|
||||||
{w.symbol}
|
</div>
|
||||||
<span class="mx-0.5">→</span>
|
</button>
|
||||||
<img
|
{/each}
|
||||||
src={tx.pairedLogo || tokenIcon(
|
</div>
|
||||||
w.network,
|
{/if}
|
||||||
tx.contractAddress,
|
</CardContent>
|
||||||
)}
|
</Card>
|
||||||
alt=""
|
|
||||||
class="size-3.5 rounded-full"
|
|
||||||
onerror={(e) =>
|
|
||||||
((e.target as HTMLElement).style.display =
|
|
||||||
'none')} />
|
|
||||||
{Number(tx.pairedValue).toFixed(4)}
|
|
||||||
{tx.pairedSymbol}
|
|
||||||
{:else if tx.tokenSymbol}
|
|
||||||
<img
|
|
||||||
src={tx.logo || tokenIcon(
|
|
||||||
w.network,
|
|
||||||
tx.contractAddress,
|
|
||||||
)}
|
|
||||||
alt=""
|
|
||||||
class="size-3.5 rounded-full"
|
|
||||||
onerror={(e) =>
|
|
||||||
((e.target as HTMLElement).style.display =
|
|
||||||
'none')} />
|
|
||||||
{Number(tx.value).toFixed(4)}
|
|
||||||
{tx.tokenSymbol}
|
|
||||||
{:else}
|
|
||||||
<img
|
|
||||||
src={nativeIcon(w.network)}
|
|
||||||
alt=""
|
|
||||||
class="size-3.5 rounded-full"
|
|
||||||
onerror={(e) =>
|
|
||||||
((e.target as HTMLElement).style.display =
|
|
||||||
'none')} />
|
|
||||||
{Number(tx.value).toFixed(4)}
|
|
||||||
{w.symbol}
|
|
||||||
{/if}
|
|
||||||
</p>
|
|
||||||
<p class="text-muted-foreground">
|
|
||||||
{new Date(
|
|
||||||
Number(tx.timeStamp) * 1000,
|
|
||||||
).toLocaleDateString('en-US', {
|
|
||||||
year: 'numeric',
|
|
||||||
month: 'short',
|
|
||||||
day: 'numeric',
|
|
||||||
hour: '2-digit',
|
|
||||||
minute: '2-digit',
|
|
||||||
})}
|
|
||||||
</p>
|
|
||||||
<p
|
|
||||||
class="text-muted-foreground/50 truncate font-mono">
|
|
||||||
{tx.hash.slice(0, 10)}...
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
{/if}
|
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -0,0 +1,267 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { wallet, atomicToXmr } from '$lib/states/wallet.svelte.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'
|
||||||
|
import {
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
CardDescription,
|
||||||
|
CardHeader,
|
||||||
|
CardTitle,
|
||||||
|
} from '$lib/components/ui/card/index.js'
|
||||||
|
import ArrowDown from '@lucide/svelte/icons/arrow-down'
|
||||||
|
import ArrowUp from '@lucide/svelte/icons/arrow-up'
|
||||||
|
import { navigate } from 'sv-router/generated'
|
||||||
|
|
||||||
|
const w = wallet
|
||||||
|
|
||||||
|
let moneroWalletName = $state('')
|
||||||
|
let moneroWalletPass = $state('')
|
||||||
|
let moneroMnemonic = $state('')
|
||||||
|
let moneroRestoreHeight = $state<number | undefined>(undefined)
|
||||||
|
let moneroSelectedWallet = $state('')
|
||||||
|
let moneroSelectedWalletPass = $state('')
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="mx-auto mt-16 max-w-md">
|
||||||
|
<div class="flex flex-col gap-4">
|
||||||
|
<div class="flex gap-1 justify-center" role="group">
|
||||||
|
{#each w.networks as net}
|
||||||
|
<button
|
||||||
|
class="cursor-pointer rounded-md px-2.5 py-1 text-xs font-medium transition-colors {w.network ===
|
||||||
|
net.id
|
||||||
|
? 'bg-primary text-primary-foreground'
|
||||||
|
: 'bg-muted text-muted-foreground hover:bg-muted/80'}"
|
||||||
|
onclick={() => { w.switchNetwork(net.id); if (net.id !== 'monero') navigate('/') }}>
|
||||||
|
{net.name}
|
||||||
|
</button>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- MONERO DASHBOARD -->
|
||||||
|
{#if w.moneroDownloading}
|
||||||
|
<Card>
|
||||||
|
<CardContent>
|
||||||
|
<p class="text-muted-foreground text-xs">Downloading Monero binary (70MB)...</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
{:else if !w.moneroInstalled}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Monero Setup</CardTitle>
|
||||||
|
<CardDescription>Download monero-wallet-rpc to get started</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<Button onclick={() => w.moneroDownload()}>Download (~70MB)</Button>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
{:else if !w.moneroRunning}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Monero Wallet</CardTitle>
|
||||||
|
<CardDescription>Start the wallet RPC server to connect to the Monero network</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<Button onclick={() => w.moneroStart()} disabled={w.loading}>
|
||||||
|
{w.loading ? 'Starting...' : 'Start'}
|
||||||
|
</Button>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
{:else if !w.moneroWalletOpen}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Monero Wallet</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
{w.moneroWallets.length > 0
|
||||||
|
? `${w.moneroWallets.length} wallet${w.moneroWallets.length > 1 ? 's' : ''} found on disk`
|
||||||
|
: 'No existing wallets found'}
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div class="flex flex-col gap-3">
|
||||||
|
{#if w.moneroWallets.length > 0}
|
||||||
|
<p class="text-xs font-medium">Select a wallet to open:</p>
|
||||||
|
<div class="flex flex-wrap gap-2">
|
||||||
|
{#each w.moneroWallets as name}
|
||||||
|
<Button
|
||||||
|
variant={moneroSelectedWallet === name ? 'default' : 'outline'}
|
||||||
|
onclick={() => { moneroSelectedWallet = name; moneroSelectedWalletPass = '' }}
|
||||||
|
>
|
||||||
|
{name}
|
||||||
|
</Button>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{#if moneroSelectedWallet}
|
||||||
|
<div class="flex gap-2 items-end">
|
||||||
|
<Input
|
||||||
|
type="password"
|
||||||
|
placeholder="Enter password"
|
||||||
|
bind:value={moneroSelectedWalletPass}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
onclick={() => w.moneroOpenExistingWallet(moneroSelectedWallet, moneroSelectedWalletPass)}
|
||||||
|
disabled={w.loading || !moneroSelectedWalletPass}
|
||||||
|
>
|
||||||
|
Open
|
||||||
|
</Button>
|
||||||
|
</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} />
|
||||||
|
<Input type="password" placeholder="Password" bind:value={moneroWalletPass} />
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<Button
|
||||||
|
onclick={async () => {
|
||||||
|
const result = await w.moneroCreateWallet(moneroWalletName, moneroWalletPass)
|
||||||
|
moneroMnemonic = result.mnemonic
|
||||||
|
}}
|
||||||
|
disabled={w.loading || !moneroWalletName || !moneroWalletPass}>
|
||||||
|
Create 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} />
|
||||||
|
<Button
|
||||||
|
onclick={() => w.moneroRestoreWallet(moneroWalletName, moneroWalletPass, moneroMnemonic, moneroRestoreHeight)}
|
||||||
|
disabled={w.loading || !moneroWalletName || !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.moneroConnected ? 'bg-green-500' : 'bg-red-500'}"></div>
|
||||||
|
<span class="text-xs text-muted-foreground">{w.moneroConnected ? 'Connected' : 'Disconnected'}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<CardDescription>
|
||||||
|
{#if w.moneroHeight < w.moneroDaemonHeight}
|
||||||
|
Scanning: {w.moneroHeight.toLocaleString()} / {w.moneroDaemonHeight.toLocaleString()}
|
||||||
|
{:else}
|
||||||
|
Height: {w.moneroHeight.toLocaleString()}
|
||||||
|
{/if}
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div class="mb-4 space-y-1">
|
||||||
|
<p class="font-medium text-xs">Address</p>
|
||||||
|
<p class="font-mono text-xs break-all">{w.moneroAddress}</p>
|
||||||
|
<p class="mt-2 font-medium text-xs">Balance</p>
|
||||||
|
<p class="font-mono text-lg">{w.moneroBalance} XMR</p>
|
||||||
|
{#if w.moneroUnlockedAtomic !== w.moneroBalAtomic}
|
||||||
|
<p class="text-xs text-muted-foreground">
|
||||||
|
Unlocked: {w.moneroUnlocked} 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 onclick={() => { w.moneroRefresh(); w.moneroFetchAccounts(); }} disabled={w.loading}>
|
||||||
|
{w.loading ? 'Refreshing...' : 'Refresh'}
|
||||||
|
</Button>
|
||||||
|
<Button variant="outline" onclick={() => w.moneroStop()}>
|
||||||
|
Stop
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<!-- Monero transactions -->
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Transactions</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
{#if w.moneroTxs.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.moneroTxs as tx}
|
||||||
|
<div class="flex items-start gap-2 rounded-md bg-muted px-3 py-2 text-xs">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<!-- Monero accounts & subaddresses -->
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Accounts & Addresses</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
{w.moneroAccounts.length} account{w.moneroAccounts.length !== 1 ? 's' : ''}
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
{#each w.moneroAccounts 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-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">{sub.address}</p>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
Reference in New Issue
Block a user