### 4. **Configuring the Wallet API**

To interact with , you'll need to configure the  API. 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  API.

- **Installing Packages**:
  Install the necessary packages using npm:

  ```sh npm2yarn
  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  API client to create a communication transport Higher Order Component (HOC).

  ```jsx
  // 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`:

  ```jsx
  // 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  API and communicate with it via the `TransportProvider`.

### 5. **Setting Up The Simulator**

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

```jsx
// 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;
```

> **Note:** For more informations regarding the simulator, please checkout out [the
> simulator subsection](../../simulator/introduction)