feat: reorganize transaction detail view layout

- Move transaction hash (txid) to first position after title
- Group fields into logical sections with visual dividers:
  Identity (hash, type, status, time), Value (amount, native qty,
  token contract), Parties (from, to), Protocol (calldata/action),
  On-chain (block, nonce, fee, gas price, gas used), Raw data
- Add tx-detail-group CSS class for subtle border separators
- Show on-chain details group wrapper only when data is loaded
- Maintain all existing functionality and copy-to-clipboard behavior

closes #131

README.md

@@ -437,6 +437,10 @@ transitions.
 - **When**: User tapped a transaction row from AddressDetail or AddressToken.
 - **Elements**:
     - "Transaction" heading, "Back" button
+    - Type: transaction classification — one of: Native ETH Transfer, ERC-20
+      Token Transfer, Swap, Token Approval, Contract Call, Contract Creation
+    - Token contract: shown for ERC-20 transfers — color dot + full contract
+      address (tap to copy) + etherscan token link
     - Status: "Success" or "Failed"
     - Time: ISO datetime + relative age in parentheses
     - Amount: value + symbol (bold)
@@ -445,6 +449,11 @@ transitions.
     - To: blockie + color dot + full address (tap to copy) + etherscan link
         - ENS name if available
     - Transaction hash: full hash (tap to copy) + etherscan link
+    - Block: block number (tap to copy) + etherscan block link
+    - Nonce: transaction nonce (tap to copy)
+    - Transaction fee: ETH amount (tap to copy)
+    - Gas price: value in Gwei (tap to copy)
+    - Gas used: integer (tap to copy)
 - **Transitions**:
     - "Back" → **AddressToken** (if `selectedToken` set) or **AddressDetail**
 

src/popup/index.html

@@ -107,7 +107,8 @@
                     </div>
                     <div
                         id="add-wallet-phrase-warning"
-                        class="text-xs mb-2 border border-border border-dashed p-2 hidden"
+                        class="text-xs mb-2 border border-border border-dashed p-2"
+                        style="visibility: hidden"
                     >
                         Write these words down and keep them safe. Anyone with
                         them can take your funds; if you lose them, your wallet
@@ -184,7 +185,7 @@
                 <!-- active address headline -->
                 <div
                     id="total-value"
-                    class="text-2xl font-bold min-h-[2rem]"
+                    class="text-2xl font-bold min-h-[2rem] text-fg"
                 ></div>
                 <div
                     id="total-value-sub"
@@ -375,7 +376,8 @@
                 </p>
                 <div
                     id="export-privkey-flash"
-                    class="text-xs mb-2 hidden"
+                    class="text-xs mb-2 min-h-[1.25rem]"
+                    style="visibility: hidden"
                 ></div>
                 <div id="export-privkey-password-section" class="mb-2">
                     <label class="block mb-1">Password</label>
@@ -579,13 +581,17 @@
                     <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 hidden">
+                <div id="confirm-fee" class="mb-3" style="visibility: hidden">
                     <div class="text-xs text-muted mb-1">
                         Estimated network fee
                     </div>
                     <div id="confirm-fee-amount" class="text-xs"></div>
                 </div>
-                <div id="confirm-warnings" class="mb-2 hidden"></div>
+                <div
+                    id="confirm-warnings"
+                    class="mb-2"
+                    style="visibility: hidden"
+                ></div>
                 <div
                     id="confirm-recipient-warning"
                     class="mb-2"
@@ -601,7 +607,8 @@
                 </div>
                 <div
                     id="confirm-errors"
-                    class="mb-2 border border-border border-dashed p-2 hidden"
+                    class="mb-2 border border-border border-dashed p-2"
+                    style="visibility: hidden; min-height: 1.25rem"
                 ></div>
                 <div class="mb-2">
                     <label class="block mb-1 text-xs">Password</label>
@@ -614,6 +621,7 @@
                 <div
                     id="confirm-tx-password-error"
                     class="text-xs mb-2 min-h-[1.25rem]"
+                    style="visibility: hidden"
                 ></div>
                 <button
                     id="btn-confirm-send"
