Merge pull request #327 from MeshJS/hydra-tools

Hydra tools

README.md

@@ -27,7 +27,44 @@ Explore the features on [Mesh Playground](https://meshjs.dev/).
 
 ## What's inside?
 
-This repo includes the following packages/apps:
+```mermaid
+graph TD
+  package-core[@meshsdk/core]
+  package-core-csl[@meshsdk/core-csl]
+  package-core-cst[@meshsdk/core-cst]
+  package-provider[@meshsdk/provider]
+  package-react[@meshsdk/react]
+  package-transaction[@meshsdk/transaction]
+  package-wallet[@meshsdk/wallet]
+  package-sidan-csl[@sidan-lab/*]
+  package-cardano-sdk[@cardano-sdk/*]
+  package-harmoniclabs[@harmoniclabs/*]
+  package-stricahq[@stricahq/*]
+  package-core --> package-core-csl
+  package-core --> package-core-cst
+  package-core --> package-provider
+  package-core --> package-react
+  package-core --> package-transaction
+  package-core --> package-wallet
+  package-provider --> package-core-cst
+  
+  package-react --> package-transaction
+  package-react --> package-wallet
+  package-transaction --> package-core-csl
+  package-transaction --> package-core-cst
+  subgraph serializer
+  package-core-csl --> package-sidan-csl
+  package-core-cst --> package-cardano-sdk
+  package-core-cst --> package-harmoniclabs
+  package-core-cst --> package-stricahq
+  end
+  click package-core-csl "https://docs.meshjs.dev/core-csl" _parent
+  click package-core-cst "https://docs.meshjs.dev/core-cst" _parent
+  click package-provider "https://docs.meshjs.dev/providers" _parent
+  click package-react "https://meshjs.dev/react" _parent
+  click package-transaction "https://docs.meshjs.dev/transactions" _parent
+  click package-wallet "https://docs.meshjs.dev/wallets" _parent
+```
 
 ### Packages
 

apps/playground/src/components/cardano/blockchain-providers-key.tsx

@@ -23,6 +23,8 @@ export default function BlockchainProviderKey({
   const setYaciUrl = useProviders((state) => state.setYaciUrl);
   const ogmiosUrl = useProviders((state) => state.ogmiosUrl);
   const setOgmiosUrl = useProviders((state) => state.setOgmiosUrl);
+  const hydraUrl = useProviders((state) => state.hydraUrl);
+  const setHydraUrl = useProviders((state) => state.setHydraUrl);
 
   if (provider == "maestro") {
     return (
@@ -123,6 +125,7 @@ export default function BlockchainProviderKey({
             onChange={(e) => setYaciUrl(e.target.value)}
             placeholder="Instance URL"
             label="Instance URL"
+            type="password"
             key={0}
           />,
         ]}
@@ -139,6 +142,24 @@ export default function BlockchainProviderKey({
             onChange={(e) => setOgmiosUrl(e.target.value)}
             placeholder="Instance URL"
             label="Instance URL"
+            type="password"
+            key={0}
+          />,
+        ]}
+      />
+    );
+  }
+
+  if (provider == "hydra") {
+    return (
+      <InputTable
+        listInputs={[
+          <Input
+            value={hydraUrl ?? ""}
+            onChange={(e) => setHydraUrl(e.target.value)}
+            placeholder="e.g. http://123.45.67.890:4001"
+            label="Hydra Head URL and Port"
+            type="password"
             key={0}
           />,
         ]}

apps/playground/src/components/layouts/sidebar/index.tsx

@@ -10,7 +10,7 @@ export default function Sidebar({
     <div className="mb-6 mr-6 hidden lg:w-72 xl:block">
       <div className="sticky top-24">
         <aside>
-          <nav className="overflow-y-auto rounded-lg border border-gray-200 p-6 font-medium text-gray-500 dark:border-gray-700 dark:text-gray-400 max-h-96">
+          <nav className="overflow-y-auto rounded-lg border border-gray-200 p-6 font-medium text-gray-500 dark:border-gray-700 dark:text-gray-400 h-[calc(100vh-150px)]">
             <ul className="space-y-4">
               {sidebarItems.map((item, i) => {
                 return (

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

@@ -3,44 +3,52 @@ import { CloudIcon } from "@heroicons/react/24/solid";
 import { MenuItem } from "~/types/menu-item";
 
 export const metaMaestro = {
-  title: "Maestro",
+  title: "Maestro Provider",
   link: "/providers/maestro",
   desc: "Advanced UTxO-indexing data layer to supercharge Defi on Bitcoin, Cardano & Dogecoin",
   thumbnail: "/providers/maestro.png",
 };
 
 export const metaKoios = {
-  title: "Koios",
+  title: "Koios Provider",
   link: "/providers/koios",
   desc: "Distributed & open-source public API query layer for Cardano",
   thumbnail: "/providers/koios.png",
 };
 
 export const metaBlockfrost = {
-  title: "Blockfrost",
+  title: "Blockfrost Provider",
   link: "/providers/blockfrost",
   desc: "Featuring over 100 APIs tailored for easy access to Cardano blockchain",
   thumbnail: "/providers/blockfrost.png",
 };
 
 export const metaYaci = {
-  title: "Yaci DevKit",
+  title: "Yaci Provider",
   link: "/providers/yaci",
   desc: "Custom Cardano devnet to tailor your devnet needs with a builtin indexer and custom viewer for devnet",
   thumbnail: "/providers/yaci.png",
 };
 
 export const metaOgmios = {
-  title: "Ogmios",
+  title: "Ogmios Provider",
   link: "/providers/ogmios",
   desc: "Lightweight bridge interface for cardano-node that offers WebSockets API that enables local clients to speak Ouroboros' mini-protocols",
   thumbnail: "/providers/ogmios.png",
 };
 
+export const metaHydra = {
+  title: "Hydra Provider (alpha)",
+  link: "/providers/hydra",
+  desc: "Layer 2 scaling solution for Cardano that increases transaction throughput and ensures cost efficiency while maintaining security.",
+  thumbnail: "/providers/hydra.svg",
+};
+
 export const linksProviders: MenuItem[] = [
   metaBlockfrost,
   metaKoios,
   metaMaestro,
+  // metaHydra,
   metaOgmios,
   metaYaci,
 ];

apps/playground/src/hooks/useProviders.ts

@@ -19,6 +19,8 @@ interface State {
   setYaciUrl: (url: string) => void;
   ogmiosUrl: string;
   setOgmiosUrl: (url: string) => void;
+  hydraUrl: string;
+  setHydraUrl: (url: string) => void;
 }
 
 export const useProviders = create<State>(
@@ -35,6 +37,8 @@ export const useProviders = create<State>(
       setYaciUrl: (url) => set({ yaciUrl: url }),
       ogmiosUrl: "",
       setOgmiosUrl: (url) => set({ ogmiosUrl: url }),
+      hydraUrl: "",
+      setHydraUrl: (url) => set({ hydraUrl: url }),
     }),
     { name: "mesh-providers" },
   ),

apps/playground/src/pages/providers/hydra-endpoints/index.tsx

@@ -0,0 +1,25 @@
+import { HydraProvider } from "@meshsdk/core";
+
+import HydraInitializeHead from "./init-head";
+import HydraOnMessage from "./on-message";
+
+export default function ProviderHydra({
+  hydraProvider,
+  provider,
+}: {
+  hydraProvider: HydraProvider;
+  provider: string;
+}) {
+  return (
+    <>
+      <HydraInitializeHead
+        hydraProvider={hydraProvider}
+        provider={provider}
+      />
+      <HydraOnMessage
+        hydraProvider={hydraProvider}
+        provider={provider}
+      />
+    </>
+  );
+}

apps/playground/src/pages/providers/hydra-endpoints/init-head.tsx

@@ -0,0 +1,55 @@
+import { HydraProvider } from "@meshsdk/core";
+
+import LiveCodeDemo from "~/components/sections/live-code-demo";
+import TwoColumnsScroll from "~/components/sections/two-columns-scroll";
+import Codeblock from "~/components/text/codeblock";
+
+export default function HydraInitializeHead({
+  hydraProvider,
+  provider,
+}: {
+  hydraProvider: HydraProvider;
+  provider: string;
+}) {
+  return (
+    <TwoColumnsScroll
+      sidebarTo="initHead"
+      title="Initializes a new Hydra Head"
+      leftSection={Left()}
+      rightSection={Right(hydraProvider, provider)}
+    />
+  );
+}
+
+function Left() {
+  return (
+    <>
+      <p>
+        Initializes a new Head. This command is a no-op when a Head is already
+        open and the server will output an <code>CommandFailed</code> message
+        should this happen.
+      </p>
+      <Codeblock data={`await hydraProvider.initializesHead();`} />
+    </>
+  );
+}
+
+function Right(hydraProvider: HydraProvider, provider: string) {
+  async function runDemo() {
+    hydraProvider.onMessage((message) => {
+      console.log("HydraProvider received message", message);
+    });
+    await hydraProvider.connect();
+    return await hydraProvider.initializesHead();
+  }
+
+  return (
+    <LiveCodeDemo
+      title="Initializes Hydra Head"
+      subtitle="Initializes a new Head."
+      runCodeFunction={runDemo}
+      runDemoShowProviderInit={true}
+      runDemoProvider={provider}
+    ></LiveCodeDemo>
+  );
+}

apps/playground/src/pages/providers/hydra-endpoints/on-message.tsx

@@ -0,0 +1,57 @@
+import { use, useEffect } from "react";
+
+import { HydraProvider } from "@meshsdk/core";
+
+import Link from "~/components/link";
+import TwoColumnsScroll from "~/components/sections/two-columns-scroll";
+import Codeblock from "~/components/text/codeblock";
+
+export default function HydraOnMessage({
+  hydraProvider,
+  provider,
+}: {
+  hydraProvider: HydraProvider;
+  provider: string;
+}) {
+  return (
+    <TwoColumnsScroll
+      sidebarTo="onMessage"
+      title="Listens for new messages from Hydra node"
+      leftSection={Left()}
+      rightSection={Right(hydraProvider, provider)}
+    />
+  );
+}
+
+function Left() {
+  let code = ``;
+  code += `hydraProvider.onMessage((message) => {\n`;
+  code += `  console.log("HydraProvider received message", message);\n`;
+  code += `  // do something with the message\n`;
+  code += `});\n`;
+
+  return (
+    <>
+      <p>
+        Listens for new messages from Hydra node. The callback function will be
+        called with the message as the only argument. Check{" "}
+        <Link href="https://hydra.family/head-protocol/api-reference/#operation-subscribe-/">
+          all events emitted
+        </Link>
+        by the Hydra node.
+      </p>
+      <Codeblock data={code} />
+    </>
+  );
+}
+
+function Right(hydraProvider: HydraProvider, provider: string) {
+  useEffect(() => {
+    hydraProvider.onMessage((message) => {
+      console.log("HydraProvider received message", message);
+      // do something with the message
+    });
+  }, []);
+
+  return <></>;
+}

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

@@ -0,0 +1,66 @@
+import type { NextPage } from "next";
+
+import { HydraProvider } from "@meshsdk/core";
+
+import ButtonFloatDocumentation from "~/components/button/button-float-documentation";
+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 Codeblock from "~/components/text/codeblock";
+import { metaHydra } from "~/data/links-providers";
+import { useProviders } from "~/hooks/useProviders";
+import ProviderHydra from "./hydra-endpoints";
+
+const ReactPage: NextPage = () => {
+  const sidebarItems = [
+    { label: "Initializes Hydra Head", to: "initHead" },
+    { label: "On Message", to: "onMessage" },
+    { label: "Abort Hydra Head", to: "AA" },
+    { label: "Submit Transaction", to: "AA" },
+    { label: "Decommit UTxO", to: "AA" },
+    { label: "Close Hydra Head", to: "AA" },
+    { label: "Contest latest snapshot", to: "AA" },
+    { label: "Fanout", to: "AA" },
+    { label: "Get UTxO", to: "AA" },
+    { label: "Commit Transaction", to: "AA" },
+    { label: "Decommit Transaction", to: "AA" },
+    { label: "Get protocol parameters", to: "AA" },
+  ];
+
+  let code1 = `import { HydraProvider } from "@meshsdk/core";\n\n`;
+  code1 += `const hydraProvider = new HydraProvider('<URL>');`;
+  code1 += `\nawait hydraProvider.connect();`;
+
+  const hydraUrl = useProviders((state) => state.hydraUrl);
+  const hydraProvider = new HydraProvider(hydraUrl);
+
+  return (
+    <>
+      <Metatags title={metaHydra.title} description={metaHydra.desc} />
+      <SidebarFullwidth sidebarItems={sidebarItems}>
+        <TitleIconDescriptionBody
+          title={metaHydra.title}
+          description={metaHydra.desc}
+        >
+          <p>
+            The{" "}
+            <Link href="https://hydra.family/head-protocol/">
+              Hydra Head protocol
+            </Link>{" "}
+            is a layer 2 scaling solution for Cardano rooted in peer-reviewed
+            research that increases transaction throughput and ensures cost
+            efficiency while maintaining rigorous security.
+          </p>
+          <p>Get started:</p>
+          <Codeblock data={code1} />
+        </TitleIconDescriptionBody>
+        <ButtonFloatDocumentation href="https://docs.meshjs.dev/providers/classes/HydraProvider" />
+
+        <ProviderHydra hydraProvider={hydraProvider} provider="hydra" />
+      </SidebarFullwidth>
+    </>
+  );
+};
+
+export default ReactPage;