Skip to main content

​
Overview

Token components help you display cryptocurrency balances and token information in your application.

​
TokenBalance

Display the balance of native or ERC-20 tokens.

​
Basic Usage

import { TokenBalance } from '@sanketsaagar/polygon-kit';

function Balance({ address }: { address: string }) {
  return <TokenBalance address={address as `0x${string}`} />;
}

​
Props

​
address
Address
required
The wallet address to check balance for
​
token
Address
ERC-20 token contract address (omit for native MATIC)
​
className
string
Additional CSS classes
​
decimals
number
default:"4"
Number of decimal places to display

​
Native Token Balance

<TokenBalance address={userAddress} />

​
ERC-20 Token Balance

<TokenBalance
  address={userAddress}
  token="0x..." // Token contract address
/>

​
TokenIcon

Display an icon for a token. 
import { TokenIcon } from '@sanketsaagar/polygon-kit';

<TokenIcon symbol="MATIC" size={32} />

​
Complete Example

import { TokenBalance, usePolygonKit } from '@sanketsaagar/polygon-kit';

function WalletBalances() {
  const { address } = usePolygonKit();

  if (!address) return null;

  return (
    <div className="space-y-4">
      <div>
        <h3 className="font-semibold">MATIC Balance</h3>
        <TokenBalance address={address} />
      </div>

      <div>
        <h3 className="font-semibold">USDC Balance</h3>
        <TokenBalance
          address={address}
          token="0x2791Bca1f2de4661ED88A30C99A7a9449Aa84174" // USDC on Polygon
        />
      </div>
    </div>
  );
}