Skip to content

Cross-Chain Swaps

The swap modal enables developers to embed any-token to any-token swaps directly into their applications. Common use cases for embedded swaps include user onboarding to new wallets and serving as the canonical bridge interface for new chains.

Component Props

ParameterDescriptionType (see examples below)Required
apiKeyTarget contract's chain ID.ChainIdtrue
addressSender's wallet address.ActionTypefalse
chainIdsOptionally support only a subset of Decent chains.ChainId[]false
classNameTailwind CSS styling.stringfalse
chainIconDictOverrideUse custom chain icons.Record<number, any>false
popularTokensSet the tokens to display as popular based on the selected chain.TokenInfo[]false
showChangeWalletTopIconHide option to send to another wallet.booleanfalse
selectedSrcTokenForce specific source token.SelectedChainOrTokenfalse
selectedDstTokenForce specific destination token.SelectedChainOrTokenfalse
type SelectedChainOrToken = {
  chainId: ChainId;
  tokenInfo?: TokenInfo;
// Example: Bonsai token on Polygon
const samplePopularToken = {
  address: '0x3d2bd0e15829aa5c362a4144fdf4a1112fa29b5c',
  chainId: ChainId.POLYGON,
  decimals: 18,
  symbol: 'BONSAI',
  name: 'Bonsai Token',
  isNative: false,
  logo: '',
// Example usage:
  popularTokens: [samplePopularToken]

Sample Implementation

Below is an example of how to style and install the swap modal.

Please be sure to view the Getting Started section before progressing through these steps.

Step one (optional): Write a custom theme for the modal

Import the BoxThemeProvider at the top of your component tree. You can either write your own custom theme or import Decent's darkMode as an alternative styling option.

import "";
import { BoxThemeProvider } from "";
const myTheme = {
  mainBgColor: '#121212', 
  mainTextColor: '#ffffff',
  tokenSwapCardBgColor: '#1B1B1B',
  buyBtnBgColor: '#8236FD',
  buyBtnTextColor: '#ffffff',
  switchBtnBgColor: '#3A3842',
  tokenDialogHoverColor: '#444444',
  boxSubtleColor1: '#999999',
  borderColor: '#27252B',
  borderRadius: '0',
  loadShineColor1: "#121212",
  loadShineColor2: "#333333",
function MyApp({ Component, pageProps }: AppProps) {
  return (
    <BoxThemeProvider theme={myBoxTheme}>
      <Component {...pageProps} />  

Step two: Import the Swap Modal into the appropriate page or component

import { SwapModal } from "";
const Component = () => {
  return (