Merge branch 'main' into fix/tx-builder-fetcher-logic

MeshJS · Nov 12, 2024 · 5805eeb · 5805eeb
2 parents efbc3eb + e5729f7
commit 5805eeb
Show file tree

Hide file tree

Showing 35 changed files with 620 additions and 126 deletions.
diff --git a/apps/playground/package.json b/apps/playground/package.json
@@ -20,6 +20,7 @@
     "@meshsdk/react": "*",
     "@next/mdx": "^14.2.3",
     "@next/third-parties": "^14.2.5",
+    "@vercel/og": "^0.6.3",
     "copy-to-clipboard": "^3.3.3",
     "flowbite": "^2.5.1",
     "flowbite-react": "^0.9.0",

diff --git a/apps/playground/src/components/sections/hero-two-sections.tsx b/apps/playground/src/components/sections/hero-two-sections.tsx
@@ -42,7 +42,7 @@ export default function HeroTwoSections({
 
           {code && <Codeblock data={code} />}
 
-          {children && children}
+          {children && <div className="my-1">{children}</div>}
         </div>
         <div className="hidden lg:col-span-5 lg:mt-0 lg:flex">
           {typeof image === "string" ? <img src={image} /> : image}

diff --git a/apps/playground/src/components/site/metatags.tsx b/apps/playground/src/components/site/metatags.tsx
@@ -4,7 +4,7 @@ export default function Metatags({
   title,
   keywords,
   description,
-  image = "/logo-mesh/mesh.png",
+  image,
 }: {
   title?: string;
   keywords?: string;
@@ -15,43 +15,57 @@ export default function Metatags({
     description =
       "Intuitive and easy-to-use Web3 development framework to build amazing applications on Cardano.";
   }
+
   if (keywords === undefined) {
     keywords =
       "developer, tools, cardano, blockchain, sdk, plutus, crypto, web3, metaverse, gaming, ecommerce, nfts, apis, aiken";
   }
+
   if (title === undefined) {
-    title = "Cardano Web3 TypeScript SDK & off-chain Framework";
+    title = "Mesh JS - Cardano Web3 TypeScript SDK & Off-Chain Framework";
+  } else {
+    title = title + " - Mesh JS";
   }
 
-  title = title + " - Mesh JS";
-
   return (
     <Head>
       <meta name="viewport" content="width=device-width, initial-scale=1" />
       <meta charSet="utf-8" />
 
-      <title>{title}</title>
+      {title && <title>{title}</title>}
       <meta name="description" content={description} />
       <meta name="keywords" content={keywords} />
 
-      <meta property="og:title" content={title} />
-      <meta property="og:site_name" content={title} />
+      {title && <meta property="og:title" content={title} />}
+      {title && <meta property="og:site_name" content={title} />}
       <meta property="og:type" content="website" />
       <meta property="og:description" content={description} />
       {image && (
         <meta property="og:image" content={`https://meshjs.dev${image}`} />
       )}
-      {image && <meta property="og:image:alt" content={title} />}
+      {title && image === undefined && (
+        <meta
+          property="og:image"
+          content={`https://meshjs.dev/api/og?title=${title}`}
+        />
+      )}
+      {title && <meta property="og:image:alt" content={title} />}
 
       <meta name="twitter:card" content="summary_large_image" />
       <meta name="twitter:site" content="@meshsdk" />
-      <meta name="twitter:title" content={title} />
+      {title && <meta name="twitter:title" content={title} />}
       <meta name="twitter:description" content={description} />
       <meta name="twitter:creator" content="@meshsdk" />
       {image && (
-        <meta name="twitter:image" content={`https://meshjs.dev${image}`} />
+        <meta property="twitter:image" content={`https://meshjs.dev${image}`} />
+      )}
+      {title && image === undefined && (
+        <meta
+          property="twitter:image"
+          content={`https://meshjs.dev/api/og?title=${title}`}
+        />
       )}
-      {image && <meta name="twitter:image:alt" content={title} />}
+      {title && <meta name="twitter:image:alt" content={title} />}
 
       <link
         rel="apple-touch-icon"

diff --git a/apps/playground/src/data/catalyst.ts b/apps/playground/src/data/catalyst.ts
@@ -3,7 +3,7 @@ import { LightBulbIcon } from "@heroicons/react/24/solid";
 export const metaCatalyst = {
   link: `/about/catalyst`,
   title: "Project Catalyst",
-  desc: "Here are proposals that we have submitted to Project Catalyst and its progress.",
+  desc: "Proposals that we have submitted to Project Catalyst and its progress.",
   icon: LightBulbIcon,
 };
 

diff --git a/apps/playground/src/pages/404.tsx b/apps/playground/src/pages/404.tsx
@@ -11,6 +11,8 @@ const ReactPage: NextPage = () => {
           <div className="mx-auto max-w-screen-sm text-center">
             <p className="mb-8 font-medium text-gray-500 sm:text-2xl dark:text-gray-400">
               Whoops! This page doesn't exist.
+              <br />
+              Check the links below to find what you're looking for.
             </p>
           </div>
         </div>

diff --git a/apps/playground/src/pages/_app.tsx b/apps/playground/src/pages/_app.tsx
@@ -9,7 +9,6 @@ import { Toaster } from "react-hot-toast";
 import { MeshProvider } from "@meshsdk/react";
 
 import Footer from "~/components/site/footer";
-import Metatags from "~/components/site/metatags";
 import Navbar from "~/components/site/navbar";
 import Providers from "~/contexts/providers";
 
@@ -19,7 +18,6 @@ export default function App({ Component, pageProps }: AppProps) {
   return (
     <MeshProvider>
       <Providers>
-        <Metatags />
         <div className="cursor-default">
           <header>
             <Navbar />

diff --git a/apps/playground/src/pages/about/index.tsx b/apps/playground/src/pages/about/index.tsx
@@ -1,3 +1,4 @@
+import Metatags from "~/components/site/metatags";
 import AboutHero from "./about-us/hero";
 import AboutIncorporation from "./about-us/incorporation";
 import AboutMeeting from "./about-us/meeting";
@@ -8,6 +9,7 @@ import AboutWhatWorkingOn from "./about-us/what-working-on";
 export default function AboutPage() {
   return (
     <>
+      <Metatags title="About Mesh SDK" />
       <AboutHero />
       <AboutTeam />
       <AboutMeeting />

diff --git a/apps/playground/src/pages/api/og.tsx b/apps/playground/src/pages/api/og.tsx
@@ -0,0 +1,77 @@
+import { NextRequest } from "next/server";
+import { ImageResponse } from "@vercel/og";
+
+export const config = {
+  runtime: "edge",
+};
+
+export default function handler(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+
+    // ?title=<title>
+    const hasTitle = searchParams.has("title");
+    const title = hasTitle
+      ? searchParams.get("title")?.slice(0, 100)
+      : "Mesh JS - Cardano Web3 TypeScript SDK & Off-Chain Framework";
+
+    return new ImageResponse(
+      (
+        <div
+          style={{
+            backgroundColor: "black",
+            backgroundSize: "150px 150px",
+            height: "100%",
+            width: "100%",
+            display: "flex",
+            textAlign: "center",
+            alignItems: "center",
+            justifyContent: "center",
+            flexDirection: "column",
+            flexWrap: "nowrap",
+          }}
+        >
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              justifyItems: "center",
+            }}
+          >
+            <svg
+              viewBox="0 0 300 200"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="white"
+            >
+              <path d="m289 127-45-60-45-60c-.9-1.3-2.4-2-4-2s-3.1.7-4 2l-37 49.3c-2 2.7-6 2.7-8 0l-37-49.3c-.9-1.3-2.4-2-4-2s-3.1.7-4 2l-45 60-45 60c-1.3 1.8-1.3 4.2 0 6l45 60c.9 1.3 2.4 2 4 2s3.1-.7 4-2l37-49.3c2-2.7 6-2.7 8 0l37 49.3c.9 1.3 2.4 2 4 2s3.1-.7 4-2l37-49.3c2-2.7 6-2.7 8 0l37 49.3c.9 1.3 2.4 2 4 2s3.1-.7 4-2l45-60c1.3-1.8 1.3-4.2 0-6zm-90-103.3 32.5 43.3c1.3 1.8 1.3 4.2 0 6l-32.5 43.3c-2 2.7-6 2.7-8 0l-32.5-43.3c-1.3-1.8-1.3-4.2 0-6l32.5-43.3c2-2.7 6-2.7 8 0zm-90 0 32.5 43.3c1.3 1.8 1.3 4.2 0 6l-32.5 43.3c-2 2.7-6 2.7-8 0l-32.5-43.3c-1.3-1.8-1.3-4.2 0-6l32.5-43.3c2-2.7 6-2.7 8 0zm-53 152.6-32.5-43.3c-1.3-1.8-1.3-4.2 0-6l32.5-43.3c2-2.7 6-2.7 8 0l32.5 43.3c1.3 1.8 1.3 4.2 0 6l-32.5 43.3c-2 2.7-6 2.7-8 0zm90 0-32.5-43.3c-1.3-1.8-1.3-4.2 0-6l32.5-43.3c2-2.7 6-2.7 8 0l32.5 43.3c1.3 1.8 1.3 4.2 0 6l-32.5 43.3c-2 2.7-6 2.7-8 0zm90 0-32.5-43.3c-1.3-1.8-1.3-4.2 0-6l32.5-43.3c2-2.7 6-2.7 8 0l32.5 43.3c1.3 1.8 1.3 4.2 0 6l-32.5 43.3c-2 2.7-6 2.7-8 0z" />
+            </svg>
+          </div>
+          <div
+            style={{
+              fontSize: 60,
+              fontStyle: "normal",
+              letterSpacing: "-0.025em",
+              color: "white",
+              marginTop: 30,
+              padding: "0 120px",
+              lineHeight: 1.4,
+              whiteSpace: "pre-wrap",
+            }}
+          >
+            {title}
+          </div>
+        </div>
+      ),
+      {
+        width: 1200,
+        height: 630,
+      },
+    );
+  } catch (e: any) {
+    console.log(`${e.message}`);
+    return new Response(`Failed to generate the image`, {
+      status: 500,
+    });
+  }
+}
diff --git a/apps/playground/src/pages/apis/transaction/common.tsx b/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: true });\n`;
+  example += `const tx = new Transaction({ initiator: wallet, fetcher: blockchainProvider, 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`;

diff --git a/apps/playground/src/pages/guides/aiken.mdx b/apps/playground/src/pages/guides/aiken.mdx
@@ -2,12 +2,20 @@ import LayoutImageHeaderAndBody from "~/components/layouts/image-header-and-body
 import { guideaiken } from "~/data/links-guides";
 
 export default function MDXPage({ children }) {
+  const sidebarItems = [
+    { label: 'System setup', to: 'systemsetup' },
+    { label: 'Writing a smart contract with Aiken', to: 'writingasmartcontractwithaiken' },
+    { label: 'Creating locking transaction', to: 'creatinglockingtransaction' },
+    { label: 'Unlocking assets', to: 'unlockingassets' },
+  ]
+
   return (
     <LayoutImageHeaderAndBody
       title={guideaiken.title}
       description={guideaiken.description}
       image={guideaiken.image}
       cover={guideaiken.cover}
+      sidebarItems={sidebarItems}
     >
       {children}
     </LayoutImageHeaderAndBody>

diff --git a/apps/playground/src/pages/guides/custom-provider.mdx b/apps/playground/src/pages/guides/custom-provider.mdx
@@ -2,12 +2,22 @@ import LayoutImageHeaderAndBody from "~/components/layouts/image-header-and-body
 import { guideprovider } from "~/data/links-guides";
 
 export default function MDXPage({ children }) {
+  const sidebarItems = [
+    { label: 'How does it work?', to: 'howdoesitwork' },
+    { label: 'Implement your own provider', to: 'implementyourownprovider' },
+    {
+      label: 'Implement Constructor and Functions',
+      to: 'implementconstructorandfunctions'
+    }
+  ]
+
   return (
     <LayoutImageHeaderAndBody
       title={guideprovider.title}
       description={guideprovider.description}
       image={guideprovider.image}
       cover={guideprovider.cover}
+      sidebarItems={sidebarItems}
     >
       {children}
     </LayoutImageHeaderAndBody>

diff --git a/apps/playground/src/pages/guides/minting-on-nodejs.mdx b/apps/playground/src/pages/guides/minting-on-nodejs.mdx
@@ -2,12 +2,18 @@ import LayoutImageHeaderAndBody from "~/components/layouts/image-header-and-body
 import { guidenodejs } from "~/data/links-guides";
 
 export default function MDXPage({ children }) {
+  const sidebarItems = [
+    { label: 'System setup', to: 'systemsetup' },
+    { label: 'Build the minting transaction', to: 'buildthemintingtransaction' },
+  ];
+
   return (
     <LayoutImageHeaderAndBody
       title={guidenodejs.title}
       description={guidenodejs.description}
       image={guidenodejs.image}
       cover={guidenodejs.cover}
+      sidebarItems={sidebarItems}
     >
       {children}
     </LayoutImageHeaderAndBody>

diff --git a/apps/playground/src/pages/guides/multisig-minting/demo.tsx b/apps/playground/src/pages/guides/multisig-minting/demo.tsx
@@ -112,7 +112,6 @@ export default function Demo() {
 
   return (
     <>
-      <h2>Demo</h2>
       <p>Connect your wallet and click on the button to mint a token.</p>
       <CardanoWallet />
       <Button

diff --git a/apps/playground/src/pages/guides/multisig-minting/index.mdx b/apps/playground/src/pages/guides/multisig-minting/index.mdx
@@ -3,12 +3,22 @@ import { guideminting } from "~/data/links-guides";
 import Demo from "./demo";
 
 export default function MDXPage({ children }) {
+  const sidebarItems = [
+    { label: 'Connect wallet (client)', to: 'connectwalletclient' },
+    { label: 'Build transaction (application)', to: 'buildtransactionapplication' },
+    { label: 'Sign transaction (client)', to: 'signtransactionclient' },
+    { label: 'Sign transaction (application)', to: 'signtransactionapplication' },
+    { label: 'Submit transaction (application)', to: 'submittransactionapplication' },
+    { label: 'Demo', to: 'demo' },
+  ];
+
   return (
     <LayoutImageHeaderAndBody
       title={guideminting.title}
       description={guideminting.description}
       image={guideminting.image}
       cover={guideminting.cover}
+      sidebarItems={sidebarItems}
     >
       <>
         {children}
@@ -188,3 +198,5 @@ const txHash = await wallet.submitTx(signedTx);
 Voila! You can build any multi-sig transactions!
 
 [Check out the code here](https://github.com/MeshJS/mesh/blob/main/apps/playground/src/pages/guides/multisig-minting/demo.tsx).
+
+## Demo
diff --git a/apps/playground/src/pages/guides/nextjs.mdx b/apps/playground/src/pages/guides/nextjs.mdx
@@ -2,23 +2,27 @@ import LayoutImageHeaderAndBody from "~/components/layouts/image-header-and-body
 import { guidenextjs } from "~/data/links-guides";
 
 export default function MDXPage({ children }) {
-  // const sidebarItems = [
-  //   { label: 'System setup', to: 'systemsetup' },
-  // ];
+  const sidebarItems = [
+    { label: 'System setup', to: 'systemsetup' },
+    { label: 'Setup Mesh', to: 'setupmesh' },
+    { label: 'See it in action', to: 'seeitinaction' },
+  ];
 
   return (
     <LayoutImageHeaderAndBody
       title={guidenextjs.title}
       description={guidenextjs.description}
       image={guidenextjs.image}
       cover={guidenextjs.cover}
-      // sidebarItems={sidebarItems}
+      sidebarItems={sidebarItems}
     >
       {children}
     </LayoutImageHeaderAndBody>
   );
 }
 
+In this guide, you will get your application running, [check this demo](https://starter-template.meshjs.dev/) to see the final result.
+
 [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).
@@ -43,10 +47,22 @@ Create a new folder for your project, and give the folder a meaningful name. Ope
 
 From the menu options in on your Visual Studio Code, open the **Terminal** and execute this command to create a new NextJs application:
 
-```
+```bash
 npx create-next-app@latest --typescript .
 ```
 
+```bash
+Need to install the following packages:
+Ok to proceed? (y) 
+
+✔ Would you like to use ESLint? … Yes
+✔ Would you like to use Tailwind CSS? … Yes
+✔ Would you like your code inside a `src/` directory? … Yes
+✔ Would you like to use App Router? … No
+✔ Would you like to use Turbopack for next dev? … No
+✔ Would you like to customize the import alias (@/* by default)? … No
+```
+
 ### 3. Start development server
 
 After the installation is complete, start the development server with:

diff --git a/apps/playground/src/pages/guides/prove-wallet-ownership/demo.tsx b/apps/playground/src/pages/guides/prove-wallet-ownership/demo.tsx
@@ -25,7 +25,6 @@ export default function Demo() {
 
   return (
     <>
-      <h2>Demo</h2>
       <p>Connect your wallet and click on the button to sign a message.</p>
       <CardanoWallet />
       <Button