Skip to content
Premium & Brand

Token Swap

Aave-style swap: animated amount, USD conversion, Max and Clear.

Import

tsx
import { TokenSwap } from "@cronus-ui/ui";
bash
npx cronus-ui add token-swap

Examples

.cronus

No audit fixture declares this family in .cronus yet.

React onlyParity: Not portedParity scoreboard

API Reference

Generated from the component's exported types.

TokenSwapLabels

Skip TokenSwapLabels props table
PropTypeDefaultDescription
use*
string——
using*
string——
max*
string——
clear*
string——
amount*
string——
notEnough*
string—`{symbol}` is replaced with the from-asset symbol.
receive*
string—`{symbol}` is replaced with the to-asset symbol.

TokenSwapProps

Extends Omit< ComponentPropsWithoutRef<"div">, "defaultValue" | "onAnimationStart" | "onAnimationEnd" | "onDrag" | "onDragStart" | "onDragEnd" >

Skip TokenSwapProps props table
PropTypeDefaultDescription
ref
Ref<HTMLDivElement>—Ref forwarded to the underlying DOM node.
from
TokenSwapAsset——
to
TokenSwapAsset——
usdPerFrom
numberDEFAULT_USD_PER_FROMUSD per 1 unit of the from-asset.
toPerFrom
numberDEFAULT_TO_PER_FROMTo-asset units received per 1 unit of the from-asset.
locale
string"en-US"—
value
string—Controlled value.
defaultValue
string""Uncontrolled initial value.
onValueChange
(amount: string, parsed: number) => void—Called when the value changes.
labels
Partial<TokenSwapLabels>—Override default English strings.
className
string—Additional class names merged onto the root.
children
ReactNode—Contents of the component.
id
string—DOM id of the root element.