`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>// [!code focus]
    <SwapSettingsSlippageTitle>// [!code focus]
      Max. slippage// [!code focus]
    </SwapSettingsSlippageTitle>// [!code focus]
    <SwapSettingsSlippageDescription>// [!code focus]
      Your swap will revert if the prices change by more than the selected// [!code focus]
      percentage.// [!code focus]
    </SwapSettingsSlippageDescription>// [!code focus]
    <SwapSettingsSlippageInput />// [!code focus]
  </SwapSettings>// [!code focus]
</Swap>

Override styles

You can override component styles using className.

// omitted for brevity  
<Swap> 
  <SwapSettings>
    <SwapSettingsSlippageTitle className="text-[#EA580C]">// [!code focus]
      Max. slippage
    </SwapSettingsSlippageTitle>
    <SwapSettingsSlippageDescription className="text-[#EA580C]">// [!code focus]
      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}>// [!code focus]

Add text

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

// omitted for brevity  
<SwapSettings text="Settings">// [!code focus]

Override text

You can override component text by providing children text.

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

Components