Build a Live App

In this tutorial, we will build a Live App that talks to Ledger Wallet through the Wallet API client. By the end, we will have a Next.js app that lists accounts, signs an Ethereum transaction, and loads in Ledger Wallet from a local manifest.

About Live Apps describes where this app sits. We follow one path: the client, then a local manifest.

1. Set up the environment

Let’s install the tools for the rest of the tutorial. We need Node.js, a Next.js app, and the Wallet API simulator.

Install Node.js

Install the current Node.js LTS release. That install includes npm. npx create-next-app needs both.

Scaffold a Next.js app

From the directory where the project should live, run:

npx create-next-app my-app --typescript

The command creates a TypeScript Next.js project named my-app. We should see that directory, with a package.json, when the command finishes.

Install the simulator

The Wallet API simulator answers Wallet API calls without Ledger Wallet running. In my-app, run:

npm install @ledgerhq/wallet-api-simulator

package.json now lists @ledgerhq/wallet-api-simulator. Profiles and mock responses are described in the simulator introduction.

2. Create the project structure

Let’s add the folders the later pages import. The tree below is the one those pages use:

• src
  • components
    • Header.tsx
    • Footer.tsx
  • hooks
    • useAccounts.tsx
    • useSignTransaction.tsx
  • utils
  • assets
  • App.tsx
• public
• package.json
• tsconfig.json

• /src: This directory contains all your TypeScript/JavaScript files.

• /components: This is where you’ll place your React components.

• /hooks: This will hold custom hooks, including those for interacting with the Ledger Wallet API.

• /utils: Any utility functions or constant values can be stored here.

• /assets: Place images, icons, and other static files in this directory.

• App.tsx: This is the main file where your React application is bootstrapped.

• /public: This directory contains public assets like the index.html file.

• package.json: This file holds various metadata relevant to your project.

• tsconfig.json: This is your TypeScript configuration file if you’re using TypeScript.

We have a Next.js app and a place for the Wallet API hooks. Next: Configure the Wallet API.