Show address titles on transaction confirmation page
Some checks failed
check / check (push) Has been cancelled

Add addressTitle() helper that looks up an address across all wallets
and returns its title (e.g. "Address 1.2"). The confirm page now shows
titles for both sender and receiver when they belong to our wallet.
formatAddressHtml gains an optional title parameter shown above the
full address, alongside any ENS name.
This commit is contained in:
2026-02-26 12:38:34 +07:00
parent a590cfc3ad
commit 4bfcf17773
2 changed files with 40 additions and 10 deletions

View File

@@ -8,6 +8,7 @@ const {
showError,
hideError,
showView,
addressTitle,
formatAddressHtml,
} = require("./helpers");
const { state } = require("../../shared/state");
@@ -22,11 +23,19 @@ let pendingTx = null;
function show(txInfo) {
pendingTx = txInfo;
$("confirm-from").innerHTML = formatAddressHtml(txInfo.from, null, null);
const fromTitle = addressTitle(txInfo.from, state.wallets);
$("confirm-from").innerHTML = formatAddressHtml(
txInfo.from,
null,
null,
fromTitle,
);
const toTitle = addressTitle(txInfo.to, state.wallets);
$("confirm-to").innerHTML = formatAddressHtml(
txInfo.to,
txInfo.ensName,
null,
toTitle,
);
// Hide the separate ENS element — it's now inline in the address display

View File

@@ -143,17 +143,37 @@ function escapeHtml(s) {
return div.innerHTML;
}
// Render an address with color dot, optional ENS name, optional truncation.
// When ensName is provided, shows ENS name (bold) on one line and
// the address below it. Otherwise shows just the dotted address.
function formatAddressHtml(address, ensName, maxLen) {
// Look up an address across all wallets and return its title
// (e.g. "Address 1.2") or null if it's not one of ours.
function addressTitle(address, wallets) {
const lower = address.toLowerCase();
for (let wi = 0; wi < wallets.length; wi++) {
const addrs = wallets[wi].addresses;
for (let ai = 0; ai < addrs.length; ai++) {
if (addrs[ai].address.toLowerCase() === lower) {
return "Address " + (wi + 1) + "." + (ai + 1);
}
}
}
return null;
}
// Render an address with color dot, optional ENS name, optional title,
// and optional truncation. Title and ENS are shown as bold labels above
// the full address.
function formatAddressHtml(address, ensName, maxLen, title) {
const dot = addressDotHtml(address);
const displayAddr = maxLen ? truncateMiddle(address, maxLen) : address;
if (title || ensName) {
let html = "";
if (title) {
html += `<div class="flex items-center font-bold">${dot}${escapeHtml(title)}</div>`;
}
if (ensName) {
return (
`<div class="flex items-center font-bold">${dot}${escapeHtml(ensName)}</div>` +
`<div class="break-all">${escapeHtml(displayAddr)}</div>`
);
html += `<div class="flex items-center font-bold">${title ? "" : dot}${escapeHtml(ensName)}</div>`;
}
html += `<div class="break-all">${escapeHtml(displayAddr)}</div>`;
return html;
}
return `<div class="flex items-center">${dot}<span class="break-all">${escapeHtml(displayAddr)}</span></div>`;
}
@@ -168,6 +188,7 @@ module.exports = {
addressColor,
addressDotHtml,
escapeHtml,
addressTitle,
formatAddressHtml,
truncateMiddle,
};