EtherInput Component

The EtherInput component provides an input for entering values in ETH or USD with a toggle to switch modes, automatic conversion based on the current native currency price, and a callback that reports both values.

Import

import { EtherInput } from "@scaffold-ui/components";

Props

Prop	Type	Default	Description
`name`	`string`	-	Name attribute for the input element
`placeholder`	`string`	-	Placeholder text for the input
`defaultValue`	`string`	-	Initial value for the input
`defaultUsdMode`	`boolean`	`false`	Start with the input in USD mode instead of ETH
`disabled`	`boolean`	`false`	Disables the input and toggle button
`onValueChange`	`(value: { valueInEth: string; valueInUsd: string; displayUsdMode: boolean }) => void`	-	Called when the value or display mode changes. Provides both ETH and USD values and current display mode
`style`	`CSSProperties`	-	Custom CSS styles (memoize to prevent re-renders)

Live Examples

Basic Usage

import React from "react";
import { EtherInput } from "@scaffold-ui/components";
 
<EtherInput placeholder="Amount" />;

Default USD Mode

import React from "react";
import { EtherInput } from "@scaffold-ui/components";
 
<EtherInput
  defaultUsdMode
  placeholder="Enter amount in USD"
/>;

Default Value

import React from "react";
import { EtherInput } from "@scaffold-ui/components";
 
<EtherInput defaultValue="0.5" />;

Disabled State

import React from "react";
import { EtherInput } from "@scaffold-ui/components";
 
<EtherInput
  disabled
  placeholder="Disabled"
/>;

onValueChange Callback

import React from "react";
import { EtherInput } from "@scaffold-ui/components";
 
<EtherInput
  placeholder="With onValueChange"
  onValueChange={({ valueInEth, valueInUsd, displayUsdMode }) => {
    console.log({ valueInEth, valueInUsd, displayUsdMode });
  }}
/>;