Member-only story
Create a Web3 Chat Powered by Ethereum
Who would have thought that it would be this easy?
In this article, you’re going to learn how to connect an Ethereum Smart Contract to a React App and enable users to interact with it.
If you’re new to Ethereum or Smart Contract development, I highly recommend you to read my previous article — Create Your First Ethereum Smart Contract With Remix Ide.
In fact, we’re going to reuse the Smart Contract that we’ve built there. It’s also gonna give you the full basics when it comes to developing, testing, and deploying a Smart Contract to a test network (Rinkeby).
Pre-requisites
- To have the MetaMask Extension installed in your browser
- A code editor
- Some knowledge on the following topics: Ethereum, MetaMask, React, TypeScript
Working on the Ethereum Mainnet costs real money!
⚠️ During this tutorial, I assume that your MetaMask is set to use Rinkeby. Rinkeby is a test network that replicates Mainnet and allows us to deploy and play with a smart contract, for free!
The Project
We’re going to build an interface for this Blockchain-powered chat and here is what it looks like:
- A sidebar, on the left, contains a button to connect (not visible above) to the chat or indicate the address of the connected user.
- A chatbox, on the right, where are displayed the messages and an input to post a message to the chat.
ℹ️ We won’t focus on making the UI pretty in this article, the goal is to focus on how to interact with a Smart Contract, in the most straightforward way!
I did my best to make this tutorial easy to follow but don’t get discouraged if something doesn’t work, you will find a link to a GitHub repo with the finished project at the end of this article!