@@ -728,7 +736,8 @@
                 </button>
                 <div
                     id="receive-erc20-warning"
-                    class="text-xs border border-border border-dashed p-2 mt-3 hidden"
+                    class="text-xs border border-border border-dashed p-2 mt-3"
+                    style="visibility: hidden"
                 ></div>
             </div>
 
@@ -756,7 +765,8 @@
                 </div>
                 <div
                     id="add-token-info"
-                    class="text-xs text-muted mb-2 hidden"
+                    class="text-xs text-muted mb-2 min-h-[1.25rem]"
+                    style="visibility: hidden"
                 ></div>
                 <div class="mb-2">
                     <label class="block mb-1 text-xs text-muted"
@@ -814,7 +824,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"
+                        class="text-xs flex items-center gap-1 cursor-pointer mb-2"
                     >
                         <input
                             type="checkbox"
@@ -822,6 +832,17 @@
                         />
                         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">
@@ -903,6 +924,12 @@
                         />
                         <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">
@@ -938,7 +965,8 @@
                 </p>
                 <div
                     id="delete-wallet-flash"
-                    class="text-xs text-red-500 mb-2 hidden"
+                    class="text-xs text-red-500 mb-2 min-h-[1.25rem]"
+                    style="visibility: hidden"
                 ></div>
                 <div class="mb-2">
                     <label class="block mb-1">Password</label>
@@ -1013,7 +1041,8 @@
                     />
                     <div
                         id="settings-addtoken-info"
-                        class="text-xs text-muted mt-1 hidden"
+                        class="text-xs text-muted mt-1 min-h-[1.25rem]"
+                        style="visibility: hidden"
                     ></div>
                     <button
                         id="btn-settings-addtoken-manual"
@@ -1035,60 +1064,134 @@
                 <h2 id="tx-detail-heading" class="font-bold mb-2">
                     Transaction
                 </h2>
-                <div id="tx-detail-type-section" class="mb-4 hidden">
+
-                    <div class="text-xs text-muted mb-1">Type</div>
+                <!-- ── Identity ── -->
-                    <div id="tx-detail-type" class="text-xs font-bold"></div>
+                <div class="tx-detail-group mb-1">
-                </div>
+                    <div class="mb-3">
-                <div class="mb-4">
+                        <div class="text-xs text-muted mb-1">
-                    <div class="text-xs text-muted mb-1">Status</div>
+                            Transaction hash
-                    <div id="tx-detail-status" class="text-xs"></div>
+                        </div>
-                </div>
-                <div class="mb-4">
-                    <div class="text-xs text-muted mb-1">Time</div>
-                    <div id="tx-detail-time" class="text-xs"></div>
-                </div>
-                <div class="mb-4">
-                    <div class="text-xs text-muted mb-1">Amount</div>
-                    <div id="tx-detail-value" class="text-xs"></div>
-                </div>
-                <div class="mb-4 hidden">
-                    <div class="text-xs text-muted mb-1">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-calldata-well"
-                        class="mb-3 border border-border border-dashed p-2"
-                    >
-                        <div class="text-xs text-muted mb-1">Action</div>
                         <div
-                            id="tx-detail-calldata-action"
+                            id="tx-detail-hash"
-                            class="text-xs font-bold mb-2"
+                            class="text-xs break-all"
                         ></div>
+                    </div>
+                    <div id="tx-detail-type-section" class="mb-3 hidden">
+                        <div class="text-xs text-muted mb-1">Type</div>
                         <div
