# 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 .

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:

```sh npm2yarn
npm install @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 . This greatly simplifies development and testing by removing the dependency on the  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`).

```jsx
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  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  API via the Simulator.

## Step 3 — Wrap your application

Wrap your root `<App />` with `TransportProvider`:

```jsx
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  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](../examples/use-live-app)