fix: align receive view address display with addressDetail pattern

The receive view was using formatAddressHtml() which rendered addresses
with a different structure (bold title label above address) compared to
addressDetail's pattern (separate dot + full address + etherscan link
inline elements). This violated the display consistency policy.

Now uses the same element structure as addressDetail: separate
receive-address-dot, receive-address-full, and receive-etherscan-link
spans, with ENS name shown in a separate element matching addressDetail.

Closes #58

src/popup/index.html

@@ -637,9 +637,16 @@
                 <div class="flex justify-center mb-3">
                     <canvas id="receive-qr"></canvas>
                 </div>
-                <div class="border border-border p-2 break-all mb-3 text-xs">
+                <div
-                    <span id="receive-dot"></span>
+                    id="receive-ens"
-                    <span id="receive-address" class="select-all"></span>
+                    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-full"></span>
                     <span id="receive-etherscan-link"></span>
                 </div>
                 <button

src/popup/views/addressToken.js

@@ -12,7 +12,7 @@ const {
     balanceLine,
 } = require("./helpers");
 const { state, currentAddress, saveState } = require("../../shared/state");
-const { TOKEN_BY_ADDRESS } = require("../../shared/tokenList");
+const { TOKEN_BY_ADDRESS, resolveSymbol } = require("../../shared/tokenList");
 const {
     formatUsd,
     getPrice,
@@ -96,14 +96,11 @@ function show() {
         const tb = (addr.tokenBalances || []).find(
             (t) => t.address.toLowerCase() === tokenId.toLowerCase(),
         );
-        const tracked = (state.trackedTokens || []).find(
+        symbol = resolveSymbol(
-            (t) => t.address.toLowerCase() === tokenId.toLowerCase(),
+            tokenId,
+            addr.tokenBalances,
+            state.trackedTokens,
         );
-        symbol =
-            (tb && tb.symbol) ||
-            (tracked && tracked.symbol) ||
-            (knownToken && knownToken.symbol) ||
-            "?";
         amount = tb ? parseFloat(tb.balance || "0") : 0;
         price = getPrice(symbol);
     }

src/popup/views/receive.js

@@ -1,4 +1,10 @@
-const { $, showView, showFlash, addressDotHtml } = require("./helpers");
+const {
+    $,
+    showView,
+    showFlash,
+    addressDotHtml,
+    escapeHtml,
+} = require("./helpers");
 const { state, currentAddress } = require("../../shared/state");
 const QRCode = require("qrcode");
 
@@ -12,8 +18,17 @@ const EXT_ICON =
 function show() {
     const addr = currentAddress();
     const address = addr ? addr.address : "";
-    $("receive-dot").innerHTML = address ? addressDotHtml(address) : "";
+    $("receive-address-dot").innerHTML = address ? addressDotHtml(address) : "";
-    $("receive-address").textContent = address;
+    $("receive-address-full").textContent = address;
+    $("receive-address-full").dataset.full = address;
+    const ensName = addr ? addr.ensName || null : null;
+    const ensEl = $("receive-ens");
+    if (ensName) {
+        ensEl.innerHTML = addressDotHtml(address) + escapeHtml(ensName);
+        ensEl.classList.remove("hidden");
+    } 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>`
@@ -50,8 +65,16 @@ function show() {
 }
 
 function init(ctx) {
+    $("receive-address-full").addEventListener("click", () => {
+        const addr = $("receive-address-full").dataset.full;
+        if (addr) {
+            navigator.clipboard.writeText(addr);
+            showFlash("Copied!");
+        }
+    });
+
     $("btn-receive-copy").addEventListener("click", () => {
-        const addr = $("receive-address").textContent;
+        const addr = $("receive-address-full").dataset.full;
         if (addr) {
             navigator.clipboard.writeText(addr);
             showFlash("Copied!");

src/popup/views/send.js

@@ -10,7 +10,7 @@ const {
 const { state, currentAddress } = require("../../shared/state");
 let ctx;
 const { getProvider } = require("../../shared/balances");
-const { KNOWN_SYMBOLS, TOKEN_BY_ADDRESS } = require("../../shared/tokenList");
+const { KNOWN_SYMBOLS, resolveSymbol } = require("../../shared/tokenList");
 
 const EXT_ICON =
     `<span style="display:inline-block;width:10px;height:10px;margin-left:4px;vertical-align:middle">` +
@@ -73,15 +73,11 @@ function updateSendBalance() {
         const tb = (addr.tokenBalances || []).find(
             (t) => t.address.toLowerCase() === token.toLowerCase(),
         );
-        const knownToken = TOKEN_BY_ADDRESS.get(token.toLowerCase());
+        const symbol = resolveSymbol(
-        const tracked = (state.trackedTokens || []).find(
+            token,
-            (t) => t.address.toLowerCase() === token.toLowerCase(),
+            addr.tokenBalances,
+            state.trackedTokens,
         );
-        const symbol =
-            (tb && tb.symbol) ||
-            (tracked && tracked.symbol) ||
-            (knownToken && knownToken.symbol) ||
-            "?";
         const bal = tb ? tb.balance || "0" : "0";
         $("send-balance").textContent =
             "Current balance: " + bal + " " + symbol;
@@ -132,15 +128,11 @@ function init(_ctx) {
             const tb = (addr.tokenBalances || []).find(
                 (t) => t.address.toLowerCase() === token.toLowerCase(),
             );
-            const knownTk = TOKEN_BY_ADDRESS.get(token.toLowerCase());
+            tokenSymbol = resolveSymbol(
-            const trackedTk = (state.trackedTokens || []).find(
+                token,
-                (t) => t.address.toLowerCase() === token.toLowerCase(),
+                addr.tokenBalances,
+                state.trackedTokens,
             );
-            tokenSymbol =
-                (tb && tb.symbol) ||
-                (trackedTk && trackedTk.symbol) ||
-                (knownTk && knownTk.symbol) ||
-                "?";
             tokenBalance = tb ? tb.balance || "0" : "0";
         }
 

src/shared/tokenList.js

@@ -3645,10 +3645,27 @@ async function getTopTokenPrices(n) {
     return prices;
 }
 
+// Resolve a token symbol from multiple sources, never returning "?".
+function resolveSymbol(tokenAddress, tokenBalances, trackedTokens) {
+    const lower = (tokenAddress || "").toLowerCase();
+    const tb = (tokenBalances || []).find(
+        (t) => t.address.toLowerCase() === lower,
+    );
+    if (tb && tb.symbol) return tb.symbol;
+    const known = TOKEN_BY_ADDRESS.get(lower);
+    if (known && known.symbol) return known.symbol;
+    const tracked = (trackedTokens || []).find(
+        (t) => t.address.toLowerCase() === lower,
+    );
+    if (tracked && tracked.symbol) return tracked.symbol;
+    return lower.slice(0, 10) + "\u2026";
+}
+
 module.exports = {
     TOKENS,
     TOKEN_BY_ADDRESS,
     KNOWN_SYMBOLS,
     getTopTokens,
     getTopTokenPrices,
+    resolveSymbol,
 };