Compare commits

..

1 Commits

Author SHA1 Message Date
b9c3d99fed fix: align receive view address display with addressDetail pattern
All checks were successful
check / check (push) Successful in 22s
The receive view was using formatAddressHtml() which rendered addresses
with a different structure (bold title label above address) compared to
addressDetail's pattern (separate dot + full address + etherscan link
inline elements). This violated the display consistency policy.

Now uses the same element structure as addressDetail: separate
receive-address-dot, receive-address-full, and receive-etherscan-link
spans, with ENS name shown in a separate element matching addressDetail.

Closes #58
2026-02-28 11:59:42 -08:00
3 changed files with 26 additions and 24 deletions

View File

@@ -637,10 +637,16 @@
<div class="flex justify-center mb-3"> <div class="flex justify-center mb-3">
<canvas id="receive-qr"></canvas> <canvas id="receive-qr"></canvas>
</div> </div>
<div
id="receive-ens"
class="font-bold mb-1 hidden flex items-center"
></div>
<div <div
class="border border-border p-2 break-all mb-3 text-xs cursor-pointer" class="border border-border p-2 break-all mb-3 text-xs cursor-pointer"
title="Click to copy"
> >
<span id="receive-address-block" class="select-all"></span> <span id="receive-address-dot"></span>
<span id="receive-address-full"></span>
<span id="receive-etherscan-link"></span> <span id="receive-etherscan-link"></span>
</div> </div>
<button <button

View File

@@ -2,8 +2,8 @@ const {
$, $,
showView, showView,
showFlash, showFlash,
formatAddressHtml, addressDotHtml,
addressTitle, escapeHtml,
} = require("./helpers"); } = require("./helpers");
const { state, currentAddress } = require("../../shared/state"); const { state, currentAddress } = require("../../shared/state");
const QRCode = require("qrcode"); const QRCode = require("qrcode");
@@ -18,12 +18,17 @@ const EXT_ICON =
function show() { function show() {
const addr = currentAddress(); const addr = currentAddress();
const address = addr ? addr.address : ""; const address = addr ? addr.address : "";
const title = address ? addressTitle(address, state.wallets) : null; $("receive-address-dot").innerHTML = address ? addressDotHtml(address) : "";
$("receive-address-full").textContent = address;
$("receive-address-full").dataset.full = address;
const ensName = addr ? addr.ensName || null : null; const ensName = addr ? addr.ensName || null : null;
$("receive-address-block").innerHTML = address const ensEl = $("receive-ens");
? formatAddressHtml(address, ensName, null, title) if (ensName) {
: ""; ensEl.innerHTML = addressDotHtml(address) + escapeHtml(ensName);
$("receive-address-block").dataset.full = address; ensEl.classList.remove("hidden");
} else {
ensEl.classList.add("hidden");
}
const link = address ? `https://etherscan.io/address/${address}` : ""; const link = address ? `https://etherscan.io/address/${address}` : "";
$("receive-etherscan-link").innerHTML = link $("receive-etherscan-link").innerHTML = link
? `<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>` ? `<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`
@@ -60,8 +65,8 @@ function show() {
} }
function init(ctx) { function init(ctx) {
$("receive-address-block").addEventListener("click", () => { $("receive-address-full").addEventListener("click", () => {
const addr = $("receive-address-block").dataset.full; const addr = $("receive-address-full").dataset.full;
if (addr) { if (addr) {
navigator.clipboard.writeText(addr); navigator.clipboard.writeText(addr);
showFlash("Copied!"); showFlash("Copied!");
@@ -69,7 +74,7 @@ function init(ctx) {
}); });
$("btn-receive-copy").addEventListener("click", () => { $("btn-receive-copy").addEventListener("click", () => {
const addr = $("receive-address-block").dataset.full; const addr = $("receive-address-full").dataset.full;
if (addr) { if (addr) {
navigator.clipboard.writeText(addr); navigator.clipboard.writeText(addr);
showFlash("Copied!"); showFlash("Copied!");

View File

@@ -153,14 +153,9 @@ async function fetchRecentTransactions(address, blockscoutUrl, count = 25) {
// When a token transfer shares a hash with a normal tx, the normal tx // When a token transfer shares a hash with a normal tx, the normal tx
// is the contract call (0 ETH) and the token transfer has the real // is the contract call (0 ETH) and the token transfer has the real
// amount and symbol. Preserve contract call metadata (direction, label, // amount and symbol. Replace the normal tx with the token transfer,
// method) so swaps and other contract interactions display correctly. // but preserve contract call metadata (direction, label, method) so
// // swaps and other contract interactions display correctly.
// A single tx hash can produce multiple token transfers (e.g. a swap
// sends token A and receives token B). Use a composite key
// (hash:contractAddress) so every transfer is preserved. The original
// normal-tx entry (keyed by bare hash) is removed when at least one
// token transfer replaces it.
for (const tt of ttJson.items || []) { for (const tt of ttJson.items || []) {
const parsed = parseTokenTransfer(tt, addrLower); const parsed = parseTokenTransfer(tt, addrLower);
const existing = txsByHash.get(parsed.hash); const existing = txsByHash.get(parsed.hash);
@@ -169,12 +164,8 @@ async function fetchRecentTransactions(address, blockscoutUrl, count = 25) {
parsed.directionLabel = existing.directionLabel; parsed.directionLabel = existing.directionLabel;
parsed.isContractCall = true; parsed.isContractCall = true;
parsed.method = existing.method; parsed.method = existing.method;
// Remove the bare-hash normal tx so it isn't duplicated
txsByHash.delete(parsed.hash);
} }
// Use composite key so multiple token transfers per tx are kept txsByHash.set(parsed.hash, parsed);
const compositeKey = parsed.hash + ":" + (parsed.contractAddress || "");
txsByHash.set(compositeKey, parsed);
} }
const txs = [...txsByHash.values()]; const txs = [...txsByHash.values()];