Skip to content
Docs

SwapSettings

The SwapSettings component enables customizable slippage configuration in the Swap component.

Usage

// omitted for brevity  
import {
  Swap,
  SwapSettings, 
  SwapSettingsSlippageDescription, 
  SwapSettingsSlippageInput, 
  SwapSettingsSlippageTitle, 
} from '@coinbase/onchainkit/swap';
 
<Swap> 
  <SwapSettings>
    <SwapSettingsSlippageTitle>
      Max. slippage
    </SwapSettingsSlippageTitle>
    <SwapSettingsSlippageDescription>
      Your swap will revert if the prices change by more than the selected
      percentage.
    </SwapSettingsSlippageDescription>
    <SwapSettingsSlippageInput />
  </SwapSettings>
</Swap>

Override styles

You can override component styles using className.

// omitted for brevity  
<Swap> 
  <SwapSettings>
    <SwapSettingsSlippageTitle className="text-[#EA580C]">
      Max. slippage
    </SwapSettingsSlippageTitle>
    <SwapSettingsSlippageDescription className="text-[#EA580C]">
      Your swap will revert if the prices change by more than the selected
      percentage.
    </SwapSettingsSlippageDescription>
    <SwapSettingsSlippageInput/>
  </SwapSettings>
</Swap>

Override icon

You can override the icon using the icon prop.

// omitted for brevity  
<SwapSettings icon={baseIcon}>

Add text

You can add text next to the SwapSettings component using text.

// omitted for brevity  
<SwapSettings text="Settings">

Override text

You can override component text by providing children text.

// omitted for brevity  
 
<SwapSettingsSlippageTitle>
  Slippage Settings
</SwapSettingsSlippageTitle>
<SwapSettingsSlippageDescription>
  Set a max slippage you are willing to accept.
</SwapSettingsSlippageDescription>

Components

  • <SwapSettings /> - Container component for swap slippage settings.
  • <SwapSettingsSlippageDescription /> - Displays description text explaining the slippage setting.
  • <SwapSettingsSlippageInput /> - Input field for users to enter their desired max slippage percentage
  • <SwapSettingsSlippageTitle /> - Displays the title for the slippage settings section

Props