⚛️
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
  • Basic Usage
  • CosmJS example
  1. for dapps: Connect to Leap

Add Leap to a new dapp

If you do not have a Connect Wallet method yet and you want to start a fresh implementation, this is how you can proceed

PreviousAdd Leap to existing Keplr integrationNextSuggest chain : Add Leap to a non-native chain

Last updated 2 years ago

Assuming you have built out your own Connect to Leap UI component, the handling process could be as follows :

  • If window.leap is available, you can access Leap APIs using the window.leap object that is injected into the web app on page load

  • If window.leap is not available, use our dynamic link instead which will redirect users to an Install page on the Desktop browser and to the dapp page on Leap mobile app on the mobile browser

If the chain involved is not natively supported on Leap, then you can use the implementation

Basic Usage

  • Check if the leap provider is available


if(!window.leap){
  console.log("leap wallet not installed")
}else{
  // initialise the app
}
  • Get users account for a chain using chain id


async function getKey(){
  const key = await window.leap.getKey('cosmoshub-4)
  console.log("cosmoshub address", key.bech32Address)
}
  • Add a listener to track account changes within the wallet

window.addEventListener('leap_keystorechange', getKey)

CosmJS example

Below is an example implementation that you can follow

import { SigningStargateClient } from '@cosmjs/cosmwasm-stargate'
import { GasPrice } from '@cosmjs/stargate'

await window.leap.enable(chainId);

const offlineSigner = window.leap.getOfflineSignerAuto(chainId);
const accounts = await offlineSigner.getAccounts();
const rpcUrl = "" // Replace with a RPC URL for the given chainId
const stargateClient = await SigningStargateClient.connectWithSigner(
  rpcUrl,
  offlineSigner,
  {
    gasPrice: GasPrice.fromString("0.0025ujuno"),
  }
)

Refer to for the wallet name, logo, and redirection link in case Leap Wallet is not installed

Suggest Chain
Leap Assets