⚛️
Leap Cosmos
  • Introduction
  • for dapps: Connect to Leap
    • Introduction
    • Optimizing Wallet Connectivity for Cosmos Dapps
    • Add Leap to existing Keplr integration
    • Add Leap to a new dapp
    • Suggest chain : Add Leap to a non-native chain
    • Add Leap to a Secret dapp
    • Wallet Connect
    • Wallet Adapters
      • Cosmos Kit
      • Shuttle
    • API Reference
  • for chains: integrate into Leap
    • Introduction
  • for SEI dapps: Connect to Compass
    • Connect to Compass
  • FOR SEI EVM DAPPS: CONNECT TO COMPASS
    • Connect to Compass
    • Supported RPC methods
  • Leap Metamask Snap
    • Introduction
    • Integrating Snaps
      • Metamask Cosmos Snap
      • Cosmos Snap Provider
      • Cosmos Kit
  • Embedded Wallet SDK
    • Embedded Wallet SDK React
    • Embedded Wallet Provider
    • Migration
    • Usage without UI
  • Elements
    • Introduction
    • Get Started
    • Integrate via CDN / Script Tag
    • Integrate as an Embed
    • Components
      • Aggregated Swaps
      • IBC Only Swaps
      • Fiat On-ramp
      • IBC Transfer
      • Multi View
    • Theming
      • Using CSS Variables
      • Advanced Customisations
    • Use Elements Without the UI
    • Tab Config
    • Using Skip API Key
  • Cosmos Nodes
    • Fallback Falooda : Node Fallback System
    • (Coming Soon) Blockchain Node Setup Guide
    • (Coming Soon) Monitoring Blockchain Node Performance
  • RESOURCES
    • Leap Assets
Powered by GitBook
On this page
  • Setup Script and Stylesheet
  • Render Elements
  • The mountElements method
  • Typescript Support
  • Theme Customisations
  1. Elements

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

  • 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

  • swapVenues

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

    • optional - defaults to all swap venues

  • enableSmartSwap

    • boolean

    • optional - defaults to true

  • walletConnectOptions

    • optional

    • Wallet Connect (WC) options

  • 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

PreviousGet StartedNextIntegrate as an Embed

Last updated 5 months ago

Aggregated Swaps (Swaps + Bridge) -

IBC Only Swaps -

Fiat On-ramp -

IBC Transfers -

restrict bridges to the specified array -

restrict swap venues to the specified array -

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

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

link
link
link
link
reference
reference
reference
SignClientTypes.Options
CapsuleConfig
theming documentation