SelectTokenContainer

SelectTokenContainer is the same token picker as the modal, just rendered inline. No <dialog>, no trigger element, no open/close lifecycle — it shows the list directly inside your layout the moment it mounts.

Reach for it when the picker should always be on screen: a sidebar, a dedicated swap panel, a portfolio "pick a token to view" view.

Usage

It needs to live inside a TokenKitWrapper, same as the modal.

Code

tsx

1import { useState } from 'react';
2import { SelectTokenContainer, type IToken } from 'starknet-tokenkit';
3 
4const TokenPanel = () => {
5  const [selectedToken, setSelectedToken] = useState<IToken | null>(null);
6 
7  return (
8    <SelectTokenContainer
9      callBackFunc={(token: IToken) => setSelectedToken(token)}
10      selectedToken={selectedToken}
11      modalHeight="60dvh"
12      modalWidth="400px"
13    />
14  );
15};

Props

Prop	Type	Required	Description
`selectedToken`	`IToken \| null \| undefined`	Yes	The currently selected token. Drives the "selected" highlight in the list.
`callBackFunc`	`(token: IToken) => void`	Yes	Called with the chosen token when the user picks one.
`modalHeight`	`string`	No	Height of the container (default: theme `height` value, typically `60dvh`).
`modalWidth`	`string`	No	Width of the container (default: `420px`).
`animation`	`'bounce' \| 'slide' \| 'ease' \| 'fade'`	No	Accepted for type-compatibility with `SelectTokenModal`; the container does not animate on mount.

Info

Prop names like modalHeight and modalWidth are inherited from the shared IModalProps type the modal and container both use — they apply to the container's box dimensions even though there's no modal involved.

Wrapper-level config

Container behavior (which token set to show, whether to remember recent picks, the X-Origin header) is controlled by the same options and origin props on TokenKitWrapper that the modal reads. See SelectTokenModal → Wrapper-level options.

Features

The container has the same features as the modal:

Search with debounce
Common tokens quick-pick row
Recent tokens (opt in via options.enableRecent)
Infinite scroll
Keyboard navigation (↑ ↓ Enter; Esc is a no-op here since there's nothing to close)
Selected-token dimming

Reach for SelectTokenContainer when the picker should always be on screen (sidebar, dedicated panel, full-page view).
Reach for SelectTokenModal when it should pop up on a button click and get out of the way.

They share the same data fetching and selection logic, so swapping between them later is a one-import change.

Documentation

SelectTokenContainer

Usage

Props

Wrapper-level config

Features

Container or Modal?