How to Build an Ethereum Transaction App with React and Solidity: Part 1

What you’ll be building. See live demo and Git Repo Here. The online demo uses the Ropsten test network.

Introduction

As the Web3 movement ripples throughout the world wide web, you must jump in as a developer and become one of the beneficiaries of this blockchain technology.

By the way, what is Web3? It is a concept for a new version of the World Wide Web with blockchain-based decentralization. That is to say, data autonomy will no longer be in the hands of a single person or corporation but will be distributed throughout the web. In other words, information will now be secure, immutable, and distributed across a network.

This tutorial will teach you how to build a decentralized blockchain application from the ground up that will interact with a ReactJs frontend.

This is part one of a two-part series, and we will focus on setting up a blockchain development environment for you and also create the smart contract on the remix editor.

Prerequisite

Here is a list of items you will need to build along with me, as well as the instructions on how to get them to work together.

• Metamask
• Remix Editor
• Hardhat
• Alchamy
• ReactJs
• Tailwind CSS
• Solidity
• EthersJs
• Faucet
• Vite

To proceed, let’s start with installing Metamask on your browser, Google Chrome is the recommended browser for this tutorial. After the installation, you will also be taught how to receive some free ethers in your wallet so you can make transactions as we build our application.

Metamask Installation

Head to the Chrome store with this link and install Metamask by clicking on the button as seen in the image above.

After the installation, Metamask will take you through an account creation process which you should follow as guided by the images below.

Now follow the installation guide on the video provided in this Metamask installation phase. Once you watch it, click on the Next button, as seen in the image below.

Once you have completed the account creation process, you will be greeted with the screen below.

Next, click on the network drop-down, it is marked with the red arrow above, and choose show/hide test networks as seen in the image below.

Now toggle show test networks as ON as seen in the image below, scroll to the top and close the settings.

Now click on the networks tab, and you will see a list of test networks, including a provision for you to add a custom one, see the image below.

We will use the Rinkeby test network for this tutorial, click on it as seen in the image above and let’s proceed to fund it with some ethers.

Funding Your Rinkeby Account

I have been using this account, and you can see my current balance. If you are creating a Metamask account, yours will be zero(0), but don’t worry. Copy the address of your Account 1, see the image below.

The account address point to you, and anyone can use it to send you ethers anywhere in the world. Click to copy the address, now visit this link to fund it with some free ethers for testing purposes. These ethers are fake and can’t be used in the real ethereum network, but they serve the purpose of testing your ethereum smart contract before deployment to the main network.

This faucet lets you send free ethers to your wallet. What you can do to receive these free ethers is to enter your Account 1 wallet address and click on the send me test ether button. It takes about 30sec to 1min for the transaction to go through as seen in the image below.

After the transaction is successful, when you check your Rinkeby Metamask Account 1, you will see that you have received 0.1 ether in your wallet.

When you compare the previous balance with the new balance, you will find that you received 0.1 ether into your Rinkeby account.

If you have successfully followed through, you are awesome. We will next proceed to set up the remix editor for coding up our solidity smart contract.

Creating Smart Contract

To create, deploy, and test our smart contract, we will use the remix editor. Head on to remix, and you will be presented with this interface seen in the image below.

What is Remix in the first place? Remix is an online editor for creating, compiling, and deploying smart contracts written in the solidity programming language to the ethereum blockchain network.

How do we create this smart contract?

To create our smart contract, on the remix editor click on the contracts folder, and a list of existing files will appear on the dropdown.

Next, right-click on the contracts directory and create a new file with the name Transactions.sol, be sure you name it appropriately. Use the image above as a reference point.

Once the file has been created, it will immediately present you with the coding interface as seen in the above image. Now let’s start coding…

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

The above code tells the remix editor which software license and version of the compiler your smart contract will be using.

contract Transactions {
    address private owner;
    uint256 transactionCounts;
    mapping (address => uint) balanceOf;
}

The code above creates a solidity smart contract with the name Transactions. Note that the name of the file is the same as the smart contract’s name. It is of the convention that your solidity smart contract follows this rule.

Owner, transactionCounts, and balanceOf are properties or variables. The owner variable will only contain wallet addresses. transactionCounts will carry unsigned integers, and balanceOf is an array that will hold the addresses of the users that interact with our smart contract.

event Transfer(address indexed sender, address indexed receiver, uint256 amount, string remark, uint256 timestamp);

struct TransferStruct {
    address sender;
    address receiver;
    uint256 amount;
    string remark;
    uint256 timestamp;
}
    
TransferStruct[] transactions;

On this block of code, we are telling our smart contract to use a transfer event whenever a transfer is carried out between two accounts. This event will bear a record of the sender and receiver’s address, the amount sent, a remark made for the transaction, and a timestamp that will mark when the transaction was made.

