Implementation | Developers

Implementation

Estimated reading time: 7 minutes

Before you start

Types: Custom or Standard Library

To get started integrating the Ledger button into your DApp choose either:

  • Custom: Install @ledgerhq/connect-kit-loader using Yarn or NPM to use the Ledger Connect Kit API

  • Library: Use a popular wrapper library such as, Web3Modal, or (COMING SOON) Web3-react, Web3-Onboard, wagmi or RainbowKit to easily integrate multiple wallets.

UX Guidelines

  • If you already have a “Connect your App” implementation or a WalletConnect Ledger button, remove them so there is only the Ledger Connect Button
  • Label the connection as “Ledger” for clarity to the users
  • In this folder you will find Ledger’s icon to display in your app
  • Have Ledger appear above the fold for users to discover without clicking on “Show More”

Custom Integration

Setup

You just have to add the @ledgerhq/connect-kit-loader package as a dependency using your preferred package manager.

Using yarn as an example

yarn add @ledgerhq/connect-kit-loader

and use it as below

import { loadConnectKit } from '@ledgerhq/connect-kit-loader'

// ...
const connectKit = await loadConnectKit()

If you are using classes you can get the promise on the class constructor and its value where you need it

import { loadConnectKit } from '@ledgerhq/connect-kit-loader'

export class LedgerConnector {
  private provider: any
  private connectKitPromise: Promise<LedgerConnectKit>

  constructor() {
    super()

    this.connectKitPromise = loadConnectKit()
  }

  public async connect(): Promise<Connector> {
    if (!this.provider) {
      // load Connect Kit, check support and show a UI modal if not supported
      const connectKit = await this.connectKitPromise

API functions

Connect Kit provides three functions, enableDebugLogs, checkSupport and getProvider.

enableDebugLogs

Description

Enables debug messages on the console in case you need to diagnose a possible problem.

Once Connect Kit is loaded you can call it from the browser’s developer tools console with window.ledgerConnectKit.enableDebugLogs() and call the other Connect Kit functions to see the messages. Just reload the DApp to disable them.

checkSupport

Description

Returns the level of support for Ledger Connect on the user’s platform, and shows a UI to guide the user.

  • Case A - If Ledger Connect is Compatible & Installed & Enabled (by the user, once and for all), you will just get the response and no UI will be shown.

Otherwise (when Ledger Connect is not Compatible/Installed/Enabled), one of these modals will be shown on the user’s platform:

  • Case B - if the user’s platform supports the Ledger Connect but it is not Installed or Enabled; a link will be shown to guide the user to Install and Enable the Ledger Connect;
  • Cases C/D - Connect with Ledger Live option. When the user’s platform does not support Ledger Connect you will connect via Ledger Live Mobile or Desktop.
Parameters
type CheckSupportOptions = {
  providerType: SupportedProviders;
  chainId?: ConnectSupportedChains;
  bridge?: string;
  infuraId?: string;
  rpc: { [chainId: number]: string; };
}
Returns
type ConnectSupport = type CheckSupportResult = {
  isLedgerConnectSupported?: boolean;
  isLedgerConnectEnabled?: boolean;
  isChainIdSupported?: boolean;
  providerImplementation: 'LedgerConnect' | 'WalletConnect';
}

getProvider

Description

Based on the options passed to checkSupport it returns a promise to a Ledger Connect Ethereum provider or a WalletConnect provider.

Returns
Promise<EthereumProvider | WalletConnetProvider>
Example

An example function using the Ledger Connect Kit and ethers.js, called when pressing the connect button, written in React.

setProvider, setLibrary, setAccount, setChainId and setError are just simple useState functions to store the app state.

// JSX code
<Button onClick={() => connectWallet()}>Connect With Ledger</Button>
// click handler function
const connectWallet = async () => {
  try {
    const connectKit = await loadConnectKit();
    const checkSupportResult = connectKit.checkSupport({
      chainId: 1,
      providerType: SupportedProviders.Ethereum,
      rpc: {
        1: "https://cloudflare-eth.com/", // Mainnet
        137: "https://polygon-rpc.com/", // Polygon
      }
    });
    console.log('checkSupportResult is', checkSupportResult);
    const provider = await connectKit.getProvider();

    const library = new ethers.providers.Web3Provider(provider);
    const accounts = await library.listAccounts();
    const network = await library.getNetwork();

    setProvider(provider);
    setLibrary(library);

    if (accounts) setAccount(accounts[0]);
    setChainId(network.chainId);
  } catch (error) {
    setError(error);
  }
}

Standard library Integration

Web3Modal

You just have to add the packages using your preferred package manager. Using yarn as an example:

yarn add @ledgerhq/connect-kit-loader web3modal

and use it as below

import { loadConnectKit } from '@ledgerhq/connect-kit-loader';
import { ethers } from "ethers";
import Web3Modal from "web3modal";
 
const providerOptions = {
 ledger: {
   package: loadConnectKit,  // required
   chainId: 1,               // defaults to 1
   infuraId: "INFURA_ID"     // required if no rpc
   rpc: {                    // required if no infuraId
     1: "INSERT_MAINNET_RPC_URL",
     137: "INSERT_POLYGON_RPC_URL",
     // ...
   }
 }
};
 
const web3Modal = new Web3Modal({
  providerOptions // required
});

An example function using the Ledger Connect Kit, Web3Modal and ethers.js, that would be called when pressing the connect button, written in React.

setProvider, setLibrary, setAccount, setChainId and setError are just simple useState functions to keep the app state.

 const connectWallet = async () => {
   try {
     const provider = await web3Modal.connect();
     const library = new ethers.providers.Web3Provider(provider);
     const accounts = await library.listAccounts();
     const network = await library.getNetwork();
     setProvider(provider);
     setLibrary(library);
     if (accounts) setAccount(accounts[0]);
     setChainId(network.chainId);
   } catch (error) {
     setError(error);
   }
 };

JSX code

<Button onClick={connectWallet}>Connect Wallet</Button>

wagmi

Coming soon

Web3-React

Coming soon

Web3-Onboard

Coming soon

RainbowKit

Coming soon


Did you find this page helpful?


How would you improve this page for developers?



Button behaviour
Glossary
Getting Started
Theme Features
Customization

Ledger Connect