oib/aitbc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
oib
2025-09-27 06:05:25 +02:00
commit c1926136fb
171 changed files with 13708 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

158
apps/explorer-web/README.md Normal file
View File

@ -0,0 +1,158 @@
# Explorer Web
## Purpose & Scope
Static web explorer for the AITBC blockchain node, displaying blocks, transactions, and receipts as outlined in `docs/bootstrap/explorer_web.md`.
## Development Setup
- Install dependencies:
```bash
npm install
```
- Start the dev server (Vite):
```bash
npm run dev
```
- The explorer ships with mock data in `public/mock/` that powers the tables by default.
### Data Mode Toggle
- Configuration lives in `src/config.ts` and can be overridden with environment variables.
- Use `VITE_DATA_MODE` to choose between `mock` (default) and `live`.
- When switching to live data, set `VITE_COORDINATOR_API` to the coordinator base URL (e.g. `http://localhost:8000`).
- Example `.env` snippet:
```bash
VITE_DATA_MODE=live
VITE_COORDINATOR_API=https://coordinator.dev.internal
```
With live mode enabled, the SPA will request `/v1/<resource>` routes from the coordinator instead of the bundled mock JSON.
## Next Steps
- Build out responsive styling and navigation interactions.
- Extend the data layer to support coordinator authentication and pagination when live endpoints are ready.
- Document coordinator API assumptions once the backend contracts stabilize.
## Coordinator API Contracts (Draft)
- **Blocks** (`GET /v1/blocks?limit=&offset=`)
- Expected payload:
```json
{
"items": [
{
"height": 12045,
"hash": "0x...",
"timestamp": "2025-09-27T01:58:12Z",
"tx_count": 8,
"proposer": "miner-alpha"
}
],
"next_offset": 12040
}
```
- TODO: confirm pagination fields and proposer metadata.
- **Transactions** (`GET /v1/transactions?limit=&offset=`)
- Expected payload:
```json
{
"items": [
{
"hash": "0x...",
"block": 12045,
"from": "0x...",
"to": "0x...",
"value": "12.5",
"status": "Succeeded"
}
],
"next_offset": "0x..."
}
```
- TODO: finalize value units (AIT vs wei) and status enum.
- **Addresses** (`GET /v1/addresses/{address}`)
- Expected payload:
```json
{
"address": "0x...",
"balance": "1450.25",
"tx_count": 42,
"last_active": "2025-09-27T01:48:00Z",
"recent_transactions": ["0x..."]
}
```
- TODO: detail pagination for recent transactions and add receipt summary references.
- **Receipts** (`GET /v1/jobs/{job_id}/receipts`)
- Expected payload:
```json
{
"job_id": "job-0001",
"items": [
{
"receipt_id": "rcpt-123",
"miner": "miner-alpha",
"coordinator": "coordinator-001",
"issued_at": "2025-09-27T01:52:22Z",
"status": "Attested",
"payload": {
"miner_signature": "0x...",
"coordinator_signature": "0x..."
}
}
]
}
```
- TODO: confirm signature payload structure and include attestation metadata.
## Styling Guide
- **`public/css/base.css`**
- Defines global typography, color scheme, and utility classes (tables, placeholders, code tags).
- Use this file for cross-page primitives and reset/normalization rules.
- When adding new utilities (e.g., badges, alerts), document them in this section and keep naming consistent with the existing BEM-lite approach.
- **`public/css/layout.css`**
- Contains structural styles for the Explorer shell (header, footer, cards, forms, grids).
- Encapsulate component-specific classes with a predictable prefix, such as `.blocks__table`, `.addresses__input-group`, or `.receipts__controls`.
- Prefer utility classes from `base.css` when possible, and only introduce new layout classes when a component requires dedicated styling.
- **Adding New Components**
- Create semantic markup first in `src/pages/` or `src/components/`, using descriptive class names that map to the page or component (`.transactions__filter`, `.overview__chart`).
- Extend `layout.css` with matching selectors to style the new elements; keep related rules grouped together for readability.
- For reusable widgets across multiple pages, consider extracting shared styles into a dedicated section or introducing a new partial CSS file when the component becomes complex.
## Deployment Notes
- **Environment Variables**
- `VITE_DATA_MODE`: `mock` (default) or `live`.
- `VITE_COORDINATOR_API`: Base URL for coordinator API when `live` mode is enabled.
- Additional Vite variables can be added following the `VITE_*` naming convention.
- **Mock vs Live**
- In non-production environments, keep `VITE_DATA_MODE=mock` to serve the static JSON under `public/mock/` for quick demos.
- For staging/production deployments, set `VITE_DATA_MODE=live` and ensure the coordinator endpoint is reachable from the frontend origin; configure CORS accordingly on the backend.
- Consider serving mock JSON from a CDN or static bucket if you want deterministic demos while backend dependencies are under development.
- **Build & Deploy**
- Build command: `npm run build` (outputs to `dist/`).
- Preview locally with `npm run preview` before publishing.
- Deploy the `dist/` contents to your static host (e.g., Nginx, S3 + CloudFront, Vercel). Ensure environment variables are injected at build time or through runtime configuration mechanisms supported by your hosting provider.
## Error Handling (Live Mode)
- **Status Codes**
- `2xx`: Treat as success; map response bodies into the typed models in `src/lib/models.ts`.
- `4xx`: Surface actionable messages to the user (e.g., invalid job ID). For `404`, show “not found” states in the relevant page. For `429`, display a rate-limit notice and back off.
- `5xx`: Show a generic coordinator outage message and trigger retry logic.
- **Retry Strategy**
- Use an exponential backoff with jitter when retrying `5xx` or network failures (suggested base delay 500 ms, max 5 attempts).
- Do not retry on `4xx` except `429`; instead, display feedback.
- **Telemetry & Logging**
- Consider emitting console warnings or hooking into an analytics layer when retries occur, noting the endpoint and status code.
- Bubble critical errors via a shared notification component so users understand whether data is stale or unavailable.

15
apps/explorer-web/package.json Normal file
View File

@ -0,0 +1,15 @@
{
"name": "aitbc-explorer-web",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {},
"devDependencies": {
"typescript": "^5.4.0",
"vite": "^5.2.0"
}
}

82
apps/explorer-web/public/css/base.css Normal file
View File

@ -0,0 +1,82 @@
:root {
color-scheme: dark;
font-family: var(--font-base);
font-size: 16px;
line-height: 1.5;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
background-color: var(--color-bg);
color: var(--color-text-primary);
}
a {
color: var(--color-primary);
text-decoration: none;
}
a:hover,
a:focus {
text-decoration: underline;
}
p {
margin: 0 0 1rem;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0 0 0.75rem;
line-height: 1.2;
}
code {
font-family: var(--font-mono);
font-size: 0.95em;
background: var(--color-table-head);
padding: 0.125rem 0.375rem;
border-radius: var(--radius-sm);
}
.table {
width: 100%;
border-collapse: collapse;
margin: 1rem 0;
}
.table thead {
background: var(--color-table-head);
}
.table th,
.table td {
padding: 0.75rem;
text-align: left;
}
.table tbody tr:nth-child(even) {
background: var(--color-table-even);
}
.table tbody tr:hover {
background: var(--color-primary-hover);
}
.placeholder {
color: var(--color-placeholder);
font-style: italic;
}
.lead {
font-size: 1.05rem;
color: var(--color-text-secondary);
}

229
apps/explorer-web/public/css/layout.css Normal file
View File

