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:
@@ -65,320 +65,356 @@
|
||||
})
|
||||
|
||||
function navTarget(id: NetworkId): string {
|
||||
if (id === 'eth') return '/'
|
||||
return `/${id}`
|
||||
if (id === 'eth') return '/multicoin'
|
||||
return `/multicoin/${id}`
|
||||
}
|
||||
|
||||
let initStarted = false
|
||||
$effect(() => {
|
||||
if (!initStarted) {
|
||||
initStarted = true
|
||||
w.init().then(() => w.switchNetwork(networkId))
|
||||
w.init().then(async () => {
|
||||
if (w.accountType === 'multi') {
|
||||
await 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} />
|
||||
<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>
|
||||
|
||||
<div class="mx-auto mt-16 max-w-md text-center text-muted-foreground text-sm">Loading...</div>
|
||||
{:else if !w.accountType}
|
||||
<div class="mx-auto mt-24 max-w-sm">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle>Wallet</CardTitle>
|
||||
<CardDescription>
|
||||
Your wallet is unlocked
|
||||
</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
<CardHeader class="text-center">
|
||||
<CardTitle>Welcome</CardTitle>
|
||||
<CardDescription>Choose an account type to get started</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{#if w.address}
|
||||
<div class="mb-4 space-y-1">
|
||||
<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 class="flex flex-col gap-3">
|
||||
<Button
|
||||
onclick={() => w.login('multi')}
|
||||
class="w-full">
|
||||
Multi Coins (ETH / BSC / Polygon)
|
||||
</Button>
|
||||
<Button
|
||||
onclick={() => navigate('/monero')}
|
||||
variant="outline"
|
||||
class="w-full">
|
||||
Monero
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
{:else if w.accountType === 'multi'}
|
||||
{#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} />
|
||||
<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.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>
|
||||
<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">
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{#if w.address}
|
||||
<div class="mb-4 space-y-1">
|
||||
<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
|
||||
src={t.logo}
|
||||
src={nativeIcon(w.network)}
|
||||
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}
|
||||
{w.balance}
|
||||
{w.symbol}
|
||||
</p>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</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}
|
||||
{#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={() => navigate('/settings')}>
|
||||
<SettingsIcon size={16} />
|
||||
</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
|
||||
<div class="flex gap-2">
|
||||
<Button onclick={() => w.refresh()} disabled={w.loading}>
|
||||
{w.loading ? 'Refreshing...' : 'Refresh'}
|
||||
</Button>
|
||||
<Button variant="outline" onclick={() => navigate('/settings')}>
|
||||
<SettingsIcon size={16} />
|
||||
</Button>
|
||||
<Button variant="outline" onclick={() => w.lock()}>
|
||||
Lock
|
||||
</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',
|
||||
</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,
|
||||
},
|
||||
})}
|
||||
</p>
|
||||
<p
|
||||
class="text-muted-foreground/50 truncate font-mono">
|
||||
{tx.hash.slice(0, 10)}...
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
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}
|
||||
{/if}
|
||||
|
||||
@@ -27,16 +27,17 @@ export const networks = [
|
||||
chainid: '1',
|
||||
explorerUrl: 'https://etherscan.io/tx/',
|
||||
},
|
||||
{
|
||||
id: 'monero',
|
||||
name: 'Monero',
|
||||
rpc: '',
|
||||
symbol: 'XMR',
|
||||
chainid: '',
|
||||
explorerUrl: 'https://moneroblocks.info/tx/',
|
||||
},
|
||||
] 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 TokenBalance = {
|
||||
@@ -53,7 +54,10 @@ export const atomicToXmr = (atomic: string): string => {
|
||||
return frac ? `${whole}.${frac}` : `${whole}`
|
||||
}
|
||||
|
||||
export type AccountType = 'multi' | 'monero'
|
||||
|
||||
export const Wallet = () => {
|
||||
let accountType = $state<AccountType | null>(null)
|
||||
let seed = $state('')
|
||||
let address = $state('')
|
||||
let balance = $state('0')
|
||||
@@ -94,8 +98,6 @@ export const Wallet = () => {
|
||||
return { salt: s, hash }
|
||||
}
|
||||
|
||||
const isMonero = () => network === 'monero'
|
||||
|
||||
const init = async () => {
|
||||
if (!electrobun.rpc) return
|
||||
const [raw, rawError] = await tryCatch(
|
||||
@@ -122,20 +124,46 @@ export const Wallet = () => {
|
||||
)
|
||||
if (ph) passwordHash = ph
|
||||
|
||||
await checkMoneroStatus()
|
||||
await checkBiometric()
|
||||
ready = true
|
||||
}
|
||||
|
||||
const switchNetwork = async (id: NetworkId) => {
|
||||
network = id
|
||||
if (id === 'monero') {
|
||||
await checkMoneroStatus()
|
||||
const login = async (type: AccountType) => {
|
||||
accountType = type
|
||||
if (type === 'multi') {
|
||||
if (!seed && vaultExists) {
|
||||
await loadSeed()
|
||||
}
|
||||
if (seed) await switchNetwork(network)
|
||||
} else if (type === 'monero') {
|
||||
if (moneroInstalled && !moneroRunning) {
|
||||
await moneroStart()
|
||||
await checkMoneroStatus()
|
||||
}
|
||||
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()
|
||||
}
|
||||
}
|
||||
@@ -448,8 +476,9 @@ export const Wallet = () => {
|
||||
|
||||
return {
|
||||
get isLocked() {
|
||||
return vaultExists && !seed && network !== 'monero'
|
||||
return accountType === 'multi' && vaultExists && !seed
|
||||
},
|
||||
get accountType() { return accountType },
|
||||
get seed() { return seed },
|
||||
get address() { return address },
|
||||
get balance() { return balance },
|
||||
@@ -464,9 +493,10 @@ export const Wallet = () => {
|
||||
get vaultExists() { return vaultExists },
|
||||
get ready() { return ready },
|
||||
get networks() { return networks },
|
||||
get moneroNetwork() { return moneroNetwork },
|
||||
get evmNetworks() { return networks },
|
||||
get apiKey() { return apiKey },
|
||||
get transactions() { return transactions },
|
||||
isMonero,
|
||||
get moneroRunning() { return moneroRunning },
|
||||
get moneroWalletOpen() { return moneroWalletOpen },
|
||||
get moneroConnected() { return moneroConnected },
|
||||
@@ -487,6 +517,8 @@ export const Wallet = () => {
|
||||
get passwordSet() { return !!passwordHash },
|
||||
refresh,
|
||||
init,
|
||||
login,
|
||||
logout,
|
||||
lock,
|
||||
unlockWithBiometrics,
|
||||
unlockWithPassword,
|
||||
|
||||
@@ -1,5 +0,0 @@
|
||||
<script lang="ts"></script>
|
||||
|
||||
<h1>About</h1>
|
||||
|
||||
<p>This is another page</p>
|
||||
@@ -1,7 +1,50 @@
|
||||
<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>
|
||||
|
||||
<div class="mx-auto mt-16 max-w-md">
|
||||
<EvmDashboard networkId="eth" />
|
||||
<div class="mx-auto mt-24 max-w-sm">
|
||||
{#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>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<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 { Textarea } from '$lib/components/ui/textarea/index.js'
|
||||
import { Input } from '$lib/components/ui/input/index.js'
|
||||
@@ -16,11 +16,6 @@
|
||||
|
||||
const w = wallet
|
||||
|
||||
function navTarget(id: NetworkId): string {
|
||||
if (id === 'eth') return '/'
|
||||
return `/${id}`
|
||||
}
|
||||
|
||||
let moneroWalletName = $state('')
|
||||
let moneroWalletPass = $state('')
|
||||
let moneroMnemonic = $state('')
|
||||
@@ -32,28 +27,54 @@
|
||||
$effect(() => {
|
||||
if (!initStarted) {
|
||||
initStarted = true
|
||||
w.init().then(() => w.switchNetwork('monero'))
|
||||
w.init().then(async () => {
|
||||
if (w.accountType === 'monero') return
|
||||
await w.login('monero')
|
||||
})
|
||||
}
|
||||
})
|
||||
</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}
|
||||
{#if !w.ready}
|
||||
<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
|
||||
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}
|
||||
class="cursor-pointer rounded-md px-2.5 py-1 text-xs font-medium transition-colors bg-primary text-primary-foreground">
|
||||
Monero
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<!-- MONERO DASHBOARD -->
|
||||
{#if w.moneroDownloading}
|
||||
{#if w.moneroDownloading}
|
||||
<Card>
|
||||
<CardContent>
|
||||
<p class="text-muted-foreground text-xs">Downloading Monero binary (70MB)...</p>
|
||||
@@ -276,5 +297,6 @@
|
||||
</CardContent>
|
||||
</Card>
|
||||
{/if}
|
||||
{/if}
|
||||
</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
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onclick={() => navigate('/')}
|
||||
onclick={() => navigate('/multicoin')}
|
||||
class="mb-4">
|
||||
← Back
|
||||
</Button>
|
||||
|
||||
Reference in New Issue
Block a user