Feat hydra to beta

.github/workflows/publish.yml

@@ -31,6 +31,7 @@ jobs:
     runs-on: ubuntu-latest
     if: github.event.pull_request.merged == true
     outputs:
+      hydra-version-updated: ${{ steps.compare-versions.outputs.hydra-version-updated }}
       common-version-updated: ${{ steps.compare-versions.outputs.common-version-updated }}
       contract-version-updated: ${{ steps.compare-versions.outputs.contract-version-updated }}
       core-version-updated: ${{ steps.compare-versions.outputs.core-version-updated }}
@@ -51,6 +52,7 @@ jobs:
       - name: Get package version from main branch before merge
         id: pre-merge-version
         run: |
+          HYDRA_PRE_MERGE_VERSION=$(node -p "require('./packages/hydra/package.json').version")
           COMMON_PRE_MERGE_VERSION=$(node -p "require('./packages/mesh-common/package.json').version")
           CONTRACT_PRE_MERGE_VERSION=$(node -p "require('./packages/mesh-contract/package.json').version")
           CORE_PRE_MERGE_VERSION=$(node -p "require('./packages/mesh-core/package.json').version")
@@ -82,6 +84,7 @@ jobs:
       - name: Get package version from main branch after merge
         id: post-merge-version
         run: |
+          HYDRA_POST_MERGE_VERSION=$(node -p "require('./packages/hydra/package.json').version")
           COMMON_POST_MERGE_VERSION=$(node -p "require('./packages/mesh-common/package.json').version")
           CONTRACT_POST_MERGE_VERSION=$(node -p "require('./packages/mesh-contract/package.json').version")
           CORE_POST_MERGE_VERSION=$(node -p "require('./packages/mesh-core/package.json').version")
@@ -93,6 +96,7 @@ jobs:
           TRANSACTION_POST_MERGE_VERSION=$(node -p "require('./packages/mesh-transaction/package.json').version")
           WALLET_POST_MERGE_VERSION=$(node -p "require('./packages/mesh-wallet/package.json').version")
           CLI_POST_MERGE_VERSION=$(node -p "require('./scripts/mesh-cli/package.json').version")
+          echo "hydra_post_merge_version=$HYDRA_POST_MERGE_VERSION" >> "$GITHUB_OUTPUT"
           echo "common_post_merge_version=$COMMON_POST_MERGE_VERSION" >> "$GITHUB_OUTPUT"
           echo "contract_post_merge_version=$CONTRACT_POST_MERGE_VERSION" >> "$GITHUB_OUTPUT"
           echo "core_post_merge_version=$CORE_POST_MERGE_VERSION" >> "$GITHUB_OUTPUT"
@@ -108,6 +112,11 @@ jobs:
       - name: Compare versions
         id: compare-versions
         run: |
+          if [[ "${{ steps.pre-merge-version.outputs.hydra_pre_merge_version }}" != "${{ steps.post-merge-version.outputs.hydra_post_merge_version }}" ]]; then
+              echo "hydra-version-updated=true" >> "$GITHUB_OUTPUT"
+          else
+              echo "common-version-updated=false" >> "$GITHUB_OUTPUT"
+          fi
           if [[ "${{ steps.pre-merge-version.outputs.common_pre_merge_version }}" != "${{ steps.post-merge-version.outputs.common_post_merge_version }}" ]]; then
               echo "common-version-updated=true" >> "$GITHUB_OUTPUT"
           else
@@ -164,6 +173,21 @@ jobs:
               echo "cli-version-updated=false" >> "$GITHUB_OUTPUT"
           fi
 
+  publish-meshsdk-hydra:
+    needs: [build, check-version]
+    if: needs.check-version.outputs.hydra-version-updated == 'true'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          registry-url: https://registry.npmjs.org/
+      - run: npm install && npm run build
+      - run: cd packages/hydra && npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.npm_token}}
+
   publish-meshsdk-common:
     needs: [build, check-version]
     if: needs.check-version.outputs.common-version-updated == 'true'

apps/playground/package.json

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

apps/playground/src/pages/apis/txbuilder/governance/vote-delegation.tsx

