Wallet Hooks

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.

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 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>
  );
}

Connected?: Not connected

Connecting wallet?: No

Name of connected wallet:

useWalletList Hook

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

const wallets = useWalletList();

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

const wallets = useWalletList({ metamask:{ network: "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>
        );
      })}
    </>
  );
}

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>
No wallets installed

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)}
No wallets installed

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>
No wallets installed

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>
No wallets installed