Update web/index.html
Add address and transaction dashboard
This commit is contained in:
+603
-31
@@ -19,7 +19,7 @@
|
||||
}
|
||||
|
||||
main {
|
||||
max-width: 760px;
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
padding: 48px 24px;
|
||||
}
|
||||
@@ -29,6 +29,16 @@
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0 0 20px;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0 0 12px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin: 0 0 32px;
|
||||
color: #9ca3af;
|
||||
@@ -100,6 +110,10 @@
|
||||
color: #fca5a5;
|
||||
}
|
||||
|
||||
.success {
|
||||
color: #86efac;
|
||||
}
|
||||
|
||||
.login {
|
||||
max-width: 420px;
|
||||
margin: 80px auto;
|
||||
@@ -136,6 +150,176 @@
|
||||
button:hover {
|
||||
background: #4b5563;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.section-header h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.address-card {
|
||||
background: #111827;
|
||||
border: 1px solid #374151;
|
||||
border-radius: 10px;
|
||||
padding: 18px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.address-card:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.address {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
font-size: 13px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.address-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.address-label {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.balance {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.balance small {
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.stat {
|
||||
background: #1f2937;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
display: block;
|
||||
color: #9ca3af;
|
||||
font-size: 12px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-weight: 600;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.transaction {
|
||||
background: #111827;
|
||||
border: 1px solid #374151;
|
||||
border-radius: 10px;
|
||||
padding: 16px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.transaction:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.transaction-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.txid {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
font-size: 12px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.transaction button {
|
||||
margin-top: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.transaction-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
color: #9ca3af;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.details {
|
||||
margin-top: 14px;
|
||||
padding-top: 14px;
|
||||
border-top: 1px solid #374151;
|
||||
}
|
||||
|
||||
.details pre {
|
||||
margin: 0;
|
||||
padding: 14px;
|
||||
overflow-x: auto;
|
||||
background: #030712;
|
||||
border-radius: 8px;
|
||||
color: #d1d5db;
|
||||
font-size: 12px;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.empty {
|
||||
color: #9ca3af;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
main {
|
||||
padding: 28px 16px;
|
||||
}
|
||||
|
||||
.row {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.value {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.address-header,
|
||||
.transaction-header {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.stats {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -162,7 +346,9 @@
|
||||
|
||||
<section id="dashboard" hidden>
|
||||
<h1>Munin Bitcoin</h1>
|
||||
<p class="subtitle">Bitcoin watch-only wallet monitoring and label management</p>
|
||||
<p class="subtitle">
|
||||
Bitcoin watch-only wallet monitoring and label management
|
||||
</p>
|
||||
|
||||
<section class="card">
|
||||
<div class="row">
|
||||
@@ -213,19 +399,95 @@
|
||||
<span id="last-scan" class="value muted">Never</span>
|
||||
</div>
|
||||
|
||||
<button type="button" onclick="loadStatus()">Refresh status</button>
|
||||
<button type="button" onclick="refreshDashboard()">
|
||||
Refresh
|
||||
</button>
|
||||
|
||||
<p id="error" class="error"></p>
|
||||
</section>
|
||||
|
||||
<section class="card">
|
||||
<div class="section-header">
|
||||
<h2>Watched addresses</h2>
|
||||
</div>
|
||||
|
||||
<div id="addresses">
|
||||
<p class="muted">Loading addresses...</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card">
|
||||
<div class="section-header">
|
||||
<h2>Transactions</h2>
|
||||
<span id="transaction-count" class="muted"></span>
|
||||
</div>
|
||||
|
||||
<div id="transaction-list">
|
||||
<p class="muted">Loading transactions...</p>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
let transactionDetails = {};
|
||||
|
||||
function setStatus(element, text, state) {
|
||||
element.className = `status ${state}`;
|
||||
element.querySelector('span:last-child').textContent = text;
|
||||
}
|
||||
|
||||
function formatSats(value) {
|
||||
const sats = Number(value || 0);
|
||||
|
||||
if (!Number.isFinite(sats)) {
|
||||
return '0 sats';
|
||||
}
|
||||
|
||||
return `${sats.toLocaleString()} sats`;
|
||||
}
|
||||
|
||||
function formatBtcFromSats(value) {
|
||||
const sats = Number(value || 0);
|
||||
|
||||
if (!Number.isFinite(sats)) {
|
||||
return '0 BTC';
|
||||
}
|
||||
|
||||
return `${(sats / 100000000).toFixed(8)} BTC`;
|
||||
}
|
||||
|
||||
function formatDate(timestamp) {
|
||||
if (!timestamp) {
|
||||
return 'Unknown date';
|
||||
}
|
||||
|
||||
const date = new Date(Number(timestamp) * 1000);
|
||||
|
||||
if (Number.isNaN(date.getTime())) {
|
||||
return 'Unknown date';
|
||||
}
|
||||
|
||||
return date.toLocaleString();
|
||||
}
|
||||
|
||||
function shortenTxid(txid) {
|
||||
if (!txid || txid.length < 20) {
|
||||
return txid || '';
|
||||
}
|
||||
|
||||
return `${txid.slice(0, 12)}…${txid.slice(-12)}`;
|
||||
}
|
||||
|
||||
function escapeHtml(value) {
|
||||
return String(value ?? '')
|
||||
.replaceAll('&', '&')
|
||||
.replaceAll('<', '<')
|
||||
.replaceAll('>', '>')
|
||||
.replaceAll('"', '"')
|
||||
.replaceAll("'", ''');
|
||||
}
|
||||
|
||||
async function showLogin() {
|
||||
document.getElementById('login').hidden = false;
|
||||
document.getElementById('dashboard').hidden = true;
|
||||
@@ -252,29 +514,23 @@
|
||||
}
|
||||
|
||||
await showDashboard();
|
||||
await loadStatus();
|
||||
await refreshDashboard();
|
||||
}
|
||||
|
||||
async function loadStatus() {
|
||||
const errorElement = document.getElementById('error');
|
||||
errorElement.textContent = '';
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/status', {
|
||||
credentials: 'same-origin',
|
||||
});
|
||||
|
||||
if (response.status === 401) {
|
||||
await showLogin();
|
||||
return;
|
||||
throw new Error('Authentication required');
|
||||
}
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}`);
|
||||
}
|
||||
|
||||
await showDashboard();
|
||||
|
||||
const status = await response.json();
|
||||
|
||||
setStatus(
|
||||
@@ -322,30 +578,327 @@
|
||||
|
||||
document.getElementById('last-scan').textContent =
|
||||
status.lastScan || 'Never';
|
||||
}
|
||||
|
||||
async function loadAddresses() {
|
||||
const response = await fetch('/api/addresses/data', {
|
||||
credentials: 'same-origin',
|
||||
});
|
||||
|
||||
if (response.status === 401) {
|
||||
await showLogin();
|
||||
throw new Error('Authentication required');
|
||||
}
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}`);
|
||||
}
|
||||
|
||||
const payload = await response.json();
|
||||
const addresses = Array.isArray(payload.addresses)
|
||||
? payload.addresses
|
||||
: [];
|
||||
|
||||
renderAddresses(addresses);
|
||||
|
||||
return addresses;
|
||||
}
|
||||
|
||||
function renderAddresses(addresses) {
|
||||
const container = document.getElementById('addresses');
|
||||
|
||||
if (!addresses.length) {
|
||||
container.innerHTML =
|
||||
'<p class="empty">No Bitcoin addresses are being watched.</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = addresses.map((entry) => {
|
||||
const label = entry.label
|
||||
? escapeHtml(entry.label)
|
||||
: 'No label';
|
||||
|
||||
const confirmed = entry.confirmedBalance;
|
||||
const unconfirmed = entry.unconfirmedBalance;
|
||||
|
||||
const error = entry.error
|
||||
? `<p class="error">${escapeHtml(entry.error)}</p>`
|
||||
: '';
|
||||
|
||||
const utxoCount = Array.isArray(entry.utxos)
|
||||
? entry.utxos.length
|
||||
: 0;
|
||||
|
||||
const historyCount = Array.isArray(entry.history)
|
||||
? entry.history.length
|
||||
: 0;
|
||||
|
||||
return `
|
||||
<div class="address-card">
|
||||
<div class="address-header">
|
||||
<div>
|
||||
<div class="address-label">${label}</div>
|
||||
<div class="address">${escapeHtml(entry.address)}</div>
|
||||
</div>
|
||||
|
||||
<div class="balance">
|
||||
${
|
||||
confirmed === null || confirmed === undefined
|
||||
? 'Unavailable'
|
||||
: formatBtcFromSats(confirmed)
|
||||
}
|
||||
<small>confirmed</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats">
|
||||
<div class="stat">
|
||||
<span class="stat-label">Unconfirmed</span>
|
||||
<span class="stat-value">
|
||||
${
|
||||
unconfirmed === null ||
|
||||
unconfirmed === undefined
|
||||
? 'Unavailable'
|
||||
: formatBtcFromSats(unconfirmed)
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="stat">
|
||||
<span class="stat-label">UTXOs</span>
|
||||
<span class="stat-value">${utxoCount}</span>
|
||||
</div>
|
||||
|
||||
<div class="stat">
|
||||
<span class="stat-label">History entries</span>
|
||||
<span class="stat-value">${historyCount}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
${error}
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
async function loadTransactions(addresses) {
|
||||
const transactions = new Map();
|
||||
|
||||
for (const address of addresses) {
|
||||
if (!Array.isArray(address.history)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
for (const item of address.history) {
|
||||
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,
|
||||
addresses: [],
|
||||
});
|
||||
}
|
||||
|
||||
const transaction = transactions.get(item.tx_hash);
|
||||
|
||||
if (!transaction.addresses.includes(address.address)) {
|
||||
transaction.addresses.push(address.address);
|
||||
}
|
||||
|
||||
if (
|
||||
transaction.height === null &&
|
||||
item.height !== undefined
|
||||
) {
|
||||
transaction.height = item.height;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const list = Array.from(transactions.values());
|
||||
|
||||
list.sort((a, b) => {
|
||||
const heightA =
|
||||
a.height === null || a.height === undefined
|
||||
? Number.MAX_SAFE_INTEGER
|
||||
: Number(a.height);
|
||||
|
||||
const heightB =
|
||||
b.height === null || b.height === undefined
|
||||
? Number.MAX_SAFE_INTEGER
|
||||
: Number(b.height);
|
||||
|
||||
return heightB - heightA;
|
||||
});
|
||||
|
||||
renderTransactions(list);
|
||||
|
||||
return list;
|
||||
}
|
||||
|
||||
function renderTransactions(transactions) {
|
||||
const container = document.getElementById('transaction-list');
|
||||
const count = document.getElementById('transaction-count');
|
||||
|
||||
count.textContent = `${transactions.length} found`;
|
||||
|
||||
if (!transactions.length) {
|
||||
container.innerHTML =
|
||||
'<p class="empty">No transactions found for watched addresses.</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = transactions.map((transaction) => {
|
||||
const txid = escapeHtml(transaction.txid);
|
||||
const height =
|
||||
transaction.height === null ||
|
||||
transaction.height === undefined
|
||||
? 'Unconfirmed'
|
||||
: `Block ${escapeHtml(transaction.height)}`;
|
||||
|
||||
return `
|
||||
<div class="transaction">
|
||||
<div class="transaction-header">
|
||||
<div class="txid">${txid}</div>
|
||||
<button
|
||||
type="button"
|
||||
onclick="toggleTransactionDetails('${encodeURIComponent(
|
||||
transaction.txid,
|
||||
)}')"
|
||||
>
|
||||
View details
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="transaction-meta">
|
||||
<span>${height}</span>
|
||||
<span>
|
||||
${transaction.addresses.length}
|
||||
watched address${transaction.addresses.length === 1 ? '' : 'es'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="details-${encodeURIComponent(transaction.txid)}"
|
||||
class="details"
|
||||
hidden
|
||||
>
|
||||
<p class="muted">Loading transaction...</p>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
async function toggleTransactionDetails(encodedTxid) {
|
||||
const txid = decodeURIComponent(encodedTxid);
|
||||
const container =
|
||||
document.getElementById(`details-${encodedTxid}`);
|
||||
|
||||
if (!container) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!container.hidden) {
|
||||
container.hidden = true;
|
||||
return;
|
||||
}
|
||||
|
||||
container.hidden = false;
|
||||
|
||||
if (transactionDetails[txid]) {
|
||||
renderTransactionDetails(container, transactionDetails[txid]);
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML =
|
||||
'<p class="muted">Loading transaction...</p>';
|
||||
|
||||
try {
|
||||
const response = await fetch(
|
||||
`/api/transactions/${encodeURIComponent(txid)}`,
|
||||
{
|
||||
credentials: 'same-origin',
|
||||
},
|
||||
);
|
||||
|
||||
if (response.status === 401) {
|
||||
await showLogin();
|
||||
return;
|
||||
}
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}`);
|
||||
}
|
||||
|
||||
const transaction = await response.json();
|
||||
|
||||
transactionDetails[txid] = transaction;
|
||||
|
||||
renderTransactionDetails(container, transaction);
|
||||
} catch (error) {
|
||||
setStatus(
|
||||
document.getElementById('service-status'),
|
||||
'Unavailable',
|
||||
'disconnected',
|
||||
);
|
||||
|
||||
setStatus(
|
||||
document.getElementById('fulcrum-status'),
|
||||
'Unavailable',
|
||||
'disconnected',
|
||||
);
|
||||
|
||||
document.getElementById('fulcrum-url').textContent = 'Unavailable';
|
||||
document.getElementById('blockchain-height').textContent = 'Unavailable';
|
||||
errorElement.textContent = 'Unable to retrieve service status.';
|
||||
container.innerHTML =
|
||||
`<p class="error">Unable to load transaction: ${escapeHtml(
|
||||
error.message,
|
||||
)}</p>`;
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('login-form').addEventListener('submit', async (event) => {
|
||||
function renderTransactionDetails(container, transaction) {
|
||||
const summary = {
|
||||
txid: transaction.txid,
|
||||
blockhash: transaction.blockhash,
|
||||
confirmations: transaction.confirmations,
|
||||
time: formatDate(transaction.time),
|
||||
blocktime: formatDate(transaction.blocktime),
|
||||
version: transaction.version,
|
||||
size: transaction.size,
|
||||
vsize: transaction.vsize,
|
||||
vin: transaction.vin,
|
||||
vout: transaction.vout,
|
||||
};
|
||||
|
||||
container.innerHTML = `
|
||||
<pre>${escapeHtml(
|
||||
JSON.stringify(summary, null, 2),
|
||||
)}</pre>
|
||||
`;
|
||||
}
|
||||
|
||||
async function refreshDashboard() {
|
||||
const errorElement = document.getElementById('error');
|
||||
errorElement.textContent = '';
|
||||
|
||||
try {
|
||||
await showDashboard();
|
||||
|
||||
await loadStatus();
|
||||
|
||||
const addresses = await loadAddresses();
|
||||
|
||||
await loadTransactions(addresses);
|
||||
} catch (error) {
|
||||
if (error.message === 'Authentication required') {
|
||||
return;
|
||||
}
|
||||
|
||||
errorElement.textContent =
|
||||
'Unable to retrieve dashboard data.';
|
||||
}
|
||||
}
|
||||
|
||||
document
|
||||
.getElementById('login-form')
|
||||
.addEventListener('submit', async (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
const passwordInput = document.getElementById('password');
|
||||
const loginError = document.getElementById('login-error');
|
||||
const passwordInput =
|
||||
document.getElementById('password');
|
||||
|
||||
const loginError =
|
||||
document.getElementById('login-error');
|
||||
|
||||
loginError.textContent = '';
|
||||
|
||||
@@ -358,8 +911,27 @@
|
||||
}
|
||||
});
|
||||
|
||||
loadStatus();
|
||||
setInterval(loadStatus, 10000);
|
||||
loadStatus()
|
||||
.then(async () => {
|
||||
await showDashboard();
|
||||
|
||||
const addresses = await loadAddresses();
|
||||
|
||||
await loadTransactions(addresses);
|
||||
})
|
||||
.catch((error) => {
|
||||
if (error.message !== 'Authentication required') {
|
||||
showLogin();
|
||||
}
|
||||
});
|
||||
|
||||
setInterval(() => {
|
||||
if (
|
||||
!document.getElementById('dashboard').hidden
|
||||
) {
|
||||
refreshDashboard();
|
||||
}
|
||||
}, 10000);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user