How to Bridge & Swap Tokens

The full API reference for our /quote, /approve, /allowance and /send endpoints can be found in the API reference section.

In this section, we will discuss the process of moving tokens and exchanging them across one or multiple blockchain networks. Accomplishing a successful transfer necessitates making calls to our endpoints in order to move the transaction through its various stages.

Transfer Stages

The stages can be summarized as follows (and depicted in the diagram below):

  • Step 1. Retrieving a valid quote from a Swing-supported bridge
  • Step 2. (Optional) Getting approval for native token transfers/swaps
  • Step 3. Intiating transaction given the prior quote on a specific bridge
  • Step 4. Waiting for transaction to complete by polling for transaction status
  • Step 5. (Optional depending on bridge) Finalize transaction by claiming funds
  • Step 6. Transaction Complete!

Swing API Transfer Flow

Step 1: Get a quote

Retrieving a valid quote from a Swing supported bridge

The full API reference for our /quote endpoint can be found in the API reference section.

This is the first prerequisite step for any transaction on the Swing platform. We want to determine which bridge provides us the best quote based on our needs (whether that’s price, speed or low fees).

Our quoting system requires all the following required information:

  1. Source chain
  2. Destination chain
  3. Source Token on the Source chain
  4. Destination Token on the Destination chain
  5. The amount you want to send
  6. Source Wallet Address to pull funds from

We can query our /quote endpoint in the following manner given all the necessary information:

const getQuote = async (params) => {
  const result = await axios.get(
    'https://swap.prod.swing.xyz/v0/transfer/quote',
    {
      fromChain: params.fromChain.slug,
      fromChainId: params.fromChain.chainId,
      tokenSymbol: params.fromToken.symbol,
      fromTokenAddress: params.fromToken.address,

      toChain: params.toChain.slug,
      toChainId: params.toChain.chainId,
      toTokenSymbol: params.toToken.symbol,
      toTokenAddress: params.toToken.address,

      fromUserAddress: params.userAddress,
      tokenAmount: params.tokenAmount,
    }
  )
  return result.data
}

The results for our quote will look like this. The “routes” property will have all the possible bridges that can support the requested transfer. You can choose one based on either low fees, best price or speed.

{
  "fromToken": {
    "symbol": "USDC",
    "name": "USDC",
    "address": "0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48"
  },
  "toToken": {
    "symbol": "USDC",
    "name": "USDC",
    "address": "0x1111111254fb6c44bac0bed2854e76f90643097d"
  },
  "fromChain": {
    "chainId": 1,
    "slug": "ethereum",
    "name": "Ethereum"
  },
  "toChain": {
    "chainId": 137,
    "slug": "polygon",
    "name": "Polygon"
  },
  "routes": [
    {
      "destinationTxFee": "4000",
      "bridgeFee": "3000",
      "duration": "low",
      "gas": "4000000000",
      "quote": "10000000",
      "route": [
        {
          "bridge": "celer",
          "bridgeTokenAddress": "0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48",
          "name": "USDC",
          "part": 100
        }
      ]
    },
    {
      "destinationTxFee": "4000",
      "bridgeFee": "3000",
      "duration": "low",
      "gas": "4000000000",
      "quote": "10000000",
      "route": [
        {
          "bridge": "hop",
          "bridgeTokenAddress": "0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48",
          "name": "USDC",
          "part": 100
        }
      ]
    },
    {
      "destinationTxFee": "5000",
      "bridgeFee": "3400",
      "duration": "low",
      "gas": "90000000000",
      "quote": "10000000",
      "route": [
        {
          "bridge": "nxtp",
          "bridgeTokenAddress": "0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48",
          "name": "USDC",
          "part": 100
        }
      ]
    }
  ]
}

Step 2: Get token approval

Getting approval for non-native token transfers & swaps

The full API reference for our /approve endpoint can be found in the API reference section.

Note: This section is only applicable to transfers of non-native tokens. Non-native tokens are governance tokens, wrapped tokens, stablecoins, and oracle tokens.

