Integrate via CDN / Script Tag

To get more options for configuring Elements on your dApp you can integrate it using JS and the script tag.

Usually when you include script tags in your HTML, it's in the document's head. But we recommend adding this script tag in the document's body.

Setup Script and Stylesheet

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Your Superb dApp</title>
  </head>
  <body>
    <!-- Your dApp's markup -->
    <div>
      Your dApp Here
    </div>

    <!-- Add the leap-ui class to a parent -->
    <div class="leap-ui" id="leap-elements-container"></div>
    <!-- Add this stylesheet to load styles -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/@leapwallet/elements@latest/dist/umd/style.css"
    />
    <!-- Add this script to load elements -->
    <script
      defer
      src="https://unpkg.com/@leapwallet/elements@latest/dist/umd/main.js"
    ></script>
  </body>
</html>

If you want to pin down Elements to a specific version you can replace the latest in the URLs with the version number for instance 1.4.1

Render Elements

The script creates a property called LeapElements on the window object.

Know when window.LeapElements is ready

Since elements served via a CDN is a 3MB JS file (gzipped + minified) it can take a while to load. Due to this the dApp may try to access window.LeapElements before the script has loaded.

To combat this issue, elements fires @leapwallet/elements:load event when it's ready to be used.

let isElementsReady = false

// 1. Check if window.LeapElements is defined
if (window.LeapElements !== undefined) {
  isElementsReady = true
}

// 2. Add an event listener to get notified when Elements is ready to be used
window.addEventListener('@leapwallet/elements:load', () => {
  isElementsReady = true
})

Calling the mountElements method

Once Elements has loaded, you can call the LeapElements.mountElements method to render the component of your choice. Let's take a deeper look into the method

The mountElements method

Here's a minimal example of how to render the Fiat On-ramp component, with EUR as the source currency and NTRN as the destination token as defaults

const { mountElements, WalletType, BRIDGES } = window.LeapElements;

// to render the elements component, call the mountElements method
mountElements({
  elementsRoot: "#leap-elements-container",
  connectWallet: () => {},
  connectedWalletType: WalletType.LEAP,
  element: {
    name: "fiat-on-ramp",
    props: {
      title: "Buy NTRN",
      defaultValues: {
        currency: "EUR",
        destinationChainId: "neutron-1",
        destinationAsset: "untrn"
      }
    }
  }
});

It accepts a single object with the following properties -

  • element -

    • required

    • it's an object with the following two properties

      • name

        • It can be one of these - ["multi-view","aggregated-swaps","ibc-swaps","fiat-on-ramp","ibc-transfer"]

      • props

        • Pass in props based on the element you are rendering

          • Multi View - link

          • Aggregated Swaps (Swaps + Bridge) - link

          • IBC Only Swaps - link

          • Fiat On-ramp - link

          • IBC Transfers - link

  • elementsRoot

    • string

    • optional - defaults to body

    • CSS selector for the DOM element where LeapElements will be mounted

  • connectWallet

    • () => void

    • required

    • a callback to trigger the wallet connection flow of your dApp

  • connectedWalletType

    • WalletType | undefined

    • required - if no wallet is connected, it should be undefined

    • the wallet that is currently connected to your dApp, it will be used by elements to get addresses, sign transactions, etc...

  • primaryChainId

    • string

    • required

    • The primary chain your dApp's user will connect to

  • skipClientId

    • string

    • optional

    • specify a client ID to differentiate between various clients

    • RECOMMENDED to set

  • leapIntegratorId

    • string

    • optional

    • specify an integrator ID - you can get this from contact+elements@leapwallet.io

    • RECOMMENDED to set

  • enableCaching

    • boolean

    • optional - defaults to true

    • enable data caching which gives a substantially faster experience to users

  • bridges

    • BRIDGES[]

    • optional - defaults to all bridges

    • restrict bridges to the specified array - reference

  • swapVenues

    • { chain_id: string; name: string }[]

    • optional - defaults to all swap venues

    • restrict swap venues to the specified array - reference

  • enableSmartSwap

    • boolean

    • optional - defaults to true

    • allow smart swaps - gives better rates, low fees and reliable routes - reference

  • walletConnectOptions

  • capsuleConfig

Typescript Support

If you're using TS, you can install @leapwallet/elements-umd-types from NPM and import it in your project.

yarn add --save-dev @leapwallet/elements-umd-types

It will define the LeapElements object on window with all relevant properties and enable auto-complete.

It will also expose all types you might need!

import { WalletType, TabsConfig } from '@leapwallet/elements-umd-types'

Theme Customisations

You can refer to our theming documentation for more information about theme customisations.

PreviousGet StartedNextIntegrate as an Embed

Last updated