##  **Getting Started with React**


**INTRODUCTION**

Frontend components for wallet connections, and useful React hooks to getting wallet states

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

INTRODUCTION

## **SETUP**

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:


`npx meshjs your-app-name`

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:


`npm install @meshsdk/react`

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`**.


`import "@meshsdk/react/styles.css";`

SETUP

## **MESH PROVIDER**

**[React Context](https://reactjs.org/docs/context.html)** 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:


```
import "@meshsdk/react/styles.css";import { MeshProvider } from "@meshsdk/react";

```

```

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <MeshProvider>
      <Component {...pageProps} />
    </MeshProvider>
  );
};
```


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

MESH PROVIDER

## **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](https://meshjs.dev/apis/wallets/browserwallet)** for a list of CIP-30 APIs.

The signature for the CardanoWallet component is as follows:

```
{
  label?: string;
  onConnected?: Function;
  isDark?: boolean;
}
```

**Customization**

For dark mode style, add isDark.

`<CardanoWallet isDark={false} />`

For a custom label, add the label prop.

`<CardanoWallet label={"Connect Wallet"} />`

The customization is limited. For more customization, you can easily build your own wallet connection component. If you are using React, the **[React hooks](https://meshjs.dev/react/wallet-hooks)** will be useful. You may also take reference from **[this component](https://github.com/MeshJS/mesh/blob/main/packages/mesh-react/src/cardano-wallet/index.tsx)**.

**onConnected**

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

```
export default function Page() {

  function afterConnectedWallet() {
    // do something
  }

  return (
    <>
      <CardanoWallet onConnected={afterConnectedWallet} />
    </>
  );
}
```

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

**CIP 95**

You can also provide an **`extensions`** object to enable specific CIPs. For example, to enable **[CIP-95](https://cips.cardano.org/cip/CIP-95)**, you would pass:


```
<CardanoWallet
  extensions={[95]}
/>
```

**Decentralized WebRTC dApp-Wallet Communication (CIP 45)**

**[CIP-45](https://cips.cardano.org/cip/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.


```
<CardanoWallet
  burnerWallet={{
    networkId: 0,
    provider: blockchainProvider,
  }}
/>
```

**MetaMask Snaps**

MetaMask Snaps are a new way to extend MetaMask with custom functionality and integrations. You can check the implementation to integrate NuFi from the **[GitHub repository](https://github.com/MeshJS/mesh/tree/main/apps/playground/src/components/cardano/connect-browser-wallet)**.

Use the **`injectFn`** prop to add custom functionality.

```
<CardanoWallet
  injectFn={async () => await checkIfMetamaskInstalled("preprod")}
/>
```

**Connect Wallet Component**

Connect to user's wallet to interact with dApp

```
import { CardanoWallet } from '@meshsdk/react';

export default function Page() {

  function afterConnectedWallet() {
    // do something
  }

  return (
    <>
      <CardanoWallet
        label={"Connect a Wallet"}
        onConnected={afterConnectedWallet}
        cardanoPeerConnect={{
          dAppInfo: {
            name: "Mesh SDK",
            url: "https://meshjs.dev/",
          },
          announce: [
            "wss://dev.btt.cf-identity-wallet.metadata.dev.cf-deployments.org",
          ],
        }}
        burnerWallet={{
          networkId: 0,
          provider: provider,
        }}
      />
    </>
  );
}
```

CONNECT WALLET

## **USEWALLET HOOK**

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

`const { wallet, connected, name, connecting, connect, disconnect, error } = useWallet();`

**`wallet`** is a **[Browser Wallet](https://meshjs.dev/apis/wallets/browserwallet)** 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".



**useWallet Hook**

Interact with user's wallet

```
import { useWallet } from '@meshsdk/react';

