🛠️ We partnered with Alchemy to bring you a FREE Ethereum Developer Bootcamp! Get started here 🛠️
🎉Woooo! You finally made it to the last part of this tutorial series: creating a full stack decentralized application (dApp) by connecting your Hello World smart contract to a frontend project and interacting with it.
By the end of this tutorial, you'll know how to:
For this dApp, we'll be using React as our frontend framework; however, it's important to note that we won't be spending much time breaking down its fundamentals, as we'll mostly be focusing on bringing Web3 functionality to our project.
As a prerequisite, you should have a beginner-level understanding of React—know how components, props, useState/useEffect, and basic function calling works. If you've never heard of any of those terms before, we recommend that you check out this Intro to React tutorial. For the more visual learners, we highly recommend this awesome Net Ninja Full Modern React Tutorial video series.
What are we here for? Let's get started! 😎
First, go to the hello-world-part-four github repository to get the starter files for this project. Clone this repository into your local environment.
Don't know how to clone a repository? Check out this guide from Github.
Before we start coding, it's super important that we figure out what's already provided for us in the starter files.
Let's start by running the React project in our browser. The beauty of React is that once we have our project running in our browser, any changes we save will be updated live in our browser.
Doing so should open http://localhost:3000/ in your browser, where you'll see the frontend for our project. It should consist of one field (a place to update the message stored in your smart contract), a "Connect Wallet" button, and an "Update" button.
If you try clicking "Connect Wallet" or "Update" buttons, you'll notice that they don't work—that's because we still need to program their functionality! :)
NOTE: Make sure you're in the starter-files folder and not the completed folder!
Next, we have our state variables that we will update after specific events.
Never heard of React state variables or state hooks? Check out these docs.
Near the end of this file, we have the UI of our component.
Now that we understand what we're working with, let's figure out how to read from our smart contract!
To read from your smart contract, you'll need to successfully set up:
This may sounds like a lot of steps, but don't worry! We'll walk you through how to do each of them step-by-step! :)
So remember how in Part 2 of this tutorial, we used our Alchemy Web3 key to read from our smart contract? You'll also need an Alchemy Web3 key in your dApp to read from the chain.
Alchemy Web3 is a wrapper around Web3.js, providing enhanced API methods and other crucial benefits to make your life as a web3 developer easier. It is designed to require minimal configuration so you can start using it in your app right away!
Then, install the dotenv package in your project directory, so we have a secure place to store our API key after we fetch it.
For our dApp, we'll be using our Websockets API key instead of our HTTP API key, as it will allow us to set up a listener that detects when the message stored in the smart contract changes.
With this endpoint ready, it's time to load our smart contract!
To load your Hello World smart contract, you'll need its contract address and ABI, both of which can be found on Etherscan if you completed Part 3 of this tutorial.
If you skipped Part 3 of this tutorial, you can use the HelloWorld contract with address 0x6f3f635A9762B47954229Ea479b4541eAF402A6A. It's ABI can be found here.
This function is super simple. Just like we do in Part 2 of this tutorial series, here we're going make a simple async web3 call to read from our contract. Our function will return the message stored in the smart contract:
You'll notice that the current message no longer says "No connection to the network." Instead it reflects the message stored in the smart contract. Sick!
Now speaking of that listener...
Smart contract events are a way for your contract to communicate that something happened (i.e. there was an event) on the blockchain to your front-end application, which can be 'listening' for specific events and take action when they happen.
Now that we're able to read from our smart contract, it would be great to figure out how to write to it too! However, to write to our dApp, we must first have an Ethereum wallet connected to it.
So, next we'll tackle setting up our Ethereum wallet (Metamask) and then connecting it to our dApp!
To write anything to the Ethereum chain, users must sign transactions using their virtual wallet's private keys. For this tutorial, we’ll use Metamask, a virtual wallet in the browser used to manage your Ethereum account address, as it makes this transaction signing super easy for the end-user.
If you want to understand more about how transactions on Ethereum work, check out this page from the Ethereum foundation.
You can download and create a Metamask account for free here. When you are creating an account, or if you already have an account, make sure to switch over to the “Ropsten Test Network” in the upper right (so that we’re not dealing with real money).
To sign a transaction on the Ethereum blockchain, we’ll need some fake Eth. To get Eth you can go to the Ropsten faucet and enter your Ropsten account address, then click “Send Ropsten Eth.” You should see Eth in your Metamask account soon after!
To double check our balance is there, let’s make an eth_getBalance request using Alchemy’s composer tool. This will return the amount of Eth in our wallet. After you input your Metamask account address and click “Send Request”, you should see a response like this:
NOTE: This result is in wei not eth. Wei is used as the smallest denomination of ether. The conversion from wei to eth is: 1 eth = 10¹⁸ wei. So if we convert 0xde0b6b3a7640000 to decimal we get 1*10¹⁸ which equals 1 eth.
Phew! Our fake money is all there! 🤑
Now that our Metamask wallet is set up, let's connect our dApp to it!
So what does this giant block of code do exactly?
window.ethereum is a global API injected by Metamask and other wallet providers that allows websites to request users' Ethereum accounts. If approved, it can read data from the blockchains the user is connected to, and suggest that the user sign messages and transactions . Check out the Metamask docs for more info!
Open your browser on the http://localhost:3000/ page, and press the "Connect Wallet" button on the top right of the page.
If you have Metamask installed, you should be prompted to connect your wallet to your dApp. Accept the invitation to connect.
You should see that the wallet button now reflects that your address is connected! Yasssss 🔥
Next, try refreshing the page... this is strange. Our wallet button is prompting us to connect Metamask, even though it is already connected...
Now that you've added this code, let's try refreshing our browser window.
Niceeeee! The button should say that you're connected, and show a preview of your connected wallet's address - even after you refresh!
The final step in our dApp wallet setup is implementing the wallet listener so our UI updates when our wallet's state changes, such as when the user disconnects or switches accounts.
I bet you don't even need our help to understand what's going on here at this point 😉, but for thoroughness purposes, let's quickly break it down:
And that's it! We've successfully completed programming all of our wallet functionality! Now onto our last task: updating the message stored in our smart contract!
Make sure the message we wish to publish in our smart contact is valid
Sign our transaction using Metamask
Naturally, it makes sense to have some sort of input error handling at the start of the function.
Now that it have proper input error handling, it's time to sign the transaction via Metamask!
Let's breakdown what's happening. First, we set up our transactions parameters, where:
At this point, Metamask will open up in the browser, and prompt the user to sign or reject the transaction.
It's super clean and simple. 😌 And guess what...YOUR DAPP IS COMPLETE!!!
Let's test out the "Update" button!
Wooooo, you made it to the end of the tutorial! To recap, you learned how to:
Now you're fully equipped to apply the skills from this tutorial to build out your own custom dApp project! As always, if you have any questions, don't hesitate to reach out to us for help in the Alchemy Discord. 🧙♂️