Merge pull request #488 from MeshJS/feature-update/core-cst-serializer

core-cst 1.9.0 beta0

apps/playground/next.config.js

@@ -3,13 +3,13 @@ const withMDX = require("@next/mdx")();
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-  webpack: function (config, options) {
-    config.experiments = {
-      asyncWebAssembly: true,
-      layers: true,
-    };
-    return config;
-  },
+  // webpack: function (config, options) {
+  //   config.experiments = {
+  //     asyncWebAssembly: true,
+  //     layers: true,
+  //   };
+  //   return config;
+  // },
   pageExtensions: ["js", "jsx", "mdx", "ts", "tsx"],
 };
 module.exports = withMDX(nextConfig);

apps/playground/package.json

@@ -16,7 +16,6 @@
     "@mdx-js/react": "^3.0.1",
     "@meshsdk/contract": "*",
     "@meshsdk/core": "*",
-    "@meshsdk/core-csl": "*",
     "@meshsdk/react": "*",
     "@next/mdx": "^14.2.3",
     "@next/third-parties": "^14.2.5",

apps/playground/src/components/text/alert.tsx

@@ -0,0 +1,7 @@
+export default function Alert({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="mb-4 rounded-lg bg-blue-50 p-4 text-sm text-blue-800 dark:bg-gray-800 dark:text-blue-400">
+      {children}
+    </div>
+  );
+}

apps/playground/src/components/text/codeblock.tsx

