diff --git a/templates/index.html b/templates/index.html index 360eb40..9263124 100644 --- a/templates/index.html +++ b/templates/index.html @@ -239,6 +239,68 @@ `; } + // Format block data nicely + function formatBlockData(block) { + if (!block || block.error) { + return `
Error: ${block.error || 'Invalid block data'}
`; + } + + const formatValue = (value) => (value / 1e6).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2}) + ' HNS'; + const formatTime = (timestamp) => new Date(timestamp * 1000).toLocaleString(); + + let html = ` +
+
+

Block Info

+
+
Hash: ${block.hash}
+
Height: ${block.height.toLocaleString()}
+
Confirmations: ${block.depth.toLocaleString()}
+
Time: ${formatTime(block.time)}
+
Transactions: ${block.txs.length.toLocaleString()}
+
Previous Block: ${block.prevBlock}
+
Merkle Root: ${block.merkleRoot}
+
Witness Root: ${block.witnessRoot}
+
Tree Root: ${block.treeRoot}
+
Version: ${block.version}
+
Bits: ${block.bits}
+
Nonce: ${block.nonce.toLocaleString()}
+
+
+ +
+

Transactions (${block.txs.length})

+
+ ${block.txs.map((tx, i) => { + const totalOutput = tx.outputs.reduce((sum, out) => sum + out.value, 0); + return ` +
+
+ #${i} + ${formatValue(totalOutput)} +
+
${tx.hash}
+
+ ${tx.inputs.length} input${tx.inputs.length !== 1 ? 's' : ''} + ${tx.outputs.length} output${tx.outputs.length !== 1 ? 's' : ''} + Fee: ${formatValue(tx.fee)} +
+
+ `; + }).join('')} +
+
+ +
+ + 
${JSON.stringify(block, null, 2)}
+
+
+ `; + + return html; + } + // Format transaction data nicely function formatTransactionData(tx) { if (!tx || tx.error) { @@ -378,7 +440,14 @@ } updateURL('block', blockId); const data = await apiCall(`block/${blockId}`); - displayResult('block-result', data); + + // Use formatted display instead of raw JSON + const resultElement = document.getElementById('block-result'); + if (data.error) { + resultElement.innerHTML = `
Error: ${data.error}
`; + } else { + resultElement.innerHTML = formatBlockData(data); + } } async function searchHeader() {