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@latest

New Views

1. Swaps: This views allows both cosmos and cross-chain (evm/solana -> cosmos and vice-versa) swaps and bridge.

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

3. IBCTransfer: Allows users to transfer tokens from one wallet address to another, supports same chain and different chains transfers.

4. FiatOnRamp: Allows users to buy Crypto with Fiat Currencies, supports 27 major fiat currencies.

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. You can replace it with FiatOnRamp or FiatOnRampModal.

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

We have removed FiatOnRampTab.

TransferTab

TransferTab in v0 allowed users to buy crypto using fiat currencies. You can replace it with IBCTransfer or IBCTransferModal.

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

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.