Use Elements Without the UI

If you don't want to use Elements React UI, you can still utilise the Elements Core and Hooks libraries— excluding the Elements widget—and still achieve significant advantages in terms of development time and maintenance.

Elements SDK Overview

Elements SDK contains three components:

1. Core Library - encapsulates the core logic for data fetching and transactions.

2. Hooks - React hooks wrapper around the Core library for more streamlined React development.

3. Elements Widget - plug-n-play swaps widget that can be directly integrated into your dApp

Elements Architecture

Let's get started with building your own UIs with Elements Core/Hooks. 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/.

We have created a simple vuejs project for IBC Only swaps using Elements Core that you can refer to here - https://github.com/leapwallet/elements-vue-example

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