Component

Token Swap Card

Provides a token swap interface with token inputs, slippage options, and confirmation states.

Preview

Swap tokens

You pay

You receive

0.00

Slippage: 0.5%

Fee: Calculated at signing

Installation

terminal

$npx shadcn@latest add https://uxdotsol.xyz/r/token-swap.json

Usage

token-swap.tsx

import TokenSwapCard from "@/components/uxdotsol/components/token-swap";
 
export default function App({ tokens, executeSwap }) {
  return (
    <div className="flex justify-center p-8">
      <TokenSwapCard
        tokens={tokens}
        networkFee="Calculated at signing"
        onSwap={async (from, to, amount) => {
          await executeSwap({ from, to, amount });
        }}
      />
    </div>
  );
}

Props / Arguments

Name	Type	Default	Description
tokens	Token[]	DEFAULT_TOKENS	Token options displayed in the selectors. Default options intentionally omit dynamic balances and prices.
defaultFrom	Token	tokens[0]	Pre-selected pay-side token.
defaultTo	Token	tokens[1]	Pre-selected receive-side token.
slippageOptions	number[]	[0.1, 0.5, 1.0]	Available slippage tolerance options shown as pills (in percent).
rateLabel	string	undefined	Static exchange rate label used when USD prices are unavailable.
networkFee	string	'Calculated at signing'	Real calculated fee or honest fee state shown in the card footer.
onSwap	(from: Token, to: Token, amount: string) => void \| Promise<void>	undefined	Real execution callback. Without it the component shows an integration-required state instead of simulating success.
className	string	''	Optional Tailwind / CSS class forwarded to the card root element.