@ -0,0 +1,229 @@
.site-header {
background: rgba(22, 27, 34, 0.95);
border-bottom: 1px solid rgba(125, 196, 255, 0.2);
position: sticky;
top: 0;
z-index: 1000;
}
.site-header__inner {
margin: 0 auto;
max-width: 1200px;
padding: 0.75rem 1.5rem;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem;
}
.site-header__brand {
font-weight: 600;
font-size: 1.15rem;
}
.site-header__title {
flex: 1 1 auto;
font-size: 1.25rem;
color: rgba(244, 246, 251, 0.92);
}
.site-header__controls {
display: flex;
align-items: center;
gap: 0.75rem;
}
.data-mode-toggle {
display: flex;
flex-direction: column;
gap: 0.25rem;
font-size: 0.85rem;
}
.data-mode-toggle select {
border-radius: var(--radius-sm);
border: 1px solid var(--color-border);
background: var(--color-surface);
color: inherit;
padding: 0.25rem 0.5rem;
}
.data-mode-toggle small {
color: var(--color-text-muted);
}
.site-header__nav {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
.site-header__nav a {
padding: 0.35rem 0.75rem;
border-radius: 999px;
transition: background 150ms ease;
outline: none;
}
.site-header__nav a:hover,
.site-header__nav a:focus {
background: rgba(125, 196, 255, 0.15);
}
.site-header__nav a:focus-visible {
box-shadow: 0 0 0 2px rgba(125, 196, 255, 0.7);
}
.page {
margin: 0 auto;
max-width: 1200px;
padding: 2rem 1.5rem 4rem;
}
@media (max-width: 768px) {
.site-header__inner {
justify-content: space-between;
}
.site-header__controls {
width: 100%;
justify-content: flex-start;
}
.site-header__nav {
width: 100%;
justify-content: space-between;
}
.site-header__nav a {
flex: 1 1 auto;
text-align: center;
}
}
.section-header {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-bottom: 1.5rem;
}
.addresses__table,
.blocks__table,
.transactions__table,
.receipts__table {
background: rgba(18, 22, 29, 0.85);
border-radius: 0.75rem;
overflow: hidden;
border: 1px solid rgba(125, 196, 255, 0.12);
}
.overview__grid {
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.card {
background: rgba(18, 22, 29, 0.85);
border: 1px solid rgba(125, 196, 255, 0.12);
border-radius: 0.75rem;
padding: 1.25rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.stat-list {
list-style: none;
margin: 0;
padding: 0;
}
.stat-list li + li {
margin-top: 0.35rem;
}
.addresses__search {
display: grid;
gap: 0.75rem;
margin-bottom: 1.5rem;
background: rgba(18, 22, 29, 0.7);
border-radius: 0.5rem;
padding: 1rem 1.25rem;
border: 1px solid rgba(125, 196, 255, 0.12);
}
.addresses__input-group {
display: flex;
gap: 0.75rem;
}
.addresses__input-group input,
.addresses__input-group button {
border-radius: 0.5rem;
border: 1px solid rgba(125, 196, 255, 0.25);
padding: 0.5rem 0.75rem;
background: rgba(12, 15, 20, 0.85);
color: inherit;
outline: none;
transition: border-color 150ms ease, box-shadow 150ms ease;
}
.addresses__input-group input:focus-visible {
border-color: rgba(125, 196, 255, 0.6);
box-shadow: 0 0 0 2px rgba(125, 196, 255, 0.3);
}
.addresses__input-group button {
cursor: not-allowed;
}
.receipts__controls {
display: grid;
gap: 0.75rem;
margin-bottom: 1.5rem;
background: rgba(18, 22, 29, 0.7);
border-radius: 0.5rem;
padding: 1rem 1.25rem;
border: 1px solid rgba(125, 196, 255, 0.12);
}
.receipts__input-group {
display: flex;
gap: 0.75rem;
}
.receipts__input-group input,
.receipts__input-group button {
border-radius: 0.5rem;
border: 1px solid rgba(125, 196, 255, 0.25);
padding: 0.5rem 0.75rem;
background: rgba(12, 15, 20, 0.85);
color: inherit;
outline: none;
transition: border-color 150ms ease, box-shadow 150ms ease;
}
.receipts__input-group input:focus-visible {
border-color: rgba(125, 196, 255, 0.6);
box-shadow: 0 0 0 2px rgba(125, 196, 255, 0.3);
}
.receipts__input-group button {
cursor: not-allowed;
}
.site-footer {
margin: 0;
border-top: 1px solid rgba(125, 196, 255, 0.2);
background: rgba(22, 27, 34, 0.95);
}
.site-footer__inner {
margin: 0 auto;
max-width: 1200px;
padding: 1.25rem 1.5rem;
color: rgba(244, 246, 251, 0.7);
font-size: 0.9rem;
}

38
apps/explorer-web/public/css/theme.css Normal file
View File

@ -0,0 +1,38 @@
:root {
color-scheme: dark;
--font-base: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-mono: "Fira Code", "Source Code Pro", Menlo, Consolas, monospace;
--color-bg: #0b0d10;
--color-surface: rgba(18, 22, 29, 0.85);
--color-surface-muted: rgba(18, 22, 29, 0.7);
--color-border: rgba(125, 196, 255, 0.12);
--color-border-strong: rgba(125, 196, 255, 0.2);
--color-text-primary: #f4f6fb;
--color-text-secondary: rgba(244, 246, 251, 0.7);
--color-text-muted: rgba(244, 246, 251, 0.6);
--color-primary: #7dc4ff;
--color-primary-hover: rgba(125, 196, 255, 0.15);
--color-focus-ring: rgba(125, 196, 255, 0.7);
--color-placeholder: rgba(244, 246, 251, 0.7);
--color-table-even: rgba(255, 255, 255, 0.02);
--color-table-head: rgba(255, 255, 255, 0.06);
--color-shadow-soft: rgba(0, 0, 0, 0.35);
--space-xs: 0.35rem;
--space-sm: 0.5rem;
--space-md: 0.75rem;
--space-lg: 1.25rem;
--space-xl: 2rem;
--radius-sm: 0.375rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
}
:root[data-mode="live"] {
--color-primary: #8ef9d0;
--color-primary-hover: rgba(142, 249, 208, 0.18);
--color-border: rgba(142, 249, 208, 0.12);
--color-border-strong: rgba(142, 249, 208, 0.24);
--color-focus-ring: rgba(142, 249, 208, 0.65);
}

14
apps/explorer-web/public/mock/addresses.json Normal file
View File

@ -0,0 +1,14 @@
[
{
"address": "0xfeedfacefeedfacefeedfacefeedfacefeedface",
"balance": "1450.25 AIT",
"txCount": 42,
"lastActive": "2025-09-27T01:48:00Z"
},
{
"address": "0xcafebabecafebabecafebabecafebabecafebabe",
"balance": "312.00 AIT",
"txCount": 9,
"lastActive": "2025-09-27T01:25:34Z"
}
]

23
apps/explorer-web/public/mock/blocks.json Normal file
View File

@ -0,0 +1,23 @@
[
{
"height": 12045,
"hash": "0x7a3f5bf5c3b8ed5d6f77a42b8ab9a421e91e23f4d2a3f6a1d4b5c6d7e8f90123",
"timestamp": "2025-09-27T01:58:12Z",
"txCount": 8,
"proposer": "miner-alpha"
},
{
"height": 12044,
"hash": "0x5dd4e7a2b88c56f4cbb8f6e21d332e2f1a765e8d9c0b12a34567890abcdef012",
"timestamp": "2025-09-27T01:56:43Z",
"txCount": 11,
"proposer": "miner-beta"
},
{
"height": 12043,
"hash": "0x1b9d2c3f4e5a67890b12c34d56e78f90a1b2c3d4e5f60718293a4b5c6d7e8f90",
"timestamp": "2025-09-27T01:54:16Z",
"txCount": 4,
"proposer": "miner-gamma"
}
]

18
apps/explorer-web/public/mock/receipts.json Normal file
View File

@ -0,0 +1,18 @@
[
{
"jobId": "job-0001",
"receiptId": "rcpt-123",
"miner": "miner-alpha",
"coordinator": "coordinator-001",
"issuedAt": "2025-09-27T01:52:22Z",
"status": "Attested"
},
{
"jobId": "job-0002",
"receiptId": "rcpt-124",
"miner": "miner-beta",
"coordinator": "coordinator-001",
"issuedAt": "2025-09-27T01:45:18Z",
"status": "Pending"
}
]

18
apps/explorer-web/public/mock/transactions.json Normal file
View File

@ -0,0 +1,18 @@
[
{
"hash": "0xabc1230000000000000000000000000000000000000000000000000000000001",
"block": 12045,
"from": "0xfeedfacefeedfacefeedfacefeedfacefeedface",
"to": "0xcafebabecafebabecafebabecafebabecafebabe",
"value": "12.5 AIT",
"status": "Succeeded"
},
{
"hash": "0xabc1230000000000000000000000000000000000000000000000000000000002",
"block": 12044,
"from": "0xdeadc0dedeadc0dedeadc0dedeadc0dedeadc0de",
"to": "0x8badf00d8badf00d8badf00d8badf00d8badf00d",
"value": "3.1 AIT",
"status": "Pending"
}
]

33
apps/explorer-web/src/components/dataModeToggle.js Normal file
View File

@ -0,0 +1,33 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.initDataModeToggle = initDataModeToggle;
var config_1 = require("../config");
var mockData_1 = require("../lib/mockData");
var LABELS = {
mock: "Mock Data",
live: "Live API",
};
function initDataModeToggle(onChange) {
var container = document.querySelector("[data-role='data-mode-toggle']");
if (!container) {
return;
}
container.innerHTML = renderControls((0, mockData_1.getDataMode)());
var select = container.querySelector("select[data-mode-select]");
if (!select) {
return;
}
select.value = (0, mockData_1.getDataMode)();
select.addEventListener("change", function (event) {
var value = event.target.value;
(0, mockData_1.setDataMode)(value);
document.documentElement.dataset.mode = value;
onChange();
});
}
function renderControls(mode) {
var options = Object.keys(LABELS)
.map(function (id) { return "<option value=\"".concat(id, "\" ").concat(id === mode ? "selected" : "", ">").concat(LABELS[id], "</option>"); })
.join("");
return "\n <label class=\"data-mode-toggle\">\n <span>Data Mode</span>\n <select data-mode-select>\n ".concat(options, "\n </select>\n <small>").concat(mode === "mock" ? "Static JSON samples" : "Coordinator API (".concat(config_1.CONFIG.apiBaseUrl, ")"), "</small>\n </label>\n ");
}

45
apps/explorer-web/src/components/dataModeToggle.ts Normal file
View File

@ -0,0 +1,45 @@
import { CONFIG, type DataMode } from "../config";
import { getDataMode, setDataMode } from "../lib/mockData";
const LABELS: Record<DataMode, string> = {
mock: "Mock Data",
live: "Live API",
};
export function initDataModeToggle(onChange: () => void): void {
const container = document.querySelector<HTMLDivElement>("[data-role='data-mode-toggle']");
if (!container) {
return;
}
container.innerHTML = renderControls(getDataMode());
const select = container.querySelector<HTMLSelectElement>("select[data-mode-select]");
if (!select) {
return;
}
select.value = getDataMode();
select.addEventListener("change", (event) => {
const value = (event.target as HTMLSelectElement).value as DataMode;
setDataMode(value);
document.documentElement.dataset.mode = value;
onChange();
});
}
function renderControls(mode: DataMode): string {
const options = (Object.keys(LABELS) as DataMode[])
.map((id) => `<option value="${id}" ${id === mode ? "selected" : ""}>${LABELS[id]}</option>`)
.join("");
return `
<label class="data-mode-toggle">
<span>Data Mode</span>
<select data-mode-select>
${options}
</select>
<small>${mode === "mock" ? "Static JSON samples" : `Coordinator API (${CONFIG.apiBaseUrl})`}</small>
</label>
`;
}

7
apps/explorer-web/src/components/siteFooter.js Normal file
View File

@ -0,0 +1,7 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.siteFooter = siteFooter;
function siteFooter() {
var year = new Date().getFullYear();
return "\n <footer class=\"site-footer\">\n <div class=\"site-footer__inner\">\n <p>&copy; ".concat(year, " AITBC Foundation. Explorer UI under active development.</p>\n </div>\n </footer>\n ");
}

10
apps/explorer-web/src/components/siteFooter.ts Normal file
View File

@ -0,0 +1,10 @@
export function siteFooter(): string {
const year = new Date().getFullYear();
return `
<footer class="site-footer">
<div class="site-footer__inner">
<p>&copy; ${year} AITBC Foundation. Explorer UI under active development.</p>
</div>
</footer>
`;
}

6
apps/explorer-web/src/components/siteHeader.js Normal file
View File

@ -0,0 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.siteHeader = siteHeader;
function siteHeader(title) {
return "\n <header class=\"site-header\">\n <div class=\"site-header__inner\">\n <a class=\"site-header__brand\" href=\"/\">AITBC Explorer</a>\n <h1 class=\"site-header__title\">".concat(title, "</h1>\n <div class=\"site-header__controls\">\n <div data-role=\"data-mode-toggle\"></div>\n </div>\n <nav class=\"site-header__nav\">\n <a href=\"/\">Overview</a>\n <a href=\"/blocks\">Blocks</a>\n <a href=\"/transactions\">Transactions</a>\n <a href=\"/addresses\">Addresses</a>\n <a href=\"/receipts\">Receipts</a>\n </nav>\n </div>\n </header>\n ");
}

20
apps/explorer-web/src/components/siteHeader.ts Normal file
View File

@ -0,0 +1,20 @@
export function siteHeader(title: string): string {
return `
<header class="site-header">
<div class="site-header__inner">
<a class="site-header__brand" href="/">AITBC Explorer</a>
<h1 class="site-header__title">${title}</h1>
<div class="site-header__controls">
<div data-role="data-mode-toggle"></div>
</div>
<nav class="site-header__nav">
<a href="/">Overview</a>
<a href="/blocks">Blocks</a>
<a href="/transactions">Transactions</a>
<a href="/addresses">Addresses</a>
<a href="/receipts">Receipts</a>
</nav>
</div>
</header>
`;
}

10
apps/explorer-web/src/config.js Normal file
View File

@ -0,0 +1,10 @@
"use strict";
var _a, _b, _c, _d;
Object.defineProperty(exports, "__esModule", { value: true });
exports.CONFIG = void 0;
exports.CONFIG = {
// Toggle between "mock" (static JSON under public/mock/) and "live" coordinator APIs.
dataMode: (_b = (_a = import.meta.env) === null || _a === void 0 ? void 0 : _a.VITE_DATA_MODE) !== null && _b !== void 0 ? _b : "mock",
mockBasePath: "/mock",
apiBaseUrl: (_d = (_c = import.meta.env) === null || _c === void 0 ? void 0 : _c.VITE_COORDINATOR_API) !== null && _d !== void 0 ? _d : "http://localhost:8000",
};

14
apps/explorer-web/src/config.ts Normal file
View File

@ -0,0 +1,14 @@
export type DataMode = "mock" | "live";
export interface ExplorerConfig {
dataMode: DataMode;
mockBasePath: string;
apiBaseUrl: string;
}
export const CONFIG: ExplorerConfig = {
// Toggle between "mock" (static JSON under public/mock/) and "live" coordinator APIs.
dataMode: (import.meta.env?.VITE_DATA_MODE as DataMode) ?? "mock",
mockBasePath: "/mock",
apiBaseUrl: import.meta.env?.VITE_COORDINATOR_API ?? "http://localhost:8000",
};

207
apps/explorer-web/src/lib/mockData.js Normal file
View File

@ -0,0 +1,207 @@
"use strict";
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator = (this && this.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (g && (g = 0, op[0] && (_ = 0)), _) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.getDataMode = getDataMode;
exports.setDataMode = setDataMode;
exports.fetchBlocks = fetchBlocks;
exports.fetchTransactions = fetchTransactions;
exports.fetchAddresses = fetchAddresses;
exports.fetchReceipts = fetchReceipts;
var config_1 = require("../config");
var currentMode = config_1.CONFIG.dataMode;
function getDataMode() {
return currentMode;
}
function setDataMode(mode) {
currentMode = mode;
}
function fetchBlocks() {
return __awaiter(this, void 0, void 0, function () {
var data, response, data, error_1;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
if (!(getDataMode() === "mock")) return [3 /*break*/, 2];
return [4 /*yield*/, fetchMock("blocks")];
case 1:
data = _a.sent();
return [2 /*return*/, data.items];
case 2:
_a.trys.push([2, 5, , 6]);
return [4 /*yield*/, fetch("".concat(config_1.CONFIG.apiBaseUrl, "/v1/blocks"))];
case 3:
response = _a.sent();
if (!response.ok) {
throw new Error("Failed to fetch blocks: ".concat(response.status));
}
return [4 /*yield*/, response.json()];
case 4:
data = (_a.sent());
return [2 /*return*/, data.items];
case 5:
error_1 = _a.sent();
console.warn("[Explorer] Failed to fetch live block data", error_1);
return [2 /*return*/, []];
case 6: return [2 /*return*/];
}
});
});
}
function fetchTransactions() {
return __awaiter(this, void 0, void 0, function () {
var data, response, data, error_2;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
if (!(getDataMode() === "mock")) return [3 /*break*/, 2];
return [4 /*yield*/, fetchMock("transactions")];
case 1:
data = _a.sent();
return [2 /*return*/, data.items];
case 2:
_a.trys.push([2, 5, , 6]);
return [4 /*yield*/, fetch("".concat(config_1.CONFIG.apiBaseUrl, "/v1/transactions"))];
case 3:
response = _a.sent();
if (!response.ok) {
throw new Error("Failed to fetch transactions: ".concat(response.status));
}
return [4 /*yield*/, response.json()];
case 4:
data = (_a.sent());
return [2 /*return*/, data.items];
case 5:
error_2 = _a.sent();
console.warn("[Explorer] Failed to fetch live transaction data", error_2);
return [2 /*return*/, []];
case 6: return [2 /*return*/];
}
});
});
}
function fetchAddresses() {
return __awaiter(this, void 0, void 0, function () {
var data, response, data, error_3;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
if (!(getDataMode() === "mock")) return [3 /*break*/, 2];
return [4 /*yield*/, fetchMock("addresses")];
case 1:
data = _a.sent();
return [2 /*return*/, Array.isArray(data) ? data : [data]];
case 2:
_a.trys.push([2, 5, , 6]);
return [4 /*yield*/, fetch("".concat(config_1.CONFIG.apiBaseUrl, "/v1/addresses"))];
case 3:
response = _a.sent();
if (!response.ok) {
throw new Error("Failed to fetch addresses: ".concat(response.status));
}
return [4 /*yield*/, response.json()];
case 4:
data = (_a.sent());
return [2 /*return*/, Array.isArray(data) ? data : data.items];
case 5:
error_3 = _a.sent();
console.warn("[Explorer] Failed to fetch live address data", error_3);
return [2 /*return*/, []];
case 6: return [2 /*return*/];
}
});
});
}
function fetchReceipts() {
return __awaiter(this, void 0, void 0, function () {
var data, response, data, error_4;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
if (!(getDataMode() === "mock")) return [3 /*break*/, 2];
return [4 /*yield*/, fetchMock("receipts")];
case 1:
data = _a.sent();
return [2 /*return*/, data.items];
case 2:
_a.trys.push([2, 5, , 6]);
return [4 /*yield*/, fetch("".concat(config_1.CONFIG.apiBaseUrl, "/v1/receipts"))];
case 3:
response = _a.sent();
if (!response.ok) {
throw new Error("Failed to fetch receipts: ".concat(response.status));
}
return [4 /*yield*/, response.json()];
case 4:
data = (_a.sent());
return [2 /*return*/, data.items];
case 5:
error_4 = _a.sent();
console.warn("[Explorer] Failed to fetch live receipt data", error_4);
return [2 /*return*/, []];
case 6: return [2 /*return*/];
}
});
});
}
function fetchMock(resource) {
return __awaiter(this, void 0, void 0, function () {
var url, response, error_5;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
url = "".concat(config_1.CONFIG.mockBasePath, "/").concat(resource, ".json");
_a.label = 1;
case 1:
_a.trys.push([1, 4, , 5]);
return [4 /*yield*/, fetch(url)];
case 2:
response = _a.sent();
if (!response.ok) {
throw new Error("Request failed with status ".concat(response.status));
}
return [4 /*yield*/, response.json()];
case 3: return [2 /*return*/, (_a.sent())];
case 4:
error_5 = _a.sent();
console.warn("[Explorer] Failed to fetch mock data from ".concat(url), error_5);
return [2 /*return*/, []];
case 5: return [2 /*return*/];
}
});
});
}

