import { TokenList } from '@avalabs/builderkit';
 
// Basic usage
<TokenList 
  chain_id={43114}
  list={[
    {
      chain_id: 43114,
      address: "0x1234567890123456789012345678901234567890",
      name: "Avalanche",
      symbol: "AVAX"
    },
    // ... more tokens
  ]}
  onClick={(address) => console.log('Selected token:', address)}
/>
 
// With balances and selected token
<TokenList 
  chain_id={43114}
  list={tokens}
  showBalances={true}
  selected={{ address: selectedTokenAddress }}
  onClick={handleTokenSelect}
/>

<TokenList 
  chain_id={43114}
  list={tokens}
  onClick={handleTokenSelect}
/>

<TokenList 
  chain_id={43114}
  list={tokens}
  showBalances={true}
  onClick={handleTokenSelect}
/>

<TokenList 
  chain_id={43114}
  list={tokens}
  selected={{ address: selectedToken.address }}
  onClick={handleTokenSelect}
  className="max-h-[400px]"
/>

type TokenItem = {
  chain_id: number;
  address: string;
  name: string;
  symbol: string;
  balance?: BigNumber; // Optional, used when showBalances is true
  whitelisted?: boolean; // Optional, for token verification
}