fix: include timezone offset in all ISO timestamp displays

All isoDate() functions now append the local timezone offset (e.g. +02:00)
to displayed timestamps. The Uniswap deadline display now retains the UTC
'Z' suffix instead of stripping it.

Closes #116

README.md

@@ -435,29 +435,16 @@ transitions.
 #### TransactionDetail
 
 - **When**: User tapped a transaction row from AddressDetail or AddressToken.
-- **Elements** (grouped into logical blocks using light well containers; field
+- **Elements**:
-  labels are self-explanatory so groups have no headings):
     - "Transaction" heading, "Back" button
-    - Transaction hash: full hash (tap to copy) + etherscan link
-    - Type: transaction classification — one of: Native ETH Transfer, ERC-20
-      Token Transfer, Swap, Token Approval, Contract Call, Contract Creation
     - Status: "Success" or "Failed"
-    - From: blockie + color dot + full address (tap to copy) + etherscan link;
-      ENS name if available
-    - To: blockie + color dot + full address (tap to copy) + etherscan link; ENS
-      name if available
     - Time: ISO datetime + relative age in parentheses
-    - Block: block number (tap to copy) + etherscan block link
     - Amount: value + symbol (bold)
-    - Native quantity: raw integer + unit (shown when available)
+    - From: blockie + color dot + full address (tap to copy) + etherscan link
-    - Token contract: shown for ERC-20 transfers — color dot + full contract
+        - ENS name if available
-      address (tap to copy) + etherscan token link
+    - To: blockie + color dot + full address (tap to copy) + etherscan link
-    - Decoded details (shown for contract calls): action name, decoded
+        - ENS name if available
-      parameters, token details, swap steps
+    - Transaction hash: full hash (tap to copy) + etherscan link
-    - Network details (shown when on-chain data is available): nonce, gas price,
-      gas used, transaction fee (all tap to copy)
-    - Raw data (shown when calldata is present): full calldata in monospace
-      dashed border
 - **Transitions**:
     - "Back" → **AddressToken** (if `selectedToken` set) or **AddressDetail**
 

src/popup/index.html

@@ -107,8 +107,7 @@
                     </div>
                     <div
                         id="add-wallet-phrase-warning"
-                        class="text-xs mb-2 border border-border border-dashed p-2"
+                        class="text-xs mb-2 border border-border border-dashed p-2 hidden"
-                        style="visibility: hidden"
                     >
                         Write these words down and keep them safe. Anyone with
                         them can take your funds; if you lose them, your wallet
@@ -185,7 +184,7 @@
                 <!-- active address headline -->
                 <div
                     id="total-value"
-                    class="text-2xl font-bold min-h-[2rem] text-fg"
+                    class="text-2xl font-bold min-h-[2rem]"
                 ></div>
                 <div
                     id="total-value-sub"
@@ -376,8 +375,7 @@
                 </p>
                 <div
                     id="export-privkey-flash"
-                    class="text-xs mb-2 min-h-[1.25rem]"
+                    class="text-xs mb-2 hidden"
-                    style="visibility: hidden"
                 ></div>
                 <div id="export-privkey-password-section" class="mb-2">
                     <label class="block mb-1">Password</label>
@@ -581,17 +579,13 @@
                     <div class="text-xs text-muted mb-1">Your balance</div>
                     <div id="confirm-balance" class="text-xs"></div>
                 </div>
-                <div id="confirm-fee" class="mb-3" style="visibility: hidden">
+                <div id="confirm-fee" class="mb-3 hidden">
                     <div class="text-xs text-muted mb-1">
                         Estimated network fee
                     </div>
                     <div id="confirm-fee-amount" class="text-xs"></div>
                 </div>
-                <div
+                <div id="confirm-warnings" class="mb-2 hidden"></div>
-                    id="confirm-warnings"
-                    class="mb-2"
-                    style="visibility: hidden"
-                ></div>
                 <div
                     id="confirm-recipient-warning"
                     class="mb-2"
@@ -607,8 +601,7 @@
                 </div>
                 <div
                     id="confirm-errors"
-                    class="mb-2 border border-border border-dashed p-2"
+                    class="mb-2 border border-border border-dashed p-2 hidden"
-                    style="visibility: hidden; min-height: 1.25rem"
                 ></div>
                 <div class="mb-2">
                     <label class="block mb-1 text-xs">Password</label>
@@ -621,7 +614,6 @@
                 <div
                     id="confirm-tx-password-error"
                     class="text-xs mb-2 min-h-[1.25rem]"
-                    style="visibility: hidden"
                 ></div>
                 <button
                     id="btn-confirm-send"
@@ -736,8 +728,7 @@
                 </button>
                 <div
                     id="receive-erc20-warning"
-                    class="text-xs border border-border border-dashed p-2 mt-3"
+                    class="text-xs border border-border border-dashed p-2 mt-3 hidden"
-                    style="visibility: hidden"
                 ></div>
             </div>
 
@@ -765,8 +756,7 @@
                 </div>
                 <div
                     id="add-token-info"
-                    class="text-xs text-muted mb-2 min-h-[1.25rem]"
+                    class="text-xs text-muted mb-2 hidden"
-                    style="visibility: hidden"
                 ></div>
                 <div class="mb-2">
                     <label class="block mb-1 text-xs text-muted"
@@ -824,7 +814,7 @@
                 <div class="bg-well p-3 mx-1 mb-3">
                     <h3 class="font-bold mb-1">Display</h3>
                     <label
-                        class="text-xs flex items-center gap-1 cursor-pointer mb-2"
+                        class="text-xs flex items-center gap-1 cursor-pointer"
                     >
                         <input
                             type="checkbox"
@@ -832,17 +822,6 @@
                         />
                         Show tracked tokens with zero balance
                     </label>
-                    <div class="text-xs flex items-center gap-1">
-                        <label for="settings-theme">Theme:</label>
-                        <select
-                            id="settings-theme"
-                            class="border border-border p-1 bg-bg text-fg text-xs cursor-pointer"
-                        >
-                            <option value="system">System</option>
-                            <option value="light">Light</option>
-                            <option value="dark">Dark</option>
-                        </select>
-                    </div>
                 </div>
 
                 <div class="bg-well p-3 mx-1 mb-3">
