Now that the tools are set up, let’s proceed to the next step which is writing smart contracts. To do that, open a terminal and create a folder in your projects folder with the below command:
Now make a folder inside the blockchain folder with the below command:
See more: React js blockchain
cd blockchainmkdir contractscd contracts
Now run the below command to create a truffle project which will allow us to develop smart contracts:
With the above command, you should get an output like below:
Now open your truffle project in your favorite text editor. I am going to use Sublime Text. You should see the following folder and files structure:
Inside contracts folder, we are going to write our smart contracts.
Within the migrations folder, we are going to migrate our newly created smart contracts.
Inside test folder, we usually write tests to test our smart contract however, it is beyond the scope of this blog post therefore, we are not going to get into that. I would highly recommend writing tests for your smart contracts before deploying them to public blockchain nodes.
nftgamef.com file contains all the configuration of or truffle project.
Now let’s write our smart contract. Create a new file and name it nftgamef.com inside contracts folder. Now open that file and write the below code inside it:
pragma solidity >=0.4.22 <0.9.0;
This should always be the first line in your smart contract file. With this, we are specifying the version of solidity.
Now let’s make our first smart contract with code:
We can write a smart contract using the contract keyword and followed by the name of the contract which in this case Contacts.
Now to track the number of contacts inside our smart contract, we will create a state variable.
This is a special variable and any data we write into this variable will be stored in blockchain storage. We are using a special modifier keyword i.e. public to have access to this variable outside of the smart contract. Then we are assigning 0 to this variable.
Now that we have a state variable and it has a value in it. Let’s go into the front end part and let’s try to access this public state variable first. With this approach, we will establish communication between React application and our smart contract.
Run the below commands inside the blockchain folder to create a react application.
As you can see we also added nftgamef.com as a dependency for this project to make our react application interact with our smart contract.
Now open that contacts folder in your favorite editor. I am using Sublime Text.
We are not going to set up the folder structure and implement complex architecture because that is out of the scope of this blog post.
We’ll write all our code in nftgamef.com file. Therefore, go ahead and open the file in your editor.
Write below code inside nftgamef.com file:
We are importing a couple of hooks from React and Web3 from nftgamef.com. Now let’s create a state variable like below:
Now inside useEffect hook we will with our smart contract like below:
Now in order to run this client-side successfully, we need to take a few steps in the backend. Let’s get back to contracts folder. First, open nftgamef.com file and add the below properties:
Now inside migrations folder, create a new file and name it nftgamef.com and paste the below code:
Now in the terminal, type the below code to migrate your contract:
You should see an output something like below:
Now go back to the front end folder and run the below command to run the application:
This will open your React application in your browser and it will trigger Metamask to interact with your blockchain network. You should see a screen like below:
Maybe you are interested: YFI cryptocurrency | How it works and where to buy | nftgamef.com
In the above screen, click next and you should be presented with the below screen.
Now click connect. Then you should see the output on your browser with your account number like below:
Now that we have successfully interacted with our smart contract and retrieved account id. Let’s proceed with making a new function inside our smart contract to get a list of contacts and send it over to the front end and render them on the view.
Let go back to contracts folder and open nftgamef.com file and add the below function.
Now migrate this contract again as we made changes to this because smart contracts are immutable.
Now let’s get back to the front end i.e. contacts folder. Create a new file nftgamef.com inside src/ folder and paste the below code in that.
Now import both smart contract address and ABI into nftgamef.com file like below and also update load function with below code:
The above code will get all of the contacts from our smart contract and set them in contacts state variable. The code is very well commented on and explained.
Now let’s render all the contacts in ul like below.
As you can find the updated code inside return — when you run this react app now in browser, you should be able to see something like below:
If that is what you see then congratulations, you have just built your first dApp with the smart contract and web app that interacts with your smart contract on the blockchain.
Now that you know how to retrieve information from the smart contract, go ahead and improve this further by adding new contacts, updating them and deleting them with full CRUD operations.
That’s it from this article. The entire project can be found in the below GitHub Repository:
Below are my social media profiles if you would like to get in contact with me.
Linkedin | Github | Gitlab | Website
Most read: Binance Finally Blocks United States Users