Update web/index.html

Add BTC and sats display toggle with collapsible UTXOs

web/index.html

@@ -168,6 +168,34 @@
       margin: 0;
     }
 
+    .display-toggle {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 4px;
+      background: #111827;
+      border: 1px solid #374151;
+      border-radius: 8px;
+    }
+
+    .display-toggle button {
+      margin: 0;
+      padding: 7px 12px;
+      background: transparent;
+      color: #9ca3af;
+      border-radius: 6px;
+    }
+
+    .display-toggle button:hover {
+      background: #374151;
+      color: #f9fafb;
+    }
+
+    .display-toggle button.active {
+      background: #4b5563;
+      color: #f9fafb;
+    }
+
     .address-card {
       background: #111827;
       border: 1px solid #374151;
@@ -201,6 +229,7 @@
     .balance {
       font-size: 20px;
       font-weight: 700;
+      white-space: nowrap;
     }
 
     .balance small {
@@ -233,6 +262,56 @@
       word-break: break-word;
     }
 
+    .utxo-toggle {
+      width: 100%;
+      margin-top: 14px;
+      text-align: left;
+    }
+
+    .utxo-list {
+      margin-top: 12px;
+      padding-top: 12px;
+      border-top: 1px solid #374151;
+    }
+
+    .utxo {
+      padding: 12px 0;
+      border-bottom: 1px solid #374151;
+    }
+
+    .utxo:last-child {
+      border-bottom: 0;
+      padding-bottom: 0;
+    }
+
+    .utxo:first-child {
+      padding-top: 0;
+    }
+
+    .utxo-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      gap: 16px;
+    }
+
+    .utxo-txid {
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+      font-size: 12px;
+      word-break: break-all;
+    }
+
+    .utxo-index {
+      color: #9ca3af;
+      font-size: 12px;
+      margin-top: 4px;
+    }
+
+    .utxo-value {
+      font-weight: 600;
+      white-space: nowrap;
+    }
+
     .transaction {
       background: #111827;
       border: 1px solid #374151;
@@ -310,8 +389,14 @@
         text-align: left;
       }
 
+      .section-header {
+        align-items: flex-start;
+        flex-direction: column;
+      }
+
       .address-header,
-      .transaction-header {
+      .transaction-header,
+      .utxo-row {
         align-items: flex-start;
         flex-direction: column;
       }
@@ -409,6 +494,23 @@
       <section class="card">
         <div class="section-header">
           <h2>Watched addresses</h2>
+
+          <div class="display-toggle" aria-label="Bitcoin amount display">
+            <button
+              id="display-btc"
+              type="button"
+              onclick="setDisplayUnit('btc')"
+            >
+              BTC
+            </button>
+            <button
+              id="display-sats"
+              type="button"
+              onclick="setDisplayUnit('sats')"
+            >
+              sats
+            </button>
+          </div>
         </div>
 
         <div id="addresses">
@@ -431,12 +533,36 @@
 
   <script>
     let transactionDetails = {};
+    let displayUnit = 'btc';
+    let currentAddresses = [];
+    let currentTransactions = [];
 
     function setStatus(element, text, state) {
       element.className = `status ${state}`;
       element.querySelector('span:last-child').textContent = text;
     }
 
+    function setDisplayUnit(unit) {
+      if (unit !== 'btc' && unit !== 'sats') {
+        return;
+      }
+
+      displayUnit = unit;
+
+      document.getElementById('display-btc').classList.toggle(
+        'active',
+        unit === 'btc',
+      );
+
+      document.getElementById('display-sats').classList.toggle(
+        'active',
+        unit === 'sats',
+      );
+
+      renderAddresses(currentAddresses);
+      renderTransactions(currentTransactions);
+    }
+
     function formatSats(value) {
       const sats = Number(value || 0);
 
@@ -444,7 +570,7 @@
         return '0 sats';
       }
 
-      return `${sats.toLocaleString()} sats`;
+      return `${Math.round(sats).toLocaleString()} sats`;
     }
 
     function formatBtcFromSats(value) {
@@ -457,6 +583,14 @@
       return `${(sats / 100000000).toFixed(8)} BTC`;
     }
 
+    function formatAmount(value) {
+      if (displayUnit === 'sats') {
+        return formatSats(value);
+      }
+
+      return formatBtcFromSats(value);
+    }
+
     function formatDate(timestamp) {
       if (!timestamp) {
         return 'Unknown date';
@@ -595,10 +729,12 @@
       }
 
       const payload = await response.json();
+
       const addresses = Array.isArray(payload.addresses)
         ? payload.addresses
         : [];
 
+      currentAddresses = addresses;
       renderAddresses(addresses);
 
       return addresses;
@@ -613,7 +749,7 @@
         return;
       }
 
