Wallet Hooks

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, state, 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.

state, a enum string, the state of the wallet, can be NOT_CONNECTED, CONNECTING or CONNECTED.

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, state, connected, name, connecting, connect, disconnect, error } = useWallet();

  return (
    <div>
      <p>
        <b>State: </b> {state}
      </p>
      <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>
  );
}

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 the injectFn 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>
        );
      })}
    </>
  );
}

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>

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

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>

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>

Wallet Hooks

On this page