Murphy

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[]>`

Token Input

Token Input

Installation

Basic Usage

Props

On this page