fix: enforce UI policies on transaction detail view
All checks were successful
check / check (push) Successful in 22s
All checks were successful
check / check (push) Successful in 22s
- Add clickable affordance (border + hover state) to all Etherscan external links on addresses and transaction hash per clickable affordance policy - Fix address display when ENS name is present: show color dot and Etherscan link on the full address line (previously only shown on ENS name line) - Extract etherscanLinkHtml helper for consistent link styling Closes #59
This commit is contained in:
@@ -37,11 +37,19 @@ function blockieHtml(address) {
|
||||
return `<img src="${src}" width="48" height="48" style="image-rendering:pixelated;border-radius:50%;display:inline-block">`;
|
||||
}
|
||||
|
||||
function etherscanLinkHtml(url) {
|
||||
return (
|
||||
`<a href="${url}" target="_blank" rel="noopener" ` +
|
||||
`class="inline-flex items-center border border-border px-1 hover:bg-fg hover:text-bg cursor-pointer"` +
|
||||
`>${EXT_ICON}</a>`
|
||||
);
|
||||
}
|
||||
|
||||
function txAddressHtml(address, ensName, title) {
|
||||
const blockie = blockieHtml(address);
|
||||
const dot = addressDotHtml(address);
|
||||
const link = `https://etherscan.io/address/${address}`;
|
||||
const extLink = `<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
|
||||
const extLink = etherscanLinkHtml(link);
|
||||
let html = `<div class="mb-1">${blockie}</div>`;
|
||||
if (title) {
|
||||
html += `<div class="font-bold">${escapeHtml(title)}</div>`;
|
||||
@@ -50,10 +58,10 @@ function txAddressHtml(address, ensName, title) {
|
||||
html +=
|
||||
`<div class="flex items-center">${dot}` +
|
||||
copyableHtml(ensName, "") +
|
||||
extLink +
|
||||
`</div>` +
|
||||
`<div class="break-all">` +
|
||||
`<div class="flex items-center">${dot}` +
|
||||
copyableHtml(address, "break-all") +
|
||||
extLink +
|
||||
`</div>`;
|
||||
} else {
|
||||
html +=
|
||||
@@ -67,7 +75,7 @@ function txAddressHtml(address, ensName, title) {
|
||||
|
||||
function txHashHtml(hash) {
|
||||
const link = `https://etherscan.io/tx/${hash}`;
|
||||
const extLink = `<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
|
||||
const extLink = etherscanLinkHtml(link);
|
||||
return copyableHtml(hash, "break-all") + extLink;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user