Skip to content

<Swap />

The Swap components provide a comprehensive interface for users to execute Token swaps.

Before using them, ensure you've completed all Getting Started steps.

The components are designed to work together. For each component, ensure the following:

  • <Swap /> - Set the user's address and error handling.
  • <SwapAmountInput /> - Set the Token to swap and specify the input type (from or to).
  • <SwapToggleButton /> - Optional component to toggle between input types.
  • <SwapMessage /> - Optional component that displays a message related to the swap operation's current state.
  • <SwapButton /> - Set the onSuccess and onError callbacks.

Usage

Example using @coinbase/onchainkit/swap and @coinbase/onchainkit/wallet.

import { useCallback } from 'react';
import { Address, Name } from '@coinbase/onchainkit/identity';
import { 
  Swap, 
  SwapAmountInput, 
  SwapToggleButton, 
  SwapButton, 
} from '@coinbase/onchainkit/swap'; 
import { Wallet, ConnectWallet } from '@coinbase/onchainkit/wallet';
import { useAccount, useSendTransaction } from 'wagmi';
import type { 
  BuildSwapTransaction, 
  SwapError, 
} from '@coinbase/onchainkit/swap'; 
import type { Token } from '@coinbase/onchainkit/token';
 
export default function SwapComponents() {
  const { address } = useAccount();
  const { sendTransaction } = useSendTransaction();
 
  const ETHToken: Token = {     
    address: "",
    chainId: 8453,
    decimals: 18,
    name: "Ethereum",
    symbol: "ETH", 
    };
 
  const USDCToken: Token = { 
    address: "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913",
    chainId: 8453,
    decimals: 6,
    name: "USDC",
    symbol: "USDC",
   };
 
  const swappableTokens: Token[] = [ ... ];
 
  return ({ address ? (
    <Swap address={address}>
      <SwapAmountInput
        label="Sell"
        swappableTokens={swappableTokens} 
        token={ETHToken} 
        type="from"
      /> 
      <SwapToggleButton /> 
      <SwapAmountInput
        label="Buy"
        swappableTokens={swappableTokens} 
        token={USDCToken} 
        type="to"
      /> 
      <SwapButton /> 
      <SwapMessage /> 
    </Swap> 
  ) : (
    <Wallet>
      <ConnectWallet>
        <Avatar className="h-6 w-6" />
        <Name />
      </ConnectWallet>
    </Wallet>
  )});
}

Custom token pair

You can adjust to only allow swap between a token pair.

// omitted for brevity
 
<Swap address={address}>
  <SwapAmountInput
    label="Sell"
    token={ETHToken}
    type="from"
  />
  <SwapToggleButton />
  <SwapAmountInput
    label="Buy"
    token={USDCToken}
    type="to"
  />
  <SwapButton />
  <SwapMessage />
</Swap> 

Remove toggle button

You can remove SwapToggleButton to make swap unidirectional.

// omitted for brevity
 
<Swap address={address}>
  <SwapAmountInput
    label="Sell"
    token={ETHToken}
    type="from"
  />
  <SwapAmountInput
    label="Buy"
    token={USDCToken}
    type="to"
  />
  <SwapButton />
  <SwapMessage />
</Swap> 

Remove swap message

You can remove SwapMessage component.

// omitted for brevity
 
<Swap address={address}>
  <SwapAmountInput
    label="Sell"
    token={ETHToken}
    type="from"
  />
  <SwapToggleButton />
  <SwapAmountInput
    label="Buy"
    token={USDCToken}
    type="to"
  />
  <SwapButton />
</Swap> 

Override styles

You can override component styles using className.

// omitted for brevity
 
<Swap address={address} className='bg-gray-200'>
  <SwapAmountInput
    label="Sell"
    swappableTokens={swappableTokens}
    token={swappableTokens[1]}
    type="from"
    className='bg-white'
  />
  <SwapToggleButton className='border-red-600 bg-white'/>
  <SwapAmountInput
    label="Buy"
    swappableTokens={swappableTokens}
    token={swappableTokens[2]}
    type="to"
    className='bg-white'
  />
  <SwapButton className='bg-red-600'/>
  <SwapMessage className='text-red-600'/>
</Swap>

Props