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

Parameter	Description	Type (see examples below)	Required
`apiKey`	Target contract's chain ID.	`ChainId`	`true`
`address`	Sender's wallet address.	`ActionType`	`false`
`chainIds`	Optionally support only a subset of Decent chains.	`ChainId[]`	`false`
`className`	Tailwind CSS styling.	`string`	`false`
`chainIconDictOverride`	Use custom chain icons.	`Record<number, any>`	`false`
`popularTokens`	Set the tokens to display as popular based on the selected chain.	`TokenInfo[]`	`false`
`showChangeWalletTopIcon`	Hide option to send to another wallet.	`boolean`	`false`
`selectedSrcToken`	Force specific source token.	`SelectedChainOrToken`	`false`
`selectedDstToken`	Force specific destination token.	`SelectedChainOrToken`	`false`

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: 'https://assets.coingecko.com/coins/images/35884/standard/Bonsai_BW_Coingecko-200x200.jpg?1710071621',
}
 
// Example usage:
<SwapModal
  ...
  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.

_app.tsx

import "@decent.xyz/the-box/index.css";
import { BoxThemeProvider } from "@decent.xyz/the-box";
 
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} />  
    </BoxThemeProvider>
  );
};

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

import { SwapModal } from "@decent.xyz/the-box";
...
const Component = () => {
  return (
    <SwapModal
      className=""
      address={address}
      apiKey={'DECENT_API_KEY'}
    />
  );
};