@@ -924,12 +903,6 @@
                         />
                         <span class="text-xs text-muted">gwei</span>
                     </div>
-                    <label
-                        class="text-xs flex items-center gap-1 cursor-pointer mb-1"
-                    >
-                        <input type="checkbox" id="settings-utc-timestamps" />
-                        UTC Timestamps
-                    </label>
                 </div>
 
                 <div class="bg-well p-3 mx-1 mb-3">
@@ -965,8 +938,7 @@
                 </p>
                 <div
                     id="delete-wallet-flash"
-                    class="text-xs text-red-500 mb-2 min-h-[1.25rem]"
+                    class="text-xs text-red-500 mb-2 hidden"
-                    style="visibility: hidden"
                 ></div>
                 <div class="mb-2">
                     <label class="block mb-1">Password</label>
@@ -1041,8 +1013,7 @@
                     />
                     <div
                         id="settings-addtoken-info"
-                        class="text-xs text-muted mt-1 min-h-[1.25rem]"
+                        class="text-xs text-muted mt-1 hidden"
-                        style="visibility: hidden"
                     ></div>
                     <button
                         id="btn-settings-addtoken-manual"
@@ -1064,84 +1035,39 @@
                 <h2 id="tx-detail-heading" class="font-bold mb-2">
                     Transaction
                 </h2>
-
+                <div id="tx-detail-type-section" class="mb-4 hidden">
-                <!-- ── Identity ── -->
-                <div class="bg-well p-3 mx-1 mb-3">
-                    <div class="mb-2">
-                        <div class="text-xs text-muted mb-1">
-                            Transaction hash
-                        </div>
-                        <div
-                            id="tx-detail-hash"
-                            class="text-xs break-all"
-                        ></div>
-                    </div>
-                    <div id="tx-detail-type-section" class="mb-2 hidden">
                     <div class="text-xs text-muted mb-1">Type</div>
-                        <div
+                    <div id="tx-detail-type" class="text-xs font-bold"></div>
-                            id="tx-detail-type"
-                            class="text-xs font-bold"
-                        ></div>
                 </div>
-                    <div class="mb-2">
+                <div class="mb-4">
                     <div class="text-xs text-muted mb-1">Status</div>
                     <div id="tx-detail-status" class="text-xs"></div>
                 </div>
-                    <div class="mb-2">
+                <div class="mb-4">
-                        <div class="text-xs text-muted mb-1">From</div>
-                        <div
-                            id="tx-detail-from"
-                            class="text-xs break-all"
-                        ></div>
-                    </div>
-                    <div class="mb-2">
-                        <div class="text-xs text-muted mb-1">To</div>
-                        <div id="tx-detail-to" class="text-xs break-all"></div>
-                    </div>
-                </div>
-
-                <!-- ── Timing ── -->
-                <div class="bg-well p-3 mx-1 mb-3">
-                    <div class="mb-2">
                     <div class="text-xs text-muted mb-1">Time</div>
                     <div id="tx-detail-time" class="text-xs"></div>
                 </div>
-                    <div id="tx-detail-block-section" class="mb-2 hidden">
+                <div class="mb-4">
-                        <div class="text-xs text-muted mb-1">Block</div>
-                        <div id="tx-detail-block" class="text-xs"></div>
-                    </div>
-                </div>
-
-                <!-- ── Value ── -->
-                <div class="bg-well p-3 mx-1 mb-3">
-                    <div class="mb-2">
                     <div class="text-xs text-muted mb-1">Amount</div>
                     <div id="tx-detail-value" class="text-xs"></div>
                 </div>
-                    <div class="mb-2 hidden">
+                <div class="mb-4 hidden">
-                        <div class="text-xs text-muted mb-1">
+                    <div class="text-xs text-muted mb-1">Native quantity</div>
-                            Native quantity
-                        </div>
                     <div id="tx-detail-native" class="text-xs"></div>
                 </div>
+                <div class="mb-4">
+                    <div class="text-xs text-muted mb-1">From</div>
+                    <div id="tx-detail-from" class="text-xs break-all"></div>
+                </div>
+                <div class="mb-4">
+                    <div class="text-xs text-muted mb-1">To</div>
+                    <div id="tx-detail-to" class="text-xs break-all"></div>
+                </div>
+                <div id="tx-detail-calldata-section" class="mb-4 hidden">
                     <div
-                        id="tx-detail-token-contract-section"
+                        id="tx-detail-calldata-well"
-                        class="mb-2 hidden"
+                        class="mb-3 border border-border border-dashed p-2"
                     >
-                        <div class="text-xs text-muted mb-1">
-                            Token contract
-                        </div>
-                        <div
-                            id="tx-detail-token-contract"
-                            class="text-xs break-all"
-                        ></div>
-                    </div>
-                </div>
-
-                <!-- ── Decoded details ── -->
-                <div id="tx-detail-calldata-section" class="hidden">
-                    <div class="bg-well p-3 mx-1 mb-3">
-                        <div id="tx-detail-calldata-well" class="mb-2">
                         <div class="text-xs text-muted mb-1">Action</div>
                         <div
                             id="tx-detail-calldata-action"
@@ -1153,39 +1079,11 @@
                         ></div>
                     </div>
                 </div>
+                <div class="mb-4">
+                    <div class="text-xs text-muted mb-1">Transaction hash</div>
+                    <div id="tx-detail-hash" class="text-xs break-all"></div>
                 </div>
