The fastest way to get started a new project with React is to use the Mesh-CLI, which will scaffold a new project for you. To do this, run the following:

During the installation process, you will be asked to choose a template. Choose the React template. This will scaffold a new React project with Mesh pre-installed.

To manually, install the Mesh React package, run the following:

Next, add the Mesh CSS to your application, doing so will apply the default styles to the components. You can add this in /pages/_app.tsx.

React Context allows apps to share data across the app, and MeshProvider allows your app to subscribe to context changes. If you use the CLI to initialize your project, MeshProvider has been added in the root component. Otherwise, you can wrap MeshProvider at the root of your application, for example in Next.js:

Now your application is ready, explore the available UI components and wallet hooks and start using them in your application.

In order for dApps to communicate with the user's wallet, we need a way to connect to their wallet.

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 CIP-30 APIs.

The signature for the CardanoWallet component is as follows:

Customization

For dark mode style, add isDark.

For a custom label, add the label prop.

The customization is limited. For more customization, you can easily build your own wallet connection component. If you are using React, the React hooks will be useful. You may also take reference from this component.

onConnected

If you want to run a function after the wallet is connected, you can add the onConnected prop.

The above code will log "Hello, World!" to the console when the wallet is connected.

MetaMask Snaps

You can define the NuFi network to connect to by adding the network prop.

This will connect to the preprod network. For the mainnet network, use mainnet.

You can also define a custom network by passing a URL string to the network prop.

CIP 95

You can also provide an extensions object to enable specific CIPs. For example, to enable CIP-95, you would pass:

Decentralized WebRTC dApp-Wallet Communication (CIP 45)

CIP-45 is a communication method between dApps and wallets based on WebTorrent trackers and WebRTC. Using WebTorrent trackers for the peer discovery to remove the need of this central component.

Burner wallet

Burner wallets are wallets that are created on the fly on the user's device. They are temporary wallets useful for testing purposes. The private keys are generated and stored on the user's device.

Provide information on the current wallet's state, and functions for connecting and disconnecting user wallet.

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

connected, a boolean, true if user's wallet is connected.

name, a string, the name of the connect wallet.

connecting, a boolean, true if the wallet is connecting and initializing.

connect(walletName: string), a function, provide the wallet name to connect wallet. Retrive a list of available wallets with useWalletList().

disconnect(), a function, to disconnect the connected wallet.

error, returns the error object if any error occurs during wallet connection, such as "account not set".