filter out tokens without logo on tokens list

This commit is contained in:
2026-05-11 16:31:48 +08:00
parent 45402098b8
commit d2c2a46e54
4 changed files with 324 additions and 356 deletions
+75 -45
View File
@@ -10,9 +10,9 @@
CardHeader,
CardTitle,
} from '$lib/components/ui/card/index.js'
import { formatEther, formatUnits } from 'ethers'
const CDN = 'https://raw.githubusercontent.com/trustwallet/assets/master/blockchains'
const CDN =
'https://raw.githubusercontent.com/trustwallet/assets/master/blockchains'
const chainDir: Record<string, string> = {
eth: 'ethereum',
@@ -29,26 +29,14 @@
return `${CDN}/${chainDir[id]}/assets/${address}/logo.png`
}
const SELECTORS: Record<string, string> = {
'0x': 'Send',
'0xa9059cbb': 'Transfer',
'0x095ea7b3': 'Approve',
'0x23b872dd': 'TransferFrom',
'0x38ed1739': 'Swap',
'0x7ff36ab5': 'Swap',
'0x18cbafe5': 'Swap',
'0x022c0d9f': 'Swap',
'0x3593564c': 'Swap',
'0x49404b7c': 'Swap',
'0x414bf389': 'Swap',
}
function txAction(tx: TxEntry, address: string): string {
if (tx.pairedValue) return 'Swap'
const dir = tx.from.toLowerCase() === address.toLowerCase() ? 'Sent' : 'Received'
const dir =
tx.from.toLowerCase() === address.toLowerCase()
? 'Sent'
: 'Received'
if (tx.tokenSymbol) return `${dir} ${tx.tokenSymbol}`
const sel = tx.input?.slice(0, 10) ?? '0x'
return SELECTORS[sel] ?? 'Contract Interaction'
return dir
}
let w = Wallet()
@@ -132,19 +120,25 @@
src={nativeIcon(w.network)}
alt=""
class="size-4 rounded-full"
onerror={(e) => (e.target as HTMLElement).style.display = 'none'} />
{w.balance} {w.symbol}
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">
<p
class="flex items-center gap-1.5 font-mono text-sm">
<img
src={tokenIcon(w.network, t.address)}
src={t.logo}
alt=""
class="size-4 rounded-full"
onerror={(e) => (e.target as HTMLElement).style.display = 'none'} />
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)}
@@ -174,15 +168,15 @@
<CardTitle>Transactions</CardTitle>
</CardHeader>
<CardContent>
{#if !w.etherscanKey}
{#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="Etherscan API key"
placeholder="Alchemy API key"
bind:value={apiKeyInput} />
<Button
size="sm"
onclick={() => w.saveEtherscanKey(apiKeyInput)}
onclick={() => w.saveApiKey(apiKeyInput)}
disabled={!apiKeyInput.trim()}>
Save
</Button>
@@ -199,24 +193,62 @@
<div class="min-w-0 flex-1 space-y-0.5">
<p>
<button
onclick={() => electrobun.rpc?.request.openExternal({ url: w.explorerUrl + tx.hash })}
onclick={() =>
electrobun.rpc?.request.openExternal({
url: w.explorerUrl + tx.hash,
})}
class="hover:underline cursor-pointer font-medium">
{txAction(tx, w.address)}
</button>
</p>
<p class="flex items-center gap-1 text-muted-foreground font-mono">
<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(formatEther(tx.value)).toFixed(4)} {w.symbol}
<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={tokenIcon(w.network, tx.contractAddress)} alt="" class="size-3.5 rounded-full" onerror={(e) => (e.target as HTMLElement).style.display = 'none'} />
{Number(formatUnits(tx.pairedValue, Number(tx.pairedDecimals ?? 18))).toFixed(4)} {tx.pairedSymbol}
<img
src={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={tokenIcon(w.network, tx.contractAddress)} alt="" class="size-3.5 rounded-full" onerror={(e) => (e.target as HTMLElement).style.display = 'none'} />
{Number(formatUnits(tx.value, Number(tx.tokenDecimal ?? 18))).toFixed(4)} {tx.tokenSymbol}
<img
src={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(formatEther(tx.value)).toFixed(4)} {w.symbol}
<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">
@@ -230,20 +262,18 @@
minute: '2-digit',
})}
</p>
<p class="text-muted-foreground/50 truncate font-mono">
<p
class="text-muted-foreground/50 truncate font-mono">
<button
onclick={() => electrobun.rpc?.request.openExternal({ url: w.explorerUrl + tx.hash })}
onclick={() =>
electrobun.rpc?.request.openExternal({
url: w.explorerUrl + tx.hash,
})}
class="hover:underline cursor-pointer">
{tx.hash.slice(0, 10)}...
</button>
</p>
</div>
{#if !tx.tokenSymbol || tx.pairedValue}
<span
class="ml-2 shrink-0 {tx.isError === '0' ? 'text-green-500' : 'text-red-500'}">
{tx.isError === '0' ? '✓' : '✗'}
</span>
{/if}
</div>
{/each}
</div>