From 26d7c7fbc314fcfa8501d1a119cdb58f1705a131 Mon Sep 17 00:00:00 2001 From: "Hong Jing (Jingles)" Date: Thu, 17 Oct 2024 12:33:31 +0800 Subject: [PATCH 1/4] update metadata --- .../src/components/site/metatags.tsx | 26 +++++++++---------- apps/playground/src/pages/home/index.tsx | 2 +- 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/apps/playground/src/components/site/metatags.tsx b/apps/playground/src/components/site/metatags.tsx index ce41a63e..10d0911e 100644 --- a/apps/playground/src/components/site/metatags.tsx +++ b/apps/playground/src/components/site/metatags.tsx @@ -17,13 +17,13 @@ export default function Metatags({ } if (keywords === undefined) { keywords = - "developer, tools, cardano, blockchain, sdk, plutus, crypto, web3, metaverse, gaming, ecommerce, nfts, apis"; + "developer, tools, cardano, blockchain, sdk, plutus, crypto, web3, metaverse, gaming, ecommerce, nfts, apis, aiken"; } if (title === undefined) { - title = "Web3 Development Made Easy"; + title = "Cardano Web3 TypeScript SDK & off-chain Framework"; } - title = title + " - MeshJS"; + title = title + " - Mesh JS"; return ( @@ -31,9 +31,17 @@ export default function Metatags({ {title} - - + + + + + + + {image && ( + + )} + {image && } @@ -45,14 +53,6 @@ export default function Metatags({ )} {image && } - - - - - {image && ( - - )} - From fbebbc345eb81f1a5327b997d9c549e0f01c5716 Mon Sep 17 00:00:00 2001 From: "Hong Jing (Jingles)" Date: Thu, 17 Oct 2024 22:40:54 +0800 Subject: [PATCH 2/4] remove metamask default --- .../src/pages/react/ui-components/connect-wallet.tsx | 7 ++++++- packages/mesh-react/src/cardano-wallet/index.tsx | 4 +--- packages/mesh-react/src/hooks/useWalletList.ts | 7 ++----- packages/mesh-wallet/src/browser/index.ts | 4 +--- 4 files changed, 10 insertions(+), 12 deletions(-) diff --git a/apps/playground/src/pages/react/ui-components/connect-wallet.tsx b/apps/playground/src/pages/react/ui-components/connect-wallet.tsx index 84fed757..ded9131c 100644 --- a/apps/playground/src/pages/react/ui-components/connect-wallet.tsx +++ b/apps/playground/src/pages/react/ui-components/connect-wallet.tsx @@ -138,6 +138,7 @@ function Right() { example += ` label={"Connect a Wallet"}\n`; example += ` isDark={isDark}\n`; example += ` onConnected={afterConnectedWallet}\n`; + example += ` metamask={{ network: "preprod" }}\n`; example += ` />\n`; example += ` \n`; example += ` );\n`; @@ -150,7 +151,11 @@ function Right() { code={example} childrenAfterCodeFunctions={true} > - + ); } diff --git a/packages/mesh-react/src/cardano-wallet/index.tsx b/packages/mesh-react/src/cardano-wallet/index.tsx index aad90342..6284835f 100644 --- a/packages/mesh-react/src/cardano-wallet/index.tsx +++ b/packages/mesh-react/src/cardano-wallet/index.tsx @@ -19,9 +19,7 @@ export const CardanoWallet = ({ label = "Connect Wallet", onConnected = undefined, isDark = false, - metamask = { - network: "preprod", - }, + metamask = undefined, extensions = [], }: ButtonProps) => { const [isDarkMode, setIsDarkMode] = useState(false); diff --git a/packages/mesh-react/src/hooks/useWalletList.ts b/packages/mesh-react/src/hooks/useWalletList.ts index da784a46..57a76acf 100644 --- a/packages/mesh-react/src/hooks/useWalletList.ts +++ b/packages/mesh-react/src/hooks/useWalletList.ts @@ -4,16 +4,13 @@ import type { Wallet } from "@meshsdk/common"; import { BrowserWallet } from "@meshsdk/wallet"; export const useWalletList = ({ - metamask = { - network: "preprod", - }, + metamask = undefined, }: { metamask?: { network: string; - } + }; } = {}) => { const [wallets, setWallets] = useState([]); - useEffect(() => { async function get() { setWallets(await BrowserWallet.getAvailableWallets({ metamask })); diff --git a/packages/mesh-wallet/src/browser/index.ts b/packages/mesh-wallet/src/browser/index.ts index 1f1def73..1143c042 100644 --- a/packages/mesh-wallet/src/browser/index.ts +++ b/packages/mesh-wallet/src/browser/index.ts @@ -61,9 +61,7 @@ export class BrowserWallet implements IInitiator, ISigner, ISubmitter { * @returns a list of wallet names */ static async getAvailableWallets({ - metamask = { - network: "preprod", - }, + metamask = undefined, }: { metamask?: { network: string; From aa7b973be6a282485913610100101cc931ebadf4 Mon Sep 17 00:00:00 2001 From: "Hong Jing (Jingles)" Date: Fri, 18 Oct 2024 16:08:35 +0800 Subject: [PATCH 3/4] wip --- packages/mesh-provider/src/blockfrost.ts | 47 ++++++++++++++++++++ packages/mesh-react/src/hooks/useLovelace.ts | 20 ++++++--- packages/mesh-wallet/src/browser/index.ts | 11 +++++ 3 files changed, 73 insertions(+), 5 deletions(-) diff --git a/packages/mesh-provider/src/blockfrost.ts b/packages/mesh-provider/src/blockfrost.ts index 5c86d2ce..5606b125 100644 --- a/packages/mesh-provider/src/blockfrost.ts +++ b/packages/mesh-provider/src/blockfrost.ts @@ -30,6 +30,15 @@ import { parseAssetUnit } from "./utils/parse-asset-unit"; export type BlockfrostSupportedNetworks = "mainnet" | "preview" | "preprod"; +/** + * Blockfrost provides restful APIs which allows your app to access information stored on the blockchain. + * + * Usage: + * ``` + * import { BlockfrostProvider } from "@meshsdk/core"; + * + * const blockchainProvider = new BlockfrostProvider(''); + */ export class BlockfrostProvider implements IFetcher, IListener, ISubmitter, IEvaluator { @@ -69,6 +78,10 @@ export class BlockfrostProvider } } + /** + * Evaluates the resources required to execute the transaction + * @param tx - The transaction to evaluate + */ async evaluateTx(cbor: string): Promise { try { const headers = { "Content-Type": "application/cbor" }; @@ -108,6 +121,10 @@ export class BlockfrostProvider } } + /** + * Obtain information about a specific stake account. + * @param address - Wallet address to fetch account information + */ async fetchAccountInfo(address: string): Promise { const rewardAddress = address.startsWith("addr") ? resolveRewardAddress(address) @@ -133,6 +150,11 @@ export class BlockfrostProvider } } + /** + * Fetches the assets for a given address. + * @param address - The address to fetch assets for + * @returns A map of asset unit to quantity + */ async fetchAddressAssets( address: string, ): Promise<{ [key: string]: string }> { @@ -174,6 +196,10 @@ export class BlockfrostProvider } } + /** + * Fetches the asset addresses for a given asset. + * @param asset - The asset to fetch addresses for + */ async fetchAssetAddresses( asset: string, ): Promise<{ address: string; quantity: string }[]> { @@ -201,6 +227,11 @@ export class BlockfrostProvider } } + /** + * Fetches the metadata for a given asset. + * @param asset - The asset to fetch metadata for + * @returns The metadata for the asset + */ async fetchAssetMetadata(asset: string): Promise { try { const { policyId, assetName } = parseAssetUnit(asset); @@ -222,6 +253,11 @@ export class BlockfrostProvider } } + /** + * Fetches the metadata for a given asset. + * @param asset - The asset to fetch metadata for + * @returns The metadata for the asset + */ async fetchLatestBlock(): Promise { try { const { data, status } = await this._axiosInstance.get(`blocks/latest`); @@ -432,6 +468,12 @@ export class BlockfrostProvider } } + /** + * Allow you to listen to a transaction confirmation. Upon confirmation, the callback will be called. + * @param txHash - The transaction hash to listen for confirmation + * @param callback - The callback function to call when the transaction is confirmed + * @param limit - The number of blocks to wait for confirmation + */ onTxConfirmed(txHash: string, callback: () => void, limit = 100): void { let attempts = 0; @@ -457,6 +499,11 @@ export class BlockfrostProvider }, 5_000); } + /** + * Submit a serialized transaction to the network. + * @param tx - The serialized transaction in hex to submit + * @returns The transaction hash of the submitted transaction + */ async submitTx(tx: string): Promise { try { const headers = { "Content-Type": "application/cbor" }; diff --git a/packages/mesh-react/src/hooks/useLovelace.ts b/packages/mesh-react/src/hooks/useLovelace.ts index bbea1908..fd98ed15 100644 --- a/packages/mesh-react/src/hooks/useLovelace.ts +++ b/packages/mesh-react/src/hooks/useLovelace.ts @@ -1,4 +1,4 @@ -import { useContext, useEffect, useState } from "react"; +import { useContext, useEffect, useMemo, useRef, useState } from "react"; import { WalletContext } from "../contexts"; @@ -6,12 +6,22 @@ export const useLovelace = () => { const [lovelace, setLovelace] = useState(); const { hasConnectedWallet, connectedWalletName, connectedWalletInstance } = useContext(WalletContext); + const hasFetchedLovelace = useRef(false); useEffect(() => { - if (hasConnectedWallet) { - connectedWalletInstance.getLovelace().then(setLovelace); + async function getLovelace() { + console.log(333, lovelace, hasConnectedWallet, connectedWalletName); + setLovelace(await connectedWalletInstance.getLovelace()); } - }, [connectedWalletName]); + if (hasConnectedWallet && !hasFetchedLovelace.current) { + getLovelace(); + hasFetchedLovelace.current = true; + } + }, [hasConnectedWallet, connectedWalletInstance]); + + const _lovelace = useMemo(() => { + return lovelace; + }, [lovelace]); - return lovelace; + return _lovelace; }; diff --git a/packages/mesh-wallet/src/browser/index.ts b/packages/mesh-wallet/src/browser/index.ts index 1143c042..29515afd 100644 --- a/packages/mesh-wallet/src/browser/index.ts +++ b/packages/mesh-wallet/src/browser/index.ts @@ -42,6 +42,16 @@ declare global { } } +/** + * Browser Wallet provides a set of APIs to interact with the blockchain. This wallet is compatible with Mesh transaction builders. + * + * These wallets APIs are in accordance to CIP-30, which defines the API for dApps to communicate with the user's wallet. Additional utility functions provided for developers that are useful for building dApps. + * ```javascript + * import { BrowserWallet } from '@meshsdk/core'; + * + * const wallet = await BrowserWallet.enable('eternl'); + * ``` + */ export class BrowserWallet implements IInitiator, ISigner, ISubmitter { walletInstance: WalletInstance; @@ -147,6 +157,7 @@ export class BrowserWallet implements IInitiator, ISigner, ISubmitter { * @returns a list of assets and their quantities */ async getBalance(): Promise { + console.log(999) const balance = await this._walletInstance.getBalance(); return fromValue(deserializeValue(balance)); } From db7dad7ae7b98c9dedaab5b4d7e8cfde067fedb3 Mon Sep 17 00:00:00 2001 From: "Hong Jing (Jingles)" Date: Fri, 18 Oct 2024 23:04:28 +0800 Subject: [PATCH 4/4] fix links --- .../src/components/layouts/markdown.tsx | 13 +++++++++++- .../src/components/site/navbar/index.tsx | 2 -- apps/playground/src/data/links-providers.ts | 4 ++-- .../minting/minting-native-script.tsx | 2 +- .../transaction/staking/register-stake.tsx | 2 +- .../apis/wallets/browserwallet/sign-data.tsx | 2 +- .../apis/wallets/meshwallet/sign-data.tsx | 2 +- apps/playground/src/pages/guides/aiken.mdx | 2 +- .../src/pages/guides/custom-provider.mdx | 2 +- .../src/pages/guides/minting-on-nodejs.mdx | 12 +++++------ .../pages/guides/multisig-minting/index.mdx | 6 +++--- apps/playground/src/pages/guides/nextjs.mdx | 8 +++++--- .../guides/smart-contract-transactions.mdx | 2 +- .../src/pages/guides/standalone.mdx | 2 +- .../react/ui-components/connect-wallet.tsx | 2 +- .../pages/react/wallet-hooks/use-wallet.tsx | 2 +- package-lock.json | 20 +++++++++++++++---- 17 files changed, 54 insertions(+), 31 deletions(-) diff --git a/apps/playground/src/components/layouts/markdown.tsx b/apps/playground/src/components/layouts/markdown.tsx index e92c4ac1..2a292af8 100644 --- a/apps/playground/src/components/layouts/markdown.tsx +++ b/apps/playground/src/components/layouts/markdown.tsx @@ -2,6 +2,7 @@ import { useEffect, useState } from "react"; import { MDXProvider } from "@mdx-js/react"; import Codeblock from "~/components/text/codeblock"; +import Link from "../link"; export default function Markdown({ children }: { children: React.ReactNode }) { const [mounted, setMounted] = useState(false); @@ -16,7 +17,17 @@ export default function Markdown({ children }: { children: React.ReactNode }) { components={{ //@ts-ignore pre: (props) => , - h2: (props) =>

{props.children}

, + h2: (props) => ( +

+ {props.children} +

+ ), + //@ts-ignore + a: (props) => {props.children as string}, }} > {children} diff --git a/apps/playground/src/components/site/navbar/index.tsx b/apps/playground/src/components/site/navbar/index.tsx index 7bdad790..f8f59156 100644 --- a/apps/playground/src/components/site/navbar/index.tsx +++ b/apps/playground/src/components/site/navbar/index.tsx @@ -127,8 +127,6 @@ export default function Navbar() { - - diff --git a/apps/playground/src/data/links-providers.ts b/apps/playground/src/data/links-providers.ts index de7c8699..2609a234 100644 --- a/apps/playground/src/data/links-providers.ts +++ b/apps/playground/src/data/links-providers.ts @@ -24,9 +24,9 @@ export const metaBlockfrost = { }; export const metaU5c = { - title: "UTxORPC", + title: "UTxORPC Provider", link: "/providers/utxorpc", - desc: "Facilitates access to this state in a standardized and efficient manner through gRPC", + desc: "Highly efficient through gRPC, using a compact and high-performance binary format", thumbnail: "/providers/utxo-rpc.png", }; diff --git a/apps/playground/src/pages/apis/transaction/minting/minting-native-script.tsx b/apps/playground/src/pages/apis/transaction/minting/minting-native-script.tsx index 821d44d5..81992d2f 100644 --- a/apps/playground/src/pages/apis/transaction/minting/minting-native-script.tsx +++ b/apps/playground/src/pages/apis/transaction/minting/minting-native-script.tsx @@ -87,7 +87,7 @@ function Left() { To get the keyHash, use the{" "} deserializeAddress(). To get the slot, use the{" "} resolveSlotNo(). Check out{" "} - Resolvers on how to use these + Resolvers on how to use these functions.

diff --git a/apps/playground/src/pages/apis/transaction/staking/register-stake.tsx b/apps/playground/src/pages/apis/transaction/staking/register-stake.tsx index 1a15e163..830c378c 100644 --- a/apps/playground/src/pages/apis/transaction/staking/register-stake.tsx +++ b/apps/playground/src/pages/apis/transaction/staking/register-stake.tsx @@ -50,7 +50,7 @@ function Left() {

New address must "register" before they can delegate to stakepools. To check if a reward address has been register, use{" "} - + blockchainProvider.fetchAccountInfo(rewardAddress) . For example this account information, active shows the diff --git a/apps/playground/src/pages/apis/wallets/browserwallet/sign-data.tsx b/apps/playground/src/pages/apis/wallets/browserwallet/sign-data.tsx index 52eca320..0372b1c0 100644 --- a/apps/playground/src/pages/apis/wallets/browserwallet/sign-data.tsx +++ b/apps/playground/src/pages/apis/wallets/browserwallet/sign-data.tsx @@ -49,7 +49,7 @@ function Left() {

Continue reading this{" "} - + guide {" "} to learn how to verify the signature. diff --git a/apps/playground/src/pages/apis/wallets/meshwallet/sign-data.tsx b/apps/playground/src/pages/apis/wallets/meshwallet/sign-data.tsx index f41cfeaf..337a4f8d 100644 --- a/apps/playground/src/pages/apis/wallets/meshwallet/sign-data.tsx +++ b/apps/playground/src/pages/apis/wallets/meshwallet/sign-data.tsx @@ -43,7 +43,7 @@ function Left() {

Continue reading this{" "} - + guide {" "} to learn how to verify the signature. diff --git a/apps/playground/src/pages/guides/aiken.mdx b/apps/playground/src/pages/guides/aiken.mdx index c4220d2d..51a105bd 100644 --- a/apps/playground/src/pages/guides/aiken.mdx +++ b/apps/playground/src/pages/guides/aiken.mdx @@ -74,7 +74,7 @@ You can read more about this example on the [Aiken website](https://aiken-lang.o ### Create a new project -First, we will create a new project. Please refer to [this guide](https://meshjs.dev/guides/nextjs) for more information on creating a new Next.js project. +First, we will create a new project. Please refer to [this guide](/guides/nextjs) for more information on creating a new Next.js project. Next, we create a new Aiken project within this project folder: diff --git a/apps/playground/src/pages/guides/custom-provider.mdx b/apps/playground/src/pages/guides/custom-provider.mdx index 70453c31..a5283c49 100644 --- a/apps/playground/src/pages/guides/custom-provider.mdx +++ b/apps/playground/src/pages/guides/custom-provider.mdx @@ -14,7 +14,7 @@ export default function MDXPage({ children }) { ); } -As of writing (Dec 2022), Mesh offers a few options: [Blockfrost](https://blockfrost.io/) or [Koios](https://www.koios.rest/) (see a list of [Providers](https://meshjs.dev/providers)). These blockchain providers allow developers to access the Cardano blockchain and retrieve intricate data. For example, they can be used to query the UTXO of a smart contract and use it as part of a transaction, or to submit a signed transaction to the chain. +As of writing (Dec 2022), Mesh offers a few options: [Blockfrost](https://blockfrost.io/) or [Koios](https://www.koios.rest/) (see a list of [Providers](/providers)). These blockchain providers allow developers to access the Cardano blockchain and retrieve intricate data. For example, they can be used to query the UTXO of a smart contract and use it as part of a transaction, or to submit a signed transaction to the chain. You can customize a provider to utilize GraphQL, cardano-cli, or websocket with Mesh SDK. Whatever the query method used to obtain the data, it will work perfectly with Mesh SDK so long as the output of the function is compatible with the interface. diff --git a/apps/playground/src/pages/guides/minting-on-nodejs.mdx b/apps/playground/src/pages/guides/minting-on-nodejs.mdx index 5153aa79..11a0974c 100644 --- a/apps/playground/src/pages/guides/minting-on-nodejs.mdx +++ b/apps/playground/src/pages/guides/minting-on-nodejs.mdx @@ -14,7 +14,7 @@ export default function MDXPage({ children }) { ); } -In this guide, we will be minting some assets with **AppWallet** on Node.js. +In this guide, we will be minting some assets with **MeshWallet** on Node.js. ## System setup @@ -125,7 +125,7 @@ Lets create a file named **main.ts** and import the packages we need and the fil ``` import { - AppWallet, + MeshWallet, Transaction, ForgeScript, BlockfrostProvider, @@ -155,7 +155,7 @@ const blockfrostKey = 'BLOCKFROST_KEY_HERE'; ### 5\. Build the minting transaction -In this guide, we are building a minting transaction, but it could be any transactions. [Learn more about Transaction](https://meshjs.dev/apis/transaction). +In this guide, we are building a minting transaction, but it could be any transactions. [Learn more about Transaction](/apis/transaction). Firstly, we need a blockchain provider, in this guide, we will import **BlockfrostProvider**, but you can use other providers as well: @@ -163,10 +163,10 @@ Firstly, we need a blockchain provider, in this guide, we will import **Blockfro const blockchainProvider = new BlockfrostProvider(blockfrostKey); ``` -Next, lets initialize the **AppWallet** and its forging script. In this example, we initialize using CLI generated keys, but you can also load your wallet with private key and mnemonic phrases. [Learn more about AppWallet](https://meshjs.dev/apis/appwallet). +Next, lets initialize the **MeshWallet** and its forging script. In this example, we initialize using CLI generated keys, but you can also load your wallet with private key and mnemonic phrases. [Learn more about MeshWallet](/apis/wallets/meshwallet). ``` -const wallet = new AppWallet({ +const wallet = new MeshWallet({ networkId: networkId, fetcher: blockchainProvider, submitter: blockchainProvider, @@ -182,7 +182,7 @@ const walletAddress = wallet.getPaymentAddress(); const forgingScript = ForgeScript.withOneSignature(walletAddress); ``` -Then, lets create a new **Transaction**, loop through each recipient, and mint an assets with **mintAsset** ([Learn more about minting transactions](https://meshjs.dev/apis/transaction)): +Then, lets create a new **Transaction**, loop through each recipient, and mint an assets with **mintAsset** ([Learn more about minting transactions](/apis/transaction)): ``` const tx = new Transaction({ initiator: wallet }); diff --git a/apps/playground/src/pages/guides/multisig-minting/index.mdx b/apps/playground/src/pages/guides/multisig-minting/index.mdx index a4f87901..b41644cb 100644 --- a/apps/playground/src/pages/guides/multisig-minting/index.mdx +++ b/apps/playground/src/pages/guides/multisig-minting/index.mdx @@ -18,7 +18,7 @@ export default function MDXPage({ children }) { ); } -A multi-signature (multi-sig) transaction requires more than one user to sign a transaction prior to the transaction being broadcast on a blockchain. You can think of it like a husband and wife savings account, where both signatures are required to spend the funds, preventing one spouse from spending the money without the approval of the other. For a multi-sig transaction, you can include 2 or more required signers, these signers can be wallets ([Browser Wallet](https://meshjs.dev/apis/wallets/browserwallet) or [Mesh Wallet](https://meshjs.dev/apis/wallets/meshwallet)) or Plutus script. +A multi-signature (multi-sig) transaction requires more than one user to sign a transaction prior to the transaction being broadcast on a blockchain. You can think of it like a husband and wife savings account, where both signatures are required to spend the funds, preventing one spouse from spending the money without the approval of the other. For a multi-sig transaction, you can include 2 or more required signers, these signers can be wallets ([Browser Wallet](/apis/wallets/browserwallet) or [Mesh Wallet](/apis/wallets/meshwallet)) or Plutus script. In this guide, we will build a multi-sig transaction for minting. There are 2 wallets involved, @@ -77,7 +77,7 @@ In this section, we will build the minting transaction. In this guide, we won't be showing how to set up RESTful APIs and backend servers. There are thousands of tutorials on YouTube, we recommend building your backend server with [Vercel API](https://vercel.com/docs/rest-api) or [NestJs](https://www.youtube.com/results?search_query=nestjs) or [ExpressJs](https://www.youtube.com/results?search_query=expressjs). -First, we initialize a [blockchain provider](https://meshjs.dev/providers) and [`Mesh Wallet`](https://meshjs.dev/apis/wallets/meshwallet). In this example, we use mnemonic to restore our wallet, but you can initialize a wallet with mnemonic phrases, private keys, and Cardano CLI generated keys. +First, we initialize a [blockchain provider](/providers) and [`Mesh Wallet`](/apis/wallets/meshwallet). In this example, we use mnemonic to restore our wallet, but you can initialize a wallet with mnemonic phrases, private keys, and Cardano CLI generated keys. ``` const blockchainProvider = new BlockfrostProvider( @@ -95,7 +95,7 @@ const meshWallet = new MeshWallet({ }); ``` -Next, let's define the forging script, here we used the first wallet address, but you can also define using `NativeScript`, see [Transaction - Minting assets](https://meshjs.dev/apis/transaction/minting): +Next, let's define the forging script, here we used the first wallet address, but you can also define using `NativeScript`, see [Transaction - Minting assets](/apis/transaction/minting): ``` const meshWalletAddress = meshWallet.getChangeAddress(); diff --git a/apps/playground/src/pages/guides/nextjs.mdx b/apps/playground/src/pages/guides/nextjs.mdx index d838ece4..70315fd9 100644 --- a/apps/playground/src/pages/guides/nextjs.mdx +++ b/apps/playground/src/pages/guides/nextjs.mdx @@ -97,7 +97,7 @@ You just saved a few weeks of learning and a number days trying to get started. React context is an essential tool for building web applications. It allow you to easily share state in your applications, so you can use the data in any component within the app. This means that when the user has connected their wallet, visiting different pages on the app ensure their wallet is still connected. -Open **pages/\_app.tsx**, import and include [**MeshProvider**](https://meshjs.dev/react/getting-started). Your **\_app.tsx** should look similar to this: +Open **pages/\_app.tsx**, import and include [**MeshProvider**](/react/getting-started). Your **\_app.tsx** should look similar to this: ``` import "../styles/globals.css"; @@ -118,7 +118,7 @@ export default MyApp; ### 2. Add connect wallet component and check wallet's assets -Lets add the [connect wallet component](https://meshjs.dev/react/ui-components) to allow users to connect wallets they have installed on their device. Connecting to wallets will ask the user for permission if not granted, and proceed to connect the selected wallet. +Lets add the [connect wallet component](/react/ui-components) to allow users to connect wallets they have installed on their device. Connecting to wallets will ask the user for permission if not granted, and proceed to connect the selected wallet. Lastly, we link those components together, allowing users to choose a wallet to connect, and query for assets in the wallet with **wallet.getAssets()**. @@ -187,8 +187,10 @@ npm run dev Visit [http://localhost:3000](http://localhost:3000/) to connect available wallets and view the assets in wallet. +If you do not have any assets in your wallet, you can receive test ADA (tADA) from the [official faucet](https://docs.cardano.org/cardano-testnets/tools/faucet/). + If you are new to Cardano, you will first have to download one of the Cardano wallets. _Tall Nupinks_ has written a detailed [Cardano Wallets 101](https://cutedumborcs.substack.com/p/cardano-wallets-101) guide to help you understand the fundamentals of a Cardano wallet, including its features and how it works. With this guide, you will be able to make an informed decision on the best Cardano wallet for your needs. ### 3. Try on your own -Implement another component to display wallet's address and the amount of lovelace in your Next.js application. Check out the [wallet](https://meshjs.dev/apis/browserwallet) page for more details. +Implement another component to display wallet's address and the amount of lovelace in your Next.js application. Check out the [wallet](/apis/wallets/browserwallet) page for more details. diff --git a/apps/playground/src/pages/guides/smart-contract-transactions.mdx b/apps/playground/src/pages/guides/smart-contract-transactions.mdx index 65226093..3d8734ad 100644 --- a/apps/playground/src/pages/guides/smart-contract-transactions.mdx +++ b/apps/playground/src/pages/guides/smart-contract-transactions.mdx @@ -139,7 +139,7 @@ const datumConstr: Data = { }; ``` -For cancel, update and purchase endpoints, we need the UTxO in the script address as inputs to create the transaction. We use **fetchAddressUTxOs()** from one of the [providers](https://meshjs.dev/providers) to query for UTxOs that contain the asset of our interest. Next, we filter the UTxO list by the datum hash, which we can get from the datum with **resolveDataHash()** (see [resolvers](https://meshjs.dev/apis/resolvers)). Here is the implementation for **\_getAssetUtxo()**, to get the UTxO in the script address that consists of the listed asset, and we use the datum hash to filter and get the correct UTxO for the transaction's input: +For cancel, update and purchase endpoints, we need the UTxO in the script address as inputs to create the transaction. We use **fetchAddressUTxOs()** from one of the [providers](/providers) to query for UTxOs that contain the asset of our interest. Next, we filter the UTxO list by the datum hash, which we can get from the datum with **resolveDataHash()** (see [resolvers](/apis/utilities/resolvers)). Here is the implementation for **\_getAssetUtxo()**, to get the UTxO in the script address that consists of the listed asset, and we use the datum hash to filter and get the correct UTxO for the transaction's input: ``` async function _getAssetUtxo({ scriptAddress, asset, datum }) { diff --git a/apps/playground/src/pages/guides/standalone.mdx b/apps/playground/src/pages/guides/standalone.mdx index e2b799e5..405a2642 100644 --- a/apps/playground/src/pages/guides/standalone.mdx +++ b/apps/playground/src/pages/guides/standalone.mdx @@ -114,7 +114,7 @@ Explanation: ### Run Your Application -In the code, you must replace `YOUR\_KEY\_HERE` with a valid blockfrost key, and replace the mnemonic words with your own. You can visit [Blockfrost](https://blockfrost.io/) to get a free API key, and generate a new mnemonic key from the [Mesh website](https://meshjs.dev/apis/appwallet#generateWallet). +In the code, you must replace `YOUR\_KEY\_HERE` with a valid blockfrost key, and replace the mnemonic words with your own. You can visit [Blockfrost](https://blockfrost.io/) to get a free API key, and generate a new mnemonic key from the [Mesh website](/apis/wallets/meshwallet#generateWallet). Finally, start your application by running this command: diff --git a/apps/playground/src/pages/react/ui-components/connect-wallet.tsx b/apps/playground/src/pages/react/ui-components/connect-wallet.tsx index ded9131c..e627e8b0 100644 --- a/apps/playground/src/pages/react/ui-components/connect-wallet.tsx +++ b/apps/playground/src/pages/react/ui-components/connect-wallet.tsx @@ -57,7 +57,7 @@ function Left() {

Add this CardanoWallet to allow the user to select a wallet to connect to your dApp. After the wallet is connected, see{" "} - Browser Wallet for a list of + Browser Wallet for a list of CIP-30 APIs.

diff --git a/apps/playground/src/pages/react/wallet-hooks/use-wallet.tsx b/apps/playground/src/pages/react/wallet-hooks/use-wallet.tsx index d1f7dbb5..3d0ba802 100644 --- a/apps/playground/src/pages/react/wallet-hooks/use-wallet.tsx +++ b/apps/playground/src/pages/react/wallet-hooks/use-wallet.tsx @@ -30,7 +30,7 @@ function Left() {

wallet is a{" "} - Browser Wallet instance, which + Browser Wallet instance, which expose all CIP wallets functions from getting assets to signing tranasction.

diff --git a/package-lock.json b/package-lock.json index 7596305f..7def41d6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15569,6 +15569,7 @@ "version": "3.9.0", "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.9.0.tgz", "integrity": "sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==", + "dev": true, "funding": [ { "type": "github", @@ -18958,7 +18959,8 @@ "node_modules/hosted-git-info": { "version": "2.8.9", "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz", - "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==" + "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==", + "dev": true }, "node_modules/html-escaper": { "version": "2.0.2", @@ -21789,6 +21791,7 @@ "version": "4.2.8", "resolved": "https://registry.npmjs.org/minipass/-/minipass-4.2.8.tgz", "integrity": "sha512-fNzuVyifolSLFL4NzpF+wEF4qrgqaaKX0haXPQEdQ7NKAN+WecoKMHV09YcuL/DHxrUsYQOK3MiuDf7Ip2OXfQ==", + "dev": true, "engines": { "node": ">=8" } @@ -22019,6 +22022,7 @@ "version": "2.5.0", "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz", "integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==", + "dev": true, "dependencies": { "hosted-git-info": "^2.1.4", "resolve": "^1.10.0", @@ -22030,6 +22034,7 @@ "version": "5.7.2", "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz", "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==", + "dev": true, "bin": { "semver": "bin/semver" } @@ -26759,7 +26764,8 @@ "node_modules/signal-exit": { "version": "3.0.7", "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz", - "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==" + "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==", + "dev": true }, "node_modules/simple-functional-loader": { "version": "1.2.1", @@ -26929,6 +26935,7 @@ "version": "3.2.0", "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.2.0.tgz", "integrity": "sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==", + "dev": true, "dependencies": { "spdx-expression-parse": "^3.0.0", "spdx-license-ids": "^3.0.0" @@ -26937,12 +26944,14 @@ "node_modules/spdx-exceptions": { "version": "2.5.0", "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.5.0.tgz", - "integrity": "sha512-PiU42r+xO4UbUS1buo3LPJkjlO7430Xn5SVAhdpzzsPHsjbYVflnnFdATgabnLude+Cqu25p6N+g2lw/PFsa4w==" + "integrity": "sha512-PiU42r+xO4UbUS1buo3LPJkjlO7430Xn5SVAhdpzzsPHsjbYVflnnFdATgabnLude+Cqu25p6N+g2lw/PFsa4w==", + "dev": true }, "node_modules/spdx-expression-parse": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz", "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==", + "dev": true, "dependencies": { "spdx-exceptions": "^2.1.0", "spdx-license-ids": "^3.0.0" @@ -26951,7 +26960,8 @@ "node_modules/spdx-license-ids": { "version": "3.0.20", "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.20.tgz", - "integrity": "sha512-jg25NiDV/1fLtSgEgyvVyDunvaNHbuwF9lfNV17gSmPFAlYzdfNBlLtLzXTevwkPj7DhGbmN9VnmJIgLnhvaBw==" + "integrity": "sha512-jg25NiDV/1fLtSgEgyvVyDunvaNHbuwF9lfNV17gSmPFAlYzdfNBlLtLzXTevwkPj7DhGbmN9VnmJIgLnhvaBw==", + "dev": true }, "node_modules/split-ca": { "version": "1.0.1", @@ -28690,6 +28700,7 @@ "version": "3.0.4", "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz", "integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==", + "dev": true, "dependencies": { "spdx-correct": "^3.0.0", "spdx-expression-parse": "^3.0.0" @@ -28974,6 +28985,7 @@ "version": "4.0.2", "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-4.0.2.tgz", "integrity": "sha512-7KxauUdBmSdWnmpaGFg+ppNjKF8uNLry8LyzjauQDOVONfFLNKrKvQOxZ/VuTIcS/gge/YNahf5RIIQWTSarlg==", + "dev": true, "dependencies": { "imurmurhash": "^0.1.4", "signal-exit": "^3.0.7"