From d1e86a6c3d4c5498ae069bb233ad2de7f9256d9a Mon Sep 17 00:00:00 2001
From: Unheard0840 <conrad-rob@proton.me>
Date: Sat, 29 Aug 2026 12:50:58 +0000
Subject: [PATCH] Update web/index.html

Refine wallet dashboard and transaction view
---
 web/index.html | 1621 ++++++++++++++++++++++++++++--------------------
 1 file changed, 961 insertions(+), 660 deletions(-)
diff --git a/web/index.html b/web/index.html
index 918ccc7..d9b2c91 100644
--- a/web/index.html
+++ b/web/index.html
@@ -2,7 +2,10 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta
+    name="viewport"
+    content="width=device-width, initial-scale=1.0"
+  >
   <title>Munin Bitcoin</title>
 
   <style>
@@ -20,12 +23,11 @@
       --surface-hover: #263241;
       --border: #374151;
       --text: #f9fafb;
-      --text-secondary: #d1d5db;
+      --secondary: #d1d5db;
       --muted: #9ca3af;
       --accent: #93c5fd;
       --success: #22c55e;
       --danger: #ef4444;
-      --warning: #f59e0b;
     }
 
     * {
@@ -44,8 +46,7 @@
     }
 
     button,
-    input,
-    select {
+    input {
       font: inherit;
     }
 
@@ -77,6 +78,11 @@
       font-size: 20px;
     }
 
