Getting Started

We have released v1.0.0 of Elements with an improved UX and developer API. We recommend you to use v1.x. Here's the migration guide for v0.x users.

We have built Leap Elements SDK as a react library, so it can be easily integrated into any react-based dApp.

Installation

yarn add @leapwallet/elements

Please make sure its added in ^version "Compatible with version" range so that you get latest updates and fixes with future releases

Usage with Nextjs

To make sure elements works with nextjs, you will need to use dynamic imports from nextjs. Here's what you can do -

1. Put everything elements related in a single file and export the component that you want to use

2. Import this component using dynamic import

import dynamic from 'next/dynamic';
import Spinner from './spinner';

const CustomLiquidityModal = dynamic(() => import('./custom-liquidity-modal'), {
  loading: () => (
    <div className="flex min-h-[50vh] w-full items-center justify-center sm:h-full">
      <Spinner color="purple" />
    </div>
  ),
});

const YourDapp = () => {
  return (
    <div>
      {/* ... other components */}
      <CustomLiquidityModal />
    </div>
  )
}

Overview

The library has a few different exports you can use, let's look at them

Liquidity Management

• LiquidityView - a component with different tabs your users can use to manage liquidity

• LiquidityModal - LiquidityView component wrapped in a modal

Individual Tabs

If you want to use individual tabs such as Cosmos Swaps, Cross Chain Swaps or On-Ramp, we also export them from the library. Read more about it here.

UI Customisations

We have made the components in such a way that you can customise the theme to match your dApps's unique style and brand identity. To know more about UI customisations, check out this page.

Type Definitions

We have exposed a lot of types and interfaces from the library as they are used in a lot of props and methods on the components. You can use this page for reference.

One such method is onTxnComplete callback. This is a prop in liquidity management components as well as individual tabs. This callback carries important data that you can use on your dApp, check out this page to learn more.