React
Simulator

In this guide, we will walk through how to set up the Ledger Wallet API client to connect to a mock environment, called "The Simulator", instead of the real Ledger Live environment. This is especially helpful during development and testing phases, where you might not want to perform actions on the real Ledger Live.

Introduction

The Simulator is a tool provided by Ledger that allows developers to test their application without interacting with the real Ledger Live application. It provides a mock environment with a set of predefined responses for different Wallet API actions. This enables you to develop and test your application safely.

Installing the Simulator

Before proceeding, make sure that you have both the Ledger Wallet API client and the Simulator library installed in your project. You can install the Simulator library using npm:

npm install @ledgerhq/wallet-api-simulator
⚠️

Please Note: The @ledgerhq/wallet-api-simulator package currently only functions with server-side applications. This is due to a dependency requiring process, which is polyfilled inside Server Side Rendering (SSR) frameworks like Next.js or Remix. We are actively working to remove that dependency and will update this guide once it is available.

Launching 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 Live. This greatly simplifies the development and testing process as it removes the dependency on the Ledger Live application.

Connecting to the Simulator

To connect to the Simulator, you will need to modify your TransportProvider.tsx file. Specifically, you need to use the getSimulatorTransport function provided by the Simulator library.

Here’s how the modified TransportProvider.tsx file should look like:

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;

In this file, the getSimulatorTransport function is passed a predefined profile, which is profiles.STANDARD. This sets up the transport to use the Simulator.

Understanding the Simulator Profiles

The Simulator provides different profiles. These profiles are predefined sets of responses for various API actions. For now, we recommend that you use profiles.STANDARD which includes a set of mock accounts, mock currencies, and method handlers.

Mock Accounts and Currencies

The Simulator is set up with a predefined list of mock accounts and currencies. Here’s a brief overview of the mock accounts and currencies used within the simulator:

Mock Accounts

[
  {
    "id": "account-btc-1",
    "name": "Bitcoin 1",
    "address": "address",
    "currency": "bitcoin",
    "balance": "42",
    "spendableBalance": "42",
    "blockHeight": 1,
    "lastSyncDate": "1995-12-17T03:24:00"
  },
  {
    "id": "account-eth-1",
    "name": "Ethereum 1",
    "address": "address",
    "currency": "ethereum",
    "balance": "42",
    "spendableBalance": "42",
    "blockHeight": 1,
    "lastSyncDate": "1995-12-17T03:24:00"
  }
]

Mock Currencies

[
  {
    "type": "CryptoCurrency",
    "id": "bitcoin",
    "ticker": "BTC",
    "name": "Bitcoin",
    "family": "bitcoin",
    "color": "#ffae35",
    "decimals": 8
  },
  {
    "type": "CryptoCurrency",
    "id": "ethereum",
    "ticker": "ETH",
    "name": "Ethereum",
    "family": "ethereum",
    "color": "#0ebdcd",
    "decimals": 18
  }
]

These mock accounts and currencies are used to emulate a realistic Ledger Live environment. You can interact with these accounts and currencies through the API without affecting any real-world assets.

Wrapping Up

By using the Simulator, you can streamline the development and testing of your application with the Ledger Wallet API. This allows you to develop and test your Ledger Live integration in a safe and controlled environment. Don't forget to thoroughly test with real devices and the live environment before releasing your application.