@bloxbean/yaci-viewer/build/server/chunks/_page.svelte-CaoYKKyU.js

A Cardano blockchain data viewer for developers. It works with the Yaci-Store backend, supporting both a local devnet and public networks.

import { X as escape_html, Z as attr, _ as stringify, a1 as bind_props, x as pop, $ as fallback, a0 as ensure_array_like, v as push } from './index-vBtQgGkr.js';
import { l as lovelaceToAda } from './ada_util-BMIfqJSl.js';
import { J as JsonContent } from './JsonContent-DjhJhAEL.js';
import { X as XIcon } from './XIcon-CVu59ZTD.js';

function MoreHorizontalIcon($$payload, $$props) {
  push();
  let size = fallback($$props["size"], "24");
  let strokeWidth = fallback($$props["strokeWidth"], 2);
  let customClass = fallback($$props["class"], "");
  if (size !== "100%") {
    size = size.slice(-1) === "x" ? size.slice(0, size.length - 1) + "em" : parseInt(size) + "px";
  }
  $$payload.out += `<svg xmlns="http://www.w3.org/2000/svg"${attr("width", size)}${attr("height", size)} fill="none" viewBox="0 0 24 24" stroke="currentColor"${attr("stroke-width", strokeWidth)} stroke-linecap="round" stroke-linejoin="round"${attr("class", `feather feather-more-horizontal ${stringify(customClass)}`)}><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg>`;
  bind_props($$props, { size, strokeWidth, class: customClass });
  pop();
}
function AmountBadges($$payload, $$props) {
  push();
  let amounts = fallback($$props["amounts"], () => [], true);
  const colors = [
    "badge-neutral",
    "badge-primary",
    "badge-secondary",
    "badge-accent",
    "badge-ghost"
  ];
  function random_color() {
    return colors[Math.floor(Math.random() * colors.length)];
  }
  if (amounts) {
    $$payload.out += "<!--[-->";
    const each_array = ensure_array_like(amounts);
    $$payload.out += `<!--[-->`;
    for (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {
      let amount = each_array[$$index];
      if (amount.asset_name === "lovelace") {
        $$payload.out += "<!--[-->";
        $$payload.out += `<span class="badge badge-red">${escape_html(lovelaceToAda(amount.quantity))} Ada</span>`;
      } else {
        $$payload.out += "<!--[!-->";
        $$payload.out += `<span${attr("class", `badge ${stringify(random_color())}`)}>${escape_html(amount.quantity)} ${escape_html(amount.asset_name)}</span>`;
      }
      $$payload.out += `<!--]-->`;
    }
    $$payload.out += `<!--]-->`;
  } else {
    $$payload.out += "<!--[!-->";
  }
  $$payload.out += `<!--]-->`;
  bind_props($$props, { amounts });
  pop();
}
function OutputDetails($$payload, $$props) {
  push();
  let output = fallback($$props["output"], () => ({}), true);
  let show = fallback($$props["show"], false);
  if (show) {
    $$payload.out += "<!--[-->";
    $$payload.out += `<div class="fixed inset-0 bg-gray-600 bg-opacity-50 flex justify-center items-center"><div class="bg-white p-4 rounded shadow-lg mx-auto flex flex-col items-center"><div class="text-right w-full"><button>`;
    XIcon($$payload, { class: "cursor-pointer" });
    $$payload.out += `<!----></button></div> `;
    if (output.inline_datum) {
      $$payload.out += "<!--[-->";
      $$payload.out += `<div class="mt-4 text-sm text-gray-700 break-words w-full"><div class="text-lg font-medium text-gray-700">Datum (Cbor) :</div> <div>${escape_html(output.inline_datum)}</div></div> <div class="mt-4 text-sm text-gray-700 break-words w-full"><div class="text-lg font-medium text-gray-700">Datum (Json) :</div> `;
      JsonContent($$payload, { text: output.inline_datum_json, rows: "20" });
      $$payload.out += `<!----></div>`;
    } else {
      $$payload.out += "<!--[!-->";
    }
    $$payload.out += `<!--]--> `;
    if (output.script_ref) {
      $$payload.out += "<!--[-->";
      $$payload.out += `<div class="mt-4 text-sm text-gray-700 break-words w-full"><div class="text-lg font-medium text-gray-700">Reference Script Hash :</div> <div>${escape_html(output.reference_script_hash)}</div></div> <div class="mt-4 text-sm text-gray-700 break-words w-full"><div class="text-lg font-medium text-gray-700">Reference Script :</div> `;
      JsonContent($$payload, { text: output.script_ref, rows: "10" });
      $$payload.out += `<!----></div>`;
    } else {
      $$payload.out += "<!--[!-->";
    }
    $$payload.out += `<!--]--></div></div>`;
  } else {
    $$payload.out += "<!--[!-->";
  }
  $$payload.out += `<!--]-->`;
  bind_props($$props, { output, show });
  pop();
}
function Inputs($$payload, $$props) {
  let inputs = fallback($$props["inputs"], () => [], true);
  let showDetails = false;
  let selectedInput = {};
  const each_array = ensure_array_like(inputs);
  $$payload.out += `<div><!--[-->`;
  for (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {
    let input = each_array[$$index];
    $$payload.out += `<div class="mt-4"><div class="text-sm font-medium text-gray-700 md:ml-2 break-words">${escape_html(input.address)}</div> <div class="text-xs text-gray-500 break-words"><a${attr("href", `/transactions/${stringify(input.tx_hash)}`)}>${escape_html(input.tx_hash)}#${escape_html(input.output_index)}</a></div> <div class="flex justify-end mt-2"><div class="space-x-2">`;
    AmountBadges($$payload, { amounts: input.amount });
    $$payload.out += `<!----></div></div> `;
    if (input.inline_datum_json || input.script_ref) {
      $$payload.out += "<!--[-->";
      $$payload.out += `<div class="flex justify-end mt-2 items-center"><div class="ml-2"><button class="text-blue-500 underline">`;
      MoreHorizontalIcon($$payload, { class: "cursor-pointer" });
      $$payload.out += `<!----></button></div></div>`;
    } else {
      $$payload.out += "<!--[!-->";
    }
    $$payload.out += `<!--]--></div> <hr class="my-4 border-gray-100">`;
  }
  $$payload.out += `<!--]--></div> `;
  OutputDetails($$payload, { output: selectedInput, show: showDetails });
  $$payload.out += `<!---->`;
  bind_props($$props, { inputs });
}
function Outputs($$payload, $$props) {
  let outputs = fallback($$props["outputs"], () => [], true);
  let showDetails = false;
  let selectedOutput = {};
  const each_array = ensure_array_like(outputs);
  $$payload.out += `<div><!--[-->`;
  for (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {
    let output = each_array[$$index];
    $$payload.out += `<div class="mt-4"><div class="text-sm font-medium text-gray-700 md:ml-2 break-words">${escape_html(output.address)}</div> <div class="flex justify-end mt-2"><div class="space-x-2">`;
    AmountBadges($$payload, { amounts: output.amount });
    $$payload.out += `<!----></div></div> `;
    if (output.inline_datum_json || output.script_ref) {
      $$payload.out += "<!--[-->";
      $$payload.out += `<div class="flex justify-end mt-2 items-center"><div class="ml-2"><button class="text-blue-500 underline">`;
      MoreHorizontalIcon($$payload, { class: "cursor-pointer" });
      $$payload.out += `<!----></button></div></div>`;
    } else {
      $$payload.out += "<!--[!-->";
    }
    $$payload.out += `<!--]--></div> <hr class="my-4 border-gray-100">`;
  }
  $$payload.out += `<!--]--></div> `;
  OutputDetails($$payload, { output: selectedOutput, show: showDetails });
  $$payload.out += `<!---->`;
  bind_props($$props, { outputs });
}
function InputOutput($$payload, $$props) {
  push();
  let tx = fallback($$props["tx"], () => ({}), true);
  $$payload.out += `<div class="text-gray-600 body-font"><div class="container px-5 py-10 mx-auto"><div class="flex flex-wrap -m-4"><div class="p-4 w-full"><h2 class="text-xl font-semibold text-gray-700">Inputs</h2> `;
  Inputs($$payload, { inputs: tx.inputs });
  $$payload.out += `<!----></div> <div class="p-4 w-full"><h2 class="text-xl font-semibold text-gray-700">Outputs</h2> `;
  Outputs($$payload, { outputs: tx.outputs });
  $$payload.out += `<!----></div></div></div></div>`;
  bind_props($$props, { tx });
  pop();
}
function _page($$payload, $$props) {
  push();
  let data = $$props["data"];
  let { tx, contracts, metadata } = data;
  $$payload.out += `<section class="py-20 px-4 md:px-0"><div class="container mx-auto"><div class="grid grid-cols-1 md:grid-cols-2 gap-4"><article class="bg-gray-50 p-4 shadow-md w-full"><div class="flex flex-col"><div class="bg-gray-200 py-2 px-4 mb-2"><strong>Transaction Hash</strong></div> <div class="bg-gray-100 py-2 px-4 break-words"><p><small>${escape_html(tx.hash)}</small></p></div></div> <div class="flex flex-col"><div class="bg-gray-200 py-2 px-4 mb-2"><strong>Block/Slot</strong></div> <div class="bg-gray-100 py-2 px-4"><p><small><a${attr("href", `/blocks/${stringify(tx.block_height)}`)}>${escape_html(tx.block_height)}</a> / ${escape_html(tx.slot)}</small></p></div></div> <div class="flex flex-col"><div class="bg-gray-200 py-2 px-4 mb-2"><strong>TTL</strong></div> <div class="bg-gray-100 py-2 px-4"><p><small>${escape_html(tx.ttl)}</small></p></div></div></article> <article class="bg-gray-50 p-4 shadow-md w-full"><div class="flex flex-col"><div class="bg-gray-200 py-2 px-4 mb-2"><strong>Fee (Ada)</strong></div> <div class="bg-gray-100 py-2 px-4"><p><small>${escape_html(lovelaceToAda(tx.fees, 4))}</small></p></div></div> <div class="flex flex-col"><div class="bg-gray-200 py-2 px-4 mb-2"><strong>Total Outputs (Ada)</strong></div> <div class="bg-gray-100 py-2 px-4"><p><small>${escape_html(lovelaceToAda(tx.total_output, 2))}</small></p></div></div></article></div></div></section> <section class="py-10 px-4 md:px-0"><div class="container mx-auto"><div class="tabs tabs-boxed tabs-xs md:tabs-sm lg:tabs"><button role="tab"${attr("class", `tab ${stringify("tab-active")}`)}><span class="block md:hidden">I/O</span> <span class="hidden md:block">Input/Output</span></button> <button role="tab"${attr("class", `tab ${stringify("")}`)}>Contracts</button> <button role="tab"${attr("class", `tab ${stringify("")}`)}>Collaterals</button> <button role="tab"${attr("class", `tab ${stringify("")}`)}>Metadata</button> <button role="tab"${attr("class", `tab ${stringify("")}`)}><span class="block md:hidden">Ref In</span> <span class="hidden md:block">Reference Input</span></button> <button role="tab"${attr("class", `tab hidden md:flex md:items-center md:justify-center ${stringify("")}`)}>Json</button></div> `;
  {
    $$payload.out += "<!--[-->";
    $$payload.out += `<div class="w-full">`;
    InputOutput($$payload, { tx });
    $$payload.out += `<!----></div>`;
  }
  $$payload.out += `<!--]--> `;
  {
    $$payload.out += "<!--[!-->";
  }
  $$payload.out += `<!--]--> `;
  {
    $$payload.out += "<!--[!-->";
  }
  $$payload.out += `<!--]--> `;
  {
    $$payload.out += "<!--[!-->";
  }
  $$payload.out += `<!--]--> `;
  {
    $$payload.out += "<!--[!-->";
  }
  $$payload.out += `<!--]--> `;
  {
    $$payload.out += "<!--[!-->";
  }
  $$payload.out += `<!--]--></div></section>`;
  bind_props($$props, { data });
  pop();
}

export { _page as default };
//# sourceMappingURL=_page.svelte-CaoYKKyU.js.map