<SwapSettings /> · OnchainKit

Customizable components for token Swap settings and slippage configuration

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.

import {
  Swap,
  SwapSettings,
  SwapSettingsSlippageDescription,
  SwapSettingsSlippageInput,
  SwapSettingsSlippageTitle,
} from '@coinbase/onchainkit/swap';
// ---cut-before---
// 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.

// suppress twoslash error
declare const baseIcon: any;

import {
  Swap,
  SwapSettings,
  SwapSettingsSlippageDescription,
  SwapSettingsSlippageInput,
  SwapSettingsSlippageTitle,
} from '@coinbase/onchainkit/swap';
// ---cut-before---
// omitted for brevity
<SwapSettings icon={baseIcon}>
// ---cut-after---
</SwapSettings>

Add text

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

import {
  Swap,
  SwapSettings,
  SwapSettingsSlippageDescription,
  SwapSettingsSlippageInput,
  SwapSettingsSlippageTitle,
} from '@coinbase/onchainkit/swap';
// ---cut-before---
// omitted for brevity
<SwapSettings text="Settings">
// ---cut-after---
</SwapSettings>

Override text

You can override component text by providing children text.

import {
  Swap,
  SwapSettings,
  SwapSettingsSlippageDescription,
  SwapSettingsSlippageInput,
  SwapSettingsSlippageTitle,
} from '@coinbase/onchainkit/swap';
<Swap>
// ---cut-before---
// omitted for brevity

<SwapSettingsSlippageTitle>
  Slippage Settings
</SwapSettingsSlippageTitle>
<SwapSettingsSlippageDescription>
  Set a max slippage you are willing to accept.
</SwapSettingsSlippageDescription>
// ---cut-after---
</Swap>

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

• SwapSettingsReact
• SwapSettingsSlippageDescriptionReact
• SwapSettingsSlippageInputReact
• SwapSettingsSlippageTitleReact