TokenAmountInputWithSelect

const TokenAmountInputWithSelect: ForwardRefExoticComponent<
  TokenAmountInputProps & object & RefAttributes<TokenAmountInputElement>
>;

Beta

Param

props

The component props

Example

Hide the balance when the amount is not contributed by the user.

import { useState } from 'react';

import { TokenAmountInputWithSelect, type TokenOption } from '@anvil/sdk';
import { testnetProfile } from '@anvil/sdk/core';

const creditedTokens: TokenOption[] = [
  {
    address: testnetProfile.contracts.USDC.address,
    decimals: 6,
    name: 'USD Coin',
    symbol: 'USDC',
  },
];
type TokenAddress = TokenOption['address'];

export function CreditedValueInput() {
  const [amount, setAmount] = useState<bigint>();
  const [tokenAddress, setTokenAddress] = useState<TokenAddress>();

  return (
    <TokenAmountInputWithSelect
      amount={amount}
      onChangeAmount={({ value }) => setAmount(value)}
      onChangeToken={setTokenAddress}
      selectedTokenAddress={tokenAddress}
      showBalance={false}
      tokens={creditedTokens}
    />
  );
}

Remarks

Part of the SDK’s experimental React component surface — may change or be removed without notice and is not part of the compatibility contract. The supported React surface is the hooks and the provider.