export default function Page() {
  const { wallet, connected, name, connecting, connect, disconnect, error } = useWallet();

  return (
    <div>
      <p>
        <b>Connected?: </b> {connected ? 'Is connected' : 'Not connected'}
      </p>
      <p>
        <b>Connecting wallet?: </b> {connecting ? 'Connecting...' : 'No'}
      </p>
      <p>
        <b>Name of connected wallet: </b>
        {name}
      </p>
      <button onClick={() => disconnect()}>Disconnect Wallet</button>
    </div>
  );
}
```

![](https://i.imgur.com/ZoNxntA.png)

USEWALLET HOOK

GETTING STARTED WITH REACT MESHJS.DEV

## **INTRODUCTION**

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](https://meshjs.dev/apis/wallets/browserwallet)** for a list of CIP-30 APIs.

The signature for the CardanoWallet component is as follows:

```
{
  label?: string;
  onConnected?: Function;
  isDark?: boolean;
}
```

**Customization**

For dark mode style, add isDark.


`<CardanoWallet isDark={false} />`

For a custom label, add the label prop.

`<CardanoWallet label={"Connect Wallet"} />`

The customization is limited. For more customization, you can easily build your own wallet connection component. If you are using React, the **[React hooks](https://meshjs.dev/react/wallet-hooks)** will be useful. You may also take reference from **[this component](https://github.com/MeshJS/mesh/blob/main/packages/mesh-react/src/cardano-wallet/index.tsx)**.

**onConnected**

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

```
export default function Page() {

  function afterConnectedWallet() {
    // do something
  }

  return (
    <>
      <CardanoWallet onConnected={afterConnectedWallet} />
    </>
  );
}
```

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

**CIP 95**

You can also provide an **`extensions`** object to enable specific CIPs. For example, to enable **[CIP-95](https://cips.cardano.org/cip/CIP-95)**, you would pass:


```
<CardanoWallet
  extensions={[95]}
/>
```

**Decentralized WebRTC dApp-Wallet Communication (CIP 45)**

**[CIP-45](https://cips.cardano.org/cip/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.

```
<CardanoWallet
  burnerWallet={{
    networkId: 0,
    provider: blockchainProvider,
  }}
/>
```

**MetaMask Snaps**

MetaMask Snaps are a new way to extend MetaMask with custom functionality and integrations. You can check the implementation to integrate NuFi from the **[GitHub repository](https://github.com/MeshJS/mesh/tree/main/apps/playground/src/components/cardano/connect-browser-wallet)**.

Use the **`injectFn`** prop to add custom functionality.

```
<CardanoWallet
  injectFn={async () => await checkIfMetamaskInstalled("preprod")}
/>
```

**Connect Wallet Component**

Connect to user's wallet to interact with dApp

```
import { CardanoWallet } from '@meshsdk/react';

export default function Page() {

  function afterConnectedWallet() {
    // do something
  }

  return (
    <>
      <CardanoWallet
        label={"Connect a Wallet"}
        onConnected={afterConnectedWallet}
        cardanoPeerConnect={{
          dAppInfo: {
            name: "Mesh SDK",
            url: "https://meshjs.dev/",
          },
          announce: [
            "wss://dev.btt.cf-identity-wallet.metadata.dev.cf-deployments.org",
          ],
        }}
        burnerWallet={{
          networkId: 0,
          provider: provider,
        }}
      />
    </>
  );
}
```


![](https://i.imgur.com/XZSxRsQ.png)

## **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:


```
{
  poolId: string;
  onCheck: (rewardAddress: string) => Promise<AccountInfo>;
  label?: string;
  isDark?: boolean;
  onDelegated?: () => void;
}
```

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](https://meshjs.dev/providers)**.

For dark mode style, add isDark.

`<StakeButton isDark={false} />`

For a custom label, add the label prop.


`<StakeButton label={"Stake your ADA"} />`

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.

```
import { StakeButton } from "@meshsdk/react";

export default function Page() {
  // import one of the providers https://meshjs.dev/providers
  const blockchainProvider = new Provider();

  function userHasStaked() {
    // do something after user has staked to the pool");
  }

  return (
    <StakeButton
      isDark={false}
      onCheck={(address) => blockchainProvider.fetchAccountInfo(address)}
      poolId="pool107k26e3wrqxwghju2py40ngngx2qcu48ppeg7lk0cm35jl2aenx"
      onDelegated={userHasStaked}
      label={"Stake your ADA"}
    />
  )
}
```
![](https://i.imgur.com/F2nzAJP.png)

STAKE ADA BUTTON

## **MESH BADGE**

**Powered by Mesh Badge**

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

`<MeshBadge isDark={true} />`

**Mesh Badge Component**

Show your support for Mesh

```
import { CardanoWallet } from '@meshsdk/react';

