V1.6.9

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

@@ -3,6 +3,12 @@ import { FilmIcon, HeartIcon } from "@heroicons/react/24/solid";
 import { MenuItem } from "~/types/menu-item";
 import { metaCatalyst } from "./links-catalyst";
 
+export const metaAboutUs = {
+  link: `/about`,
+  title: "About Us",
+  desc: "",
+  icon: HeartIcon,
+};
 export const metaSupportUs = {
   link: `/about/support-us`,
   title: "Support Us",
@@ -17,6 +23,7 @@ export const metaMediaKit = {
 };
 
 export const linksAbout: MenuItem[] = [
+  metaAboutUs,
   metaCatalyst,
   metaSupportUs,
   metaMediaKit,

apps/playground/src/data/team.ts

@@ -0,0 +1,31 @@
+export const team = [
+  {
+    name: "Abdelkrim",
+    image: "abdelkrim.png",
+    twitter: "https://x.com/abdelkrimdev",
+    github: "https://github.com/abdelkrimdev",
+  },
+  {
+    name: "Jingles",
+    image: "jingles.png",
+    twitter: "https://x.com/jinglescode",
+    github: "https://github.com/jinglescode",
+    website: "https://jingles.dev/",
+  },
+  {
+    name: "Felix",
+    image: "felix.png",
+    twitter: "https://x.com/CatalystSwarm",
+  },
+  {
+    name: "Hinson",
+    image: "hinson.png",
+    twitter: "https://x.com/HinsonSIDAN",
+    github: "https://github.com/HinsonSIDAN",
+  },
+  {
+    name: "Tszwai",
+    image: "tszwai.png",
+    github: "https://github.com/twwu123",
+  },
+];

apps/playground/src/pages/about/about-us/hero.tsx

@@ -0,0 +1,65 @@
+export default function AboutHero() {
+  return (
+    <section className="bg-gray-700 bg-[url('https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/coast-house-view.jpg')] bg-cover bg-center bg-no-repeat bg-blend-multiply ">
+      <div className="z-1 relative mx-auto max-w-screen-xl px-4 py-8 text-white lg:py-16">
+        <div className="mb-6 max-w-screen-lg lg:mb-0">
+          <h1 className="mb-4 text-4xl font-extrabold leading-none tracking-tight md:text-5xl lg:text-6xl">
+            We advance the Cardano's tech stack
+          </h1>
+          <p className="mb-6 font-light text-gray-400 md:text-lg lg:mb-8 lg:text-xl">
+            Get started building blockchain applications with our
+            enterprise-ready, well engineered, and professionally designed SDK,
+            Mesh. From easy to use Transaction builder to low level APIs, from
+            wallet integrations to data service providers, building a Web3
+            application has never been this easy.
+          </p>
+
+          {/* <a
+            href="#"
+            className="bg-primary-700 hover:bg-primary-800 focus:ring-primary-900 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 inline-flex items-center rounded-lg px-5 py-3 text-center font-medium text-white focus:outline-none focus:ring-4"
+          >
+            Learn more about the plan
+            <svg
+              className="-mr-1 ml-2 h-5 w-5"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
+                clip-rule="evenodd"
+              ></path>
+            </svg>
+          </a> */}
+        </div>
+        {/* <div className="mt-8 grid gap-8 border-t border-gray-600 pt-8 sm:grid-cols-2 lg:mt-12 lg:grid-cols-4 lg:pt-12">
+          <div>
+            <h2 className="mb-1 text-lg font-bold">Fourth quarter 2021</h2>
+            <p className="mb-1 text-sm text-gray-400">
+              We announced fourth quarter 2021 results
+            </p>
+            <a
+              href="#"
+              className="text-primary-500 inline-flex items-center text-sm font-semibold hover:underline"
+            >
+              Read more
+              <svg
+                className="ml-1 h-5 w-5"
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  fill-rule="evenodd"
+                  d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
+                  clip-rule="evenodd"
+                ></path>
+              </svg>
+            </a>
+          </div>
+        </div> */}
+      </div>
+    </section>
+  );
+}

apps/playground/src/pages/about/about-us/incorporation.tsx

@@ -0,0 +1,12 @@
+import { AboutSection } from "../";
+
+export default function AboutIncorporation() {
+  return (
+    <AboutSection
+      title="Incorporation"
+      description="MeshJS Pte. Ltd. is a company registered in Singapore since 2023, with the registration number (UEN): 202344120W."
+    >
+      <></>
+    </AboutSection>
+  );
+}

apps/playground/src/pages/about/about-us/status.tsx

@@ -0,0 +1,44 @@
+import Link from "~/components/link";
+import { AboutSection } from "../";
+
+export default function AboutStatus() {
+  return (
+    <AboutSection
+      title="Status"
+      description="Stay up to date with our latest releases, tests and build status."
+    >
+      <div className="grid gap-8 sm:gap-12 md:grid-cols-3">
+        <div className="flex justify-center">
+          <div>
+            <h3 className="mb-1 text-lg font-semibold leading-tight text-gray-900 dark:text-white">
+              Published on NPM
+            </h3>
+            <Link href="https://www.npmjs.com/package/@meshsdk/core">
+              <img src="https://img.shields.io/npm/v/%40meshsdk%2Fcore?style=for-the-badge" />
+            </Link>
+          </div>
+        </div>
+        <div className="flex justify-center">
+          <div>
+            <h3 className="mb-1 text-lg font-semibold leading-tight text-gray-900 dark:text-white">
+              Build status
+            </h3>
+            <Link href="https://github.com/meshjs/mesh/actions/workflows/build.yml">
+              <img src="https://github.com/meshjs/mesh/actions/workflows/build.yml/badge.svg" />
+            </Link>
+          </div>
+        </div>
+        <div className="flex justify-center">
+          <div>
+            <h3 className="mb-1 text-lg font-semibold leading-tight text-gray-900 dark:text-white">
+              Publish status
+            </h3>
+            <Link href="https://github.com/meshjs/mesh/actions/workflows/publish.yml">
+              <img src="https://github.com/meshjs/mesh/actions/workflows/publish.yml/badge.svg" />
+            </Link>
+          </div>
+        </div>
+      </div>
+    </AboutSection>
+  );
+}

apps/playground/src/pages/about/about-us/team.tsx

@@ -0,0 +1,106 @@
+import Link from "~/components/link";
+import { team } from "~/data/team";
+import { AboutSection } from "../";
+
+export default function AboutTeam() {
+  return (
+    <AboutSection title="Our team" description="">
+      <div className="grid gap-8 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 lg:gap-16">
+        {team.map((person, i) => (
+          <Person key={i} {...person} />
+        ))}
+      </div>
+    </AboutSection>
+  );
+}
+
+function Person({
+  name,
+  image,
+  twitter,
+  github,
+  website,
+}: {
+  name: string;
+  image: string;
+  twitter?: string;
+  github?: string;
+  website?: string;
+}) {
+  return (
+    <div className="text-center text-gray-500 dark:text-gray-400">
+      <img
+        className="mx-auto mb-4 h-36 w-36 rounded-full"
+        src={`team/${image}`}
+        alt={name}
+      />
+      <h3 className="mb-1 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
+        {name}
+      </h3>
+      {/* <p></p> */}
+      <ul className="mt-4 flex justify-center space-x-4">
+        {twitter && (
+          <li>
+            <Link
+              href={twitter}
+              className="text-[#00acee] hover:text-gray-900 dark:hover:text-white"
+            >
+              <svg
+                className="h-6 w-6"
+                fill="currentColor"
+                viewBox="0 0 24 24"
+                aria-hidden="true"
+              >
+                <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
+              </svg>
+            </Link>
+          </li>
+        )}
+        {github && (
+          <li>
+            <Link
+              href={github}
+              className="text-gray-900 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white"
+            >
+              <svg
+                className="h-6 w-6"
+                fill="currentColor"
+                viewBox="0 0 24 24"
+                aria-hidden="true"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+                  clipRule="evenodd"
+                />
+              </svg>
+            </Link>
+          </li>
+        )}
+        {website && (
+          <li>
+            <Link
+              href={website}
+              className="text-[#ea4c89] hover:text-gray-900 dark:hover:text-white"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth="1.5"
+                stroke="currentColor"
+                className="h-6 w-6"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418"
+                />
+              </svg>
+            </Link>
+          </li>
+        )}
+      </ul>
+    </div>
+  );
+}

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

@@ -0,0 +1,41 @@
+import AboutHero from "./about-us/hero";
+import AboutIncorporation from "./about-us/incorporation";
+import AboutStatus from "./about-us/status";
+import AboutTeam from "./about-us/team";
+
+export default function AboutPage() {
+  return (
+    <>
+      <AboutHero />
+      <AboutTeam />
+      <AboutIncorporation />
+      <AboutStatus />
+    </>
+  );
+}
+
+export function AboutSection({
+  children,
+  title,
+  description,
+}: {
+  children: React.ReactNode;
+  title: string;
+  description: string;
+}) {
+  return (
+    <section className="bg-white dark:bg-gray-900">
+      <div className="mx-auto max-w-screen-xl px-4 py-8 text-center lg:px-6 lg:py-16">
+        <div className="mx-auto mb-8 flex max-w-screen-sm flex-col gap-4 lg:mb-16">
+          <h2 className="text-4xl font-extrabold tracking-tight text-gray-900 dark:text-white">
+            {title}
+          </h2>
+          <p className="font-light text-gray-500 sm:text-xl dark:text-gray-400">
+            {description}
+          </p>
+        </div>
+        {children}
+      </div>
+    </section>
+  );
+}

apps/playground/src/pages/apis/transaction/basics/index.tsx

@@ -15,6 +15,7 @@ import TransactionSendLovelace from "./send-lovelace";
 import TransactionSendValue from "./send-value";
 import TransactionSetCollateral from "./set-collateral";
 import TransactionSetMetadata from "./set-metadata";
+import TransactionSetNetwork from "./set-network";
 import TransactionSetRequiredSigners from "./set-required-signers";
 import TransactionSetTime from "./set-time";
 
@@ -37,6 +38,7 @@ const ReactPage: NextPage = () => {
     { label: "Set required signers", to: "requiredSigners" },
 
     { label: "Set time", to: "setTime" },
+    { label: "Set network", to: "setNetwork" },
   ];
 
   return (
@@ -78,6 +80,7 @@ const ReactPage: NextPage = () => {
         <TransactionSetRequiredSigners />
 
         <TransactionSetTime />
+        <TransactionSetNetwork />
       </SidebarFullwidth>
     </>
   );

apps/playground/src/pages/apis/transaction/basics/set-network.tsx

@@ -0,0 +1,31 @@
+import TwoColumnsScroll from "~/components/sections/two-columns-scroll";
+import Codeblock from "~/components/text/codeblock";
+
+export default function TransactionSetNetwork() {
+  return (
+    <TwoColumnsScroll
+      sidebarTo="setNetwork"
+      title="Set Network"
+      leftSection={Left()}
+    />
+  );
+}
+
+function Left() {
+  let code1 = `tx.setNetwork(network: Network)`;
+  let code2 = `"testnet" | "preview" | "preprod" | "mainnet"`;
+
+  return (
+    <>
+      <p>
+        Sets the network to use, this is mainly to know the cost models to be
+        used to calculate script integrity hash. You can set the network for the
+        transaction with <code>setNetwork</code>.
+      </p>
+      <Codeblock data={code1} />
+      <p>The network parameter is a string that can be one of the following:</p>
+      <Codeblock data={code2} />
+      <p></p>
+    </>
+  );
+}