Setting up Git/GitHub to fetching data from your smart contract into your front-end.

The greatest approach to improve your Web 3.0 skills is to use them to create coding projects. But building them from scratch and adding different libraries can be challenging.

That is why in this thread we will be creating a simple full-stack application using React, Hardhat, Solidity, Ethers.js, and Metamask which can be used as a boilerplate for our future projects.

Setting up Git

Git is a source code management technology. It is a free and open-source version control system that is used to efficiently manage small to extremely big projects. In this project we will be using Git to track all the changes in the project.

Creating a Git repository

The first step would be creating a git repository. In this article, I will be using GitHub, but you can also use similar services like GitLab or Bitbucket.

Head over to the GitHub website and click on the button Create a new repository. Enter the name of your project select the visibility (Public or Private) and click on the button Create repository.

Adding Git to the project

Create a new folder on your computer and open it on a terminal. Now go back to your browser and copy the code which is provided by default on your project repository in GitHub. It should look similar to the below code

Paste it on your terminal and that is it, you have successfully added git to your project.

Setting up the frontend using React

npx create-react-app ./

Once it is completed, your folder structure should look like this. 

Now that our react application is created we need to install some packages. Run the below command to install those packages using yarn.

yarn add ethers hardhat @nomiclabs/hardhat-waffle ethereum-waffle chai@nomiclabs/hardhat-ethers

Configuring an Ethereum Development Environment

Next, we need to setup the Ethereum Development Environment, we can simply use Hardhat for this. 

Open up your terminal and run the command below.

npx hardhat

Once completed, you should see below new files/folders generated on your project directory. 

test: This folder contains a test script written in Chai and it is used to test our smart contract

hardhat.config.js: This file contains the configuration for Hardhat

scripts: This folder contains a sample script to show to deploy a smart contract

contracts: This is the folder, which includes the files, in which we write our smart contract code

Modifying the Hardhat configurations

Now, we need to do some modifications to our Hardhat configuration file. Open up hardhat.config.js in your code editor and update the module.exports object to the below code

In the above code, we added the chainId as 1337, It is because of the Metamask configuration issue. We have also added path to our artifacts which are the compiled version of our contracts. 

Smart Contracts

Next, we have smart contracts. A smart contract is a decentralized program that responds to events by executing business logic. They are often written in Solidity.

Take a look at Greeter.sol file which is present in the contracts folder.

For now, we don't need to bring any changes to our smart contract and we can compile the same thing. 

Compiling our smart contracts with Hardhat

Now that you have good knowledge about the sample smart contracts, let's go ahead and compile them. You can compile it using the command below

npx hardhat compile

Once you run the command, you should see a new file in your src folder called artifacts.

Artifacts contain the compiled version of our smart contract in JSON format. This JSON file contains an array called 𝚊𝚋𝚒. ABI or Application Binary Interface is what we need to connect our client (React app) with our compiled smart contract. 

Deploying smart contract on a local blockchain

Now, we can deploy our smart contract on a local blockchain using Hardhat. To do that first, we need a local network. To start a local network, run the below code in your terminal.

npx hardhat node

This command also generates 20 test accounts and addresses, that can be used to deploy and test our smart contracts.

Don't close this terminal as we need it to deploy our smart contract

Next rename sample-script.js to deploy.js in scripts folder. And then run the below code to deploy your smart contract on a local network.

npx hardhat run scripts/deploy.js --network localhost

If it was successful, you should see an output similar to below code

Connecting Metamask to Hardhat Blockchain Node

Download and install the Metamask extension in your browser and complete the onboarding process. Once it is completed click on networks and choose Localhost 8545

Once you did, click on the avatar image on Metmask and choose "Import Account".  Copy any private key from the account that was logged into your terminal and import it to Metamask. And, that is it, we have connected our local blockchain to Metamask. 

Connecting the Front-end with Smart contract

Now we can start connecting the front-end of our application with smart contract. In your main directory run the command below to start the react app.

npm start

Now we can start with allowing users to connect with Metamask in your react app.

Connect with Metamask

Replace the code in your app.js with the below code.

In the above code, we have a useEffect which calls connectWallet function every time the app loads. And using ethereum from the window object we are connecting to our app with Metamask.

Save the file and reload your app, you should see a MetaMask popup asking you to connect Wallet.

Fetching greetings from smart contract

Now that we have connected Metamask we can work on fetching greetings from the contract. But before that, you need to import ABI and ether.js in our app.js file.