Use Elements Without the UI
Last updated
Last updated
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 contains three components:
Core Library - encapsulates the core logic for data fetching and transactions.
Hooks - React hooks wrapper around the Core library for more streamlined React development.
Elements Widget - plug-n-play swaps widget that can be directly integrated into your dApp
Start with installing the elements core package
Here's what we need to do to create a Swap UI powered by Skip
Show FROM chains and tokens
Show TO chains and tokens
Get swap quotes
Get transaction messages
Sign and broadcast the transaction(s)
Track the transaction(s)
For all these steps, we will use the SkipAPI
class exported from the core package.
Start with installing the elements hooks package (which depends on @leapwallet/elements-core package)
Here's what we need to do to create a Swap UI powered by Skip
Show FROM chains and tokens
Show TO chains and tokens
Get swap quotes
Get transaction messages
Show swap summary
Sign and broadcast the transaction(s)
Track the transaction(s)
We will use SkipAPI class from the elements-core package and hooks from the elements-hooks package for this.
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 .
We have created a simple vuejs project for IBC Only swaps using Elements Core that you can refer to here -
Get the list of supported chains using - this has information such as chainId
, chainName
, logoUri
, chainType
, etc...
Get the list of supported tokens using - this has information such as name, symbol
, denom
, logoUri
, trace
, originChainId
Get the route/quote using the method - this gives you the route for the selected Source Chain/Token and Destination Chain/Token pair
When user wants to proceed with the swap, use the route response and other data to get the transaction messages using method
Submit the transaction to the blockchain using method - you will get the txn hash back if everything goes as expected
As the transaction proceeds, the user should be updated with the latest status. Use method to get the same
Use to get the chains supported by skip - - this has information such as chainId
, chainName
, logoUri
, chainType
, etc...
Get the list of supported tokens using - this has information such as name, symbol
, denom
, logoUri
, trace
, originChainId
Get the route/quote using the hook - this gives you the route for the selected amount and Source Chain/Token and Destination Chain/Token pair
When user wants to proceed with the swap, use the route response and other data to get the transaction messages using hook
To show your user the route, you can use hook which accepts the route object and returns an object which you can easily use to display the route to the user
Submit the transaction to the blockchain using method - you will get the txn hash back if everything goes as expected
As the transaction proceeds, the user should be updated with the latest status. Use method to get the same