Most of the well known tokens are already supported but for some cases you might want your users to be able to swap to a custom token. This example will show you how to do that in two steps using our web SDK.

​
Integration

To integrate the on-ramp and swap to a custom token, follow these steps:

1

Connect with Web SDK

Make sure you completed the Getting Started guide.

2

On ramp to a supported token

Complete the On-ramp guide

3

Update state after on-ramp is successful

After the on-ramp is successful, we can use the onOrderSuccessful callback to update the state of the app.

import { useState } from 'react'
  import { useAddFundsModal } from '@0xsequence/checkout'
  import { useAccount } from 'wagmi'

  export const OnRampAndSwap = () => {
      const { triggerAddFunds: toggleAddFunds } = useAddFundsModal()
      const { address: smartWalletAddress } = useAccount()
      const [canSwap, setCanSwap] = useState(true)

      const onTriggerAddFunds = () => {
          if (smartWalletAddress) {
              toggleAddFunds({
                  walletAddress: smartWalletAddress,
                  onOrderSuccessful(data) {
                      console.log('Order successful', data)
                      setCanSwap(true)
                  },
              })
          }
      }

      return (
          <>
              <button onClick={onTriggerAddFunds}>On Ramp</button>
          </>
      )
  }
4

Swap to a custom token with Smart Swaps

Once the on-ramp is successful, we can use the useSwapModal hook to swap the purchased token to your own custom token.

It will take a few minutes (1-3 minutes) for the on-ramped token to be available in the smart wallet so make sure to check the balance before opening the swap modal. If you have enough balance of a supported payment token, the modal will display it as a payment option, you don’t need to specify a payment token.

Make sure your custom token has enough liquidity on the chain you are executing the swap on.

import { useState } from 'react'
  import { SwapModalSettings, useAddFundsModal, useSwapModal } from '@0xsequence/checkout'
  import { useAccount } from 'wagmi'

  export const OnRampAndSwap = () => {
      const { triggerAddFunds: toggleAddFunds } = useAddFundsModal()
      const { openSwapModal } = useSwapModal()
      const { address: smartWalletAddress, chainId } = useAccount()
      const [canSwap, setCanSwap] = useState(true)

      const toTokenAmount = '10000000000' // amount in wei
      const toTokenAddress = '0x...' // custom token address

      const onTriggerAddFunds = () => {
          if (smartWalletAddress) {
              toggleAddFunds({
                  walletAddress: smartWalletAddress,
                  onOrderSuccessful(data) {
                      console.log('Order successful', data)
                      setCanSwap(true)
                  },
              })
          }
      }

      const onSwap = () => {
          const swapModalSettings: SwapModalSettings = {
              onSuccess: () => {
                  console.log('Swap successful')
              },
              chainId,
              toTokenAddress,
              toTokenAmount,
              title: `Buy our custom token`,
              description: 'Choose your payment method'
          }

          openSwapModal(swapModalSettings)
      }

      return (
          <>
              {canSwap ? <button onClick={onSwap}>Swap</button> : <button onClick={onTriggerAddFunds}>On Ramp</button>}
          </>
      )
  }

Congratulations! You’ve just learned how to on-ramp and swap to a custom token using Web SDK.