-                            id="tx-detail-calldata-details"
+                            id="tx-detail-type"
-                            class="text-xs"
+                            class="text-xs font-bold"
+                        ></div>
+                    </div>
+                    <div class="mb-3">
+                        <div class="text-xs text-muted mb-1">Status</div>
+                        <div id="tx-detail-status" class="text-xs"></div>
+                    </div>
+                    <div class="mb-1">
+                        <div class="text-xs text-muted mb-1">Time</div>
+                        <div id="tx-detail-time" class="text-xs"></div>
+                    </div>
+                </div>
+
+                <!-- ── Value ── -->
+                <div class="tx-detail-group mb-1">
+                    <div class="mb-3">
+                        <div class="text-xs text-muted mb-1">Amount</div>
+                        <div id="tx-detail-value" class="text-xs"></div>
+                    </div>
+                    <div class="mb-3 hidden">
+                        <div class="text-xs text-muted mb-1">
+                            Native quantity
+                        </div>
+                        <div id="tx-detail-native" class="text-xs"></div>
+                    </div>
+                    <div
+                        id="tx-detail-token-contract-section"
+                        class="mb-1 hidden"
+                    >
+                        <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>
-                <div class="mb-4">
+
-                    <div class="text-xs text-muted mb-1">Transaction hash</div>
+                <!-- ── Parties ── -->
-                    <div id="tx-detail-hash" class="text-xs break-all"></div>
+                <div class="tx-detail-group mb-1">
+                    <div class="mb-3">
+                        <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-1">
+                        <div class="text-xs text-muted mb-1">To</div>
+                        <div id="tx-detail-to" class="text-xs break-all"></div>
+                    </div>
                 </div>
+
+                <!-- ── Protocol ── -->
+                <div id="tx-detail-calldata-section" class="mb-1 hidden">
+                    <div class="tx-detail-group mb-1">
+                        <div
+                            id="tx-detail-calldata-well"
+                            class="border border-border border-dashed p-2"
+                        >
+                            <div class="text-xs text-muted mb-1">Action</div>
+                            <div
+                                id="tx-detail-calldata-action"
+                                class="text-xs font-bold mb-2"
+                            ></div>
+                            <div
+                                id="tx-detail-calldata-details"
+                                class="text-xs"
+                            ></div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- ── On-chain details ── -->
+                <div
+                    id="tx-detail-onchain-group"
+                    class="tx-detail-group mb-1 hidden"
+                >
+                    <div id="tx-detail-block-section" class="mb-3 hidden">
+                        <div class="text-xs text-muted mb-1">Block</div>
+                        <div id="tx-detail-block" class="text-xs"></div>
+                    </div>
+                    <div id="tx-detail-nonce-section" class="mb-3 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-fee-section" class="mb-3 hidden">
+                        <div class="text-xs text-muted mb-1">
+                            Transaction fee
+                        </div>
+                        <div id="tx-detail-fee" class="text-xs"></div>
+                    </div>
+                    <div id="tx-detail-gasprice-section" class="mb-3 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-1 hidden">
+                        <div class="text-xs text-muted mb-1">Gas used</div>
+                        <div id="tx-detail-gasused" class="text-xs"></div>
+                    </div>
+                </div>
+
+                <!-- ── Raw data ── -->
                 <div id="tx-detail-rawdata-section" class="mb-4 hidden">
-                    <div class="text-xs text-muted mb-1">Raw data</div>
+                    <div class="tx-detail-group">
-                    <div
+                        <div class="text-xs text-muted mb-1">Raw data</div>
-                        id="tx-detail-rawdata"
+                        <div
-                        class="text-xs break-all font-mono border border-border border-dashed p-2"
+                            id="tx-detail-rawdata"
-                    ></div>
+                            class="text-xs break-all font-mono border border-border border-dashed p-2"
+                        ></div>
+                    </div>
                 </div>
             </div>
 
@@ -1139,7 +1242,8 @@
                 </div>
                 <div
                     id="approve-tx-error"
-                    class="text-xs mb-2 border border-border border-dashed p-1 min-h-[1.25rem] hidden"
+                    class="text-xs mb-2 border border-border border-dashed p-1 min-h-[1.25rem]"
+                    style="visibility: hidden"
                 ></div>
                 <div class="flex justify-between">
                     <button
@@ -1167,8 +1271,10 @@
 
                 <div
                     id="approve-sign-danger-warning"
-                    class="hidden mb-3 p-2 text-xs font-bold"
+                    class="mb-3 p-2 text-xs font-bold"
                     style="
