What you’ll be building. See live and Git Repo . The online demo uses the Ropsten test network. demo Here 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 and install Metamask by clicking on the button as seen in the image above. link 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 as seen in the image below. show/hide test networks 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 for this tutorial, click on it as seen in the image above and let’s proceed to fund it with some ethers. Rinkeby test network 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 but don’t worry. Copy the address of your , see the image below. zero(0), Account 1 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 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. link This faucet lets you send free ethers to your wallet. What you can do to receive these free ethers is to enter your wallet address and click on the button. It takes about 30sec to 1min for the transaction to go through as seen in the image below. Account 1 send me test ether 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 for coding up our solidity smart contract. remix editor Creating Smart Contract To create, deploy, and test our smart contract, we will use the remix editor. Head on to , and you will be presented with this interface seen in the image below. remix 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 , and a list of existing files will appear on the dropdown. contracts folder Next, right-click on the contracts directory and create a new file with the name , be sure you name it appropriately. Use the image above as a reference point. Transactions.sol 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. and are properties or variables. The variable will only contain wallet addresses. will carry unsigned integers, and is an array that will hold the addresses of the users that interact with our smart contract. Owner, transactionCounts, balanceOf owner transactionCounts 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; 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 , , , or on his . LinkedIn Facebook Github website Also Published Here

Ethereum

Stacks

Chain

Facebook

Funding

Google

ORANGE

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

Build a LinkedIn Chat Clone with React Native and Firebase

Watch My YouTube Channel

Hire Me 

Portfolio

Buy Me a Coffee

Nominated for 2022 - HackerNoon Contributor of the Year - Decentralized Internet

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Build a Web3 Movie Streaming dApp using NextJs, Tailwind, and Sia Renterd

(1/100) Crypto Countdown: Golem

A Research Report on the Trader $JOE DeFi Platform

07/03/2018: Biggest Stories in the Cryptosphere

05/02/2018: Biggest Stories in the Cryptosphere

Build a Web3 Movie Streaming dApp using NextJs, Tailwind, and Sia Renterd

(1/100) Crypto Countdown: Golem

A Research Report on the Trader $JOE DeFi Platform

07/03/2018: Biggest Stories in the Cryptosphere

05/02/2018: Biggest Stories in the Cryptosphere

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps