@bloxbean/yaci-viewer
Version:
A Cardano blockchain data viewer for developers. It works with the Yaci-Store backend, supporting both a local devnet and public networks.
106 lines (103 loc) • 7.05 kB
JavaScript
import { x as pop, X as escape_html, Z as attr, _ as stringify, v as push, $ as fallback, a0 as ensure_array_like, a1 as bind_props } from './index-vBtQgGkr.js';
import moment from 'moment';
import { g as getDate, t as truncate } from './util-C18qA3ke.js';
import { l as lovelaceToAda } from './ada_util-BMIfqJSl.js';
function RecentBlocks($$payload, $$props) {
push();
let blocks = $$props["blocks"];
let noOfBlocks = fallback($$props["noOfBlocks"], 10);
const each_array = ensure_array_like([...blocks].slice(0, noOfBlocks));
$$payload.out += `<div class="bg-white rounded-lg shadow-lg p-6"><h2 class="text-xl font-bold mb-4">Recent Blocks</h2> <div class="space-y-4"><!--[-->`;
for (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {
let block = each_array[$$index];
if (block.number) {
$$payload.out += "<!--[-->";
$$payload.out += `<div class="bg-gray-100 p-4 rounded-md"><h3 class="text-sm font-bold"><span class="font-bold">Block</span> <a${attr("href", `/blocks/${stringify(block.number)}`)} class="text-blue-500 hover:underline">${escape_html(block.number)}</a></h3> <p class="text-sm text-gray-600"><span class="font-bold">Slot</span> ${escape_html(block.slot)}</p> <p class="text-sm text-gray-600"><span class="font-bold">Txs</span> ${escape_html(block.ntx)}</p> <p class="text-sm text-gray-600"><span class="font-bold">Size</span> ${escape_html(block.size / 1e3)}</p> <p class="text-sm text-gray-600 break-words"><span class="font-bold">Pool</span> ${escape_html(block.slot_leader)}</p> <p class="text-sm text-gray-600"><span class="text-xs text-gray-500">${escape_html(getDate(block.block_time))}, ${escape_html(moment(block.block_time * 1e3).fromNow())}</span></p></div>`;
} else {
$$payload.out += "<!--[!-->";
}
$$payload.out += `<!--]-->`;
}
$$payload.out += `<!--]--></div></div>`;
bind_props($$props, { blocks, noOfBlocks });
pop();
}
function Blocks($$payload, $$props) {
push();
let messages = [];
RecentBlocks($$payload, { blocks: messages, noOfBlocks: "10" });
pop();
}
function RecentTxs($$payload, $$props) {
push();
let txs = $$props["txs"];
let noOfTxs = fallback($$props["noOfTxs"], 10);
const each_array = ensure_array_like([...txs].slice(0, noOfTxs));
$$payload.out += `<div class="bg-white rounded-lg shadow-lg p-6"><h2 class="text-xl font-bold mb-4">Transactions</h2> <div class="space-y-4"><!--[-->`;
for (let $$index_1 = 0, $$length = each_array.length; $$index_1 < $$length; $$index_1++) {
let tx = each_array[$$index_1];
if (tx.hash) {
$$payload.out += "<!--[-->";
const each_array_1 = ensure_array_like(tx.output_addresses);
$$payload.out += `<div class="bg-gray-100 p-4 rounded-md"><p class="text-sm text-gray-600 py-1"><span class="font-bold">Tx Hash</span> <span class="text-gray-600 text-right overflow-auto md:overflow-hidden"><a${attr("href", `/transactions/${stringify(tx.hash)}`)} class="text-blue-500 hover:underline">${escape_html(truncate(tx.hash, 38, "..."))}</a></span></p> <p class="text-sm text-gray-600 py-1"><span class="font-bold">Block / Slot</span> <a${attr("href", `/blocks/${stringify(tx.block)}`)} class="text-blue-500 hover:underline">${escape_html(tx.block)}</a> / ${escape_html(tx.slot)}</p> <p class="text-sm text-gray-600"><span class="font-bold">Output Addresses</span></p> <div class="flex flex-col items-begin py-1 break-words"><!--[-->`;
for (let $$index = 0, $$length2 = each_array_1.length; $$index < $$length2; $$index++) {
let address = each_array_1[$$index];
$$payload.out += `<p class="text-sm text-gray-600">${escape_html(truncate(address, 60, "..."))}</p>`;
}
$$payload.out += `<!--]--></div> <p class="text-sm text-gray-600 py-1"><span class="font-bold">Output</span> ${escape_html(lovelaceToAda(tx.output, 2))} Ada</p></div>`;
} else {
$$payload.out += "<!--[!-->";
}
$$payload.out += `<!--]-->`;
}
$$payload.out += `<!--]--></div></div>`;
bind_props($$props, { txs, noOfTxs });
pop();
}
function Transactions($$payload, $$props) {
push();
let messages = [];
RecentTxs($$payload, { txs: messages, noOfTxs: "10" });
pop();
}
function NetworkInfo($$payload, $$props) {
push();
let network_info = {};
$$payload.out += `<section class="bg-white py-12"><div class="container mx-auto grid grid-cols-1 md:grid-cols-4 gap-4"><div class="bg-gray-100 rounded-lg p-4"><h3 class="text-xl font-semibold mb-2">Epoch</h3> <p class="text-gray-700">${escape_html(network_info.epoch ? network_info.epoch : 0)}</p></div> <div class="bg-gray-100 rounded-lg p-4"><h3 class="text-xl font-semibold mb-2">Current Block</h3> <p class="text-gray-700">${escape_html(network_info.number ? network_info.number : 0)}</p></div> <div class="bg-gray-100 rounded-lg p-4"><h3 class="text-xl font-semibold mb-2">Slot</h3> `;
if (network_info.epoch_slot) {
$$payload.out += "<!--[-->";
$$payload.out += `<p class="text-gray-700">${escape_html(network_info.epoch_slot)}/${escape_html(network_info.slots_per_epoch)}</p>`;
} else {
$$payload.out += "<!--[!-->";
}
$$payload.out += `<!--]--></div> <div class="bg-gray-100 rounded-lg p-4"><h3 class="text-xl font-semibold mb-2">Epoch Progress</h3> `;
if (network_info.epoch_progress) {
$$payload.out += "<!--[-->";
$$payload.out += `<div class="flex items-center"><div class="w-3/4 bg-gray-300 rounded-lg overflow-hidden"><div class="bg-blue-500 h-2"${attr("style", `width: ${stringify(network_info.epoch_progress)}%;`)}></div></div> <p class="ml-2 text-gray-700">${escape_html(network_info.epoch_progress)}%</p></div>`;
} else {
$$payload.out += "<!--[!-->";
}
$$payload.out += `<!--]--></div></div></section>`;
pop();
}
function _page($$payload, $$props) {
push();
let blocks = [];
$$payload.out += `<section class="bg-gradient-to-r from-gray-900 to-black text-white py-20"><div class="container mx-auto text-center"><h1 class="text-4xl font-bold mb-4">A Blockchain DataViewer For Developers</h1> <p class="text-xl">Explore the latest blocks and transactions on the blockchain</p></div></section> `;
if (blocks.length == 0 || blocks.length > 0 && Object.keys(blocks[0]).length === 0) {
$$payload.out += "<!--[-->";
$$payload.out += `<section class="flex flex-col items-center mt-24"><span class="text-xl font-bold mb-2 text-gray-800 px-4 py-2 rounded-lg">Waiting for live data</span> <span class="loading loading-ring loading-lg"></span></section>`;
} else {
$$payload.out += "<!--[!-->";
NetworkInfo($$payload);
$$payload.out += `<!----> <section class="container mx-auto py-10"><div class="flex flex-col md:flex-row md:space-x-8"><div class="w-full md:w-1/2">`;
Blocks($$payload);
$$payload.out += `<!----></div> <div class="w-full md:w-1/2 mt-4 md:mt-0">`;
Transactions($$payload);
$$payload.out += `<!----></div></div></section>`;
}
$$payload.out += `<!--]-->`;
pop();
}
export { _page as default };
//# sourceMappingURL=_page.svelte-D50EPw8P.js.map