⚛️
Leap Cosmos
  • Introduction
  • for dapps: Connect to Leap
    • Introduction
    • Optimizing Wallet Connectivity for Cosmos Dapps
    • Add Leap to existing Keplr integration
    • Add Leap to a new dapp
    • Suggest chain : Add Leap to a non-native chain
    • Add Leap to a Secret dapp
    • Wallet Connect
    • Wallet Adapters
      • Cosmos Kit
      • Shuttle
    • API Reference
  • for chains: integrate into Leap
    • Introduction
  • for SEI dapps: Connect to Compass
    • Connect to Compass
  • FOR SEI EVM DAPPS: CONNECT TO COMPASS
    • Connect to Compass
    • Supported RPC methods
  • Leap Metamask Snap
    • Introduction
    • Integrating Snaps
      • Metamask Cosmos Snap
      • Cosmos Snap Provider
      • Cosmos Kit
  • Embedded Wallet SDK
    • Embedded Wallet SDK React
    • Embedded Wallet Provider
    • Migration
    • Usage without UI
  • Elements
    • Introduction
    • Get Started
    • Integrate via CDN / Script Tag
    • Integrate as an Embed
    • Components
      • Aggregated Swaps
      • IBC Only Swaps
      • Fiat On-ramp
      • IBC Transfer
      • Multi View
    • Theming
      • Using CSS Variables
      • Advanced Customisations
    • Use Elements Without the UI
    • Tab Config
    • Using Skip API Key
  • Cosmos Nodes
    • Fallback Falooda : Node Fallback System
    • (Coming Soon) Blockchain Node Setup Guide
    • (Coming Soon) Monitoring Blockchain Node Performance
  • RESOURCES
    • Leap Assets
Powered by GitBook
On this page
  • Elements SDK Overview
  • Using without React
  • Show TO and FROM Chains and Tokens
  • Get Swap Quotes
  • Get Transaction Messages
  • Sign and Broadcast the Transaction(s)
  • Track the Transaction(s)
  • Using with React
  • Show TO and FROM Chains and Tokens
  • Get Swap Quotes
  • Get Transaction Messages
  • Show Swap Summary
  • Sign and Broadcast the Transaction(s)
  • Track the Transaction(s)
  1. Elements

Use Elements Without the UI

PreviousAdvanced CustomisationsNextTab Config

Last updated 1 year ago

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

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 Swap Quotes

Get Transaction Messages

Sign and Broadcast the Transaction(s)

Track the Transaction(s)

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

Get Swap Quotes

Get Transaction Messages

Show Swap Summary

Sign and Broadcast the Transaction(s)

Track the Transaction(s)

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

https://leapwallet.github.io/elements/
https://github.com/leapwallet/elements-vue-example
SkipAPI.getSupportedChains
SkipAPI.getSupportedAssetsForChain
SkipAPI.getRoute
SkipAPI.getMessages
SkipAPI.submitTransaction
SkipAPI.getTxnStatus
useSkipSupportedChains
useSkipAssets
useRoute
useMessages
useTransactions
SkipAPI.submitTransaction
SkipAPI.getTxnStatus
Elements Architecture