docs: add vesting tutorial and init serializer

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

@@ -4,6 +4,7 @@ import SidebarFullwidth from "~/components/layouts/sidebar-fullwidth";
 import TitleIconDescriptionBody from "~/components/sections/title-icon-description-body";
 import Metatags from "~/components/site/metatags";
 import { metaSerializers } from "~/data/links-utilities";
+import SerializeNativeScript from "./serialize-native-script";
 
 const ReactPage: NextPage = () => {
   const sidebarItems = [{ label: "Coming soon", to: "resolveDataHash" }];
@@ -22,6 +23,8 @@ const ReactPage: NextPage = () => {
         >
           <></>
         </TitleIconDescriptionBody>
+
+        <SerializeNativeScript />
       </SidebarFullwidth>
     </>
   );

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

@@ -0,0 +1,65 @@
+import {
+  deserializeAddress,
+  NativeScript,
+  serializeNativeScript,
+} from "@meshsdk/core";
+
+import LiveCodeDemo from "~/components/sections/live-code-demo";
+import TwoColumnsScroll from "~/components/sections/two-columns-scroll";
+import { demoAddresses } from "~/data/cardano";
+
+export default function SerializeNativeScript() {
+  return (
+    <TwoColumnsScroll
+      sidebarTo="serializeNativeScript"
+      title="Serialize Native Script"
+      leftSection={Left()}
+      rightSection={Right()}
+    />
+  );
+}
+
+function Left() {
+  return (
+    <>
+      <p>Serialize Native script into bech32 address.</p>
+    </>
+  );
+}
+
+function Right() {
+  async function runDemo() {
+    const { pubKeyHash: keyHash } = deserializeAddress(
+      demoAddresses.testnetPayment,
+    );
+
+    const nativeScript: NativeScript = {
+      type: "all",
+      scripts: [
+        {
+          type: "before",
+          slot: "99999999",
+        },
+        {
+          type: "sig",
+          keyHash: keyHash,
+        },
+      ],
+    };
+
+    const address = serializeNativeScript(nativeScript);
+
+    return address;
+  }
+
+  let codeSnippet = ``;
+
+  return (
+    <LiveCodeDemo
+      title="Serialize Native Script"
+      subtitle="Serialize Native script into bech32 address"
+      code={codeSnippet}
+      runCodeFunction={runDemo}
+    ></LiveCodeDemo>
+  );
+}