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 [email protected]
- 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
- SignClientTypes.Options
- optional
- Wallet Connect (WC) options
capsuleConfig
- CapsuleConfig
- optional
- Social Login options
enableGoFast
- boolean
- Default - true
- enables skip's go fast transfer protocol

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 Started NextIntegrate as an Embed

Last updated 1 year ago