feat: add copy-flash visual feedback on click-to-copy

When a user clicks to copy text (addresses, tx hashes, etc.), the copied
element now briefly flashes with inverted colors (bg/fg swap) and fades
back over ~300ms. This provides localized visual feedback in addition to
the existing flash message.

Applied to all click-to-copy elements across all views.

closes #100

src/popup/styles/main.css

@@ -19,3 +19,16 @@ body {
     width: 396px;
     overflow-x: hidden;
 }
+
+/* Copy-flash feedback: inverts colors then fades back */
+.copy-flash-active {
+    background-color: var(--color-fg) !important;
+    color: var(--color-bg) !important;
+    transition: none;
+}
+
+.copy-flash-fade {
+    transition:
+        background-color 300ms ease-out,
+        color 300ms ease-out;
+}

src/popup/views/addressDetail.js

@@ -2,6 +2,7 @@ const {
     $,
     showView,
     showFlash,
+    flashCopyFeedback,
     balanceLinesForAddress,
     addressDotHtml,
     addressTitle,
@@ -241,6 +242,7 @@ function init(_ctx) {
         if (addr) {
             navigator.clipboard.writeText(addr);
             showFlash("Copied!");
+            flashCopyFeedback($("address-full"));
         }
     });
 
@@ -358,6 +360,7 @@ function init(_ctx) {
         if (key) {
             navigator.clipboard.writeText(key);
             showFlash("Copied!");
+            flashCopyFeedback($("export-privkey-value"));
         }
     });
 
@@ -366,6 +369,7 @@ function init(_ctx) {
         if (full) {
             navigator.clipboard.writeText(full);
             showFlash("Copied!");
+            flashCopyFeedback($("export-privkey-address"));
         }
     });
 

src/popup/views/addressToken.js

@@ -5,6 +5,7 @@ const {
     $,
     showView,
     showFlash,
+    flashCopyFeedback,
     addressDotHtml,
     addressTitle,
     escapeHtml,
@@ -317,6 +318,7 @@ function init(_ctx) {
         if (addr) {
             navigator.clipboard.writeText(addr);
             showFlash("Copied!");
+            flashCopyFeedback($("address-token-full"));
         }
     });
 
@@ -325,6 +327,7 @@ function init(_ctx) {
         if (copyEl) {
             navigator.clipboard.writeText(copyEl.dataset.copy);
             showFlash("Copied!");
+            flashCopyFeedback(copyEl);
         }
     });
 
@@ -373,6 +376,7 @@ function init(_ctx) {
             copyEl.addEventListener("click", () => {
                 navigator.clipboard.writeText(copyEl.dataset.copy);
                 showFlash("Copied!");
+                flashCopyFeedback(copyEl);
             });
         }
         updateSendBalance();

src/popup/views/confirmTx.js

