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

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

@@ -0,0 +1,68 @@
+import {
+  fetchTransactions,
+  type TransactionSummary,
+} from "../lib/mockData";
+
+export const transactionsTitle = "Transactions";
+
+export function renderTransactionsPage(): string {
+  return `
+    <section class="transactions">
+      <header class="section-header">
+        <h2>Recent Transactions</h2>
+        <p class="lead">Mock data is shown below until coordinator or node APIs are wired up.</p>
+      </header>
+      <table class="table transactions__table">
+        <thead>
+          <tr>
+            <th scope="col">Hash</th>
+            <th scope="col">Block</th>
+            <th scope="col">From</th>
+            <th scope="col">To</th>
+            <th scope="col">Value</th>
+            <th scope="col">Status</th>
+          </tr>
+        </thead>
+        <tbody id="transactions-table-body">
+          <tr>
+            <td class="placeholder" colspan="6">Loading transactions…</td>
+          </tr>
+        </tbody>
+      </table>
+    </section>
+  `;
+}
+
+export async function initTransactionsPage(): Promise<void> {
+  const tbody = document.querySelector<HTMLTableSectionElement>(
+    "#transactions-table-body",
+  );
+  if (!tbody) {
+    return;
+  }
+
+  const transactions = await fetchTransactions();
+  if (transactions.length === 0) {
+    tbody.innerHTML = `
+      <tr>
+        <td class="placeholder" colspan="6">No mock transactions available.</td>
+      </tr>
+    `;
+    return;
+  }
+
+  tbody.innerHTML = transactions.map(renderTransactionRow).join("");
+}
+
+function renderTransactionRow(tx: TransactionSummary): string {
+  return `
+    <tr>
+      <td><code>${tx.hash.slice(0, 18)}…</code></td>
+      <td>${tx.block}</td>
+      <td><code>${tx.from.slice(0, 12)}…</code></td>
+      <td><code>${tx.to.slice(0, 12)}…</code></td>
+      <td>${tx.value}</td>
+      <td>${tx.status}</td>
+    </tr>
+  `;
+}