If you are performing a transfer with a non-native token, our Swing Contract requires the right allowance limit to spend/withdraw funds (denominated in non-native tokens) from the designated wallet address. Therefore, we need to invoke our /approve endpoint to set with the right allowance limit that is greater than the amount you want to transfer. This is a well-known standard step.

In practice, depending on the non-native token amount you are looking to transfer, you want to call our /approve endpoint with a limit greater than or equal to the amount you are transferring.

You can use the /allowance endpoint to determine if you have already approved a sufficient limit to allow your non-native token transfer. Importantly, the allowance limit is specific to the token, chain and bridge. So you must approve an allowance limit every time for every unique transfer combination of token, chain or bridge.

Allowance Endpoint

We can query our /allowance endpoint in the following manner to get the allowance limit:

const getAllowance = async (params) => {
  const result = await axios.get(
    'https://swap.prod.swing.xyz/v0/transfer/allowance',
    {
      fromChain: params.fromChain.slug,
      fromChainId: params.fromChain.chainId,
      tokenSymbol: params.fromToken.symbol,
      tokenAddress: params.fromToken.address,
      bridge: params.bridge,
      fromAddress: params.userAddress,
    }
  )
  return result.data.allowance
}

This will always only return the allowance limit for that specific token, on the specific chain for that specific bridge:

{
  "allowance": "1000000"
}

Approve Endpoint

If you need to approve a higher allowance limit, you can query our /approve endpoint in the following manner:

const getApprovalCallData = async (params) => {
  const result = await axios.get(
    'https://swap.prod.swing.xyz/v0/transfer/approve',
    {
      fromChain: params.fromChain.slug,
      fromChainId: params.fromChain.chainId,
      tokenSymbol: params.fromToken.symbol,
      tokenAddress: params.fromToken.address,
      toChain: params.toChain.slug,
      toChainId: params.toChain.chainId,
      bridge: params.bridge,
      fromAddress: params.userAddress,
      tokenAmount: params.amount,
    }
  )
  return result.data
}

Since approve is a contract-level function, Swing only returns the necessary call-data that will need to be signed and executed by the local wallet (ie. Metamask, Coinbase Wallet, WalletConnect, etc).

{
  "data": "0x095ea7b30000000000000000000000001111111254fb6c44bac0bed2854e76f90643097d000000000000000000000000000000000000000000000000000000174876e800",
  "to": "0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48",
  "fromChain": {
    "chainId": 1,
    "slug": "ethereum",
    "name": "Ethereum"
  }
}

Step 3: Initiate transfer transaction

Initiate transaction given the prior quote on a specific bridge

The full API reference for our /send endpoint can be found in the API reference section.

Similar to our quoting system, to initiate a transaction it requires all the following required information:

  1. Bridge
  2. Source chain
  3. Destination chain
  4. Source Token on the Source chain
  5. Destination Token on the Destination chain
  6. The amount you want to send
  7. Source Wallet Address to pull funds from

We can query our /send endpoint in the following manner given all the necessary information:

const sendTransaction = async (params) => {
  const result = await axios.post(
    'https://swap.prod.swing.xyz/v0/transfer/send',
    {
      fromChain: params.fromChain.slug,
      fromChainId: params.fromChain.chainId,
      tokenSymbol: params.fromToken.symbol,
      fromTokenAddress: params.fromToken.address,

      toChain: params.toChain.slug,
      toChainId: params.toChain.chainId,
      toTokenSymbol: params.toToken.symbol,
      toTokenAddress: params.toToken.address,

      fromUserAddress: params.userAddress,
      tokenAmount: params.tokenAmount,

      route: [
        {
          bridge: params.route.bridge,
          bridgeTokenAddress: params.route.tokenAddress,
          name: params.route.tokenName,
          part: 100,
        },
      ],
    }
  )
  return result.data
}

Since initiating a transaction requires invoking a contract-level function on your supplied wallet address, Swing only returns the necessary call-data that will need to be signed and executed by the local wallet (i.e Metamask, WalletConnect, Coinbase Wallet). The /send endpoint returns the following example call-data:

{
  "tx": {
    "data": "0x797f.....000",
    "to": "0x2a6Ee6DA9147E412884d8260BC741d816D481C0a",
    "from": "0xEC0c6441cAc4EBC8d9CD12dF6FFB19829e9c427A",
    "txId": "0x58f970dfa12a052e821a03de33fecebf1df002c7fde42547a6be95a35ded3676",
    "encryptedCallData": "0x00....33333"
  },
  "fromToken": {
    "symbol": "USDC",
    "name": "USDC",
    "address": "0xEC0c6441cAc4EBC8d9CD12dF6FFB19829e9c427A"
  },
  "fromChain": {
    "chainId": 250,
    "name": "Fantom",
    "slug": "fantom"
  },
  "toToken": {
    "symbol": "USDC",
    "name": "USDC"
  },
  "toChain": {
    "chainId": 137,
    "name": "Polygon",
    "slug": "polygon"
  },
  "route": [
    {
      "bridge": "nxtp",
      "bridgeTokenAddress": "",
      "name": "USDC",
      "part": 100
    }
  ]
}

Step 4: Watch transaction status

Waiting for transaction to complete by polling for transaction status

The full API reference for our /status endpoint can be found in the API reference section.

Once you have a transaction submitted and pending, you will need to monitor the status of the transaction as you wait. This involves polling our /status endpoint to actively watch the status updates. For more information on fetching transaction status, refer to our guide on "How to Check Status of a Transfer".

Step 5: Finalize transaction

Note: For the majority of bridges, the additional step of making a claim is not necessary because most bridges do not require it. The “claim” step is only applicable if the /status endpoint reports back with needClaim: true for your particular transaction. As of the present, among all bridges that have Swing integrations, only the NXTP (also known as Connext) bridge necessitates the step of making a claim.

You can perform the claim step by calling our /claim endpoint, however as a prerequisite step for the /claim API call, you need to fetch a signature hash from our /sign endpoint.

Prerequisite Step: Get Signature

The full API reference for our /sign endpoint can be found in the API reference section.

You can first call our /sign endpoint as a prerequisite step as follows:

const getSignatureForClaim = async (params) => {
  const result = await axios.post(
    'https://swap.prod.swing.xyz/v0/transfer/sign',
    {
      bridge: params.bridge,
      txId: params.txId,
      userAddress: params.userAddress,
    }
  )
  return result.data
}

The signature result will look like this:

{
  "hash": "0x2657fff6d3aaa4caf12960ddc810d2cf5c00e725aae84a5ac34fbead7e1b4671",
  "relayerFee": "300000"
}

Claim Step:

The full API reference for our /claim endpoint can be found in the API reference section.

You can perform the claim by calling our /claim endpoint by passing along the signature from the prior step:

const performClaim = async (params) => {
  const result = await axios.post(
    'https://swap.prod.swing.xyz/v0/transfer/claim',
    {
      fromChain: {
        chainId: params.fromChain.chainId,
        slug: params.fromChain.slug,
      },
      toChain: {
        chainId: params.toChain.chainId,
        slug: params.toChain.slug,
      },

      bridge: params.bridge,
      txId: params.txId,

      userAddress: params.userAddress,
      signature: params.signature,
    }
  )
  return result.data
}

The claim result will look like this:

{
  "tx": {
    "from": "0xEC0c6441cAc4EBC8d9CD12dF6FFB19829e9c427A",
    "to": "0x1111111254fb6c44bac0bed2854e76f90643097d",
    "data": "0x2e95b6c8...2386f26fc1...d3b668f0adb6fd56...3b6d034026aad2da94c59524ac0d93f6d6cbf9071d7086f2cfee7c08",
    "value": "10000000000000000",
    "gas": "143340",
    "txId": "string"
  },
  "message": "string"
}

Congrats! Your transaction is now complete 🥳

Next, lets learn how to request all supported chains and known tokens. Navigate to the next section 👈