Restore color dots, add blockies above addresses on tx detail page
All checks were successful
check / check (push) Successful in 14s

Blockies now appear above the from/to addresses on a separate line,
with color dots restored inline next to the address text. Increased
spacing between transaction detail fields from mb-2 to mb-3.
This commit is contained in:
2026-02-26 16:33:42 +07:00
parent 156e77b5cf
commit f69ce7f9d2
2 changed files with 19 additions and 11 deletions

View File

@@ -653,27 +653,27 @@
< Back < Back
</button> </button>
<h2 class="font-bold mb-2">Transaction</h2> <h2 class="font-bold mb-2">Transaction</h2>
<div class="mb-2"> <div class="mb-3">
<div class="text-xs text-muted">Status</div> <div class="text-xs text-muted">Status</div>
<div id="tx-detail-status" class="text-xs"></div> <div id="tx-detail-status" class="text-xs"></div>
</div> </div>
<div class="mb-2"> <div class="mb-3">
<div class="text-xs text-muted">Time</div> <div class="text-xs text-muted">Time</div>
<div id="tx-detail-time" class="text-xs"></div> <div id="tx-detail-time" class="text-xs"></div>
</div> </div>
<div class="mb-2"> <div class="mb-3">
<div class="text-xs text-muted">Amount</div> <div class="text-xs text-muted">Amount</div>
<div id="tx-detail-value" class="text-xs font-bold"></div> <div id="tx-detail-value" class="text-xs font-bold"></div>
</div> </div>
<div class="mb-2"> <div class="mb-3">
<div class="text-xs text-muted">From</div> <div class="text-xs text-muted">From</div>
<div id="tx-detail-from" class="text-xs break-all"></div> <div id="tx-detail-from" class="text-xs break-all"></div>
</div> </div>
<div class="mb-2"> <div class="mb-3">
<div class="text-xs text-muted">To</div> <div class="text-xs text-muted">To</div>
<div id="tx-detail-to" class="text-xs break-all"></div> <div id="tx-detail-to" class="text-xs break-all"></div>
</div> </div>
<div class="mb-2"> <div class="mb-3">
<div class="text-xs text-muted">Transaction hash</div> <div class="text-xs text-muted">Transaction hash</div>
<div id="tx-detail-hash" class="text-xs break-all"></div> <div id="tx-detail-hash" class="text-xs break-all"></div>
</div> </div>

View File

@@ -221,19 +221,27 @@ function blockieHtml(address) {
function txDetailAddressHtml(address) { function txDetailAddressHtml(address) {
const ensName = ensNameMap.get(address) || null; const ensName = ensNameMap.get(address) || null;
const blockie = blockieHtml(address); const blockie = blockieHtml(address);
const dot = addressDotHtml(address);
const link = etherscanAddressLink(address); const link = etherscanAddressLink(address);
const extLink = `<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`; const extLink = `<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
let html = `<div class="mb-1">${blockie}</div>`;
if (ensName) { if (ensName) {
return ( html +=
blockie + `<div class="flex items-center">${dot}` +
copyableHtml(ensName, "") + copyableHtml(ensName, "") +
extLink + extLink +
`</div>` +
`<div class="break-all">` + `<div class="break-all">` +
copyableHtml(address, "break-all") + copyableHtml(address, "break-all") +
`</div>` `</div>`;
); } else {
html +=
`<div class="flex items-center">${dot}` +
copyableHtml(address, "break-all") +
extLink +
`</div>`;
} }
return blockie + copyableHtml(address, "break-all") + extLink; return html;
} }
function txDetailHashHtml(hash) { function txDetailHashHtml(hash) {