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">`;
|
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) {
|
function txAddressHtml(address, ensName, title) {
|
||||||
const blockie = blockieHtml(address);
|
const blockie = blockieHtml(address);
|
||||||
const dot = addressDotHtml(address);
|
const dot = addressDotHtml(address);
|
||||||
const link = `https://etherscan.io/address/${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>`;
|
let html = `<div class="mb-1">${blockie}</div>`;
|
||||||
if (title) {
|
if (title) {
|
||||||
html += `<div class="font-bold">${escapeHtml(title)}</div>`;
|
html += `<div class="font-bold">${escapeHtml(title)}</div>`;
|
||||||
@@ -50,10 +58,10 @@ function txAddressHtml(address, ensName, title) {
|
|||||||
html +=
|
html +=
|
||||||
`<div class="flex items-center">${dot}` +
|
`<div class="flex items-center">${dot}` +
|
||||||
copyableHtml(ensName, "") +
|
copyableHtml(ensName, "") +
|
||||||
extLink +
|
|
||||||
`</div>` +
|
`</div>` +
|
||||||
`<div class="break-all">` +
|
`<div class="flex items-center">${dot}` +
|
||||||
copyableHtml(address, "break-all") +
|
copyableHtml(address, "break-all") +
|
||||||
|
extLink +
|
||||||
`</div>`;
|
`</div>`;
|
||||||
} else {
|
} else {
|
||||||
html +=
|
html +=
|
||||||
@@ -67,7 +75,7 @@ function txAddressHtml(address, ensName, title) {
|
|||||||
|
|
||||||
function txHashHtml(hash) {
|
function txHashHtml(hash) {
|
||||||
const link = `https://etherscan.io/tx/${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;
|
return copyableHtml(hash, "break-all") + extLink;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user