@@ -34,7 +34,7 @@ function Left() {
   codeTx += `    rewardAddress,\n`;
   codeTx += `  )\n`;
   codeTx += `  .changeAddress(changeAddress)\n`;
-  codeTx += `  .selectUtxos(utxos, "keepRelevant", "10000000")`;
+  codeTx += `  .selectUtxosFrom(utxos, "keepRelevant", "10000000")`;
 
   let codeBuildSign = `const unsignedTx = await txBuilder.complete();\n`;
   codeBuildSign += `const signedTx = await wallet.signTx(unsignedTx);\n`;

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

@@ -1,7 +1,8 @@
 import type { NextPage } from "next";
 import { useState } from "react";
 
-import { HydraInstance, HydraProvider, MeshWallet } from "@meshsdk/core";
+import { MeshWallet } from "@meshsdk/core";
+import { HydraInstance, HydraProvider } from "@meshsdk/hydra";
 
 import SidebarFullwidth from "~/components/layouts/sidebar-fullwidth";
 import Link from "~/components/link";
@@ -23,7 +24,9 @@ const ReactPage: NextPage = () => {
   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 hydraProvider = new HydraProvider({
+    url: "http://35.189.158.126:4001",
+  });
   const hydraInstance = new HydraInstance({
     provider: hydraProvider,
   });

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

@@ -39,6 +39,28 @@ function Left(
 
   async function startNode() {}
 
+  let codeOnMessage = ``;
+  codeOnMessage += `hydraProvider.onMessage((message) => {\n`;
+  codeOnMessage += `  console.log(message);\n`;
+  codeOnMessage += `});\n`;
+
+  let codeGreetingsMessage = `{\n`;
+  codeGreetingsMessage += `  "peer": "bob-node",\n`;
+  codeGreetingsMessage += `  "seq": 0,\n`;
+  codeGreetingsMessage += `  "tag": "PeerConnected",\n`;
+  codeGreetingsMessage += `  "timestamp": "2023-08-17T18:25:02.903974459Z"\n`;
+  codeGreetingsMessage += `}\n`;
+  codeGreetingsMessage += `{\n`;
+  codeGreetingsMessage += `  "headStatus": "Idle",\n`;
+  codeGreetingsMessage += `  "hydraNodeVersion": "0.12.0-54db2265c257c755df98773c64754c9854d879e8",\n`;
+  codeGreetingsMessage += `  "me": {\n`;
+  codeGreetingsMessage += `    "vkey": "ab159b29b87b498fa060f6045cccf84ecd20cf623f7820ed130ffc849633a120"\n`;
+  codeGreetingsMessage += `  },\n`;
+  codeGreetingsMessage += `  "seq": 1,\n`;
+  codeGreetingsMessage += `  "tag": "Greetings",\n`;
+  codeGreetingsMessage += `  "timestamp": "2023-08-17T18:32:29.092329511Z"\n`;
+  codeGreetingsMessage += `};\n`;
+
   return (
     <>
       <p>
@@ -70,7 +92,14 @@ function Left(
         connection to the API port:
       </p>
 
-      <Codeblock data={`websocat ws://127.0.0.1:4001 | jq`} />
+      <Codeblock data={codeOnMessage} />
+
+      <p>
+        This opens a duplex connection and you should see messages indicating
+        successful connections like:
+      </p>
+
+      <Codeblock data={codeGreetingsMessage} />
     </>
   );
 }

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

@@ -1,9 +1,9 @@
 import { useState } from "react";
 
-import { HydraInstance, HydraProvider, MeshWallet } from "@meshsdk/core";
+import { MeshWallet } from "@meshsdk/core";
+import { HydraInstance } from "@meshsdk/hydra";
 
 import Button from "~/components/button/button";
-import Link from "~/components/link";
 import TwoColumnsScroll from "~/components/sections/two-columns-scroll";
 import Codeblock from "~/components/text/codeblock";
 
@@ -69,7 +69,7 @@ function Left(
         Send this command to initialize a head through the WebSocket connection:
       </p>
 
-      <Codeblock data={`code about starting node`} />
+      <Codeblock data={`await hydraInstance.provider.init();`} />
       <Button
         onClick={() => openHead()}
         style={loading ? "warning" : "light"}
@@ -91,6 +91,24 @@ function Left(
         given to <code>{"{alice,bob}-funds.vk"}</code> beforehand:
       </p>
 
+      {/* todo, for alice and bob */}
+      {/* https://hydra.family/head-protocol/docs/tutorial/#step-4-open-a-hydra-head */}
+
+      {/* cardano-cli query utxo \
+  --address $(cat credentials/alice-funds.addr) \
+  --out-file alice-commit-utxo.json
+
+curl -X POST 127.0.0.1:4001/commit \
+  --data @alice-commit-utxo.json \
+  > alice-commit-tx.json
+
+cardano-cli transaction sign \
+  --tx-file alice-commit-tx.json \
+  --signing-key-file credentials/alice-funds.sk \
+  --out-file alice-commit-tx-signed.json
+
+cardano-cli transaction submit --tx-file alice-commit-tx-signed.json */}
+
       <Codeblock data={`code about starting node`} />
       <Button
         onClick={() => commitFunds()}

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

@@ -1,6 +1,7 @@
 import { useState } from "react";
 
-import { HydraInstance, HydraProvider, MeshWallet } from "@meshsdk/core";
+import { MeshTxBuilder, MeshWallet } from "@meshsdk/core";
+import { HydraInstance, HydraProvider } from "@meshsdk/hydra";
 
 import Button from "~/components/button/button";
 import Link from "~/components/link";
@@ -51,12 +52,52 @@ function Left(
     console.log("UTXOs: ", utxos);
   }
 
-  async function commitFunds() {
-    // commit alice funds
-    await hydraInstance.commitFunds();
+  async function fetchAddressUTxOs() {
+    const utxosAddress = await hydraInstance.provider.fetchAddressUTxOs(
+      "addr_test1vpd5axpq4qsh8sxvzny49cp22gc5tqx0djf6wmjv5cx7q5qyrzuw8",
+    );
+    console.log("UTXOs Address: ", utxosAddress);
+  }
+
+  async function makeTx() {
+    // wallet
+    const walletA = {
+      addr: "addr_test1vpsthwvxgfkkm2lm8ggy0c5345u6vrfctmug6tdyx4rf4mqn2xcyw",
+      key: "58201aae63d93899640e91b51c5e8bd542262df3ecf3246c3854f39c40f4eb83557d",
+    };
+
+    const wallet = new MeshWallet({
+      networkId: 0,
+      key: {
+        type: "cli",
+        payment: walletA.key,
+      },
+      fetcher: hydraInstance.provider,
+      submitter: hydraInstance.provider,
+    });
+
+    const pp = await hydraInstance.provider.fetchProtocolParameters();
+    const utxos = await wallet.getUtxos("enterprise");
+    const changeAddress = walletA.addr;
 
-    // commit bob funds
-    await hydraInstance.commitFunds();
+    const txBuilder = new MeshTxBuilder({
+      fetcher: hydraInstance.provider,
+      params: pp,
+      verbose: true,
+    });
+
+    const unsignedTx = await txBuilder
+      .txOut(
+        "addr_test1vpd5axpq4qsh8sxvzny49cp22gc5tqx0djf6wmjv5cx7q5qyrzuw8",
+        [{ unit: "lovelace", quantity: "3000000" }],
+      )
+      .changeAddress(changeAddress)
+      .selectUtxosFrom(utxos)
+      .complete();
+
+    const signedTx = await wallet.signTx(unsignedTx);
+    const txHash = await hydraInstance.provider.submitTx(signedTx);
+    console.log("txHash", txHash);
   }
 
   return (
@@ -66,8 +107,7 @@ function Left(
         bob using the Hydra head. Hydra Head operates as an isomorphic protocol,
         meaning that functionalities available on the Cardano layer 1 network
         are also available on the layer 2 network. This compatibility allows us
-        to use familiar tools like cardano-cli for transaction creation within
-        the head.
+        to use Mesh for transaction creation within the head.
       </p>
       <p>
         In this example, we will transfer 10 ada from Alice to Bob. Adjust the
@@ -80,16 +120,67 @@ function Left(
         or <code>SnapshotConfirmed</code> messages. Alternatively, we can query
         the current UTxO set directly from the API:
       </p>
-
-      <Codeblock data={`const utxos = await hydraInstance.provider.fetchUTxOs();`} />
+      <Codeblock
+        data={`const utxos = await hydraInstance.provider.fetchUTxOs();`}
+      />
       <Button
         onClick={() => fetchUTxOs()}
         style={loading ? "warning" : "light"}
         disabled={loading}
       >
         Fetch UTxOs
       </Button>
+      <p>
+        From the response, we would need to select a UTxO that is owned by alice
+        to spend:
+      </p>
+      <Codeblock
+        data={`const utxosAddress = await hydraInstance.provider.fetchAddressUTxOs(
+  "addr_test1vpd5axpq4qsh8sxvzny49cp22gc5tqx0djf6wmjv5cx7q5qyrzuw8",
+);`}
+      />
+      <Button
+        onClick={() => fetchAddressUTxOs()}
+        style={loading ? "warning" : "light"}
+        disabled={loading}
+      >
+        Fetch Address UTxOs
+      </Button>
+      <p>
+        Next, similar to the Cardano layer 1, build a transaction using Mesh
+        that spends this UTxO and sends it to an address. If you haven't done so
+        already, obtain the address of your partner to send the funds to.
+      </p>
+      <Codeblock data={`code here`} />
+      <p>
+        Before submission, we need to sign the transaction to authorize spending
+        alice's funds:
+      </p>
+      <Codeblock data={`const signedTx = await wallet.signTx(unsignedTx)`} />
+      <p>
+        Submit the transaction through the already open WebSocket connection.
+        Generate the NewTx command for WebSocket submission:
+      </p>
+      <Codeblock
+        data={`const txHash = await hydraInstance.provider.submitTx(signedTx);`}
+      />
+      <Button
+        onClick={() => makeTx()}
+        style={loading ? "warning" : "light"}
+        disabled={loading}
+      >
+        Build Transaction
+      </Button>
 
+      <p>
+        The transation will be validated by both hydra-nodes and either result
+        in a TxInvalid message with a reason, or a TxValid message and a
+        SnapshotConfirmed with the new UTxO available in the head shortly after.
+      </p>
+      <p>
+        🎉 Congratulations, you just processed your first Cardano transaction
+        off-chain in a Hydra head!
+      </p>
     </>
   );
 }