TokenIconWithChain
A component for displaying token logos with an overlaid chain icon.
TokenIconWithChain
The TokenIconWithChain component displays a token logo with its corresponding chain icon overlaid in the bottom-right corner.
Usage
import { TokenIconWithChain } from '@avalabs/builderkit';
// Basic usage
<TokenIconWithChain
chain_id={43114}
address="0x1234567890123456789012345678901234567890"
/>
// With custom styling
<TokenIconWithChain
chain_id={43114}
address="0x1234567890123456789012345678901234567890"
className="w-8 h-8"
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
chain_id | number | - | Chain ID of the token |
address | string | - | Token contract address |
className | string | - | Additional CSS classes (applied to both icons) |
Features
- Combines TokenIcon with chain logo
- Chain icon is automatically positioned and scaled
- Supports custom styling through className
- Uses consistent icon paths for both token and chain logos
- Responsive layout with Tailwind CSS
Examples
Basic Usage
<TokenIconWithChain
chain_id={43114}
address="0x1234567890123456789012345678901234567890"
/>Custom Size
<TokenIconWithChain
chain_id={43114}
address="0x1234567890123456789012345678901234567890"
className="w-12 h-12"
/>In a Token List
<div className="flex gap-4">
<TokenIconWithChain
chain_id={43114}
address="0x1234567890123456789012345678901234567890"
/>
<TokenIconWithChain
chain_id={43113}
address="0x5678901234567890123456789012345678901234"
/>
</div>With Custom Border
<TokenIconWithChain
chain_id={43114}
address="0x1234567890123456789012345678901234567890"
className="border-2 border-gray-200 rounded-full"
/>Asset Requirements
The component requires two image assets:
- Token logo at:
/tokens/logo/{chain_id}/{address}.png- Chain logo at:
/chains/logo/{chain_id}.pngFor example:
/tokens/logo/43114/0x1234567890123456789012345678901234567890.png
/chains/logo/43114.pngLayout Details
The component uses the following layout structure:
- Main token icon as the primary element
- Chain icon positioned at bottom-right
- Chain icon scaled to 50% of the token icon size
- Chain icon has a white border for visual separation
Last updated on 3/7/2025