Estimated reading time: 4 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 DApp is a Ledger Guestbook where users write messages, view existing ones, and can react to them by liking them. They can even tip the author.
All the signing in this tutorial is done without a Nano.
Note
This tutorial is based on a Ledger Hackathon project 2022 and it contains an Easter egg.
Important
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 the 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
Node.js
installed on your machine. We recommend using nvm
to properly manage the version of Node.js
locally.
- Metamask added to your browser
- 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.
- Install the Nano-less beta version of Ledger Live
Getting started
- Clone the repo workshop-connect-dapp-ll
Note
- The Main Branch (where this Tutorial will help you to code & test) is called (Temporary name)
- Try to do this Tutorial without help (Yes, you can do it!). But if you need to cheat, the Solution is on another repository called REPO_SOLUTION
- In a Terminal, go to the repo folder and install the project’s dependencies
$ yarn
- 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)
- Connect to the Metamask Ethereum accounts. The Guestbook may ask you to log in if you are not already.
- 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.