Introduction | Developers

Introduction

Estimated reading time: 3 minutes

In this workshop, you will build an Ethereum DApp using wagmi (We’re All Going to Make It), integrate it into Ledger Live, and test its functionalities. This dAppDApp is a Ledger Guestbook, where users write messages, view existing ones, canand react to them by liking them. They can even tip the author.

This tutorial is based on a Ledger Hackathon project 2022 (and it contains an Easter egg).

Warning
The Tutorial is to be used for development purposes ONLY. It shows how easy it is to create and integrate a DApp into Ledger Live. This initiation is particularly useful to developers who do not yet have a Nano.

This means that:
  • Since there is no physical Nano used, all signing is therefore in a Metamask modal.
  • All operations in the context of this Tutorial MUST be done on Testnet accounts,
  • The “Ledger LiveBeta” used here is a special version, and MUST be used for this Tutorial ONLY.
  • This version of Ledger Live MUST be run in “SANDBOX=2” mode (see ref XXX)

We hope this tutorial makes you want to develop your own DApp creations.

In this tutorial you will:

  • A - Learn about the Nano-less version of Ledger Live
  • B - Download this version of Ledger Live and clone project repository to create a DApp
  • C - Create a DApp
  • D - Turn the DApp into a Live App
  • E - Test it in Ledger Live

Have fun!

General Prerequisites

To be successful in this tutorial, you need

  1. Node.js installed on your machine. We recommend using nvm to properly manage the versionning of Node.js locally.
  2. Metamask added to your browser
  3. Funds in your Metamask account (they will be used in step #3). If there are no funds, either:
    • Go to https://goerlifaucet.com/. If you are a new user, you must sign up for Alchemy.
    • Or, https://goerl-faucet.pk910.de If you do not have funds and still choose that account, you get an “Unhandled Runtime Error” that you need to acknowledge.
  4. Install the nanoless beta version of Ledger Live

Getting started

  1. Clone the repo workshop-connect-dapp-ll
    • In the The Main Branch you will find the skeleton to help you to code & test
    • Try to do this Tutorial without any help (Yes, you can do it!). But if you need to cheat, the solution is on another repository called workshop-connect-dapp-ll-solution (TBD not published yet)
  2. In a Terminal, go to the repo folder and install the project’s dependencies $ yarn
  3. Launch the DApp $ yarn dev You can now run the DApp by opening it on your browser on http://localhost:3000 (by default) If the Ledger Guestbook does not open,
    • In your Terminal, look for the line: ready - started server on 0.0.0.0:300x, URL: http://localhost:300x”
    • In your browser, change the URL accordingly (http://localhost:300x)
  4. Connect to the Metamask Ethereum accounts. The Guestbook may ask you to log in if you are not already.
  5. Select the Goerli Test Network in Metamask, because the smart-contract is hosted on that network.
    • Click the Metamask button.

You are now logged in to the DApp on your browser with Metamask. You should see the Guestbook, with an empty field to write a message. There should be no errors in the terminal.


Did you find this page helpful?


How would you improve this page for developers?



Enabling the developer mode
Part I - Build the DApp
Getting Started
Theme Features
Customization

Live App