-      container.innerHTML = addresses.map((entry) => {
+      container.innerHTML = addresses.map((entry, index) => {
         const label = entry.label
           ? escapeHtml(entry.label)
           : 'No label';
@@ -625,14 +761,19 @@
           ? `<p class="error">${escapeHtml(entry.error)}</p>`
           : '';
 
-        const utxoCount = Array.isArray(entry.utxos)
+        const utxos = Array.isArray(entry.utxos)
-          ? entry.utxos.length
+          ? entry.utxos
-          : 0;
+          : [];
 
         const historyCount = Array.isArray(entry.history)
           ? entry.history.length
           : 0;
 
+        const utxoButtonLabel =
+          utxos.length === 1
+            ? 'Show UTXO (1)'
+            : `Show UTXOs (${utxos.length})`;
+
         return `
           <div class="address-card">
             <div class="address-header">
@@ -645,7 +786,7 @@
                 ${
                   confirmed === null || confirmed === undefined
                     ? 'Unavailable'
-                    : formatBtcFromSats(confirmed)
+                    : formatAmount(confirmed)
                 }
                 <small>confirmed</small>
               </div>
@@ -659,14 +800,14 @@
                     unconfirmed === null ||
                     unconfirmed === undefined
                       ? 'Unavailable'
-                      : formatBtcFromSats(unconfirmed)
+                      : formatAmount(unconfirmed)
                   }
                 </span>
               </div>
 
               <div class="stat">
                 <span class="stat-label">UTXOs</span>
-                <span class="stat-value">${utxoCount}</span>
+                <span class="stat-value">${utxos.length}</span>
               </div>
 
               <div class="stat">
@@ -675,12 +816,104 @@
               </div>
             </div>
 
+            ${
+              utxos.length
+                ? `
+                  <button
+                    type="button"
+                    class="utxo-toggle"
+                    onclick="toggleUtxos(${index})"
+                  >
+                    ${utxoButtonLabel}
+                  </button>
+
+                  <div
+                    id="utxos-${index}"
+                    class="utxo-list"
+                    hidden
+                  >
+                    ${renderUtxos(utxos)}
+                  </div>
+                `
+                : ''
+            }
+
             ${error}
           </div>
         `;
       }).join('');
     }
 
+    function renderUtxos(utxos) {
+      return utxos.map((utxo) => {
+        const txid = utxo.tx_hash || utxo.txid || '';
+        const index = utxo.tx_pos ?? utxo.vout ?? 0;
+        const value = utxo.value ?? 0;
+        const height = utxo.height;
+
+        return `
+          <div class="utxo">
+            <div class="utxo-row">
+              <div>
+                <div class="utxo-txid">
+                  ${escapeHtml(txid)}
+                </div>
+                <div class="utxo-index">
+                  Output ${escapeHtml(index)}
+                  ${
+                    height
+                      ? ` · Block ${escapeHtml(height)}`
+                      : ' · Unconfirmed'
+                  }
+                </div>
+              </div>
+
+              <div class="utxo-value">
+                ${formatAmount(value)}
+              </div>
+            </div>
+          </div>
+        `;
+      }).join('');
+    }
+
+    function toggleUtxos(index) {
+      const container = document.getElementById(`utxos-${index}`);
+
+      if (!container) {
+        return;
+      }
+
+      const button =
+        container.previousElementSibling;
+
+      const address = currentAddresses[index];
+
+      if (container.hidden) {
+        container.hidden = false;
+
+        const count = Array.isArray(address?.utxos)
+          ? address.utxos.length
+          : 0;
+
+        button.textContent =
+          count === 1
+            ? 'Hide UTXO (1)'
+            : `Hide UTXOs (${count})`;
+      } else {
+        container.hidden = true;
+
+        const count = Array.isArray(address?.utxos)
+          ? address.utxos.length
+          : 0;
+
+        button.textContent =
+          count === 1
+            ? 'Show UTXO (1)'
+            : `Show UTXOs (${count})`;
+      }
+    }
+
     async function loadTransactions(addresses) {
       const transactions = new Map();
 
@@ -733,6 +966,7 @@
         return heightB - heightA;
       });
 
+      currentTransactions = list;
       renderTransactions(list);
 
       return list;
@@ -752,6 +986,7 @@
 
       container.innerHTML = transactions.map((transaction) => {
         const txid = escapeHtml(transaction.txid);
+
         const height =
           transaction.height === null ||
           transaction.height === undefined
@@ -762,6 +997,7 @@
           <div class="transaction">
             <div class="transaction-header">
               <div class="txid">${txid}</div>
+
               <button
                 type="button"
                 onclick="toggleTransactionDetails('${encodeURIComponent(
@@ -794,6 +1030,7 @@
 
     async function toggleTransactionDetails(encodedTxid) {
       const txid = decodeURIComponent(encodedTxid);
+
       const container =
         document.getElementById(`details-${encodedTxid}`);
 
@@ -809,7 +1046,10 @@
       container.hidden = false;
 
       if (transactionDetails[txid]) {
-        renderTransactionDetails(container, transactionDetails[txid]);
+        renderTransactionDetails(
+          container,
+          transactionDetails[txid],
+        );
         return;
       }
 
@@ -837,7 +1077,10 @@
 
         transactionDetails[txid] = transaction;
 
-        renderTransactionDetails(container, transaction);
+        renderTransactionDetails(
+          container,
+          transaction,
+        );
       } catch (error) {
         container.innerHTML =
           `<p class="error">Unable to load transaction: ${escapeHtml(
@@ -868,7 +1111,9 @@
     }
 
     async function refreshDashboard() {
-      const errorElement = document.getElementById('error');
+      const errorElement =
+        document.getElementById('error');
+
       errorElement.textContent = '';
 
       try {
@@ -911,6 +1156,8 @@
         }
       });
 
+    setDisplayUnit('btc');
+
     loadStatus()
       .then(async () => {
         await showDashboard();