93 lines
3.0 KiB
TypeScript
93 lines
3.0 KiB
TypeScript
import {
|
|
fetchBlocks,
|
|
fetchTransactions,
|
|
fetchReceipts,
|
|
} from "../lib/mockData";
|
|
|
|
export const overviewTitle = "Network Overview";
|
|
|
|
export function renderOverviewPage(): string {
|
|
return `
|
|
<section class="overview">
|
|
<p class="lead">High-level summaries of recent blocks, transactions, and receipts will appear here.</p>
|
|
<div class="overview__grid">
|
|
<article class="card">
|
|
<h3>Latest Block</h3>
|
|
<ul class="stat-list" id="overview-block-stats">
|
|
<li class="placeholder">Loading block data…</li>
|
|
</ul>
|
|
</article>
|
|
<article class="card">
|
|
<h3>Recent Transactions</h3>
|
|
<ul class="stat-list" id="overview-transaction-stats">
|
|
<li class="placeholder">Loading transaction data…</li>
|
|
</ul>
|
|
</article>
|
|
<article class="card">
|
|
<h3>Receipt Metrics</h3>
|
|
<ul class="stat-list" id="overview-receipt-stats">
|
|
<li class="placeholder">Loading receipt data…</li>
|
|
</ul>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
`;
|
|
}
|
|
|
|
export async function initOverviewPage(): Promise<void> {
|
|
const [blocks, transactions, receipts] = await Promise.all([
|
|
fetchBlocks(),
|
|
fetchTransactions(),
|
|
fetchReceipts(),
|
|
]);
|
|
|
|
const blockStats = document.querySelector<HTMLUListElement>(
|
|
"#overview-block-stats",
|
|
);
|
|
if (blockStats) {
|
|
if (blocks.length > 0) {
|
|
const latest = blocks[0];
|
|
blockStats.innerHTML = `
|
|
<li><strong>Height:</strong> ${latest.height}</li>
|
|
<li><strong>Hash:</strong> ${latest.hash.slice(0, 18)}…</li>
|
|
<li><strong>Proposer:</strong> ${latest.proposer}</li>
|
|
<li><strong>Time:</strong> ${new Date(latest.timestamp).toLocaleString()}</li>
|
|
`;
|
|
} else {
|
|
blockStats.innerHTML = `<li class="placeholder">No mock block data available.</li>`;
|
|
}
|
|
}
|
|
|
|
const txStats = document.querySelector<HTMLUListElement>(
|
|
"#overview-transaction-stats",
|
|
);
|
|
if (txStats) {
|
|
if (transactions.length > 0) {
|
|
const succeeded = transactions.filter((tx) => tx.status === "Succeeded");
|
|
txStats.innerHTML = `
|
|
<li><strong>Total Mock Tx:</strong> ${transactions.length}</li>
|
|
<li><strong>Succeeded:</strong> ${succeeded.length}</li>
|
|
<li><strong>Pending:</strong> ${transactions.length - succeeded.length}</li>
|
|
`;
|
|
} else {
|
|
txStats.innerHTML = `<li class="placeholder">No mock transaction data available.</li>`;
|
|
}
|
|
}
|
|
|
|
const receiptStats = document.querySelector<HTMLUListElement>(
|
|
"#overview-receipt-stats",
|
|
);
|
|
if (receiptStats) {
|
|
if (receipts.length > 0) {
|
|
const attested = receipts.filter((receipt) => receipt.status === "Attested");
|
|
receiptStats.innerHTML = `
|
|
<li><strong>Total Receipts:</strong> ${receipts.length}</li>
|
|
<li><strong>Attested:</strong> ${attested.length}</li>
|
|
<li><strong>Pending:</strong> ${receipts.length - attested.length}</li>
|
|
`;
|
|
} else {
|
|
receiptStats.innerHTML = `<li class="placeholder">No mock receipt data available.</li>`;
|
|
}
|
|
}
|
|
}
|