Web3 Apps and Initialization and Execution of Contracts

Get an overview of Web3 apps, and learn how to develop and deploy a smart contract in Solidity.

We'll cover the following

Web3 apps using Solidity

Imagine that you’re building a project with someone. You’re planning on monetizing this project by accepting payments in cryptocurrency. Naturally, you'd want to distribute the earnings fairly between yourselves. By the end of this course, we’ll have an app that helps you create a smart contract on the blockchain that can distribute the collected payments between two (or more) parties in a predetermined split ratio.

Press + to interact

We’ll also learn how to build a Partnerly app from scratch. First, we’ll learn how to create a smart contract that can be deployed on the Ethereum blockchain, and then we’ll look at building the frontend for this contract using React in Node.js.

Press + to interact

We’ll use Solidity to develop a smart contract, which is similar to JavaScript. We’ll use React, Next.js, and Tailwind for the user interfaces for this contract.

Press + to interact

Project setup

All the required tools for this course are on the Educative platform, so you don’t need to worry about the project setup or the development environment. However, if you want to work on your local machine, follow the steps here to set up the development environment.

Developing the contract

In our project directory, we’ll be developing our contract inside the contracts folder. Let’s create a new file called Partnership.sol. Below is what the skeleton of our contract looks like:

Press + to interact
//SPDX-License-Identifier: Unlicensed
pragma solidity ^0.8.4;
import "hardhat/console.sol";
contract Partnership {
    constructor() {
    console.log("Contract is deployed");
    }
}

Code explanation

  • Line 1: This line is a comment that defines the license for this contract. We’ll just leave it as Unlicensed.

  • Line 2: This line is the Solidity version we want for this contract. We’ll be using version 0.8.4.

Press + to interact

We should have a configuration file for Solidity named hardhat.config.js in the project folder. We should set the version declaration in there to match the contract version.

Press + to interact
module.exports = {
  solidity: "0.8.4",
};

  • Line 4: Here, we import another contract into our contract called hardhat/console.sol. This is similar to how we would import libraries when coding in Node.js to enhance the functionality of our programs. The console.sol contract gives our contract the ability to call the console.log function, which will make debugging the contract easier as we develop it. We’ll remove this function before deploying the contract to a live network, because it costs some gas to execute the console.log statements on the Ethereum network. You can think of gas as the price you need to pay for things to get executed on the Ethereum blockchain.

  • Lines 6–10: Here, we define a contract called Partnership that logs the Contract is deployed message when it has been deployed.

Notice that the definition of a contract is similar to the definition of a class in JavaScript. Just like a class, a contract has a constructor function that gets executed when the contract is initialized (deployed, in our case). It can potentially have other attributes and methods that will help us define the contract’s data and behavior. For now, let’s just console.log a string to indicate that the contract has been deployed.

Running the contract

Using Hardhat, we can define a script that will simulate the deployment of a contract. Let’s create a script called run.js inside the scripts folder.

Press + to interact
const hre = require("hardhat");
async function main() {
  await hre.run("compile");
  const Contract = await hre.ethers.getContractFactory("Partnership");
  const contract = await Contract.deploy();
  await contract.deployed();
}
main()
.then(() => process.exit(0))
.catch((error) => {
  console.error(error);
  process.exit(1);
});

Code explanation

The run.js file has a bunch of boilerplates that we’ll skim over. We won’t need to adjust some of the statements in there.

  • Line 1: This statement imports the hardhat library into the run.js script. We might see some other examples where this line is omitted. This is because this dependency gets automatically injected when we call this script using npx hardhat.

  • Lines 3–4: It’s the same as the first statement inside the main function. We might see it getting omitted in some examples. We have included it in our examples for the sake of completeness.

  • Lines 6–11: We first compile the smart contract with the given name and then deploy the contract using the deploy method. Then, we ensure that the contract has been deployed using the deployed method. Note that all these operations are asynchronous, so we use the async await pattern.

  • Lines 14-19: The following statement executes the async main function and exits from the script once the execution has completed. It also logs errors (if there are any).

Press + to interact

We can continue developing the contract now that we have a script to execute it. Click the “Run” button to execute the code:

//SPDX-License-Identifier: Unlicense
pragma solidity ^0.8.4;

import "hardhat/console.sol";

contract Partnership {
    constructor() {
    console.log("Contract is deployed");
    }
}
Run the first contract

We should now see our console.log message get executed. The contract gets deployed successfully.