Skip to main content

Connect to Keplr

Integrating your dApp with Keplr allows you to provide seamless interactions for your users. To meet various development needs, Keplr offers flexible integration methods, as detailed below:

Direct Integration​

The most straightforward approach to connect your dApp to Keplr is by utilizing the provider that Keplr injects directly into your web application. This provider is globally available at window.keplr. With this integration, you'll always have access to the latest functionality provided by Keplr.

How to Detect Keplr​

To check if Keplr is installed on a user's device, you can verify the presence of window.keplr. If window.keplr is undefined after the document.load event, Keplr is not installed. Below are some examples of how to wait for the load event to check the status.

Register a function to window.onload:

window.onload = async () => {
  if (!window.keplr) {
    alert("Please install the Keplr extension.");
    return;
  }

  const keplr = window.keplr;

  const chainId = "cosmoshub-4";
  await keplr.enable(chainId);
};

Or track the document's ready state through the document event listener:

async getKeplr(): Promise<Keplr | undefined> {
    if (window.keplr) {
        return window.keplr;
    }

    if (document.readyState === "complete") {
        return window.keplr;
    }

    return new Promise((resolve) => {
        const documentStateChange = (event: Event) => {
            if (
                event.target &&
                (event.target as Document).readyState === "complete"
            ) {
                resolve(window.keplr);
                document.removeEventListener("readystatechange", documentStateChange);
            }
        };

        document.addEventListener("readystatechange", documentStateChange);
    });
}

Keplr Wallet SDK​

For a more modular approach, you can use the Keplr client by using the JavaScript SDK. This allows you to connect your dApp to Keplr by installing the SDK via package managers. The client provides an easy-to-use interface for interacting with Keplr, making integration simpler and more scalable for complex projects.

Installation Steps​

  1. Install @keplr-wallet/provider-extension via package managers.

    npm i @keplr-wallet/provider-extension

  2. Import the SDK into your application.

    import { Keplr } from "@keplr-wallet/provider-extension";

  3. Initialize the SDK.

    export const getKeplrFromProvider = async () => {
      return await Keplr.getKeplr();
    };

Keplr Fallback​

Multiple wallets may inject a window.keplr object into the browser, making it difficult to determine whether the real Keplr is available.

To address this, use KeplrFallback as the Keplr instance. This utility, provided in Keplr Wallet SDK, first attempts to route requests through the SDK and defaults to window.keplr if neccessary. It ensures secure wallet interactions while enabling developers to detect and handle cases where another wallet might be mimicking Keplr.

import { KeplrFallback } from "@keplr-wallet/provider-extension";
import { Keplr } from "@keplr-wallet/types";

export const getKeplr = (): Keplr | undefined => {
  if (typeof window === "undefined") {
    return undefined;
  }

  if ((window as any).keplr) {
    return new KeplrFallback(() => {
      // Handler called when real Keplr is not installed.
      // Show appropriate warning to users.
    });
  }

  return undefined;
};
  • The handler function passed to the constructor provides an opportunity to warn users when they're not interacting with the real Keplr wallet.
  • From a user experience perspective, this approach ensures that requests are directed to Keplr when it is installed. If Keplr is unavailable but another compatible wallet is present, the request is seamlessly routed there, allowing users to interact with their preferred wallet without disruption.