Leverage Cross-Chain Swaps with Universal Bridge
Learn how to enable your users to swap from any asset to any other with thirdweb's Universal Bridge.
In this guide, we'll show you how to purchase 10 USDC on Optimism in Typescript.
Log in to the thirdweb dashboard. Click on Create New > Project to get your Client ID. You'll need your Client ID to interact with the Connect SDK.
Before your user can select which tokens they'd like to swap, they'll need to find available routes.
You can do this using the
routes
function in ourBridge
namespace. You or your users can filter by origin and destination chains and/or tokens. Pagination is also built-in to the function.This will return an array of
Route
objects, which will include information such assymbol
,address
, andchainId
for both the origin and destination tokens.Once you know which routes are available, you can retrieve a quote to show the user how much they can expect to pay for a given swap.
In this example, we'll use the
Buy.quote
function to get a quote for buying 10 USDC on Optimism for Base ETH.The
Buy
namespace is purpose-built for when you want to obtain a specific amount of the output token. If you have a specific input amount and are flexible on the output amount, you can use theSell
namespace. Learn more about sells here.Quote allows us to get an expected amount before the user has connected their wallet. This quote won't come with executable transactions, and won't be a guaranteed price.
This will return a
Quote
object, which will include theoriginAmount
anddestinationAmount
in wei, along with some more useful information about the predicted quote.Now that we know how much the user can expect to pay, we can have them connect their wallet and execute the swap.
To get a prepared quote, we'll use the
Buy.prepare
function. The key difference with this function is it requires asender
andreceiver
to be specified.This will return a
PreparedQuote
object. It will look very similar to theQuote
you received in the previous step, but it will include atransactions
array. This array will contain the transactions you need to execute to complete the swap.To execute the swap, we'll need to send all transactions in the
transactions
array one after the other.Currently, the
transactions
array does not include approvals. You'll need to execute any necessary approvals prior to executing the swap transactions.The returned transactions follow the Ox standard TransactionEnvelopeEip1559 format. This is a simple transaction with
data
,to
,value
, andchainId
properties. Gas is not included in the transaction, and should be estimated separately if necessary. Normally, the thirdweb SDK will handle this for you.You'll notice in the previous step we call
Bridge.status
to get the status of the swap. We can get the status of any past swap using just the transaction hash and chain ID of its origin transaction.When sending the transactions in a prepared quote, you must use
Bridge.status
to get theCOMPLETED
status before moving on to the next transaction. This is becausestatus
waits for both the origin and destination transactions to complete. Waiting for the origin transaction receipt is not sufficient since the funds might not have arrived on the destination chain yet.The
status
will also return all transactions (origin and destination) involved in the swap.