# 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