@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.
50 lines (47 loc) • 4.77 kB
JavaScript
import { X as escape_html, a0 as ensure_array_like, Z as attr, _ as stringify, a1 as bind_props, x as pop, v as push } from './index-vBtQgGkr.js';
import moment from 'moment';
import { l as lovelaceToAda } from './ada_util-BMIfqJSl.js';
import { t as truncate } from './util-C18qA3ke.js';
function _page($$payload, $$props) {
push();
let data = $$props["data"];
let { block, txs } = data;
function getDate(time) {
if (!time) return "";
const date = new Date(time * 1e3);
const options = {
year: "numeric",
month: "long",
day: "numeric",
hour: "numeric",
minute: "numeric",
second: "numeric",
hour12: false
};
return date.toLocaleString(void 0, options);
}
$$payload.out += `<section class="container mx-auto text-sm"><div class="grid grid-cols-1 sm:grid-cols-2 gap-4"><article class="bg-gray-50 rounded-lg shadow-md p-4"><div class="flex flex-col"><div class="bg-gray-200 py-2 px-4 mb-2"><strong>Hash</strong></div> <div class="bg-gray-100 py-2 px-4 break-words"><p><small>${escape_html(block.hash)}</small></p></div></div> <div class="flex flex-col"><div class="bg-gray-200 py-2 px-4 mb-2"><strong>Number</strong></div> <div class="bg-gray-100 py-2 px-4"><p><small>${escape_html(block.number)}</small></p></div></div> <div class="flex flex-col"><div class="bg-gray-200 py-2 px-4 mb-2"><strong>Epoch</strong></div> <div class="bg-gray-100 py-2 px-4"><p><small>${escape_html(block.epoch)}</small></p></div></div> <div class="flex flex-col"><div class="bg-gray-200 py-2 px-4 mb-2"><strong>Slot</strong></div> <div class="bg-gray-100 py-2 px-4"><p><small>${escape_html(block.slot)}</small></p></div></div> <div class="flex flex-col"><div class="bg-gray-200 py-2 px-4 mb-2"><strong>Era</strong></div> <div class="bg-gray-100 py-2 px-4"><p><small>${escape_html(block.era)}</small></p></div></div></article> <article class="bg-gray-50 rounded-lg shadow-md p-4"><div class="flex flex-col"><div class="bg-gray-200 py-2 px-4 mb-2"><strong>Prev Hash</strong></div> <div class="bg-gray-100 py-2 px-4 break-words"><p><small>${escape_html(block.previous_block)}</small></p></div></div> <div class="flex flex-col"><div class="bg-gray-200 py-2 px-4 mb-2"><strong># of Txs</strong></div> <div class="bg-gray-100 py-2 px-4"><p><small>${escape_html(block.tx_count)}</small></p></div></div> <div class="flex flex-col"><div class="bg-gray-200 py-2 px-4 mb-2"><strong>Size</strong></div> <div class="bg-gray-100 py-2 px-4"><p><small>${escape_html(block.size)}</small></p></div></div> <div class="flex flex-col"><div class="bg-gray-200 py-2 px-4 mb-2"><strong>Protocol version</strong></div> <div class="bg-gray-100 py-2 px-4"><p><small>${escape_html(block.protocol_version)}</small></p></div></div> <div class="flex flex-col"><div class="bg-gray-200 py-2 px-4 mb-2"><strong>Timestamp</strong></div> <div class="bg-gray-100 py-2 px-4"><p><small>${escape_html(getDate(block.time))}, ${escape_html(moment(block.time * 1e3).fromNow())}</small></p></div></div></article></div></section> `;
if (txs.length > 0) {
$$payload.out += "<!--[-->";
const each_array = ensure_array_like(txs);
$$payload.out += `<section class="container mx-auto text-sm mt-10 mb-10"><div class="overflow-x-auto"><table class="w-full bg-white border border-gray-300"><thead><tr><th class="py-2 px-4 bg-gray-100 font-bold">Tx Hash</th><th class="py-2 px-4 bg-gray-100 font-bold text-center">Total Output (Ada)</th><th class="py-2 px-4 bg-gray-100 font-bold text-center">Fee (Ada)</th><th class="py-2 px-4 bg-gray-100 font-bold">Output Addresses</th></tr></thead><tbody><!--[-->`;
for (let index = 0, $$length = each_array.length; index < $$length; index++) {
let tx = each_array[index];
const each_array_1 = ensure_array_like(tx.output_addresses);
$$payload.out += `<tr${attr("class", index % 2 === 0 ? "bg-gray-50" : "bg-white")}><td class="py-2 px-4"><a${attr("href", `/transactions/${stringify(tx.tx_hash)}`)} class="text-blue-500">${escape_html(tx.tx_hash)}</a></td><td class="py-2 px-4 text-center">${escape_html(lovelaceToAda(tx.total_output))}</td><td class="py-2 px-4 text-center">${escape_html(lovelaceToAda(tx.fee))}</td><td class="py-2 px-4"><!--[-->`;
for (let $$index = 0, $$length2 = each_array_1.length; $$index < $$length2; $$index++) {
let address = each_array_1[$$index];
$$payload.out += `<!---->${escape_html(truncate(address, 25, "..."))}<br>`;
}
$$payload.out += `<!--]--></td></tr>`;
}
$$payload.out += `<!--]--></tbody></table></div></section>`;
} else {
$$payload.out += "<!--[!-->";
}
$$payload.out += `<!--]-->`;
bind_props($$props, { data });
pop();
}
export { _page as default };
//# sourceMappingURL=_page.svelte-aF-4mYR9.js.map