diff --git a/src/popup/views/confirmTx.js b/src/popup/views/confirmTx.js index 7d4f55f..3068e97 100644 --- a/src/popup/views/confirmTx.js +++ b/src/popup/views/confirmTx.js @@ -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 diff --git a/src/popup/views/helpers.js b/src/popup/views/helpers.js index 0e0b195..dda007a 100644 --- a/src/popup/views/helpers.js +++ b/src/popup/views/helpers.js @@ -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 (ensName) { - return ( - `
${dot}${escapeHtml(ensName)}
` + - `
${escapeHtml(displayAddr)}
` - ); + if (title || ensName) { + let html = ""; + if (title) { + html += `
${dot}${escapeHtml(title)}
`; + } + if (ensName) { + html += `
${title ? "" : dot}${escapeHtml(ensName)}
`; + } + html += `
${escapeHtml(displayAddr)}
`; + return html; } return `
${dot}${escapeHtml(displayAddr)}
`; } @@ -168,6 +188,7 @@ module.exports = { addressColor, addressDotHtml, escapeHtml, + addressTitle, formatAddressHtml, truncateMiddle, };