diff --git a/src/popup/index.html b/src/popup/index.html
index 6145360..3ca1ed7 100644
--- a/src/popup/index.html
+++ b/src/popup/index.html
@@ -472,25 +472,16 @@
` +
@@ -41,6 +42,42 @@ function etherscanTokenLink(address) {
return `https://etherscan.io/token/${address}`;
}
+function etherscanAddressLink(address) {
+ return `https://etherscan.io/address/${address}`;
+}
+
+function blockieHtml(address) {
+ const src = makeBlockie(address);
+ return `

`;
+}
+
+function confirmAddressHtml(address, ensName, title) {
+ const blockie = blockieHtml(address);
+ const dot = addressDotHtml(address);
+ const link = etherscanAddressLink(address);
+ const extLink = `
${EXT_ICON}`;
+ let html = `
${blockie}
`;
+ if (title) {
+ html += `
${dot}${escapeHtml(title)}
`;
+ }
+ if (ensName) {
+ html += `
${title ? "" : dot}${escapeHtml(ensName)}
`;
+ }
+ html +=
+ `
${title || ensName ? "" : dot}` +
+ `${escapeHtml(address)}` +
+ extLink +
+ `
`;
+ return html;
+}
+
+function valueWithUsd(text, usdAmount) {
+ if (usdAmount !== null && usdAmount !== undefined && !isNaN(usdAmount)) {
+ return text + " (" + formatUsd(usdAmount) + ")";
+ }
+ return text;
+}
+
function show(txInfo) {
pendingTx = txInfo;
@@ -67,59 +104,46 @@ function show(txInfo) {
tokenSection.classList.add("hidden");
}
- // From
+ // From (with blockie)
const fromTitle = addressTitle(txInfo.from, state.wallets);
- $("confirm-from").innerHTML = formatAddressHtml(
+ $("confirm-from").innerHTML = confirmAddressHtml(
txInfo.from,
null,
- null,
fromTitle,
);
- // To
+ // To (with blockie)
const toTitle = addressTitle(txInfo.to, state.wallets);
- $("confirm-to").innerHTML = formatAddressHtml(
+ $("confirm-to").innerHTML = confirmAddressHtml(
txInfo.to,
txInfo.ensName,
- null,
toTitle,
);
$("confirm-to-ens").classList.add("hidden");
- // Amount
- $("confirm-amount").textContent = txInfo.amount + " " + symbol;
+ // Amount (with inline USD)
const ethPrice = getPrice("ETH");
const tokenPrice = getPrice(symbol);
- if (isErc20 && tokenPrice) {
- const usd = parseFloat(txInfo.amount) * tokenPrice;
- $("confirm-amount-usd").textContent = formatUsd(usd);
- } else if (!isErc20 && ethPrice) {
- const usd = parseFloat(txInfo.amount) * ethPrice;
- $("confirm-amount-usd").textContent = formatUsd(usd);
- } else {
- $("confirm-amount-usd").textContent = "";
- }
+ const amountNum = parseFloat(txInfo.amount);
+ const price = isErc20 ? tokenPrice : ethPrice;
+ const amountUsd = price ? amountNum * price : null;
+ $("confirm-amount").textContent = valueWithUsd(
+ txInfo.amount + " " + symbol,
+ amountUsd,
+ );
- // Balance
+ // Balance (with inline USD)
if (isErc20) {
const bal = txInfo.tokenBalance || "0";
- $("confirm-balance").textContent = bal + " " + symbol;
- if (tokenPrice) {
- $("confirm-balance-usd").textContent = formatUsd(
- parseFloat(bal) * tokenPrice,
- );
- } else {
- $("confirm-balance-usd").textContent = "";
- }
+ const balUsd = tokenPrice ? parseFloat(bal) * tokenPrice : null;
+ $("confirm-balance").textContent = valueWithUsd(
+ bal + " " + symbol,
+ balUsd,
+ );
} else {
- $("confirm-balance").textContent = (txInfo.balance || "0") + " ETH";
- if (ethPrice) {
- $("confirm-balance-usd").textContent = formatUsd(
- parseFloat(txInfo.balance || "0") * ethPrice,
- );
- } else {
- $("confirm-balance-usd").textContent = "";
- }
+ const bal = txInfo.balance || "0";
+ const balUsd = ethPrice ? parseFloat(bal) * ethPrice : null;
+ $("confirm-balance").textContent = valueWithUsd(bal + " ETH", balUsd);
}
// Check for warnings
@@ -193,7 +217,6 @@ function show(txInfo) {
// Gas estimate — show placeholder then fetch async
$("confirm-fee").classList.remove("hidden");
$("confirm-fee-amount").textContent = "Estimating...";
- $("confirm-fee-usd").textContent = "";
$("confirm-status").classList.add("hidden");
showView("confirm-tx");
@@ -231,18 +254,12 @@ async function estimateGas(txInfo) {
? parts[1].slice(0, 6).replace(/0+$/, "") || "0"
: "0";
const feeStr = parts[0] + "." + dec + " ETH";
- $("confirm-fee-amount").textContent = feeStr;
-
const ethPrice = getPrice("ETH");
- if (ethPrice) {
- $("confirm-fee-usd").textContent = formatUsd(
- parseFloat(gasCostEth) * ethPrice,
- );
- }
+ const feeUsd = ethPrice ? parseFloat(gasCostEth) * ethPrice : null;
+ $("confirm-fee-amount").textContent = valueWithUsd(feeStr, feeUsd);
} catch (e) {
log.errorf("gas estimation failed:", e.message);
$("confirm-fee-amount").textContent = "Unable to estimate";
- $("confirm-fee-usd").textContent = "";
}
}