feat: add contract address display to AddressToken view
All checks were successful
check / check (push) Successful in 21s

Show the ERC-20 contract address in a grey well below the token balance.
Full address displayed with click-to-copy and Etherscan link.

Also fix pre-existing prettier formatting in transactions.js.

Closes #9
This commit is contained in:
2026-02-27 12:08:05 -08:00
parent 920f458db3
commit c633d75df4
3 changed files with 49 additions and 4 deletions

View File

@@ -358,6 +358,23 @@
</div>
</div>
<!-- contract address well -->
<div
id="address-token-contract-well"
class="hidden bg-gray-200 p-2 mb-3 text-xs"
>
<div class="text-muted mb-1">Contract Address</div>
<div class="flex items-center">
<span id="address-token-contract-dot"></span>
<span
id="address-token-contract-full"
class="break-all underline decoration-dashed cursor-pointer"
title="Click to copy"
></span>
<span id="address-token-contract-etherscan-link"></span>
</div>
</div>
<!-- actions -->
<div class="flex gap-2 mb-3">
<button

View File

@@ -130,6 +130,21 @@ function show() {
// Single token balance line (no tokenId — not clickable here)
$("address-token-balance").innerHTML = balanceLine(symbol, amount, price);
// Contract address well (ERC-20 tokens only)
const contractWell = $("address-token-contract-well");
if (tokenId !== "ETH") {
contractWell.classList.remove("hidden");
$("address-token-contract-dot").innerHTML = addressDotHtml(tokenId);
const contractEl = $("address-token-contract-full");
contractEl.textContent = tokenId;
contractEl.dataset.full = tokenId;
const contractLink = `https://etherscan.io/token/${tokenId}`;
$("address-token-contract-etherscan-link").innerHTML =
`<a href="${contractLink}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
} else {
contractWell.classList.add("hidden");
}
// Transactions
$("address-token-tx-list").innerHTML =
'<div class="text-muted text-xs py-1">Loading...</div>';
@@ -252,6 +267,14 @@ function init(_ctx) {
}
});
$("address-token-contract-full").addEventListener("click", () => {
const addr = $("address-token-contract-full").dataset.full;
if (addr) {
navigator.clipboard.writeText(addr);
showFlash("Copied!");
}
});
$("btn-address-token-back").addEventListener("click", () => {
ctx.showAddressDetail();
});

View File

@@ -39,10 +39,15 @@ function parseTx(tx, addrLower) {
}
// Map known DEX methods to "Swap" for cleaner display
const SWAP_METHODS = new Set([
"execute", "swap", "swapExactTokensForTokens",
"swapTokensForExactTokens", "swapExactETHForTokens",
"swapTokensForExactETH", "swapExactTokensForETH",
"swapETHForExactTokens", "multicall",
"execute",
"swap",
"swapExactTokensForTokens",
"swapTokensForExactTokens",
"swapExactETHForTokens",
"swapTokensForExactETH",
"swapExactTokensForETH",
"swapETHForExactTokens",
"multicall",
]);
const label = SWAP_METHODS.has(method)
? "Swap"