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
);

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>
  );
}