Create a Custom Swap UI

If you don't want to use Elements React UI, we provide elements-core and elements-hooks package to help you build your own swap UI.

We have released v1.0.0 of Elements with an improved UX and developer API. We recommend you to use v1.x. Here's the migration guide for v0.x users.

The following sections are in the "guide" format. For technical documentation of individual APIs, please refer to the typedoc hosted at https://leapwallet.github.io/elements/.

Using without React

Start with installing the elements core package

yarn add @leapwallet/elements-core

Here's what we need to do to create a Swap UI powered by Skip

1. Show FROM chains and tokens

2. Show TO chains and tokens

3. Get swap quotes

4. Get transaction messages

5. Sign and broadcast the transaction(s)

6. Track the transaction(s)

For all these steps, we will use the SkipAPI class exported from the core package.

Show TO and FROM Chains and Tokens

• Get the list of supported chains using SkipAPI.getSupportedChains - this has information such as chainId, chainName, logoUri, chainType, etc...

• Use this data to display the list of chains

• Get the list of supported tokens using SkipAPI.getSupportedAssetsForChain - this has information such as name, symbol, denom, logoUri, trace, originChainId

• Use this data to display all the tokens

Get Swap Quotes

• Get the route/quote using the SkipAPI.getRoute method - this gives you the route for the selected Source Chain/Token and Destination Chain/Token pair

• Display the route or error based on the response

Get Transaction Messages

• When user wants to proceed with the swap, use the route response and other data to get the transaction messages using SkipAPI.getMessages method

• Use these messages to simulate and get gas limit and proceed with the transaction(s) for the swap

Sign and Broadcast the Transaction(s)

• Create the transaction body and get it signed by the user

• Convert the signed transaction into base64 encoded bytes string

• Submit the transaction to the blockchain using SkipAPI.submitTransaction method - you will get the txn hash back if everything goes as expected

Track the Transaction(s)

• As the transaction proceeds, the user should be updated with the latest status. Use SkipAPI.getTxnStatus method to get the same

• In case of multi-step swap, sign and broadcast all subsequent transaction and track them until all are completed

Using with React

Start with installing the elements hooks package (which depends on @leapwallet/elements-core package)

yarn add @leapwallet/elements-hooks

Here's what we need to do to create a Swap UI powered by Skip

1. Show FROM chains and tokens

2. Show TO chains and tokens

3. Get swap quotes

4. Get transaction messages

5. Show swap summary

6. Sign and broadcast the transaction(s)

7. Track the transaction(s)

We will use SkipAPI class from the elements-core package and hooks from the elements-hooks package for this.

Show TO and FROM Chains and Tokens

• Use useSkipSupportedChains to get the chains supported by skip - - this has information such as chainId, chainName, logoUri, chainType, etc...

• Use this data to display the list of chains

• Get the list of supported tokens using useSkipAssets - this has information such as name, symbol, denom, logoUri, trace, originChainId

• Use this data to display all the tokens

Get Swap Quotes

• Get the route/quote using the useRoute hook - this gives you the route for the selected amount and Source Chain/Token and Destination Chain/Token pair

• Display the route or error based on the response

Get Transaction Messages

• When user wants to proceed with the swap, use the route response and other data to get the transaction messages using useMessages hook

• Use these messages to simulate and get gas limit and proceed with the transaction(s) for the swap

Show Swap Summary

• To show your user the route, you can use useTransactions hook which accepts the route object and returns an object which you can easily use to display the route to the user

Sign and Broadcast the Transaction(s)

• Create the transaction body and get it signed by the user

• Convert the signed transaction into base64 encoded bytes string

• Submit the transaction to the blockchain using SkipAPI.submitTransaction method - you will get the txn hash back if everything goes as expected

Track the Transaction(s)

• As the transaction proceeds, the user should be updated with the latest status. Use SkipAPI.getTxnStatus method to get the same

• In case of multi-step swap, sign and broadcast all subsequent transaction and track them until all are completed