Merge pull request #301 from MeshJS/update-docs-provider-resolver

update docs provider and resolver

apps/playground/src/data/links-catalyst.ts → apps/playground/src/data/catalyst.ts

@@ -12,10 +12,11 @@ export const fund12 = [
     title: "Cardano Service Layer Framework for DApps",
     desc: "R&D a framework to quickly spin up a service layer for specific Cardano DApps, allowing DApps to re-use all infrastructure such as contracts and MeshJS, while possible for custom protocol parameters.",
     url: "https://cardano.ideascale.com/c/idea/121847",
-    completed: [],
-    tobecompleted: [
+    completed: [
       `Parallel Cardano Blockchain MeshJS Integration`,
       `Customized Protocol Parameters`,
+    ],
+    tobecompleted: [
       `Persistent Record & Immutability`,
       `Framework DevOps`,
       `Documentation and training materials`,
@@ -27,24 +28,20 @@ export const fund12 = [
       "Mesh New Features to Improve Developer experience and Cardano Adoption",
     desc: "We will upgrade Mesh by implementing CIP 45, WebRTC wallet connect, handle multiple serialization libs, revamp to support backend transactions building, and improve error messages to improve DevXP.",
     url: "https://cardano.ideascale.com/c/idea/122160",
-    completed: [],
-    tobecompleted: [
-      "CIP 45",
+    completed: [
       "Mesh application wallet",
       "Modular CSL library",
-      "Improve error messages",
       "Wallet support for private blockchain networks (e.g. Yaci)",
     ],
+    tobecompleted: ["CIP 45", "Improve error messages"],
     status: "In Progress",
   },
   {
     title: "Mesh Software as a Service",
     desc: "We provide hosted server instances for wallet and transactions builder by restful APIs, this allow integration and interaction to Cardano blockchain from any technology stacks and systems.",
     url: "https://cardano.ideascale.com/c/idea/122098",
-    completed: [],
+    completed: ["Cloud infrastructure and transaction endpoints"],
     tobecompleted: [
-      "Cloud infrastructure and transaction endpoints",
-      "Upgrade Mesh SDK to support SaaS",
       "Hosted wallet / private key for signing",
       "User-defined transaction building",
       "JSON schema for transaction",
@@ -56,13 +53,13 @@ export const fund12 = [
       "Maintaining Mesh SDK, community support and content creation to onboard developers",
     desc: "Maintenance and operations of Mesh SDK, community support and content creation, in order to onboard developers and users to the Cardano blockchain ecosystem.",
     url: "https://cardano.ideascale.com/c/idea/122471",
-    completed: [],
-    tobecompleted: [
+    completed: [
       `Provide community support`,
       `Resolve GitHub issues`,
       `Create tutorials and documentation`,
       `Create workshops and live coding sessions`,
     ],
+    tobecompleted: [],
     status: "In Progress",
   },
 ];
@@ -98,12 +95,11 @@ export const fund11 = [
       "Resolved numerous reported GitHub issues",
       "Active Discord engagement to help developers",
       "Transaction building support for Hydra apps",
-    ],
-    tobecompleted: [
       "Plutus version 3 integration",
       "Revamped/refactored transaction and utilities class",
       "Conway features",
     ],
+    tobecompleted: [],
     status: "In Progress",
   },
 ];
@@ -120,8 +116,9 @@ export const fund10 = [
       "Workshops and live coding",
       "Community Q&A support",
       "Demos and tutorials repository",
+      "Mesh PBL Season #1",
     ],
-    tobecompleted: ["Mesh PBL Season #1", "Student projects"],
+    tobecompleted: ["Student projects"],
     status: "In Progress",
   },
 ];

apps/playground/src/data/links-about.ts

@@ -1,7 +1,7 @@
 import { FilmIcon, HeartIcon } from "@heroicons/react/24/solid";
 
 import { MenuItem } from "~/types/menu-item";
-import { metaCatalyst } from "./links-catalyst";
+import { metaCatalyst } from "./catalyst";
 
 export const metaAboutUs = {
   link: `/about`,

apps/playground/src/pages/about/catalyst/index.tsx

@@ -4,7 +4,7 @@ import Link from "~/components/link";
 import HeaderAndCards from "~/components/layouts/header-and-cards";
 import Metatags from "~/components/site/metatags";
 import Header3 from "~/components/text/header3";
-import { fund10, fund11, fund12, metaCatalyst } from "~/data/links-catalyst";
+import { fund10, fund11, fund12, metaCatalyst } from "~/data/catalyst";
 
 const ReactPage: NextPage = () => {
   return (

apps/playground/src/pages/apis/utilities/resolvers/resolve-epoch-number.tsx

@@ -1,12 +1,13 @@
 import { useState } from "react";
-import Link from "~/components/link";
 
 import { resolveEpochNo } from "@meshsdk/core";
 
 import Select from "~/components/form/select";
+import Link from "~/components/link";
 import InputTable from "~/components/sections/input-table";
 import LiveCodeDemo from "~/components/sections/live-code-demo";
 import TwoColumnsScroll from "~/components/sections/two-columns-scroll";
+import Codeblock from "~/components/text/codeblock";
 
 export default function ResolveEpochNumber() {
   return (
@@ -20,37 +21,53 @@ export default function ResolveEpochNumber() {
 }
 
 function Left() {
+  let code1 = `import { resolveEpochNo } from '@meshsdk/core';\n`;
+
+  let code2 = `${code1}const epoch = resolveEpochNo('preprod');`;
+
+  let code3 = `${code1}`;
+  code3 += `let oneYearFromNow = new Date();\n`;
+  code3 += `oneYearFromNow.setFullYear(oneYearFromNow.getFullYear() + 1);\n`;
+  code3 += `const epoch = resolveEpochNo('preprod', oneYearFromNow.getTime());`;
+
   return (
     <>
       <p>
-        Converts datum into hash. Getting the hash is useful when you need to
-        query for the UTXO that contain the assets you need for your
-        transaction's input.
+        With <code>resolveEpochNo</code>, you can get the current epoch with:
       </p>
+      <Codeblock data={code2} />
       <p>
-        Explore <Link href="/apis/transaction">Transaction</Link> to learn more
-        about designing Datum, and learn how to query for UTXOs containing the
-        datum hash.
+        You can also provide date in <code>milliseconds</code> to get epoch in
+        the past or the future. For example, get the epoch 1 year from now:
       </p>
+      <Codeblock data={code3} />
     </>
   );
 }
 
 function Right() {
+  return (
+    <>
+      <Right1 />
+      <Right2 />
+    </>
+  );
+}
+
+function Right1() {
   const [userInput, setUserInput] = useState<
     "preprod" | "testnet" | "preview" | "mainnet"
   >("preprod");
 
   async function runDemo() {
-    const slot = resolveEpochNo(userInput);
-    return slot;
+    return resolveEpochNo(userInput);
   }
 
   let codeSnippet = `resolveEpochNo('${userInput}');`;
 
   return (
     <LiveCodeDemo
-      title="Resolve Epoch Number"
+      title="Resolve Epoch number"
       subtitle="Get the epoch number for the network"
       code={codeSnippet}
       runCodeFunction={runDemo}
@@ -79,3 +96,51 @@ function Right() {
     </LiveCodeDemo>
   );
 }
+
+function Right2() {
+  const [userInput, setUserInput] = useState<
+    "preprod" | "testnet" | "preview" | "mainnet"
+  >("preprod");
+
+  async function runDemo() {
+    let oneYearFromNow = new Date();
+    oneYearFromNow.setFullYear(oneYearFromNow.getFullYear() + 1);
+    return resolveEpochNo(userInput, oneYearFromNow.getTime());
+  }
+
+  let codeSnippet = ``;
+  codeSnippet += `let oneYearFromNow = new Date()\n`;
+  codeSnippet += `oneYearFromNow.setFullYear(oneYearFromNow.getFullYear() + 1);\n`;
+  codeSnippet += `resolveEpochNo(userInput, oneYearFromNow.getTime());\n`;
+
+  return (
+    <LiveCodeDemo
+      title="Resolve Epoch number 1 year from now"
+      subtitle="Get the epoch number for the network 1 year from now"
+      code={codeSnippet}
+      runCodeFunction={runDemo}
+    >
+      <InputTable
+        listInputs={[
+          <Select
+            id="chooseNetwork"
+            options={{
+              preprod: "preprod",
+              testnet: "testnet",
+              preview: "preview",
+              mainnet: "mainnet",
+            }}
+            value={userInput}
+            onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
+              setUserInput(
+                e.target.value as "preprod" | "testnet" | "preview" | "mainnet",
+              )
+            }
+            label="Select network"
+            key={1}
+          />,
+        ]}
+      />
+    </LiveCodeDemo>
+  );
+}