-
+                <div id="tx-detail-rawdata-section" class="mb-4 hidden">
-                <!-- ── Network details ── -->
-                <div id="tx-detail-network-section" class="hidden">
-                    <div class="bg-well p-3 mx-1 mb-3">
-                        <div id="tx-detail-nonce-section" class="mb-2 hidden">
-                            <div class="text-xs text-muted mb-1">Nonce</div>
-                            <div id="tx-detail-nonce" class="text-xs"></div>
-                        </div>
-                        <div
-                            id="tx-detail-gasprice-section"
-                            class="mb-2 hidden"
-                        >
-                            <div class="text-xs text-muted mb-1">Gas price</div>
-                            <div id="tx-detail-gasprice" class="text-xs"></div>
-                        </div>
-                        <div id="tx-detail-gasused-section" class="mb-2 hidden">
-                            <div class="text-xs text-muted mb-1">Gas used</div>
-                            <div id="tx-detail-gasused" class="text-xs"></div>
-                        </div>
-                        <div id="tx-detail-fee-section" class="mb-2 hidden">
-                            <div class="text-xs text-muted mb-1">
-                                Transaction fee
-                            </div>
-                            <div id="tx-detail-fee" class="text-xs"></div>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- ── Raw data ── -->
-                <div id="tx-detail-rawdata-section" class="hidden">
-                    <div class="bg-well p-3 mx-1 mb-3">
-                        <div class="mb-2">
                     <div class="text-xs text-muted mb-1">Raw data</div>
                     <div
                         id="tx-detail-rawdata"
@@ -1193,8 +1091,6 @@
                     ></div>
                 </div>
             </div>
-                </div>
-            </div>
 
             <!-- ============ TRANSACTION APPROVAL ============ -->
             <div id="view-approve-tx" class="view hidden">
@@ -1243,8 +1139,7 @@
                 </div>
                 <div
                     id="approve-tx-error"
-                    class="text-xs mb-2 border border-border border-dashed p-1 min-h-[1.25rem]"
+                    class="text-xs mb-2 border border-border border-dashed p-1 min-h-[1.25rem] hidden"
-                    style="visibility: hidden"
                 ></div>
                 <div class="flex justify-between">
                     <button
@@ -1272,10 +1167,8 @@
 
                 <div
                     id="approve-sign-danger-warning"
-                    class="mb-3 p-2 text-xs font-bold"
+                    class="hidden mb-3 p-2 text-xs font-bold"
                     style="
-                        visibility: hidden;
-                        min-height: 1.25rem;
                         background: #fee2e2;
                         color: #991b1b;
                         border: 2px solid #dc2626;
@@ -1312,8 +1205,7 @@
                 </div>
                 <div
                     id="approve-sign-error"
-                    class="text-xs mb-2 border border-border border-dashed p-1 min-h-[1.25rem]"
+                    class="text-xs mb-2 border border-border border-dashed p-1 min-h-[1.25rem] hidden"
-                    style="visibility: hidden"
                 ></div>
                 <div class="flex justify-between">
                     <button

src/popup/index.js

@@ -6,7 +6,6 @@ const { state, saveState, loadState } = require("../shared/state");
 const { refreshPrices } = require("../shared/prices");
 const { refreshBalances } = require("../shared/balances");
 const { $, showView } = require("./views/helpers");
-const { applyTheme } = require("./theme");
 
 const home = require("./views/home");
 const welcome = require("./views/welcome");
@@ -177,7 +176,6 @@ async function init() {
     }
 
     await loadState();
-    applyTheme(state.theme);
 
     // Auto-default active address
     if (

src/popup/styles/main.css

@@ -15,18 +15,6 @@
     --color-section: #dddddd;
 }
 
