# 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 . {% hint style="info" %} We have created a simple vuejs project for IBC Only swaps using Elements Core that you can refer to here - {% endhint %} ## Using without React Start with installing the elements core package ```bash 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`](https://leapwallet.github.io/elements/core/classes/SkipAPI.html#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`](https://leapwallet.github.io/elements/core/classes/SkipAPI.html#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`](https://leapwallet.github.io/elements/core/classes/SkipAPI.html#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`](https://leapwallet.github.io/elements/core/classes/SkipAPI.html#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`](https://leapwallet.github.io/elements/core/classes/SkipAPI.html#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`](https://leapwallet.github.io/elements/core/classes/SkipAPI.html#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) ```bash 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`](https://leapwallet.github.io/elements/hooks/functions/useSkipSupportedChains.html) 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`](https://leapwallet.github.io/elements/hooks/functions/useSkipAssets.html) - 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`](https://leapwallet.github.io/elements/hooks/functions/useRoute.html) 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`](https://leapwallet.github.io/elements/hooks/functions/useMessages.html) 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`](https://leapwallet.github.io/elements/hooks/functions/useTransactions.html) 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`](https://leapwallet.github.io/elements/core/classes/SkipAPI.html#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`](https://leapwallet.github.io/elements/core/classes/SkipAPI.html#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 --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.leapwallet.io/cosmos/elements/use-elements-without-the-ui.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.