Merge pull request #371 from MeshJS/docs-update-playground

Docs update playground

README.md

@@ -104,7 +104,7 @@ Here's a list of open-source smart contracts, complete with documentation, live
 | Giftcard | Allows users to create a transactions to lock assets into the smart contract, which can be redeemed by any user | [[demo](https://meshjs.dev/smart-contracts/giftcard)] [[source](https://github.com/MeshJS/mesh/tree/main/packages/mesh-contract/src/giftcard)] [[docs](https://docs.meshjs.dev/contracts/classes/MeshGiftcardContract)] |
 | Hello World | A simple lock-and-unlock assets contract, providing a hands-on introduction to end-to-end smart contract validation and transaction building | [[demo](https://meshjs.dev/smart-contracts/hello-world)] [[source](https://github.com/MeshJS/mesh/tree/main/packages/mesh-contract/src/hello-world)] [[docs](https://docs.meshjs.dev/contracts/classes/MeshHelloWorldContract)] |
 | Marketplace | Allows anyone to buy and sell native assets such as NFTs | [[demo](https://meshjs.dev/smart-contracts/marketplace)] [[source](https://github.com/MeshJS/mesh/tree/main/packages/mesh-contract/src/marketplace)] [[docs](https://docs.meshjs.dev/contracts/classes/MeshMarketplaceContract)] |
-| NFT Minting Vending Machine | Mint NFTs with an automatically incremented index, which increases by one for each newly minted NFT | [[demo](https://meshjs.dev/smart-contracts/plutus-nft)] [[source](https://github.com/MeshJS/mesh/tree/main/packages/mesh-contract/src/plutus-nft)] [[docs](https://docs.meshjs.dev/contracts/classes/MeshPlutusNFTContract)] |
+| NFT Minting Machine | Mint NFTs with an automatically incremented index, which increases by one for each newly minted NFT | [[demo](https://meshjs.dev/smart-contracts/plutus-nft)] [[source](https://github.com/MeshJS/mesh/tree/main/packages/mesh-contract/src/plutus-nft)] [[docs](https://docs.meshjs.dev/contracts/classes/MeshPlutusNFTContract)] |
 | Payment Splitter | Allows users to split incoming payments among a group of accounts | [[demo](https://meshjs.dev/smart-contracts/payment-splitter)] [[source](https://github.com/MeshJS/mesh/tree/main/packages/mesh-contract/src/payment-splitter)] [[docs](https://docs.meshjs.dev/contracts/classes/MeshPaymentSplitterContract)] |
 | Swap | Facilitates the exchange of assets between two parties | [[demo](https://meshjs.dev/smart-contracts/swap)] [[source](https://github.com/MeshJS/mesh/tree/main/packages/mesh-contract/src/swap)] [[docs](https://docs.meshjs.dev/contracts/classes/MeshSwapContract)] |
 | Vesting | Allows users to lock tokens for a period of time and withdraw the funds after the lockup period | [[demo](https://meshjs.dev/smart-contracts/vesting)] [[source](https://github.com/MeshJS/mesh/tree/main/packages/mesh-contract/src/vesting)] [[docs](https://docs.meshjs.dev/contracts/classes/MeshVestingContract)] |

apps/playground/src/components/sections/hero-two-sections.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { ArrowRightIcon } from "@heroicons/react/24/solid";
 
 import Link from "~/components/link";
 import Codeblock from "../text/codeblock";
@@ -32,21 +33,10 @@ export default function HeroTwoSections({
           {link && (
             <Link
               href={link.href}
-              className="bg-primary-700 hover:bg-primary-800 mr-3 inline-flex items-center justify-center rounded-lg px-5 py-3 text-center text-base font-medium text-white"
+              className="mr-3 inline-flex items-center justify-center rounded-lg bg-gray-700 px-5 py-3 text-center text-base font-medium text-white hover:bg-gray-800"
             >
               {link.label}
-              <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
-                  fillRule="evenodd"
-                  d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
-                  clipRule="evenodd"
-                ></path>
-              </svg>
+              <ArrowRightIcon className="-mr-1 ml-2 h-5 w-5" />
             </Link>
           )}
 

apps/playground/src/data/catalyst.ts

@@ -11,7 +11,7 @@ export const fund13 = [
   {
     title: "Hydra Tools for administrating & interacting with Hydra Heads",
     desc: "Provide all the tools needed to integration Hydra on apps, to enable end-user operations like interacting with wallet, query UTXOs/balance and submit transactions.",
-    url: "https://cardano.ideascale.com/c/idea/130856",
+    url: "https://cardano.ideascale.com/c/cardano/idea/130856",
     completed: [],
     tobecompleted: [
       `Hydra Provider`,
@@ -24,7 +24,7 @@ export const fund13 = [
   {
     title: "Cardano Devkit - 'Ganache' of Cardano for better DevXP",
     desc: "An app to launch local blockchain to test and deploy transactions and smart contracts, to run tests and experiments to develop Cardano applications.",
-    url: "https://cardano.ideascale.com/c/idea/130825",
+    url: "https://cardano.ideascale.com/c/cardano/idea/130825",
     completed: [],
     tobecompleted: [
       `Improve devnet deployment`,
@@ -36,7 +36,7 @@ export const fund13 = [
   {
     title: "Cquisitor - Transaction Investigation Tool",
     desc: "Enhancing Devtools with hosted Rust-based validation modules, and improving error handling to provide clearer feedback, helping developers debug and validate efficiently.",
-    url: "https://cardano.ideascale.com/c/idea/131631",
+    url: "https://cardano.ideascale.com/c/cardano/idea/131631",
     completed: [],
     tobecompleted: [
       `Update Cquisitor`,
@@ -49,7 +49,7 @@ export const fund13 = [
   {
     title: "Multisig Platform",
     desc: "Open source multisig platform for teams and organizations to manage their treasury and participate in governance.",
-    url: "https://cardano.ideascale.com/c/idea/131036",
+    url: "https://cardano.ideascale.com/c/cardano/idea/131036",
     completed: [],
     tobecompleted: [
       `Full governance features`,
@@ -63,7 +63,7 @@ export const fund13 = [
   {
     title: "Builder Fest #2 in Asia",
     desc: "Hosting Buidler Fest #2, a 2-day event for tech-savvy Cardano builders to connect, showcase and share.",
-    url: "https://cardano.ideascale.com/c/idea/131981",
+    url: "https://cardano.ideascale.com/c/cardano/idea/131981",
     completed: [],
     tobecompleted: [
       `Gathering of developers in Vietnam`,
@@ -74,7 +74,7 @@ export const fund13 = [
   {
     title: "Maintain Mesh and Build Developer Community",
     desc: "Maintenance and operations of the Mesh open source libraries and tool suits. Growing Cardano developer community.",
-    url: "https://cardano.ideascale.com/c/idea/131363",
+    url: "https://cardano.ideascale.com/c/cardano/idea/131363",
     completed: [],
     tobecompleted: [
       `Provide community support`,
@@ -90,7 +90,7 @@ 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",
+    url: "https://projectcatalyst.io/funds/12/cardano-open-developers/sidan-or-meshjs-cardano-service-layer-framework-for-dapps",
     completed: [
       `Parallel Cardano Blockchain MeshJS Integration`,
       `Customized Protocol Parameters`,
@@ -105,7 +105,7 @@ export const fund12 = [
   {
     title: "New Features to Improve Developer experience and 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",
+    url: "https://projectcatalyst.io/funds/12/cardano-open-developers/mesh-new-features-to-improve-developer-experience-and-cardano-adoption",
     completed: [
       "Mesh application wallet",
       "Modular CSL library",
@@ -117,20 +117,21 @@ export const fund12 = [
   {
     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: ["Cloud infrastructure and transaction endpoints"],
-    tobecompleted: [
-      "Hosted wallet / private key for signing",
+    url: "https://projectcatalyst.io/funds/12/cardano-use-cases-concept/mesh-software-as-a-service",
+    completed: [
+      "Cloud infrastructure",
       "User-defined transaction building",
       "JSON schema for transaction",
+      "Utitlities for transaction building",
     ],
+    tobecompleted: ["Hosted wallet / private key for signing"],
     status: "In Progress",
   },
   {
     title:
       "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",
+    url: "https://projectcatalyst.io/funds/12/cardano-open-developers/sustain-and-maintain-mesh-sdk",
     completed: [
       `Provide community support`,
       `Resolve GitHub issues`,
@@ -148,21 +149,17 @@ export const fund11 = [
     desc: "We create a collection of open-source smart contracts with Aiken (including Workspace, Mesh TX builder components) and integrate them into the Mesh SDK library on Github - open and accessible to all. ",
     url: "https://projectcatalyst.io/funds/11/cardano-open-developers/aiken-open-source-smart-contract-library-by-meshjs-and-trustlevel",
     completed: [
-      "Marketplace contract",
-      "Escrow contract",
-      "Vesting contract",
-      "Gift card contract",
-      "Coupon bond guaranteed contract",
-    ],
-    tobecompleted: [
-      "Content ownership contract",
-      "Advanced contract #2",
-      "Advanced contract #3",
-      "Bad examples",
+      "Marketplace",
+      "Escrow",
+      "Vesting",
+      "Gift card",
+      "Coupon bond guaranteed",
+      "Content ownership",
+      "NFT minting machine",
     ],
+    tobecompleted: ["Bad examples"],
     status: "In Progress",
   },
-
   {
     title: "Sustain & Maintain MeshJS",
     desc: "This proposal enables implementations not limited to Voltaire features, Hydra & Aiken integration, and data providers integrations. Including bounties for issues, features, and learning materials.",

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

@@ -54,7 +54,7 @@ export const metaContentOwnership = {
   icon: DocumentCheckIcon,
 };
 export const metaMintPlutusNft = {
-  title: "NFT Minting Vending Machine",
+  title: "NFT Minting Machine",
   desc: "Mint NFT that ensure the token name is incremented by a counter",
   link: "/smart-contracts/plutus-nft",
   icon: PhotoIcon,

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

@@ -6,7 +6,7 @@ export default function AboutMeeting() {
   return (
     <AboutSection
       title="Planning and Open Office"
-      description="We meet every week to discuss the progress of the project and plan the next steps every Tuesday at 1200UTC, where we welcome anyone to join us and ask questions."
+      description="We meet every week to discuss the progress of the project and plan the next steps every Tuesday at 1400UTC, where we welcome anyone to join us and ask questions."
     >
       <>
         <Link href="https://calendar.google.com/calendar/u/0?cid=MmJiNzE0ODRmNjBhZTgyOWZiYTE4MDFjZDlmZTM1N2UwODc5MjlkYmU4Y2U4NGRmYjc3OTgzZjdiODRiZTUxMUBncm91cC5jYWxlbmRhci5nb29nbGUuY29t">

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

@@ -62,6 +62,15 @@ function CardLink({
   tobecompleted: string[];
   status: string;
 }) {
+  function getDomain(url) {
+    url = url.replace(/(https?:\/\/)?(www.)?/i, "");
+
+    if (url.indexOf("/") !== -1) {
+      return url.split("/")[0];
+    }
+
+    return url;
+  }
   return (
     <div className="block max-w-sm rounded-lg border border-gray-200 bg-white p-6 shadow dark:border-gray-700 dark:bg-gray-800">
       <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
@@ -118,7 +127,7 @@ function CardLink({
         <div className="mt-4 text-sm text-gray-500 dark:text-gray-300">
           <Link href={url}>
             <span className="text-blue-500 hover:text-blue-700">
-              projectcatalyst.io
+              {getDomain(url)}
             </span>
           </Link>
         </div>

apps/playground/src/pages/about/support-us/donate-section.tsx

@@ -3,6 +3,7 @@ import { useState } from "react";
 import { CardanoWallet, useWallet } from "@meshsdk/react";
 
 import { createTransactionDonate } from "~/backend/support";
+import Button from "~/components/button/button";
 import Input from "~/components/form/input";
 
 export default function SendPayment() {
@@ -58,13 +59,9 @@ export default function SendPayment() {
                 type="number"
               />
             </div>
-            <button
-              className="bg-primary-600 hover:bg-primary-700 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 w-full rounded-lg px-5 py-2.5 text-center text-sm font-medium text-white focus:outline-none focus:ring-4"
-              onClick={() => makeTx()}
-              disabled={loading}
-            >
+            <Button onClick={() => makeTx()} disabled={loading}>
               {loading ? <>Building transaction...</> : <>Donate ₳{amount}</>}
-            </button>
+            </Button>
           </div>
         ) : (
           !connected && (

apps/playground/src/pages/apis/transaction/common.tsx

@@ -3,7 +3,7 @@ import Codeblock from "~/components/text/codeblock";
 export function Intro() {
   let example = ``;
   example += `import { Transaction } from '@meshsdk/core';\n\n`;
-  example += `const tx = new Transaction({ initiator: wallet, verbose: false });\n`;
+  example += `const tx = new Transaction({ initiator: wallet, verbose: true });\n`;
   example += `tx.foo(...); // add transaction methods\n`;
   example += `tx.bar(...); // add transaction methods\n\n`;
   example += `const unsignedTx = await tx.build();\n`;

apps/playground/src/pages/apis/txbuilder/basics/initialize-txbuilder.tsx

@@ -1,5 +1,4 @@
 import Link from "~/components/link";
-
 import TwoColumnsScroll from "~/components/sections/two-columns-scroll";
 import Codeblock from "~/components/text/codeblock";
 
@@ -21,6 +20,7 @@ function Left() {
   example += `const txBuilder = new MeshTxBuilder({\n`;
   example += `  fetcher: blockchainProvider,\n`;
   example += `  evaluator: blockchainProvider,\n`;
+  example += `  verbose: true,\n`;
   example += `});\n`;
 
   let signature = ``;
@@ -31,6 +31,7 @@ function Left() {
   signature += `  serializer?: IMeshTxSerializer;\n`;
   signature += `  isHydra?: boolean;\n`;
   signature += `  params?: Partial<Protocol>;\n`;
+  signature += `  verbose?: boolean;\n`;
   signature += `}\n`;
 
   return (
@@ -80,6 +81,10 @@ function Left() {
         <li>
           <code>params</code>: You can pass in the protocol parameters directly.
         </li>
+        <li>
+          <code>verbose</code>: Set to <code>true</code> to enable verbose
+          logging.
+        </li>
       </ol>
     </>
   );

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

@@ -1,5 +1,7 @@
 import { useEffect, useState } from "react";
+import { DocumentCheckIcon } from "@heroicons/react/24/solid";
 
+import Link from "~/components/link";
 import HeroTwoSections from "~/components/sections/hero-two-sections";
 
 export default function HomePage() {
@@ -11,11 +13,11 @@ export default function HomePage() {
   return (
     <div className="flex flex-col gap-4">
       <HeroTwoSections
-        title="Build applications on Cardano with ease"
+        title="Web3 TypeScript SDK & off-chain Framework"
         description="Mesh is a TypeScript open-source library providing numerous tools to easily build powerful dApps on the Cardano blockchain."
         link={{ label: "Get started", href: "/getting-started" }}
         image={
-          <div className="col-span-6 hidden lg:block h-96">
+          <div className="col-span-6 hidden h-96 lg:block">
             {!isSSR ? (
               <video className="w-full" autoPlay muted>
                 <source src="/home/starter-template-cli.mp4" type="video/mp4" />
@@ -37,7 +39,15 @@ export default function HomePage() {
             )}
           </div>
         }
-        // children={<SendPayment />}
+        children={
+          <Link
+            href={`/about/catalyst`}
+            className="mr-3 inline-flex items-center justify-center rounded-lg bg-gray-700 px-5 py-3 text-center text-base font-medium text-white hover:bg-gray-800"
+          >
+            Catalyst Proposals
+            <DocumentCheckIcon className="-mr-1 ml-2 h-5 w-5" />
+          </Link>
+        }
       />
     </div>
   );

packages/mesh-common/src/types/transaction-info.ts

@@ -8,4 +8,6 @@ export type TransactionInfo = {
   deposit: string;
   invalidBefore: string;
   invalidAfter: string;
+  blockHeight: number;
+  blockTime: number;
 };

packages/mesh-contract/README.md

@@ -11,7 +11,7 @@ Here's a list of open-source smart contracts, complete with documentation, live
 | Giftcard | Allows users to create a transactions to lock assets into the smart contract, which can be redeemed by any user | [[demo](https://meshjs.dev/smart-contracts/giftcard)] [[source](https://github.com/MeshJS/mesh/tree/main/packages/mesh-contract/src/giftcard)] [[docs](https://docs.meshjs.dev/contracts/classes/MeshGiftcardContract)] |
 | Hello World | A simple lock-and-unlock assets contract, providing a hands-on introduction to end-to-end smart contract validation and transaction building | [[demo](https://meshjs.dev/smart-contracts/hello-world)] [[source](https://github.com/MeshJS/mesh/tree/main/packages/mesh-contract/src/hello-world)] [[docs](https://docs.meshjs.dev/contracts/classes/MeshHelloWorldContract)] |
 | Marketplace | Allows anyone to buy and sell native assets such as NFTs | [[demo](https://meshjs.dev/smart-contracts/marketplace)] [[source](https://github.com/MeshJS/mesh/tree/main/packages/mesh-contract/src/marketplace)] [[docs](https://docs.meshjs.dev/contracts/classes/MeshMarketplaceContract)] |
-| NFT Minting Vending Machine | Mint NFTs with an automatically incremented index, which increases by one for each newly minted NFT | [[demo](https://meshjs.dev/smart-contracts/plutus-nft)] [[source](https://github.com/MeshJS/mesh/tree/main/packages/mesh-contract/src/plutus-nft)] [[docs](https://docs.meshjs.dev/contracts/classes/MeshPlutusNFTContract)] |
+| NFT Minting Machine | Mint NFTs with an automatically incremented index, which increases by one for each newly minted NFT | [[demo](https://meshjs.dev/smart-contracts/plutus-nft)] [[source](https://github.com/MeshJS/mesh/tree/main/packages/mesh-contract/src/plutus-nft)] [[docs](https://docs.meshjs.dev/contracts/classes/MeshPlutusNFTContract)] |
 | Payment Splitter | Allows users to split incoming payments among a group of accounts | [[demo](https://meshjs.dev/smart-contracts/payment-splitter)] [[source](https://github.com/MeshJS/mesh/tree/main/packages/mesh-contract/src/payment-splitter)] [[docs](https://docs.meshjs.dev/contracts/classes/MeshPaymentSplitterContract)] |
 | Swap | Facilitates the exchange of assets between two parties | [[demo](https://meshjs.dev/smart-contracts/swap)] [[source](https://github.com/MeshJS/mesh/tree/main/packages/mesh-contract/src/swap)] [[docs](https://docs.meshjs.dev/contracts/classes/MeshSwapContract)] |
 | Vesting | Allows users to lock tokens for a period of time and withdraw the funds after the lockup period | [[demo](https://meshjs.dev/smart-contracts/vesting)] [[source](https://github.com/MeshJS/mesh/tree/main/packages/mesh-contract/src/vesting)] [[docs](https://docs.meshjs.dev/contracts/classes/MeshVestingContract)] |