Hooks for interacting with ERC20 tokens.
BuilderKit provides hooks for interacting with ERC20 tokens, including balance checking, approvals, and token information.
The useTokens hook provides functions for accessing token information and performing token-related operations.
import { useTokens } from '@avalabs/builderkit';
const {
getCustomToken,
getBalance,
getAllowance,
approve
} = useTokens();
// Get token information
const [name, symbol, decimals] = await getCustomToken(
43114, // Chain ID
"0x1234..." // Token address
);
// Get token balance
const balance = await getBalance(
43114, // Chain ID
"0x1234...", // Token address
"0x5678..." // Wallet address
);
// Check allowance
const allowance = await getAllowance(
43114, // Chain ID
"0x1234...", // Token address
"0x5678...", // Owner address
"0x9012..." // Spender address
);
// Generate approve transaction
const approveData = approve(
"0x1234...", // Token address
"0x5678...", // Spender address
new BigNumber("1.0"), // Amount
18 // Decimals
);
getCustomToken(chain_id: number, address: string): Get token name, symbol, and decimalsgetBalance(chain_id: number, address: string, wallet: string): Get token balance for an addressgetAllowance(chain_id: number, address: string, owner: string, spender: string): Get token allowanceapprove(address: string, spender: string, amount: BigNumber, decimals: number): Generate approve transaction data
function TokenApproval({ token, spender }: { token: string, spender: string }) {
const { getAllowance, approve } = useTokens();
const [allowance, setAllowance] = useState("0");
useEffect(() => {
const checkAllowance = async () => {
const amount = await getAllowance(43114, token, account, spender);
setAllowance(amount.toString());
};
checkAllowance();
}, [token, spender]);
const handleApprove = () => {
const data = approve(token, spender, new BigNumber("1000"), 18);
return (
<TransactionButton
chain_id={43114}
title="Approve Token"
description="Approving token for spending"
data={data}
/>
);
};
return (
<div>
<div>Current Allowance: {allowance}</div>
{handleApprove()}
</div>
);
}