+    h3 {
+      margin-bottom: 0;
+      font-size: 15px;
+    }
+
     .subtitle {
       margin-bottom: 28px;
       color: var(--muted);
@@ -85,9 +91,9 @@
     .card {
       margin-bottom: 16px;
       padding: 22px;
-      background: var(--surface);
       border: 1px solid var(--border);
       border-radius: 14px;
+      background: var(--surface);
     }
 
     .hidden {
@@ -96,20 +102,22 @@
 
     .topbar {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
       justify-content: space-between;
       gap: 16px;
       margin-bottom: 24px;
     }
 
+    .topbar .subtitle {
+      margin-bottom: 0;
+    }
+
     .topbar-actions {
       display: flex;
-      align-items: center;
       gap: 8px;
     }
 
-    .icon-button,
-    .secondary-button {
+    .button {
       padding: 9px 13px;
       border: 1px solid var(--border);
       border-radius: 8px;
@@ -117,21 +125,19 @@
       color: var(--text);
     }
 
-    .icon-button:hover,
-    .secondary-button:hover {
+    .button:hover {
       background: var(--surface-hover);
     }
 
-    .primary-button {
-      padding: 10px 15px;
-      border: 0;
-      border-radius: 8px;
+    .button-primary {
+      border-color: transparent;
       background: var(--accent);
       color: #111827;
       font-weight: 650;
     }
 
-    .primary-button:hover {
+    .button-primary:hover {
+      background: var(--accent);
       opacity: 0.9;
     }
 
@@ -143,19 +149,19 @@
     }
 
     .status-card {
-      padding: 16px;
-      background: var(--surface);
+      padding: 15px 16px;
       border: 1px solid var(--border);
-      border-radius: 12px;
+      border-radius: 11px;
+      background: var(--surface);
     }
 
-    .status-card-label {
-      margin-bottom: 8px;
+    .status-label {
+      margin-bottom: 7px;
       color: var(--muted);
-      font-size: 13px;
+      font-size: 12px;
     }
 
-    .status-card-value {
+    .status-value {
       display: flex;
       align-items: center;
       gap: 8px;
@@ -165,16 +171,15 @@
     .status-dot {
       width: 9px;
       height: 9px;
-      flex: 0 0 auto;
       border-radius: 50%;
       background: #6b7280;
     }
 
-    .status-dot.connected {
+    .status-dot.ok {
       background: var(--success);
     }
 
-    .status-dot.disconnected {
+    .status-dot.error {
       background: var(--danger);
     }
 
@@ -186,12 +191,6 @@
       margin-bottom: 14px;
     }
 
-    .section-header-right {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-    }
-
     .muted {
       color: var(--muted);
     }
@@ -206,6 +205,8 @@
       text-align: center;
     }
 
+    /* Wallets */
+
     .wallet {
       overflow: hidden;
       margin-bottom: 12px;
@@ -263,13 +264,13 @@
     }
 
     .wallet-stat {
-      min-width: 110px;
+      min-width: 115px;
     }
 
     .wallet-stat-label {
       margin-bottom: 3px;
       color: var(--muted);
-      font-size: 12px;
+      font-size: 11px;
     }
 
     .wallet-stat-value {
@@ -281,7 +282,7 @@
     }
 
     .wallet-chevron {
-      width: 22px;
+      width: 20px;
       color: var(--muted);
       text-align: center;
       font-size: 18px;
@@ -292,34 +293,34 @@
       border-top: 1px solid var(--border);
     }
 
-    .wallet-toolbar {
+    .wallet-meta {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 12px;
-      padding: 14px 0;
+      padding: 13px 0;
+      border-bottom: 1px solid var(--border);
     }
 
-    .wallet-toolbar-left {
+    .wallet-meta-left {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 12px;
+      color: var(--muted);
+      font-size: 12px;
+    }
+
+    /* Transactions */
+
+    .transactions-header {
       display: flex;
       align-items: center;
-      gap: 10px;
+      justify-content: space-between;
+      gap: 12px;
+      padding: 16px 0 10px;
     }
 
-    .small-button {
-      padding: 7px 10px;
-      border: 1px solid var(--border);
-      border-radius: 7px;
-      background: transparent;
-      color: var(--text-secondary);
-      font-size: 13px;
-    }
-
-    .small-button:hover {
-      background: var(--surface-hover);
-    }
-
-    .transactions {
+    .transactions-list {
       border-top: 1px solid var(--border);
     }
 
@@ -331,20 +332,20 @@
       border-bottom: 0;
     }
 
-    .transaction-button {
+    .transaction-row {
       display: grid;
       grid-template-columns: minmax(0, 1fr) auto auto;
       align-items: center;
       gap: 16px;
       width: 100%;
-      padding: 15px 0;
+      padding: 14px 0;
       border: 0;
       background: transparent;
       color: var(--text);
       text-align: left;
     }
 
-    .transaction-button:hover {
+    .transaction-row:hover {
       background: rgba(255, 255, 255, 0.02);
     }
 
@@ -372,34 +373,21 @@
       white-space: nowrap;
     }
 
-    .transaction-type {
+    .transaction-status {
       padding: 4px 8px;
       border: 1px solid var(--border);
       border-radius: 6px;
+      color: var(--secondary);
       font-size: 12px;
       white-space: nowrap;
     }
 
-    .transaction-type.received {
+    .transaction-status.confirmed {
       color: #86efac;
     }
 
-    .transaction-type.sent {
-      color: #fca5a5;
-    }
-
-    .transaction-amount {
-      min-width: 140px;
-      font-family:
-        ui-monospace,
-        SFMono-Regular,
-        Menlo,
-        Monaco,
-        Consolas,
-        monospace;
-      font-size: 13px;
-      text-align: right;
-      white-space: nowrap;
+    .transaction-status.pending {
+      color: #fcd34d;
     }
 
     .transaction-chevron {
@@ -437,7 +425,7 @@
       font-size: 13px;
     }
 
-    .detail-value.mono {
+    .mono {
       font-family:
         ui-monospace,
         SFMono-Regular,
@@ -459,20 +447,22 @@
       text-decoration: underline;
     }
 
+    /* UTXOs */
+
     .utxo-section {
       margin-top: 14px;
       border-top: 1px solid var(--border);
     }
 
     .utxo-list {
-      padding-top: 8px;
+      border-top: 1px solid var(--border);
     }
 
     .utxo {
       display: grid;
       grid-template-columns: minmax(0, 1fr) auto;
       gap: 16px;
-      padding: 12px 0;
+      padding: 11px 0;
       border-bottom: 1px solid var(--border);
     }
 
@@ -514,16 +504,14 @@
       white-space: nowrap;
     }
 
-    .settings-panel {
-      margin-top: 16px;
-    }
+    /* Settings */
 
     .settings-row {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 24px;
-      padding: 14px 0;
+      padding: 15px 0;
       border-bottom: 1px solid var(--border);
     }
 
@@ -556,7 +544,7 @@
 
     .unit-button {
       min-width: 64px;
-      padding: 7px 10px;
+      padding: 7px 11px;
       border: 0;
       border-radius: 6px;
       background: transparent;
@@ -569,38 +557,13 @@
       font-weight: 600;
     }
 
-    .service-details {
-      display: grid;
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-      gap: 12px;
-    }
-
-    .service-detail {
-      padding: 12px;
-      border: 1px solid var(--border);
-      border-radius: 9px;
-    }
-
-    .service-detail-label {
-      margin-bottom: 5px;
-      color: var(--muted);
-      font-size: 12px;
-    }
-
-    .service-detail-value {
-      overflow-wrap: anywhere;
-      font-size: 13px;
-    }
+    /* Login */
 
     .login {
       width: min(420px, 100%);
       margin: 80px auto;
     }
 
-    .login h1 {
-      margin-bottom: 8px;
-    }
-
     .login label {
       display: block;
       margin-bottom: 8px;
@@ -652,28 +615,19 @@
         gap: 12px;
       }
 
-      .wallet-stat {
-        min-width: 0;
-      }
-
-      .wallet-stat:nth-of-type(2),
-      .wallet-stat:nth-of-type(3) {
+      .wallet-stat:nth-of-type(2) {
         display: none;
       }
 
-      .transaction-button {
+      .transaction-row {
         grid-template-columns: minmax(0, 1fr) auto;
         gap: 10px;
       }
 
-      .transaction-type {
+      .transaction-status {
         display: none;
       }
 
-      .transaction-amount {
-        min-width: 0;
-      }
-
       .transaction-chevron {
         display: none;
       }
@@ -682,10 +636,6 @@
         grid-template-columns: 1fr;
       }
 
-      .service-details {
-        grid-template-columns: 1fr;
-      }
-
       .settings-row {
         align-items: flex-start;
         flex-direction: column;
@@ -697,12 +647,19 @@
 
 <body>
   <main>
+    <!-- Login -->
+
     <section id="login" class="card login">
       <h1>Munin Bitcoin</h1>
-      <p class="subtitle">Sign in to access your Bitcoin wallets.</p>
+
+      <p class="subtitle">
+        Sign in to access your Bitcoin wallets.
+      </p>
 
       <form id="login-form">
-        <label for="password">Admin password</label>
+        <label for="password">
+          Admin password
+        </label>
 
         <input
           id="password"
@@ -712,7 +669,10 @@
           required
         >
 
-        <button class="primary-button" type="submit">
+        <button
+          class="button button-primary"
+          type="submit"
+        >
           Sign in
         </button>
       </form>
@@ -720,17 +680,22 @@
       <p id="login-error" class="error"></p>
     </section>
 
+    <!-- Dashboard -->
+
     <section id="dashboard" class="hidden">
       <header class="topbar">
         <div>
           <h1>Munin Bitcoin</h1>
-          <p class="subtitle">Bitcoin watch-only monitoring</p>
+
+          <p class="subtitle">
+            Bitcoin watch-only monitoring
+          </p>
         </div>
 
         <div class="topbar-actions">
           <button
             id="settings-button"
-            class="icon-button"
+            class="button"
             type="button"
           >
             Settings
@@ -738,13 +703,15 @@
         </div>
       </header>
 
+      <!-- Service status -->
+
       <section class="status-grid">
         <div class="status-card">
-          <div class="status-card-label">
+          <div class="status-label">
             Munin service
           </div>
 
-          <div class="status-card-value">
+          <div class="status-value">
             <span
               id="service-dot"
               class="status-dot"
@@ -757,11 +724,11 @@
         </div>
 
         <div class="status-card">
-          <div class="status-card-label">
+          <div class="status-label">
             Fulcrum
           </div>
 
-          <div class="status-card-value">
+          <div class="status-value">
             <span
               id="fulcrum-dot"
               class="status-dot"
@@ -774,18 +741,16 @@
         </div>
       </section>
 
+      <!-- Wallets -->
+
       <section class="card">
         <div class="section-header">
-          <div>
-            <h2>Wallets</h2>
-          </div>
+          <h2>Wallets</h2>
 
-          <div class="section-header-right">
-            <span
-              id="wallet-count"
-              class="muted"
-            ></span>
-          </div>
+          <span
+            id="wallet-count"
+            class="muted"
+          ></span>
         </div>
 
         <div id="wallet-list">
@@ -797,16 +762,18 @@
         <p id="wallet-error" class="error"></p>
       </section>
 
+      <!-- Settings -->
+
       <section
         id="settings-panel"
-        class="card settings-panel hidden"
+        class="card hidden"
       >
         <div class="section-header">
           <h2>Settings</h2>
 
           <button
             id="close-settings"
-            class="secondary-button"
+            class="button"
             type="button"
           >
             Close
@@ -877,7 +844,7 @@
       </section>
 
       <footer class="footer">
-        <span id="last-refresh">
+        <span id="sync-age">
           Not synced
         </span>
       </footer>
@@ -885,31 +852,41 @@
   </main>
 
   <script>
-    const STORAGE_KEY = 'munin-bitcoin-balance-unit';
+    const BALANCE_UNIT_KEY =
+      'munin-bitcoin-balance-unit';
 
     let balanceUnit = loadBalanceUnit();
-    let addresses = [];
-    let transactionDetails = {};
-    let expandedWallets = new Set();
-    let expandedUtxos = new Set();
-    let expandedTransactions = new Set();
+    let wallets = [];
+
+    const expandedWallets = new Set();
+    const expandedUtxos = new Set();
+    const expandedTransactions = new Set();
+
+    const transactionCache = new Map();
+
     let lastSuccessfulSync = null;
 
     function loadBalanceUnit() {
-      const value = localStorage.getItem(STORAGE_KEY);
+      const value =
+        localStorage.getItem(BALANCE_UNIT_KEY);
 
-      if (value === 'sats') {
-        return 'sats';
-      }
-
-      return 'BTC';
+      return value === 'sats' ? 'sats' : 'BTC';
     }
 
-    function saveBalanceUnit(unit) {
+    function setBalanceUnit(unit) {
+      if (unit !== 'BTC' && unit !== 'sats') {
+        return;
+      }
+
       balanceUnit = unit;
-      localStorage.setItem(STORAGE_KEY, unit);
+
+      localStorage.setItem(
+        BALANCE_UNIT_KEY,
+        unit,
+      );
+
       updateUnitButtons();
-      renderWallets(addresses);
+      renderWallets();
     }
 
     function updateUnitButtons() {
@@ -924,33 +901,27 @@
     }
 
     function showLogin() {
-      document.getElementById('login').classList.remove('hidden');
-      document.getElementById('dashboard').classList.add('hidden');
-      document.getElementById('password').focus();
+      document
+        .getElementById('login')
+        .classList.remove('hidden');
+
+      document
+        .getElementById('dashboard')
+        .classList.add('hidden');
+
+      document
+        .getElementById('password')
+        .focus();
     }
 
     function showDashboard() {
-      document.getElementById('login').classList.add('hidden');
-      document.getElementById('dashboard').classList.remove('hidden');
-    }
+      document
+        .getElementById('login')
+        .classList.add('hidden');
 
-    async function login(password) {
-      const response = await fetch('/api/login', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        credentials: 'same-origin',
-        body: JSON.stringify({ password }),
-      });
-
-      if (!response.ok) {
-        throw new Error('Invalid password');
-      }
-
-      showDashboard();
-
-      await loadAll();
+      document
+        .getElementById('dashboard')
+        .classList.remove('hidden');
     }
 
     function escapeHtml(value) {
@@ -963,58 +934,54 @@
     }
 
     function formatSats(value) {
-      return Math.round(Number(value) || 0).toLocaleString(
-        'en-US',
-      );
+      return Math.round(
+        Number(value) || 0,
+      ).toLocaleString('en-US');
     }
 
     function formatBtc(value) {
-      return (Number(value || 0) / 100000000).toFixed(8);
+      return (
+        Number(value || 0) /
+        100000000
+      ).toFixed(8);
     }
 
-    function formatAmount(value) {
-      const sats = Math.round(Number(value) || 0);
+    function formatAmount(sats) {
+      const value =
+        Math.round(Number(sats) || 0);
 
       if (balanceUnit === 'sats') {
-        return `${formatSats(sats)} sats`;
+        return `${formatSats(value)} sats`;
       }
 
-      return `${formatBtc(sats)} BTC`;
-    }
-
-    function formatSignedAmount(value) {
-      const sats = Math.round(Number(value) || 0);
-      const sign = sats > 0 ? '+' : sats < 0 ? '−' : '';
-
-      if (balanceUnit === 'sats') {
-        return `${sign}${formatSats(Math.abs(sats))} sats`;
-      }
-
-      return `${sign}${formatBtc(Math.abs(sats))} BTC`;
+      return `${formatBtc(value)} BTC`;
     }
 
     function formatDate(timestamp) {
-      if (
-        timestamp === null ||
-        timestamp === undefined ||
-        !Number.isFinite(Number(timestamp))
-      ) {
+      const value =
+        Number(timestamp);
+
+      if (!Number.isFinite(value)) {
         return 'Unknown';
       }
 
-      const date = new Date(Number(timestamp) * 1000);
+      const date =
+        new Date(value * 1000);
 
       if (Number.isNaN(date.getTime())) {
         return 'Unknown';
       }
 
-      return date.toLocaleString(undefined, {
-        year: '2-digit',
-        month: '2-digit',
-        day: '2-digit',
-        hour: '2-digit',
-        minute: '2-digit',
-      });
+      return date.toLocaleString(
+        undefined,
+        {
+          year: '2-digit',
+          month: '2-digit',
+          day: '2-digit',
+          hour: '2-digit',
+          minute: '2-digit',
+        },
+      );
     }
 
     function formatSyncAge(date) {
@@ -1022,77 +989,44 @@
         return 'Not synced';
       }
 
-      const seconds = Math.max(
-        0,
-        Math.floor((Date.now() - date.getTime()) / 1000),
-      );
+      const seconds =
+        Math.max(
+          0,
+          Math.floor(
+            (Date.now() - date.getTime()) /
+              1000,
+          ),
+        );
 
       if (seconds < 60) {
         return 'Synced just now';
       }
 
-      const minutes = Math.floor(seconds / 60);
+      const minutes =
+        Math.floor(seconds / 60);
 
       if (minutes < 60) {
         return `Synced ${minutes} min ago`;
       }
 
-      const hours = Math.floor(minutes / 60);
+      const hours =
+        Math.floor(minutes / 60);
 
       if (hours < 24) {
         return `Synced ${hours} h ago`;
       }
 
-      const days = Math.floor(hours / 24);
+      const days =
+        Math.floor(hours / 24);
 
       return `Synced ${days} d ago`;
     }
 
-    function getLastActivity(address) {
-      if (!Array.isArray(address.history) || !address.history.length) {
-        return null;
-      }
-
-      let latest = null;
-
-      for (const item of address.history) {
-        const height = Number(item.height);
-
-        if (
-          latest === null ||
-          (Number.isFinite(height) &&
-            height > Number(latest.height))
-        ) {
-          latest = item;
-        }
-      }
-
-      return latest;
-    }
-
-    function getAddressBalance(address) {
-      const confirmed =
-        Number(address.confirmedBalance || 0);
-
-      const unconfirmed =
-        Number(address.unconfirmedBalance || 0);
-
-      return confirmed + unconfirmed;
-    }
-
-    function getWalletName(address) {
-      if (
-        typeof address.label === 'string' &&
-        address.label.trim()
-      ) {
-        return address.label.trim();
-      }
-
-      return 'Wallet';
-    }
-
     function shortenAddress(address) {
-      if (!address || address.length < 18) {
+      if (
+        typeof address !== 'string' ||
+        address.length < 20
+      ) {
         return address || '';
       }
 
@@ -1103,13 +1037,60 @@
       );
     }
 
-    function getTransactionForWallet(wallet, txid) {
-      const history = Array.isArray(wallet.history)
-        ? wallet.history
-        : [];
+    function getWalletName(wallet) {
+      if (
+        typeof wallet.label === 'string' &&
+        wallet.label.trim()
+      ) {
+        return wallet.label.trim();
+      }
 
-      return history.find(
-        (item) => item.tx_hash === txid,
+      return 'Wallet';
+    }
+
+    function getWalletBalance(wallet) {
+      return (
+        Number(wallet.confirmedBalance || 0) +
+        Number(wallet.unconfirmedBalance || 0)
+      );
+    }
+
+    function getLatestHistory(wallet) {
+      if (
+        !Array.isArray(wallet.history) ||
+        wallet.history.length === 0
+      ) {
+        return null;
+      }
+
+      return wallet.history.reduce(
+        (latest, item) => {
+          if (!latest) {
+            return item;
+          }
+
+          const latestHeight =
+            Number(latest.height);
+
+          const itemHeight =
+            Number(item.height);
+
+          if (
+            !Number.isFinite(latestHeight)
+          ) {
+            return item;
+          }
+
+          if (
+            Number.isFinite(itemHeight) &&
+            itemHeight > latestHeight
+          ) {
+            return item;
+          }
+
+          return latest;
+        },
+        null,
       );
     }
 
@@ -1118,68 +1099,155 @@
         return [];
       }
 
-      const transactions = new Map();
+      const transactions =
+        new Map();
 
       for (const item of wallet.history) {
-        if (!item || !item.tx_hash) {
+        if (
+          !item ||
+          typeof item.tx_hash !== 'string'
+        ) {
           continue;
         }
 
-        if (!transactions.has(item.tx_hash)) {
-          transactions.set(item.tx_hash, {
-            txid: item.tx_hash,
-            height: item.height ?? null,
-            timestamp: null,
-            amount: 0,
-          });
+        if (
+          !transactions.has(item.tx_hash)
+        ) {
+          transactions.set(
+            item.tx_hash,
+            {
+              txid: item.tx_hash,
+              height:
+                item.height ?? null,
+            },
+          );
+
+          continue;
         }
 
-        const transaction =
+        const existing =
           transactions.get(item.tx_hash);
 
-        transaction.height =
-          transaction.height === null &&
+        if (
+          existing.height === null &&
           item.height !== null &&
           item.height !== undefined
-            ? item.height
-            : transaction.height;
+        ) {
+          existing.height = item.height;
+        }
       }
 
-      return Array.from(transactions.values()).sort(
-        (a, b) => {
-          const aHeight =
-            a.height === null ? Number.MAX_SAFE_INTEGER : Number(a.height);
+      return Array.from(
+        transactions.values(),
+      ).sort((a, b) => {
+        const aHeight =
+          a.height === null
+            ? Number.MAX_SAFE_INTEGER
+            : Number(a.height);
 
-          const bHeight =
-            b.height === null ? Number.MAX_SAFE_INTEGER : Number(b.height);
+        const bHeight =
+          b.height === null
+            ? Number.MAX_SAFE_INTEGER
+            : Number(b.height);
 
-          return bHeight - aHeight;
-        },
+        return bHeight - aHeight;
+      });
+    }
+
+    function getTransactionCacheKey(
+      txid,
+    ) {
+      return txid;
+    }
+
+    function getTransactionFromCache(txid) {
+      return transactionCache.get(
+        getTransactionCacheKey(txid),
       );
     }
 
-    function transactionType(wallet, transaction) {
-      const historyItem = getTransactionForWallet(
-        wallet,
-        transaction.txid,
+    function getTransactionHistoryItem(
+      wallet,
+      txid,
+    ) {
+      if (!Array.isArray(wallet.history)) {
+        return null;
+      }
+
+      return (
+        wallet.history.find(
+          (item) =>
+            item &&
+            item.tx_hash === txid,
+        ) || null
       );
+    }
+
+    function getTransactionStatus(
+      wallet,
+      transaction,
+    ) {
+      const history =
+        getTransactionHistoryItem(
+          wallet,
+          transaction.txid,
+        );
 
       if (
-        historyItem &&
-        Number(historyItem.height) < 0
+        history &&
+        Number(history.height) < 0
       ) {
-        return 'Pending';
+        return {
+          label: 'Pending',
+          className: 'pending',
+        };
       }
 
-      return 'Transaction';
+      if (
+        transaction.height === null ||
+        transaction.height === undefined
+      ) {
+        return {
+          label: 'Pending',
+          className: 'pending',
+        };
+      }
+
+      return {
+        label: 'Confirmed',
+        className: 'confirmed',
+      };
     }
 
-    function renderWallets(wallets) {
+    function getTransactionDate(
+      transaction,
+    ) {
+      const detail =
+        getTransactionFromCache(
+          transaction.txid,
+        );
+
+      if (!detail) {
+        return null;
+      }
+
+      return (
+        detail.blocktime ||
+        detail.time ||
+        null
+      );
+    }
+
+    function renderWallets() {
       const container =
-        document.getElementById('wallet-list');
+        document.getElementById(
+          'wallet-list',
+        );
 
       const count =
-        document.getElementById('wallet-count');
+        document.getElementById(
+          'wallet-count',
+        );
 
       count.textContent =
         wallets.length === 1
@@ -1193,243 +1261,322 @@
         return;
       }
 
-      container.innerHTML = wallets
-        .map((wallet, index) => {
-          const walletId =
-            `wallet-${index}-${encodeURIComponent(wallet.address)}`;
-
-          const expanded =
-            expandedWallets.has(wallet.address);
-
-          const balance =
-            getAddressBalance(wallet);
-
-          const activity =
-            getLastActivity(wallet);
-
-          const activityText = activity
-            ? formatDate(
-                activity.timestamp ||
-                activity.time ||
-                null,
-              )
-            : 'No activity';
-
-          const errorText =
-            wallet.error
-              ? `<div class="error">${escapeHtml(wallet.error)}</div>`
-              : '';
-
-          return `
-            <article class="wallet">
-              <button
-                class="wallet-header"
-                type="button"
-                onclick="toggleWallet('${encodeURIComponent(wallet.address)}')"
-              >
-                <div class="wallet-name">
-                  <div class="wallet-title">
-                    ${escapeHtml(getWalletName(wallet))}
-                  </div>
-
-                  <div class="wallet-address">
-                    ${escapeHtml(shortenAddress(wallet.address))}
-                  </div>
-                </div>
-
-                <div class="wallet-stat">
-                  <div class="wallet-stat-label">
-                    Balance
-                  </div>
-
-                  <div class="wallet-stat-value wallet-balance">
-                    ${escapeHtml(formatAmount(balance))}
-                  </div>
-                </div>
-
-                <div class="wallet-stat">
-                  <div class="wallet-stat-label">
-                    Last activity
-                  </div>
-
-                  <div class="wallet-stat-value">
-                    ${escapeHtml(activityText)}
-                  </div>
-                </div>
-
-                <div class="wallet-chevron">
-                  ${expanded ? '⌄' : '›'}
-                </div>
-              </button>
-
-              ${
-                expanded
-                  ? renderWalletContent(wallet, walletId)
-                  : ''
-              }
-
-              ${errorText}
-            </article>
-          `;
-        })
-        .join('');
+      container.innerHTML =
+        wallets
+          .map(
+            (wallet) =>
+              renderWallet(wallet),
+          )
+          .join('');
     }
 
-    function renderWalletContent(wallet, walletId) {
-      const transactions =
-        getWalletTransactions(wallet);
+    function renderWallet(wallet) {
+      const address =
+        wallet.address;
 
+      const expanded =
+        expandedWallets.has(address);
+
+      const balance =
+        getWalletBalance(wallet);
+
+      const latest =
+        getLatestHistory(wallet);
+
+      const transactionCount =
+        getWalletTransactions(wallet)
+          .length;
+
+      const lastActivity =
+        getTransactionDateForLatest(
+          wallet,
+          latest,
+        );
+
+      const lastActivityText =
+        lastActivity
+          ? formatDate(lastActivity)
+          : latest
+            ? `Block ${latest.height}`
+            : 'No activity';
+
+      const syncText =
+        lastSuccessfulSync
+          ? formatSyncAge(
+              lastSuccessfulSync,
+            )
+          : 'Not synced';
+
+      return `
+        <article class="wallet">
+          <button
+            class="wallet-header"
+            type="button"
+            onclick="toggleWallet('${encodeURIComponent(address)}')"
+          >
+            <div class="wallet-name">
+              <div class="wallet-title">
+                ${escapeHtml(
+                  getWalletName(wallet),
+                )}
+              </div>
+
+              <div class="wallet-address">
+                ${escapeHtml(
+                  shortenAddress(address),
+                )}
+              </div>
+            </div>
+
+            <div class="wallet-stat">
+              <div class="wallet-stat-label">
+                Balance
+              </div>
+
+              <div class="wallet-stat-value wallet-balance">
+                ${escapeHtml(
+                  formatAmount(balance),
+                )}
+              </div>
+            </div>
+
+            <div class="wallet-stat">
+              <div class="wallet-stat-label">
+                Last activity
+              </div>
+
+              <div class="wallet-stat-value">
+                ${escapeHtml(
+                  lastActivityText,
+                )}
+              </div>
+            </div>
+
+            <div class="wallet-chevron">
+              ${expanded ? '⌄' : '›'}
+            </div>
+          </button>
+
+          ${
+            expanded
+              ? renderWalletContent(
+                  wallet,
+                  syncText,
+                  transactionCount,
+                )
+              : ''
+          }
+
+          ${
+            wallet.error
+              ? `
+                <div style="padding: 0 18px 16px;">
+                  <span class="error">
+                    ${escapeHtml(
+                      wallet.error,
+                    )}
+                  </span>
+                </div>
+              `
+              : ''
+          }
+        </article>
+      `;
+    }
+
+    function getTransactionDateForLatest(
+      wallet,
+      latest,
+    ) {
+      if (!latest) {
+        return null;
+      }
+
+      return getTransactionDate({
+        txid: latest.tx_hash,
+      });
+    }
+
+    function renderWalletContent(
+      wallet,
+      syncText,
+      transactionCount,
+    ) {
       const utxos =
         Array.isArray(wallet.utxos)
           ? wallet.utxos
           : [];
 
-      const utxoKey =
-        wallet.address;
+      const transactions =
+        getWalletTransactions(wallet);
 
       const utxosExpanded =
-        expandedUtxos.has(utxoKey);
+        expandedUtxos.has(
+          wallet.address,
+        );
 
       return `
         <div class="wallet-content">
-          <div class="wallet-toolbar">
-            <div class="wallet-toolbar-left">
-              <span class="muted">
-                ${escapeHtml(formatSyncAge(lastSuccessfulSync))}
+          <div class="wallet-meta">
+            <div class="wallet-meta-left">
+              <span>
+                ${escapeHtml(syncText)}
+              </span>
+
+              <span>
+                ${transactionCount}
+                ${
+                  transactionCount === 1
+                    ? 'transaction'
+                    : 'transactions'
+                }
               </span>
             </div>
 
             <button
-              class="small-button"
+              class="button"
               type="button"
               onclick="event.stopPropagation(); toggleUtxos('${encodeURIComponent(wallet.address)}')"
             >
-              ${utxosExpanded ? 'Hide' : 'Show'} UTXOs
-              (${utxos.length})
+              ${
+                utxosExpanded
+                  ? 'Hide'
+                  : 'Show'
+              }
+              UTXOs (${utxos.length})
             </button>
           </div>
 
-          <div>
-            <div class="section-header">
-              <h3>Transactions</h3>
+          <div class="transactions-header">
+            <h3>Transactions</h3>
 
-              <span class="muted">
-                ${transactions.length}
-              </span>
-            </div>
-
-            ${
-              transactions.length
-                ? renderTransactions(wallet, transactions)
-                : '<div class="empty">No transactions found for this wallet.</div>'
-            }
+            <span class="muted">
+              ${transactions.length}
+            </span>
           </div>
 
+          ${
+            transactions.length
+              ? renderTransactions(
+                  wallet,
+                  transactions,
+                )
+              : `
+                <div class="empty">
+                  No transactions found for this wallet.
+                </div>
+              `
+          }
+
           ${
             utxosExpanded
-              ? renderUtxos(utxos, wallet.address)
+              ? renderUtxos(
+                  utxos,
+                )
               : ''
           }
         </div>
       `;
     }
 
-    function renderTransactions(wallet, transactions) {
+    function renderTransactions(
+      wallet,
+      transactions,
+    ) {
       return `
-        <div class="transactions">
+        <div class="transactions-list">
           ${transactions
-            .map((transaction) => {
-              const key =
-                `${wallet.address}:${transaction.txid}`;
-
-              const expanded =
-                expandedTransactions.has(key);
-
-              const historyItem =
-                getTransactionForWallet(
+            .map(
+              (transaction) =>
+                renderTransaction(
                   wallet,
-                  transaction.txid,
-                );
-
-              const isReceived =
-                historyItem &&
-                Number(historyItem.height) >= 0;
-
-              const type =
-                isReceived ? 'Received' : 'Pending';
-
-              return `
-                <div class="transaction">
-                  <button
-                    class="transaction-button"
-                    type="button"
-                    onclick="toggleTransaction(
-                      '${encodeURIComponent(wallet.address)}',
-                      '${encodeURIComponent(transaction.txid)}'
-                    )"
-                  >
-                    <div class="transaction-main">
-                      <div class="transaction-date">
-                        ${
-                          transaction.timestamp
-                            ? escapeHtml(
-                                formatDate(
-                                  transaction.timestamp,
-                                ),
-                              )
-                            : escapeHtml(
-                                transaction.height === null
-                                  ? 'Pending'
-                                  : `Block ${transaction.height}`,
-                              )
-                        }
-                      </div>
-
-                      <div class="transaction-id">
-                        ${escapeHtml(transaction.txid)}
-                      </div>
-                    </div>
-
-                    <span
-                      class="transaction-type ${
-                        isReceived
-                          ? 'received'
-                          : 'sent'
-                      }"
-                    >
-                      ${escapeHtml(type)}
-                    </span>
-
-                    <div class="transaction-amount">
-                      ${expanded ? '⌃' : '›'}
-                    </div>
-                  </button>
-
-                  ${
-                    expanded
-                      ? renderTransactionDetails(
-                          wallet,
-                          transaction,
-                        )
-                      : ''
-                  }
-                </div>
-              `;
-            })
+                  transaction,
+                ),
+            )
             .join('')}
         </div>
       `;
     }
 
-    function renderTransactionDetails(
+    function renderTransaction(
       wallet,
       transaction,
     ) {
       const key =
         `${wallet.address}:${transaction.txid}`;
 
+      const expanded =
+        expandedTransactions.has(key);
+
+      const status =
+        getTransactionStatus(
+          wallet,
+          transaction,
+        );
+
+      const timestamp =
+        getTransactionDate(
+          transaction,
+        );
+
+      const dateText =
+        timestamp
+          ? formatDate(timestamp)
+          : transaction.height === null ||
+              transaction.height === undefined
+            ? 'Pending'
+            : `Block ${transaction.height}`;
+
+      return `
+        <div class="transaction">
+          <button
+            class="transaction-row"
+            type="button"
+            onclick="toggleTransaction('${encodeURIComponent(wallet.address)}', '${encodeURIComponent(transaction.txid)}')"
+          >
+            <div class="transaction-main">
+              <div class="transaction-date">
+                ${escapeHtml(dateText)}
+              </div>
+
+              <div class="transaction-id">
+                ${escapeHtml(
+                  transaction.txid,
+                )}
+              </div>
+            </div>
+
+            <span
+              class="transaction-status ${status.className}"
+            >
+              ${escapeHtml(
+                status.label,
+              )}
+            </span>
+
+            <span class="transaction-chevron">
+              ${expanded ? '⌃' : '›'}
+            </span>
+          </button>
+
+          ${
+            expanded
+              ? renderTransactionDetails(
+                  transaction,
+                )
+              : ''
+          }
+        </div>
+      `;
+    }
+
+    function renderTransactionDetails(
+      transaction,
+    ) {
       const detail =
-        transactionDetails[transaction.txid];
+        getTransactionFromCache(
+          transaction.txid,
+        );
 
       if (!detail) {
         return `
@@ -1441,18 +1588,20 @@
         `;
       }
 
-      const outputValue =
-        Array.isArray(detail.vout)
-          ? detail.vout.reduce(
-              (sum, output) =>
-                sum +
-                Math.round(
-                  Number(output.value || 0) *
-                    100000000,
-                ),
-              0,
-            )
-          : 0;
+      const confirmations =
+        Number(
+          detail.confirmations || 0,
+        );
+
+      const block =
+        detail.blockhash
+          ? detail.blockhash
+          : 'Pending';
+
+      const time =
+        detail.blocktime ||
+        detail.time ||
+        null;
 
       return `
         <div class="transaction-details">
@@ -1463,7 +1612,10 @@
               </div>
 
               <div class="detail-value mono">
-                ${escapeHtml(detail.txid)}
+                ${escapeHtml(
+                  detail.txid ||
+                    transaction.txid,
+                )}
               </div>
             </div>
 
@@ -1474,9 +1626,9 @@
 
               <div class="detail-value">
                 ${escapeHtml(
-                  Number(
-                    detail.confirmations || 0,
-                  ).toLocaleString('en-US'),
+                  confirmations.toLocaleString(
+                    'en-US',
+                  ),
                 )}
               </div>
             </div>
@@ -1487,11 +1639,7 @@
               </div>
 
               <div class="detail-value mono">
-                ${
-                  detail.blockhash
-                    ? escapeHtml(detail.blockhash)
-                    : 'Pending'
-                }
+                ${escapeHtml(block)}
               </div>
             </div>
 
@@ -1502,11 +1650,7 @@
 
               <div class="detail-value">
                 ${escapeHtml(
-                  formatDate(
-                    detail.blocktime ||
-                    detail.time ||
-                    null,
-                  ),
+                  formatDate(time),
                 )}
               </div>
             </div>
@@ -1518,8 +1662,12 @@
 
               <div class="detail-value">
                 ${escapeHtml(
-                  `${detail.vsize ?? detail.size ?? 'Unknown'} vB`,
-                )}
+                  String(
+                    detail.vsize ??
+                      detail.size ??
+                      'Unknown',
+                  ),
+                )} vB
               </div>
             </div>
 
@@ -1530,7 +1678,11 @@
 
               <div class="detail-value">
                 ${escapeHtml(
-                  formatAmount(outputValue),
+                  String(
+                    Array.isArray(detail.vout)
+                      ? detail.vout.length
+                      : 0,
+                  ),
                 )}
               </div>
             </div>
@@ -1538,7 +1690,7 @@
 
           <a
             class="mempool-link"
-            href="https://mempool.space/tx/${encodeURIComponent(detail.txid)}"
+            href="https://mempool.space/tx/${encodeURIComponent(detail.txid || transaction.txid)}"
             target="_blank"
             rel="noopener noreferrer"
           >
@@ -1548,7 +1700,9 @@
       `;
     }
 
-    function renderUtxos(utxos, address) {
+    function renderUtxos(
+      utxos,
+    ) {
       return `
         <div class="utxo-section">
           <div class="section-header">
@@ -1563,86 +1717,121 @@
             ${
               utxos.length
                 ? utxos
-                    .map((utxo) => {
-                      const value =
-                        Math.round(
-                          Number(
-                            utxo.value || 0,
-                          ) *
-                            100000000,
-                        );
+                    .map(
+                      (utxo) => {
+                        const sats =
+                          Math.round(
+                            Number(
+                              utxo.value || 0,
+                            ) *
+                              100000000,
+                          );
 
-                      const outpoint =
-                        `${utxo.tx_hash}:${utxo.tx_pos}`;
+                        const outpoint =
+                          `${utxo.tx_hash}:${utxo.tx_pos}`;
 
-                      return `
-                        <div class="utxo">
-                          <div>
-                            <div class="utxo-outpoint">
-                              ${escapeHtml(outpoint)}
+                        const height =
+                          utxo.height;
+
+                        return `
+                          <div class="utxo">
+                            <div>
+                              <div class="utxo-outpoint">
+                                ${escapeHtml(
+                                  outpoint,
+                                )}
+                              </div>
+
+                              <div class="utxo-height">
+                                ${
+                                  height !==
+                                    undefined &&
+                                  height !== null &&
+                                  Number(height) > 0
+                                    ? `Block ${escapeHtml(height)}`
+                                    : 'Unconfirmed'
+                                }
+                              </div>
                             </div>
 
-                            <div class="utxo-height">
-                              ${
-                                utxo.height !== undefined
-                                  ? `Block ${escapeHtml(utxo.height)}`
-                                  : 'Unconfirmed'
-                              }
+                            <div class="utxo-value">
+                              ${escapeHtml(
+                                formatAmount(
+                                  sats,
+                                ),
+                              )}
                             </div>
                           </div>
-
-                          <div class="utxo-value">
-                            ${escapeHtml(
-                              formatAmount(value),
-                            )}
-                          </div>
-                        </div>
-                      `;
-                    })
+                        `;
+                      },
+                    )
                     .join('')
-                : '<div class="empty">No UTXOs.</div>'
+                : `
+                  <div class="empty">
+                    No UTXOs.
+                  </div>
+                `
             }
           </div>
         </div>
       `;
     }
 
-    async function toggleWallet(encodedAddress) {
+    async function toggleWallet(
+      encodedAddress,
+    ) {
       const address =
-        decodeURIComponent(encodedAddress);
-
-      if (expandedWallets.has(address)) {
-        expandedWallets.delete(address);
-      } else {
-        expandedWallets.add(address);
-      }
-
-      renderWallets(addresses);
-
-      const wallet =
-        addresses.find(
-          (item) => item.address === address,
+        decodeURIComponent(
+          encodedAddress,
         );
 
       if (
-        wallet &&
         expandedWallets.has(address)
       ) {
-        await loadTransactionDetails(wallet);
+        expandedWallets.delete(
+          address,
+        );
+
+        renderWallets();
+        return;
       }
+
+      expandedWallets.add(address);
+
+      renderWallets();
+
+      const wallet =
+        wallets.find(
+          (item) =>
+            item.address === address,
+        );
+
+      if (!wallet) {
+        return;
+      }
+
+      await loadWalletTransactionDetails(
+        wallet,
+      );
     }
 
-    async function toggleUtxos(encodedAddress) {
+    function toggleUtxos(
+      encodedAddress,
+    ) {
       const address =
-        decodeURIComponent(encodedAddress);
+        decodeURIComponent(
+          encodedAddress,
+        );
 
-      if (expandedUtxos.has(address)) {
+      if (
+        expandedUtxos.has(address)
+      ) {
         expandedUtxos.delete(address);
       } else {
         expandedUtxos.add(address);
       }
 
-      renderWallets(addresses);
+      renderWallets();
     }
 
     async function toggleTransaction(
@@ -1650,38 +1839,93 @@
       encodedTxid,
     ) {
       const address =
-        decodeURIComponent(encodedAddress);
+        decodeURIComponent(
+          encodedAddress,
+        );
 
       const txid =
-        decodeURIComponent(encodedTxid);
+        decodeURIComponent(
+          encodedTxid,
+        );
 
       const key =
         `${address}:${txid}`;
 
-      if (expandedTransactions.has(key)) {
-        expandedTransactions.delete(key);
-        renderWallets(addresses);
+      if (
+        expandedTransactions.has(key)
+      ) {
+        expandedTransactions.delete(
+          key,
+        );
+
+        renderWallets();
         return;
       }
 
       expandedTransactions.add(key);
-      renderWallets(addresses);
 
-      if (!transactionDetails[txid]) {
-        await loadTransaction(txid);
+      renderWallets();
+
+      await loadTransaction(txid);
+    }
+
+    async function loadWalletTransactionDetails(
+      wallet,
+    ) {
+      const transactions =
+        getWalletTransactions(wallet);
+
+      /*
+       * Only the latest transaction is loaded
+       * immediately. The remaining transactions
+       * are fetched when the user opens them.
+       *
+       * This keeps a wallet with many transactions
+       * from creating dozens of Fulcrum requests
+       * just by opening it.
+       */
+
+      if (!transactions.length) {
+        return;
+      }
+
+      const latest =
+        transactions[0];
+
+      if (
+        !getTransactionFromCache(
+          latest.txid,
+        )
+      ) {
+        await loadTransaction(
+          latest.txid,
+        );
       }
     }
 
-    async function loadTransaction(txid) {
-      try {
-        const response = await fetch(
-          `/api/transactions/${encodeURIComponent(txid)}`,
-          {
-            credentials: 'same-origin',
-          },
-        );
+    async function loadTransaction(
+      txid,
+    ) {
+      if (
+        getTransactionFromCache(txid)
+      ) {
+        renderWallets();
+        return;
+      }
 
-        if (response.status === 401) {
+      try {
+        const response =
+          await fetch(
+            `/api/transactions/${encodeURIComponent(txid)}`,
+            {
+              credentials:
+                'same-origin',
+            },
+          );
+
+        if (
+          response.status === 401
+        ) {
           showLogin();
           return;
         }
@@ -1695,9 +1939,12 @@
         const transaction =
           await response.json();
 
-        transactionDetails[txid] = transaction;
+        transactionCache.set(
+          txid,
+          transaction,
+        );
 
-        renderWallets(addresses);
+        renderWallets();
       } catch (error) {
         console.error(
           'Failed to load transaction:',
@@ -1706,31 +1953,20 @@
       }
     }
 
-    async function loadTransactionDetails(wallet) {
-      const transactions =
-        getWalletTransactions(wallet);
-
-      for (const transaction of transactions) {
-        if (transactionDetails[transaction.txid]) {
-          continue;
-        }
-
-        await loadTransaction(
-          transaction.txid,
-        );
-      }
-    }
-
     async function loadStatus() {
       try {
-        const response = await fetch(
-          '/api/status',
-          {
-            credentials: 'same-origin',
-          },
-        );
+        const response =
+          await fetch(
+            '/api/status',
+            {
+              credentials:
+                'same-origin',
+            },
+          );
 
-        if (response.status === 401) {
+        if (
+          response.status === 401
+        ) {
           showLogin();
           return;
         }
@@ -1745,13 +1981,16 @@
           await response.json();
 
         const serviceRunning =
-          status.service === 'running';
+          status.service ===
+          'running';
 
         const fulcrum =
           status.fulcrum || {};
 
         const fulcrumConnected =
-          Boolean(fulcrum.connected);
+          Boolean(
+            fulcrum.connected,
+          );
 
         document.getElementById(
           'service-status',
@@ -1765,8 +2004,8 @@
         ).className =
           `status-dot ${
             serviceRunning
-              ? 'connected'
-              : 'disconnected'
+              ? 'ok'
+              : 'error'
           }`;
 
         document.getElementById(
@@ -1783,8 +2022,8 @@
         ).className =
           `status-dot ${
             fulcrumConnected
-              ? 'connected'
-              : 'disconnected'
+              ? 'ok'
+              : 'error'
           }`;
 
         document.getElementById(
@@ -1806,33 +2045,39 @@
 
         document.getElementById(
           'service-status',
-        ).textContent = 'Unavailable';
+        ).textContent =
+          'Unavailable';
 
         document.getElementById(
           'fulcrum-status',
-        ).textContent = 'Unavailable';
+        ).textContent =
+          'Unavailable';
 
         document.getElementById(
           'service-dot',
         ).className =
-          'status-dot disconnected';
+          'status-dot error';
 
         document.getElementById(
           'fulcrum-dot',
         ).className =
-          'status-dot disconnected';
+          'status-dot error';
       }
     }
 
-    async function loadAddresses() {
-      const response = await fetch(
-        '/api/addresses/data',
-        {
-          credentials: 'same-origin',
-        },
-      );
+    async function loadWallets() {
+      const response =
+        await fetch(
+          '/api/addresses/data',
+          {
+            credentials:
+              'same-origin',
+          },
+        );
 
-      if (response.status === 401) {
+      if (
+        response.status === 401
+      ) {
         showLogin();
         return;
       }
@@ -1846,19 +2091,28 @@
       const data =
         await response.json();
 
-      addresses =
-        Array.isArray(data.addresses)
+      wallets =
+        Array.isArray(
+          data.addresses,
+        )
           ? data.addresses
           : [];
 
       lastSuccessfulSync =
         new Date();
 
-      renderWallets(addresses);
+      renderWallets();
 
-      document.getElementById(
-        'last-refresh',
-      ).textContent =
+      updateSyncAge();
+    }
+
+    function updateSyncAge() {
+      const element =
+        document.getElementById(
+          'sync-age',
+        );
+
+      element.textContent =
         formatSyncAge(
           lastSuccessfulSync,
         );
@@ -1867,7 +2121,7 @@
     async function loadAll() {
       try {
         await loadStatus();
-        await loadAddresses();
+        await loadWallets();
       } catch (error) {
         console.error(
           'Failed to load Munin Bitcoin:',
@@ -1877,46 +2131,79 @@
         document.getElementById(
           'wallet-list',
         ).innerHTML =
-          '<div class="empty">Unable to retrieve wallet data.</div>';
+          `
+            <div class="empty">
+              Unable to retrieve wallet data.
+            </div>
+          `;
       }
     }
 
     document
-      .getElementById('login-form')
+      .getElementById(
+        'login-form',
+      )
       .addEventListener(
         'submit',
         async (event) => {
           event.preventDefault();
 
-          const passwordInput =
+          const input =
             document.getElementById(
               'password',
             );
 
-          const loginError =
+          const error =
             document.getElementById(
               'login-error',
             );
 
-          loginError.textContent = '';
+          error.textContent = '';
 
           try {
-            await login(
-              passwordInput.value,
-            );
+            const response =
+              await fetch(
+                '/api/login',
+                {
+                  method: 'POST',
+                  headers: {
+                    'Content-Type':
+                      'application/json',
+                  },
+                  credentials:
+                    'same-origin',
+                  body:
+                    JSON.stringify({
+                      password:
+                        input.value,
+                    }),
+                },
+              );
 
-            passwordInput.value = '';
+            if (!response.ok) {
+              throw new Error(
+                'Invalid password',
+              );
+            }
+
+            input.value = '';
+
+            showDashboard();
+
+            await loadAll();
           } catch {
-            loginError.textContent =
+            error.textContent =
               'Invalid password.';
 
-            passwordInput.select();
+            input.select();
           }
         },
       );
 
     document
-      .getElementById('settings-button')
+      .getElementById(
+        'settings-button',
+      )
       .addEventListener(
         'click',
         () => {
@@ -1924,12 +2211,16 @@
             .getElementById(
               'settings-panel',
             )
-            .classList.toggle('hidden');
+            .classList.toggle(
+              'hidden',
+            );
         },
       );
 
     document
-      .getElementById('close-settings')
+      .getElementById(
+        'close-settings',
+      )
       .addEventListener(
         'click',
         () => {
@@ -1937,17 +2228,21 @@
             .getElementById(
               'settings-panel',
             )
-            .classList.add('hidden');
+            .classList.add(
+              'hidden',
+            );
         },
       );
 
     document
-      .querySelectorAll('.unit-button')
+      .querySelectorAll(
+        '.unit-button',
+      )
       .forEach((button) => {
         button.addEventListener(
           'click',
           () => {
-            saveBalanceUnit(
+            setBalanceUnit(
               button.dataset.unit,
             );
           },
@@ -1955,13 +2250,19 @@
       });
 
     updateUnitButtons();
+
     loadStatus();
-    loadAddresses();
+    loadWallets();
 
     setInterval(
       loadAll,
       60000,
     );
+
+    setInterval(
+      updateSyncAge,
+      10000,
+    );
   </script>
 </body>
 </html>
\ No newline at end of file
