Token Input
The TokenInput component is an input field with support for user balances, half / max buttons, and number formatting.
Token Input
Installation
Install shadcn/ui input and button components
npx shadcn@latest add input button
Install Murphy Token Icon
pnpm dlx shadcn@canary add https://www.murphyai.dev/r/token-icon.json
Install Murphy Token Combobox
pnpm dlx shadcn@canary add https://www.murphyai.dev/r/token-combobox.json
Install Murphy Token Input
pnpm dlx shadcn@canary add https://www.murphyai.dev/r/token-input.json
Basic Usage
import {TokenInput} from "@/components/ui/murphy/token-input.tsx"
<TokenInput
assets={assets}
onSearch={searchAssets}
onTokenSelect={(token) => {
console.log("Selected token:", token);
}}
onAmountChange={(amount) => {
console.log("Amount changed:", amount);
}}
/>
Props
Name | Type | Default |
---|---|---|
assets | SolAsset[] | [] |
showWalletBalance | boolean | true |
showQuickAmountButtons | boolean | true |
onTokenSelect | (token: SolAsset) => void | |
onAmountChange | (amount: number) => void | |
onSearch | (query: string) => Promise<SolAsset[]> |