Unheard0840/munin-bitcoin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update web/index.html

Browse Source 
Add BTC and sats display toggle with collapsible UTXOs
This commit is contained in:
Unheard0840
2026-08-29 12:16:05 +00:00
parent 64e4026440
commit 4598cafb1f
1 changed files with 259 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/index.html
+259 -12
View File
@@ -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)
? entry.utxos.length
: 0;
const utxos = Array.isArray(entry.utxos)
? entry.utxos
: [];
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();