separate Multi Coins and Monero into distinct account types with startup login choice

- Removed monero from shared networks array; monero is now its own separate account type
- Added accountType state (null/'multi'/'monero') to wallet, stored in memory only
- Added login(type) method: chooses between EVM vault flow and Monero RPC flow
- Added logout() method that resets all per-account state
- On app startup, user picks Multi Coins (ETH/BSC/Polygon) or Monero
- isLocked getter now checks accountType === 'multi' instead of excluding monero by network id
- Moved ETH/BSC/Polygon routes under /multicoin/ base path
- /multicoin, /multicoin/bsc, /multicoin/polygon with updated navTarget routing
- Root / shows welcome/login choice, redirects if already logged in
- Fixed moneroListWallets timing: runs inside login('monero') after RPC manager exists
- Removed cross-tab links between monero and multicoin, only logout remains
This commit is contained in:
2026-05-18 05:13:50 +08:00
parent 9c856129d8
commit 6142b27c49
9 changed files with 468 additions and 333 deletions
@@ -65,320 +65,356 @@
}) })
function navTarget(id: NetworkId): string { function navTarget(id: NetworkId): string {
if (id === 'eth') return '/' if (id === 'eth') return '/multicoin'
return `/${id}` return `/multicoin/${id}`
} }
let initStarted = false let initStarted = false
$effect(() => { $effect(() => {
if (!initStarted) { if (!initStarted) {
initStarted = true initStarted = true
w.init().then(() => w.switchNetwork(networkId)) w.init().then(async () => {
if (w.accountType === 'multi') {
await w.switchNetwork(networkId)
}
})
} }
}) })
</script> </script>
{#if !w.ready} {#if !w.ready}
{:else if !w.vaultExists} <div class="mx-auto mt-16 max-w-md text-center text-muted-foreground text-sm">Loading...</div>
<Card> {:else if !w.accountType}
<CardHeader> <div class="mx-auto mt-24 max-w-sm">
<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} />
<input
type="password"
placeholder="Set a password (optional, used when Touch ID is unavailable)"
class="flex h-8 w-full rounded-md border border-input bg-transparent px-2 py-1 font-mono text-xs"
bind:value={inputPassword} />
<Button
onclick={() => w.saveVault(inputSeed, inputPassword || undefined)}
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>
<CardHeader>
<CardTitle>Wallet Locked</CardTitle>
<CardDescription>Your seed is stored in the system keychain</CardDescription>
</CardHeader>
<CardContent>
<div class="flex flex-col gap-3">
{#if w.biometricAvailable}
<Button
onclick={() => w.unlockWithBiometrics()}
disabled={w.loading}>
<Fingerprint size={16} />
{w.loading ? 'Unlocking...' : 'Unlock with Touch ID'}
</Button>
{/if}
{#if w.passwordSet}
<div class="flex gap-2 items-end">
<input
type="password"
placeholder="Enter password"
class="flex h-8 w-full rounded-md border border-input bg-transparent px-2 py-1 font-mono text-xs"
bind:value={inputUnlockPassword} />
<Button
onclick={async () => {
const ok = await w.unlockWithPassword(inputUnlockPassword)
if (!ok) w.error = 'Wrong password'
inputUnlockPassword = ''
}}
disabled={w.loading || !inputUnlockPassword}
size="sm">
{w.loading ? '...' : 'Unlock'}
</Button>
</div>
{/if}
</div>
{#if w.error}
<p class="mt-3 text-red-500">{w.error}</p>
{/if}
</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> <Card>
<CardHeader> <CardHeader class="text-center">
<div class="flex items-center justify-between"> <CardTitle>Welcome</CardTitle>
<div> <CardDescription>Choose an account type to get started</CardDescription>
<CardTitle>Wallet</CardTitle>
<CardDescription>
Your wallet is unlocked
</CardDescription>
</div>
</div>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
{#if w.address} <div class="flex flex-col gap-3">
<div class="mb-4 space-y-1"> <Button
<p class="font-medium text-xs">Address</p> onclick={() => w.login('multi')}
<div class="flex items-start gap-2"> class="w-full">
<p class="font-mono text-xs break-all flex-1">{w.address}</p> Multi Coins (ETH / BSC / Polygon)
{#if qrDataUrl} </Button>
<Dialog.Root bind:open={qrDialogOpen}> <Button
<Dialog.Trigger> onclick={() => navigate('/monero')}
<button variant="outline"
class="shrink-0 cursor-pointer rounded-md border p-1.5 text-muted-foreground hover:bg-muted transition-colors"> class="w-full">
<QrCodeIcon size={16} /> Monero
</button> </Button>
</Dialog.Trigger> </div>
<Dialog.Content> </CardContent>
<div class="flex flex-col items-center gap-3 py-4"> </Card>
<div class="relative"> </div>
<img {:else if w.accountType === 'multi'}
src={qrDataUrl} {#if !w.vaultExists}
alt="QR code" <Card>
class="size-52 rounded-md" /> <CardHeader>
<img <CardTitle>Import Wallet</CardTitle>
src={nativeIcon(w.network)} <CardDescription>
alt="" Enter your seed phrase to save it securely in your system keychain
class="absolute left-1/2 top-1/2 size-7 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white p-0.5" /> </CardDescription>
</div> </CardHeader>
<p class="font-mono text-xs break-all text-center max-w-64"> <CardContent>
{w.address} <div class="flex flex-col gap-3">
</p> <Textarea
</div> placeholder="Enter your 12 or 24 word seed phrase"
</Dialog.Content> bind:value={inputSeed} />
</Dialog.Root> <input
{/if} type="password"
placeholder="Set a password (optional, used when Touch ID is unavailable)"
class="flex h-8 w-full rounded-md border border-input bg-transparent px-2 py-1 font-mono text-xs"
bind:value={inputPassword} />
<Button
onclick={() => w.saveVault(inputSeed, inputPassword || undefined)}
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>
<CardHeader>
<CardTitle>Wallet Locked</CardTitle>
<CardDescription>Your seed is stored in the system keychain</CardDescription>
</CardHeader>
<CardContent>
<div class="flex flex-col gap-3">
{#if w.biometricAvailable}
<Button
onclick={() => w.unlockWithBiometrics()}
disabled={w.loading}>
<Fingerprint size={16} />
{w.loading ? 'Unlocking...' : 'Unlock with Touch ID'}
</Button>
{/if}
{#if w.passwordSet}
<div class="flex gap-2 items-end">
<input
type="password"
placeholder="Enter password"
class="flex h-8 w-full rounded-md border border-input bg-transparent px-2 py-1 font-mono text-xs"
bind:value={inputUnlockPassword} />
<Button
onclick={async () => {
const ok = await w.unlockWithPassword(inputUnlockPassword)
if (!ok) w.error = 'Wrong password'
inputUnlockPassword = ''
}}
disabled={w.loading || !inputUnlockPassword}
size="sm">
{w.loading ? '...' : 'Unlock'}
</Button>
</div>
{/if}
</div>
{#if w.error}
<p class="mt-3 text-red-500">{w.error}</p>
{/if}
</CardContent>
</Card>
{:else}
<div class="flex flex-col gap-4">
<div class="flex gap-1 justify-center" role="group">
{#each w.evmNetworks 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}
<button
class="cursor-pointer rounded-md px-2.5 py-1 text-xs font-medium transition-colors bg-muted text-muted-foreground hover:bg-muted/80"
onclick={() => w.logout()}>
Logout
</button>
</div>
<Card>
<CardHeader>
<div class="flex items-center justify-between">
<div>
<CardTitle>Wallet</CardTitle>
<CardDescription>
Your wallet is unlocked
</CardDescription>
</div> </div>
<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>
<div class="mb-4 space-y-1"> </CardHeader>
<p class="font-medium text-xs">Tokens</p> <CardContent>
{#each w.tokenBalances as t} {#if w.address}
<p <div class="mb-4 space-y-1">
class="flex items-center gap-1.5 font-mono text-sm"> <p class="font-medium text-xs">Address</p>
<div class="flex items-start gap-2">
<p class="font-mono text-xs break-all flex-1">{w.address}</p>
{#if qrDataUrl}
<Dialog.Root bind:open={qrDialogOpen}>
<Dialog.Trigger>
<button
class="shrink-0 cursor-pointer rounded-md border p-1.5 text-muted-foreground hover:bg-muted transition-colors">
<QrCodeIcon size={16} />
</button>
</Dialog.Trigger>
<Dialog.Content>
<div class="flex flex-col items-center gap-3 py-4">
<div class="relative">
<img
src={qrDataUrl}
alt="QR code"
class="size-52 rounded-md" />
<img
src={nativeIcon(w.network)}
alt=""
class="absolute left-1/2 top-1/2 size-7 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white p-0.5" />
</div>
<p class="font-mono text-xs break-all text-center max-w-64">
{w.address}
</p>
</div>
</Dialog.Content>
</Dialog.Root>
{/if}
</div>
<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 <img
src={t.logo} src={nativeIcon(w.network)}
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')} />
{Number(t.balance) < 0.0001 && Number(t.balance) > 0 {w.balance}
? '<0.0001' {w.symbol}
: Number(t.balance).toFixed(4)}
{t.symbol}
</p> </p>
{/each} </div>
</div> <div class="mb-4 space-y-1">
{/if} <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} {#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={() => navigate('/settings')}> <Button variant="outline" onclick={() => navigate('/settings')}>
<SettingsIcon size={16} /> <SettingsIcon size={16} />
</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>
{:else if w.transactions.length === 0} </CardContent>
<p class="text-muted-foreground text-xs"> </Card>
No transactions found
</p> <Card>
{:else} <CardHeader>
<div class="max-h-96 space-y-1 overflow-y-auto"> <CardTitle>Transactions</CardTitle>
{#each w.transactions as tx} </CardHeader>
<button <CardContent>
onclick={() => {#if !w.apiKey}
navigate('/tx/:chainid/:hash', { <div class="flex gap-2 items-center">
params: { <input
chainid: w.chainid, class="flex h-8 w-full rounded-md border border-input bg-transparent px-2 py-1 font-mono text-xs"
hash: tx.hash, placeholder="Alchemy API key"
}, bind:value={apiKeyInput} />
})} <Button
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"> size="sm"
<div class="shrink-0 mt-0.5 {tx.from.toLowerCase() === w.address.toLowerCase() ? 'text-muted-foreground' : 'text-green-500'}"> onclick={() => w.saveApiKey(apiKeyInput)}
{#if tx.from.toLowerCase() === w.address.toLowerCase()} disabled={!apiKeyInput.trim()}>
<ArrowUp size={16} /> Save
{:else} </Button>
<ArrowDown size={16} /> </div>
{/if} {:else if w.transactions.length === 0}
</div> <p class="text-muted-foreground text-xs">
<div class="min-w-0 flex-1 space-y-0.5"> No transactions found
<p class="font-medium"> </p>
{txAction(tx, w.address)} {:else}
</p> <div class="max-h-96 space-y-1 overflow-y-auto">
<p {#each w.transactions as tx}
class="flex items-center gap-1 text-muted-foreground font-mono"> <button
{#if tx.pairedValue} onclick={() =>
<img navigate('/tx/:chainid/:hash', {
src={nativeIcon(w.network)} params: {
alt="" chainid: w.chainid,
class="size-3.5 rounded-full" hash: tx.hash,
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> 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">
<p <div class="shrink-0 mt-0.5 {tx.from.toLowerCase() === w.address.toLowerCase() ? 'text-muted-foreground' : 'text-green-500'}">
class="text-muted-foreground/50 truncate font-mono"> {#if tx.from.toLowerCase() === w.address.toLowerCase()}
{tx.hash.slice(0, 10)}... <ArrowUp size={16} />
</p> {:else}
</div> <ArrowDown size={16} />
</button> {/if}
{/each} </div>
</div> <div class="min-w-0 flex-1 space-y-0.5">
{/if} <p class="font-medium">
</CardContent> {txAction(tx, w.address)}
</Card> </p>
</div> <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}
{/if} {/if}
+49 -17
View File
@@ -27,16 +27,17 @@ export const networks = [
chainid: '1', chainid: '1',
explorerUrl: 'https://etherscan.io/tx/', explorerUrl: 'https://etherscan.io/tx/',
}, },
{
id: 'monero',
name: 'Monero',
rpc: '',
symbol: 'XMR',
chainid: '',
explorerUrl: 'https://moneroblocks.info/tx/',
},
] as const ] as const
const moneroNetwork = {
id: 'monero',
name: 'Monero',
rpc: '',
symbol: 'XMR',
chainid: '',
explorerUrl: 'https://moneroblocks.info/tx/',
} as const
export type NetworkId = (typeof networks)[number]['id'] export type NetworkId = (typeof networks)[number]['id']
export type TokenBalance = { export type TokenBalance = {
@@ -53,7 +54,10 @@ export const atomicToXmr = (atomic: string): string => {
return frac ? `${whole}.${frac}` : `${whole}` return frac ? `${whole}.${frac}` : `${whole}`
} }
export type AccountType = 'multi' | 'monero'
export const Wallet = () => { export const Wallet = () => {
let accountType = $state<AccountType | null>(null)
let seed = $state('') let seed = $state('')
let address = $state('') let address = $state('')
let balance = $state('0') let balance = $state('0')
@@ -94,8 +98,6 @@ export const Wallet = () => {
return { salt: s, hash } return { salt: s, hash }
} }
const isMonero = () => network === 'monero'
const init = async () => { const init = async () => {
if (!electrobun.rpc) return if (!electrobun.rpc) return
const [raw, rawError] = await tryCatch( const [raw, rawError] = await tryCatch(
@@ -122,20 +124,46 @@ export const Wallet = () => {
) )
if (ph) passwordHash = ph if (ph) passwordHash = ph
await checkMoneroStatus()
await checkBiometric() await checkBiometric()
ready = true ready = true
} }
const switchNetwork = async (id: NetworkId) => { const login = async (type: AccountType) => {
network = id accountType = type
if (id === 'monero') { if (type === 'multi') {
await checkMoneroStatus() if (!seed && vaultExists) {
await loadSeed()
}
if (seed) await switchNetwork(network)
} else if (type === 'monero') {
if (moneroInstalled && !moneroRunning) { if (moneroInstalled && !moneroRunning) {
await moneroStart() await moneroStart()
await checkMoneroStatus() await checkMoneroStatus()
} }
await moneroListWallets() await moneroListWallets()
} else if (seed) { }
}
const logout = () => {
accountType = null
seed = ''
address = ''
balance = '0'
tokenBalances = []
transactions = []
moneroWalletOpen = false
moneroBalAtomic = '0'
moneroUnlockedAtomic = '0'
moneroAddress = ''
moneroTxs = []
moneroWalletName = ''
moneroAccounts = []
}
const switchNetwork = async (id: NetworkId) => {
network = id
if (seed) {
await refresh() await refresh()
} }
} }
@@ -448,8 +476,9 @@ export const Wallet = () => {
return { return {
get isLocked() { get isLocked() {
return vaultExists && !seed && network !== 'monero' return accountType === 'multi' && vaultExists && !seed
}, },
get accountType() { return accountType },
get seed() { return seed }, get seed() { return seed },
get address() { return address }, get address() { return address },
get balance() { return balance }, get balance() { return balance },
@@ -464,9 +493,10 @@ export const Wallet = () => {
get vaultExists() { return vaultExists }, get vaultExists() { return vaultExists },
get ready() { return ready }, get ready() { return ready },
get networks() { return networks }, get networks() { return networks },
get moneroNetwork() { return moneroNetwork },
get evmNetworks() { return networks },
get apiKey() { return apiKey }, get apiKey() { return apiKey },
get transactions() { return transactions }, get transactions() { return transactions },
isMonero,
get moneroRunning() { return moneroRunning }, get moneroRunning() { return moneroRunning },
get moneroWalletOpen() { return moneroWalletOpen }, get moneroWalletOpen() { return moneroWalletOpen },
get moneroConnected() { return moneroConnected }, get moneroConnected() { return moneroConnected },
@@ -487,6 +517,8 @@ export const Wallet = () => {
get passwordSet() { return !!passwordHash }, get passwordSet() { return !!passwordHash },
refresh, refresh,
init, init,
login,
logout,
lock, lock,
unlockWithBiometrics, unlockWithBiometrics,
unlockWithPassword, unlockWithPassword,
-5
View File
@@ -1,5 +0,0 @@
<script lang="ts"></script>
<h1>About</h1>
<p>This is another page</p>
+46 -3
View File
@@ -1,7 +1,50 @@
<script lang="ts"> <script lang="ts">
import EvmDashboard from '$lib/components/EvmDashboard.svelte' import { wallet } from '$lib/states/wallet.svelte.js'
import { Button } from '$lib/components/ui/button/index.js'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '$lib/components/ui/card/index.js'
import { navigate } from 'sv-router/generated'
const w = wallet
let initStarted = false
$effect(() => {
if (!initStarted) {
initStarted = true
w.init()
}
})
</script> </script>
<div class="mx-auto mt-16 max-w-md"> <div class="mx-auto mt-24 max-w-sm">
<EvmDashboard networkId="eth" /> {#if !w.ready}
<p class="text-center text-muted-foreground text-sm">Loading...</p>
{:else if w.accountType}
{#if w.accountType === 'multi'}
{navigate('/multicoin')}
{:else}
{navigate('/monero')}
{/if}
{:else}
<Card>
<CardHeader class="text-center">
<CardTitle>Welcome</CardTitle>
<CardDescription>Choose an account type to get started</CardDescription>
</CardHeader>
<CardContent>
<div class="flex flex-col gap-3">
<Button
onclick={() => navigate('/multicoin')}
class="w-full">
Multi Coins (ETH / BSC / Polygon)
</Button>
<Button
onclick={() => navigate('/monero')}
variant="outline"
class="w-full">
Monero
</Button>
</div>
</CardContent>
</Card>
{/if}
</div> </div>
+41 -19
View File
@@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import { wallet, atomicToXmr, type NetworkId } from '$lib/states/wallet.svelte.js' import { wallet, atomicToXmr } 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 { Textarea } from '$lib/components/ui/textarea/index.js' import { Textarea } from '$lib/components/ui/textarea/index.js'
import { Input } from '$lib/components/ui/input/index.js' import { Input } from '$lib/components/ui/input/index.js'
@@ -16,11 +16,6 @@
const w = wallet const w = wallet
function navTarget(id: NetworkId): string {
if (id === 'eth') return '/'
return `/${id}`
}
let moneroWalletName = $state('') let moneroWalletName = $state('')
let moneroWalletPass = $state('') let moneroWalletPass = $state('')
let moneroMnemonic = $state('') let moneroMnemonic = $state('')
@@ -32,28 +27,54 @@
$effect(() => { $effect(() => {
if (!initStarted) { if (!initStarted) {
initStarted = true initStarted = true
w.init().then(() => w.switchNetwork('monero')) w.init().then(async () => {
if (w.accountType === 'monero') return
await w.login('monero')
})
} }
}) })
</script> </script>
<div class="mx-auto mt-16 max-w-md"> <div class="mx-auto mt-16 max-w-md">
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4">
<div class="flex gap-1 justify-center" role="group"> {#if !w.ready}
{#each w.networks as net} <p class="text-center text-muted-foreground text-sm mt-8">Loading...</p>
{:else if !w.accountType}
<Card>
<CardHeader class="text-center">
<CardTitle>Welcome</CardTitle>
<CardDescription>Choose an account type to get started</CardDescription>
</CardHeader>
<CardContent>
<div class="flex flex-col gap-3">
<Button
onclick={() => navigate('/multicoin')}
variant="outline"
class="w-full">
Multi Coins (ETH / BSC / Polygon)
</Button>
<Button
onclick={() => w.login('monero')}
class="w-full">
Monero
</Button>
</div>
</CardContent>
</Card>
{:else if w.accountType === 'monero'}
<div class="flex items-center justify-center gap-1 flex-wrap" role="group">
<button <button
class="cursor-pointer rounded-md px-2.5 py-1 text-xs font-medium transition-colors {w.network === class="cursor-pointer rounded-md px-2.5 py-1 text-xs font-medium transition-colors bg-primary text-primary-foreground">
net.id Monero
? 'bg-primary text-primary-foreground'
: 'bg-muted text-muted-foreground hover:bg-muted/80'}"
onclick={() => navigate(navTarget(net.id))}>
{net.name}
</button> </button>
{/each} <button
</div> class="cursor-pointer rounded-md px-2.5 py-1 text-xs font-medium transition-colors bg-muted text-muted-foreground hover:bg-muted/80"
onclick={() => w.logout()}>
Logout
</button>
</div>
<!-- MONERO DASHBOARD --> {#if w.moneroDownloading}
{#if w.moneroDownloading}
<Card> <Card>
<CardContent> <CardContent>
<p class="text-muted-foreground text-xs">Downloading Monero binary (70MB)...</p> <p class="text-muted-foreground text-xs">Downloading Monero binary (70MB)...</p>
@@ -276,5 +297,6 @@
</CardContent> </CardContent>
</Card> </Card>
{/if} {/if}
{/if}
</div> </div>
</div> </div>
@@ -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="eth" />
</div>
@@ -51,7 +51,7 @@
<Button <Button
variant="outline" variant="outline"
size="sm" size="sm"
onclick={() => navigate('/')} onclick={() => navigate('/multicoin')}
class="mb-4"> class="mb-4">
&larr; Back &larr; Back
</Button> </Button>