Skip to content

Commit bcd9ef8

Browse files
TaprootFreakTaprootFreak
authored
Make UTXO table collapsible under Onchain BTC row (#156)
Hide UTXO details by default. Click on the Onchain BTC row to expand/collapse the UTXO breakdown. UTXOs are loaded lazily on first click.
1 parent 4fdd076 commit bcd9ef8

2 files changed

Lines changed: 38 additions & 15 deletions

File tree

‎src/assets/monitoring-btc.html‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,14 @@
7171
}
7272
.range-buttons button.active { color: #4fc3f7; border-color: #4fc3f7; }
7373
.range-buttons button:hover { color: #fff; }
74+
.expandable { cursor: pointer; }
75+
.expandable td:first-child::before { content: '\25B6 '; font-size: 9px; color: #555; }
76+
.expandable.open td:first-child::before { content: '\25BC '; }
77+
.utxo-details { display: none; }
78+
.utxo-details.open { display: table-row; }
79+
.utxo-details td { padding: 0; }
80+
.utxo-details table { margin: 0; font-size: 12px; background: #111; }
81+
.utxo-details th, .utxo-details td { padding: 4px 12px; border-bottom: 1px solid #1a1a1a; }
7482
</style>
7583
</head>
7684
<body>
@@ -98,13 +106,6 @@ <h2>BTC Balance History</h2>
98106
<div class="loading">Loading BTC monitoring data...</div>
99107
</div>
100108

101-
<div class="section">
102-
<h2>Bitcoin Core UTXOs (On-Chain Verification)</h2>
103-
<div id="utxo-content">
104-
<div class="loading">Loading UTXO data...</div>
105-
</div>
106-
</div>
107-
108109
<script src="/monitoring/chart.min.js"></script>
109110
<script src="/monitoring/chartjs-adapter-date-fns.min.js"></script>
110111
<script src="/monitoring/btc.js"></script>

‎src/assets/monitoring-btc.js‎

Lines changed: 30 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -92,15 +92,24 @@ function render(data) {
9292
html += '<tr><th>Source</th><th>Location</th><th class="number">BTC</th></tr>';
9393
for (var i = 0; i < holdings.length; i++) {
9494
var h = holdings[i];
95-
html += '<tr>';
96-
html += '<td>' + h.source + '</td>';
97-
if (h.explorer) {
98-
html += '<td><a href="' + h.explorer + '" target="_blank" rel="noopener">' + h.location + '</a></td>';
99-
} else {
95+
if (h.source === 'Onchain BTC') {
96+
html += '<tr class="expandable" id="onchain-row">';
97+
html += '<td>' + h.source + '</td>';
10098
html += '<td>' + h.location + '</td>';
99+
html += '<td class="number">' + fmtBtc(h.btc) + '</td>';
100+
html += '</tr>';
101+
html += '<tr class="utxo-details" id="utxo-row"><td colspan="3"><div id="utxo-content"><span class="loading">Loading UTXOs...</span></div></td></tr>';
102+
} else {
103+
html += '<tr>';
104+
html += '<td>' + h.source + '</td>';
105+
if (h.explorer) {
106+
html += '<td><a href="' + h.explorer + '" target="_blank" rel="noopener">' + h.location + '</a></td>';
107+
} else {
108+
html += '<td>' + h.location + '</td>';
109+
}
110+
html += '<td class="number">' + fmtBtc(h.btc) + '</td>';
111+
html += '</tr>';
101112
}
102-
html += '<td class="number">' + fmtBtc(h.btc) + '</td>';
103-
html += '</tr>';
104113
}
105114
html += '<tr class="total-row">';
106115
html += '<td>Total</td><td></td>';
@@ -124,6 +133,20 @@ function render(data) {
124133
html += '</div>';
125134

126135
content.innerHTML = html;
136+
137+
var onchainRow = document.getElementById('onchain-row');
138+
var utxoRow = document.getElementById('utxo-row');
139+
var utxosLoaded = false;
140+
if (onchainRow && utxoRow) {
141+
onchainRow.addEventListener('click', function () {
142+
onchainRow.classList.toggle('open');
143+
utxoRow.classList.toggle('open');
144+
if (!utxosLoaded) {
145+
utxosLoaded = true;
146+
loadUtxos();
147+
}
148+
});
149+
}
127150
}
128151

129152
var btcChart = null;
@@ -244,7 +267,6 @@ function renderUtxos(data) {
244267

245268
loadData();
246269
loadChart('24h');
247-
loadUtxos();
248270

249271
var rangeButtons = document.querySelectorAll('.range-buttons button[data-range]');
250272
for (var i = 0; i < rangeButtons.length; i++) {

0 commit comments

Comments
 (0)