Migration from v0

Let's move to the latest version of elements for the best-in-class UX

New SDK Version

yarn add @leapwallet/elements@1.0.0

New Views

In v1.0.0 we have added only two views

1. Swaps: This views allows both cosmos and cross-chain (evm -> cosmos) swaps

2. IBCSwaps: This is a subset of Swaps and allow only cosmos swaps

We're coming up with the revamped Send/Transfer and FiatOnRamp views.

IBCSwaps won't have any additional code for EVM (wallet connections, balances, etc...) like the Swaps component.

Tracking High Level Swaps Data

If you'd like to track high level data such as volume of swaps, you can set a custom client ID, using which you can get data from Skip.

import { setSkipAPIClientID } from '@leapwallet/elements'

// Call it in top level code
setSkipAPIClientID(`elements-${project-name}`)

Preferred client id format is"elements-<project-name>" so that it makes our internal operations easier while asking for data from Skip, but you can put any string value there.

Migrating useInitCachingLayer

We have removed the useInitCachingLayer hook and replaced it with the initCachingLayer method that you can call in your top level-code.

import { initCachingLayer, AsyncIDBStorage } from '@leapwallet/elements'

// call it in top level code or put it inside a useEffect - your choice
initCachingLayer(AsyncIDBStorage)

Read more about it here.

Migrating Tabs from v0

SwapsTab

SwapsTab component in v0 encompassed IBC Swaps. You can replace it with IBCSwaps or IBCSwapsModal component. It supports swaps across the most popular chains in the cosmos ecosystem.

We still support all the props, but we've modified them a bit for a better API structure. Please check the props for IBCSwaps and IBCSwapsModal.

We have removed SwapsTab

CrossChainSwapsTab

CrossChainSwapsTab in v0 encompassed EVM -> Cosmos Swaps. You can replace it with Swaps or SwapsModal component. The swaps component supports both EVM -> Cosmos and Cosmos -> Cosmos swaps.

We still support all the props, but we've modified them a bit for a better API structure. Please check the props for Swaps and SwapsModal.

We have removed CrossChainSwapsTab

FiatOnRampTab

FiatOnRampTab in v0 allowed users to buy crypto using fiat currencies. The v1 component is still in the works, we plan to release it by the end of April 2024.

We plan to support all the existing props, but we might restructure them.

We have removed FiatOnRampTab

TransferTab

TransferTab in v0 allowed users to buy crypto using fiat currencies. The v1 component is still in the works, we plan to release it by the end of April 2024.

We plan to support all the existing props, but we might restructure them.

We have removed TransferTab

Migrating LiquidityView and LiquidityModal from v0

We have not shipped a liquidity view / liquidity modal for v1.x yet. But we plan to ship this by mid May. We plan to support all existing props, but we might restructure them.

We have removed LiquidityView and LiquidityModal

Migrating Theming

We have moved away from theming in javascript, to theming using CSS variables, aka CSS custom properties. Now it's easier than ever to customise elements to match your dApps' styles/theme.

Please add leap-ui class to a parent element of any Elements component you use.

Please refer to the theming section for this.