Components
InputAddress
StablePill-shaped address input matching the DropdownToken structure. Title (“Address”) stays fixed, the subtitle line is the input field. Shows a wallet icon on the left and an X clear button when focused or filled. Focus state uses the brand ring. Error state shows a red border with a hint message below.
Interactive (type an address)
Withdraw to
Address
Error state
Pass error to show a red border and hint for the message below the pill.
Send to
Address
Not an Ethereum address
Usage
import { InputAddress } from "@mnee-ui/ui"const [address, setAddress] = useState("")<InputAddress label="Withdraw to" value={address} onChange={setAddress} placeholder="Enter address" title="Address"/>Backend validation
Wire address validation to your API. Pass the error and hint props based on the backend response.
// Validate address on the backend as the user typesconst [address, setAddress] = useState("")const [error, setError] = useState<string>()const { data } = useSWR( address.length > 10 ? `/api/validate-address?addr=${address}` : null, fetcher, { onSuccess: (d) => setError(d.valid ? undefined : "Invalid address") })<InputAddress label="Withdraw to" value={address} onChange={setAddress} error={error} hint="Not a valid Ethereum address"/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Withdraw to" | Label above the pill |
| hasLabel | boolean | true | Show/hide the label |
| value | string | — | Current address value |
| onChange | (value: string) => void | — | Called on input change |
| placeholder | string | "Enter address" | Input placeholder text |
| title | string | "Address" | Fixed title above the input line |
| icon | React.ReactNode | Wallet icon | Custom leading icon |
| error | string | — | Error message — switches pill to red border |
| hint | string | — | Hint text shown below the pill (visible when error is set) |
| className | string | — | Additional container classes |