Fetch all token balances for a wallet

The Dynamic UI components (DynamicWidget and UserProfile) have a built in UI for displaying multi asset balances, we strongly recommend using those components if you can! Learn more in the Multi-Asset UI section.

Hook

You can fetch token balances for a user’s wallet using the useTokenBalances hook:

import { useTokenBalances } from "@dynamic-labs/sdk-react-core";

const { tokenBalances, isLoading, isError, error } = useTokenBalances();

The hook currently only supports the Ethereum, Optimism, Polygon, Arbitrum, and Base networks.

Return Value

This hook returns an object for tokenBalances with the following properties:

Property	Type	Description
networkId	integer	The network ID of the token i.e. 1 for Ethereum, 137 for Polygon, etc.
address	string	The address of the token.
name	string	The name of the token.
symbol	string	The symbol of the token.
decimals	integer	The number of decimals the token has.
logoURI	string	The URI of the token’s logo image.
balance	float	The balance of the token in the user’s wallet.
rawBalance	integer	The raw balance of the token in the user’s wallet.

Reference

You can find the full reference for the useTokenBalances hook here.

Full Example

import { useDynamicContext, useTokenBalances } from "@dynamic-labs/sdk-react-core";

const Balances = () => {
  const { primaryWallet } = useDynamicContext();
  const { tokenBalances, isLoading, isError, error } = useTokenBalances();

  if(!primaryWallet) return <div>No wallet connected</div>;

  if (isLoading) return <div>Loading...</div>;
  if (isError) return <div>Error: {error.message}</div>;

  return (
    <div>
      {tokenBalances.map((token) => (
        <div key={token.address}>
          <img src={token.logoURI} alt={token.symbol} />
          <div>{token.name}</div>
          <div>{token.symbol}</div>
          <div>{token.balance}</div>
        </div>
      ))}
    </div>
  );
};