Fetch Balance

Recommended: JavaScript SDK with React Hooks

For new React apps, we recommend the JavaScript SDK with React Hooks (@dynamic-labs-sdk/react-hooks) instead of the legacy React SDK documented here. The JS SDK comes with many benefits such as a much smaller bundle size and other optimizations. Use the React quickstart (JavaScript SDK) to get started.

You can show the balance of the primary wallet by using the useDynamicContext hook and the getBalance method from the wallet connector.

React

import { useDynamicContext } from '@dynamic-labs/sdk-react-core'

const { primaryWallet } = useDynamicContext()

const [balance, setBalance] = useState(null)

useEffect(() => {
  const fetchBalance = async () => {
    if (primaryWallet) {
      const value = await primaryWallet.getBalance()
      setBalance(value)
    }
  }
  fetchBalance()
}, [primaryWallet])

return <p>{balance}</p>

Multichain Balances

For applications that need to fetch token balances across multiple blockchain networks simultaneously, Dynamic provides a getMultichainBalances method. This is useful for displaying comprehensive portfolio views or checking balances across different chains without making separate API calls.

In React, you can use the useMultichainTokenBalances hook to fetch balances across multiple chains:

React

import { useMultichainTokenBalances, useDynamicContext } from '@dynamic-labs/sdk-react-core';
import { ChainEnum } from '@dynamic-labs/sdk-api-core';

const { primaryWallet } = useDynamicContext();

const { multichainTokenBalances, isLoading } = useMultichainTokenBalances({
  filterSpamTokens: true,
  requests: [
    {
      address: primaryWallet?.address || '',
      chain: ChainEnum.Evm,
      networkIds: [1, 137, 56], // Ethereum, Polygon, BNB
    },
  ],
});