Add address-token detail view for per-token transaction filtering
All checks were successful
check / check (push) Successful in 17s

Clicking a token balance on the address detail view navigates to a
focused view showing only that token's transactions. Send pre-selects
and locks the token dropdown, Receive shows an ERC-20 warning for
non-ETH tokens, and all back buttons return to the correct parent view.
This commit is contained in:
2026-02-27 11:26:59 +07:00
parent a5b2470dba
commit 21fe854fa4
9 changed files with 503 additions and 9 deletions

View File

@@ -314,6 +314,75 @@
</div>
</div>
<!-- ============ ADDRESS-TOKEN DETAIL VIEW ============ -->
<div id="view-address-token" class="view hidden">
<button
id="btn-address-token-back"
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer mb-2"
>
&lt; Back
</button>
<div
id="address-token-jazzicon"
class="flex justify-center mt-1 mb-3"
></div>
<div
class="flex justify-between items-center border-b border-border pb-1 mb-2"
>
<h2 class="font-bold" id="address-token-title">Token</h2>
</div>
<div
class="text-xs mb-1 cursor-pointer break-all"
title="Click to copy"
id="address-token-line"
>
<span id="address-token-dot"></span>
<span id="address-token-full"></span>
<span id="address-token-etherscan-link"></span>
</div>
<div
id="address-token-usd-total"
class="text-xs text-muted mb-3 text-right"
></div>
<!-- single token balance -->
<div class="border-b border-border-light pb-2 mb-2">
<div id="address-token-balance"></div>
</div>
<!-- actions -->
<div class="flex gap-2 mb-3">
<button
id="btn-address-token-send"
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer flex-1"
>
Send
</button>
<button
id="btn-address-token-receive"
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer flex-1"
>
Receive
</button>
</div>
<!-- ERC-20 warning -->
<div
id="address-token-erc20-warning"
class="text-xs border border-border border-dashed p-2 mb-3 hidden"
></div>
<!-- token-filtered transactions -->
<div class="mt-3">
<div class="border-b border-border pb-1 mb-1">
<h2 class="font-bold">Transactions</h2>
</div>
<div id="address-token-tx-list" class="overflow-hidden">
<div class="text-muted text-xs py-1">Loading...</div>
</div>
</div>
</div>
<!-- ============ SEND ============ -->
<div id="view-send" class="view hidden">
<button