112
apps/explorer-web/src/lib/mockData.ts Normal file
View File

@ -0,0 +1,112 @@
import { CONFIG, type DataMode } from "../config";
import type {
BlockListResponse,
TransactionListResponse,
AddressDetailResponse,
ReceiptListResponse,
BlockSummary,
TransactionSummary,
AddressSummary,
ReceiptSummary,
} from "./models.ts";
let currentMode: DataMode = CONFIG.dataMode;
export function getDataMode(): DataMode {
return currentMode;
}
export function setDataMode(mode: DataMode): void {
currentMode = mode;
}
export async function fetchBlocks(): Promise<BlockSummary[]> {
if (getDataMode() === "mock") {
const data = await fetchMock<BlockListResponse>("blocks");
return data.items;
}
try {
const response = await fetch(`${CONFIG.apiBaseUrl}/v1/blocks`);
if (!response.ok) {
throw new Error(`Failed to fetch blocks: ${response.status}`);
}
const data = (await response.json()) as BlockListResponse;
return data.items;
} catch (error) {
console.warn("[Explorer] Failed to fetch live block data", error);
return [];
}
}
export async function fetchTransactions(): Promise<TransactionSummary[]> {
if (getDataMode() === "mock") {
const data = await fetchMock<TransactionListResponse>("transactions");
return data.items;
}
try {
const response = await fetch(`${CONFIG.apiBaseUrl}/v1/transactions`);
if (!response.ok) {
throw new Error(`Failed to fetch transactions: ${response.status}`);
}
const data = (await response.json()) as TransactionListResponse;
return data.items;
} catch (error) {
console.warn("[Explorer] Failed to fetch live transaction data", error);
return [];
}
}
export async function fetchAddresses(): Promise<AddressSummary[]> {
if (getDataMode() === "mock") {
const data = await fetchMock<AddressDetailResponse | AddressDetailResponse[]>("addresses");
return Array.isArray(data) ? data : [data];
}
try {
const response = await fetch(`${CONFIG.apiBaseUrl}/v1/addresses`);
if (!response.ok) {
throw new Error(`Failed to fetch addresses: ${response.status}`);
}
const data = (await response.json()) as { items: AddressDetailResponse[] } | AddressDetailResponse[];
return Array.isArray(data) ? data : data.items;
} catch (error) {
console.warn("[Explorer] Failed to fetch live address data", error);
return [];
}
}
export async function fetchReceipts(): Promise<ReceiptSummary[]> {
if (getDataMode() === "mock") {
const data = await fetchMock<ReceiptListResponse>("receipts");
return data.items;
}
try {
const response = await fetch(`${CONFIG.apiBaseUrl}/v1/receipts`);
if (!response.ok) {
throw new Error(`Failed to fetch receipts: ${response.status}`);
}
const data = (await response.json()) as ReceiptListResponse;
return data.items;
} catch (error) {
console.warn("[Explorer] Failed to fetch live receipt data", error);
return [];
}
}
async function fetchMock<T>(resource: string): Promise<T> {
const url = `${CONFIG.mockBasePath}/${resource}.json`;
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error(`Request failed with status ${response.status}`);
}
return (await response.json()) as T;
} catch (error) {
console.warn(`[Explorer] Failed to fetch mock data from ${url}`, error);
return [] as unknown as T;
}
}

