Merge pull request #269 from MeshJS/docs/value-utils

Docs/value utils

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

@@ -0,0 +1,35 @@
+import { NewspaperIcon } from "@heroicons/react/24/solid";
+
+import { MenuItem } from "~/types/menu-item";
+
+export const articleNew16 = {
+  title: "What's new in Mesh 1.6",
+  desc: "",
+  link: "whats-new-in-16",
+  thumbnail: "/articles/develop-first-web-app.png",
+  image: "/articles/arches-1866598_1280.jpg",
+};
+export const articleMesh20 = {
+  title: "Introduce Mesh 2.0",
+  desc: "",
+  link: "typescript-cardano-sdk",
+  thumbnail: "/articles/develop-first-web-app.png",
+  image: "/articles/arches-1866598_1280.jpg",
+};
+export const articleElementsOfCardano = {
+  title: "Elements of Cardano",
+  desc: "Cardano represents a significant advancement in blockchain technology, offering a scalable, secure, and flexible platform that is well-suited for a wide range of applications. Its unique combination of public, permissionless infrastructure, proof-of-stake consensus, and support for smart contracts and native assets makes it a powerful tool for developers and enterprises alike.",
+  link: "elements-of-cardano",
+  thumbnail: "/articles/spices-4185324_640.png",
+  image: "/articles/spices-4185324_640.jpg",
+};
+
+export const linksArticles: MenuItem[] = [articleElementsOfCardano,articleMesh20, articleNew16];
+
+export const metaArticles: MenuItem = {
+  link: `/blogs`,
+  title: "Blogs",
+  desc: "Read the latest blogs and articles about Mesh",
+  icon: NewspaperIcon,
+  items: linksArticles,
+};

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

@@ -27,6 +27,13 @@ export const metaDataJson = {
   link: "/apis/data/json",
   icon: Bars3Icon,
 };