@@ -15,6 +15,7 @@ const {
     hideError,
     showView,
     showFlash,
+    flashCopyFeedback,
     addressTitle,
     addressDotHtml,
     escapeHtml,
@@ -117,6 +118,7 @@ function show(txInfo) {
             copyEl.onclick = () => {
                 navigator.clipboard.writeText(copyEl.dataset.copy);
                 showFlash("Copied!");
+                flashCopyFeedback(copyEl);
             };
         }
     } else {

src/popup/views/helpers.js

@@ -259,12 +259,26 @@ function timeAgo(timestamp) {
     return years + " year" + (years !== 1 ? "s" : "") + " ago";
 }
 
+function flashCopyFeedback(el) {
+    if (!el) return;
+    el.classList.remove("copy-flash-fade");
+    el.classList.add("copy-flash-active");
+    setTimeout(() => {
+        el.classList.remove("copy-flash-active");
+        el.classList.add("copy-flash-fade");
+        setTimeout(() => {
+            el.classList.remove("copy-flash-fade");
+        }, 350);
+    }, 100);
+}
+
 module.exports = {
     $,
     showError,
     hideError,
     showView,
     showFlash,
+    flashCopyFeedback,
     balanceLine,
     balanceLinesForAddress,
     addressColor,

src/popup/views/home.js

@@ -2,6 +2,7 @@ const {
     $,
     showView,
     showFlash,
+    flashCopyFeedback,
     balanceLinesForAddress,
     isoDate,
     timeAgo,
@@ -85,9 +86,10 @@ function renderActiveAddress() {
         el.innerHTML =
             `<span class="underline decoration-dashed cursor-pointer" id="active-addr-copy">${dot}${escapeHtml(addr)}</span>` +
             `<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
-        $("active-addr-copy").addEventListener("click", () => {
+        $("active-addr-copy").addEventListener("click", (e) => {
             navigator.clipboard.writeText(addr);
             showFlash("Copied!");
+            flashCopyFeedback(e.currentTarget);
         });
     } else {
         el.textContent = "";

src/popup/views/receive.js

@@ -2,6 +2,7 @@ const {
     $,
     showView,
     showFlash,
+    flashCopyFeedback,
     formatAddressHtml,
     addressTitle,
 } = require("./helpers");
@@ -60,11 +61,12 @@ function show() {
 }
 
 function init(ctx) {
-    $("receive-address-block").addEventListener("click", () => {
+    $("receive-address-block").addEventListener("click", (e) => {
         const addr = $("receive-address-block").dataset.full;
         if (addr) {
             navigator.clipboard.writeText(addr);
             showFlash("Copied!");
+            flashCopyFeedback(e.currentTarget);
         }
     });
 
@@ -73,6 +75,7 @@ function init(ctx) {
         if (addr) {
             navigator.clipboard.writeText(addr);
             showFlash("Copied!");
+            flashCopyFeedback($("receive-address-block"));
         }
     });
 

src/popup/views/transactionDetail.js

@@ -5,6 +5,7 @@ const {
     $,
     showView,
     showFlash,
+    flashCopyFeedback,
     addressDotHtml,
     addressTitle,
     escapeHtml,
@@ -158,8 +159,9 @@ function render() {
         loadCalldata(tx.hash, tx.to);
     }
 
-    $("tx-detail-time").textContent =
+    const isoStr = isoDate(tx.timestamp);
-        isoDate(tx.timestamp) + " (" + timeAgo(tx.timestamp) + ")";
+    $("tx-detail-time").innerHTML =
+        copyableHtml(isoStr) + " (" + escapeHtml(timeAgo(tx.timestamp)) + ")";
     $("tx-detail-status").textContent = tx.isError ? "Failed" : "Success";
     showView("transaction");
 
@@ -170,6 +172,7 @@ function render() {
             el.onclick = () => {
                 navigator.clipboard.writeText(el.dataset.copy);
                 showFlash("Copied!");
+                flashCopyFeedback(el);
             };
         });
 }
@@ -247,6 +250,7 @@ async function loadCalldata(txHash, toAddress) {
                 el.onclick = () => {
                     navigator.clipboard.writeText(el.dataset.copy);
                     showFlash("Copied!");
+                    flashCopyFeedback(el);
                 };
             });
         }

src/popup/views/txStatus.js

@@ -4,6 +4,7 @@ const {
     $,
     showView,
     showFlash,
+    flashCopyFeedback,
     addressDotHtml,
     addressTitle,
     escapeHtml,
@@ -50,6 +51,15 @@ function toAddressHtml(address) {
     return `<div class="flex items-center">${dot}<span class="break-all underline decoration-dashed cursor-pointer" data-copy="${escapeHtml(address)}">${escapeHtml(address)}</span>${extLink}</div>`;
 }
 
+function txHashHtml(hash) {
+    const link = `https://etherscan.io/tx/${hash}`;
+    const extLink = `<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
+    return (
+        `<span class="underline decoration-dashed cursor-pointer break-all" data-copy="${escapeHtml(hash)}">${escapeHtml(hash)}</span>` +
+        extLink
+    );
+}
+
 function blockNumberHtml(blockNumber) {
     const num = String(blockNumber);
     const link = `https://etherscan.io/block/${num}`;
@@ -60,15 +70,6 @@ function blockNumberHtml(blockNumber) {
     );
 }
 
-function txHashHtml(hash) {
-    const link = `https://etherscan.io/tx/${hash}`;
-    const extLink = `<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
-    return (
-        `<span class="underline decoration-dashed cursor-pointer break-all" data-copy="${escapeHtml(hash)}">${escapeHtml(hash)}</span>` +
-        extLink
-    );
-}
-
 function attachCopyHandlers(viewId) {
     document
         .getElementById(viewId)
@@ -77,6 +78,7 @@ function attachCopyHandlers(viewId) {
             el.onclick = () => {
                 navigator.clipboard.writeText(el.dataset.copy);
                 showFlash("Copied!");
+                flashCopyFeedback(el);
             };
         });
 }