Create your first blockchain “Buy me Coffee” application with HardHat, Solidity, Next.js, and Tailwind CSS (Part 1 out of 3)

Buy me Coffee

The idea behind this application comes from Buy Me A Coffee, In this application, you will create your own smart contract using Solidity and HardHat on Goerli Testnet, and will deploy this on Testnet, afterwards we will create Frontend using Next.js and Tailwind CSS and connect this with our Deployed Smart Contract. We will host our entire application on Netlify which provides free hosting services.

Pre-requisites required for Smart Contract:

You will need to install Node.js (preferably version 16.x), install hardhat, and create an account on Al-Chemy (they have an entire course on this),
To install node.js download and install from here.

Now create an empty folder and run the following commands:

npx init
npm i hardhat
npx hardhat

Now accepting default settings by pressing Enter, hardhat will download dependencies and creates the basic structure of your smart contract.

Your folder structure should be something like this:

Folder Structure

Now our interest is in the “contracts” and “scripts” folders, and hardhat.config.js for configuration purposes.

Let’s clean these folders, create a new file in the “contracts folder” named “BuyMeACoffee.sol”, and write these lines of code.
They represent the license of the contract, the solidity version with a carrot sign, and the Contract body.

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.9;
contract BuyMeACoffee {
}

Our Smart Contract should be able to perform the following task:

1- People can buy coffee using ETH, along with their comments.
2- ETHs can be withdrawn from the Contract’s address to the owner’s address.
3- We can show all comments made by the donors.

Now in order to start working with the Smart Contract, we need to initialize a few things.

event NewComment(
address indexed from,
uint256 timestamp,
string name,
string memo
);
//  defining schemas
struct Comment {
address from;
uint256 timestamp;
string name;
string comment;
}
// defintions
address payable owner;
Comment[] comment;

Above we have created an Event to handle the creation of Comments, and also define a struct of Comments.
The keyword struct represents a custom data type,
address represents address SHA256,
uint256 represents a number
string represents any string (exactly as any other programming language).

The payable keyword represents that this address/method is payable, and we can have transactions pointed to this address.

Now add the following code:

constructor() {
owner = payable(msg.sender);
}

Constructor is a function that will only run when the smart contract is being deployed.

We will assign the address of the person deploying the smart contract as owner since we want to pay that person, therefore we wrap that with payable.

Creating our method to buy coffee:

function buyCoffee(string memory name, string memory message)
public
payable
{
require(msg.value >= 0, "Price should be greater than 0");
memo.push(Memo(msg.sender, block.timestamp, name, message));
emit NewMemo(msg.sender, block.timestamp, name, message);
}

The above function is quite easy to understand.

Let's start with buyCoffee, which is just the name of the function, which takes 2 parameters, name and message.

The keyword you see before the name and message memory represents that we want to dispose of the value of this parameter as soon as the function is executed.

Also, there are two other keywords used as well:
public: which states this function is available for anyone/everyone.
payable: which states that this function will be used to pay the owner, on its execution. The amount paid to the owner comes from the msg keyword in the value object.

In order to execute this function we validate, that msg.value is greater than zero, and if not we will send an alert, otherwise we save the comment in your comment array (previously created) and emit our EVENT.

msg.sender contains the address of the sender.
block.timestamp contains the current timestamp.

Creating a method to Withdraw Tips from the Contract Address to the Owner’s Address:

function withdrawTips() public {
require(owner.send(address(this).balance));
}

withdrawTips is a publicly available function, which it should not be, but since we have taken care of that no one outside can withdraw is some other account, than the owner.
we simply send the owner, the balance of the smart contract, by using this keyword.

Creating a method to display all the comments:

function allComments() view public returns(Comment[] memory) {
return comment;
}

allComments is a view-only public function that returns an array of type Comment.
View: A function that doesn’t need a gas fee to be executed.
returns: A statement that means, the function will return something.

Now that’s it for Smart Contract Development.
We have created our first smart contract.

Continue with Part 2 to understand how to test locally using hardhat. and then deploy the smart contract on the test-net.

Connect with me:
Twitter
Portfolio

Regards,
Ahmad Mustafeen,
Software Engineer at Geeks of Kolachi