add loader component with loading states to transactions and monero page
- Replace 5133props with runes-compatible () in loader.svelte - Add SVGAttributes types to loader.svelte - Add Loader spinner to EVM Transactions card while w.loading - Add Loader spinners to Monero Start/Refresh buttons and Transactions card - Remove redundant Monero top bar
This commit is contained in:
@@ -1,6 +1,9 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { electrobun, type TxEntry } from '$lib/electrobun.js'
|
import { electrobun, type TxEntry } from '$lib/electrobun.js'
|
||||||
import { wallet, type NetworkId } from '$lib/states/wallet.svelte.js'
|
import {
|
||||||
|
wallet,
|
||||||
|
type NetworkId,
|
||||||
|
} 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 { navigate } from 'sv-router/generated'
|
import { navigate } from 'sv-router/generated'
|
||||||
@@ -18,6 +21,7 @@
|
|||||||
import Fingerprint from '@lucide/svelte/icons/fingerprint'
|
import Fingerprint from '@lucide/svelte/icons/fingerprint'
|
||||||
import * as Dialog from '$lib/components/ui/dialog/index.js'
|
import * as Dialog from '$lib/components/ui/dialog/index.js'
|
||||||
import QRCode from 'qrcode'
|
import QRCode from 'qrcode'
|
||||||
|
import Loader from './loader.svelte'
|
||||||
|
|
||||||
let { networkId }: { networkId: NetworkId } = $props()
|
let { networkId }: { networkId: NetworkId } = $props()
|
||||||
|
|
||||||
@@ -83,307 +87,331 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if !w.ready}
|
{#if !w.ready}
|
||||||
<div class="mx-auto mt-16 max-w-md text-center text-muted-foreground text-sm">Loading...</div>
|
<div
|
||||||
|
class="mx-auto mt-16 max-w-md text-center text-muted-foreground text-sm">
|
||||||
|
Loading...
|
||||||
|
</div>
|
||||||
{:else if !w.vaultExists}
|
{:else if !w.vaultExists}
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<CardTitle>Import Wallet</CardTitle>
|
<CardTitle>Import Wallet</CardTitle>
|
||||||
<CardDescription>
|
<CardDescription>
|
||||||
Enter your seed phrase to save it securely in your system keychain
|
Enter your seed phrase to save it securely in your system
|
||||||
</CardDescription>
|
keychain
|
||||||
</CardHeader>
|
</CardDescription>
|
||||||
<CardContent>
|
</CardHeader>
|
||||||
<div class="flex flex-col gap-3">
|
<CardContent>
|
||||||
<Textarea
|
<div class="flex flex-col gap-3">
|
||||||
placeholder="Enter your 12 or 24 word seed phrase"
|
<Textarea
|
||||||
bind:value={inputSeed} />
|
placeholder="Enter your 12 or 24 word seed phrase"
|
||||||
<input
|
bind:value={inputSeed} />
|
||||||
type="password"
|
<input
|
||||||
placeholder="Set a password (optional, used when Touch ID is unavailable)"
|
type="password"
|
||||||
class="flex h-8 w-full rounded-md border border-input bg-transparent px-2 py-1 font-mono text-xs"
|
placeholder="Set a password (optional, used when Touch ID is unavailable)"
|
||||||
bind:value={inputPassword} />
|
class="flex h-8 w-full rounded-md border border-input bg-transparent px-2 py-1 font-mono text-xs"
|
||||||
<Button
|
bind:value={inputPassword} />
|
||||||
onclick={() => w.saveVault(inputSeed, inputPassword || undefined)}
|
<Button
|
||||||
disabled={w.loading || !inputSeed.trim()}>
|
onclick={() =>
|
||||||
{w.loading ? 'Saving...' : 'Save to Keychain'}
|
w.saveVault(inputSeed, inputPassword || undefined)}
|
||||||
</Button>
|
disabled={w.loading || !inputSeed.trim()}>
|
||||||
</div>
|
{w.loading ? 'Saving...' : 'Save to Keychain'}
|
||||||
{#if w.error}
|
</Button>
|
||||||
<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}
|
|
||||||
</div>
|
</div>
|
||||||
|
{#if w.error}
|
||||||
<Card>
|
<p class="mt-3 text-red-500">{w.error}</p>
|
||||||
<CardHeader>
|
{/if}
|
||||||
<div class="flex items-center justify-between">
|
</CardContent>
|
||||||
<div>
|
</Card>
|
||||||
<CardTitle>Wallet</CardTitle>
|
{:else if w.isLocked}
|
||||||
<CardDescription>
|
<Card>
|
||||||
Your wallet is unlocked
|
<CardHeader>
|
||||||
</CardDescription>
|
<CardTitle>Wallet Locked</CardTitle>
|
||||||
</div>
|
<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>
|
</div>
|
||||||
</CardHeader>
|
{/if}
|
||||||
<CardContent>
|
</div>
|
||||||
{#if w.address}
|
{#if w.error}
|
||||||
<div class="mb-4 space-y-1">
|
<p class="mt-3 text-red-500">{w.error}</p>
|
||||||
<p class="font-medium text-xs">Address</p>
|
{/if}
|
||||||
<div class="flex items-start gap-2">
|
</CardContent>
|
||||||
<p class="font-mono text-xs break-all flex-1">{w.address}</p>
|
</Card>
|
||||||
{#if qrDataUrl}
|
{:else}
|
||||||
<Dialog.Root bind:open={qrDialogOpen}>
|
<div class="flex flex-col gap-4">
|
||||||
<Dialog.Trigger>
|
<div class="flex gap-1 justify-center" role="group">
|
||||||
<button
|
{#each w.evmNetworks as net}
|
||||||
class="shrink-0 cursor-pointer rounded-md border p-1.5 text-muted-foreground hover:bg-muted transition-colors">
|
<button
|
||||||
<QrCodeIcon size={16} />
|
class="cursor-pointer rounded-md px-2.5 py-1 text-xs font-medium transition-colors {w.network ===
|
||||||
</button>
|
net.id
|
||||||
</Dialog.Trigger>
|
? 'bg-primary text-primary-foreground'
|
||||||
<Dialog.Content>
|
: 'bg-muted text-muted-foreground hover:bg-muted/80'}"
|
||||||
<div class="flex flex-col items-center gap-3 py-4">
|
onclick={() => navigate(navTarget(net.id))}>
|
||||||
<div class="relative">
|
{net.name}
|
||||||
<img
|
</button>
|
||||||
src={qrDataUrl}
|
{/each}
|
||||||
alt="QR code"
|
</div>
|
||||||
class="size-52 rounded-md" />
|
|
||||||
<img
|
<Card>
|
||||||
src={nativeIcon(w.network)}
|
<CardHeader>
|
||||||
alt=""
|
<div class="flex items-center justify-between">
|
||||||
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>
|
||||||
</div>
|
<CardTitle>Wallet</CardTitle>
|
||||||
<p class="font-mono text-xs break-all text-center max-w-64">
|
<CardDescription>Your wallet is unlocked</CardDescription>
|
||||||
{w.address}
|
</div>
|
||||||
</p>
|
</div>
|
||||||
</div>
|
</CardHeader>
|
||||||
</Dialog.Content>
|
<CardContent>
|
||||||
</Dialog.Root>
|
{#if w.address}
|
||||||
{/if}
|
<div class="mb-4 space-y-1">
|
||||||
</div>
|
<p class="font-medium text-xs">Address</p>
|
||||||
<p class="mt-2 font-medium text-xs">
|
<div class="flex items-start gap-2">
|
||||||
{w.symbol} Balance
|
<p class="font-mono text-xs break-all flex-1">
|
||||||
|
{w.address}
|
||||||
</p>
|
</p>
|
||||||
<p class="flex items-center gap-1.5 font-mono text-lg">
|
{#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={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'}
|
{#if w.loading}
|
||||||
</Button>
|
<Loader />
|
||||||
<Button variant="outline" onclick={() => navigate('/settings')}>
|
{/if}
|
||||||
<SettingsIcon size={16} />
|
Refresh
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="outline" onclick={async () => { await w.logout(); navigate('/') }}>
|
<Button
|
||||||
Logout
|
variant="outline"
|
||||||
|
onclick={() => navigate('/settings')}>
|
||||||
|
<SettingsIcon size={16} />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
onclick={async () => {
|
||||||
|
await w.logout()
|
||||||
|
navigate('/')
|
||||||
|
}}>
|
||||||
|
Logout
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Transactions</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
{#if w.loading}
|
||||||
|
<div class="flex justify-center py-4">
|
||||||
|
<Loader />
|
||||||
|
</div>
|
||||||
|
{:else 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
|
||||||
disabled={!apiKeyInput.trim()}>
|
class="shrink-0 mt-0.5 {tx.from.toLowerCase() ===
|
||||||
Save
|
w.address.toLowerCase()
|
||||||
</Button>
|
? 'text-muted-foreground'
|
||||||
</div>
|
: 'text-green-500'}">
|
||||||
{:else if w.transactions.length === 0}
|
{#if tx.from.toLowerCase() === w.address.toLowerCase()}
|
||||||
<p class="text-muted-foreground text-xs">
|
<ArrowUp size={16} />
|
||||||
No transactions found
|
{:else}
|
||||||
</p>
|
<ArrowDown size={16} />
|
||||||
{:else}
|
{/if}
|
||||||
<div class="max-h-96 space-y-1 overflow-y-auto">
|
</div>
|
||||||
{#each w.transactions as tx}
|
<div class="min-w-0 flex-1 space-y-0.5">
|
||||||
<button
|
<p class="font-medium">
|
||||||
onclick={() =>
|
{txAction(tx, w.address)}
|
||||||
navigate('/tx/:chainid/:hash', {
|
</p>
|
||||||
params: {
|
<p
|
||||||
chainid: w.chainid,
|
class="flex items-center gap-1 text-muted-foreground font-mono">
|
||||||
hash: tx.hash,
|
{#if tx.pairedValue}
|
||||||
},
|
<img
|
||||||
})}
|
src={nativeIcon(w.network)}
|
||||||
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">
|
alt=""
|
||||||
<div class="shrink-0 mt-0.5 {tx.from.toLowerCase() === w.address.toLowerCase() ? 'text-muted-foreground' : 'text-green-500'}">
|
class="size-3.5 rounded-full"
|
||||||
{#if tx.from.toLowerCase() === w.address.toLowerCase()}
|
onerror={(e) =>
|
||||||
<ArrowUp size={16} />
|
((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}
|
{: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=""
|
</div>
|
||||||
class="size-3.5 rounded-full"
|
{/if}
|
||||||
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}
|
|
||||||
|
|||||||
@@ -0,0 +1,60 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import type { SVGAttributes } from "svelte/elements";
|
||||||
|
|
||||||
|
let { ...rest }: SVGAttributes<SVGSVGElement> = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="1em"
|
||||||
|
height="1em"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
{...rest}>
|
||||||
|
<!-- Icon from SVG Spinners by Utkarsh Verma - https://github.com/n3r4zzurr0/svg-spinners/blob/main/LICENSE -->
|
||||||
|
<g>
|
||||||
|
<circle
|
||||||
|
cx="12"
|
||||||
|
cy="2.5"
|
||||||
|
r="1.5"
|
||||||
|
fill="currentColor"
|
||||||
|
opacity=".14" />
|
||||||
|
<circle
|
||||||
|
cx="16.75"
|
||||||
|
cy="3.77"
|
||||||
|
r="1.5"
|
||||||
|
fill="currentColor"
|
||||||
|
opacity=".29" />
|
||||||
|
<circle
|
||||||
|
cx="20.23"
|
||||||
|
cy="7.25"
|
||||||
|
r="1.5"
|
||||||
|
fill="currentColor"
|
||||||
|
opacity=".43" />
|
||||||
|
<circle
|
||||||
|
cx="21.5"
|
||||||
|
cy="12"
|
||||||
|
r="1.5"
|
||||||
|
fill="currentColor"
|
||||||
|
opacity=".57" />
|
||||||
|
<circle
|
||||||
|
cx="20.23"
|
||||||
|
cy="16.75"
|
||||||
|
r="1.5"
|
||||||
|
fill="currentColor"
|
||||||
|
opacity=".71" />
|
||||||
|
<circle
|
||||||
|
cx="16.75"
|
||||||
|
cy="20.23"
|
||||||
|
r="1.5"
|
||||||
|
fill="currentColor"
|
||||||
|
opacity=".86" />
|
||||||
|
<circle cx="12" cy="21.5" r="1.5" fill="currentColor" />
|
||||||
|
<animateTransform
|
||||||
|
attributeName="transform"
|
||||||
|
calcMode="discrete"
|
||||||
|
dur="0.75s"
|
||||||
|
repeatCount="indefinite"
|
||||||
|
type="rotate"
|
||||||
|
values="0 12 12;30 12 12;60 12 12;90 12 12;120 12 12;150 12 12;180 12 12;210 12 12;240 12 12;270 12 12;300 12 12;330 12 12;360 12 12" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
@@ -13,6 +13,7 @@
|
|||||||
import ArrowDown from '@lucide/svelte/icons/arrow-down'
|
import ArrowDown from '@lucide/svelte/icons/arrow-down'
|
||||||
import ArrowUp from '@lucide/svelte/icons/arrow-up'
|
import ArrowUp from '@lucide/svelte/icons/arrow-up'
|
||||||
import Fingerprint from '@lucide/svelte/icons/fingerprint'
|
import Fingerprint from '@lucide/svelte/icons/fingerprint'
|
||||||
|
import Loader from '$lib/components/loader.svelte'
|
||||||
import { navigate } from 'sv-router/generated'
|
import { navigate } from 'sv-router/generated'
|
||||||
|
|
||||||
const w = wallet
|
const w = wallet
|
||||||
@@ -65,13 +66,6 @@
|
|||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
{:else if w.accountType === 'monero'}
|
{: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 bg-primary text-primary-foreground">
|
|
||||||
Monero
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{#if w.moneroDownloading}
|
{#if w.moneroDownloading}
|
||||||
<Card>
|
<Card>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
@@ -96,7 +90,10 @@
|
|||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
<Button onclick={() => w.moneroStart()} disabled={w.loading}>
|
<Button onclick={() => w.moneroStart()} disabled={w.loading}>
|
||||||
{w.loading ? 'Starting...' : 'Start'}
|
{#if w.loading}
|
||||||
|
<Loader />
|
||||||
|
{/if}
|
||||||
|
Start
|
||||||
</Button>
|
</Button>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
@@ -235,7 +232,10 @@
|
|||||||
|
|
||||||
<div class="flex gap-2">
|
<div class="flex gap-2">
|
||||||
<Button onclick={() => { w.moneroRefresh(); w.moneroFetchAccounts(); }} disabled={w.loading}>
|
<Button onclick={() => { w.moneroRefresh(); w.moneroFetchAccounts(); }} disabled={w.loading}>
|
||||||
{w.loading ? 'Refreshing...' : 'Refresh'}
|
{#if w.loading}
|
||||||
|
<Loader />
|
||||||
|
{/if}
|
||||||
|
Refresh
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="outline" onclick={() => w.moneroStop()}>
|
<Button variant="outline" onclick={() => w.moneroStop()}>
|
||||||
Stop
|
Stop
|
||||||
@@ -276,7 +276,11 @@
|
|||||||
<CardTitle>Transactions</CardTitle>
|
<CardTitle>Transactions</CardTitle>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
{#if w.moneroTxs.length === 0}
|
{#if w.loading}
|
||||||
|
<div class="flex justify-center py-4">
|
||||||
|
<Loader />
|
||||||
|
</div>
|
||||||
|
{:else if w.moneroTxs.length === 0}
|
||||||
<p class="text-muted-foreground text-xs">No transactions found</p>
|
<p class="text-muted-foreground text-xs">No transactions found</p>
|
||||||
{:else}
|
{:else}
|
||||||
<div class="max-h-96 space-y-1 overflow-y-auto">
|
<div class="max-h-96 space-y-1 overflow-y-auto">
|
||||||
|
|||||||
Reference in New Issue
Block a user