useBalances

A hook that provides functionality for managing and refreshing token balances in the Glyph wallet. It allows you to fetch current balances and track balance changes with callbacks.

Import

import { useBalances } from "@use-glyph/sdk-react";

Usage

function WalletTokensTab() {
	const { balances, refreshBalances } = useBalances();

	// Example of using refreshBalances with callbacks
	const handleBalanceChange = (symbol: string) => {
		refreshBalances({
			[symbol]: (diffAmount) => {
				console.log(`Balance changed by ${diffAmount} for ${symbol}`);
			},
		});
	};

	return (
		<div className="tokens-list">
			{balances?.tokens?.map((token) => (
				<div key={token.symbol} className="token-item">
					<span>{token.name}</span>
					<span>
						{token.amount} {token.symbol}
					</span>
					<span>{token.value}</span>
				</div>
			))}
		</div>
	);
}

Return Type

Property	Type	Description
balances	GlyphWidgetBalances | null	Current token balances object containing information about all tokens in the wallet.
refreshBalances	(cbs?: Record<string, (diffAmount: number) => void>) => Promise<void>	Function to refresh balances. Optionally accepts callbacks for specific token balance changes.

Supported Tokens

The following tokens are currently supported in the Glyph wallet as of now (we will add more tokens as we expand our support):

Symbol	Name	Description
APE	ApeCoin	The native token of the ApeCoin ecosystem
ApeETH	Ape ETH	Ethereum token in the Ape ecosystem
ApeUSD	Ape USD	USD-pegged stablecoin in the Ape ecosystem
WAPE	Wrapped ApeCoin	Wrapped version of ApeCoin for DeFi compatibility

Best Practices

1. Always check if balances is null before accessing its properties
2. Implement proper error handling for the refreshBalances function
3. Consider implementing debouncing for frequent balance refreshes
4. Use the callbacks to implement real-time notifications for balance changes
5. Format currency values appropriately using the provided currency code