React components

Beta flow, form, view, and input components built on the React hooks.

These are whole pieces of UI, not headless state: CreateLOCFlow and the other *Flow components wrap a form, a workflow hook, and the sign-and-confirm sequence into one drop-in element, while the *Form components underneath them are usable standalone when you want your own submission chrome around the same fields. All of it is marked beta — the quickest way to see a working integration, and the likeliest surface to change.

TokenAmountInput and TokenSelect are the smaller input pieces the forms are built from, reusable on their own. TransactionWorkflowDialog and WorkflowView render a workflow’s step-by-step progress once a hook or a flow has prepared one.

None of this is exported from @anvil/sdk/react — import components from @anvil/sdk directly. The hooks these components are built on are in React hooks.

A token-amount input with no balance display, composed by hand:

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}
    />
  );
}

Primary APIs

Supporting types and functions in this group are not listed here; each has its own page, listed with the group in the sidebar.

React components

Primary APIs

Flows

Forms

Views

Inputs

Chrome