oib/aitbc
1
0
Fork 0
Code Issues Pull Requests Actions 8 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 fe29631a86
170 changed files with 13708 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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