useSprinterBalances
The useSprinterBalances
hook allows you to retrieve a user's available token balances across multiple chains. It provides access to both native and fungible token balances for the specified account.
Usage
Example
import { useSprinterBalances } from '@chainsafe/sprinter-react';
import React, { useEffect } from 'react';
function BalancesComponent() {
const { balances, getUserBalances } = useSprinterBalances("0xYourAddress");
useEffect(() => {
getUserBalances(); // Fetch balances when the component mounts
}, [getUserBalances]);
if (balances.loading) {
return <div>Loading...</div>;
}
if (balances.error) {
return <div>Error: {balances.error}</div>;
}
return (
<ul>
{Object.entries(balances.data || {}).map(([symbol, balanceEntry]) => (
<li key={symbol}>{symbol}: {balanceEntry.total}</li>
))}
</ul>
);
}
Return Value
The useSprinterBalances
hook returns an object with the following properties:
-
balances
: An object containing:data
: The user's balances across chains, keyed by token symbol. Each token's balances are represented by:balances
: An array of balances on different chains.total
: The total balance for the token across all chains.
loading
: A boolean indicating if the balances are being fetched.error
: A string containing the error message if the fetch fails.
-
getUserBalances
: A function that triggers the retrieval of the user's balances.
Example Response
Here’s an example of what balances.data
might look like after calling getUserBalances()
:
{
"ETH": {
"balances": [
{ "balance": "1000000000000000000", "chainId": 11155111, "tokenDecimals": 18 },
{ "balance": "500000000000000000", "chainId": 84532, "tokenDecimals": 18 }
],
"total": "1500000000000000000"
},
"USDC": {
"balances": [
{ "balance": "2000000", "chainId": 11155111, "tokenDecimals": 6 }
],
"total": "2000000"
}
}
Parameters
getUserBalances()
: A function that fetches the user's balances across all available tokens and native token balances for the specified account.