import { useState, useEffect } from 'react';
function BalanceList() {
const [balances, setBalances] = useState<TokenBalance[]>([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
async function loadBalances() {
setLoading(true);
await sdk.vault.syncAllBalances();
const allBalances = await sdk.vault.getAllBalances();
setBalances(allBalances);
setLoading(false);
}
loadBalances();
}, []);
const formatBalance = (amount: bigint, decimals: number) => {
return sdk.vault.formatAmount(amount, decimals);
};
if (loading) return <div>Loading balances...</div>;
return (
<table>
<thead>
<tr>
<th>Token</th>
<th>Shielded</th>
<th>Wallet</th>
</tr>
</thead>
<tbody>
{balances.map((balance) => (
<tr key={balance.tokenAddress}>
<td>{balance.symbol}</td>
<td>{formatBalance(balance.shielded, balance.decimals || 18)}</td>
<td>{formatBalance(balance.wallet, balance.decimals || 18)}</td>
</tr>
))}
</tbody>
</table>
);
}