feat: add contract address display to AddressToken view
All checks were successful
check / check (push) Successful in 21s
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:
@@ -358,6 +358,23 @@
|
|||||||
</div>
|
</div>
|
||||||
</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 -->
|
<!-- actions -->
|
||||||
<div class="flex gap-2 mb-3">
|
<div class="flex gap-2 mb-3">
|
||||||
<button
|
<button
|
||||||
|
|||||||
@@ -130,6 +130,21 @@ function show() {
|
|||||||
// Single token balance line (no tokenId — not clickable here)
|
// Single token balance line (no tokenId — not clickable here)
|
||||||
$("address-token-balance").innerHTML = balanceLine(symbol, amount, price);
|
$("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
|
// Transactions
|
||||||
$("address-token-tx-list").innerHTML =
|
$("address-token-tx-list").innerHTML =
|
||||||
'<div class="text-muted text-xs py-1">Loading...</div>';
|
'<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", () => {
|
$("btn-address-token-back").addEventListener("click", () => {
|
||||||
ctx.showAddressDetail();
|
ctx.showAddressDetail();
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -39,10 +39,15 @@ function parseTx(tx, addrLower) {
|
|||||||
}
|
}
|
||||||
// Map known DEX methods to "Swap" for cleaner display
|
// Map known DEX methods to "Swap" for cleaner display
|
||||||
const SWAP_METHODS = new Set([
|
const SWAP_METHODS = new Set([
|
||||||
"execute", "swap", "swapExactTokensForTokens",
|
"execute",
|
||||||
"swapTokensForExactTokens", "swapExactETHForTokens",
|
"swap",
|
||||||
"swapTokensForExactETH", "swapExactTokensForETH",
|
"swapExactTokensForTokens",
|
||||||
"swapETHForExactTokens", "multicall",
|
"swapTokensForExactTokens",
|
||||||
|
"swapExactETHForTokens",
|
||||||
|
"swapTokensForExactETH",
|
||||||
|
"swapExactTokensForETH",
|
||||||
|
"swapETHForExactTokens",
|
||||||
|
"multicall",
|
||||||
]);
|
]);
|
||||||
const label = SWAP_METHODS.has(method)
|
const label = SWAP_METHODS.has(method)
|
||||||
? "Swap"
|
? "Swap"
|
||||||
|
|||||||
Reference in New Issue
Block a user