-html.dark {
-    --color-bg: #000000;
-    --color-fg: #ffffff;
-    --color-muted: #aaaaaa;
-    --color-border: #ffffff;
-    --color-border-light: #444444;
-    --color-hover: #222222;
-    --color-well: #1a1a1a;
-    --color-danger-well: #2a0a0a;
-    --color-section: #2a2a2a;
-}
-
 body {
     width: 396px;
     overflow-x: hidden;
@@ -41,6 +29,6 @@ body {
 
 .copy-flash-fade {
     transition:
-        background-color 225ms ease-out,
+        background-color 300ms ease-out,
-        color 225ms ease-out;
+        color 300ms ease-out;
 }

src/popup/theme.js

@@ -1,33 +0,0 @@
-// Theme management: applies light/dark class to <html> based on preference.
-
-let mediaQuery = null;
-let mediaHandler = null;
-
-function applyTheme(theme) {
-    // Clean up previous system listener
-    if (mediaQuery && mediaHandler) {
-        mediaQuery.removeEventListener("change", mediaHandler);
-        mediaHandler = null;
-    }
-
-    if (theme === "dark") {
-        document.documentElement.classList.add("dark");
-    } else if (theme === "light") {
-        document.documentElement.classList.remove("dark");
-    } else {
-        // system
-        mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-        const update = () => {
-            if (mediaQuery.matches) {
-                document.documentElement.classList.add("dark");
-            } else {
-                document.documentElement.classList.remove("dark");
-            }
-        };
-        mediaHandler = update;
-        mediaQuery.addEventListener("change", update);
-        update();
-    }
-}
-
-module.exports = { applyTheme };

src/popup/views/addToken.js

@@ -7,8 +7,7 @@ const { log } = require("../../shared/log");
 
 function show() {
     $("add-token-address").value = "";
-    $("add-token-info").textContent = "";
+    $("add-token-info").classList.add("hidden");
-    $("add-token-info").style.visibility = "hidden";
     const list = $("common-token-list");
     list.innerHTML = getTopTokens(25)
         .map(
@@ -46,7 +45,7 @@ function init(ctx) {
         }
         const infoEl = $("add-token-info");
         infoEl.textContent = "Looking up token...";
-        infoEl.style.visibility = "visible";
+        infoEl.classList.remove("hidden");
         log.debugf("Looking up token contract", contractAddr);
         try {
             const info = await lookupTokenInfo(contractAddr, state.rpcUrl);
@@ -64,8 +63,7 @@ function init(ctx) {
             const detail = e.shortMessage || e.message || String(e);
             log.errorf("Token lookup failed for", contractAddr, detail);
             showFlash(detail);
-            infoEl.textContent = "";
+            infoEl.classList.add("hidden");
-            infoEl.style.visibility = "hidden";
         }
     });
 

src/popup/views/addWallet.js

@@ -71,7 +71,7 @@ function show() {
     $("import-xprv-key").value = "";
     $("add-wallet-password").value = "";
     $("add-wallet-password-confirm").value = "";
-    $("add-wallet-phrase-warning").style.visibility = "hidden";
+    $("add-wallet-phrase-warning").classList.add("hidden");
     switchMode("mnemonic");
     showView("add-wallet");
 }
@@ -281,7 +281,7 @@ function init(ctx) {
     // Generate mnemonic
     $("btn-generate-phrase").addEventListener("click", () => {
         $("wallet-mnemonic").value = generateMnemonic();
-        $("add-wallet-phrase-warning").style.visibility = "visible";
+        $("add-wallet-phrase-warning").classList.remove("hidden");
     });
 
     // Import / confirm

src/popup/views/addressDetail.js

@@ -95,39 +95,23 @@ function show() {
 function isoDate(timestamp) {
     const d = new Date(timestamp * 1000);
     const pad = (n) => String(n).padStart(2, "0");
-    if (state.utcTimestamps) {
+    const off = -d.getTimezoneOffset();
-        return (
+    const sign = off >= 0 ? "+" : "-";
-            d.getUTCFullYear() +
+    const absOff = Math.abs(off);
-            "-" +
+    const tz = sign + pad(Math.floor(absOff / 60)) + ":" + pad(absOff % 60);
-            pad(d.getUTCMonth() + 1) +
-            "-" +
-            pad(d.getUTCDate()) +
-            "T" +
-            pad(d.getUTCHours()) +
-            ":" +
-            pad(d.getUTCMinutes()) +
-            ":" +
-            pad(d.getUTCSeconds()) +
-            "Z"
-        );
-    }
-    const offsetMin = -d.getTimezoneOffset();
-    const sign = offsetMin >= 0 ? "+" : "-";
-    const absOff = Math.abs(offsetMin);
-    const tzStr = sign + pad(Math.floor(absOff / 60)) + ":" + pad(absOff % 60);
     return (
         d.getFullYear() +
         "-" +
         pad(d.getMonth() + 1) +
         "-" +
         pad(d.getDate()) +
-        "T" +
+        " " +
         pad(d.getHours()) +
         ":" +
         pad(d.getMinutes()) +
         ":" +
         pad(d.getSeconds()) +
-        tzStr
+        tz
     );
 }
 
@@ -333,8 +317,8 @@ function init(_ctx) {
         $("export-privkey-address").textContent = addr.address;
         $("export-privkey-address").dataset.full = addr.address;
         $("export-privkey-password").value = "";
+        $("export-privkey-flash").classList.add("hidden");
         $("export-privkey-flash").textContent = "";
-        $("export-privkey-flash").style.visibility = "hidden";
         $("export-privkey-password-section").classList.remove("hidden");
         $("export-privkey-result").classList.add("hidden");
         $("export-privkey-value").textContent = "";
@@ -345,7 +329,7 @@ function init(_ctx) {
         const password = $("export-privkey-password").value;
         if (!password) {
             $("export-privkey-flash").textContent = "Password is required.";
-            $("export-privkey-flash").style.visibility = "visible";
+            $("export-privkey-flash").classList.remove("hidden");
             return;
         }
         const btn = $("btn-export-privkey-confirm");
@@ -366,10 +350,10 @@ function init(_ctx) {
             $("export-privkey-password-section").classList.add("hidden");
             $("export-privkey-value").textContent = privateKey;
             $("export-privkey-result").classList.remove("hidden");
-            $("export-privkey-flash").style.visibility = "hidden";
+            $("export-privkey-flash").classList.add("hidden");
         } catch {
             $("export-privkey-flash").textContent = "Wrong password.";
-            $("export-privkey-flash").style.visibility = "visible";
+            $("export-privkey-flash").classList.remove("hidden");
         } finally {
             btn.disabled = false;
             btn.classList.remove("text-muted");

src/popup/views/addressToken.js

@@ -45,46 +45,26 @@ function etherscanAddressLink(address) {
     return `https://etherscan.io/address/${address}`;
 }
 
-function etherscanTokenLink(tokenContract, holderAddress) {
-    return `https://etherscan.io/token/${tokenContract}?a=${holderAddress}`;
-}
-
 function isoDate(timestamp) {
     const d = new Date(timestamp * 1000);
     const pad = (n) => String(n).padStart(2, "0");
-    if (state.utcTimestamps) {
+    const off = -d.getTimezoneOffset();
-        return (
+    const sign = off >= 0 ? "+" : "-";
-            d.getUTCFullYear() +
+    const absOff = Math.abs(off);
-            "-" +
+    const tz = sign + pad(Math.floor(absOff / 60)) + ":" + pad(absOff % 60);
-            pad(d.getUTCMonth() + 1) +
-            "-" +
-            pad(d.getUTCDate()) +
-            "T" +
-            pad(d.getUTCHours()) +
-            ":" +
-            pad(d.getUTCMinutes()) +
-            ":" +
-            pad(d.getUTCSeconds()) +
-            "Z"
-        );
-    }
-    const offsetMin = -d.getTimezoneOffset();
-    const sign = offsetMin >= 0 ? "+" : "-";
-    const absOff = Math.abs(offsetMin);
-    const tzStr = sign + pad(Math.floor(absOff / 60)) + ":" + pad(absOff % 60);
     return (
         d.getFullYear() +
         "-" +
         pad(d.getMonth() + 1) +
         "-" +
         pad(d.getDate()) +
-        "T" +
+        " " +
         pad(d.getHours()) +
         ":" +
         pad(d.getMinutes()) +
         ":" +
         pad(d.getSeconds()) +
-        tzStr
+        tz
     );
 }
 
@@ -155,10 +135,7 @@ function show() {
     $("address-token-dot").innerHTML = addressDotHtml(addr.address);
     $("address-token-full").dataset.full = addr.address;
     $("address-token-full").textContent = addr.address;
-    const addrLink =
+    const addrLink = etherscanAddressLink(addr.address);
-        tokenId !== "ETH"
-            ? etherscanTokenLink(tokenId, addr.address)
-            : etherscanAddressLink(addr.address);
     $("address-token-etherscan-link").innerHTML =
         `<a href="${addrLink}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
 

src/popup/views/approval.js

@@ -269,7 +269,7 @@ function showTxApproval(details) {
     }
 
     $("approve-tx-password").value = "";
-    hideError("approve-tx-error");
+    $("approve-tx-error").classList.add("hidden");
 
     showView("approve-tx");
 }
@@ -351,10 +351,10 @@ function showSignApproval(details) {
     if (warningEl) {
         if (sp.dangerWarning) {
             warningEl.textContent = sp.dangerWarning;
-            warningEl.style.visibility = "visible";
+            warningEl.classList.remove("hidden");
         } else {
             warningEl.textContent = "";
-            warningEl.style.visibility = "hidden";
+            warningEl.classList.add("hidden");
         }
     }
 

src/popup/views/confirmTx.js

@@ -186,10 +186,9 @@ function show(txInfo) {
                     `<div class="border border-border border-dashed p-2 mb-1 text-xs font-bold">WARNING: ${w}</div>`,
             )
             .join("");
-        warningsEl.style.visibility = "visible";
+        warningsEl.classList.remove("hidden");
     } else {
-        warningsEl.innerHTML = "";
+        warningsEl.classList.add("hidden");
-        warningsEl.style.visibility = "hidden";
     }
 
     // Check for errors
@@ -227,12 +226,11 @@ function show(txInfo) {
         errorsEl.innerHTML = errors
             .map((e) => `<div class="text-xs">${e}</div>`)
             .join("");
-        errorsEl.style.visibility = "visible";
+        errorsEl.classList.remove("hidden");
         sendBtn.disabled = true;
         sendBtn.classList.add("text-muted");
     } else {
-        errorsEl.innerHTML = "";
+        errorsEl.classList.add("hidden");
-        errorsEl.style.visibility = "hidden";
         sendBtn.disabled = false;
         sendBtn.classList.remove("text-muted");
     }
@@ -242,7 +240,7 @@ function show(txInfo) {
     hideError("confirm-tx-password-error");
 
     // Gas estimate — show placeholder then fetch async
-    $("confirm-fee").style.visibility = "visible";
+    $("confirm-fee").classList.remove("hidden");
     $("confirm-fee-amount").textContent = "Estimating...";
     state.viewData = { pendingTx: txInfo };
     showView("confirm-tx");

src/popup/views/deleteWallet.js

@@ -12,7 +12,7 @@ function show(walletIdx) {
         wallet.name || "Wallet " + (walletIdx + 1);
     $("delete-wallet-password").value = "";
     $("delete-wallet-flash").textContent = "";
-    $("delete-wallet-flash").style.visibility = "hidden";
+    $("delete-wallet-flash").classList.add("hidden");
     showView("delete-wallet-confirm");
 }
 
@@ -29,14 +29,14 @@ function init(_ctx) {
         if (!pw) {
             $("delete-wallet-flash").textContent =
                 "Please enter your password.";
-            $("delete-wallet-flash").style.visibility = "visible";
+            $("delete-wallet-flash").classList.remove("hidden");
             return;
         }
 
         if (deleteWalletIndex === null) {
             $("delete-wallet-flash").textContent =
                 "No wallet selected for deletion.";
-            $("delete-wallet-flash").style.visibility = "visible";
+            $("delete-wallet-flash").classList.remove("hidden");
             return;
         }
 
@@ -52,7 +52,7 @@ function init(_ctx) {
             await decryptWithPassword(wallet.encryptedSecret, pw);
         } catch (_e) {
             $("delete-wallet-flash").textContent = "Wrong password.";
-            $("delete-wallet-flash").style.visibility = "visible";
+            $("delete-wallet-flash").classList.remove("hidden");
             btn.disabled = false;
             btn.classList.remove("text-muted");
             return;

src/popup/views/helpers.js

@@ -40,13 +40,11 @@ function $(id) {
 function showError(id, msg) {
     const el = $(id);
     el.textContent = msg;
-    el.style.visibility = "visible";
+    el.classList.remove("hidden");
 }
 
 function hideError(id) {
-    const el = $(id);
+    $(id).classList.add("hidden");
-    el.textContent = "";
-    el.style.visibility = "hidden";
 }
 
 function showView(name) {
@@ -228,39 +226,23 @@ function formatAddressHtml(address, ensName, maxLen, title) {
 function isoDate(timestamp) {
     const d = new Date(timestamp * 1000);
     const pad = (n) => String(n).padStart(2, "0");
-    if (state.utcTimestamps) {
+    const off = -d.getTimezoneOffset();
-        return (
+    const sign = off >= 0 ? "+" : "-";
-            d.getUTCFullYear() +
+    const absOff = Math.abs(off);
-            "-" +
+    const tz = sign + pad(Math.floor(absOff / 60)) + ":" + pad(absOff % 60);
-            pad(d.getUTCMonth() + 1) +
-            "-" +
-            pad(d.getUTCDate()) +
-            "T" +
-            pad(d.getUTCHours()) +
-            ":" +
-            pad(d.getUTCMinutes()) +
-            ":" +
-            pad(d.getUTCSeconds()) +
-            "Z"
-        );
-    }
-    const offsetMin = -d.getTimezoneOffset();
-    const sign = offsetMin >= 0 ? "+" : "-";
-    const absOff = Math.abs(offsetMin);
-    const tzStr = sign + pad(Math.floor(absOff / 60)) + ":" + pad(absOff % 60);
     return (
         d.getFullYear() +
         "-" +
         pad(d.getMonth() + 1) +
         "-" +
         pad(d.getDate()) +
-        "T" +
+        " " +
         pad(d.getHours()) +
         ":" +
         pad(d.getMinutes()) +
         ":" +
         pad(d.getSeconds()) +
-        tzStr
+        tz
     );
 }
 
@@ -290,8 +272,8 @@ function flashCopyFeedback(el) {
         el.classList.add("copy-flash-fade");
         setTimeout(() => {
             el.classList.remove("copy-flash-fade");
-        }, 275);
+        }, 350);
-    }, 75);
+    }, 100);
 }
 
 module.exports = {

src/popup/views/receive.js

@@ -53,10 +53,9 @@ function show() {
             "This is an ERC-20 token. Only send " +
             symbol +
             " on the Ethereum network to this address. Sending tokens on other networks will result in permanent loss.";
-        warningEl.style.visibility = "visible";
+        warningEl.classList.remove("hidden");
     } else {
-        warningEl.textContent = "";
+        warningEl.classList.add("hidden");
-        warningEl.style.visibility = "hidden";
     }
     showView("receive");
 }

src/popup/views/settings.js

@@ -1,5 +1,4 @@
 const { $, showView, showFlash, escapeHtml } = require("./helpers");
-const { applyTheme } = require("../theme");
 const { state, saveState } = require("../../shared/state");
 const { ETHEREUM_MAINNET_CHAIN_ID } = require("../../shared/constants");
 const { log, debugFetch } = require("../../shared/log");
@@ -215,13 +214,6 @@ function init(ctx) {
         await saveState();
     });
 
-    $("settings-theme").value = state.theme;
-    $("settings-theme").addEventListener("change", async () => {
-        state.theme = $("settings-theme").value;
-        await saveState();
-        applyTheme(state.theme);
-    });
-
     $("settings-hide-low-holders").checked = state.hideLowHolderTokens;
     $("settings-hide-low-holders").addEventListener("change", async () => {
         state.hideLowHolderTokens = $("settings-hide-low-holders").checked;
@@ -249,12 +241,6 @@ function init(ctx) {
         }
     });
 
-    $("settings-utc-timestamps").checked = state.utcTimestamps;
-    $("settings-utc-timestamps").addEventListener("change", async () => {
-        state.utcTimestamps = $("settings-utc-timestamps").checked;
-        await saveState();
-    });
-
     $("btn-main-add-wallet").addEventListener("click", ctx.showAddWalletView);
 
     $("btn-settings-add-token").addEventListener(

src/popup/views/settingsAddToken.js

@@ -73,8 +73,7 @@ function renderDropdown() {
 
 function show() {
     $("settings-addtoken-address").value = "";
-    $("settings-addtoken-info").textContent = "";
+    $("settings-addtoken-info").classList.add("hidden");
-    $("settings-addtoken-info").style.visibility = "hidden";
     renderTop10();
     renderDropdown();
     showView("settings-addtoken");
@@ -130,7 +129,7 @@ function init(_ctx) {
         }
         const infoEl = $("settings-addtoken-info");
         infoEl.textContent = "Looking up token...";
-        infoEl.style.visibility = "visible";
+        infoEl.classList.remove("hidden");
         log.debugf("Looking up token contract", addr);
         try {
             const info = await lookupTokenInfo(addr, state.rpcUrl);
@@ -144,8 +143,7 @@ function init(_ctx) {
             await saveState();
             showFlash("Added " + info.symbol);
             $("settings-addtoken-address").value = "";
-            infoEl.textContent = "";
+            infoEl.classList.add("hidden");
-            infoEl.style.visibility = "hidden";
             renderTop10();
             renderDropdown();
             ctx.doRefreshAndRender();
@@ -153,8 +151,7 @@ function init(_ctx) {
             const detail = e.shortMessage || e.message || String(e);
             log.errorf("Token lookup failed for", addr, detail);
             showFlash(detail);
-            infoEl.textContent = "";
+            infoEl.classList.add("hidden");
-            infoEl.style.visibility = "hidden";
         }
     });
 }

src/popup/views/transactionDetail.js

@@ -13,7 +13,6 @@ const {
     timeAgo,
 } = require("./helpers");
 const { state } = require("../../shared/state");
-const { formatEther, formatUnits } = require("ethers");
 const makeBlockie = require("ethereum-blockies-base64");
 const { log, debugFetch } = require("../../shared/log");
 const { decodeCalldata } = require("./approval");
@@ -27,25 +26,6 @@ const EXT_ICON =
 
 let ctx;
 
-/**
- * Determine a human-readable transaction type string from tx fields.
- */
-function getTransactionType(tx) {
-    if (!tx.to) return "Contract Creation";
-    if (tx.direction === "contract") {
-        if (tx.directionLabel === "Swap") return "Swap";
-        if (
-            tx.method === "approve" ||
-            tx.directionLabel === "Approve" ||
-            tx.method === "setApprovalForAll"
-        )
-            return "Token Approval";
-        return "Contract Call";
-    }
-    if (tx.symbol && tx.symbol !== "ETH") return "ERC-20 Token Transfer";
-    return "Native ETH Transfer";
-}
-
 function copyableHtml(text, extraClass) {
     const cls =
         "underline decoration-dashed cursor-pointer" +
@@ -119,7 +99,6 @@ function show(tx) {
             direction: tx.direction || null,
             isContractCall: tx.isContractCall || false,
             method: tx.method || null,
-            contractAddress: tx.contractAddress || null,
         },
     };
     render();
@@ -156,55 +135,30 @@ function render() {
         nativeEl.parentElement.classList.add("hidden");
     }
 
-    // Always show transaction type as the first field
+    // Show type label for contract interactions (Swap, Execute, etc.)
     const typeSection = $("tx-detail-type-section");
     const typeEl = $("tx-detail-type");
     const headingEl = $("tx-detail-heading");
-    if (typeSection && typeEl) {
+    if (tx.direction === "contract" && tx.directionLabel) {
-        typeEl.textContent = getTransactionType(tx);
+        if (typeSection) {
+            typeEl.textContent = tx.directionLabel;
             typeSection.classList.remove("hidden");
         }
+    } else {
+        if (typeSection) typeSection.classList.add("hidden");
+    }
     if (headingEl) headingEl.textContent = "Transaction";
 
-    // Token contract address (for ERC-20 transfers)
+    // Hide calldata and raw data sections; re-fetch if this is a contract call
-    const tokenContractSection = $("tx-detail-token-contract-section");
-    const tokenContractEl = $("tx-detail-token-contract");
-    if (tokenContractSection && tokenContractEl) {
-        if (tx.contractAddress) {
-            const dot = addressDotHtml(tx.contractAddress);
-            const link = `https://etherscan.io/token/${tx.contractAddress}`;
-            tokenContractEl.innerHTML =
-                `<div class="flex items-center">${dot}` +
-                copyableHtml(tx.contractAddress, "break-all") +
-                etherscanLinkHtml(link) +
-                `</div>`;
-            tokenContractSection.classList.remove("hidden");
-        } else {
-            tokenContractSection.classList.add("hidden");
-        }
-    }
-
-    // Hide calldata and raw data sections; always fetch full tx details
     const calldataSection = $("tx-detail-calldata-section");
     if (calldataSection) calldataSection.classList.add("hidden");
     const rawDataSection = $("tx-detail-rawdata-section");
     if (rawDataSection) rawDataSection.classList.add("hidden");
 
-    // Hide on-chain detail sections until populated
+    if (tx.isContractCall || tx.direction === "contract") {
-    for (const id of [
+        loadCalldata(tx.hash, tx.to);
-        "tx-detail-block-section",
-        "tx-detail-nonce-section",
-        "tx-detail-fee-section",
-        "tx-detail-gasprice-section",
-        "tx-detail-gasused-section",
-        "tx-detail-network-section",
-    ]) {
-        const el = $(id);
-        if (el) el.classList.add("hidden");
     }
 
-    loadFullTxDetails(tx.hash, tx.to, tx.isContractCall);
-
     const isoStr = isoDate(tx.timestamp);
     $("tx-detail-time").innerHTML =
         copyableHtml(isoStr) + " (" + escapeHtml(timeAgo(tx.timestamp)) + ")";
@@ -223,105 +177,7 @@ function render() {
         });
 }
 
-function showDetailField(sectionId, contentId, value) {
+async function loadCalldata(txHash, toAddress) {
-    const section = $(sectionId);
-    const el = $(contentId);
-    if (!section || !el) return;
-    el.innerHTML = copyableHtml(value, "");
-    section.classList.remove("hidden");
-}
-
-function populateOnChainDetails(txData) {
-    // Block number
-    if (txData.block_number != null) {
-        const blockLink = `https://etherscan.io/block/${txData.block_number}`;
-        const blockSection = $("tx-detail-block-section");
-        const blockEl = $("tx-detail-block");
-        if (blockSection && blockEl) {
-            blockEl.innerHTML =
-                copyableHtml(String(txData.block_number), "") +
-                etherscanLinkHtml(blockLink);
-            blockSection.classList.remove("hidden");
-        }
-    }
-
-    // Nonce
-    if (txData.nonce != null) {
-        showDetailField(
-            "tx-detail-nonce-section",
-            "tx-detail-nonce",
-            String(txData.nonce),
-        );
-    }
-
-    // Transaction fee
-    const feeWei = txData.fee?.value || txData.tx_fee;
-    if (feeWei) {
-        const feeEth = formatEther(String(feeWei));
-        showDetailField(
-            "tx-detail-fee-section",
-            "tx-detail-fee",
-            feeEth + " ETH",
-        );
-    }
-
-    // Gas price
-    const gasPrice = txData.gas_price;
-    if (gasPrice) {
-        const gwei = formatUnits(String(gasPrice), "gwei");
-        showDetailField(
-            "tx-detail-gasprice-section",
-            "tx-detail-gasprice",
-            gwei + " Gwei",
-        );
-    }
-
-    // Gas used
-    const gasUsed = txData.gas_used;
-    if (gasUsed) {
-        showDetailField(
-            "tx-detail-gasused-section",
-            "tx-detail-gasused",
-            String(gasUsed),
-        );
-    }
-
-    // Show the network details wrapper if any child section is visible
-    const networkWrapper = $("tx-detail-network-section");
-    if (networkWrapper) {
-        const hasVisible = [
-            "tx-detail-nonce-section",
-            "tx-detail-fee-section",
-            "tx-detail-gasprice-section",
-            "tx-detail-gasused-section",
-        ].some((id) => {
-            const el = $(id);
-            return el && !el.classList.contains("hidden");
-        });
-        if (hasVisible) networkWrapper.classList.remove("hidden");
-    }
-
-    // Bind copy handlers for newly added elements
-    for (const id of [
-        "tx-detail-block-section",
-        "tx-detail-nonce-section",
-        "tx-detail-fee-section",
-        "tx-detail-gasprice-section",
-        "tx-detail-gasused-section",
-    ]) {
-        const section = $(id);
-        if (!section) continue;
-        section.querySelectorAll("[data-copy]").forEach((el) => {
-            el.onclick = () => {
-                navigator.clipboard.writeText(el.dataset.copy);
-                showFlash("Copied!");
-                flashCopyFeedback(el);
-            };
-        });
-    }
-}
-
-async function loadFullTxDetails(txHash, toAddress, isContractCall) {
     const section = $("tx-detail-calldata-section");
     const actionEl = $("tx-detail-calldata-action");
     const detailsEl = $("tx-detail-calldata-details");
@@ -336,10 +192,6 @@ async function loadFullTxDetails(txHash, toAddress, isContractCall) {
         );
         if (!resp.ok) return;
         const txData = await resp.json();
-
-        // Populate on-chain detail fields (block, nonce, gas, fee)
-        populateOnChainDetails(txData);
-
         const inputData = txData.raw_input || txData.input || null;
         if (!inputData || inputData === "0x") return;
 

src/shared/state.js

@@ -23,10 +23,8 @@ const DEFAULT_STATE = {
     hideFraudContracts: true,
     hideDustTransactions: true,
     dustThresholdGwei: 100000,
-    utcTimestamps: false,
     fraudContracts: [],
     tokenHolderCache: {},
-    theme: "system",
 };
 
 const state = {
@@ -55,10 +53,8 @@ async function saveState() {
         hideFraudContracts: state.hideFraudContracts,
         hideDustTransactions: state.hideDustTransactions,
         dustThresholdGwei: state.dustThresholdGwei,
-        utcTimestamps: state.utcTimestamps,
         fraudContracts: state.fraudContracts,
         tokenHolderCache: state.tokenHolderCache,
-        theme: state.theme,
         currentView: state.currentView,
         selectedWallet: state.selectedWallet,
         selectedAddress: state.selectedAddress,
@@ -112,11 +108,8 @@ async function loadState() {
             saved.dustThresholdGwei !== undefined
                 ? saved.dustThresholdGwei
                 : 100000;
-        state.utcTimestamps =
-            saved.utcTimestamps !== undefined ? saved.utcTimestamps : false;
         state.fraudContracts = saved.fraudContracts || [];
         state.tokenHolderCache = saved.tokenHolderCache || {};
-        state.theme = saved.theme || "system";
         state.currentView = saved.currentView || null;
         state.selectedWallet =
             saved.selectedWallet !== undefined ? saved.selectedWallet : null;

src/shared/transactions.js

@@ -153,38 +153,24 @@ async function fetchRecentTransactions(address, blockscoutUrl, count = 25) {
 
     // When a token transfer shares a hash with a normal tx, the normal tx
     // is the contract call (0 ETH) and the token transfer has the real
-    // amount and symbol.  For contract calls (swaps), a single transaction
+    // amount and symbol.  A single transaction (e.g. a swap) can produce
-    // can produce multiple token transfers (input, intermediates, output).
+    // multiple token transfers (one per token involved), so we key token
-    // We consolidate these into the original tx entry using the token
+    // transfers by hash + contract address to keep all of them.  We also
-    // transfer where the user *receives* tokens (the swap output), so
+    // preserve contract-call metadata (direction, label, method) from the
-    // the transaction list shows the final result rather than confusing
+    // matching normal tx so swaps display correctly.
-    // intermediate hops.  We preserve the original tx's from/to so the
-    // user sees their own address, not a router or Permit2 contract.
     for (const tt of ttJson.items || []) {
         const parsed = parseTokenTransfer(tt, addrLower);
         const existing = txsByHash.get(parsed.hash);
         if (existing && existing.direction === "contract") {
-            // For contract calls (swaps), consolidate into the original
+            parsed.direction = "contract";
-            // tx entry.  Prefer the "received" transfer (swap output)
+            parsed.directionLabel = existing.directionLabel;
-            // for the display amount.  If no received transfer exists,
+            parsed.isContractCall = true;
-            // fall back to the first "sent" transfer (swap input).
+            parsed.method = existing.method;
-            const isReceived = parsed.direction === "received";
+            // Remove the bare-hash normal tx so it doesn't appear as a
-            const needsAmount = !existing.exactValue;
+            // duplicate with empty value; token transfers replace it.
-            if (isReceived || needsAmount) {
+            txsByHash.delete(parsed.hash);
-                existing.value = parsed.value;
-                existing.exactValue = parsed.exactValue;
-                existing.rawAmount = parsed.rawAmount;
-                existing.rawUnit = parsed.rawUnit;
-                existing.symbol = parsed.symbol;
-                existing.contractAddress = parsed.contractAddress;
-                existing.holders = parsed.holders;
         }
-            // Keep the original tx's from/to (the user's address and the
+        // Use composite key so multiple token transfers per tx are kept.
-            // contract they called), not the token transfer's from/to
-            // which may be a router or Permit2 contract.
-            continue;
-        }
-        // Non-contract token transfers get their own entries.
         const ttKey = parsed.hash + ":" + (parsed.contractAddress || "");
         txsByHash.set(ttKey, parsed);
     }

src/shared/uniswap.js

@@ -359,12 +359,9 @@ function decode(data, toAddress) {
                     const s = decodeV3SwapExactIn(inputs[i]);
                     if (s) {
                         if (!inputToken) inputToken = s.tokenIn;
+                        if (!outputToken) outputToken = s.tokenOut;
                         if (!inputAmount) inputAmount = s.amountIn;
-                        // Always update output: in multi-step swaps (V3 → V4),
+                        if (!minOutput) minOutput = s.amountOutMin;
-                        // the last swap step determines the final output token
-                        // and minimum received amount.
-                        outputToken = s.tokenOut;
-                        minOutput = s.amountOutMin;
                     }
                 }
 
@@ -372,9 +369,9 @@ function decode(data, toAddress) {
                     const s = decodeV2SwapExactIn(inputs[i]);
                     if (s) {
                         if (!inputToken) inputToken = s.tokenIn;
+                        if (!outputToken) outputToken = s.tokenOut;
                         if (!inputAmount) inputAmount = s.amountIn;
-                        outputToken = s.tokenOut;
+                        if (!minOutput) minOutput = s.amountOutMin;
-                        minOutput = s.amountOutMin;
                     }
                 }
 
@@ -391,11 +388,12 @@ function decode(data, toAddress) {
                     const v4 = decodeV4Swap(inputs[i]);
                     if (v4) {
                         if (!inputToken && v4.tokenIn) inputToken = v4.tokenIn;
+                        if (!outputToken && v4.tokenOut)
+                            outputToken = v4.tokenOut;
                         if (!inputAmount && v4.amountIn)
                             inputAmount = v4.amountIn;
-                        // Always update output: last swap step wins
+                        if (!minOutput && v4.amountOutMin)
-                        if (v4.tokenOut) outputToken = v4.tokenOut;
+                            minOutput = v4.amountOutMin;
-                        if (v4.amountOutMin) minOutput = v4.amountOutMin;
                     }
                 }
 
@@ -489,7 +487,10 @@ function decode(data, toAddress) {
         const deadlineDate = new Date(Number(deadline) * 1000);
         details.push({
             label: "Deadline",
-            value: deadlineDate.toISOString().replace("T", " ").slice(0, 19),
+            value: deadlineDate
+                .toISOString()
+                .replace("T", " ")
+                .replace(".000Z", "Z"),
         });
 
         return {