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:

PropertyTypeDescription
networkIdintegerThe network ID of the token i.e. 1 for Ethereum, 137 for Polygon, etc.
addressstringThe address of the token.
namestringThe name of the token.
symbolstringThe symbol of the token.
decimalsintegerThe number of decimals the token has.
logoURIstringThe URI of the token’s logo image.
balancefloatThe balance of the token in the user’s wallet.
rawBalanceintegerThe 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>
  );
};

Was this page helpful?

Switch user's primary walletEVM Wallets