+// todoß
+export const metaDataValue = {
+  title: "Value",
+  desc: "Manipulate Cardano Value Easily",
+  link: "/apis/data/value",
+  icon: Bars3Icon,
+};
 export const metaDataCbor = {
   title: "CBOR Data",
   desc: "Parse and manipulate Cardano data with CBOR",
@@ -44,6 +51,7 @@ export const linksData: MenuItem[] = [
   metaOverview,
   metaDataMesh,
   metaDataJson,
+  metaDataValue,
   // metaDataCbor,
   // metaDataUtils,
 ];

apps/playground/src/pages/apis/data/value/accessor.tsx

@@ -0,0 +1,104 @@
+import { MeshValue } from "@meshsdk/common";
+
+import LiveCodeDemo from "~/components/sections/live-code-demo";
+import TwoColumnsScroll from "~/components/sections/two-columns-scroll";
+import { mockUnit } from "./";
+
+export default function ValueAccessor() {
+  return (
+    <TwoColumnsScroll
+      sidebarTo="ValueAccessor"
+      title="Value Methods for Accessing Mesh Data"
+      leftSection={Left()}
+      rightSection={Right()}
+    />
+  );
+}
+
+function Left() {
+  return (
+    <>
+      <Section1 />
+      <Section2 />
+    </>
+  );
+}
+
+function Section1() {
+  return (
+    <>
+      <p>
+        <code>get</code> get the quantity of asset object per unit, with
+        parameters
+      </p>
+      <ul>
+        <li>
+          <b>unit</b> - the unit of the assets e.g. lovelace
+        </li>
+      </ul>
+    </>
+  );
+}
+
+function Section2() {
+  return (
+    <>
+      <p>
+        <code>units</code> get all asset units with no parameters (e.g. unit)
+        needed
+      </p>
+    </>
+  );
+}
+
+function Right() {
+  return (
+    <>
+      <LiveCodeDemo
+        title="Get"
+        subtitle="Get the quantity of asset object per lovelace unit"
+        code={getCode()}
+        runCodeFunction={runGetDemo}
+      />
+      <LiveCodeDemo
+        title="Units"
+        subtitle="Get all asset units with no parameters needed"
+        code={getCode2()}
+        runCodeFunction={runUnitsDemo}
+      />
+    </>
+  );
+}
+
+function getCode() {
+  return `
+  import { MeshValue } from "@meshsdk/common";
+  const value = new MeshValue({ lovelace: 20n });
+  return value.get("lovelace");
+  `;
+}
+
+async function runGetDemo() {
+  const value = new MeshValue({ lovelace: 20n });
+  value.get("lovelace");
+  return value;
+}
+
+function getCode2() {
+  return `
+  import { MeshValue } from "@meshsdk/common";
+  const value = new MeshValue({ 
+    lovelace: 20n, 
+    [mockUnit]: 10n,
+  });
+  return value.units();
+  `;
+}
+
+async function runUnitsDemo() {
+  const value = new MeshValue({
+    lovelace: 20n,
+    [mockUnit]: 10n,
+  });
+  return value.units();
+}

apps/playground/src/pages/apis/data/value/addasset-operator.tsx

@@ -0,0 +1,60 @@
+import { Asset, MeshValue } from "@meshsdk/common";
+
+import LiveCodeDemo from "~/components/sections/live-code-demo";
+import TwoColumnsScroll from "~/components/sections/two-columns-scroll";
+
+export default function AddAssetOperator() {
+  return (
+    <TwoColumnsScroll
+      sidebarTo="AddAssetOperator"
+      title="Operator - add an asset to the Value class's value record with parameters - asset"
+      leftSection={Left()}
+      rightSection={Right()}
+    />
+  );
+}
+
+function Left() {
+  return (
+    <>
+      <p>
+        <code>addAsset</code> Add an asset to the Value class's value record
+        with parameters:
+      </p>
+      <ul>
+        <b>asset</b> - Asset to add
+      </ul>
+    </>
+  );
+}
+
+function Right() {
+  async function runAddAssetDemo() {
+    const value = new MeshValue();
+    const singleAsset: Asset = {
+      unit: "baefdc6c5b191be372a794cd8d40d839ec0dbdd3c28957267dc817001234",
+      quantity: "100",
+    };
+    value.addAsset(singleAsset);
+    return value.value;
+  }
+
+  let code = `
+  import { MeshValue } from "@meshsdk/common";
+  const value = new MeshValue();
+  const singleAsset: Asset = { unit: "baefdc6c5b191be372a794cd8d40d839ec0dbdd3c28957267dc817001234", quantity: "100" };
+  value.addAsset(singleAsset);
+  return value.value;
+    `;
+
+  return (
+    <>
+      <LiveCodeDemo
+        title="addAsset"
+        subtitle="Add an asset to the Value class's value record with parameters - asset"
+        code={code}
+        runCodeFunction={runAddAssetDemo}
+      />
+    </>
+  );
+}

apps/playground/src/pages/apis/data/value/addassets-operator.tsx

@@ -0,0 +1,73 @@
+import { Asset, MeshValue } from "@meshsdk/common";
+
+import LiveCodeDemo from "~/components/sections/live-code-demo";
+import TwoColumnsScroll from "~/components/sections/two-columns-scroll";
+
+export default function AddassetsOperator() {
+  return (
+    <TwoColumnsScroll
+      sidebarTo="AddassetsOperator"
+      title="Operator - add an array of assets to the Value class's value record with parameters - assets"
+      leftSection={Left()}
+      rightSection={Right()}
+    />
+  );
+}
+
+function Left() {
+  return (
+    <>
+      <p>
+        <code>addAssets</code> Add an array of assets to the Value class's value
+        record with parameters:
+      </p>
+      <ul>
+        <b>assets</b> - Asset[] to add
+      </ul>
+    </>
+  );
+}
+
+function Right() {
+  async function runaddassetsDemo() {
+    const value = new MeshValue();
+    const assets: Asset[] = [
+      {
+        unit: "baefdc6c5b191be372a794cd8d40d839ec0dbdd3c28957267dc817001234",
+        quantity: "100",
+      },
+      { unit: "lovelace", quantity: "10" },
+      {
+        unit: "baefdc6c5b191be372a794cd8d40d839ec0dbdd3c28957267dc817001234",
+        quantity: "100",
+      },
+      { unit: "lovelace", quantity: "10" },
+    ];
+    value.addAssets(assets);
+    return value.value;
+  }
+
+  let code = `
+  import { MeshValue } from "@meshsdk/common";
+  const value = new MeshValue();
+  const assets: Asset[] = [
+      { unit: "baefdc6c5b191be372a794cd8d40d839ec0dbdd3c28957267dc817001234", quantity: "100" },
+      { unit: "lovelace", quantity: "10" },
+      { unit: "baefdc6c5b191be372a794cd8d40d839ec0dbdd3c28957267dc817001234", quantity: "100" },
+      { unit: "lovelace", quantity: "10" },
+  ];
+  value.addAssets(assets);
+  return value.value;
+  `;
+
+  return (
+    <>
+      <LiveCodeDemo
+        title="addAssets"
+        subtitle="Add an array of assets to the Value class's value record with parameters - assets"
+        code={code}
+        runCodeFunction={runaddassetsDemo}
+      />
+    </>
+  );
+}