chore: initialize monorepo with project scaffolding, configs, and CI setup
This commit is contained in:
oib
72
apps/explorer-web/src/pages/addresses.js
Normal file
72
apps/explorer-web/src/pages/addresses.js
Normal 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
72
apps/explorer-web/src/pages/addresses.ts
Normal 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
74
apps/explorer-web/src/pages/blocks.js
Normal 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
65
apps/explorer-web/src/pages/blocks.ts
Normal 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
93
apps/explorer-web/src/pages/overview.js
Normal 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
92
apps/explorer-web/src/pages/overview.ts
Normal 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
72
apps/explorer-web/src/pages/receipts.js
Normal 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
76
apps/explorer-web/src/pages/receipts.ts
Normal 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
72
apps/explorer-web/src/pages/transactions.js
Normal 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
68
apps/explorer-web/src/pages/transactions.ts
Normal 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>
|
||||
`;
|
||||
}
|
||||
Reference in New Issue
Block a user