fix: unify address display with shared renderAddressHtml utility (#129)
All checks were successful
check / check (push) Successful in 6s
All checks were successful
check / check (push) Successful in 6s
## Summary 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 ## Changes Refactored all 9 view files that display addresses to use the shared utility: - **approval.js** (approve-tx, approve-sign, approve-site): addresses now have click-to-copy with dashed underline affordance - **confirmTx.js**: from/to addresses and token contract address use shared renderer - **txStatus.js**: wait/success/error transaction addresses - **transactionDetail.js**: from/to and decoded calldata addresses - **home.js**: active address display - **send.js**: from-address display - **receive.js**: receive address display - **addressDetail.js**: address line and export-privkey address - **addressToken.js**: address line and contract info ## Consolidation - `EXT_ICON` SVG constant: removed 6 duplicates, now in helpers.js - `copyableHtml()`: removed duplicate, now in helpers.js - `etherscanLinkHtml()`: removed duplicates, now in helpers.js - `attachCopyHandlers()`: removed duplicate, now in helpers.js - Net: **-193 lines** (174 added, 367 removed) closes #97 Co-authored-by: user <user@Mac.lan guest wan> Reviewed-on: #129 Co-authored-by: clawbot <clawbot@noreply.example.org> Co-committed-by: clawbot <clawbot@noreply.example.org>
This commit was merged in pull request #129.
This commit is contained in:
@@ -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 = "";
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user