4. Configuring the Ledger Services Kit

To interact with Ledger Live, you’ll need to configure the Ledger Services Kit. The first step is to install the necessary packages, and then set up the appropriate configuration through a transport layer named “Transport”. This transport layer will enable communication with the Ledger Services Kit.

• Installing Packages: Install the necessary packages using npm:

  npmpnpmyarnbun

  npm install @ledgerhq/wallet-api-client @ledgerhq/wallet-api-client-react

• Creating Transport Provider: Create a file named TransportProvider.tsx. This file will contain a component that utilizes the Ledger Services Kit client to create a communication transport Higher Order Component (HOC).

  // src/TransportProvider.tsx
  import { WalletAPIProvider } from "@ledgerhq/wallet-api-client-react";
  import { Transport, WindowMessageTransport } from "@ledgerhq/wallet-api-client";
   
  function TransportProvider({ children }) {
    function getWalletAPITransport(): Transport {
      if (typeof window === "undefined") {
        return {
          onMessage: undefined,
          send: () => {}
        };
      }
   
      const transport = new WindowMessageTransport();
      transport.connect();
      return transport;
    }
   
    const transport = getWalletAPITransport();
   
    return (
      <WalletAPIProvider transport={transport}>{children}</WalletAPIProvider>
    );
  }
   
  export default TransportProvider;

• Wrapping App with TransportProvider: In your root file, wrap your <App /> with the TransportProvider:

  // src/index.tsx or src/index.js
  import React from 'react';
  import ReactDOM from 'react-dom';
  import App from './App';
  import TransportProvider from './TransportProvider';
   
  ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
    <React.StrictMode>
      <TransportProvider>
        <App />
      </TransportProvider>
    </React.StrictMode>
  );

With this setup, your entire application can access the Ledger Services Kit and communicate with it via the TransportProvider.

5. Setting Up The Simulator

During the development and testing phases, the Ledger Services Kit simulator can help you develop without requiring to run Ledger Live in parallel. You can modify your TransportProvider.tsx file to use the getSimulatorTransport function provided by the simulator library.

// src/TransportProvider.tsx
import { WalletAPIProvider } from "@ledgerhq/wallet-api-client-react";
import { getSimulatorTransport, profiles } from "@ledgerhq/wallet-api-simulator";
import type { Transport } from "@ledgerhq/wallet-api-core";
 
function TransportProvider({ children }) {
  function getWalletAPITransport(): Transport {
    if (typeof window === "undefined") {
      return {
        onMessage: undefined,
        send: () => {},
      };
    }
 
    // Use Simulator transport
    const transport = getSimulatorTransport(profiles.STANDARD);
 
    return transport;
  }
 
  const transport = getWalletAPITransport();
 
  return (
    <WalletAPIProvider transport={transport}>{children}</WalletAPIProvider>
  );
}
 
export default TransportProvider;