2
apps/explorer-web/src/lib/models.js Normal file
View File

@ -0,0 +1,2 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });

57
apps/explorer-web/src/lib/models.ts Normal file
View File

@ -0,0 +1,57 @@
export interface BlockSummary {
height: number;
hash: string;
timestamp: string;
txCount: number;
proposer: string;
}
export interface BlockListResponse {
items: BlockSummary[];
next_offset?: number | string | null;
}
export interface TransactionSummary {
hash: string;
block: number | string;
from: string;
to: string | null;
value: string;
status: string;
}
export interface TransactionListResponse {
items: TransactionSummary[];
next_offset?: number | string | null;
}
export interface AddressSummary {
address: string;
balance: string;
txCount: number;
lastActive: string;
recentTransactions?: string[];
}
export interface AddressDetailResponse extends AddressSummary {}
export interface AddressListResponse {
items: AddressSummary[];
next_offset?: number | string | null;
}
export interface ReceiptSummary {
receiptId: string;
miner: string;
coordinator: string;
issuedAt: string;
status: string;
payload?: {
minerSignature?: string;
coordinatorSignature?: string;
};
}
export interface ReceiptListResponse {
jobId: string;
items: ReceiptSummary[];
}

63
apps/explorer-web/src/main.js Normal file
View File

