From 49dfd79d734b1b8c70c2d1af103ae8fd9a58cda6 Mon Sep 17 00:00:00 2001
From: sneak <sneak@sneak.berlin>
Date: Thu, 26 Feb 2026 15:58:39 +0700
Subject: [PATCH] Show ETH price, split headline into ETH balance and total USD

Headline shows active address ETH balance with ETH-only USD value
in parentheses. Small "Total:" subtitle below includes ETH + token
values. A centered well between Send/Receive buttons and the wallet
list displays the current ETH price in USD.
---
 src/popup/index.html    | 13 ++++++++++---
 src/popup/views/home.js | 20 +++++++++++++++++---
 2 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/src/popup/index.html b/src/popup/index.html
index 6201ee9..dfb693e 100644
--- a/src/popup/index.html
+++ b/src/popup/index.html
@@ -172,11 +172,12 @@
 
             <!-- ============ MAIN VIEW: ALL WALLETS & ADDRESSES ============ -->
             <div id="view-main" class="view hidden">
-                <!-- total portfolio value -->
+                <!-- active address headline -->
                 <div
                     id="total-value"
-                    class="text-2xl font-bold mb-2 min-h-[2rem]"
+                    class="text-2xl font-bold min-h-[2rem]"
                 ></div>
+                <div id="total-value-sub" class="text-xs text-muted mb-2"></div>
 
                 <!-- active address display -->
                 <div
@@ -185,7 +186,7 @@
                 ></div>
 
                 <!-- quick actions for active address -->
-                <div class="flex gap-2 mb-3">
+                <div class="flex gap-2 mb-2">
                     <button
                         id="btn-main-send"
                         class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer flex-1"
@@ -200,6 +201,12 @@
                     </button>
                 </div>
 
+                <!-- ETH price -->
+                <div
+                    id="eth-price-display"
+                    class="bg-well text-center font-bold text-xs p-1 mx-1 mb-3"
+                ></div>
+
                 <!-- wallet list -->
                 <div id="wallet-list"></div>
             </div>
diff --git a/src/popup/views/home.js b/src/popup/views/home.js
index c456832..55a066c 100644
--- a/src/popup/views/home.js
+++ b/src/popup/views/home.js
@@ -27,17 +27,31 @@ function findActiveAddr() {
 
 function renderTotalValue() {
     const el = $("total-value");
+    const subEl = $("total-value-sub");
+    const priceEl = $("eth-price-display");
     if (!el) return;
+
+    const ethPrice = getPrice("ETH");
+    if (priceEl) {
+        priceEl.textContent = ethPrice ? "ETH " + formatUsd(ethPrice) : "";
+    }
+
     const addr = findActiveAddr();
     if (!addr) {
         el.textContent = "";
+        if (subEl) subEl.textContent = "";
         return;
     }
     const ethBal = parseFloat(addr.balance || "0");
     const ethStr = ethBal.toFixed(4) + " ETH";
-    const usd = getAddressValueUsd(addr);
-    const usdStr = usd !== null ? " (" + formatUsd(usd) + " USD)" : "";
-    el.textContent = ethStr + usdStr;
+    const ethUsd = ethPrice ? " (" + formatUsd(ethBal * ethPrice) + ")" : "";
+    el.textContent = ethStr + ethUsd;
+
+    if (subEl) {
+        const totalUsd = getAddressValueUsd(addr);
+        subEl.textContent =
+            totalUsd !== null ? "Total: " + formatUsd(totalUsd) : "";
+    }
 }
 
 const EXT_ICON =