Merge pull request #298 from MeshJS/feature/utilities-doc

Feat: updated frontend doc for utilities functions: resolvers / serializer / deserializer
MeshJS · Sep 16, 2024 · b35b464 · b35b464
2 parents 4b704b4 + 2eb23ab
commit b35b464
Show file tree

Hide file tree

Showing 11 changed files with 214 additions and 31 deletions.
diff --git a/apps/playground/src/data/links-utilities.ts b/apps/playground/src/data/links-utilities.ts
@@ -29,8 +29,8 @@ export const metaDeserializers = {
 };
 
 export const linksUtilities: MenuItem[] = [
-  // metaSerializers,
-  // metaDeserializers,
+  metaSerializers,
+  metaDeserializers,
   metaResolvers,
 ];
 

diff --git a/apps/playground/src/pages/apis/utilities/deserializers/deserialize-datum.tsx b/apps/playground/src/pages/apis/utilities/deserializers/deserialize-datum.tsx
@@ -27,7 +27,7 @@ function Left() {
 }
 
 function Right() {
-  const [userInput, setUserInput] = useState<string>("");
+  const [userInput, setUserInput] = useState<string>("167a4a048d87fcee0425ed200615ff2356f472c6413472c6106b8c5da52e3fd0");
 
   async function runDemo() {
     return deserializeDatum(userInput);

diff --git a/apps/playground/src/pages/apis/utilities/deserializers/deserialize-poolid.tsx b/apps/playground/src/pages/apis/utilities/deserializers/deserialize-poolid.tsx
@@ -22,7 +22,7 @@ export default function DeserializePoolId() {
 function Left() {
   return (
     <>
-      <p>Deserialize a script from a poolxxxx to Ed25519 key hash.</p>
+      <p>Deserialize a script from a pool id to Ed25519 key hash.</p>
     </>
   );
 }
@@ -39,7 +39,7 @@ function Right() {
   return (
     <LiveCodeDemo
       title="Deserialize Pool Id"
-      subtitle="Deserialize a script from a poolxxxx to Ed25519 key hash"
+      subtitle="Deserialize a script from a pool id to Ed25519 key hash"
       code={codeSnippet}
       runCodeFunction={runDemo}
     >

diff --git a/apps/playground/src/pages/apis/utilities/resolvers/index.tsx b/apps/playground/src/pages/apis/utilities/resolvers/index.tsx
@@ -7,34 +7,35 @@ import { metaResolvers } from "~/data/links-utilities";
 import ResolveDataHash from "./resolve-data-hash";
 import ResolveEpochNumber from "./resolve-epoch-number";
 import ResolveFingerprint from "./resolve-fingerprint";
-import ResolveNativeScriptAddress from "./resolve-native-script-address";
 import ResolveNativeScriptHash from "./resolve-native-script-hash";
-import ResolvePaymentKeyHash from "./resolve-payment-key-hash";
-import ResolvePlutusScriptAddress from "./resolve-plutus-script-address";
-import ResolvePlutusScriptHash from "./resolve-plutus-script-hash";
 import ResolvePrivateKey from "./resolve-private-key";
 import ResolveScriptHash from "./resolve-script-hash";
+import ResolveScriptHashDRepId from "./resolve-script-hash-rep-id";
 import ResolveSlotNumber from "./resolve-slot-number";
 import ResolveRewardAddress from "./resolve-stake-address";
 import ResolveRewardHash from "./resolve-stake-hash";
 import ResolveTxHash from "./resolve-tx-hash";
 
 const ReactPage: NextPage = () => {
   const sidebarItems = [
+    { label: "Private Key", to: "resolvePrivateKey" },
+    { label: "Transaction Hash", to: "resolveTxHash" },
     { label: "Data Hash", to: "resolveDataHash" },
-    { label: "Fingerprint", to: "resolveFingerprint" },
-    { label: "Native Script Address", to: "resolveNativeScriptAddress" },
     { label: "Native Script Hash", to: "resolveNativeScriptHash" },
-    { label: "Payment Key Hash", to: "resolvePaymentKeyHash" },
-    { label: "Plutus Script Address", to: "resolvePlutusScriptAddress" },
-    { label: "Plutus Script Hash", to: "resolvePlutusScriptHash" },
-    { label: "Private Key", to: "resolvePrivateKey" },
     { label: "Script Hash", to: "resolveScriptHash" },
+    { label: "Fingerprint", to: "resolveFingerprint" },
     { label: "Stake Address", to: "resolveRewardAddress" },
     { label: "Stake Key Hash", to: "resolveRewardHash" },
-    { label: "Transaction Hash", to: "resolveTxHash" },
+    { label: "Script Hash Rep Id", to: "resolveScriptHashDRepId" },
     { label: "Epoch Number", to: "resolveEpochNumber" },
     { label: "Slot Number", to: "resolveSlotNumber" },
+
+    // ------------------- Deprecated zone ---------------------
+
+    // { label: "Native Script Address", to: "resolveNativeScriptAddress" },
+    // { label: "Payment Key Hash", to: "resolvePaymentKeyHash" },
+    // { label: "Plutus Script Address", to: "resolvePlutusScriptAddress" },
+    // { label: "Plutus Script Hash", to: "resolvePlutusScriptHash" },
   ];
 
   return (
@@ -49,20 +50,24 @@ const ReactPage: NextPage = () => {
           <></>
         </TitleIconDescriptionBody>
 
+        <ResolvePrivateKey />
+        <ResolveTxHash />
         <ResolveDataHash />
-        <ResolveFingerprint />
-        <ResolveNativeScriptAddress />
         <ResolveNativeScriptHash />
-        <ResolvePaymentKeyHash />
-        <ResolvePlutusScriptAddress />
-        <ResolvePlutusScriptHash />
-        <ResolvePrivateKey />
         <ResolveScriptHash />
         <ResolveRewardAddress />
+        <ResolveFingerprint />
         <ResolveRewardHash />
-        <ResolveTxHash />
+        <ResolveScriptHashDRepId />
         <ResolveEpochNumber />
         <ResolveSlotNumber />
+
+        {/* ------------------- Deprecated zone ---------------------*/}
+        {/* <ResolveNativeScriptAddress /> */}
+        {/* <ResolvePaymentKeyHash /> */}
+        {/* <ResolvePlutusScriptAddress /> */}
+        {/* <ResolvePlutusScriptHash /> */}
+
       </SidebarFullwidth>
     </>
   );

diff --git a/apps/playground/src/pages/apis/utilities/resolvers/resolve-native-script-hash.tsx b/apps/playground/src/pages/apis/utilities/resolvers/resolve-native-script-hash.tsx
@@ -66,7 +66,7 @@ function Right() {
   codeSnippet += `  ],\n`;
   codeSnippet += `};\n`;
   codeSnippet += `\n`;
-  codeSnippet += `const hash = resolveNativeScriptHash(nativeScript);`;
+  codeSnippet += `resolveNativeScriptHash(nativeScript);`;
 
   return (
     <LiveCodeDemo

diff --git a/apps/playground/src/pages/apis/utilities/resolvers/resolve-script-hash-rep-id.tsx b/apps/playground/src/pages/apis/utilities/resolvers/resolve-script-hash-rep-id.tsx
@@ -0,0 +1,67 @@
+
+import { NativeScript, resolveNativeScriptHash, resolveScriptHashDRepId } from "@meshsdk/core";
+
+import LiveCodeDemo from "~/components/sections/live-code-demo";
+import TwoColumnsScroll from "~/components/sections/two-columns-scroll";
+import { demoPubKeyHash } from "~/data/cardano";
+
+export default function ResolveScriptHashDRepId() {
+  return (
+    <TwoColumnsScroll
+      sidebarTo="resolveScriptHashDRepId"
+      title="Resolve Rep Id"
+      leftSection={Left()}
+      rightSection={Right()}
+    />
+  );
+}
+
+function Left() {
+  return (
+    <>
+      <p>
+        Resolve Rep Id from scrip hash.
+      </p>
+
+    </>
+  );
+}
+
+function Right() {
+
+  async function runDemo() {
+    let script: NativeScript = {
+        type: "all",
+        scripts: [
+          {
+            type: "sig",
+            keyHash: demoPubKeyHash
+          },
+        ],
+      };
+
+    const dataHash = resolveScriptHashDRepId(resolveNativeScriptHash(script));
+    return dataHash;
+  }
+
+  let codeSnippet = ``;
+    codeSnippet += `let script: NativeScript = {\n`;    
+    codeSnippet += `    type: "all",\n`;
+    codeSnippet += `    scripts: [\n`;
+    codeSnippet += `      {\n`;
+    codeSnippet += `        type: "sig",\n`;
+    codeSnippet += `        keyHash: '${demoPubKeyHash}'\n`;
+    codeSnippet += `      },\n`;
+    codeSnippet += `    ],\n`;
+    codeSnippet += `  };\n\n`;
+    codeSnippet += `resolveScriptHashDRepId(resolveNativeScriptHash(script));`;
+
+  return (
+    <LiveCodeDemo
+      title="Resolve Rep Id"
+      subtitle="Resolve rep id from scrip hash"
+      code={codeSnippet}
+      runCodeFunction={runDemo}
+    ></LiveCodeDemo>
+  );
+}
diff --git a/apps/playground/src/pages/apis/utilities/serializers/serialize-address-obj.tsx b/apps/playground/src/pages/apis/utilities/serializers/serialize-address-obj.tsx
@@ -1,5 +1,9 @@
+
+import { scriptAddress, serializeAddressObj } from "@meshsdk/core";
+
 import LiveCodeDemo from "~/components/sections/live-code-demo";
 import TwoColumnsScroll from "~/components/sections/two-columns-scroll";
+import { demoPubKeyHash, demoStakeCredential } from "~/data/cardano";
 
 export default function SerializeAddressObj() {
   return (
@@ -22,10 +26,20 @@ function Left() {
 
 function Right() {
   async function runDemo() {
-    // return serializeAddressObj(address);
+    const address = scriptAddress(
+      demoPubKeyHash,
+      demoStakeCredential
+    );
+
+    return serializeAddressObj(address);
   }
 
   let codeSnippet = ``;
+  codeSnippet += `const address = scriptAddress(\n`;
+  codeSnippet += `  '${demoPubKeyHash}',\n`;
+  codeSnippet += `  '${demoStakeCredential}'\n`;
+  codeSnippet += `);\n\n`;
+  codeSnippet += `serializeAddressObj(address);`;
 
   return (
     <LiveCodeDemo

diff --git a/apps/playground/src/pages/apis/utilities/serializers/serialize-native-script.tsx b/apps/playground/src/pages/apis/utilities/serializers/serialize-native-script.tsx
@@ -53,6 +53,24 @@ function Right() {
   }
 
   let codeSnippet = ``;
+  codeSnippet += `const { pubKeyHash: keyHash } = deserializeAddress(\n`;
+  codeSnippet += `  '${demoAddresses.testnetPayment}',\n`;
+  codeSnippet += `);\n\n`;
+  codeSnippet += `const nativeScript: NativeScript = {\n`;
+  codeSnippet += `  type: "all",\n`;
+  codeSnippet += `  scripts: [\n`;
+  codeSnippet += `    {\n`;
+  codeSnippet += `      type: "before",\n`;
+  codeSnippet += `      slot: "99999999",\n`;
+  codeSnippet += `    },\n`;
+  codeSnippet += `    {\n`;
+  codeSnippet += `      type: "sig",\n`;
+  codeSnippet += `      keyHash: keyHash,\n`;
+  codeSnippet += `    },\n`;
+  codeSnippet += `  ],\n`;
+  codeSnippet += `};\n`;
+  codeSnippet += `\n`;
+  codeSnippet += `serializeNativeScript(nativeScript);\n`;
 
   return (
     <LiveCodeDemo

diff --git a/apps/playground/src/pages/apis/utilities/serializers/serialize-plutus-script.tsx b/apps/playground/src/pages/apis/utilities/serializers/serialize-plutus-script.tsx
@@ -36,6 +36,11 @@ function Right() {
   }
 
   let codeSnippet = ``;
+  codeSnippet += `const script: PlutusScript = {\n`;
+  codeSnippet += `  code: demoPlutusAlwaysSucceedScript,\n`;
+  codeSnippet += `  version: "V2",\n`;
+  codeSnippet += `};\n\n`;
+  codeSnippet += `serializePlutusScript(script);\n\n`;
 
   return (
     <LiveCodeDemo

diff --git a/apps/playground/src/pages/apis/utilities/serializers/serialize-poolid.tsx b/apps/playground/src/pages/apis/utilities/serializers/serialize-poolid.tsx
@@ -1,5 +1,12 @@
+import { useState } from "react";
+
+import { serializePoolId } from "@meshsdk/core";
+
+import Input from "~/components/form/input";
+import InputTable from "~/components/sections/input-table";
 import LiveCodeDemo from "~/components/sections/live-code-demo";
 import TwoColumnsScroll from "~/components/sections/two-columns-scroll";
+import { demoPubKeyHash } from "~/data/cardano";
 
 export default function SerializePoolId() {
   return (
@@ -21,18 +28,31 @@ function Left() {
 }
 
 function Right() {
+  const [userInput, setUserInput] = useState<string>(demoPubKeyHash);
+
   async function runDemo() {
-    // return serializePoolId(address);
+    return serializePoolId(userInput);
   }
 
-  let codeSnippet = ``;
+  let codeSnippet = `serializePoolId('${userInput}');`;
 
   return (
     <LiveCodeDemo
       title="Serialize Pool ID"
       subtitle="Resolve the pool ID from hash"
       code={codeSnippet}
       runCodeFunction={runDemo}
-    ></LiveCodeDemo>
+    >
+       <InputTable
+        listInputs={[
+          <Input
+            value={userInput}
+            onChange={(e) => setUserInput(e.target.value)}
+            label="Pool Id"
+            key={0}
+          />,
+        ]}
+      />
+    </LiveCodeDemo>
   );
 }
diff --git a/apps/playground/src/pages/apis/utilities/serializers/serialize-reward-address.tsx b/apps/playground/src/pages/apis/utilities/serializers/serialize-reward-address.tsx
@@ -1,5 +1,13 @@
+import { useState } from "react";
+
+import { serializeRewardAddress } from "@meshsdk/core";
+
+import Input from "~/components/form/input";
+import Select from "~/components/form/select";
+import InputTable from "~/components/sections/input-table";
 import LiveCodeDemo from "~/components/sections/live-code-demo";
 import TwoColumnsScroll from "~/components/sections/two-columns-scroll";
+import { demoPubKeyHash } from "~/data/cardano";
 
 export default function SerializeRewardAddress() {
   return (
@@ -21,18 +29,64 @@ function Left() {
 }
 
 function Right() {
+  const [userInput, setUserInput] = useState(demoPubKeyHash)
+  const [isScriptHash, setIsScriptHash] = useState(true);
+  const [network, setNetwork] = useState<"testnet" | "mainnet">("testnet");
+
   async function runDemo() {
-    // return serializeRewardAddress(address);
+    return serializeRewardAddress(userInput, isScriptHash, network === "testnet" ? 0 : 1);
   }
 
-  let codeSnippet = ``;
+  let codeSnippet = `serializeRewardAddress('${userInput}', ${isScriptHash === true ? 'true': 'false'}, ${network === "testnet" ? 0 : 1});`;
 
   return (
     <LiveCodeDemo
       title="Serialize Reward Address"
       subtitle="Serialize a script hash or key hash into bech32 reward address"
       code={codeSnippet}
       runCodeFunction={runDemo}
-    ></LiveCodeDemo>
+    >
+      <InputTable
+        listInputs={[
+          <Input
+            value={userInput}
+            onChange={(e) => setUserInput(e.target.value)}
+            label="Script Hash/Key Hash"
+            key={0}
+          />,
+          <Select
+          id="chooseIsScriptHash"
+          options={{
+            'true': 'true',
+            'false': 'false', 
+          }}
+          value={isScriptHash === true ? 'true': 'false'}
+          onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
+            setIsScriptHash(
+              e.target.value === 'true' ? true : false,
+            )
+          }
+          label="Is Script Hash"
+          key={1}
+        />,
+        <Select
+            id="chooseNetwork"
+            options={{
+              testnet: "testnet",
+              mainnet: "mainnet",
+            }}
+            value={userInput}
+            onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
+              setNetwork(
+                e.target.value as  "testnet" | "mainnet",
+              )
+            }
+            label="Select network"
+            key={2}
+          />,
+        ]}
+      />
+
+    </LiveCodeDemo>
   );
 }