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

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 Suggest Chain 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 Leap Assets for the wallet name, logo, and redirection link in case Leap Wallet is not installed

Last updated