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

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.

Testing your Smart Contract on HardHat:

In order to deploy and test your contract, we will use the scripts folder in our root directory.

const hre = require("hardhat");
async function main() {
   const BuyMeACoffee = await hre.ethers.getContractFactory("BuyMeACoffee");
   const buyMeACoffee = await BuyMeACoffee.deploy();
   await buyMeACoffee.deployed();
}
main().catch((error) => {
console.error(error);
process.exitCode = 1;
});

The above code snippet is quite easy to understand if you are experienced with JavaScript and Async programming.
This coding method is preferred by hardhat.

The above code snippet contains an async main function in which our Smart Contract is initialized, and then we deploy that smart contract by using the deploy() function and wait for the function deployed() to confirm that the smart contract has been deployed.

Now after we are done with the deployment of our smart contract on a hardhat. We can test this out by writing some code.

PS. you can always log the variables to see what is inside of it to become clearer.

const [deployer, tipper] = await ethers.getSigners();

Now, add the following snippet in the main function. This will bring an array of addresses of signers, as first address being, the address of the deployer.

const getBalance = async (address)=>{
   let bigIntBalance = await ethers.provider.getBalance(address);
   return ethers.utils.formatEther(bigIntBalance)
}

To simplify things, let's create a helper function, which can take the address of any wallet, and can print its Ether balance of it.

By using this helper function, we will use to find the balance of our deployer and tipper.

console.log("Account balance of Deployer:", await getBalance(deployer.address));
console.log("Account balance of tipper:", await getBalance(tipper.address));

the above code will return 10000.0 of tipper and a value which is some decimal points less than 10000.0 around 9999.9xx. this is because due to the deployment of Smart Contracts costs some gas fees.

Buy Some Coffee:

In this, We will try to buy coffee from our Smart Contract.
We already have a method for that, which takes, a string name and a string message, and somehow also gets the value/eth to give as coffee payment.

const tip = {value:ethers.utils.parseEther("2")};
buyMeACoffee.connect(tipper).buyCoffee("Ahmad","Amazing",tip);

The above snippet does the exact same thing, it takes the name Ahmad as the first parameter which is the name, Amazing as the second parameter which is the message, and the unexpected third parameter an object with a value.
If you can see in the buyCoffee method in the Smart Contract, you will see we use eth amount from msg.value, this is the exact same value.
Now if we have given a tip using our tipper account and the amount of 2eth, therefore we must have 10000–2eth, and in our Contract Wallet will have 2 eths.

console.log("Account balance of Deployer:", await getBalance(buyMeCoffee.address));
console.log("Account balance of tipper:", await getBalance(tipper.address));

You will see from the logs that the contract address has 2 eths as expected, but the tippers account has eths near 9997.9x, which is true since the transactions cost a gas fee as well along with the original 2 eths coffee price.

Now since we are having funds in Smart Contract wallets, so we need to utilize withdrawTips, so we can transfer those eths from Smart Contract Wallets to our owner wallet.

Withdraw Tips from Smart Contract Wallets:

await buyMeACoffee.connect(deployer).withdrawTips();

The above line withdraws funds from the Smart Contract wallet to Owners Wallets.
We only need to connect the contract to the deployer and call the withdrawTips method.

You can again log the balance of all three, deployer, smart contract, and tipper so you will be able to see that the funds are transferred as we expected.

Now the only thing left for us is to print all the comments, the tippers have left for us.

Fetching all the comments:

const comments = await buyMeACoffee.connect(deployer).allComments();

As we have done already in withdrawing funds from the Smart Contract wallet, similarly we connect the deployer and call allComments, this will return comments and we can simply log them.

Now, when we have everything working perfectly.
We can proceed to deploy our Smart Contract on the test net so anyone on the Internet can access our test-net Smart Contract.

Read the next article to deploy the contract on test-net and use that using Next.js and deploy it.

Connect with me:
Twitter
Portfolio

Regards,
Ahmad Mustafeen,
Software Engineer at Geeks of Kolachi