@ -0,0 +1,63 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
require("../public/css/theme.css");
require("../public/css/base.css");
require("../public/css/layout.css");
var siteHeader_1 = require("./components/siteHeader");
var siteFooter_1 = require("./components/siteFooter");
var overview_1 = require("./pages/overview");
var blocks_1 = require("./pages/blocks");
var transactions_1 = require("./pages/transactions");
var addresses_1 = require("./pages/addresses");
var receipts_1 = require("./pages/receipts");
var dataModeToggle_1 = require("./components/dataModeToggle");
var mockData_1 = require("./lib/mockData");
var overviewConfig = {
title: overview_1.overviewTitle,
render: overview_1.renderOverviewPage,
init: overview_1.initOverviewPage,
};
var routes = {
"/": overviewConfig,
"/index.html": overviewConfig,
"/blocks": {
title: blocks_1.blocksTitle,
render: blocks_1.renderBlocksPage,
init: blocks_1.initBlocksPage,
},
"/transactions": {
title: transactions_1.transactionsTitle,
render: transactions_1.renderTransactionsPage,
init: transactions_1.initTransactionsPage,
},
"/addresses": {
title: addresses_1.addressesTitle,
render: addresses_1.renderAddressesPage,
init: addresses_1.initAddressesPage,
},
"/receipts": {
title: receipts_1.receiptsTitle,
render: receipts_1.renderReceiptsPage,
init: receipts_1.initReceiptsPage,
},
};
function render() {
var _a, _b, _c;
var root = document.querySelector("#app");
if (!root) {
console.warn("[Explorer] Missing #app root element");
return;
}
document.documentElement.dataset.mode = (0, mockData_1.getDataMode)();
var currentPath = window.location.pathname.replace(/\/$/, "");
var normalizedPath = currentPath === "" ? "/" : currentPath;
var page = (_a = routes[normalizedPath]) !== null && _a !== void 0 ? _a : null;
root.innerHTML = "\n ".concat((0, siteHeader_1.siteHeader)((_b = page === null || page === void 0 ? void 0 : page.title) !== null && _b !== void 0 ? _b : "Explorer"), "\n <main class=\"page\">").concat((page !== null && page !== void 0 ? page : notFoundPageConfig).render(), "</main>\n ").concat((0, siteFooter_1.siteFooter)(), "\n ");
(0, dataModeToggle_1.initDataModeToggle)(render);
void ((_c = page === null || page === void 0 ? void 0 : page.init) === null || _c === void 0 ? void 0 : _c.call(page));
}
var notFoundPageConfig = {
title: "Not Found",
render: function () { return "\n <section class=\"not-found\">\n <h2>Page Not Found</h2>\n <p>The requested view is not available yet.</p>\n </section>\n "; },
};
document.addEventListener("DOMContentLoaded", render);

84
apps/explorer-web/src/main.ts Normal file
View File

@ -0,0 +1,84 @@
import "../public/css/theme.css";
import "../public/css/base.css";
import "../public/css/layout.css";
import { siteHeader } from "./components/siteHeader";
import { siteFooter } from "./components/siteFooter";
import { overviewTitle, renderOverviewPage, initOverviewPage } from "./pages/overview";
import { blocksTitle, renderBlocksPage, initBlocksPage } from "./pages/blocks";
import { transactionsTitle, renderTransactionsPage, initTransactionsPage } from "./pages/transactions";
import { addressesTitle, renderAddressesPage, initAddressesPage } from "./pages/addresses";
import { receiptsTitle, renderReceiptsPage, initReceiptsPage } from "./pages/receipts";
import { initDataModeToggle } from "./components/dataModeToggle";
import { getDataMode } from "./lib/mockData";
type PageConfig = {
title: string;
render: () => string;
init?: () => void | Promise<void>;
};
const overviewConfig: PageConfig = {
title: overviewTitle,
render: renderOverviewPage,
init: initOverviewPage,
};
const routes: Record<string, PageConfig> = {
"/": overviewConfig,
"/index.html": overviewConfig,
"/blocks": {
title: blocksTitle,
render: renderBlocksPage,
init: initBlocksPage,
},
"/transactions": {
title: transactionsTitle,
render: renderTransactionsPage,
init: initTransactionsPage,
},
"/addresses": {
title: addressesTitle,
render: renderAddressesPage,
init: initAddressesPage,
},
"/receipts": {
title: receiptsTitle,
render: renderReceiptsPage,
init: initReceiptsPage,
},
};
function render(): void {
const root = document.querySelector<HTMLDivElement>("#app");
if (!root) {
console.warn("[Explorer] Missing #app root element");
return;
}
document.documentElement.dataset.mode = getDataMode();
const currentPath = window.location.pathname.replace(/\/$/, "");
const normalizedPath = currentPath === "" ? "/" : currentPath;
const page = routes[normalizedPath] ?? null;
root.innerHTML = `
${siteHeader(page?.title ?? "Explorer")}
<main class="page">${(page ?? notFoundPageConfig).render()}</main>
${siteFooter()}
`;
initDataModeToggle(render);
void page?.init?.();
}
const notFoundPageConfig: PageConfig = {
title: "Not Found",
render: () => `
<section class="not-found">
<h2>Page Not Found</h2>
<p>The requested view is not available yet.</p>
</section>
`,
};
document.addEventListener("DOMContentLoaded", render);