@@ -34,7 +34,7 @@ export default function Codeblock({
   }
 
   return (
-    <div className="relative mb-4 max-h-96 overflow-auto">
+    <div className="relative max-h-96 overflow-auto">
       <button
         type="button"
         className="absolute right-1 top-1 rounded-lg border border-neutral-300 bg-white px-1 py-1 text-sm font-medium text-neutral-900 hover:bg-neutral-100 focus:ring-4 dark:border-neutral-600 dark:bg-neutral-800 dark:text-white dark:hover:border-neutral-600 dark:hover:bg-neutral-700 dark:focus:ring-neutral-700"

apps/playground/src/data/cardano.ts

@@ -1,4 +1,4 @@
-import { applyParamsToScript } from "@meshsdk/core-csl";
+import { applyParamsToScript } from "@meshsdk/core-cst";
 
 export const demoAddresses = {
   mainnet: "addr1v9vx0sacufuypa2k4sngk7q40zc5c4npl337uusdh64kv0c93pyfx",

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

@@ -5,8 +5,16 @@ export const metaHydraGettingStarted = {
   desc: "Setting up your system to work with Hydra",
   link: "/hydra/getting-started",
 };
+export const metaHydraTutorial = {
+  title: "End-to-end Hydra Tutorial",
+  desc: "Open a layer 2 state channel between two participants, build transactions, and close the Hydra head",
+  link: "/hydra/tutorial",
+};
 
-export const linksHydra: MenuItem[] = [metaHydraGettingStarted];
+export const linksHydra: MenuItem[] = [
+  metaHydraGettingStarted,
+  metaHydraTutorial,
+];
 
 export const metaHydra: MenuItem = {
   title: "Hydra",

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

@@ -5,7 +5,7 @@ import {
   resolvePaymentKeyHash,
   resolvePlutusScriptAddress,
 } from "@meshsdk/core";
-import { applyParamsToScript } from "@meshsdk/core-csl";
+import { applyParamsToScript } from "@meshsdk/core-cst";
 
 import { getProvider } from "~/components/cardano/mesh-wallet";
 import { linksAiken } from "~/data/links-aiken";

apps/playground/src/pages/apis/transaction/minting/minting-cip68.tsx

@@ -8,7 +8,7 @@ import {
   resolvePlutusScriptAddress,
   Transaction,
 } from "@meshsdk/core";
-import { applyParamsToScript } from "@meshsdk/core-csl";
+import { applyParamsToScript } from "@meshsdk/core-cst";
 import { useWallet } from "@meshsdk/react";
 
 import Input from "~/components/form/input";

apps/playground/src/pages/apis/transaction/smart-contract/apply-param-to-script.tsx

@@ -1,6 +1,6 @@
 import { MeshMarketplaceContract } from "@meshsdk/contract";
 import { integer, mPubKeyAddress, pubKeyAddress } from "@meshsdk/core";
-import { applyParamsToScript, CSLSerializer } from "@meshsdk/core-csl";
+import { applyParamsToScript, CardanoSDKSerializer } from "@meshsdk/core-cst";
 
 import Link from "~/components/link";
 import LiveCodeDemo from "~/components/sections/live-code-demo";
@@ -12,7 +12,7 @@ import {
   demoStakeCredential,
 } from "~/data/cardano";
 
-const serializer = new CSLSerializer();
+const serializer = new CardanoSDKSerializer();
 
 const demoCompiledCode = MeshMarketplaceContract.getCompiledCode();
 
@@ -71,7 +71,7 @@ function Left() {
         Note, currently only <code>core-csl</code> supports applying parameters
         to a script. As such, you must install the package to use this feature.
       </p>
-      <Codeblock data={`npm install @meshsdk/core-csl`} />
+      <Codeblock data={`npm install @meshsdk/core-cst`} />
 
       <p>
         <code>applyParamsToScript</code> has the following signature:
@@ -136,7 +136,7 @@ function DemoMeshType() {
     return scriptCbor;
   }
 
-  let code = `import { applyParamsToScript } from "@meshsdk/core-csl"; \n\n`;
+  let code = `import { applyParamsToScript } from "@meshsdk/core-cst"; \n\n`;
   code += `const scriptCbor = applyParamsToScript(\n`;
   code += `  '<compiled_script_here>',\n`;
   code += `  [mPubKeyAddress('${demoPubKeyHash}', '${demoStakeCredential}'), 100],\n`;

apps/playground/src/pages/apis/txbuilder/common.tsx

@@ -1,4 +1,5 @@
 import { MeshTxBuilder } from "@meshsdk/core";
+import { CardanoSDKSerializer } from "@meshsdk/core-cst";
 
 import { getProvider } from "~/components/cardano/mesh-wallet";
 import Link from "~/components/link";
@@ -9,6 +10,7 @@ export function getTxBuilder() {
     fetcher: blockchainProvider,
     submitter: blockchainProvider,
     evaluator: blockchainProvider,
+    serializer: new CardanoSDKSerializer(),
     verbose: true,
   });
   txBuilder.setNetwork("preprod");

apps/playground/src/pages/apis/txbuilder/minting/minting-cip68.tsx

@@ -12,7 +12,7 @@ import {
   stringToHex,
   UTxO,
 } from "@meshsdk/core";
-import { applyParamsToScript } from "@meshsdk/core-csl";
+import { applyParamsToScript } from "@meshsdk/core-cst";
 import { useWallet } from "@meshsdk/react";
 
 import Input from "~/components/form/input";

apps/playground/src/pages/hydra/tutorial/index.tsx

@@ -0,0 +1,94 @@
+import type { NextPage } from "next";
+import { useState } from "react";
+
+import { HydraInstance, HydraProvider, MeshWallet } from "@meshsdk/core";
+
+import SidebarFullwidth from "~/components/layouts/sidebar-fullwidth";
+import Link from "~/components/link";
+import TitleIconDescriptionBody from "~/components/sections/title-icon-description-body";
+import Metatags from "~/components/site/metatags";
+import { metaHydraTutorial } from "~/data/links-hydra";
+import { getPageLinks } from "../common";
+import HydraTutorialPrerequisites from "./prerequisites";
+import HydraTutorialStep2 from "./step2";
+import HydraTutorialStep3 from "./step3";
+import HydraTutorialStep4 from "./step4";
+import HydraTutorialStep5 from "./step5";
+
+const ReactPage: NextPage = () => {
+  const [aliceNode, setAliceNode] = useState<MeshWallet | undefined>(undefined);
+  const [aliceFunds, setAliceFunds] = useState<MeshWallet | undefined>(
+    undefined,
+  );
+  const [bobNode, setBobNode] = useState<MeshWallet | undefined>(undefined);
+  const [bobFunds, setBobFunds] = useState<MeshWallet | undefined>(undefined);
+
+  const hydraProvider = new HydraProvider({ url: "http://35.189.158.126:4001" });
+  const hydraInstance = new HydraInstance({
+    provider: hydraProvider,
+  });
+
+  return (
+    <>
+      <Metatags
+        title={metaHydraTutorial.title}
+        description={metaHydraTutorial.desc}
+      />
+      <SidebarFullwidth sidebarItems={getPageLinks()}>
+        <TitleIconDescriptionBody
+          title={metaHydraTutorial.title}
+          description={metaHydraTutorial.desc}
+        >
+          <>
+            <p>
+              This tutorial demonstrates how to use hydra-node on Cardano's
+              preprod testing environment to open a layer 2 state channel
+              between two participants using the Hydra Head protocol.
+            </p>
+            <p>
+              This tutorial is adapted from{" "}
+              <Link href="https://hydra.family/head-protocol/docs/tutorial/">
+                the Hydra documentation
+              </Link>
+              .
+            </p>
+          </>
+        </TitleIconDescriptionBody>
+
+        <HydraTutorialPrerequisites />
+        <HydraTutorialStep2
+          aliceNode={aliceNode}
+          aliceFunds={aliceFunds}
+          bobNode={bobNode}
+          bobFunds={bobFunds}
+          setAliceNode={setAliceNode}
+          setAliceFunds={setAliceFunds}
+          setBobNode={setBobNode}
+          setBobFunds={setBobFunds}
+        />
+        <HydraTutorialStep3
+          aliceNode={aliceNode}
+          aliceFunds={aliceFunds}
+          bobNode={bobNode}
+          bobFunds={bobFunds}
+        />
+        <HydraTutorialStep4
+          hydraInstance={hydraInstance}
+          aliceNode={aliceNode}
+          aliceFunds={aliceFunds}
+          bobNode={bobNode}
+          bobFunds={bobFunds}
+        />
+        <HydraTutorialStep5
+          hydraInstance={hydraInstance}
+          aliceNode={aliceNode}
+          aliceFunds={aliceFunds}
+          bobNode={bobNode}
+          bobFunds={bobFunds}
+        />
+      </SidebarFullwidth>
+    </>
+  );
+};
+
+export default ReactPage;

apps/playground/src/pages/hydra/tutorial/prerequisites.tsx

@@ -0,0 +1,32 @@
+import Link from "~/components/link";
+import TwoColumnsScroll from "~/components/sections/two-columns-scroll";
+
+export default function HydraTutorialPrerequisites() {
+  return (
+    <TwoColumnsScroll
+      sidebarTo="prerequisites"
+      title="Prerequisites"
+      leftSection={Left()}
+    />
+  );
+}
+
+function Left() {
+  return (
+    <>
+      <p>
+        First, generate Cardano key pairs and addresses for both participants to
+        identify the hydra-node and manage funds on layer 1:
+      </p>
+      <ul>
+        <li>
+          Hydra node and cardano-node running, check{" "}
+          <Link href="https://hydra.family/head-protocol/docs/installation/">
+            Installation
+          </Link>
+          .
+        </li>
+      </ul>
+    </>
+  );
+}