Trying Out Simple Smart Contracts with Truffle + React Box

I found a sample that simply writes an integer like 1 to the blockchain, so I'm making a note of the operating procedure. This is recommended for those who want to experience smart contracts for the first time!

Environment at the time of writing

• Node.js v12.9.0
• Truffle v5.5.19
• MetaMask v10.17.0

Truffle

First, install Truffle.

$ npm install truffle

In zsh, a problem may occur where running truffle after installation results in "zsh: command not found: truffle". In that case, searching around here will provide various solutions.

Truffle provides many boilerplates that are convenient for creating Dapps.

Truffle Boxes - Truffle Suite

This time, I will use the "React Box" among them. (It is desirable to have knowledge of React)

Create an appropriate directory and unbox the React Box.

$ truffle unbox react

Then, the following directory structure will be created.

truffle/contracts/SimpleStorage.sol is the important source code for this project. As the .sol extension indicates, it is written in a language called Solidity.

// SPDX-License-Identifier: MIT
pragma solidity >=0.4.22 <0.9.0;

contract SimpleStorage {
  uint256 value;

  function read() public view returns (uint256) {
    return value;
  }

  function write(uint256 newValue) public {
    value = newValue;
  }
}

Detailed explanations regarding Solidity will be omitted, but here is what this Solidity code is doing:

• Defines a contract named SimpleStorage
• Prepares a state variable value of type uint256
• Reads the value of value with read()
• Writes a uint256 value to the blockchain with write()

State variables are for storing data in the contract's persistent storage. In other words, in this example, a transaction to store data occurs every time write() is executed, and gas fees are also incurred at the same time. You might be surprised at first by the blockchain mechanism where you need to pay money just to overwrite a variable.

Keywords like public and view also have important meanings, so I encourage you to look them up.

Deploy

To deploy a contract, use the truffle migrate --network (NetworkName) command. This command also performs compilation internally. If you only want to compile, you can use the truffle compile command.

When deploying, you need to configure the network settings in advance. For details, please refer to the following article:

https://zenn.dev/koogawa/articles/20a567f61e3fa3

In this case, we will deploy to the Goerli testnet.

$ truffle migrate --network goerli

If the deployment is successful, the contract address and gas fees will be output to the console. From this log, you can see that money is required even just to deploy a smart contract. The deployed smart contract can be viewed on the Etherscan website.

https://rinkeby.etherscan.io/address/0x74c7382e11311530757bedb953d7f302cfaef417

Execution

Now that we have deployed the contract, let's try executing it from a web browser. Move to the client directory and enter the following command to start the web server.

$ npm run start

The browser will automatically open and display localhost:3000.

As a test, enter an appropriate integer for the "write()" function and click the button; MetaMask will launch.

After checking the gas fee and clicking "Confirm," the transaction will start. After a short while, you will receive a notification that the transaction has been completed.

With this, you have successfully written data to the value of SimpleStorage—in other words, to the blockchain 🎉. By clicking "read()", you should be able to confirm that the value has been updated.

To understand how the smart contract was executed from the frontend, I recommend reading the code under client/src carefully and trying to modify it in various places.

Gas Fees

Since we used a testnet this time, there was no need to worry about gas fees. However, when deploying a contract to the mainnet, a significant amount of Ether is required. I recommend thoroughly testing in a development environment before deploying.