Also, we defined a structure that our smart contract transactions will carry. This is necessary to keep things uniform. And lastly, we defined a transactions array that will keep track of all the transactions that are made on this smart contract.

constructor() {
    owner = msg.sender;
    balanceOf[tx.origin] = msg.sender.balance;
}

function getOwner() public view returns (address) {
    return owner;
}

function sendMoney(address payable receiver, uint256 amount, string memory remark) public returns(bool success) {
    if (balanceOf[owner] < amount) return false;
    balanceOf[owner] -= amount;
    balanceOf[receiver] += amount;
    transactionCounts += 1;
    transactions.push(
        TransferStruct(
            owner,
            receiver,
            amount,
            remark,
            block.timestamp
        )
    );
    emit Transfer(msg.sender, receiver, amount, remark, block.timestamp);
    return true;
}

function getBalance(address addr) public view returns(uint) {
    return balanceOf[addr];
}

function getAllTransactions() public view returns(TransferStruct[] memory) {
    return transactions;
}

function getTransactionsCount() public view returns(uint256) {
    return transactionCounts;
}

This last block contains six different methods or functions that can be executed on this smart contract. The first is the constructor function, which is the first one that runs whenever this smart contract is executed. It will set the owner to the one sending a transaction and also get his balance.

The getOwner function returns the address of the one making transactions with this smart contract.

The sendMoney function transfers a certain amount of ethers specified by the sender to the receiver. This function requires the sender and receiver’s address, the amount, and the remark on the transaction. Once it finishes with the logic as seen in the function’s code block, it will emit a transfer event which would be seen on the terminal.

The last three functions perform their duties as their names imply. Here is a complete version of our code.

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

contract Transactions {
    address private owner;
    uint256 transactionCounts;
    mapping (address => uint) balanceOf;

    event Transfer(address indexed sender, address indexed receiver, uint256 amount, string remark, uint256 timestamp);

    struct TransferStruct {
        address sender;
        address receiver;
        uint256 amount;
        string remark;
        uint256 timestamp;
    }
    
    TransferStruct[] transactions;

    constructor() {
        owner = msg.sender;
        balanceOf[tx.origin] = msg.sender.balance;
    }

    function getOwner() public view returns (address) {
        return owner;
    }

    function sendMoney(address payable receiver, uint256 amount, string memory remark) public returns(bool success) {
        if (balanceOf[owner] < amount) return false;
        balanceOf[owner] -= amount;
        balanceOf[receiver] += amount;

        transactionCounts += 1;
        transactions.push(
            TransferStruct(
                owner,
                receiver,
                amount,
                remark,
                block.timestamp
            )
        );

        emit Transfer(msg.sender, receiver, amount, remark, block.timestamp);
        return true;
    }

    function getBalance(address addr) public view returns(uint) {
        return balanceOf[addr];
    }

    function getAllTransactions() public view returns(TransferStruct[] memory) {
        return transactions;
    }

    function getTransactionsCount() public view returns(uint256) {
        return transactionCounts;
    }
}

Fantastic, let’s proceed to test this code on the remix editor.

Compiling Smart Contract

To compile our smart contract, click on the compilation button on the remix editor. From the compiler's list, select the latest and click on the big blue compile button. If you have done this correctly, you will have a similar view, as seen in the image below.

Take note of the green check label on the compilation tab now; this indicates that our smart contract was successfully compiled. See the image above; now, since we have no errors in our compilation, it's time we deploy this smart contract to a network.

Deploying and Run Smart Contract

To deploy the smart contract, you click on the Deployment tab, select an environment. You can use the JavaScript VM (London) for this process for the sake of simplicity. Remix has a lot of options as to how you want to deploy your smart contract.

Once you have clicked on the deploy orange button, a transaction success will be recorded on the terminal. You will see a deployed contract hash code on the bottom left of the page and a reduction in your ether balance.

To start doing some transactions, copy the address of a second account on the JavaScript VM (London) and paste it as the receiver’s address on the sendMoney method seen in the image above. Also, pass an amount you want, a remark, and click on the transact button. This will immediately transfer the entered amount to the receiver's account, and you can also check their balance with the check balance function. Refer to the image above to be properly guided.

Amazing, you have just completed your first smart contract with solidity programming language. In part two of this tutorial, we will merge it with a react frontend. See you in the next part.

About the Author

Gospel Darlington kick-started his journey as a software engineer in 2016. Over the years, he has grown full-blown skills in JavaScript stacks such as React, ReactNative, VueJs, and more.

He is currently freelancing, building apps for clients, and writing technical tutorials teaching others how to do what he does.

Gospel Darlington is open and available to hear from you. You can reach him on LinkedIn, Facebook, Github, or on his website.

Also Published Here