fix uplc for chang 2 cost models

apps/playground/src/components/sections/hero-logo-two-sections-links.tsx

@@ -0,0 +1,61 @@
+import { ArrowRightIcon } from "@heroicons/react/24/solid";
+
+import { MenuItem } from "~/types/menu-item";
+import Link from "../link";
+
+export default function HeroLogoTwoSectionsLinks({
+  logo,
+  title,
+  description,
+  links,
+}: {
+  logo: React.ReactNode;
+  title: string;
+  description: string;
+  links: MenuItem[];
+}) {
+  return (
+    <section className="bg-white dark:bg-gray-900">
+      <div className="mx-auto max-w-screen-xl px-4 py-8 sm:py-16 lg:px-6 lg:py-24">
+        <div className="text-center">{logo}</div>
+
+        <div className="mx-auto max-w-screen-xl px-4 py-8 sm:py-16 lg:px-6">
+          <div className="grid space-y-8 lg:grid-cols-2 lg:gap-12 lg:space-y-0">
+            <div>
+              <h2 className="mb-4 text-4xl font-extrabold tracking-tight text-gray-900 dark:text-white">
+                {title}
+              </h2>
+              <p className="mb-4 text-gray-500 sm:text-xl dark:text-gray-400">
+                {description}
+              </p>
+            </div>
+            <div>
+              {links.map((link) => (
+                <Item key={link.link} item={link} />
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function Item({ item }: { item: MenuItem }) {
+  return (
+    <Link
+      href={item.link}
+      className="border-primary-600 dark:border-primary-500 mb-6 flex items-center justify-between rounded-lg border-l-8 bg-white p-4 shadow hover:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700"
+    >
+      <div>
+        <span className="mb-1 block text-xs font-medium uppercase text-gray-500 dark:text-gray-400">
+          {item.desc}
+        </span>
+        <span className="text-primary-600 dark:text-primary-300 text-xl font-semibold">
+          {item.title}
+        </span>
+      </div>
+      <ArrowRightIcon className="text-primary-600 dark:text-primary-500 h-6 w-6" />
+    </Link>
+  );
+}

apps/playground/src/data/links-aiken.ts

@@ -2,7 +2,7 @@ import { MenuItem } from "~/types/menu-item";
 
 export const metaAikenGettingStarted = {
   title: "Getting Started",
-  desc: "We will walk you through the process of setting up your system to compile Aiken smart contracts",
+  desc: "Setting up your system to compile Aiken smart contracts",
   link: "/aiken/getting-started",
 };
 export const metaAikenFirstScript = {
@@ -21,8 +21,8 @@ export const metaAikenContractsLib = {
   link: "/smart-contracts",
 };
 export const metaAikenCourse = {
-  title: "Aiken Smart Contract course by STOIC Pool",
-  desc: "You'll learn the core concepts of Aiken while enjoying live coding examples",
+  title: "Smart Contract course by STOIC Pool",
+  desc: "Learn the concepts of Aiken while enjoying live coding examples",
   link: "https://www.youtube.com/playlist?list=PLCuyQuWCJVQ1Zz9ySRMH_J6EymxhnZ0Hu",
 };
 

apps/playground/src/pages/aiken/index.tsx

@@ -1,17 +1,16 @@
 import type { NextPage } from "next";
-import Link from "~/components/link";
-import { ChevronRightIcon } from "@heroicons/react/24/solid";
 
+import HeroLogoTwoSectionsLinks from "~/components/sections/hero-logo-two-sections-links";
 import Metatags from "~/components/site/metatags";
 import { linksAiken, metaAiken } from "~/data/links-aiken";
 
 const ReactPage: NextPage = () => {
   return (
     <>
       <Metatags title={metaAiken.title} description={metaAiken.desc} />
-      <section className="bg-white dark:bg-gray-900">
-        <div className="mx-auto max-w-screen-xl px-4 py-8 sm:py-16 lg:px-6 lg:py-24">
-          <div className="text-center">
+      <HeroLogoTwoSectionsLinks
+        logo={
+          <>
             <img
               className="mx-auto w-36 object-contain dark:hidden"
               src="/images/aiken/logo-dark.png"
@@ -22,65 +21,12 @@ const ReactPage: NextPage = () => {
               src="/images/aiken/logo-light.png"
               alt="Aiken logo dark"
             />
-          </div>
-
-          <div className="mt-8 grid grid-cols-1 gap-8 lg:mt-16 lg:grid-cols-2 lg:gap-16">
-            <div>
-              <div>
-                <h3 className="text-2xl font-extrabold text-gray-900 dark:text-white">
-                  Overview
-                </h3>
-                <p className="mt-2 text-lg font-normal text-gray-500 dark:text-gray-400">
-                  Aiken is a functional programming language created for Cardano
-                  smart contract development. It prioritizes on-chain execution
-                  and offers a user-friendly approach for building secure and
-                  efficient smart contracts, making it a valuable choice for
-                  developers aiming to create robust on-chain applications.
-                </p>
-              </div>
-
-              <ul className="mt-8 grid grid-cols-1 gap-x-4 gap-y-3 sm:grid-cols-2">
-                {linksAiken.map((link) => (
-                  <li key={link.link} className="flex items-center gap-2.5">
-                    <ChevronRightIcon className="h-5 w-5 text-green-500" />
-                    <Link href={link.link}>
-                      <span className="text-base font-normal text-gray-500 dark:text-gray-400">
-                        {link.title}
-                      </span>
-                    </Link>
-                  </li>
-                ))}
-              </ul>
-            </div>
-
-            <div className="space-y-8">
-              {/* <div>
-              <h3 className="text-2xl font-extrabold text-gray-900 dark:text-white">
-                Something
-              </h3>
-              <p className="mt-2 text-lg font-normal text-gray-500 dark:text-gray-400">
-                Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio
-                iste nam cupiditate, eveniet ab possimus quisquam accusantium,
-                porro, vel temporibus molestiae rerum eaque vitae modi hic!
-                Commodi ad quis ducimus?
-              </p>
-            </div>
-
-            <div>
-              <h3 className="text-2xl font-extrabold text-gray-900 dark:text-white">
-                Something
-              </h3>
-              <p className="mt-2 text-lg font-normal text-gray-500 dark:text-gray-400">
-                Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio
-                iste nam cupiditate, eveniet ab possimus quisquam accusantium,
-                porro, vel temporibus molestiae rerum eaque vitae modi hic!
-                Commodi ad quis ducimus?
-              </p>
-            </div> */}
-            </div>
-          </div>
-        </div>
-      </section>
+          </>
+        }
+        title="A programming language and toolkit for developing smart contracts"
+        description="Aiken is a functional programming language created for Cardano smart contract development. It prioritizes on-chain execution and offers a user-friendly approach for building secure and efficient smart contracts, making it a valuable choice for developers aiming to create robust on-chain applications."
+        links={linksAiken}
+      />
     </>
   );
 };

apps/playground/src/pages/providers/blockfrost.tsx

@@ -30,6 +30,7 @@ const ReactPage: NextPage = () => {
     { label: "Fetch Protocol Parameters", to: "fetchProtocolParameters" },
     { label: "Fetch Transaction Info", to: "fetchTxInfo" },
     { label: "Fetch UTxOs", to: "fetchUtxos" },
+    { label: "Fetch Proposal Info", to: "fetchProposalInfo" },
     { label: "Evaluate Tx", to: "evaluateTx" },
     { label: "Submit Tx", to: "submitTx" },
     { label: "On Transaction Confirmed", to: "onTxConfirmed" },

apps/playground/src/pages/providers/koios.tsx

@@ -29,6 +29,7 @@ const ReactPage: NextPage = () => {
     { label: "Fetch Protocol Parameters", to: "fetchProtocolParameters" },
     { label: "Fetch Transaction Info", to: "fetchTxInfo" },
     { label: "Fetch UTxOs", to: "fetchUtxos" },
+    { label: "Fetch Proposal Info", to: "fetchProposalInfo" },
     { label: "Submit Tx", to: "submitTx" },
     { label: "On Transaction Confirmed", to: "onTxConfirmed" },
   ];

apps/playground/src/pages/providers/maestro.tsx

@@ -30,6 +30,7 @@ const ReactPage: NextPage = () => {
     { label: "Fetch Protocol Parameters", to: "fetchProtocolParameters" },
     { label: "Fetch Transaction Info", to: "fetchTxInfo" },
     { label: "Fetch UTxOs", to: "fetchUtxos" },
+    { label: "Fetch Proposal Info", to: "fetchProposalInfo" },
     { label: "Evaluate Tx", to: "evaluateTx" },
     { label: "Submit Tx", to: "submitTx" },
     { label: "On Transaction Confirmed", to: "onTxConfirmed" },

apps/playground/src/pages/providers/yaci.tsx

@@ -31,6 +31,7 @@ const ReactPage: NextPage = () => {
     { label: "Fetch Protocol Parameters", to: "fetchProtocolParameters" },
     { label: "Fetch Transaction Info", to: "fetchTxInfo" },
     { label: "Fetch UTxOs", to: "fetchUtxos" },
+    { label: "Fetch Proposal Info", to: "fetchProposalInfo" },
     { label: "Evaluate Tx", to: "evaluateTx" },
     { label: "Submit Tx", to: "submitTx" },
     { label: "On Transaction Confirmed", to: "onTxConfirmed" },

apps/playground/src/pages/yaci/index.tsx

@@ -1,90 +1,27 @@
 import type { NextPage } from "next";
-import Link from "~/components/link";
-import { ChevronRightIcon } from "@heroicons/react/24/solid";
 
+import HeroLogoTwoSectionsLinks from "~/components/sections/hero-logo-two-sections-links";
 import Metatags from "~/components/site/metatags";
 import { linksYaci, metaYaci } from "~/data/links-yaci";
 
 const ReactPage: NextPage = () => {
   return (
     <>
       <Metatags title={metaYaci.title} description={metaYaci.desc} />
-      <section className="bg-white dark:bg-gray-900">
-        <div className="mx-auto max-w-screen-xl px-4 py-8 sm:py-16 lg:px-6 lg:py-24">
-          <div className="text-center">
+      <HeroLogoTwoSectionsLinks
+        logo={
+          <>
             <img
               className="mx-auto w-36 object-contain"
               src="/providers/yaci.png"
               alt="Yaci logo"
             />
-          </div>
-
-          <div className="mt-8 grid grid-cols-1 gap-8 lg:mt-16 lg:grid-cols-2 lg:gap-16">
-            <div>
-              <div>
-                <h3 className="text-2xl font-extrabold text-gray-900 dark:text-white">
-                  Overview
-                </h3>
-                <p className="mt-2 text-lg font-normal text-gray-500 dark:text-gray-400">
-                  Yaci DevKit revolutionizes the development process with a
-                  custom Cardano devnet that can be created and reset in seconds
-                  using the user-friendly Yaci CLI. This allows for rapid
-                  iteration and experimentation, tailored to specific needs
-                  through flexible configuration options. The default devnet is
-                  optimized for speed, with customizable parameters for various
-                  testing scenarios. Integrated tools like the lightweight chain
-                  indexer "Yaci Store" and the browser-based "Yaci Viewer"
-                  enhance transaction building and submission. Optional
-                  components Ogmios and Kupo can be enabled to support client
-                  SDKs, and the Docker Compose package simplifies deployment and
-                  management. Yaci DevKit's compatibility with Blockfrost API
-                  endpoints ensures seamless integration with client SDKs,
-                  offering boundless development possibilities.
-                </p>
-              </div>
-
-              <ul className="mt-8 grid grid-cols-1 gap-x-4 gap-y-3 sm:grid-cols-2">
-                {linksYaci.map((link) => (
-                  <li key={link.link} className="flex items-center gap-2.5">
-                    <ChevronRightIcon className="h-5 w-5 text-green-500" />
-                    <Link href={link.link}>
-                      <span className="text-base font-normal text-gray-500 dark:text-gray-400">
-                        {link.title}
-                      </span>
-                    </Link>
-                  </li>
-                ))}
-              </ul>
-            </div>
-
-            {/* <div className="space-y-8">
-            <div>
-              <h3 className="text-2xl font-extrabold text-gray-900 dark:text-white">
-                Something
-              </h3>
-              <p className="mt-2 text-lg font-normal text-gray-500 dark:text-gray-400">
-                Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio
-                iste nam cupiditate, eveniet ab possimus quisquam accusantium,
-                porro, vel temporibus molestiae rerum eaque vitae modi hic!
-                Commodi ad quis ducimus?
-              </p>
-            </div>
-
-            <div>
-              <h3 className="text-2xl font-extrabold text-gray-900 dark:text-white">
-                Something
-              </h3>
-              <p className="mt-2 text-lg font-normal text-gray-500 dark:text-gray-400">
-                Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio
-                iste nam cupiditate, eveniet ab possimus quisquam accusantium,
-                porro, vel temporibus molestiae rerum eaque vitae modi hic!
-                Commodi ad quis ducimus?
-              </p>
-            </div>
-          </div> */}
-          </div>
-        </div>
-      </section>
+          </>
+        }
+        title="Customizable Cardano devnet for enabling faster iterations"
+        description="Custom Cardano devnet that can be created and reset in seconds using the user-friendly Yaci CLI. This allows for rapid iteration and experimentation, tailored to specific needs through flexible configuration options. The default devnet is optimized for speed, with customizable parameters for various testing scenarios. Integrated tools like the lightweight chain indexer Yaci Store and the browser-based Yaci Viewer enhance transaction building and submission. Yaci DevKit's compatibility with Blockfrost API endpoints ensures seamless integration with client SDKs."
+        links={linksYaci}
+      />
     </>
   );
 };

apps/playground/src/types/menu-item.ts

@@ -1,6 +1,6 @@
 export type MenuItem = {
   title: string;
-  desc?: string;
+  desc: string;
   link: string;
   icon?: any;
   items?: MenuItem[];