Leap Elements: Simplifying UX for Interchain dApps

Leap Wallet
Interchain Ecosystem Blog
5 min readMar 22, 2024

--

Leap Elements: One-Click Swaps and Bridging, for Cosmos dApps

Introduction

At last count, the interchain had more than 300 dApps, spread across the various connected ecosystems. From trading, to DeFi, to NFTs, all the way to niches like betting & music. There’s something for everyone on the interchain.

But how easy is it to actually use them?

Take Stargaze for example. It is the most popular NFT platform on the interchain. Stargaze is home to the biggest blue-chip collections such as BadKids, Pixel Wizards, and Punks, among others. It definitely attracts a lot of attention from users across ecosystems, both within & outside the interchain. However, to buy anything on Stargaze users need $STARS, the chain’s native token. For a user coming in from a different ecosystem, such as Ethereum or Solana, this simple transaction is almost like rocket science.

Swap Ethereum for wETH on an Ethereum DEX → Bridge wETH to Osmosis through the Osmosis dApp, or some other DEX → Swap wETH to STARS on Osmosis → Use your wallet to transfer STARS to Stargaze chain. (Thankfully, Osmosis lets you pay for gas fees through a range of tokens, if you were onboarding through another chain, you’d also have to figure out how to get the gas token of the intermediate chains!)

In short, interchain dApps are at a big risk of losing interested users solely due to complicated onboarding.

This is where Leap Elements comes in.

Meet Leap Elements

Leap Elements is a swaps and bridging SDK built by the Leap team that helps simplify the user onboarding journey on interchain dApps.

By seamlessly integrating various providers for Cosmos swaps, cross-chain swaps & fiat on-ramps, we allow users to acquire necessary tokens to get started with any dApp. The best part? All of this happens on the dApp’s frontend — no new tabs or wallet popups needed!

Screenshot of Elements on Stargaze
Elements integration live on Stargaze

Currently, Elements has the following functionalities.

  • IBC Swaps (Powered by Skip): Convert assets on one Cosmos SDK chain to any other asset on any other Cosmos SDK chain.
  • IBC Transfers: Move assets from one chain to any other, without worrying about usability.
  • Cross-chain Swaps (Powered by Skip & Squid): Swap top assets such as ETH, SOL, BNB & more to acquire Cosmos tokens.
  • Bridge USDC (CCTP): Bridge USDC from Ethereum to Noble, & then use it on any supported Cosmos SDK chain.
  • Fiat On-ramp (Powered by Kado): With support for more than 20 currencies, the fiat on-ramp is the easiest way for new users to start using Cosmos tokens.

With all of these features, dApps can enable seamless onboarding for various user bases. From the crypto curious, to ecosystem explorers, Leap Elements makes it easier for everyone to get into Cosmos.

What do dApps get?

For dApps, Leap Elements offers the three things that are crucial to building a great user experience: speed, reliability, & customizability.

We have built Leap Elements as a plug-n-play widget, so it can be easily integrated into any React-based dApp. For most developers, integrating Leap Elements will take less than 30 minutes. We want devs to focus more on building their dApp’s USPs & exploring fun new concepts, while we take care of interchain nitty gritties.

Leap Elements is supported by top technical providers, including Squid, Skip, and Kado among others. Every feature within Elements has been stress-tested for various edgecases & doomsday scenarios by both Leap & our technical partners. This means devs can rest easy.

dApps want to offer a unique experience to their users, & Leap Elements supports that! The Elements SDK is customizable to the max. Devs can enable, disable, or finetune any feature on offer. For example, a dApp can choose to use Elements solely for enabling one-way cross-chain swaps between a single asset pair. Further, the UI can be customised to completely fit the theme of the dApp.

With constant updates & support for more tech libraries in the pipeline, Leap Elements is built for the builders!

The Leap Elements team actively helps out wherever assistance is needed, offering ongoing support to all our dApp customers.

You can learn more about the Elements tech stack & dev tooling here: docs.leapwallet.io/cosmos/elements/

Elements on the Interchain

Screenshot of Elements on Stride
Elements integration live on Stride

Quite a few top dApps have already integrated Leap Elements.

Stride: Stride currently uses Leap Elements to enable ETH → stTIA swaps. This has allowed them to tap into cross-chain liquidity from Ethereum users interested in modularity & liquid staking. More routes are in the works!

https://app.stride.zone/?chain=TIA

Stargaze: The home of interchain NFTs utilizes Elements for all their onboarding needs. From swapping ETH for STARS, to enabling NFT purchase using USDC. We’ve also helped with some additional customisations to provide users with quick access to the most popular options.

https://www.stargaze.zone/

Akash: One of the major friction points while deploying to Akash used to be the $AKT requirement. With Leap Elements, this is no longer the case! Akash utilises Elements to enable IBC swaps from Cosmos tokens to $AKT.

https://deploy.cloudmos.io/get-started

OmniFlix: Elements is currently live on OmniFlix TV, the entertainment & video hub. By using Leap Elements, OmniFlix lets users tip their favourite creators using any token in their wallet.

https://omniflix.tv/interactiveVideos

You can view all our dApp partners here: leapwallet.io/elements

Leap Elements, for Leap

Wondering if we use Leap Elements ourselves? Well, of course we do! Currently, Leap Elements powers IBC swaps, bridging, & fiat on-ramps across our products.

In fact, our recently released in-wallet swaps is built on top of Elements. To date, it has enabled more than 20k swaps.

To get a glimpse of Leap Elements in action, you can simply use the Leapboard to bridge, swap, or transfer.

So, are you ready to take your dApp’s UX to the next level?

Here are some resources to help you understand Elements in detail

Live demo: cosmos.leapwallet.io/elements-demo

Product information & partners: leapwallet.io/elements

Documentation: docs.leapwallet.io/cosmos/elements/

Together we can make the interchain easier to use. For everyone who is here, and everyone who will be.

Reach out to the Leap Team to understand how Elements can elevate your dApp.

--

--