Skip to main content
SwapWidget

​
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. While this is not required as it’s automatically pulled from wagmi for EVM chains, it’s recommended to always provide this if possible.❌
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 '@relayprotocol/relay-kit-ui'
import { useConnectModal } from '@rainbow-me/rainbowkit'
import { useState } from 'react'
import { useWalletClient } from 'wagmi'

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'
  })

  const walletClient = useWalletClient()

  return (
    <SwapWidget
      wallet={adaptViemWallet(walletClient)}
      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 '@relayprotocol/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>
  )
}