docs: init serializers and deserializers

apps/playground/src/pages/apis/utilities/deserializers/deserialize-address.tsx

@@ -0,0 +1,63 @@
+import { useState } from "react";
+
+import { deserializeAddress } 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 { demoAddresses } from "~/data/cardano";
+
+export default function DeserializeAddress() {
+  return (
+    <TwoColumnsScroll
+      sidebarTo="deserializeAddress"
+      title="Deserialize Address"
+      leftSection={Left()}
+      rightSection={Right()}
+    />
+  );
+}
+
+function Left() {
+  return (
+    <>
+      <p>
+        Deserialize bech32 address into payment and staking parts, with
+        visibility of whether they are script or key hash.
+      </p>
+    </>
+  );
+}
+
+function Right() {
+  const [userInput, setUserInput] = useState<string>(
+    demoAddresses.testnetPayment,
+  );
+
+  async function runDemo() {
+    return deserializeAddress(userInput);
+  }
+
+  let codeSnippet = `deserializeAddress('${userInput}');`;
+
+  return (
+    <LiveCodeDemo
+      title="Deserialize Address"
+      subtitle="Convert bech32 address to The deserialized address object"
+      code={codeSnippet}
+      runCodeFunction={runDemo}
+    >
+      <InputTable
+        listInputs={[
+          <Input
+            value={userInput}
+            onChange={(e) => setUserInput(e.target.value)}
+            label="Address"
+            key={0}
+          />,
+        ]}
+      />
+    </LiveCodeDemo>
+  );
+}

apps/playground/src/pages/apis/utilities/deserializers/index.tsx

@@ -4,10 +4,11 @@ import SidebarFullwidth from "~/components/layouts/sidebar-fullwidth";
 import TitleIconDescriptionBody from "~/components/sections/title-icon-description-body";
 import Metatags from "~/components/site/metatags";
 import { metaDeserializers } from "~/data/links-utilities";
+import DeserializeAddress from "./deserialize-address";
 
 const ReactPage: NextPage = () => {
   const sidebarItems = [
-    { label: "Coming soon", to: "resolveDataHash" },
+    { label: "Deserialize Address", to: "deserializeAddress" },
   ];
 
   return (
@@ -24,6 +25,8 @@ const ReactPage: NextPage = () => {
         >
           <></>
         </TitleIconDescriptionBody>
+
+        <DeserializeAddress />
       </SidebarFullwidth>
     </>
   );

apps/playground/src/pages/apis/utilities/serializers/index.tsx

@@ -5,9 +5,13 @@ import TitleIconDescriptionBody from "~/components/sections/title-icon-descripti
 import Metatags from "~/components/site/metatags";
 import { metaSerializers } from "~/data/links-utilities";
 import SerializeNativeScript from "./serialize-native-script";
+import SerializePlutusScript from "./serialize-plutus-script";
 
 const ReactPage: NextPage = () => {
-  const sidebarItems = [{ label: "Coming soon", to: "resolveDataHash" }];
+  const sidebarItems = [
+    { label: "Serialize Native Script", to: "serializeNativeScript" },
+    { label: "Serialize Plutus Script", to: "serializePlutusScript" },
+  ];
 
   return (
     <>
@@ -25,6 +29,7 @@ const ReactPage: NextPage = () => {
         </TitleIconDescriptionBody>
 
         <SerializeNativeScript />
+        <SerializePlutusScript />
       </SidebarFullwidth>
     </>
   );

apps/playground/src/pages/apis/utilities/serializers/serialize-plutus-script.tsx

@@ -0,0 +1,48 @@
+import { PlutusScript, serializePlutusScript } from "@meshsdk/core";
+
+import LiveCodeDemo from "~/components/sections/live-code-demo";
+import TwoColumnsScroll from "~/components/sections/two-columns-scroll";
+import { demoPlutusAlwaysSucceedScript } from "~/data/cardano";
+
+export default function SerializePlutusScript() {
+  return (
+    <TwoColumnsScroll
+      sidebarTo="serializePlutusScript"
+      title="Serialize Plutus Script"
+      leftSection={Left()}
+      rightSection={Right()}
+    />
+  );
+}
+
+function Left() {
+  return (
+    <>
+      <p>Serialize Plutus script into bech32 address.</p>
+    </>
+  );
+}
+
+function Right() {
+  async function runDemo() {
+    const script: PlutusScript = {
+      code: demoPlutusAlwaysSucceedScript,
+      version: "V2",
+    };
+
+    const address = serializePlutusScript(script);
+
+    return address;
+  }
+
+  let codeSnippet = ``;
+
+  return (
+    <LiveCodeDemo
+      title="Serialize Plutus Script"
+      subtitle="Serialize Plutus script into bech32 address"
+      code={codeSnippet}
+      runCodeFunction={runDemo}
+    ></LiveCodeDemo>
+  );
+}