export default function Page() {
  return (
    <>
      <CardanoWallet isDark={false} />
    </>
  );
}

```


![](https://i.imgur.com/cKmJFLa.png)

MESH BADGE

UI COMPONENTS

## **INTRODUCTION**


React hooks for interacting with connected wallets.

React Hooks allow function components to have access to state and other React features. With Mesh Hooks, you can easily interact and access wallet data.

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

`const { wallet, connected, name, connecting, connect, disconnect, error } = useWallet();`

**`wallet`** is a **[Browser Wallet](https://meshjs.dev/apis/wallets/browserwallet)** 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".


**useWallet Hook**

Interact with user's wallet

```
import { useWallet } from '@meshsdk/react';

export default function Page() {
  const { wallet, connected, name, connecting, connect, disconnect, error } = useWallet();

  return (
    <div>
      <p>
        <b>Connected?: </b> {connected ? 'Is connected' : 'Not connected'}
      </p>
      <p>
        <b>Connecting wallet?: </b> {connecting ? 'Connecting...' : 'No'}
      </p>
      <p>
        <b>Name of connected wallet: </b>
        {name}
      </p>
      <button onClick={() => disconnect()}>Disconnect Wallet</button>
    </div>
  );
}
```


![](https://i.imgur.com/fjFJnbN.png)

## **USEWALLETLIST HOOK**

Returns a list of wallets installed on user's device.

`const wallets = useWalletList();`

You can define a function to be injected into the wallet provider by passing it as **`theinjectFn`** prop.

`const wallets = useWalletList({injectFn={async () => await checkIfMetamaskInstalled("preprod")})}`


**useWalletList Hook**

List of wallets installed on user's device

`const wallets = useWalletList();`

`[]`

```
import { useWalletList } from '@meshsdk/react';

export default function Page() {
  const wallets = useWalletList();

  return (
    <>
      {wallets.map((wallet, i) => {
        return (
          <p key={i}>
            <img src={wallet.icon} style={{ width: '48px' }} />
            <b>{wallet.name}</b>
          </p>
        );
      })}
    </>
  );
}
```



USEWALLETLIST HOOK

## **USEADDRESS HOOK**


Return address of connected wallet.

accountId is an optional parameter, that allows you to choose which address to return.

`const address = useAddress(accountId = 0);`

**useAddress Hook**

List of wallets installed on user's device

```
import { useAddress } from '@meshsdk/react';

const address = useAddress();

<p>
  Your wallet address is: <code>{address}</code>
</p>
```

![](https://i.imgur.com/NXfj4Mk.png)

USEADDRESS HOOK

## **USEASSETS HOOK**

Return a list of assets in connected wallet from all UTXOs.

`const assets = useAssets();`


**useAssets Hook**

List assets of connected wallet

```
import { useAssets } from '@meshsdk/react';

const assets = useAssets();

{JSON.stringify(assets, null, 2)}
```

![](https://i.imgur.com/AXuoNwN.png)

USEASSETS HOOK

## **USELOVELACE HOOK**

Return amount of lovelace in wallet.

`const lovelace = useLovelace();`

**useLovelace Hook**

Fetch the lovelace balance of the connected wallet

```
import { useLovelace } from '@meshsdk/react';

const lovelace = useLovelace();

<p>
  Your lovelace balance is: <code>{lovelace}</code>
</p>
```

![](https://i.imgur.com/AXuoNwN.png)


USELOVELACE HOOK

## **USENETWORK HOOK**

Return the network of connected wallet.

`const network = useNetwork();`

**useNetwork Hook**

Fetch the network of the connected wallet

```
import { useNetwork } from '@meshsdk/react';

const network = useNetwork();

<p>
  Connected network: <code>{network}</code>.
</p>
```

![](https://i.imgur.com/AXuoNwN.png)




USENETWORK HOOK

WALLET HOOK

Frontend components for wallet connections, and useful React hooks to getting wallet states

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

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

Getting Started with React Mesh

Course Details

Level

Ratings

Modules

Lessons

Public ADA Price

Holder $WORK Price

Similar Courses

Contact Us

Navigation