diff --git a/src/popup/views/addressDetail.js b/src/popup/views/addressDetail.js index c9f794f..eb046f9 100644 --- a/src/popup/views/addressDetail.js +++ b/src/popup/views/addressDetail.js @@ -4,6 +4,8 @@ const { showFlash, balanceLinesForAddress, addressDotHtml, + escapeHtml, + formatAddressHtml, truncateMiddle, } = require("./helpers"); const { state, currentAddress } = require("../../shared/state"); @@ -76,12 +78,6 @@ function timeAgo(timestamp) { return years + " year" + (years !== 1 ? "s" : "") + " ago"; } -function escapeHtml(s) { - const div = document.createElement("div"); - div.textContent = s; - return div.innerHTML; -} - let loadedTxs = []; let ensNameMap = new Map(); diff --git a/src/popup/views/approval.js b/src/popup/views/approval.js index 311f7e2..47eb361 100644 --- a/src/popup/views/approval.js +++ b/src/popup/views/approval.js @@ -1,4 +1,4 @@ -const { $, addressDotHtml } = require("./helpers"); +const { $, formatAddressHtml } = require("./helpers"); const { state, saveState } = require("../../shared/state"); const runtime = @@ -14,8 +14,11 @@ function show(id) { return; } $("approve-hostname").textContent = details.hostname; - const dot = addressDotHtml(state.activeAddress); - $("approve-address").innerHTML = dot + state.activeAddress; + $("approve-address").innerHTML = formatAddressHtml( + state.activeAddress, + null, + null, + ); $("approve-remember").checked = state.rememberSiteChoice; }); } diff --git a/src/popup/views/confirmTx.js b/src/popup/views/confirmTx.js index 7c5048d..7d4f55f 100644 --- a/src/popup/views/confirmTx.js +++ b/src/popup/views/confirmTx.js @@ -3,7 +3,13 @@ // password modal, decrypts secret, signs and broadcasts. const { parseEther } = require("ethers"); -const { $, showError, hideError, showView } = require("./helpers"); +const { + $, + showError, + hideError, + showView, + formatAddressHtml, +} = require("./helpers"); const { state } = require("../../shared/state"); const { getSignerForAddress } = require("../../shared/wallet"); const { decryptWithPassword } = require("../../shared/vault"); @@ -16,16 +22,15 @@ let pendingTx = null; function show(txInfo) { pendingTx = txInfo; - $("confirm-from").textContent = txInfo.from; - $("confirm-to").textContent = txInfo.to; + $("confirm-from").innerHTML = formatAddressHtml(txInfo.from, null, null); + $("confirm-to").innerHTML = formatAddressHtml( + txInfo.to, + txInfo.ensName, + null, + ); - const ensEl = $("confirm-to-ens"); - if (txInfo.ensName) { - ensEl.textContent = "(" + txInfo.ensName + ")"; - ensEl.classList.remove("hidden"); - } else { - ensEl.classList.add("hidden"); - } + // Hide the separate ENS element — it's now inline in the address display + $("confirm-to-ens").classList.add("hidden"); $("confirm-amount").textContent = txInfo.amount + " " + txInfo.token; diff --git a/src/popup/views/helpers.js b/src/popup/views/helpers.js index a6db37c..f26a6bb 100644 --- a/src/popup/views/helpers.js +++ b/src/popup/views/helpers.js @@ -137,6 +137,27 @@ function addressDotHtml(address) { return ``; } +function escapeHtml(s) { + const div = document.createElement("div"); + div.textContent = 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) { + const dot = addressDotHtml(address); + const displayAddr = maxLen ? truncateMiddle(address, maxLen) : address; + if (ensName) { + return ( + `