add metamask support, fixed giftcard, upgrade wallets

MeshJS · Aug 3, 2024 · 664b0ed · 664b0ed
1 parent c0fbb2f
commit 664b0ed
Show file tree

Hide file tree

Showing 27 changed files with 340 additions and 69 deletions.
diff --git a/apps/playground/src/components/cardano/mint-mesh-token.tsx b/apps/playground/src/components/cardano/mint-mesh-token.tsx
@@ -0,0 +1,67 @@
+import {
+  AppWallet,
+  AssetMetadata,
+  ForgeScript,
+  Mint,
+  Transaction,
+} from "@meshsdk/core";
+import { useWallet } from "@meshsdk/react";
+
+import { demoAssetMetadata, demoMnemonic } from "~/data/cardano";
+import LiveCodeDemo from "../sections/live-code-demo";
+import { getProvider } from "./mesh-wallet";
+
+export default function MintMeshToken() {
+  const { wallet, connected } = useWallet();
+
+  async function runDemo() {
+    const blockchainProvider = getProvider();
+    const mintingWallet = new AppWallet({
+      networkId: 0,
+      fetcher: blockchainProvider,
+      submitter: blockchainProvider,
+      key: {
+        type: "mnemonic",
+        words: demoMnemonic,
+      },
+    });
+
+    const usedAddress = await wallet.getUsedAddresses();
+    const address = usedAddress[0];
+    const forgingScript = ForgeScript.withOneSignature(
+      mintingWallet.getPaymentAddress(),
+    );
+
+    const tx = new Transaction({ initiator: wallet });
+
+    const asset: Mint = {
+      assetName: "MeshToken",
+      assetQuantity: "1",
+      metadata: demoAssetMetadata,
+      label: "721",
+      recipient: address,
+    };
+    tx.mintAsset(forgingScript, asset);
+
+    const unsignedTx = await tx.build();
+    const signedTx = await wallet.signTx(unsignedTx, true);
+    const signedTx2 = await mintingWallet.signTx(signedTx, true);
+    const txHash = await wallet.submitTx(signedTx2);
+    return txHash;
+  }
+
+  return (
+    <LiveCodeDemo
+      title="Mint Mesh Token"
+      subtitle="Mint a Mesh Token to try demos"
+      runCodeFunction={runDemo}
+      disabled={!connected}
+      runDemoButtonTooltip={
+        !connected ? "Connect wallet to run this demo" : undefined
+      }
+      runDemoShowBrowseWalletConnect={true}
+      hideDemoButtonIfnotConnected={true}
+      hideConnectButtonIfConnected={true}
+    ></LiveCodeDemo>
+  );
+}
diff --git a/apps/playground/src/components/sections/live-code-demo.tsx b/apps/playground/src/components/sections/live-code-demo.tsx
@@ -23,6 +23,8 @@ export default function LiveCodeDemo({
   runDemoShowBrowseWalletConnect = false,
   runDemoShowProviderInit = false,
   runDemoProvider = undefined,
+  hideDemoButtonIfnotConnected = false,
+  hideConnectButtonIfConnected = false,
 }: {
   children?: React.ReactNode;
   title: string;
@@ -36,6 +38,8 @@ export default function LiveCodeDemo({
   runDemoShowBrowseWalletConnect?: boolean;
   runDemoShowProviderInit?: boolean;
   runDemoProvider?: string | undefined;
+  hideDemoButtonIfnotConnected?: boolean;
+  hideConnectButtonIfConnected?: boolean;
 }) {
   const { connected } = useWallet();
   const [loading, setLoading] = useState<boolean>(false);
@@ -77,7 +81,7 @@ export default function LiveCodeDemo({
         <BlockchainProviderKey provider={runDemoProvider} />
       )}
 
-      {runCodeFunction && (
+      {runCodeFunction && (connected || !hideDemoButtonIfnotConnected) && (
         <div>
           <RunDemoButton
             runFunction={runDemo}
@@ -96,11 +100,12 @@ export default function LiveCodeDemo({
           <DemoResult response={responseError} label="Error" />
         </div>
       )}
-      {runDemoShowBrowseWalletConnect && (
-        <div>
-          <ConnectBrowserWallet />
-        </div>
-      )}
+      {runDemoShowBrowseWalletConnect &&
+        (!connected || !hideConnectButtonIfConnected) && (
+          <div>
+            <ConnectBrowserWallet />
+          </div>
+        )}
 
       {children && childrenAfterCodeFunctions && (
         <div className="mb-4">{children}</div>

diff --git a/apps/playground/src/components/sections/title-icon-description-body.tsx b/apps/playground/src/components/sections/title-icon-description-body.tsx
@@ -15,12 +15,12 @@ export default function TitleIconDescriptionBody({
   heroicon?: any;
 }) {
   return (
-    <>
+    <div className="mb-8">
       <div className="mb-4 lg:mb-6">
         <Header2 heroicon={heroicon}>{title}</Header2>
         {description && <Paragraph2>{description}</Paragraph2>}
       </div>
       <div className="max-w-screen-lg">{children}</div>
-    </>
+    </div>
   );
 }
diff --git a/apps/playground/src/pages/apis/wallets/browserwallet/connect-wallet.tsx b/apps/playground/src/pages/apis/wallets/browserwallet/connect-wallet.tsx
@@ -26,7 +26,7 @@ function Left() {
         dApp to use.
       </p>
       <p>
-        Query <code>BrowserWallet.getInstalledWallets()</code> to get a list of
+        Query <code>BrowserWallet.getAvailableWallets()</code> to get a list of
         available wallets, then provide the wallet <code>name</code> for which
         wallet the user would like to connect with.
       </p>

diff --git a/apps/playground/src/pages/apis/wallets/browserwallet/get-available-wallets.tsx b/apps/playground/src/pages/apis/wallets/browserwallet/get-available-wallets.tsx
diff --git a/apps/playground/src/pages/apis/wallets/browserwallet/index.tsx b/apps/playground/src/pages/apis/wallets/browserwallet/index.tsx
@@ -7,10 +7,10 @@ import Metatags from "~/components/site/metatags";
 import { metaBrowserwallet } from "~/data/links-wallets";
 import BrowserWalletConnectWallet from "./connect-wallet";
 import BrowserWalletGetAssets from "./get-assets";
+import BrowserWalletGetAvailableWallets from "./get-available-wallets";
 import BrowserWalletGetBalance from "./get-balance";
 import BrowserWalletGetChangeAddress from "./get-change-address";
 import BrowserWalletGetCollateral from "./get-collateral";
-import BrowserWalletGetInstalledWallets from "./get-installed-wallets";
 import BrowserWalletGetLovelace from "./get-lovelace";
 import BrowserWalletGetNetworkId from "./get-networkid";
 import BrowserWalletGetPolicyIdAssets from "./get-policyid-assets";
@@ -25,7 +25,7 @@ import BrowserWalletSubmitTransaction from "./submit-tx";
 
 const ReactPage: NextPage = () => {
   const sidebarItems = [
-    { label: "Get installed wallets", to: "getInstallWallets" },
+    { label: "Get available wallets", to: "getAvailableWallets" },
     { label: "Connect wallet", to: "connectWallet" },
     { label: "Get balance", to: "getBalance" },
     { label: "Get change address", to: "getChangeAddress" },
@@ -76,7 +76,7 @@ const ReactPage: NextPage = () => {
           </p>
         </TitleIconDescriptionBody>
 
-        <BrowserWalletGetInstalledWallets />
+        <BrowserWalletGetAvailableWallets />
         <BrowserWalletConnectWallet />
         <BrowserWalletGetBalance />
         <BrowserWalletGetChangeAddress />

diff --git a/apps/playground/src/pages/smart-contracts/escrow/index.tsx b/apps/playground/src/pages/smart-contracts/escrow/index.tsx
@@ -1,6 +1,7 @@
 import type { NextPage } from "next";
 import Link from "next/link";
 
+import MintMeshToken from "~/components/cardano/mint-mesh-token";
 import SidebarFullwidth from "~/components/layouts/sidebar-fullwidth";
 import TitleIconDescriptionBody from "~/components/sections/title-icon-description-body";
 import Metatags from "~/components/site/metatags";
@@ -76,11 +77,13 @@ const ReactPage: NextPage = () => {
             <Codeblock data={example} isJson={false} />
             <p>
               Both on-chain and off-chain codes are open-source and available on{" "}
-              <Link href="https://github.com/MeshJS/mesh/tree/main/packages/contracts/src/escrow">
+              <Link href="https://github.com/MeshJS/mesh/tree/main/packages/mesh-contract/src/escrow">
                 Mesh Github Repository
               </Link>
               .
             </p>
+
+            <MintMeshToken />
           </>
         </TitleIconDescriptionBody>
 

diff --git a/apps/playground/src/pages/smart-contracts/giftcard/index.tsx b/apps/playground/src/pages/smart-contracts/giftcard/index.tsx
@@ -75,7 +75,7 @@ const ReactPage: NextPage = () => {
             <Codeblock data={example} isJson={false} />
             <p>
               Both on-chain and off-chain codes are open-source and available on{" "}
-              <Link href="https://github.com/MeshJS/mesh/tree/main/packages/contracts/src/giftcard">
+              <Link href="https://github.com/MeshJS/mesh/tree/main/packages/mesh-contract/src/giftcard">
                 Mesh Github Repository
               </Link>
               .

diff --git a/apps/playground/src/pages/smart-contracts/marketplace/index.tsx b/apps/playground/src/pages/smart-contracts/marketplace/index.tsx
@@ -1,6 +1,7 @@
 import type { NextPage } from "next";
 import Link from "next/link";
 
+import MintMeshToken from "~/components/cardano/mint-mesh-token";
 import SidebarFullwidth from "~/components/layouts/sidebar-fullwidth";
 import TitleIconDescriptionBody from "~/components/sections/title-icon-description-body";
 import Metatags from "~/components/site/metatags";
@@ -102,11 +103,13 @@ const ReactPage: NextPage = () => {
             </p>
             <p>
               Both on-chain and off-chain codes are open-source and available on{" "}
-              <Link href="https://github.com/MeshJS/mesh/tree/main/packages/contracts/src/marketplace">
+              <Link href="https://github.com/MeshJS/mesh/tree/main/packages/mesh-contract/src/marketplace">
                 Mesh Github Repository
               </Link>
               .
             </p>
+
+            <MintMeshToken />
           </>
         </TitleIconDescriptionBody>
         <MarketplaceListAsset />

diff --git a/apps/playground/src/pages/smart-contracts/marketplace/list-asset.tsx b/apps/playground/src/pages/smart-contracts/marketplace/list-asset.tsx
@@ -2,6 +2,7 @@ import { useState } from "react";
 
 import { useWallet } from "@meshsdk/react";
 
+import MintMeshToken from "~/components/cardano/mint-mesh-token";
 import Input from "~/components/form/input";
 import InputTable from "~/components/sections/input-table";
 import LiveCodeDemo from "~/components/sections/live-code-demo";

diff --git a/apps/playground/src/pages/smart-contracts/payment-splitter/index.tsx b/apps/playground/src/pages/smart-contracts/payment-splitter/index.tsx
@@ -95,7 +95,7 @@ const ReactPage: NextPage = () => {
             <Codeblock data={example} isJson={false} />
             <p>
               Both on-chain and off-chain codes are open-source and available on{" "}
-              <Link href="https://github.com/MeshJS/mesh/tree/main/packages/contracts/src/payment-splitter">
+              <Link href="https://github.com/MeshJS/mesh/tree/main/packages/mesh-contract/src/payment-splitter">
                 Mesh Github Repository
               </Link>
               .

diff --git a/apps/playground/src/pages/smart-contracts/swap/index.tsx b/apps/playground/src/pages/smart-contracts/swap/index.tsx
@@ -1,6 +1,7 @@
 import type { NextPage } from "next";
 import Link from "next/link";
 
+import MintMeshToken from "~/components/cardano/mint-mesh-token";
 import SidebarFullwidth from "~/components/layouts/sidebar-fullwidth";
 import TitleIconDescriptionBody from "~/components/sections/title-icon-description-body";
 import Metatags from "~/components/site/metatags";
@@ -76,11 +77,13 @@ const ReactPage: NextPage = () => {
             <Codeblock data={example} isJson={false} />
             <p>
               Both on-chain and off-chain codes are open-source and available on{" "}
-              <Link href="https://github.com/MeshJS/mesh/tree/main/packages/contracts/src/swap">
+              <Link href="https://github.com/MeshJS/mesh/tree/main/packages/mesh-contract/src/swap">
                 Mesh Github Repository
               </Link>
               .
             </p>
+
+            <MintMeshToken />
           </>
         </TitleIconDescriptionBody>
 

diff --git a/apps/playground/src/pages/smart-contracts/vesting/index.tsx b/apps/playground/src/pages/smart-contracts/vesting/index.tsx
@@ -75,7 +75,7 @@ const ReactPage: NextPage = () => {
             <Codeblock data={example} isJson={false} />
             <p>
               Both on-chain and off-chain codes are open-source and available on{" "}
-              <Link href="https://github.com/MeshJS/mesh/tree/main/packages/contracts/src/vesting">
+              <Link href="https://github.com/MeshJS/mesh/tree/main/packages/mesh-contract/src/vesting">
                 Mesh Github Repository
               </Link>
               .