Get Started in 10 Minutes

Let's get up and running with Leap Elements SDK

Installation

Use your favourite package manager to install the package. At leap, we use yarn.

yarn add @leapwallet/elements@latest

Usage

Before you integrate the components, there's some setup required, as follows -

import {
  ElementsProvider,
  Swaps,
  WalletType,
  initCachingLayer,
  AsyncIDBStorage
} from '@leapwallet/elements'
import '@leapwallet/elements/styles.css'

// optional but recommended - helps elements give a faster experience to the user
initCachingLayer(AsyncIDBStorage)

const YourDapp = ({ connectedWalletName }) => {
  // trigger the dApp's connect wallet flow
  const connectWallet = () => {}
  
  // set this to the currently connected wallet
  const connectedWalletType = WalletType.LEAP

  // .leap-ui is required for the styles to be applied correctly
  return (
    <div className="leap-ui">
      <ElementsProvider
        connectWallet={connectWallet}
        connectedWalletType={connectedWalletType}
      >
        <Swaps />
      </ElementsProvider>
    </div>
  )
}

Theming

We use CSS Custom Properties (aka CSS Variables) for theming. The theme is completely customisable and you can modify it to match your dApps' styles!