72
apps/explorer-web/src/pages/addresses.js Normal file
View File

@ -0,0 +1,72 @@
"use strict";
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator = (this && this.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (g && (g = 0, op[0] && (_ = 0)), _) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.addressesTitle = void 0;
exports.renderAddressesPage = renderAddressesPage;
exports.initAddressesPage = initAddressesPage;
var mockData_1 = require("../lib/mockData");
exports.addressesTitle = "Addresses";
function renderAddressesPage() {
return "\n <section class=\"addresses\">\n <header class=\"section-header\">\n <h2>Address Lookup</h2>\n <p class=\"lead\">Enter an account address to view recent transactions, balances, and receipt history (mock results shown below).</p>\n </header>\n <form class=\"addresses__search\" aria-label=\"Search for an address\">\n <label class=\"addresses__label\" for=\"address-input\">Address</label>\n <div class=\"addresses__input-group\">\n <input id=\"address-input\" name=\"address\" type=\"search\" placeholder=\"0x...\" disabled />\n <button type=\"submit\" disabled>Search</button>\n </div>\n <p class=\"placeholder\">Searching will be enabled after integrating the coordinator/blockchain node endpoints.</p>\n </form>\n <section class=\"addresses__details\">\n <h3>Recent Activity</h3>\n <table class=\"table addresses__table\">\n <thead>\n <tr>\n <th scope=\"col\">Address</th>\n <th scope=\"col\">Balance</th>\n <th scope=\"col\">Tx Count</th>\n <th scope=\"col\">Last Active</th>\n </tr>\n </thead>\n <tbody id=\"addresses-table-body\">\n <tr>\n <td class=\"placeholder\" colspan=\"4\">Loading addresses\u2026</td>\n </tr>\n </tbody>\n </table>\n </section>\n </section>\n ";
}
function initAddressesPage() {
return __awaiter(this, void 0, void 0, function () {
var tbody, addresses;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
tbody = document.querySelector("#addresses-table-body");
if (!tbody) {
return [2 /*return*/];
}
return [4 /*yield*/, (0, mockData_1.fetchAddresses)()];
case 1:
addresses = _a.sent();
if (addresses.length === 0) {
tbody.innerHTML = "\n <tr>\n <td class=\"placeholder\" colspan=\"4\">No mock addresses available.</td>\n </tr>\n ";
return [2 /*return*/];
}
tbody.innerHTML = addresses.map(renderAddressRow).join("");
return [2 /*return*/];
}
});
});
}
function renderAddressRow(address) {
return "\n <tr>\n <td><code>".concat(address.address, "</code></td>\n <td>").concat(address.balance, "</td>\n <td>").concat(address.txCount, "</td>\n <td>").concat(new Date(address.lastActive).toLocaleString(), "</td>\n </tr>\n ");
}

72
apps/explorer-web/src/pages/addresses.ts Normal file
View File

@ -0,0 +1,72 @@
import { fetchAddresses, type AddressSummary } from "../lib/mockData";
export const addressesTitle = "Addresses";
export function renderAddressesPage(): string {
return `
<section class="addresses">
<header class="section-header">
<h2>Address Lookup</h2>
<p class="lead">Enter an account address to view recent transactions, balances, and receipt history (mock results shown below).</p>
</header>
<form class="addresses__search" aria-label="Search for an address">
<label class="addresses__label" for="address-input">Address</label>
<div class="addresses__input-group">
<input id="address-input" name="address" type="search" placeholder="0x..." disabled />
<button type="submit" disabled>Search</button>
</div>
<p class="placeholder">Searching will be enabled after integrating the coordinator/blockchain node endpoints.</p>
</form>
<section class="addresses__details">
<h3>Recent Activity</h3>
<table class="table addresses__table">
<thead>
<tr>
<th scope="col">Address</th>
<th scope="col">Balance</th>
<th scope="col">Tx Count</th>
<th scope="col">Last Active</th>
</tr>
</thead>
<tbody id="addresses-table-body">
<tr>
<td class="placeholder" colspan="4">Loading addresses…</td>
</tr>
</tbody>
</table>
</section>
</section>
`;
}
export async function initAddressesPage(): Promise<void> {
const tbody = document.querySelector<HTMLTableSectionElement>(
"#addresses-table-body",
);
if (!tbody) {
return;
}
const addresses = await fetchAddresses();
if (addresses.length === 0) {
tbody.innerHTML = `
<tr>
<td class="placeholder" colspan="4">No mock addresses available.</td>
</tr>
`;
return;
}
tbody.innerHTML = addresses.map(renderAddressRow).join("");
}
function renderAddressRow(address: AddressSummary): string {
return `
<tr>
<td><code>${address.address}</code></td>
<td>${address.balance}</td>
<td>${address.txCount}</td>
<td>${new Date(address.lastActive).toLocaleString()}</td>
</tr>
`;
}

74
apps/explorer-web/src/pages/blocks.js Normal file
View File

@ -0,0 +1,74 @@
"use strict";
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator = (this && this.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (g && (g = 0, op[0] && (_ = 0)), _) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.blocksTitle = void 0;
exports.renderBlocksPage = renderBlocksPage;
exports.initBlocksPage = initBlocksPage;
var mockData_1 = require("../lib/mockData");
exports.blocksTitle = "Blocks";
function renderBlocksPage() {
return "\n <section class=\"blocks\">\n <header class=\"section-header\">\n <h2>Recent Blocks</h2>\n <p class=\"lead\">This view lists blocks pulled from the coordinator or blockchain node (mock data shown for now).</p>\n </header>\n <table class=\"table blocks__table\">\n <thead>\n <tr>\n <th scope=\"col\">Height</th>\n <th scope=\"col\">Block Hash</th>\n <th scope=\"col\">Timestamp</th>\n <th scope=\"col\">Tx Count</th>\n <th scope=\"col\">Proposer</th>\n </tr>\n </thead>\n <tbody id=\"blocks-table-body\">\n <tr>\n <td class=\"placeholder\" colspan=\"5\">Loading blocks\u2026</td>\n </tr>\n </tbody>\n </table>\n </section>\n ";
}
function initBlocksPage() {
return __awaiter(this, void 0, void 0, function () {
var tbody, blocks;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
tbody = document.querySelector("#blocks-table-body");
if (!tbody) {
return [2 /*return*/];
}
return [4 /*yield*/, (0, mockData_1.fetchBlocks)()];
case 1:
blocks = _a.sent();
if (blocks.length === 0) {
tbody.innerHTML = "\n <tr>\n <td class=\"placeholder\" colspan=\"5\">No mock blocks available.</td>\n </tr>\n ";
return [2 /*return*/];
}
tbody.innerHTML = blocks
.map(function (block) { return renderBlockRow(block); })
.join("");
return [2 /*return*/];
}
});
});
}
function renderBlockRow(block) {
return "\n <tr>\n <td>".concat(block.height, "</td>\n <td><code>").concat(block.hash.slice(0, 18), "\u2026</code></td>\n <td>").concat(new Date(block.timestamp).toLocaleString(), "</td>\n <td>").concat(block.txCount, "</td>\n <td>").concat(block.proposer, "</td>\n </tr>\n ");
}