+                        visibility: hidden;
+                        min-height: 1.25rem;
                         background: #fee2e2;
                         color: #991b1b;
                         border: 2px solid #dc2626;
@@ -1205,7 +1311,8 @@
                 </div>
                 <div
                     id="approve-sign-error"
-                    class="text-xs mb-2 border border-border border-dashed p-1 min-h-[1.25rem] hidden"
+                    class="text-xs mb-2 border border-border border-dashed p-1 min-h-[1.25rem]"
+                    style="visibility: hidden"
                 ></div>
                 <div class="flex justify-between">
                     <button

src/popup/index.js

@@ -6,6 +6,7 @@ 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");
@@ -176,6 +177,7 @@ async function init() {
     }
 
     await loadState();
+    applyTheme(state.theme);
 
     // Auto-default active address
     if (

src/popup/styles/main.css

@@ -15,6 +15,18 @@
     --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;
@@ -29,6 +41,14 @@ body {
 
 .copy-flash-fade {
     transition:
-        background-color 300ms ease-out,
+        background-color 225ms ease-out,
-        color 300ms ease-out;
+        color 225ms ease-out;
+}
+
+/* Transaction detail view — visual grouping of related fields */
+.tx-detail-group {
+    border-bottom: 1px solid var(--color-border-light);
+    padding-bottom: 0.5rem;
+    margin-bottom: 0.5rem;
+    padding-top: 0.25rem;
 }

src/popup/theme.js

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

src/popup/views/addressDetail.js

@@ -95,18 +95,39 @@ function show() {
 function isoDate(timestamp) {
     const d = new Date(timestamp * 1000);
     const pad = (n) => String(n).padStart(2, "0");
+    if (state.utcTimestamps) {
+        return (
+            d.getUTCFullYear() +
+            "-" +
+            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())
+        pad(d.getSeconds()) +
+        tzStr
     );
 }
 
@@ -312,8 +333,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 = "";
@@ -324,7 +345,7 @@ function init(_ctx) {
         const password = $("export-privkey-password").value;
         if (!password) {
             $("export-privkey-flash").textContent = "Password is required.";
-            $("export-privkey-flash").classList.remove("hidden");
+            $("export-privkey-flash").style.visibility = "visible";
             return;
         }
         const btn = $("btn-export-privkey-confirm");
@@ -345,10 +366,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").classList.add("hidden");
+            $("export-privkey-flash").style.visibility = "hidden";
         } catch {
             $("export-privkey-flash").textContent = "Wrong password.";
-            $("export-privkey-flash").classList.remove("hidden");
+            $("export-privkey-flash").style.visibility = "visible";
         } finally {
             btn.disabled = false;
             btn.classList.remove("text-muted");

src/popup/views/addressToken.js

@@ -48,18 +48,39 @@ function etherscanAddressLink(address) {
 function isoDate(timestamp) {
     const d = new Date(timestamp * 1000);
     const pad = (n) => String(n).padStart(2, "0");
+    if (state.utcTimestamps) {
+        return (
+            d.getUTCFullYear() +
+            "-" +
+            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())
+        pad(d.getSeconds()) +
+        tzStr
     );
 }
 

src/popup/views/approval.js

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

src/popup/views/confirmTx.js

@@ -186,9 +186,10 @@ function show(txInfo) {
                     `<div class="border border-border border-dashed p-2 mb-1 text-xs font-bold">WARNING: ${w}</div>`,
             )
             .join("");
-        warningsEl.classList.remove("hidden");
+        warningsEl.style.visibility = "visible";
     } else {
-        warningsEl.classList.add("hidden");
+        warningsEl.innerHTML = "";
+        warningsEl.style.visibility = "hidden";
     }
 
     // Check for errors
@@ -226,11 +227,12 @@ function show(txInfo) {
         errorsEl.innerHTML = errors
             .map((e) => `<div class="text-xs">${e}</div>`)
             .join("");
-        errorsEl.classList.remove("hidden");
+        errorsEl.style.visibility = "visible";
         sendBtn.disabled = true;
         sendBtn.classList.add("text-muted");
     } else {
-        errorsEl.classList.add("hidden");
+        errorsEl.innerHTML = "";
+        errorsEl.style.visibility = "hidden";
         sendBtn.disabled = false;
         sendBtn.classList.remove("text-muted");
     }
@@ -240,7 +242,7 @@ function show(txInfo) {
     hideError("confirm-tx-password-error");
 
     // Gas estimate — show placeholder then fetch async
-    $("confirm-fee").classList.remove("hidden");
+    $("confirm-fee").style.visibility = "visible";
     $("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").classList.add("hidden");
+    $("delete-wallet-flash").style.visibility = "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").classList.remove("hidden");
+            $("delete-wallet-flash").style.visibility = "visible";
             return;
         }
 
         if (deleteWalletIndex === null) {
             $("delete-wallet-flash").textContent =
                 "No wallet selected for deletion.";
-            $("delete-wallet-flash").classList.remove("hidden");
+            $("delete-wallet-flash").style.visibility = "visible";
             return;
         }
 
@@ -52,7 +52,7 @@ function init(_ctx) {
             await decryptWithPassword(wallet.encryptedSecret, pw);
         } catch (_e) {
             $("delete-wallet-flash").textContent = "Wrong password.";
-            $("delete-wallet-flash").classList.remove("hidden");
+            $("delete-wallet-flash").style.visibility = "visible";
             btn.disabled = false;
             btn.classList.remove("text-muted");
             return;

src/popup/views/helpers.js

@@ -40,11 +40,13 @@ function $(id) {
 function showError(id, msg) {
     const el = $(id);
     el.textContent = msg;
-    el.classList.remove("hidden");
+    el.style.visibility = "visible";
 }
 
 function hideError(id) {
-    $(id).classList.add("hidden");
+    const el = $(id);
+    el.textContent = "";
+    el.style.visibility = "hidden";
 }
 
 function showView(name) {
@@ -226,18 +228,39 @@ 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) {
+        return (
+            d.getUTCFullYear() +
+            "-" +
+            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())
+        pad(d.getSeconds()) +
+        tzStr
     );
 }
 
@@ -267,8 +290,8 @@ function flashCopyFeedback(el) {
         el.classList.add("copy-flash-fade");
         setTimeout(() => {
             el.classList.remove("copy-flash-fade");
-        }, 350);
+        }, 275);
-    }, 100);
+    }, 75);
 }
 
 module.exports = {

src/popup/views/receive.js

@@ -53,9 +53,10 @@ 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.classList.remove("hidden");
+        warningEl.style.visibility = "visible";
     } else {
-        warningEl.classList.add("hidden");
+        warningEl.textContent = "";
+        warningEl.style.visibility = "hidden";
     }
     showView("receive");
 }

