chore: initialize monorepo with project scaffolding, configs, and CI setup

apps/explorer-web/src/pages/overview.ts

@@ -0,0 +1,92 @@
+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>`;
+    }
+  }
+}