Configuring the Ledger Services Kit

After installing the necessary packages for the Ledger Services Kit, the next step is to set up the appropriate configuration through a layer that will call “Transport”. This involves creating a transport provider to enable communication with the Ledger Services Kit.

We’ll achieve this by creating a file named TransportProvider.tsx. This file contains a particular component that uses the Ledger Services Kit client to create a communication transport HOC (Higher Order Component).

This is what this looks like:

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;

Let’s break it down:

• We import the necessary components and types from the Ledger Services Kit packages.
• The TransportProvider function component is created. This component receives its children as a prop and renders them within the WalletAPIProvider.
• The getWalletAPITransport function provides a transport method for the WalletAPIProvider. It checks if the window object is defined (which it wouldn’t be during server-side rendering) and returns an empty transport object if it’s not.
• If the window object is available, it initialises a WindowMessageTransport, connects it, and returns it as the transport method. This allows the app to communicate with the Ledger Services Kit through window messages.
• The WalletAPIProvider is provided with the transport object returned by getWalletAPITransport. This setup allows the rest of your app (represented by {children}) to communicate with the Ledger Services Kit.

After creating this TransportProvider.tsx file, you need to wrap your <App /> with the TransportProvider in your root file. This would typically look like the following:

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, the entire application can access Ledger Services Kit and communicate with it via the TransportProvider.

You are now almost ready to use the Ledger Services Kit’s functionalities. The last step is to make your Live App ready to be registered by creating your manifest. You can head to this section to learn about how to create your manifest