65
apps/explorer-web/src/pages/blocks.ts Normal file
View File

@ -0,0 +1,65 @@
import { fetchBlocks, type BlockSummary } from "../lib/mockData";
export const blocksTitle = "Blocks";
export function renderBlocksPage(): string {
return `
<section class="blocks">
<header class="section-header">
<h2>Recent Blocks</h2>
<p class="lead">This view lists blocks pulled from the coordinator or blockchain node (mock data shown for now).</p>
</header>
<table class="table blocks__table">
<thead>
<tr>
<th scope="col">Height</th>
<th scope="col">Block Hash</th>
<th scope="col">Timestamp</th>
<th scope="col">Tx Count</th>
<th scope="col">Proposer</th>
</tr>
</thead>
<tbody id="blocks-table-body">
<tr>
<td class="placeholder" colspan="5">Loading blocks…</td>
</tr>
</tbody>
</table>
</section>
`;
}
export async function initBlocksPage(): Promise<void> {
const tbody = document.querySelector<HTMLTableSectionElement>(
"#blocks-table-body",
);
if (!tbody) {
return;
}
const blocks = await fetchBlocks();
if (blocks.length === 0) {
tbody.innerHTML = `
<tr>
<td class="placeholder" colspan="5">No mock blocks available.</td>
</tr>
`;
return;
}
tbody.innerHTML = blocks
.map((block) => renderBlockRow(block))
.join("");
}
function renderBlockRow(block: BlockSummary): string {
return `
<tr>
<td>${block.height}</td>
<td><code>${block.hash.slice(0, 18)}…</code></td>
<td>${new Date(block.timestamp).toLocaleString()}</td>
<td>${block.txCount}</td>
<td>${block.proposer}</td>
</tr>
`;
}

93
apps/explorer-web/src/pages/overview.js Normal file
View File

