A compact component for displaying token information with optional chain icon and copy functionality.

TokenChip

The TokenChip component provides a compact way to display token information, including token icon, name, symbol, and optional chain information.

Usage

import { TokenChip } from '@avalabs/builderkit';
 
// Basic usage
<TokenChip 
  chain_id={43114}
  address="0x1234567890123456789012345678901234567890"
  symbol="AVAX"
  name="Avalanche"
/>
 
// With chain icon and copy functionality
<TokenChip 
  chain_id={43114}
  address="0x1234567890123456789012345678901234567890"
  symbol="AVAX"
  name="Avalanche"
  showChainIcon={true}
  allowCopyToClipboard={true}
/>

Props

Prop	Type	Default	Description
`chain_id`	`number`	-	Chain ID of the token
`address`	`string`	-	Token contract address
`symbol`	`string`	-	Token symbol
`name`	`string`	-	Token name (optional)
`showChainIcon`	`boolean`	`false`	Whether to show chain icon alongside token icon
`showName`	`boolean`	`true`	Whether to show token name (if false, shows only symbol)
`allowCopyToClipboard`	`boolean`	`false`	Enable copy address to clipboard functionality
`className`	`string`	-	Additional CSS classes

Features

Displays token icon with optional chain icon
Shows token name and/or symbol
Copy to clipboard functionality with visual feedback
Flexible layout options
Tailwind CSS styling support

Examples

Basic Token Display

<TokenChip 
  chain_id={43114}
  address="0x1234567890123456789012345678901234567890"
  symbol="AVAX"
  name="Avalanche"
/>

With Chain Icon

<TokenChip 
  chain_id={43114}
  address="0x1234567890123456789012345678901234567890"
  symbol="AVAX"
  name="Avalanche"
  showChainIcon={true}
/>

Symbol Only

<TokenChip 
  chain_id={43114}
  address="0x1234567890123456789012345678901234567890"
  symbol="AVAX"
  name="Avalanche"
  showName={false}
/>

With Copy Functionality

<TokenChip 
  chain_id={43114}
  address="0x1234567890123456789012345678901234567890"
  symbol="AVAX"
  name="Avalanche"
  allowCopyToClipboard={true}
/>

Custom Styling

<TokenChip 
  chain_id={43114}
  address="0x1234567890123456789012345678901234567890"
  symbol="AVAX"
  name="Avalanche"
  className="bg-gray-100 rounded-lg p-2"
/>

Visual States

Default: Shows token information with icon
Copy Button: Shows copy icon when allowCopyToClipboard is true
Copy Confirmation: Shows check icon briefly after copying
Chain Display: Shows chain icon when showChainIcon is true

TokenChip

On this page