fix: consistent token contract display on confirm-tx page

The confirm-tx page displayed token contract addresses as plain text,
while addressToken used a styled container (bg-hover rounded-md) with
color dot, copy-on-click, etherscan link, and token metadata.

Changes:
- confirm-tx HTML: use bg-hover rounded-md container matching addressToken
- confirm-tx JS: render contract with addressDotHtml, copy-on-click span,
  etherscan link, and optional token name/symbol metadata
- send.js: pass tokenName to confirmTx for richer contract display
- Add click-to-copy handler for contract address on confirm-tx

Closes #70

src/popup/index.html

@@ -463,12 +463,12 @@
                 </div>
 
                 <!-- ERC-20 token contract (hidden for ETH) -->
-                <div id="confirm-token-section" class="mb-3 hidden">
-                    <div class="text-xs text-muted mb-1">Token contract</div>
                 <div
-                        id="confirm-token-contract"
+                    id="confirm-token-section"
-                        class="text-xs break-all"
+                    class="bg-hover rounded-md mx-1 p-3 mb-3 text-xs hidden"
-                    ></div>
+                >
+                    <div class="font-bold mb-2">Token Contract</div>
+                    <div id="confirm-token-contract" class="break-all"></div>
                 </div>
 
                 <div class="mb-3">
@@ -637,16 +637,10 @@
                 <div class="flex justify-center mb-3">
                     <canvas id="receive-qr"></canvas>
                 </div>
-                <div
-                    id="receive-ens"
-                    class="font-bold mb-1 hidden flex items-center"
-                ></div>
                 <div
                     class="border border-border p-2 break-all mb-3 text-xs cursor-pointer"
-                    title="Click to copy"
                 >
-                    <span id="receive-address-dot"></span>
+                    <span id="receive-address-block" class="select-all"></span>
-                    <span id="receive-address-full"></span>
                     <span id="receive-etherscan-link"></span>
                 </div>
                 <button

src/popup/views/confirmTx.js

@@ -95,10 +95,22 @@ function show(txInfo) {
     // Token contract section (ERC-20 only)
     const tokenSection = $("confirm-token-section");
     if (isErc20) {
+        const dot = addressDotHtml(txInfo.token);
         const link = etherscanTokenLink(txInfo.token);
         $("confirm-token-contract").innerHTML =
-            escapeHtml(txInfo.token) +
+            `<div class="flex items-center">` +
-            ` <a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
+            dot +
+            `<span class="break-all underline decoration-dashed cursor-pointer" id="confirm-token-contract-copy" data-copy="${escapeHtml(txInfo.token)}">${escapeHtml(txInfo.token)}</span>` +
+            `<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>` +
+            `</div>`;
+        if (txInfo.tokenName) {
+            $("confirm-token-contract").innerHTML +=
+                `<div class="mt-1"><span class="text-muted">Name:</span> ${escapeHtml(txInfo.tokenName)}</div>`;
+        }
+        if (txInfo.tokenSymbol) {
+            $("confirm-token-contract").innerHTML +=
+                `<div class="mt-1"><span class="text-muted">Symbol:</span> ${escapeHtml(txInfo.tokenSymbol)}</div>`;
+        }
         tokenSection.classList.remove("hidden");
     } else {
         tokenSection.classList.add("hidden");
@@ -273,6 +285,13 @@ function hidePasswordModal() {
 }
 
 function init(ctx) {
+    $("confirm-token-section").addEventListener("click", (e) => {
+        const copyEl = e.target.closest("[data-copy]");
+        if (copyEl) {
+            navigator.clipboard.writeText(copyEl.dataset.copy);
+        }
+    });
+
     $("btn-confirm-send").addEventListener("click", () => {
         showPasswordModal();
     });

src/popup/views/receive.js

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

src/popup/views/send.js

@@ -10,7 +10,11 @@ const {
 const { state, currentAddress } = require("../../shared/state");
 let ctx;
 const { getProvider } = require("../../shared/balances");
-const { KNOWN_SYMBOLS, resolveSymbol } = require("../../shared/tokenList");
+const {
+    KNOWN_SYMBOLS,
+    TOKEN_BY_ADDRESS,
+    resolveSymbol,
+} = require("../../shared/tokenList");
 
 const EXT_ICON =
     `<span style="display:inline-block;width:10px;height:10px;margin-left:4px;vertical-align:middle">` +
@@ -124,6 +128,7 @@ function init(_ctx) {
 
         let tokenSymbol = null;
         let tokenBalance = null;
+        let tokenName = null;
         if (token !== "ETH") {
             const tb = (addr.tokenBalances || []).find(
                 (t) => t.address.toLowerCase() === token.toLowerCase(),
@@ -134,6 +139,17 @@ function init(_ctx) {
                 state.trackedTokens,
             );
             tokenBalance = tb ? tb.balance || "0" : "0";
+            // Resolve token name from balances, tracked tokens, or known list
+            const lower = token.toLowerCase();
+            tokenName =
+                (tb && tb.name) ||
+                (
+                    (state.trackedTokens || []).find(
+                        (t) => t.address.toLowerCase() === lower,
+                    ) || {}
+                ).name ||
+                (TOKEN_BY_ADDRESS.get(lower) || {}).name ||
+                null;
         }
 
         ctx.showConfirmTx({
@@ -145,6 +161,7 @@ function init(_ctx) {
             balance: addr.balance,
             tokenSymbol: tokenSymbol,
             tokenBalance: tokenBalance,
+            tokenName: tokenName,
         });
     });