From 135d651622a70af8d9ea15b3b3386eb49856e66f Mon Sep 17 00:00:00 2001
From: TZGyn <spectator_brethren761@slmails.com>
Date: Sun, 17 May 2026 18:42:12 +0800
Subject: [PATCH] extract EVM dashboard to shared component, add per-chain
 routes for bsc/polygon

---
 .../src/lib/components/EvmDashboard.svelte    | 296 ++++++++++++++++++
 apps/desktop/src/lib/states/wallet.svelte.ts  |   2 +-
 apps/desktop/src/routes/bsc/index.svelte      |   7 +
 apps/desktop/src/routes/index.svelte          | 285 +----------------
 apps/desktop/src/routes/monero/index.svelte   |  17 +-
 apps/desktop/src/routes/polygon/index.svelte  |   7 +
 6 files changed, 328 insertions(+), 286 deletions(-)
 create mode 100644 apps/desktop/src/lib/components/EvmDashboard.svelte
 create mode 100644 apps/desktop/src/routes/bsc/index.svelte
 create mode 100644 apps/desktop/src/routes/polygon/index.svelte

diff --git a/apps/desktop/src/lib/components/EvmDashboard.svelte b/apps/desktop/src/lib/components/EvmDashboard.svelte
new file mode 100644
index 0000000..fae6302
--- /dev/null
+++ b/apps/desktop/src/lib/components/EvmDashboard.svelte
@@ -0,0 +1,296 @@
+<script lang="ts">
+	import { electrobun, type TxEntry } from '$lib/electrobun.js'
+	import { wallet, type NetworkId } 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 { navigate } from 'sv-router/generated'
+	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'
+
+	let { networkId }: { networkId: NetworkId } = $props()
+
+	const CDN =
+		'https://raw.githubusercontent.com/trustwallet/assets/master/blockchains'
+
+	const chainDir: Record<string, string> = {
+		eth: 'ethereum',
+		bsc: 'smartchain',
+		polygon: 'polygon',
+	}
+
+	function nativeIcon(id: string) {
+		return `${CDN}/${chainDir[id]}/info/logo.png`
+	}
+
+	function tokenIcon(id: string, address?: string) {
+		if (!address) return ''
+		return `${CDN}/${chainDir[id]}/assets/${address}/logo.png`
+	}
+
+	function txAction(tx: TxEntry, address: string): string {
+		if (tx.pairedValue) return 'Swap'
+		const dir =
+			tx.from.toLowerCase() === address.toLowerCase()
+				? 'Sent'
+				: 'Received'
+		if (tx.tokenSymbol) return `${dir} ${tx.tokenSymbol}`
+		return dir
+	}
+
+	const w = wallet
+	let inputSeed = $state('')
+	let apiKeyInput = $state('')
+
+	function navTarget(id: NetworkId): string {
+		if (id === 'eth') return '/'
+		return `/${id}`
+	}
+
+	let initStarted = false
+	$effect(() => {
+		if (!initStarted) {
+			initStarted = true
+			w.init().then(() => w.switchNetwork(networkId))
+		}
+	})
+</script>
+
+{#if !w.ready}
+{:else if !w.vaultExists}
+	<Card>
+		<CardHeader>
+			<CardTitle>Import Wallet</CardTitle>
+			<CardDescription>
+				Enter your seed phrase to save it securely in your system keychain
+			</CardDescription>
+		</CardHeader>
+		<CardContent>
+			<div class="flex flex-col gap-3">
+				<Textarea
+					placeholder="Enter your 12 or 24 word seed phrase"
+					bind:value={inputSeed} />
+				<Button
+					onclick={() => w.saveVault(inputSeed)}
+					disabled={w.loading || !inputSeed.trim()}>
+					{w.loading ? 'Saving...' : 'Save to Keychain'}
+				</Button>
+			</div>
+			{#if w.error}
+				<p class="mt-3 text-red-500">{w.error}</p>
+			{/if}
+		</CardContent>
+	</Card>
+{:else if w.isLocked}
+	<Card>
+		<CardContent>
+			<p class="text-muted-foreground text-xs">Unlocking...</p>
+		</CardContent>
+	</Card>
+{:else}
+	<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={() => navigate(navTarget(net.id))}>
+					{net.name}
+				</button>
+			{/each}
+		</div>
+
+		<Card>
+			<CardHeader>
+				<div class="flex items-center justify-between">
+					<div>
+						<CardTitle>Wallet</CardTitle>
+						<CardDescription>
+							Your wallet is unlocked
+						</CardDescription>
+					</div>
+				</div>
+			</CardHeader>
+			<CardContent>
+				{#if w.address}
+					<div class="mb-4 space-y-1">
+						<p class="font-medium text-xs">Address</p>
+						<p class="font-mono text-xs break-all">{w.address}</p>
+						<p class="mt-2 font-medium text-xs">
+							{w.symbol} Balance
+						</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
+									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}
+					<p class="mb-3 text-red-500">{w.error}</p>
+				{/if}
+
+				<div class="flex gap-2">
+					<Button onclick={() => w.refresh()} disabled={w.loading}>
+						{w.loading ? 'Refreshing...' : 'Refresh'}
+					</Button>
+					<Button variant="outline" onclick={() => w.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>
+					</div>
+				{:else if w.transactions.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.transactions as tx}
+							<button
+								onclick={() =>
+									navigate('/tx/:chainid/:hash', {
+										params: {
+											chainid: w.chainid,
+											hash: tx.hash,
+										},
+									})}
+								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">
+								<div class="shrink-0 mt-0.5 {tx.from.toLowerCase() === w.address.toLowerCase() ? 'text-muted-foreground' : 'text-green-500'}">
+									{#if tx.from.toLowerCase() === w.address.toLowerCase()}
+										<ArrowUp size={16} />
+									{:else}
+										<ArrowDown size={16} />
+									{/if}
+								</div>
+								<div class="min-w-0 flex-1 space-y-0.5">
+									<p class="font-medium">
+										{txAction(tx, w.address)}
+									</p>
+									<p
+										class="flex items-center gap-1 text-muted-foreground font-mono">
+										{#if tx.pairedValue}
+											<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}
+											<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}
+											<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>
+	</div>
+{/if}
diff --git a/apps/desktop/src/lib/states/wallet.svelte.ts b/apps/desktop/src/lib/states/wallet.svelte.ts
index d7c1a8b..f8c4e5b 100644
--- a/apps/desktop/src/lib/states/wallet.svelte.ts
+++ b/apps/desktop/src/lib/states/wallet.svelte.ts
@@ -58,7 +58,7 @@ export const Wallet = () => {
 	let address = $state('')
 	let balance = $state('0')
 	let tokenBalances = $state<TokenBalance[]>([])
-	let network = $state<NetworkId>('bsc')
+	let network = $state<NetworkId>('eth')
 	let loading = $state(false)
 	let error = $state('')
 	let vaultExists = $state(false)
diff --git a/apps/desktop/src/routes/bsc/index.svelte b/apps/desktop/src/routes/bsc/index.svelte
new file mode 100644
index 0000000..d4c7355
--- /dev/null
+++ b/apps/desktop/src/routes/bsc/index.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import EvmDashboard from '$lib/components/EvmDashboard.svelte'
+</script>
+
+<div class="mx-auto mt-16 max-w-md">
+	<EvmDashboard networkId="bsc" />
+</div>
diff --git a/apps/desktop/src/routes/index.svelte b/apps/desktop/src/routes/index.svelte
index c5f3cbd..62ab2f4 100644
--- a/apps/desktop/src/routes/index.svelte
+++ b/apps/desktop/src/routes/index.svelte
@@ -1,288 +1,7 @@
 <script lang="ts">
-	import { electrobun, type TxEntry } from '$lib/electrobun.js'
-	import { wallet } 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 { navigate } from 'sv-router/generated'
-	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'
-
-	const CDN =
-		'https://raw.githubusercontent.com/trustwallet/assets/master/blockchains'
-
-	const chainDir: Record<string, string> = {
-		eth: 'ethereum',
-		bsc: 'smartchain',
-		polygon: 'polygon',
-	}
-
-	function nativeIcon(id: string) {
-		return `${CDN}/${chainDir[id]}/info/logo.png`
-	}
-
-	function tokenIcon(id: string, address?: string) {
-		if (!address) return ''
-		return `${CDN}/${chainDir[id]}/assets/${address}/logo.png`
-	}
-
-	function txAction(tx: TxEntry, address: string): string {
-		if (tx.pairedValue) return 'Swap'
-		const dir =
-			tx.from.toLowerCase() === address.toLowerCase()
-				? 'Sent'
-				: 'Received'
-		if (tx.tokenSymbol) return `${dir} ${tx.tokenSymbol}`
-		return dir
-	}
-
-	const w = wallet
-	let inputSeed = $state('')
-	let apiKeyInput = $state('')
-
-	$effect(() => {
-		w.init()
-	})
+	import EvmDashboard from '$lib/components/EvmDashboard.svelte'
 </script>
 
 <div class="mx-auto mt-16 max-w-md">
-	{#if !w.ready}
-	{:else if !w.vaultExists}
-		<Card>
-			<CardHeader>
-				<CardTitle>Import Wallet</CardTitle>
-				<CardDescription>
-					Enter your seed phrase to save it securely in your system keychain
-				</CardDescription>
-			</CardHeader>
-			<CardContent>
-				<div class="flex flex-col gap-3">
-					<Textarea
-						placeholder="Enter your 12 or 24 word seed phrase"
-						bind:value={inputSeed} />
-					<Button
-						onclick={() => w.saveVault(inputSeed)}
-						disabled={w.loading || !inputSeed.trim()}>
-						{w.loading ? 'Saving...' : 'Save to Keychain'}
-					</Button>
-				</div>
-				{#if w.error}
-					<p class="mt-3 text-red-500">{w.error}</p>
-				{/if}
-			</CardContent>
-		</Card>
-	{:else if w.isLocked}
-		<Card>
-			<CardContent>
-				<p class="text-muted-foreground text-xs">Unlocking...</p>
-			</CardContent>
-		</Card>
-	{:else if !w.isMonero()}
-		<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('/monero') }}>
-						{net.name}
-					</button>
-				{/each}
-			</div>
-
-			<!-- EVM DASHBOARD -->
-			<Card>
-				<CardHeader>
-					<div class="flex items-center justify-between">
-						<div>
-							<CardTitle>Wallet</CardTitle>
-							<CardDescription>
-								Your wallet is unlocked
-							</CardDescription>
-						</div>
-					</div>
-				</CardHeader>
-				<CardContent>
-					{#if w.address}
-						<div class="mb-4 space-y-1">
-							<p class="font-medium text-xs">Address</p>
-							<p class="font-mono text-xs break-all">{w.address}</p>
-							<p class="mt-2 font-medium text-xs">
-								{w.symbol} Balance
-							</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
-										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}
-						<p class="mb-3 text-red-500">{w.error}</p>
-					{/if}
-
-					<div class="flex gap-2">
-						<Button onclick={() => w.refresh()} disabled={w.loading}>
-							{w.loading ? 'Refreshing...' : 'Refresh'}
-						</Button>
-						<Button variant="outline" onclick={() => w.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>
-						</div>
-					{:else if w.transactions.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.transactions as tx}
-								<button
-									onclick={() =>
-										navigate('/tx/:chainid/:hash', {
-											params: {
-												chainid: w.chainid,
-												hash: tx.hash,
-											},
-										})}
-									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">
-									<div class="shrink-0 mt-0.5 {tx.from.toLowerCase() === w.address.toLowerCase() ? 'text-muted-foreground' : 'text-green-500'}">
-										{#if tx.from.toLowerCase() === w.address.toLowerCase()}
-											<ArrowUp size={16} />
-										{:else}
-											<ArrowDown size={16} />
-										{/if}
-									</div>
-									<div class="min-w-0 flex-1 space-y-0.5">
-										<p class="font-medium">
-											{txAction(tx, w.address)}
-										</p>
-										<p
-											class="flex items-center gap-1 text-muted-foreground font-mono">
-											{#if tx.pairedValue}
-												<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}
-												<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}
-												<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>
-		</div>
-{/if}
+	<EvmDashboard networkId="eth" />
 </div>
diff --git a/apps/desktop/src/routes/monero/index.svelte b/apps/desktop/src/routes/monero/index.svelte
index 953c550..63586f2 100644
--- a/apps/desktop/src/routes/monero/index.svelte
+++ b/apps/desktop/src/routes/monero/index.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { wallet, atomicToXmr } from '$lib/states/wallet.svelte.js'
+	import { wallet, atomicToXmr, type NetworkId } 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'
@@ -16,12 +16,25 @@
 
 	const w = wallet
 
+	function navTarget(id: NetworkId): string {
+		if (id === 'eth') return '/'
+		return `/${id}`
+	}
+
 	let moneroWalletName = $state('')
 	let moneroWalletPass = $state('')
 	let moneroMnemonic = $state('')
 	let moneroRestoreHeight = $state<number | undefined>(undefined)
 	let moneroSelectedWallet = $state('')
 	let moneroSelectedWalletPass = $state('')
+
+	let initStarted = false
+	$effect(() => {
+		if (!initStarted) {
+			initStarted = true
+			w.init().then(() => w.switchNetwork('monero'))
+		}
+	})
 </script>
 
 <div class="mx-auto mt-16 max-w-md">
@@ -33,7 +46,7 @@
 					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('/') }}>
+					onclick={() => navigate(navTarget(net.id))}>
 					{net.name}
 				</button>
 			{/each}
diff --git a/apps/desktop/src/routes/polygon/index.svelte b/apps/desktop/src/routes/polygon/index.svelte
new file mode 100644
index 0000000..2a39b61
--- /dev/null
+++ b/apps/desktop/src/routes/polygon/index.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import EvmDashboard from '$lib/components/EvmDashboard.svelte'
+</script>
+
+<div class="mx-auto mt-16 max-w-md">
+	<EvmDashboard networkId="polygon" />
+</div>