Token Select
A token picker with balances and search. Symbols are not unique — anyone can deploy a contract called "USDC" — so unverified tokens are segregated, badged, and shown by contract address rather than the name they claim.
src/components/ui/token-select.tsxAbout
From the component's own source, where it was written.
A token picker with balances and search.
The security-critical part is what happens for a token that is not on the list. Symbols are not unique — anyone can deploy a contract called "USDC" — so a search that matches on symbol alone is a scam vector. Unverified tokens are therefore segregated below a divider, badged, and shown with their contract address rather than trusting the name they claim.
Balances sort the list, because the token you want is nearly always one you hold. Zero-balance tokens keep their place in the catalogue but fall below anything with a balance.
Install
npx astralyx-ui add token-select
Usage
import { TokenSelect } from '@/components/ui/token-select'
<TokenSelect tokens={tokens} value={token} onValueChange={setToken} />Composer
Change the props and the source below follows.
<TokenSelect tokens={tokens} value={token} onValueChange={setToken} size="md" />Examples
Picker
<TokenSelect tokens={tokens} value={token} onValueChange={setToken} />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
TokenSelect
Extends Omit<ComponentProps<'div'>, 'onChange'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| tokens | TokenOption[] | required | { address, symbol, name?, icon?, balance?, balanceValue?, fiat?, verified? }. |
| value | string | — | Contract address of the selected token. |
| onValueChange | (address: string) => void | — | — |
| size | keyof typeof fieldSize | 'md' | — |
| placeholder | string | 'Select a token' | — |
| disabled | boolean | false | — |
| locale | string | 'en-GB' | — |
| currency | string | 'USD' | — |
| unverifiedLabel | ReactNode | 'Unverified' | Badge on a token missing from the trusted list. |
| unverifiedNote | ReactNode | 'Not on the trusted list. Anyone can deploy a token using an existing symbol — check the contract address.' | — |
| searchPlaceholder | string | 'Search name or paste address' | — |
| searchLabel | string | 'Search tokens' | Accessible name for the search field. |
| listLabel | string | 'Tokens' | Accessible name for the listbox. |
| emptyMessage | ReactNode | 'No tokens match.' | — |
Types
TokenOption
A token picker with balances and search.
| Field | Type | Description |
|---|---|---|
| address | string | — |
| symbol | string | — |
| name? | ReactNode | — |
| icon? | ReactNode | — |
| balance? | string | Formatted balance. |
| balanceValue? | number | Used only for ordering — held tokens sort first, since the one you want is usually one you have. |
| fiat? | number | — |
| verified? | boolean | false moves the token below a divider with a warning and shows its address instead of its claimed name. |
Behaviour
| Topic | Detail | Description |
|---|---|---|
| search | symbol, name or address | Pasting a contract address finds it directly. |