Show ETH price, split headline into ETH balance and total USD
Some checks failed
check / check (push) Has been cancelled

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.
This commit is contained in:
2026-02-26 15:58:39 +07:00
parent ba54f412d2
commit 49dfd79d73
2 changed files with 27 additions and 6 deletions

View File

@@ -172,11 +172,12 @@
<!-- ============ MAIN VIEW: ALL WALLETS & ADDRESSES ============ --> <!-- ============ MAIN VIEW: ALL WALLETS & ADDRESSES ============ -->
<div id="view-main" class="view hidden"> <div id="view-main" class="view hidden">
<!-- total portfolio value --> <!-- active address headline -->
<div <div
id="total-value" id="total-value"
class="text-2xl font-bold mb-2 min-h-[2rem]" class="text-2xl font-bold min-h-[2rem]"
></div> ></div>
<div id="total-value-sub" class="text-xs text-muted mb-2"></div>
<!-- active address display --> <!-- active address display -->
<div <div
@@ -185,7 +186,7 @@
></div> ></div>
<!-- quick actions for active address --> <!-- quick actions for active address -->
<div class="flex gap-2 mb-3"> <div class="flex gap-2 mb-2">
<button <button
id="btn-main-send" id="btn-main-send"
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer flex-1" class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer flex-1"
@@ -200,6 +201,12 @@
</button> </button>
</div> </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 --> <!-- wallet list -->
<div id="wallet-list"></div> <div id="wallet-list"></div>
</div> </div>

View File

@@ -27,17 +27,31 @@ function findActiveAddr() {
function renderTotalValue() { function renderTotalValue() {
const el = $("total-value"); const el = $("total-value");
const subEl = $("total-value-sub");
const priceEl = $("eth-price-display");
if (!el) return; if (!el) return;
const ethPrice = getPrice("ETH");
if (priceEl) {
priceEl.textContent = ethPrice ? "ETH " + formatUsd(ethPrice) : "";
}
const addr = findActiveAddr(); const addr = findActiveAddr();
if (!addr) { if (!addr) {
el.textContent = ""; el.textContent = "";
if (subEl) subEl.textContent = "";
return; return;
} }
const ethBal = parseFloat(addr.balance || "0"); const ethBal = parseFloat(addr.balance || "0");
const ethStr = ethBal.toFixed(4) + " ETH"; const ethStr = ethBal.toFixed(4) + " ETH";
const usd = getAddressValueUsd(addr); const ethUsd = ethPrice ? " (" + formatUsd(ethBal * ethPrice) + ")" : "";
const usdStr = usd !== null ? " (" + formatUsd(usd) + " USD)" : ""; el.textContent = ethStr + ethUsd;
el.textContent = ethStr + usdStr;
if (subEl) {
const totalUsd = getAddressValueUsd(addr);
subEl.textContent =
totalUsd !== null ? "Total: " + formatUsd(totalUsd) : "";
}
} }
const EXT_ICON = const EXT_ICON =