src/popup/views/settings.js

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

src/popup/views/transactionDetail.js

@@ -13,6 +13,7 @@ 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");
@@ -26,6 +27,25 @@ 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" +
@@ -99,6 +119,7 @@ function show(tx) {
             direction: tx.direction || null,
             isContractCall: tx.isContractCall || false,
             method: tx.method || null,
+            contractAddress: tx.contractAddress || null,
         },
     };
     render();
@@ -135,30 +156,56 @@ function render() {
         nativeEl.parentElement.classList.add("hidden");
     }
 
-    // Show type label for contract interactions (Swap, Execute, etc.)
+    // Always show transaction type as the first field
     const typeSection = $("tx-detail-type-section");
     const typeEl = $("tx-detail-type");
     const headingEl = $("tx-detail-heading");
-    if (tx.direction === "contract" && tx.directionLabel) {
+    if (typeSection && typeEl) {
-        if (typeSection) {
+        typeEl.textContent = getTransactionType(tx);
-            typeEl.textContent = tx.directionLabel;
+        typeSection.classList.remove("hidden");
-            typeSection.classList.remove("hidden");
-        }
-    } else {
-        if (typeSection) typeSection.classList.add("hidden");
     }
     if (headingEl) headingEl.textContent = "Transaction";
 
-    // Hide calldata and raw data sections; re-fetch if this is a contract call
+    // Token contract address (for ERC-20 transfers)
+    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");
 
-    if (tx.isContractCall || tx.direction === "contract") {
+    // Hide on-chain detail sections (and their group wrapper) until populated
-        loadCalldata(tx.hash, tx.to);
+    const onchainGroup = $("tx-detail-onchain-group");
+    if (onchainGroup) onchainGroup.classList.add("hidden");
+    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 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)) + ")";
@@ -177,7 +224,108 @@ function render() {
         });
 }
 
