UI Components

UI components to speed up your app development.

Mesh provide a collection of useful UI components, so you can easily include web3 functionality and convenient utilities for your application.

Connect Wallet

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.

Connect Wallet Component

Connect to user's wallet to interact with dApp

Stake ADA Button

Delegation is the process by which ADA holders delegate the stake associated with their ADA to a stake pool. It allows ADA holders to participate in the network and be rewarded in proportion to the amount of stake delegated.

Put this StakeButton on your website to allow anyone to delegate their ADA to your stake pool.

The StakeButton component has the following signature:

Both poolId and onCheck are required props. onCheck is a function that takes a reward address and returns an account info object, which you may use fetchAccountInfo() from one of the Providers.

For dark mode style, add isDark.

For a custom label, add the label prop.

If you want to run a function after the user has staked, add the onDelegated prop. See code example.

Stake ADA Button UI Component

A UI component to allow users to delegate their ADA to a specific stake pool.

No Wallet Found

Powered by Mesh Badge

If you love Mesh, here's a beautifully designed badge for you to embed in your application.

Mesh Badge Component

Show your support for Mesh