From 28cfe2575a61c2bbdfd588090469acdbc2b051c0 Mon Sep 17 00:00:00 2001
From: leonlai257 <leonlai257@gmail.com>
Date: Sun, 15 Sep 2024 21:49:44 -0400
Subject: [PATCH 1/2] feat(frontend-docs): Updated frontend docs for utilities
 functions: resolvers/serializers/deserializer

---
 apps/playground/src/data/links-utilities.ts   |  4 +-
 .../deserializers/deserialize-datum.tsx       |  2 +-
 .../deserializers/deserialize-poolid.tsx      |  4 +-
 .../pages/apis/utilities/resolvers/index.tsx  | 41 ++++++-----
 .../resolvers/resolve-script-hash-rep-id.tsx  | 68 +++++++++++++++++++
 .../serializers/serialize-address-obj.tsx     | 16 ++++-
 .../serializers/serialize-native-script.tsx   | 16 +++++
 .../serializers/serialize-plutus-script.tsx   |  6 ++
 .../serializers/serialize-poolid.tsx          | 26 ++++++-
 .../serializers/serialize-reward-address.tsx  | 60 +++++++++++++++-
 10 files changed, 213 insertions(+), 30 deletions(-)
 create mode 100644 apps/playground/src/pages/apis/utilities/resolvers/resolve-script-hash-rep-id.tsx

diff --git a/apps/playground/src/data/links-utilities.ts b/apps/playground/src/data/links-utilities.ts
index 7bc9f776..c600d465 100644
--- 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
index 595d73eb..43c5d870 100644
--- 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
index bbfe34e9..8b0a7e86 100644
--- 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
index f9ce53c9..1ffa3829 100644
--- a/apps/playground/src/pages/apis/utilities/resolvers/index.tsx
+++ b/apps/playground/src/pages/apis/utilities/resolvers/index.tsx
@@ -7,13 +7,10 @@ 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";
@@ -21,20 +18,24 @@ 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-script-hash-rep-id.tsx b/apps/playground/src/pages/apis/utilities/resolvers/resolve-script-hash-rep-id.tsx
new file mode 100644
index 00000000..f3a03d98
--- /dev/null
+++ b/apps/playground/src/pages/apis/utilities/resolvers/resolve-script-hash-rep-id.tsx
@@ -0,0 +1,68 @@
+
+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 += `const dataHash = resolveScriptHashDRepId(resolveNativeScriptHash(script));`;
+    codeSnippet += `return dataHash;`;
+
+  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
index 885660c0..b9392ac4 100644
--- 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
index d39e0ca1..ed386af1 100644
--- 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,22 @@ 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`;
 
   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
index 86071524..1c45b76f 100644
--- 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,12 @@ function Right() {
   }
 
   let codeSnippet = ``;
+  codeSnippet += `const script: PlutusScript = {\n`;
+  codeSnippet += `  code: demoPlutusAlwaysSucceedScript,\n`;
+  codeSnippet += `  version: "V2",\n`;
+  codeSnippet += `};\n\n`;
+  codeSnippet += `const address = serializePlutusScript(script);\n\n`;
+  codeSnippet += `return address;\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
index 3a2b68ff..de37611e 100644
--- 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,11 +28,13 @@ 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
@@ -33,6 +42,17 @@ function Right() {
       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
index 6c37604c..21586eb0 100644
--- 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,11 +29,15 @@ 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
@@ -33,6 +45,48 @@ function Right() {
       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>
   );
 }

From 2eb23ab5c13a8da37334b5353cd58abce2c0a5de Mon Sep 17 00:00:00 2001
From: "Hong Jing (Jingles)" <jinglescode@gmail.com>
Date: Mon, 16 Sep 2024 10:45:59 +0800
Subject: [PATCH 2/2] clean up

---
 .../apis/utilities/resolvers/resolve-native-script-hash.tsx    | 2 +-
 .../apis/utilities/resolvers/resolve-script-hash-rep-id.tsx    | 3 +--
 .../apis/utilities/serializers/serialize-native-script.tsx     | 2 ++
 .../apis/utilities/serializers/serialize-plutus-script.tsx     | 3 +--
 4 files changed, 5 insertions(+), 5 deletions(-)

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
index c9d3ce90..ae6ded69 100644
--- 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
index f3a03d98..78b9299d 100644
--- 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
@@ -54,8 +54,7 @@ function Right() {
     codeSnippet += `      },\n`;
     codeSnippet += `    ],\n`;
     codeSnippet += `  };\n\n`;
-    codeSnippet += `const dataHash = resolveScriptHashDRepId(resolveNativeScriptHash(script));`;
-    codeSnippet += `return dataHash;`;
+    codeSnippet += `resolveScriptHashDRepId(resolveNativeScriptHash(script));`;
 
   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
index ed386af1..6c1e02fd 100644
--- a/apps/playground/src/pages/apis/utilities/serializers/serialize-native-script.tsx
+++ b/apps/playground/src/pages/apis/utilities/serializers/serialize-native-script.tsx
@@ -69,6 +69,8 @@ function Right() {
   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
index 1c45b76f..939a4d10 100644
--- a/apps/playground/src/pages/apis/utilities/serializers/serialize-plutus-script.tsx
+++ b/apps/playground/src/pages/apis/utilities/serializers/serialize-plutus-script.tsx
@@ -40,8 +40,7 @@ function Right() {
   codeSnippet += `  code: demoPlutusAlwaysSucceedScript,\n`;
   codeSnippet += `  version: "V2",\n`;
   codeSnippet += `};\n\n`;
-  codeSnippet += `const address = serializePlutusScript(script);\n\n`;
-  codeSnippet += `return address;\n`;
+  codeSnippet += `serializePlutusScript(script);\n\n`;
 
   return (
     <LiveCodeDemo