Use Wallet API Simulator to develop a Live App

Overview

This guide shows how to use the @ledgerhq/wallet-api-simulator to develop and test your Live App from any browser, without launching it inside Ledger Wallet.

Outcome:

• Install the Simulator
• Configure your app to connect to the Simulator via TransportProvider
• Run your Live App in a browser

Prerequisites

• A React app (or similar) where you can wrap a root component
• Access to your TransportProvider.tsx (or equivalent) and root file
• Node.js with npm, yarn, or pnpm

Installation

Install the base package with your preferred package manager:

npm install @ledgerhq/wallet-api-simulator

pnpm add @ledgerhq/wallet-api-simulator

yarn add @ledgerhq/wallet-api-simulator

bun add @ledgerhq/wallet-api-simulator

Step 1 — Launch Live App from Browser

One of the benefits of using the Simulator is that it allows developers to launch their Live App from any browser, without the need to launch it from within Ledger Wallet. This greatly simplifies development and testing by removing the dependency on the Ledger Wallet application.

Step 2 — Connect to the Simulator

Modify your TransportProvider.tsx to use the Simulator transport. Use the getSimulatorTransport function with a predefined profile (e.g., profiles.STANDARD).

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;

What’s happening:

• We import the necessary components and types from the Ledger Wallet API packages.
• TransportProvider renders its children inside WalletAPIProvider.
• getWalletAPITransport returns a transport for the provider. If window is not available (SSR), it returns an empty transport.
• When window is available, it uses getSimulatorTransport(profiles.STANDARD) to communicate with the Ledger Wallet API via the Simulator.

Step 3 — Wrap your application

Wrap your root <App /> with TransportProvider:

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 the Ledger Wallet API through the Simulator.

Next steps

You are now almost ready to use the Wallet API’s functionalities. The last step is to make your Live App ready to be registered by creating your manifest. Learn how to create your manifest: how to create your manifest