Augur, OpenSea, PancakeSwap, etc. are all buzzwords that one might hear when we talk about blockchain technology. Why? 🤔 This is because they represent a novel way of interacting with personal finance. There are many dApps in the blockchain ecosystem that help individuals and companies conduct transactions for various reasons like the ones mentioned. Many of these dApps are built to run on the Ethereum platform – which is the most widely used and popular blockchain network.
Smart contracts are the fundamental building blocks of Ethereum applications. For the Ethereum platform, the smart contracts are defined using a language called Solidity. These smart contracts are developed, deployed, and administered on this platform with the help of applications like Remix IDE.
In this blog, we will discuss and demonstrate how to build and deploy dApps using Solidity Smart Contracts, react.js, and web3.js.
In this blog, we will cover:
- What is Blockchain?
- What is Ethereum?
- What is a Smart Contract?
- What is Solidity?
- What are dApps?
- What is Remix IDE?
- What is web3.js?
- What is MetaMask?
- Hands-On
- Conclusion
What is Blockchain?
If you’ve ever wondered what blockchain is and what it can be used for, you’re not alone. There are many misconceptions surrounding technology.
Blockchain is a decentralized database that isn’t maintained by a single administrator but by several computers, or “nodes,” in a network. Each “block” of data is an individual file that is updated by all the nodes, which updates an identical ledger. Unlike other systems, blockchain transactions are extremely fast. As long as there is no third-party interference, the transactions can be completed in a matter of seconds. Following are some of its benefits:
What is Ethereum?
Ethereum is an open-source, decentralized blockchain with smart contract capabilities. Computers within this network verify transactions and ensure the integrity of the data.
The decentralized nature of the network is part of what makes cryptocurrencies so appealing. The currency has no central bank or intermediary, and allowing anonymous transactions makes it highly attractive. The benefits of Ethereum are numerous. They make money exchange incredibly easy, but also allow privacy and security.
This means that anyone can run applications, make payments, and perform other tasks using ETH. There are many ways to use this type of currency.
The following image shows the real-world applications of Ethereum:
What is a Smart Contract?
Smart contracts are the fundamental building blocks of Ethereum applications. They are computer programs stored on the blockchain that allows us to convert traditional contracts into digital parallels. Smart contracts are very logical – following an “if this then that” structure. This means they behave exactly as programmed and can’t be changed.
Smart contracts are made up of basic “if/when…then…” assertions expressed in code on a blockchain. When preset circumstances are satisfied and validated, the activities are performed by a network of computers.
For the Ethereum platform, the smart contracts are defined using a language called Solidity. In this blog, we will be creating a Smart Contract using Solidity as part of hands-on.
The following image shows how Smart Contracts work:
Let’s understand it with this simple example:
John is interested in purchasing Mike’s home. A smart contract is used to create this agreement on the Ethereum blockchain. An agreement between John and Mike is included in this smart contract.
The agreement will read something like this: “WHEN John pays Mike 300 Ether, THEN John will get ownership of the house”. This smart contract arrangement can’t be altered after it’s been set up, so John may feel safe paying Mike 300 Ether for the house. Mike and John would have to pay a lot of fees to third-party companies if they didn’t employ a smart contract. The bank, a lawyer, and a real estate broker are all involved.
Isn’t it fantastic? No more commissions and no more waiting for the agreement to be processed by a lawyer and broker! This is just one of many potential uses of a smart contract.
Smart contracts are quickly implemented once the terms of the agreement are met. This eliminates the need for a third party such as a bank, broker, or government.
The following image shows the benefits of Smart Contracts:
What is Solidity?
Solidity is the most widely used high-level object-oriented programming language for writing code on Ethereum to create smart contracts. Once the developers have created their code using Solidity, one of the major components that help the execution of this solidity code is EVM i.e., Ethereum Virtual Machine.
The following image shows the advantages of Solidity:
Solidity enables the creation of safe, transparent, and reliable smart contracts. They can improve operating efficiency, reduce administrative costs, and reduce reliance on third parties if effectively implemented.
What are dApps?
A decentralized application (dApp) is an application built on a decentralized network that combines a smart contract and a frontend user interface. A dApp can use blockchain to process data and perform transactions over distributed networks. The Ethereum platform is also frequently used to create dApps.
They are very similar to software apps that run on a website or on a mobile device, but they are peer-to-peer (P2P). On Ethereum, smart contracts are accessible and transparent like open APIs, so dApp can even include a smart contract that someone else has written. This means others can build on top of the codebase once it has been released. There is no single authority that controls the app. The following image shows major characteristics of dApps:
dApps in the financial realm may seem obvious, but they can truly innovate across industries as shown in the following image:
The following image shows a few top leading dApps in the world:
The following image shows the process of developing a dApp:
- Prototype and Whitepaper: First and foremost, a whitepaper describing the dApp and its features are released. This whitepaper not only defines the dApp development concept but also includes a functional prototype.
- Sale of Tokens: The first token sale has been scheduled.
- Initial Coin Offering (ICO): The dApp’s ownership stake is distributed.
- Launch and Implementation: The final step is to invest the funds in the creation and deployment of the dApp.
What is Remix IDE?
Remix IDE allows developing, deploying, and administering smart contracts for Ethereum-like blockchains. It is an open-source web and desktop application that fosters a fast development cycle. Remix is used for the entire journey of contract development as well as acts as a playground for learning and teaching Ethereum. The following image shows the major benefits of using Remix IDE:
Remix IDE includes a large number of functionalities apart from the main obvious functionalities such as compiling, deploying, and running smart contracts. These other functionalities are provided by Remix IDE in the form of a rich set of plugins and contribute to a better experience for a developer in coding smart contracts with intuitive GUIs. It helps in:
- To see their execution control graphs.
- Analyze the smart contract code.
- Documentation of the code and protect the code from odd smart contract execution due to Solidity and blockchain distinctive features.
What is web3.js?
The web3 JavaScript library interacts with the Ethereum blockchain. is a collection of libraries that allow you to interact with a local or remote Ethereum node using HTTP, IPC, or WebSocket. It can retrieve user accounts, send transactions, interact with smart contracts, and more.
What is MetaMask?
MetaMask is a wallet that is only compatible with the Ethereum blockchain.
They are digital storage units for your digital money. This software program is designed to store your private keys, which you will need to use to send and receive cryptocurrencies.
It also acts as a proof-of-ownership system for these assets, which are not in physical form. There are many different types of crypto wallets, including hardware wallets, mobile wallets, and paper wallets.
Like a traditional bank account, a crypto wallet holds your private keys and gives you access to the blockchain network. These wallets are also designed to be secure, as only you can access them. If you use a compromised wallet, you could lose all of your cryptocurrency. The following image shows features of MetaMask:
The following image shows major use cases of MetaMask:
Hands-On
Now you are aware of all concepts including Blockchain, Ethereum, Smart Contracts, dApps, etc. Now let’s do a small implementation. In this hands-on we will be doing the followings:
- Creating Solidity smart contract using Remix IDE
- Deploying Smart Contract to the Rinkeby Testnet.
- Build a front-end React app and connect it with the smart contract that we had deployed using web3.js.
You can download the complete source code of this hands-on from our GitHub repository. Here is the link for your reference:
https://github.com/workfall/dapps-react-web3js-solidity
Create a Solidity smart contract with Remix IDE
Now that we have a basic understanding of the concepts we can start writing the code. The best thing about Remix IDE is everything will be done directly in your browser. Thus, you don’t require to set up anything new separately in your environment. So, the game plan for this section is very simple. Write a very simple smart contract code using solidity programming language and somehow deploy it to the blockchain!
As seen in the above image, this IDE has three main tabs:
File Explorers: as seen in the picture above. This is where we’re going to write our smart contract and its test file. It should be pre-filled with some files already. Feel free to go through them.
Solidity Compiler: This is where we will compile our smart contract, once it is ready.
Deploy & Run Transaction: Where we will send our smart contract to the Blockchain.
There is not much more to add than this for now. Let’s start writing our contract!
Create a Smart Contract
Create a new file in the contracts folder and name it BasicSmartContract.sol
This is a very simple Smart contract that allows us to read some data and allows us to write some data to the contract.
(Note: you can find this file here: dapps-react-web3js-solidity/contracts/)
Compile a Smart Contract
We had written our smart contract. Now, it’s time to compile it! Keep the BasicSmartContract.sol file open and click on the Solidity Compiler tab in the sidebar.
There are a few options that can affect how the contract is compiled but selected ones are already fine. Just make sure that the compiler version that you’ve selected should be higher than 0.8.4. Let’s go ahead and click Compile BasicSmartContract.sol
After compiling the contract, if you see a green tick on the Solidity Compiler tab in the sidebar that means the contract is compiled and we are ready to deploy it to the blockchain!
Deploy our Smart Contract to the Rinkeby Test Network
We had compiled our Smart Contract. Now, it’s time to deploy it to the blockchain.
Click the Deploy & Run transactions tab in the sidebar.
There are a few options that can affect where we really want to deploy our contract on the local blockchain (only you can interact with the contract) or to the Ethereum Blockchain (testnet) so that anyone can interact with it.
We are going to deploy it to the Ethereum Blockchain so inside the ENVIRONMENT field select Injected Web3. This will popup your MetaMask and ask you for approval, just confirm it.
After that click on the Deploy button. Again, MetaMask will pop up and ask you to pay the gas fee to deploy the contract. Approve that transaction
At the bottom of the Remix IDE you’ll see the link of Etherscan.
Wait for the transaction to complete. This may take around 30s to complete. After that, the terminal displays a success message.
After the transaction is confirmed click the ‘view on etherscan, which should lead you to the transaction page as follows:
Wait for the transaction Status: Success
Click on the contract address to access the smart contract details. There, you will see all the transactions ever made with your contract. For now, there should be only the contract creation transaction.
Congratulations, you’ve deployed a smart contract to Rinkeby!
Now, we have deployed our contract. Next, we shall move to the React part.
Create a basic React JS web page
Building our web application with React from scratch includes lots of complexity. So, we are using a react framework Next.Js
To create a Next.js app, open your terminal, cd into the directory you’d like to create the app in, and run the following command:
npx create-next-app
After that, you’ll be asked to enter your project name. Enter the name you want and press Enter
This will take a few minutes to download all the required dependencies.
Run the development server
You now have a new directory called web3js-tutorial. Let’s make this directory as current working directory using the following command:
cd web3js-tutorial
Then, run the following command to start the local development server.
npm run dev
Let’s check to see if it’s working. Open http://localhost:3000/ from your browser.
Now let’s install web3
npm install web3
Now go to pages/index.js and add code as shown in the following image.
(Note: you can get this code from dapps-react-web3js-solidity/pages/index.js)
Providers and signers
A Provider is an Ethereum node connection that allows you to read data from its state. You will use a provider to do things like calling read-only functions in smart contracts, fetching balances of accounts, fetching transaction details, etc.
A Signer can do everything a Provider can. You can do both, reading and writing, using a Signer, but a Provider is only good for reading data.
web3.eth.Contract
The web3.eth.Contract object makes it easy to interact with smart contracts on the Ethereum blockchain. When you create a new contract object you give it the JSON interface of the respective smart contract and web3 will auto convert all calls into low-level ABI calls over RPC for you.
methods.stateVariable.call
Will call a “constant” method and execute its smart contract method in the EVM without sending any transaction.
methods.ChangeState.send
Will send a transaction to the smart contract and execute its method. Note this can alter the smart contract state. And for that, we have to pay some gas fees.
When you call this function you’ll be asked to make a transaction to pay the gas fees.
After that go to the styles folder and replace all the contents of globals.css file with the following code, this would add some styling to your dApp:
Now create a new folder under the web3js-tutorial folder and name it constants
In the constants folder, create a file index.js, and write the following code.
Replace the “address of your contract” with the address of the contract that you deployed.
Replace`–your abi–` with the abi of your Contract. To get that abi open Remix IDE to go to the compiler tab, scroll a bit you’ll get the abi copy it, and replace it with the “–your abi–“;
Now in your terminal which is pointing to web3js-tutorial folder, execute
npm run dev
Your dApp should now work without errors🚀
This is what it looks like. At first, you’ll be asked to connect your MetaMask to interact with the contract. Just confirm it and you are ready to interact with your contract using the React.JS application.
If you made it at this point in this blog then congratulations, you have built a dApp with the smart contract and web app that interacts with your smart contract on the blockchain.
Conclusion
In this blog, we have discussed dApps, blockchain, web3.js, smart contracts, MetaMask, Ethereum, and many other topics which are major components of dApps developments. We have also demonstrated how to build and deploy dApps using Solidity Smart Contract, web3.js & React.JS. In this demonstration, we have used the Remix IDE to write, compile, and deploy a Solidity Smart Contract. Then we created a simple web interface using React.JS. And with the help of web3.js we interacted with our deployed smart contract. Now that you know how to retrieve information from the smart contract, go ahead and improve this further by adding new contracts, updating them, and deleting them with full CRUD operations.
We will come up with more such use cases in our upcoming blogs. Stay tuned to keep getting all updates about our upcoming new blogs on AWS and relevant technologies.
Meanwhile…
Keep Exploring -> Keep Learning -> Keep Mastering
This blog is part of our effort towards building a knowledgeable and kick-ass tech community. At Workfall, we strive to provide the best tech and pay opportunities to AWS-certified talents. If you’re looking to work with global clients, build kick-ass products while making big bucks doing so, give it a shot at workfall.com/partner today.
