General Interactions
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>
);
};
Was this page helpful?