fix: unify address display with shared renderAddressHtml utility (#129)

## Summary

All address rendering now uses a single `renderAddressHtml()` function in helpers.js that produces consistent output everywhere:
- Color dot (deterministic from address)
- Full address with dashed-underline click-to-copy affordance
- Etherscan external link icon

## Changes

Refactored all 9 view files that display addresses to use the shared utility:
- **approval.js** (approve-tx, approve-sign, approve-site): addresses now have click-to-copy with dashed underline affordance
- **confirmTx.js**: from/to addresses and token contract address use shared renderer
- **txStatus.js**: wait/success/error transaction addresses
- **transactionDetail.js**: from/to and decoded calldata addresses
- **home.js**: active address display
- **send.js**: from-address display
- **receive.js**: receive address display
- **addressDetail.js**: address line and export-privkey address
- **addressToken.js**: address line and contract info

## Consolidation

- `EXT_ICON` SVG constant: removed 6 duplicates, now in helpers.js
- `copyableHtml()`: removed duplicate, now in helpers.js
- `etherscanLinkHtml()`: removed duplicates, now in helpers.js
- `attachCopyHandlers()`: removed duplicate, now in helpers.js
- Net: **-193 lines** (174 added, 367 removed)

closes #97

Co-authored-by: user <user@Mac.lan guest wan>
Reviewed-on: #129
Co-authored-by: clawbot <clawbot@noreply.example.org>
Co-committed-by: clawbot <clawbot@noreply.example.org>

src/popup/views/transactionDetail.js

@@ -6,11 +6,14 @@ const {
     showView,
     showFlash,
     flashCopyFeedback,
-    addressDotHtml,
     addressTitle,
     escapeHtml,
     isoDate,
     timeAgo,
+    renderAddressHtml,
+    attachCopyHandlers,
+    copyableHtml,
+    etherscanLinkHtml,
 } = require("./helpers");
 const { state, currentNetwork } = require("../../shared/state");
 const { formatEther, formatUnits } = require("ethers");
@@ -18,13 +21,6 @@ const makeBlockie = require("ethereum-blockies-base64");
 const { log, debugFetch } = require("../../shared/log");
 const { decodeCalldata } = require("./approval");
 
-const EXT_ICON =
-    `<span style="display:inline-block;width:10px;height:10px;margin-left:4px;vertical-align:middle">` +
-    `<svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">` +
-    `<path d="M4.5 1.5H2a.5.5 0 00-.5.5v8a.5.5 0 00.5.5h8a.5.5 0 00.5-.5V7.5"/>` +
-    `<path d="M7 1.5h3.5V5M7 5.5L10.5 1.5"/>` +
-    `</svg></span>`;
-
 let ctx;
 
 /**
@@ -46,52 +42,17 @@ function getTransactionType(tx) {
     return "Native ETH Transfer";
 }
 
-function copyableHtml(text, extraClass) {
-    const cls =
-        "underline decoration-dashed cursor-pointer" +
-        (extraClass ? " " + extraClass : "");
-    return `<span class="${cls}" data-copy="${escapeHtml(text)}">${escapeHtml(text)}</span>`;
-}
-
 function blockieHtml(address) {
     const src = makeBlockie(address);
     return `<img src="${src}" width="48" height="48" style="image-rendering:pixelated;border-radius:50%;display:inline-block">`;
 }
 
-function etherscanLinkHtml(url) {
-    return (
-        `<a href="${url}" target="_blank" rel="noopener" ` +
-        `class="inline-flex items-center"` +
-        `>${EXT_ICON}</a>`
-    );
-}
-
 function txAddressHtml(address, ensName, title) {
     const blockie = blockieHtml(address);
-    const dot = addressDotHtml(address);
-    const link = `${currentNetwork().explorerUrl}/address/${address}`;
-    const extLink = etherscanLinkHtml(link);
-    let html = `<div class="mb-1">${blockie}</div>`;
-    if (title) {
-        html += `<div class="font-bold">${escapeHtml(title)}</div>`;
-    }
-    if (ensName) {
-        html +=
-            `<div class="flex items-center">${dot}` +
-            copyableHtml(ensName, "") +
-            `</div>` +
-            `<div class="flex items-center">${dot}` +
-            copyableHtml(address, "break-all") +
-            extLink +
-            `</div>`;
-    } else {
-        html +=
-            `<div class="flex items-center">${dot}` +
-            copyableHtml(address, "break-all") +
-            extLink +
-            `</div>`;
-    }
-    return html;
+    return (
+        `<div class="mb-1">${blockie}</div>` +
+        renderAddressHtml(address, { title, ensName })
+    );
 }
 
 function txHashHtml(hash) {
@@ -210,17 +171,7 @@ function render() {
         copyableHtml(isoStr) + " (" + escapeHtml(timeAgo(tx.timestamp)) + ")";
     $("tx-detail-status").textContent = tx.isError ? "Failed" : "Success";
     showView("transaction");
-
-    document
-        .getElementById("view-transaction")
-        .querySelectorAll("[data-copy]")
-        .forEach((el) => {
-            el.onclick = () => {
-                navigator.clipboard.writeText(el.dataset.copy);
-                showFlash("Copied!");
-                flashCopyFeedback(el);
-            };
-        });
+    attachCopyHandlers("view-transaction");
 }
 
 function showDetailField(sectionId, contentId, value) {
@@ -355,19 +306,14 @@ async function loadFullTxDetails(txHash, toAddress, isContractCall) {
                 detailsHtml += `<div class="mb-2">`;
                 detailsHtml += `<div class="text-muted">${escapeHtml(d.label)}</div>`;
                 if (d.address && d.isToken) {
-                    // Token entry: show symbol on its own line, then dot + address + Etherscan link
-                    const dot = addressDotHtml(d.address);
+                    // Token entry: show symbol on its own line, then address via shared renderer
                     const tokenSymbol = d.value.match(/^(\S+)\s*\(/)?.[1];
                     if (tokenSymbol) {
                         detailsHtml += `<div class="font-bold">${escapeHtml(tokenSymbol)}</div>`;
                     }
-                    const etherscanUrl = `${currentNetwork().explorerUrl}/token/${d.address}`;
-                    detailsHtml += `<div class="flex items-center">${dot}${copyableHtml(d.address, "break-all")}${etherscanLinkHtml(etherscanUrl)}</div>`;
+                    detailsHtml += renderAddressHtml(d.address);
                 } else if (d.address) {
-                    // Protocol/contract entry: show name + Etherscan link
-                    const dot = addressDotHtml(d.address);
-                    const etherscanUrl = `${currentNetwork().explorerUrl}/address/${d.address}`;
-                    detailsHtml += `<div class="flex items-center">${dot}${copyableHtml(d.value, "break-all")}${etherscanLinkHtml(etherscanUrl)}</div>`;
+                    detailsHtml += renderAddressHtml(d.address);
                 } else {
                     detailsHtml += `<div class="font-bold">${escapeHtml(d.value)}</div>`;
                 }
@@ -394,13 +340,7 @@ async function loadFullTxDetails(txHash, toAddress, isContractCall) {
         // Bind copy handlers for new elements (including raw data now outside section)
         const copyTargets = [section, rawSection].filter(Boolean);
         for (const container of copyTargets) {
-            container.querySelectorAll("[data-copy]").forEach((el) => {
-                el.onclick = () => {
-                    navigator.clipboard.writeText(el.dataset.copy);
-                    showFlash("Copied!");
-                    flashCopyFeedback(el);
-                };
-            });
+            attachCopyHandlers(container);
         }
     } catch (e) {
         log.errorf("loadCalldata failed:", e.message);