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}.png

For example:

/tokens/logo/43114/0x1234567890123456789012345678901234567890.png
/chains/logo/43114.png

Layout 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

TokenIconWithChain

On this page