@ -0,0 +1,93 @@
"use strict";
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator = (this && this.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (g && (g = 0, op[0] && (_ = 0)), _) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.overviewTitle = void 0;
exports.renderOverviewPage = renderOverviewPage;
exports.initOverviewPage = initOverviewPage;
var mockData_1 = require("../lib/mockData");
exports.overviewTitle = "Network Overview";
function renderOverviewPage() {
return "\n <section class=\"overview\">\n <p class=\"lead\">High-level summaries of recent blocks, transactions, and receipts will appear here.</p>\n <div class=\"overview__grid\">\n <article class=\"card\">\n <h3>Latest Block</h3>\n <ul class=\"stat-list\" id=\"overview-block-stats\">\n <li class=\"placeholder\">Loading block data\u2026</li>\n </ul>\n </article>\n <article class=\"card\">\n <h3>Recent Transactions</h3>\n <ul class=\"stat-list\" id=\"overview-transaction-stats\">\n <li class=\"placeholder\">Loading transaction data\u2026</li>\n </ul>\n </article>\n <article class=\"card\">\n <h3>Receipt Metrics</h3>\n <ul class=\"stat-list\" id=\"overview-receipt-stats\">\n <li class=\"placeholder\">Loading receipt data\u2026</li>\n </ul>\n </article>\n </div>\n </section>\n ";
}
function initOverviewPage() {
return __awaiter(this, void 0, void 0, function () {
var _a, blocks, transactions, receipts, blockStats, latest, txStats, succeeded, receiptStats, attested;
return __generator(this, function (_b) {
switch (_b.label) {
case 0: return [4 /*yield*/, Promise.all([
(0, mockData_1.fetchBlocks)(),
(0, mockData_1.fetchTransactions)(),
(0, mockData_1.fetchReceipts)(),
])];
case 1:
_a = _b.sent(), blocks = _a[0], transactions = _a[1], receipts = _a[2];
blockStats = document.querySelector("#overview-block-stats");
if (blockStats) {
if (blocks.length > 0) {
latest = blocks[0];
blockStats.innerHTML = "\n <li><strong>Height:</strong> ".concat(latest.height, "</li>\n <li><strong>Hash:</strong> ").concat(latest.hash.slice(0, 18), "\u2026</li>\n <li><strong>Proposer:</strong> ").concat(latest.proposer, "</li>\n <li><strong>Time:</strong> ").concat(new Date(latest.timestamp).toLocaleString(), "</li>\n ");
}
else {
blockStats.innerHTML = "<li class=\"placeholder\">No mock block data available.</li>";
}
}
txStats = document.querySelector("#overview-transaction-stats");
if (txStats) {
if (transactions.length > 0) {
succeeded = transactions.filter(function (tx) { return tx.status === "Succeeded"; });
txStats.innerHTML = "\n <li><strong>Total Mock Tx:</strong> ".concat(transactions.length, "</li>\n <li><strong>Succeeded:</strong> ").concat(succeeded.length, "</li>\n <li><strong>Pending:</strong> ").concat(transactions.length - succeeded.length, "</li>\n ");
}
else {
txStats.innerHTML = "<li class=\"placeholder\">No mock transaction data available.</li>";
}
}
receiptStats = document.querySelector("#overview-receipt-stats");
if (receiptStats) {
if (receipts.length > 0) {
attested = receipts.filter(function (receipt) { return receipt.status === "Attested"; });
receiptStats.innerHTML = "\n <li><strong>Total Receipts:</strong> ".concat(receipts.length, "</li>\n <li><strong>Attested:</strong> ").concat(attested.length, "</li>\n <li><strong>Pending:</strong> ").concat(receipts.length - attested.length, "</li>\n ");
}
else {
receiptStats.innerHTML = "<li class=\"placeholder\">No mock receipt data available.</li>";
}
}
return [2 /*return*/];
}
});
});
}

92
apps/explorer-web/src/pages/overview.ts Normal file
View File

@ -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>`;
}
}
}

72
apps/explorer-web/src/pages/receipts.js Normal file
View File

@ -0,0 +1,72 @@
"use strict";
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator = (this && this.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (g && (g = 0, op[0] && (_ = 0)), _) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.receiptsTitle = void 0;
exports.renderReceiptsPage = renderReceiptsPage;
exports.initReceiptsPage = initReceiptsPage;
var mockData_1 = require("../lib/mockData");
exports.receiptsTitle = "Receipts";
function renderReceiptsPage() {
return "\n <section class=\"receipts\">\n <header class=\"section-header\">\n <h2>Receipt History</h2>\n <p class=\"lead\">Mock receipts from the coordinator history are displayed below; live lookup will arrive with API wiring.</p>\n </header>\n <div class=\"receipts__controls\">\n <label class=\"receipts__label\" for=\"job-id-input\">Job ID</label>\n <div class=\"receipts__input-group\">\n <input id=\"job-id-input\" name=\"jobId\" type=\"search\" placeholder=\"Enter job ID\" disabled />\n <button type=\"button\" disabled>Lookup</button>\n </div>\n <p class=\"placeholder\">Receipt lookup will be enabled after wiring to <code>/v1/jobs/{job_id}/receipts</code>.</p>\n </div>\n <section class=\"receipts__list\">\n <h3>Recent Receipts</h3>\n <table class=\"table receipts__table\">\n <thead>\n <tr>\n <th scope=\"col\">Job ID</th>\n <th scope=\"col\">Receipt ID</th>\n <th scope=\"col\">Miner</th>\n <th scope=\"col\">Coordinator</th>\n <th scope=\"col\">Issued</th>\n <th scope=\"col\">Status</th>\n </tr>\n </thead>\n <tbody id=\"receipts-table-body\">\n <tr>\n <td class=\"placeholder\" colspan=\"6\">Loading receipts\u2026</td>\n </tr>\n </tbody>\n </table>\n </section>\n </section>\n ";
}
function initReceiptsPage() {
return __awaiter(this, void 0, void 0, function () {
var tbody, receipts;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
tbody = document.querySelector("#receipts-table-body");
if (!tbody) {
return [2 /*return*/];
}
return [4 /*yield*/, (0, mockData_1.fetchReceipts)()];
case 1:
receipts = _a.sent();
if (receipts.length === 0) {
tbody.innerHTML = "\n <tr>\n <td class=\"placeholder\" colspan=\"6\">No mock receipts available.</td>\n </tr>\n ";
return [2 /*return*/];
}
tbody.innerHTML = receipts.map(renderReceiptRow).join("");
return [2 /*return*/];
}
});
});
}
function renderReceiptRow(receipt) {
return "\n <tr>\n <td><code>".concat(receipt.jobId, "</code></td>\n <td><code>").concat(receipt.receiptId, "</code></td>\n <td>").concat(receipt.miner, "</td>\n <td>").concat(receipt.coordinator, "</td>\n <td>").concat(new Date(receipt.issuedAt).toLocaleString(), "</td>\n <td>").concat(receipt.status, "</td>\n </tr>\n ");
}

76
apps/explorer-web/src/pages/receipts.ts Normal file
View File

@ -0,0 +1,76 @@
import { fetchReceipts, type ReceiptSummary } from "../lib/mockData";
export const receiptsTitle = "Receipts";
export function renderReceiptsPage(): string {
return `
<section class="receipts">
<header class="section-header">
<h2>Receipt History</h2>
<p class="lead">Mock receipts from the coordinator history are displayed below; live lookup will arrive with API wiring.</p>
</header>
<div class="receipts__controls">
<label class="receipts__label" for="job-id-input">Job ID</label>
<div class="receipts__input-group">
<input id="job-id-input" name="jobId" type="search" placeholder="Enter job ID" disabled />
<button type="button" disabled>Lookup</button>
</div>
<p class="placeholder">Receipt lookup will be enabled after wiring to <code>/v1/jobs/{job_id}/receipts</code>.</p>
</div>
<section class="receipts__list">
<h3>Recent Receipts</h3>
<table class="table receipts__table">
<thead>
<tr>
<th scope="col">Job ID</th>
<th scope="col">Receipt ID</th>
<th scope="col">Miner</th>
<th scope="col">Coordinator</th>
<th scope="col">Issued</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody id="receipts-table-body">
<tr>
<td class="placeholder" colspan="6">Loading receipts…</td>
</tr>
</tbody>
</table>
</section>
</section>
`;
}
export async function initReceiptsPage(): Promise<void> {
const tbody = document.querySelector<HTMLTableSectionElement>(
"#receipts-table-body",
);
if (!tbody) {
return;
}
const receipts = await fetchReceipts();
if (receipts.length === 0) {
tbody.innerHTML = `
<tr>
<td class="placeholder" colspan="6">No mock receipts available.</td>
</tr>
`;
return;
}
tbody.innerHTML = receipts.map(renderReceiptRow).join("");
}
function renderReceiptRow(receipt: ReceiptSummary): string {
return `
<tr>
<td><code>${receipt.jobId}</code></td>
<td><code>${receipt.receiptId}</code></td>
<td>${receipt.miner}</td>
<td>${receipt.coordinator}</td>
<td>${new Date(receipt.issuedAt).toLocaleString()}</td>
<td>${receipt.status}</td>
</tr>
`;
}

72
apps/explorer-web/src/pages/transactions.js Normal file
View File

@ -0,0 +1,72 @@
"use strict";
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator = (this && this.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (g && (g = 0, op[0] && (_ = 0)), _) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.transactionsTitle = void 0;
exports.renderTransactionsPage = renderTransactionsPage;
exports.initTransactionsPage = initTransactionsPage;
var mockData_1 = require("../lib/mockData");
exports.transactionsTitle = "Transactions";
function renderTransactionsPage() {
return "\n <section class=\"transactions\">\n <header class=\"section-header\">\n <h2>Recent Transactions</h2>\n <p class=\"lead\">Mock data is shown below until coordinator or node APIs are wired up.</p>\n </header>\n <table class=\"table transactions__table\">\n <thead>\n <tr>\n <th scope=\"col\">Hash</th>\n <th scope=\"col\">Block</th>\n <th scope=\"col\">From</th>\n <th scope=\"col\">To</th>\n <th scope=\"col\">Value</th>\n <th scope=\"col\">Status</th>\n </tr>\n </thead>\n <tbody id=\"transactions-table-body\">\n <tr>\n <td class=\"placeholder\" colspan=\"6\">Loading transactions\u2026</td>\n </tr>\n </tbody>\n </table>\n </section>\n ";
}
function initTransactionsPage() {
return __awaiter(this, void 0, void 0, function () {
var tbody, transactions;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
tbody = document.querySelector("#transactions-table-body");
if (!tbody) {
return [2 /*return*/];
}
return [4 /*yield*/, (0, mockData_1.fetchTransactions)()];
case 1:
transactions = _a.sent();
if (transactions.length === 0) {
tbody.innerHTML = "\n <tr>\n <td class=\"placeholder\" colspan=\"6\">No mock transactions available.</td>\n </tr>\n ";
return [2 /*return*/];
}
tbody.innerHTML = transactions.map(renderTransactionRow).join("");
return [2 /*return*/];
}
});
});
}
function renderTransactionRow(tx) {
return "\n <tr>\n <td><code>".concat(tx.hash.slice(0, 18), "\u2026</code></td>\n <td>").concat(tx.block, "</td>\n <td><code>").concat(tx.from.slice(0, 12), "\u2026</code></td>\n <td><code>").concat(tx.to.slice(0, 12), "\u2026</code></td>\n <td>").concat(tx.value, "</td>\n <td>").concat(tx.status, "</td>\n </tr>\n ");
}

68
apps/explorer-web/src/pages/transactions.ts Normal file
View File

@ -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>
`;
}

14
apps/explorer-web/tsconfig.json Normal file
View File

@ -0,0 +1,14 @@
{
"compilerOptions": {
"target": "ESNext",
"module": "ESNext",
"moduleResolution": "Node",
"strict": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"skipLibCheck": true,
"lib": ["ESNext", "DOM"],
"types": ["vite/client"]
},
"include": ["src"]
}

7
apps/explorer-web/vite.config.ts Normal file
View File

@ -0,0 +1,7 @@
import { defineConfig } from "vite";
export default defineConfig({
server: {
port: 4173,
},
});