Merge branch 'main' into metadata-fix

README.md

@@ -25,6 +25,12 @@ Mesh is an open-source library designed to make building dApps accessible. Wheth
 
 Explore the features on [Mesh Playground](https://meshjs.dev/).
 
+Instant setup a new project with a single command using Mesh CLI and start building:
+
+```
+npx meshjs your-app-name
+```
+
 ## What's inside?
 
 ### Architecture Overview
@@ -109,15 +115,7 @@ Here's a list of open-source smart contracts, complete with documentation, live
 | 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)] |
 
-## Getting Started
-
-### Usage
-
-To use Mesh in your project, run the following command to install the core package:
-
-```
-npm install @meshsdk/core
-```
+## Usage
 
 ### Install
 

apps/playground/src/components/link/index.tsx

@@ -17,7 +17,7 @@ export default function Link({
   return (
     <NextLink
       href={href}
-      className={`${className}`}
+      className={`${className} ${typeof children == "string" && "text-black no-underline hover:underline dark:text-white"} `}
       target={target ? target : href.startsWith("http") ? "_blank" : "_self"}
       rel="noreferrer"
     >

apps/playground/src/components/site/footer/sitemap.tsx

@@ -1,8 +1,8 @@
 import Link from "~/components/link";
 import { linksAbout } from "~/data/links-about";
 import { linksApi } from "~/data/links-api";
-import { metaGetStarted } from "~/data/links-get-started";
 import { metaGuides } from "~/data/links-guides";
+import { metaResources } from "~/data/links-resources";
 import { metaSmartContract } from "~/data/links-smart-contracts";
 import { metaSolutions } from "~/data/links-solutions";
 import { MenuItem } from "~/types/menu-item";
@@ -11,13 +11,12 @@ export default function Sitemap() {
   return (
     <div className="mx-auto max-w-screen-xl p-4 py-6 md:p-8 lg:p-10">
       <div className="grid grid-cols-2 gap-8 md:grid-cols-3 lg:grid-cols-4">
-        <Section menuItem={metaGetStarted} />
-        <Section menuItem={metaSolutions} />
-
         {linksApi.map((api, i) => (
           <Section menuItem={api} key={i} />
         ))}
 
+        <Section menuItem={metaSolutions} />
+        <Section menuItem={metaResources} />
         <Section menuItem={metaSmartContract} />
         <Section menuItem={metaGuides} />
 

apps/playground/src/components/site/navbar/index.tsx

@@ -11,7 +11,7 @@ import Link from "~/components/link";
 import SvgMesh from "~/components/svgs/mesh";
 import { linksAbout } from "~/data/links-about";
 import { linksApi } from "~/data/links-api";
-import { linksGetStarted } from "~/data/links-get-started";
+import { linksResources } from "~/data/links-resources";
 import { linksSolutions } from "~/data/links-solutions";
 import { socials } from "~/data/social";
 import { useDarkmode } from "~/hooks/useDarkmode";
@@ -90,7 +90,7 @@ export default function Navbar() {
             {!isSSR && (
               <button
                 type="button"
-                className="rounded-lg p-2.5 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none dark:text-gray-400 dark:hover:bg-gray-700"
+                className="rounded-lg p-2 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
                 onClick={() => {
                   toggle();
                 }}
@@ -123,8 +123,8 @@ export default function Navbar() {
             } w-full items-center justify-between lg:order-1 lg:flex lg:w-auto`}
           >
             <ul className="mt-4 flex flex-col font-medium lg:mt-0 lg:flex-row lg:space-x-8">
-              <MenuItemDropdown title="Get Started" items={linksGetStarted} />
               <MenuItemDropdown title="SDK" items={linksApi} />
+              <MenuItemDropdown title="Resources" items={linksResources} />
               <MenuItemDropdown title="Solutions" items={linksSolutions} />
               <MenuItem title="Docs" link="https://docs.meshjs.dev/" />
               <MenuItemDropdown title="About" items={linksAbout} />

apps/playground/src/components/site/navbar/menu-item-dropdown.tsx

@@ -21,7 +21,7 @@ export default function MenuItemDropdown({
     >
       <button
         type="button"
-        className="lg:hover:text-primary-600 lg:dark:hover:text-primary-500 dark:hover:text-primary-500 flex w-full items-center justify-between border-b border-gray-100 py-2 pl-3 pr-4 font-medium text-gray-700 hover:bg-gray-50 lg:w-auto lg:border-0 lg:p-0 lg:hover:bg-transparent dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 lg:dark:hover:bg-transparent"
+        className="dark:text-white lg:hover:text-black lg:dark:hover:text-white dark:hover:text-white flex w-full items-center justify-between border-b border-gray-100 py-2 pl-3 pr-4 font-medium text-gray-700 hover:bg-gray-50 lg:w-auto lg:border-0 lg:p-0 lg:hover:bg-transparent dark:border-gray-700 dark:hover:bg-gray-700 lg:dark:hover:bg-transparent"
         aria-label="More"
       >
         {title}

apps/playground/src/components/site/navbar/menu-item.tsx

@@ -11,7 +11,7 @@ export default function MenuItem({
     <li>
       <Link
         href={link}
-        className="lg:hover:text-primary-600 lg:dark:hover:text-primary-500 dark:hover:text-primary-500 block border-b border-gray-100 py-2 pl-3 pr-4 text-gray-700 hover:bg-gray-50 lg:border-0 lg:p-0 lg:hover:bg-transparent dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 lg:dark:hover:bg-transparent"
+        className="lg:hover:text-black lg:dark:hover:text-white dark:hover:text-white block border-b border-gray-100 py-2 pl-3 pr-4 text-gray-700 hover:bg-gray-50 lg:border-0 lg:p-0 lg:hover:bg-transparent dark:border-gray-700 dark:text-white dark:hover:bg-gray-700 lg:dark:hover:bg-transparent hover:no-underline"
       >
         {title}
       </Link>

apps/playground/src/components/site/navbar/submenu-item-dropdown.tsx

@@ -26,7 +26,7 @@ export default function SubmenuItemDropdown({
       <Link href={link ?? "#"}>
         <button
           type="button"
-          className="hover:text-primary-600 dark:hover:text-primary-500 flex w-full items-center justify-between px-4 py-2"
+          className="hover:text-black dark:hover:text-white flex w-full items-center justify-between px-4 py-2"
         >
           <span className="flex items-center">
             {icon && React.createElement(icon, { className: "mr-2 w-4 h-4" })}
@@ -71,7 +71,7 @@ function Item({
     <li>
       <Link
         href={link}
-        className="hover:text-primary-600 dark:hover:text-primary-500 flex w-full items-center px-4 py-2"
+        className="hover:text-black dark:hover:text-white flex w-full items-center px-4 py-2"
       >
         {icon && React.createElement(icon, { className: "mr-2 w-4 h-4" })}
         {title}

apps/playground/src/components/site/navbar/submenu-item.tsx

@@ -15,7 +15,7 @@ export default function SubmenuItem({
     <li>
       <Link
         href={link}
-        className="hover:text-primary-600 dark:hover:text-primary-500 flex w-full items-center px-4 py-2"
+        className="hover:text-black dark:hover:text-white flex w-full items-center px-4 py-2"
         target={link.startsWith("http") ? "_blank" : "_self"}
       >
         {icon && React.createElement(icon, { className: "mr-2 w-4 h-4" })}

apps/playground/src/data/catalyst.ts

@@ -110,9 +110,11 @@ export const fund12 = [
       "Mesh application wallet",
       "Modular CSL library",
       "Wallet support for private blockchain networks (e.g. Yaci)",
+      "CIP 45",
+      "Improve error messages",
     ],
-    tobecompleted: ["CIP 45", "Improve error messages"],
-    status: "In Progress",
+    tobecompleted: [],
+    status: "Closing",
   },
   {
     title: "Mesh Software as a Service",
@@ -153,7 +155,8 @@ export const fund11 = [
       "Escrow",
       "Vesting",
       "Gift card",
-      "Coupon bond guaranteed",
+      "Swap",
+      "Payment splitter",
       "Content ownership",
       "NFT minting machine",
     ],
@@ -193,7 +196,7 @@ export const fund10 = [
       "Demos and tutorials repository",
       "Mesh PBL Season #1",
     ],
-    tobecompleted: ["Student projects"],
+    tobecompleted: [],
     status: "Closing",
   },
 ];

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

@@ -10,8 +10,8 @@ import { metaWallets } from "./links-wallets";
 
 export const linksApi: MenuItem[] = [
   metaWallets,
-  metaTransaction,
   metaTxbuilder,
+  metaTransaction,
   metaData,
   metaReact,
   metaSvelte,

apps/playground/src/data/links-get-started.ts → apps/playground/src/data/links-resources.ts

@@ -9,7 +9,7 @@ import { metaAiken } from "./links-aiken";
 import { metaGuides } from "./links-guides";
 import { metaYaci } from "./links-yaci";
 
-export const linksGetStarted: MenuItem[] = [
+export const linksResources: MenuItem[] = [
   metaGuides,
   {
     link: `https://github.com/MeshJS/examples`,
@@ -27,10 +27,10 @@ export const linksGetStarted: MenuItem[] = [
   metaYaci,
 ];
 
-export const metaGetStarted: MenuItem = {
-  title: "Get Started",
+export const metaResources: MenuItem = {
+  title: "Resources",
   desc: "Whether you are new to web development or a seasoned blockchain full-stack developer, Mesh is the SDK for you.",
-  link: "/getting-started",
+  link: "/resources",
   icon: StarIcon,
-  items: linksGetStarted,
+  items: linksResources,
 };

apps/playground/src/pages/guides/nextjs.mdx

@@ -3,9 +3,9 @@ import { guidenextjs } from "~/data/links-guides";
 
 export default function MDXPage({ children }) {
   const sidebarItems = [
-    { label: 'System setup', to: 'systemsetup' },
+    { label: 'Setup Next.js', to: 'setupnextjs' },
     { label: 'Setup Mesh', to: 'setupmesh' },
-    { label: 'See it in action', to: 'seeitinaction' },
+    { label: 'Connect wallet and view assets', to: 'connectwalletandviewassets' },
   ];
 
   return (
@@ -21,23 +21,21 @@ export default function MDXPage({ children }) {
   );
 }
 
-In this guide, you will get your application running, [check this demo](https://starter-template.meshjs.dev/) to see the final result.
+In this guide, we will set up a Next.js application and connect it to the Cardano blockchain using Mesh. We will create a simple application that allows users to connect their wallets and view the assets in their wallets.
 
-[Next.js](https://nextjs.org/) is a web development framework built on top of Node.js enabling React-based web applications functionalities such as server-side rendering and generating static websites.
-
-Next.js and Mesh are JavaScript libraries, and so we will assume that you have some familiarity with HTML and JavaScript language, but you should be able to follow along even if you are coming from a different programming language. If you don't feel very confident, we recommend going through this [JS tutorial](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript), or the [MDN JavaScript Reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript) or my preferred method, by watch a few [videos from YouTube](https://www.youtube.com/results?search_query=get+started+with+nextjs).
-
-## System setup
+Though this guide is focused on Next.js which uses [Mesh React](/react) you can also use Mesh with other frameworks like Remix, React, and Vue. Mesh SDK has [Svelte UI components](/svelte) too.
 
-### 1. Visual Studio Code
+You may follow this guide to setup your project or use the [Mesh CLI](https://meshjs.dev/) to scaffold a new project.
 
-Visual Studio Code is a code editor made by Microsoft. Download and install [Visual Studio Code](https://code.visualstudio.com/) for code editing.
+```bash
+npx meshjs your-app-name
+```
 
-### 2. Node.js
+## Setup Next.js
 
-Node.js is a cross-platform JavaScript runtime environment that runs on the V8 engine and executes JavaScript code. Install the Long-Term Support (LTS) version of [Node.js](https://nodejs.org/) (as of writing v16.16.0).
+[Next.js](https://nextjs.org/) is a web development framework built on top of Node.js enabling React-based web applications functionalities such as server-side rendering and generating static websites.
 
-## Setup Next.js
+Next.js and Mesh are JavaScript libraries, and so we will assume that you have some familiarity with HTML and JavaScript language, but you should be able to follow along even if you are coming from a different programming language. If you don't feel very confident, we recommend going through this [JS tutorial](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript), or the [MDN JavaScript Reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript) or my preferred method, watching a few [videos from YouTube](https://www.youtube.com/results?search_query=get+started+with+nextjs).
 
 ### 1. Create project folder and open Visual Studio Code
 
@@ -75,6 +73,8 @@ Visit [http://localhost:3000](http://localhost:3000/) to view your application.
 
 ## Setup Mesh
 
+Mesh is a JavaScript library that provides a simple way to interact with the Cardano blockchain. It provides a set of APIs that allow you to interact with the Cardano blockchain without having to deal with the complexities of the Cardano blockchain.
+
 ### 1. Install MeshJS package
 
 Install the latest version of Mesh with npm:
@@ -83,9 +83,9 @@ Install the latest version of Mesh with npm:
 npm install @meshsdk/core @meshsdk/react
 ```
 
-### 2. Add webpack in **next.config.js**
+### 2. Add webpack in next config
 
-Open **next.config.mjs** and append **webpack** configurations. Your **next.config.mjs** should look like this:
+Open **next.config.ts** and append **webpack** configurations. Your **next.config.ts** should look like this:
 
 ```
 /** @type {import('next').NextConfig} */
@@ -107,7 +107,7 @@ export default nextConfig;
 
 You just saved a few weeks of learning and a number days trying to get started. Your Next.js application is ready to connect wallet, browse assets and make some transactions.
 
-## See it in action
+## Connect wallet and view assets
 
 ### 1. Add **MeshProvider**
 

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

@@ -1,9 +1,8 @@
 import { Suspense, useEffect, useState } from "react";
-import { DocumentCheckIcon } from "@heroicons/react/24/solid";
 
-import Link from "~/components/link";
 import HeroTwoSections from "~/components/sections/hero-two-sections";
 import Metatags from "~/components/site/metatags";
+import SectionIntro from "./intro";
 
 export default function HomePage() {
   return (
@@ -13,19 +12,21 @@ export default function HomePage() {
         <HeroTwoSections
           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" }}
+          link={{ label: "Catalyst Proposals", href: "/about/catalyst" }}
           // image={<Video />}
-          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>
-          }
+          // 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>
+
+      <SectionIntro />
     </>
   );
 }