Swap components & utilities
Swap
components provide a comprehensive interface for users to execute Token swaps.
Before using them, ensure you’ve completed all Getting Started steps.
SwapDefault
component is a simplified version of the Swap
component, designed to streamline the integration process for developers. Instead of manually defining each subcomponent and prop, developers can use this shorthand version which renders our suggested implementation of the component and includes SwapAmountInput
, SwapSettings
, SwapToggleButton
, SwapButton
, and SwapToast
.
If you’d like more customization, follow the implementation guide for our Swap
component below.
SwapDefaultReact
@coinbase/onchainkit/swap
and @coinbase/onchainkit/wallet
.
Swap
component supports two swap routers:
experimental.useAggregator
prop to true
.
isSponsored
prop.
By default, this will use the Coinbase Developer Platform Paymaster.
You can configure sponsorship settings on the Paymaster page.
For security reasons, we recommend setting up a contract allowlist in the Portal. Without a contract allowlist defined, your Paymaster will only be able to sponsor up to $1.
The contract used in our Swap API is Uniswap’s Universal Router, which is deployed on Base at 0x3fC91A3afd70395Cd496C647d5a6CC9D4B2b7FAD
.
Note that gas sponsorship will only work for Smart Wallets.
SwapToggleButton
to make swap unidirectional.
SwapMessage
component.
className
.
<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.<SwapToast />
- Optional component to notify user of successful swap transaction.