Parameters

ParameterDescriptionRequired
supportedWalletVMsA required array of VMs that the swap widget should support. If a VM is selected that’s not listed it will fall back to the (deposit address)[https://support.relay.link/en/articles/10269920-how-do-deposit-addresses-work] ux. When setting this array make sure that the VMs are connectible by your wallet connection provider (dynamic, rainbow, privy, etc).
fromTokenThe token to swap from. If provided, setFromToken must also be provided.
setFromTokenA function to update the from token. Required when fromToken is provided.❌ (✅ if fromToken is provided)
toTokenThe token to swap to. If provided, setToToken must also be provided.
setToTokenA function to update the to token. Required when toToken is provided.❌ (✅ if toToken is provided)
lockFromTokenDisables selecting a from token in the ui. A fromToken is required in order for this setting to be applied.
lockToTokenDisables selecting a to token in the ui. A toToken is required in order for this setting to be applied.
onFromTokenChangeA callback triggered when the user changes the from token
onToTokenChangeA callback triggered when the user changes the to token
lockChainIdIf set, locks the chain selection to the specified chain ID. Requires default tokens to be configured for this to work properly.
walletAn AdaptedWallet object representing the user’s wallet.
multiWalletSupportEnabledA boolean indicating whether multi-wallet (evm/svm) support is enabled.
linkedWalletsAn array of LinkedWallet objects when multi-wallet support is enabled.❌ (✅ if multiWalletSupportEnabled is true)
onSetPrimaryWalletA callback function to set the primary wallet when multi-wallet support is enabled.❌ (✅ if multiWalletSupportEnabled is true)
onLinkNewWalletA callback function to link a new wallet when multi-wallet support is enabled.❌ (✅ if multiWalletSupportEnabled is true)
defaultToAddressA wallet address to send the proceeds to.
defaultAmountThe default amount to swap, the amount is in the from token currency.
defaultTradeTypeThis can either be EXACT_INPUT or EXACT_OUTPUT, each of these refers to prefilling the output amount or the input amount and having the quote return the other side.
slippageToleranceSlippage tolerance for the swap, if not specified then the slippage tolerance is automatically calculated to avoid front-running. This value is in basis points (1/100th of a percent), e.g. 50 for 0.5% slippage.
disableInputAutoFocusPrevents the input field from automatically focusing when the widget loads.
popularChainIdsAn array of chain IDs to override the ‘Popular chains’ list in the token selector.
disablePasteWalletAddressOptionDisables the ability to paste wallet addresses in the multi-wallet dropdown.
singleChainModeWhen true, restricts swaps to occur only within the same chain. Works in conjunction with lockChainId.
onConnectWalletA callback to connect the user’s wallet. The widget can be used to fetch quotes for unauthenticated sessions but executing the quote requires an authenticated session.
onAnalyticEventA callback which sends useful events to pipe into your existing analytics integration.
onSwapValidatingA callback that returns the quote object along with executable steps while validating the swap
onSwapSuccessA callback that returns the quote object along with executable steps when the swap is complete
onSwapErrorA callback that returns any errors that occur during the swap process.

Usage

import { SwapWidget } from '@reservoir0x/relay-kit-ui'
import { useConnectModal } from '@rainbow-me/rainbowkit'
import { useState } from 'react'

export default function MyComponent() {
  const { openConnectModal } = useConnectModal()
  const [fromToken, setFromToken] = useState({
    chainId: 8453,
    address: '0x833589fcd6edb6e08f4c7c32d4f71b54bda02913',
    decimals: 6,
    name: 'USDC',
    symbol: 'USDC',
    logoURI: 'https://ethereum-optimism.github.io/data/USDC/logo.png'
  })
  const [toToken, setToToken] = useState({
    chainId: 10,
    address: '0x7f5c764cbc14f9669b88837ca1490cca17c31607',
    decimals: 6,
    name: 'USDC',
    symbol: 'USDC',
    logoURI: 'https://ethereum-optimism.github.io/data/USDC/logo.png'
  })

  return (
    <SwapWidget
      fromToken={fromToken}
      setFromToken={setFromToken}
      toToken={toToken}
      setToToken={setToToken}
      defaultAmount={'5'}
      supportedWalletVMs={['evm']}
      onConnectWallet={openConnectModal}
      onAnalyticEvent={(eventName, data) => {
        console.log('Analytic Event', eventName, data)
      }}
    />
  )
}

Slippage Configuration

The SlippageToleranceConfig component provides a user interface for configuring slippage tolerance in basis points. This component handles all the complexity of managing slippage values including debouncing, input validation, and conversion between percentage and basis points.

Parameters

ParameterDescriptionRequired
setSlippageToleranceCallback function to update the slippage tolerance value
onAnalyticEventOptional callback for analytics events

Usage

import { SwapWidget, SlippageToleranceConfig } from '@reservoir0x/relay-kit-ui'
import { useState } from 'react'

export default function SwapPage() {
  const [slippageTolerance, setSlippageTolerance] = useState<string | undefined>(undefined)

  return (
    <div>
      <SlippageToleranceConfig
        setSlippageTolerance={setSlippageTolerance}
        onAnalyticEvent={(eventName, data) => {
          console.log('Analytic Event', eventName, data)
       }}
      />
      <SwapWidget
        slippageTolerance={slippageTolerance}
        // ... other SwapWidget props
      />
    </div>
  )
}