-async function loadCalldata(txHash, toAddress) {
+function showDetailField(sectionId, contentId, value) {
+    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 on-chain details group if any child section is visible
+    const onchainGroup = $("tx-detail-onchain-group");
+    if (onchainGroup) {
+        const hasVisible = [
+            "tx-detail-block-section",
+            "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) {
+            onchainGroup.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");
@@ -192,6 +340,10 @@ async function loadCalldata(txHash, toAddress) {
         );
         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,8 +23,10 @@ const DEFAULT_STATE = {
     hideFraudContracts: true,
     hideDustTransactions: true,
     dustThresholdGwei: 100000,
+    utcTimestamps: false,
     fraudContracts: [],
     tokenHolderCache: {},
+    theme: "system",
 };
 
 const state = {
@@ -53,8 +55,10 @@ 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,
@@ -108,8 +112,11 @@ 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,24 +153,38 @@ 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.  A single transaction (e.g. a swap) can produce
+    // amount and symbol.  For contract calls (swaps), a single transaction
-    // multiple token transfers (one per token involved), so we key token
+    // can produce multiple token transfers (input, intermediates, output).
-    // transfers by hash + contract address to keep all of them.  We also
+    // We consolidate these into the original tx entry using the token
-    // preserve contract-call metadata (direction, label, method) from the
+    // transfer where the user *receives* tokens (the swap output), so
-    // matching normal tx so swaps display correctly.
+    // the transaction list shows the final result rather than confusing
+    // 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") {
-            parsed.direction = "contract";
+            // For contract calls (swaps), consolidate into the original
-            parsed.directionLabel = existing.directionLabel;
+            // tx entry.  Prefer the "received" transfer (swap output)
-            parsed.isContractCall = true;
+            // for the display amount.  If no received transfer exists,
-            parsed.method = existing.method;
+            // fall back to the first "sent" transfer (swap input).
-            // Remove the bare-hash normal tx so it doesn't appear as a
+            const isReceived = parsed.direction === "received";
-            // duplicate with empty value; token transfers replace it.
+            const needsAmount = !existing.exactValue;
-            txsByHash.delete(parsed.hash);
+            if (isReceived || needsAmount) {
+                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
+            // contract they called), not the token transfer's from/to
+            // which may be a router or Permit2 contract.
+            continue;
         }
-        // Use composite key so multiple token transfers per tx are kept.
+        // Non-contract token transfers get their own entries.
         const ttKey = parsed.hash + ":" + (parsed.contractAddress || "");
         txsByHash.set(ttKey, parsed);
     }

src/shared/uniswap.js

@@ -359,9 +359,12 @@ 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;
-                        if (!minOutput) minOutput = s.amountOutMin;
+                        // Always update output: in multi-step swaps (V3 → V4),
+                        // the last swap step determines the final output token
+                        // and minimum received amount.
+                        outputToken = s.tokenOut;
+                        minOutput = s.amountOutMin;
                     }
                 }
 
@@ -369,9 +372,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;
-                        if (!minOutput) minOutput = s.amountOutMin;
+                        outputToken = s.tokenOut;
+                        minOutput = s.amountOutMin;
                     }
                 }
 
@@ -388,12 +391,11 @@ 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;
-                        if (!minOutput && v4.amountOutMin)
+                        // Always update output: last swap step wins
-                            minOutput = v4.amountOutMin;
+                        if (v4.tokenOut) outputToken = v4.tokenOut;
+                        if (v4.amountOutMin) minOutput = v4.amountOutMin;
                     }
                 }