Select Token

A comprehensive token selection component with asset logo and symbol, balance display, and network integration.

Introduction

SelectToken is a dropdown component to help users select a token in the context of transaction, e.g. in a token swap interface or transfer form. It supports token logo, name and symbol display, real-time balance information for connected accounts, and automatic network detection with seamless integration with Substrate-based chains.

Features

Asset IDs Definition: Define which tokens to include by specific asset IDs
Balance Display: Show real-time token balances for connected accounts
Multi-Chain Support: Works with different Substrate-based chains
Native Token Support: Optionally include native chain tokens
TypeScript: Full type safety with comprehensive interfaces
Customizable: Flexible styling and configuration options

Installation

npx polkadot-ui@latest add select-token

Usage

All of the examples below are using a hardcoded address for the connected account, which is the Polkadot Treasury address on Asset Hub (connectedAddress="14xmwinmCEz6oRrFdczHKqHgWNMiCysE2KrA4jXXAAM1Eogk"). In reality, you might want to use the connected account instead from the ConnectWallet component.

Select Token - Without Balance

Dropdown without balance information, useful for token selection in basic contexts

Select Token - Exclude Native Token

Dropdown excluding the native chain token

Select Token - Custom Balance Precision

Dropdown with custom balance precision formatting (4 decimal places)

Props

Prop	Type	Default	Description
`chainId`	`string`	-	Chain identifier for token selection
`assetIds`	`number[]`	-	Array of asset IDs to filter tokens
`withBalance`	`boolean`	`false`	Show balance information for tokens
`value`	`number`	-	Currently selected asset ID
`onChange`	`(assetId: number) => void`	-	Called when token selection changes
`placeholder`	`string`	`"Select token"`	Placeholder text for the dropdown
`includeNative`	`boolean`	`true`	Include native chain token in options
`disabled`	`boolean`	`false`	Disable the component
`className`	`string`	-	Additional CSS classes

Connection States

The component shows different states based on wallet connection:

Connected: Shows available tokens with balances
Disconnected: Limited functionality without wallet connection
Loading: Shows spinner while fetching token data
No Tokens: Shows empty state when no tokens match filters

Token Information

Each token includes:

Symbol: Token ticker (e.g., "USDT", "DOT")
Name: Full token name
Decimals: Token precision
Logo: Token icon (when available)
Balance: User's current balance (when withBalance is enabled)
Asset ID: On-chain asset identifier

Token Filtering

Asset IDs

Specify which tokens to include using the assetIds prop:

<SelectToken
  chainId="paseoAssetHub"
  assetIds={[1984, 1337, 7777]} // Only show these specific tokens
  withBalance
/>

Native Token Inclusion

Control whether to include the chain's native token:

<SelectToken
  chainId="paseoAssetHub"
  assetIds={[1984, 8]}
  includeNative={true} // Include native token, default is true
  withBalance
/>

Balance Display

When withBalance is enabled:

Shows formatted token balances for connected accounts
Balances update automatically when account changes
Handles loading states gracefully

<SelectToken
  chainId="paseoAssetHub"
  assetIds={[1984, 8, 27]}
  withBalance
/>

Multi-Chain Support

The component supports different Asset Hub chains:

paseoAssetHub: Paseo Asset Hub (testnet)
kusamaAssetHub: Kusama Asset Hub
polkadotAssetHub: Polkadot Asset Hub

<SelectToken
  chainId="kusamaAssetHub"
  assetIds={[1000, 2000]}
  withBalance
/>

Styling Options

Custom Classes

Use the className prop to customize the component appearance:

<SelectToken
  chainId="paseoAssetHub"
  assetIds={[1984, 8]}
  className="w-[200px]"
  withBalance
/>

Error Handling

The component handles various error states:

Network disconnection: Shows appropriate loading state
Failed token fetching: Graceful degradation with fallback UIs
Invalid asset IDs: Filters out non-existent tokens
Balance fetch errors: Shows tokens without balance info

Provider Requirements

The component requires a PolkadotProvider wrapper:

import { PolkadotProvider } from "@/registry/polkadot-ui/lib/polkadot-provider.dedot";

<PolkadotProvider>
  <SelectToken
    chainId="paseoAssetHub"
    assetIds={[1984, 8, 27]}
    withBalance
  />
</PolkadotProvider>;

Alternatively, use the component with provider included:

import { SelectTokenWithProvider } from "@/registry/polkadot-ui/blocks/select-token/select-token.dedot";

<SelectTokenWithProvider
  chainId="paseoAssetHub"
  assetIds={[1984, 8, 27]}
  withBalance
/>;

Accessibility

Keyboard Navigation: Full keyboard support for dropdown interaction
Screen Readers: Proper ARIA labels and descriptions
Focus Management: Clear focus indicators and logical tab order
Loading Indicators: Accessible loading states with appropriate labels

Select Token

On this page