add native token + internal transfers
This commit is contained in:
@@ -1,4 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { electrobun } 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'
|
||||
@@ -9,7 +10,7 @@
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '$lib/components/ui/card/index.js'
|
||||
import { formatEther } from 'ethers'
|
||||
import { formatEther, formatUnits } from 'ethers'
|
||||
|
||||
let w = Wallet()
|
||||
let inputSeed = $state('')
|
||||
@@ -61,13 +62,20 @@
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle>Wallet</CardTitle>
|
||||
<CardDescription>Your wallet is unlocked</CardDescription>
|
||||
<CardDescription>
|
||||
Your wallet is unlocked
|
||||
</CardDescription>
|
||||
</div>
|
||||
<div class="flex gap-1" 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)}>{net.name}</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)}>
|
||||
{net.name}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
@@ -77,14 +85,19 @@
|
||||
<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="mt-2 font-medium text-xs">
|
||||
{w.symbol} Balance
|
||||
</p>
|
||||
<p class="font-mono text-lg">{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="font-mono text-sm">
|
||||
{Number(t.balance) < 0.0001 && Number(t.balance) > 0 ? '<0.0001' : Number(t.balance).toFixed(4)} {t.symbol}
|
||||
{Number(t.balance) < 0.0001 && Number(t.balance) > 0
|
||||
? '<0.0001'
|
||||
: Number(t.balance).toFixed(4)}
|
||||
{t.symbol}
|
||||
</p>
|
||||
{/each}
|
||||
</div>
|
||||
@@ -119,27 +132,61 @@
|
||||
<Button
|
||||
size="sm"
|
||||
onclick={() => w.saveEtherscanKey(apiKeyInput)}
|
||||
disabled={!apiKeyInput.trim()}>Save</Button>
|
||||
disabled={!apiKeyInput.trim()}>
|
||||
Save
|
||||
</Button>
|
||||
</div>
|
||||
{:else if w.transactions.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}
|
||||
<div class="max-h-48 space-y-1 overflow-y-auto">
|
||||
{#each w.transactions.slice(0, 10) as tx}
|
||||
<div class="flex items-center justify-between rounded-md bg-muted px-2 py-1.5 font-mono text-xs">
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="truncate" title={tx.hash}>
|
||||
<a
|
||||
href="{w.explorerUrl}{tx.hash}"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
class="hover:underline">{tx.hash.slice(0, 10)}...</a>
|
||||
<div class="max-h-96 space-y-1 overflow-y-auto">
|
||||
{#each w.transactions as tx}
|
||||
<div
|
||||
class="flex items-center justify-between rounded-md bg-muted px-3 py-2 text-xs">
|
||||
<div class="min-w-0 flex-1 space-y-0.5">
|
||||
<p class="truncate font-mono" title={tx.hash}>
|
||||
<button
|
||||
onclick={() => electrobun.rpc?.request.openExternal({ url: w.explorerUrl + tx.hash })}
|
||||
class="hover:underline cursor-pointer">
|
||||
{tx.hash.slice(0, 10)}...
|
||||
</button>
|
||||
</p>
|
||||
<p class="text-muted-foreground font-mono">
|
||||
{#if tx.tokenSymbol}
|
||||
{Number(
|
||||
formatUnits(
|
||||
tx.value,
|
||||
Number(tx.tokenDecimal ?? 18),
|
||||
),
|
||||
).toFixed(4)}
|
||||
{tx.tokenSymbol}
|
||||
{:else}
|
||||
{Number(formatEther(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">{Number(formatEther(tx.value)).toFixed(4)} {w.symbol}</p>
|
||||
</div>
|
||||
<span class="shrink-0 {tx.isError === '0' ? 'text-green-500' : 'text-red-500'}">
|
||||
{tx.isError === '0' ? '✓' : '✗'}
|
||||
</span>
|
||||
{#if !tx.tokenSymbol}
|
||||
<span
|
||||
class="ml-2 shrink-0 {tx.isError === '0'
|
||||
? 'text-green-500'
|
||||
: 'text-red-500'}">
|
||||
{tx.isError === '0' ? '✓' : '✗'}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user