fix: unify address display with shared renderAddressHtml utility
All checks were successful
check / check (push) Successful in 24s

All address rendering now uses a single renderAddressHtml() function in
helpers.js that produces consistent output everywhere:
- Color dot (deterministic from address)
- Full address with dashed-underline click-to-copy affordance
- Etherscan external link icon

Refactored all callsites across 9 view files:
- approval.js: approvalAddressHtml now delegates to renderAddressHtml,
  added attachCopyHandlers for click-to-copy on approve-tx/sign/site views
- confirmTx.js: confirmAddressHtml uses renderAddressHtml, token contract
  address uses renderAddressHtml with attachCopyHandlers
- txStatus.js: toAddressHtml delegates to renderAddressHtml
- transactionDetail.js: txAddressHtml delegates to renderAddressHtml,
  decoded calldata addresses use renderAddressHtml
- home.js: active address display uses renderAddressHtml
- send.js: from-address display uses renderAddressHtml
- receive.js: address block uses formatAddressHtml (which delegates to
  renderAddressHtml), removed separate etherscan link element
- addressDetail.js: address line uses renderAddressHtml, export-privkey
  address uses renderAddressHtml
- addressToken.js: address line and contract info use renderAddressHtml

Also consolidated:
- EXT_ICON SVG constant moved to helpers.js (removed 6 duplicates)
- copyableHtml() moved to helpers.js (removed duplicate in transactionDetail)
- etherscanLinkHtml() moved to helpers.js (removed duplicates)
- attachCopyHandlers() moved to helpers.js (removed duplicate in txStatus)
- Removed unused local functions (etherscanTokenLink, etherscanAddressLink)
- Cleaned up unused imports across all files

closes #97
This commit is contained in:
user
2026-03-01 05:59:17 -08:00
committed by clawbot
parent 6b40fa8836
commit 33070cae75
10 changed files with 179 additions and 395 deletions

View File

@@ -10,13 +10,10 @@ const {
addressTitle,
escapeHtml,
truncateMiddle,
renderAddressHtml,
attachCopyHandlers,
} = require("./helpers");
const {
state,
saveState,
currentAddress,
currentNetwork,
} = require("../../shared/state");
const { state, saveState, currentAddress } = require("../../shared/state");
const {
updateSendBalance,
renderSendTokenSelect,
@@ -74,28 +71,12 @@ function renderTotalValue() {
}
}
const EXT_ICON =
`<span style="display:inline-block;width:10px;height:10px;margin-left:4px;vertical-align:middle">` +
`<svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">` +
`<path d="M4.5 1.5H2a.5.5 0 00-.5.5v8a.5.5 0 00.5.5h8a.5.5 0 00.5-.5V7.5"/>` +
`<path d="M7 1.5h3.5V5M7 5.5L10.5 1.5"/>` +
`</svg></span>`;
function renderActiveAddress() {
const el = $("active-address-display");
if (!el) return;
if (state.activeAddress) {
const addr = state.activeAddress;
const dot = addressDotHtml(addr);
const link = `${currentNetwork().explorerUrl}/address/${addr}`;
el.innerHTML =
`<span class="underline decoration-dashed cursor-pointer" id="active-addr-copy">${dot}${escapeHtml(addr)}</span>` +
`<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
$("active-addr-copy").addEventListener("click", (e) => {
navigator.clipboard.writeText(addr);
showFlash("Copied!");
flashCopyFeedback(e.currentTarget);
});
el.innerHTML = renderAddressHtml(state.activeAddress);
attachCopyHandlers(el);
} else {
el.textContent = "";
}