React Hooks for Wallet

Wallet Hooks

React hooks for interacting with connected wallet.

In a React application, Hooks allows you to extract and reuse stateful logic and variables without changing your component hierarchy. This makes it easy to reuse the same Hook among many components.

This page describes the list of built-in Hooks in Mesh to help you build React applications faster.

useWalletList

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

const wallets = useWalletList();

wallets:

[]

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

Return address of connected wallet.

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

const address = useAddress(accountId = 0);

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

export default function Page() {
  const address = useAddress();

  return (
    <div><p>Your wallet address is: <code>{address}</code></p></div>
  );
}

useAssets

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

const assets = useAssets();

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

export default function Page() {
  const assets = useAssets();

  return (
    <ol>
      {assets &&
        assets.slice(0, 10).map((asset, i) => {
          return (
            <li key={i}>
              <b>{asset.assetName}</b> (x{asset.quantity})
            </li>
          );
        })}
    </ol>
  );
}

useLovelace

Return amount of lovelace in wallet.

const lovelace = useLovelace(accountId = 0);

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

export default function Page() {
  const lovelace = useLovelace();

  return (
    <div>
      <p>You have <b>₳ {parseInt(lovelace) / 1000000}</b>.</p>
    </div>
  );
}

useNetwork

Return the network of connected wallet.

const network = useNetwork();

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

export default function Page() {
  const network = useNetwork();

  return (
    <div>
      <p>Connected network: <b>{network}</b>.</p>
    </div>
  );
}

useWallet

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.

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: