Forem: Chichi Johnson

My Journey to becoming a Quantum Engineer

Chichi Johnson — Wed, 01 Apr 2026 21:19:20 +0000

I have procrastinated on documenting this process for the longest time. But I think i am ready now (maybe).
Coming from a front end engineering background, I am fascinated by the work being done by the quantum engineers at IBM. I am not that great with maths and statistics but I believe anything can be learned with tons of practice and consistency. I want to use this platform to hold myself accountable (that is if i don't give up half way and delete all my posts. I'll try not to btw).

This is an article describing what quantum computing is and some of it's use cases.

I became an IBM qiskit advocate late last year and I have been exposed to a lot of resources and networked a bunch as well. However, I still think to get to a higher level, there's still a lot of work I need to do individually behind closed doors.

I guess that's why I am embarking on this journey and you all are coming with me lol. I will be posting content here weekly and consistently. No using AI.

Certification

The first step of my plan is to pass the Qiskit v2 certification exam. I will be following the curriculum outlined there since it covers everything i need to know in order to pass the exam.

Career path

The second step should be choosing a specific area to focus on since quantum computing has a vast amount of fields. Build stuff and contribute to that field.
This is an article that describes 8 quantum computing careers. I haven't decided on an area yet.

I actually applied to some PhD programs last year but I got rejected from most of them except one. Still waiting on a response from the last school. Fingers crossed. If I don't get accepted, I think I would just focus on trying to get more research experience before applying again or maybe just abandon it all together and focus on the industry 🤷🏽‍♀️.

Yeah. I guess this is what I have for now. Until I have something new to share.

Setting Up a Desktop Project with Wails, React, and Vite: A Step-by-Step Guide

Chichi Johnson — Mon, 23 Oct 2023 21:07:04 +0000

INTRODUCTION

In this article, I’ll walk you through how to quickly set up a desktop project using Wails, React, and Vite.

Wails uses Go for the backend and any front-end framework of your choosing. For this article, we will stick with React.

PREREQUISITES

To be able to successfully run this project on your machine, you need to install the following:

Go: You need to have Go 1.18 or above. Check here to download Go on your machine. You can check if Go is installed on your machine by running the command

go version

Node: You need to have node 15 or above. Check here to download the latest version of node. By installing node, npm is also installed. You can check if node is installed by running

node -–version

and check if npm is installed by running

npm -–version

Wails CLI: You can install the wails CLI by running the command

 go install github.com/wailsapp/wails/v2/cmd/wails@latest

SETTING UP THE DEVELOPMENT ENVIRONMENT

Let us create a React project by running the following command:

wails init -n myproject -t react

If you get an error saying “wails not found”, then you are probably missing “go/bin” in your path. You can add it to your path by running the command export PATH=$PATH:~/.bin:~/go/bin

Your terminal should look like the above if your project was run successfully.

Your folder structure should look like the above. You can make changes to the frontend of your application by editing the files in your “frontend” folder.

RUNNING YOUR APPLICATION

Now, we need to start our project. We have to change directory by running the command cd myproject to make sure we are in the newly created project folder. Then, run

wails dev

An icon will pop up and your project will be running successfully!

Introduction to databases

Chichi Johnson — Tue, 12 Sep 2023 17:59:43 +0000

INTRODUCTION

In ancient days, humans stored data in cave paintings, cuneiform tablets and papyrus scrolls. With the invention of the computer, data storage became more automatic. At first, the flat file model was invented in the early 1970s by IBM where data was stored in a single table which consisted of text files with no markup and data separated by commas or delimiters. This method is inefficient in a number of ways: It is not scalable, it has limited query capabilities and data integrity and consistency was difficult.

In this article, we are going to delve into what a database is and the different types of modern database management systems that are in existence today.

WHAT IS A DATABASE (DB)

A database is a systematic collection of records in such a manner that it is easily accessible and organised.

WHAT IS A DATABASE MANAGEMENT SYSTEM (DBMS)

A database management system is a system designed to manage databases. It gives us the ability to add data, update data, create data and delete data using queries.

TYPES OF DATABASE MANAGEMENT SYSTEMS

There are different types of databases in existence today but we will be talking about some common databases:

Relational Database
Document Database
Graph Database
Key-Value Database

RELATIONAL DATABASE

A relational database is a type of database that organizes data in rows and columns and these rows and columns come together to form a table.
Relational databases give us functionality such as referential integrity which means that all the keys referenced are valid.
Relational databases use sql as its query language.

Below is an example of a simple relational database schema.

Relational databases have a lot of merits such as data consistency, data integrity and query optimization, there are also some demerits to it such as fixed schema meaning that the structure of the database has to be defined in advance and there are some issues with scalability since it poses challenges and is costly when trying to horizontally scale relational databases.

Popular relational databases are mysql, PostgreSQL and Microsoft sql server

DOCUMENT DATABASE

In this type of database, data is stored in a JSON like format which makes it easier to query the database especially if data sent between the server and client is also in this JSON format.

Below is an example of a JSON document.

{
  "_id": 1,
  "first_name": "Ify",
  "last_name": "Johnson",
  "email_address": "ify@books.com",
  "age": "23",
  "billing_address": {
    "address": "1, wobo street",
    "city": "port harcourt",
    "state": "rivers state",
    "postal_code": 500012,
    "country": "Nigeria"
  }
}

A document database makes use of collections. Collections are used to group related documents together.

MongoDB is a great example of a document database.

Document databases support horizontal scaling where data can be distributed across multiple servers and can handle large amounts of data, they have flexible schemas and flexible query languages. Schemas can also evolve over time. Schemas can be removed or added without breaking your code or affecting existing data.
Check here for more details about document databases.

GRAPH DATABASE

A graph database is a type of database that stores data in nodes and forms a relationship between these nodes instead of storing data in tables like in a relational database or a document like in a document database.

Examples of query languages that can be used to query and manipulate a graph database includes:

Below is a diagram of a graph structure

Although graph databases are very flexible and performant, they can include complexity into simple data models and since it’s not like other NoSQL or relational databases, developers have to learn how to query and model graph data.

KEY-VALUE DATABASE

This kind of database uses a key-value format to store data, whereby the key is used as a unique identifier to retrieve its corresponding value.

A great example of a key-value database is Redis. Redis, which stands for remote dictionary server, is an in-memory key-value data storage.

Key-Value databases are highly scalable since it supports horizontal scaling, it also supports caching to improve read performance and thereby reduces the load on the database.

Check here for more details about key-value databases .

CONCLUSION

Different types of databases are in existence now, each serving a unique purpose. You don’t have to go for the trendiest or most popular database, simply find the database that suits your particular project needs. For example, a social media application can make use of the graph database and an e-commerce website can make use of a relational database.

How to verify a contract on Etherscan.

Chichi Johnson — Wed, 16 Aug 2023 16:48:47 +0000

INTRODUCTION

In this tutorial, I will be showing you how to verify a contract with no external imports and also how to verify a contract with external imports.

Etherscan is a Block Explorer and Analytics Platform for Ethereum. With etherscan, users can view and verify smart contracts, check the current balance and transaction history of a particular Ethereum address and witness real-time transactions taking place on the Ethereum network.

Contract verification is important because it gives room for transparency and trust. Users can view your source code since everything will be public once you verify your smart contract. Users can just use your smart contract address to check if your smart contract is verified on etherscan.

Verifying a contract with no external imports.

Let's write a simple smart contract and deploy it using the remix IDE.

// SPDX-License-Identifier: MIT

pragma solidity ^0.8.13;

// contract address = 0x2f75D20eFE3115c2334bcc2e4CeB06b3Db30809c

contract Counter {
    uint public count = 0;

    //get count 
    function getCount() public view returns(uint){
        return count;
    }

    //increment count
    function incrementCount() public {
        count += 1;
    }

    //decrement count
    function decrementCount() public {
        count -= 1;
    }
}

A contract to get count, increment count and decrement count. I have already deployed to the Goerli testnet and gotten a contract address. Now, let us verify it.

Head over to etherscan.io. Hover on the Ethereum logo at the top right corner of your screen to toggle between testnets. Since I used the Goerli testnet, I will choose Goerli testnet. If you deployed your contract to another testnet, choose that testnet.

On the navigation bar, hover on 'Misc' and click on 'verify contract'.

Your screen should be looking like this:

Let's fill the form. Enter in your contract address, compiler type (since I am using a single file, I chose 'Solidity (single file)'), compiler version and license.

This is how my form looks like:

Now, click on 'continue', you will be redirected to another page that looks like this:

There is a form field labeled 'Enter the Solidity Contract Code below'. There, enter in your smart contract code. Don't forget to include your license and compiler version!

There is another field for constructor arguments. Since I don't have a constructor in my contract code, I will leave that place blank. Next, I will verify reCAPTCHA and once I am verified, I click on 'Verify and Publish'. It takes a couple of seconds to verify but when it does, it redirects you to another page showing that your smart contract is officially verified.
Your page should look like this:

Verifying a contract with external imports.

Let's create another contract that inherits from the Counter contract.

// SPDX-License-Identifier: MIT

pragma solidity ^0.8.13;

import './Counter.sol';

contract Name is Counter {
    string public name;

    constructor(string memory _myName) {
        name = _myName;
    }

    function getName() public view returns(string memory) {
        return name;
    }

    function setName(string memory _newName) public {
        name = _newName;
        incrementCount();
    } 

}

Let's break this down. We have a Name contract that is inheriting from the Counter contract. A constructor to set a name. A getName function that returns the name and a setName function that sets a new name and also increments our count by 1.

Next thing we are going to do is 'flatten' our Name.sol file. Which will generate a new file that combines all the source code of our imports plus our current contract code. To flatten our file, click on the plugin icon at the bottom left of your remix IDE and search for the 'FLATTENER' plugin and activate it.

After activation, an icon named 'flattener' should appear at the left hand side of your screen.

Now, let's compile and deploy our Name.sol contract.

Click on the 'solidity compiler' icon. It has a 'S' shape at the left hand side of your screen. Change your 'compiler version' to '0.8.13' or whatever compiler version you used in your smart contract and then click on the 'Compile Name.sol' button to compile your smart contract.

A green check mark should appear on the 'solidity compiler' icon. Meaning your contract had been compiled successfully.
Now, let us flatten the file before we deploy. Click on the 'flattener' icon and then click on 'Flatten contracts/Name.sol'.

After flattening, a green check mark appears under the 'flattener' icon. Another button, 'Save Name_flat.sol' appears under 'Flatten contracts/Name.sol'. Click on it and a pop-up appears. Asking for permission to create a new file with our flattened contents in it.

Accept it.
Next, a new file called Name_flat.sol appears. That is the contract we are going to deploy but we still have to compile it first.
_Note: _ If the flattened file doesn't have 'SPDX-license-Identifier', please include it at the top.

After compilation, Let us deploy to the Goerli testnet. Click on the 'deploy and run transactions' icon that is directly under the 'solidity compiler icon'. I will be using 'Injected Web3' as my environment, Metamask pops up and I login. My current testnet appears below my environment. Head over here to get test Goerli eth. Your page should look like the following:

Then I click on deploy. Which prompts Metamask and I need to confirm the transaction.
After deployment, You can view your transaction on etherscan. Check your terminal window for a 'view on etherscan' link.

Clicking on 'view on etherscan' should redirect to another page that includes transaction hash, status, block, timestamp, among others.

Chakra UI vs Shadcn UI

Chichi Johnson — Wed, 16 Aug 2023 16:28:50 +0000

INTRODUCTION

UI components are used to make our lives as developers easier as we get access to re-usable components we can call in our projects. It gives us the ability to focus on what makes our application unique and still helps us to deliver stunning UI in the process.

In this article, we shall discuss about Chakra UI and Shadcn UI. Also, their differences, similarities and which to choose when building your project.

WHAT IS CHAKRA UI?

According to the official documentation:

Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.

Chakra UI provides accessibility - as it follows the WAI-ARIA for all it's components, it is themeable - meaning you can customise it according to your preferences, it is composable and also has an active discord community.

Chakra UI is also open source and anyone can be a contributor.

WHAT IS SHADCN UI?

Shadcn UI provides components you can easily insert into your application. It is also customisable, themeable - uses Tailwind CSS utility classes, open source and accessible.

In order to extend a component's props, check out this issue.

Note: Shadcn UI is not a component library. This means it cannot be downloaded as a dependency using npm or yarn.

SIMILARITIES

Both Chakra UI and Shadcn supports reusable components and can be used with different frameworks like React, Gatsby, Next etc.

DIFFERENCES

Built with:

Chakra UI: Built with React

Shadcn UI: Built with Radix UI and Tailwind css

Responsive styles:

Chakra UI: Uses object or array notations to group related styles together as screen sizes changes.

<Text fontSize={{base:"md", md:"2xl", lg:"6xl"}}> Hello! </Text>

To pass in dynamic styling, you can use the following approach:


import React, { useState } from 'react'
import { Input } from '@chakra-ui/react'

export default function SimpleInput() {
    const [error, setError] = useState(true)
    return <Input variant="filled" borderColor={error ? 'red' : 'initial'} />
}

Shadcn UI: Uses a combination of tailwind css pseudo-classes.

<Input placeholder="Enter project name" className="text-sm md:text-2xl lg:text-6xl" />

To pass in dynamic styling, you can use the following approach:


import React, { useState } from 'react'
import { Input } from '@/components/ui/input'

export default function SimpleInput() {
    const [error, setError] = useState(true)
    return (
        <div>
            <Input
                placeholder="Enter project name"
                className={` w-[480px] ${error && 'border-red-700 focus-visible:ring-transparent'}`}
            />
        </div>
    )
}

CONCLUSION

While both are great for your project, it all depends on preference:

Shadcn UI is more styled based whereas Chakra UI is more interaction based.
Shadcn UI gives more flexibility and you only install what you need. Meanwhile, Chakra UI gives you all the available components after adding it as a dependency to your project.

Zero Knowledge Proofs vs. Fraud Proofs

Chichi Johnson — Fri, 22 Jul 2022 13:54:08 +0000

Introduction

Proofs are an important aspect in cryptography. In this article, I will explain two of the most popular proofs: validity proofs that utilizes zero knowledge cryptography and fraud proofs. What makes each of them unique and their various use cases.

What are zero knowledge proofs

Zero knowledge proofs or zk proofs are ways of telling a verifier that you know some piece of information without actually revealing the information that you (the prover) knows. Privacy and security are achieved on public blockchains with zero knowledge proofs.

A zero knowledge proof must satisfy the following requirements:

Completeness: For a proof to be complete, the verifier must be able to determine that the prover is in possession of a particular piece of information.
Soundness: For a proof to be sound, the verifier cannot be convinced that the prover has a particular piece of information when in actuality, the prover does not possess such information.
Zero knowledge: For a proof to be zero knowledge, the verifier must not know anything regarding the information the prover has except whether such information is true or false.

Types of zero knowledge proofs

There are two types of zk proofs:

Interactive zk proofs: For interactive zk proofs, the prover and verifier interact with one another several times. The prover completes challenges issued by the verifier in order for the prover to gain the trust of the verifier and for the verifier to be sure that the information the prover has, exists and is valid.
Non-interactive zk proofs: For non-interactive proof, the prover and verifier do not interact at all. Instead an automated system is used to verify the prover's claims. By using an automated system, Non-interactive zk proofs require additional software and computational power.

Some examples of zero knowledge technologies:

Zero knowledge succinct non-interactive argument of knowledge (zk SNARK): An example of a cryptocurrency that uses Zk SNARK is Zcash. Zcash uses zk SNARK to better protect the privacy of it's users.
Zero knowledge scalable transparent argument of knowledge (zk STARK): An example of a decentralized finance that uses zk STARK is DeversiFi

Real world applications of zero knowledge proofs

Zero knowledge proofs can be used in a wide range of scenarios where data privacy and security are paramount. Such scenarios may include:

Blockchains
User Verification
Finance
Machine learning

Limitations of zero knowledge proofs

zk proofs require lots of time and computational power.
zk proofs cannot give 100% certainty that a claim exists and is valid. It basically minimizes the probability of a claim being false.

What are fraud proofs

Fraud proofs use a Dispute Time Delay (DTD) system. If a fraud proof is submitted within the DTD and has incorrect state transitions, changes made to the state are reverted and validators are penalized. If no fraud proof is submitted within the DTD, the state transition is considered correct.

Fraud proofs use Optimistic rollups that reduces costs and latency levels for decentralized applications on a blockchain network.

The main advantage of fraud proof is that they are not needed for every state transaction which means fewer computational resources are used and this promotes scalability.

The main disadvantage of fraud proof is that fraud proofs cause interactions between different parties. Thereby creating a space for these parties to commit fraud.

Closing remarks

Validity proofs are needed for each transaction and they ensure that nothing other than correct state transitions are accepted while in the case of fraud proofs, they are only needed when there are incorrect state transitions.
Both validity proofs and fraud proofs are different ways of proving the validity of information and are both tools used in Layer-2 scalability solutions. Each with it's own advantages and disadvantages.

Build a Web3 app with Solidity

Chichi Johnson — Thu, 30 Jun 2022 18:15:16 +0000

In this tutorial, I'm going to show you how to build an Ethereum Decentralized application or Dapp with React.js. If you are an absolute beginner, I suggest that you go over to the Ethereum docs for a proper introduction.

What we will be building

We'll be building a Dapp I call SendFunds, you can call it whatever you like. It will be a place where anybody can send ether(Ethereum's native currency) to any address and display the transaction on the front end.

We'll be writing and deploying a smart contract that will let people connect their wallets and interact with our smart contract. We will be deploying our Dapp to the Göerli testnet.

Installing dependencies

Node js

First we need to install the node package manager. To do this, head over to this website Node.js website.
You can see if you already have node installed by going to your terminal and typing:

node -v

Metamask wallet

We need metamask in order to interact with the ethereum blockchain. Visit this link to install metamask chrome plugin in your chrome browser.

Create-react-app

Next, we will need to install create-react-app which allows us to create and run a react application very easily without too much configuration. You can install it using the following commands:

npm install create-react-app

Sample project

Let's create our react app. Type in the following command in your terminal window.

npx create-react-app send-funds
cd send-funds
npm start

Your browser should open automatically. If it doesn't, head over to your browser and type http://localhost:3000. You should see a webpage like this:

Hardhat

Hardhat is a tool that lets us compile our smart contract code quickly and test them locally. It creates a local Ethereum network for us that mimics the actual Ethereum mainnet. How cool is that!
Install Hardhat with the following commands:

npm install --save-dev hardhat

Make sure you are inside the send-funds directory!

Sample project

Let's get a sample project running.
Run:

npx hardhat

Your terminal should look like this:

Choose the option to “Create a basic sample project”. Say yes to everything. In case you get a conflict error, delete the README.md file in your root directory.

We need a few other dependencies. Let's install them.

npm install --save-dev @nomiclabs/hardhat-waffle ethereum-waffle chai @nomiclabs/hardhat-ethers ethers moment dotenv

Writing our smart contract code

Inside of your send-funds folder, navigate to your contracts folder and create a new file called SendFunds.sol. You can go ahead and delete Greeter.sol as we will not be needing it.

I will paste the code we will be needing below and explain what each line does.

//SPDX-License-Identifier: MIT

pragma solidity ^0.8.13;

import "hardhat/console.sol";

contract SendFunds {
    constructor() payable {
        console.log("hello");
    }

    event NewTxn(address indexed to, uint256 amount, uint256 timestamp);

    struct SentTransaction {
        address reciever;
        uint256 amount;
        uint256 timestamp;
    }

    SentTransaction[] allTxn;

    function sendFunds(address payable _to, uint256 amount) public payable {
        require(amount <= address(this).balance, "not enough funds");
        (bool success, ) = _to.call{value: amount}("");
        require(success, "Unable to send Ether");
        allTxn.push(SentTransaction(_to, amount, block.timestamp));
        emit NewTxn(_to, amount, block.timestamp);
    }

    function getAllTxn() public view returns (SentTransaction[] memory) {
        return allTxn;
    }
}

//SPDX-License-Identifier: MIT

Every smart contract must begin with an // SPDX-License-Identifier. If you do not do this, an error will occur.

pragma solidity ^0.8.13;

A version of solidity must be indicated next. We do this to tell the compiler to use version 0.8.13. To know more about license identifiers and compiler versions, check this out.

import "hardhat/console.sol";

Hardhat gives us a way to console.log statements to our teminal.

contract SendFunds {
    constructor() payable {
        console.log("hello");
    }

Smart contracts looks like a class in other programming languages. The constructor will run once when the contract is initialized for the first time and print what is in the console.log(). We are making the constructor payable because we want the smart contract to be able to receive ether.

event NewTxn(address indexed to, uint256 amount, uint256 timestamp);

Next is our event. We need to display the transaction on our front end, we need an event to be able to communicate to our front end that some state has changed!

SentTransaction[] allTxn;

struct is used to group related data together. When sending a transaction, we need to store the receiver, the amount and the timestamp.

function sendFunds(address payable _to, uint256 amount) public payable {

Next is our sendFunds function which takes in an address payable _to meaning the address can accept payment. A uint256 amount which takes in the amount to send to _to and the function is payable.

require(amount <= address(this).balance, "not enough funds");

The require keyword returns a true or false. If the first half of it is true, it continues code execution. If false, it throws an error. Here, we are checking if the amount we want to send to the receiver is less than or equal to what the sender has in their wallet.

(bool success, ) = _to.call{value: amount}("");

Above is the magic line that actually sends ether to the receiver. Then we have another require block to check if the transaction was a success.

allTxn.push(SentTransaction(_to, amount, block.timestamp));
emit NewTxn(_to, amount, block.timestamp);

Here, we are pushing _to, amount and block.timestamp to our struct instance and emitting it to the front end.

function getAllTxn() public view returns (SentTransaction[] memory) {
        return allTxn;
    }

For the final block of code, this function above returns all the transactions.

Testing out our smart contract

Before we begin, head over to your hardhat.config.js file and change your version of solidity to 0.8.13 so it would match what you have in your SendFunds.sol file.

In your scripts folder, delete sample-script.js and create two new files. run.js is the first file to create. Here, we would play around with testing different aspects of our code and the next file to create is deploy.js, here is the file we use to deploy our smart contract to your testnet.

The code below should be inside the run.js file.

const hre = require("hardhat");

const main = async () => {
  const sendFundsContractFactory = await hre.ethers.getContractFactory(
    "SendFunds"
  );
  const sendFundsContract = await sendFundsContractFactory.deploy({
    value: hre.ethers.utils.parseEther("4"),
  });

  await sendFundsContract.deployed();

  console.log("contract address: ", sendFundsContract.address);
  let contractBalance = await hre.ethers.provider.getBalance(
    sendFundsContract.address
  );
  console.log(
    "Contract balance:",
    hre.ethers.utils.formatEther(contractBalance)
  );

  const [owner, randomPerson] = await hre.ethers.getSigners();
  const sendFunds = await sendFundsContract
    .connect(randomPerson)
    .sendFunds(randomPerson.address, 2);
  await sendFunds.wait();

  const allTxn = await sendFundsContract.getAllTxn();
  console.log(allTxn);
};

const runMain = async () => {
  try {
    await main();
    process.exit(0);
  } catch (error) {
    console.log(error);
    process.exit(1);
  }
};

runMain();

Let's go over this line by line.

const hre = require("hardhat");

We are requiring hardhat here because we will be needing it later.

const sendFundsContractFactory = await hre.ethers.getContractFactory(
    "SendFunds"
  );

This will compile our smart contract and generate the necessary files we need to work with our contract under the artifacts folder.

const sendFundsContract = await sendFundsContractFactory.deploy({
    value: hre.ethers.utils.parseEther("4")
  });

Hardhat will create a local Ethereum network for us. Then, after the script completes it'll destroy that local network and we are giving the contract 4 ether.

  await sendFundsContract.deployed();

Here, we are waiting for the contract to be deployed.

console.log("contract address: ", sendFundsContract.address);
  let contractBalance = await hre.ethers.provider.getBalance(
    sendFundsContract.address
  );
  console.log(
    "Contract balance:",
    hre.ethers.utils.formatEther(contractBalance)
  );

Next, we are console.logging the contract's address and the contract's balance.

const [owner, randomPerson] = await hre.ethers.getSigners();
  const sendFunds = await sendFundsContract
    .connect(randomPerson)
    .sendFunds(randomPerson.address, 2);
  await sendFunds.wait();

What is going on here is we are getting a random user to send some ether to and we are calling the sendFunds function passing in the random user's address and amount and waiting for the transaction to be completed.

const allTxn = await sendFundsContract.getAllTxn();
  console.log(allTxn);

For the final bit of testing, we are calling the getAllTxn function to get all of our transactions.

Run the following command in your terminal: npx hardhat run scripts/run.js. Your terminal should be outputing the following:

Let's write our deploy script. It will be very similar to our run.js file.

Input the following in your deploy.js file.

const hre = require("hardhat");

const main = async () => {
    const [deployer] = await hre.ethers.getSigners();
    const accountBalance = await deployer.getBalance();

    console.log("deploying contracts with account ", deployer.address);
    console.log("account balance ", accountBalance.toString());

    const sendFundsContractFactory = await hre.ethers.getContractFactory("SendFunds");
    const sendFundsContract = await sendFundsContractFactory.deploy();

    await sendFundsContract.deployed();

    console.log("Funds contract address: ", sendFundsContract.address)

    }

    const runMain = async () => {
        try {
            await main();
            process.exit(0)
        } catch (error) {
            console.log(error);
            process.exit(1)
        }
    }

    runMain();

Deploy to the Göerli testnet with Alchemy

We are going to be deploying to a testnet because deploying to the Ethereum Mainnet costs real money. I'll show you how to deploy to a testnet using Alchemy.

After logging in to Alchemy, on the top right corner, there is a create app button. Click on it

A pop up should appear next. Give your app a name, the chain should be Ethereum and network should be changed to Göerli. Finally click on create app button.

Next, click on your newly created project, it should take you to your project's dashboard. You will be needing the API url.

Next, create a .env file in your root directory. We would be adding some things we don't want to public to get access to like your private key and API url. Don't forget to add your .env file to your gitignore file.

Head over to your hardhat.config.js file. Input the following:

require("@nomiclabs/hardhat-waffle");
require('dotenv').config();

module.exports = {
  solidity: "0.8.13",
  networks: {
    goerli: {
      url: process.env.ALCHEMY_URL,
      accounts: [process.env.WALLET_PRIVATE_KEY],
    },
  }
};

Let's go over this.

require('dotenv').config();

First, we are requiring dotenv

module.exports = {
  solidity: "0.8.13",
  networks: {
    goerli: {
      url: process.env.ALCHEMY_URL,
      accounts: [process.env.WALLET_PRIVATE_KEY],
    },
  }
};

Next, we are filling in the url and accounts with our alchemy API url and our private key. To get your wallet's private key, head over here.
Please keep your private key safe to avoid loss of funds.

Before we deploy to the testnet, we need test Göerli. Head over to Göerli faucet. Login with Alchemy and paste in your wallet address. You should receive your test Göerli in a couple of seconds.

In your terminal, run the following commands to deploy your contract to the Göerli testnet: npx hardhat run scripts/deploy.js --network goerli

Your terminal should output the following:

Copy your contract's address. We are going to need it in the front end.

You've come a long way. Now let's connect our front end.

Setting up the front end

Let's start by deleting some unwanted code in your App.js file under your src folder. It should look like this:

import './App.css';

function App() {
  return (
    <div>
      hello
    </div>
  );
}

export default App;

Next, we are going to be creating some new folders. Under your src folder, create two new folders: components and utils.
Inside your components folder, create two new files: Home.js and Home.css.

Inside of your Home.js file. Input the following code:

import React, { useEffect, useState } from "react";

function Home() {
  const [currentAccount, setCurrentAccount] = useState("");

  const checkIfWalletIsConnected = async () => {
    try {
      const { ethereum } = window;
      if (!ethereum) {
        console.log("you need to install metamask");
      } else {
        console.log("found one", ethereum);
      }
      /*
       * Check if we're authorized to access the user's wallet
       */

      const accounts = await ethereum.request({ method: "eth_accounts" });
      if (accounts.length !== 0) {
        const account = accounts[0];
        console.log("account ", account);
        setCurrentAccount(account);
      } else {
        console.log("no authorized account found");
      }
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    checkIfWalletIsConnected();
  }, []);

  return <div>Home</div>;
}

export default Home;

What is going on here is that we are basically checking to see if the special window.ethereum object is injected in our browser. If not, you get a console.log telling you to install Metamask. If the object is found, we use a special method called eth_accounts to see if we're authorized to access any of the accounts in the user's wallet and since a user can have multiple accounts, we are taking the first one. Finally we are using the useEffect hook to run the function immediately the page loads.

Connecting our wallet

Connecting our wallet is very easy to do. Your Home.js file should look like the following:

import React, { useEffect, useState } from "react";
import "./Home.css";

function Home() {
  const [currentAccount, setCurrentAccount] = useState("");

  const checkIfWalletIsConnected = async () => {
    try {
      const { ethereum } = window;
      if (!ethereum) {
        console.log("you need to install metamask");
      } else {
        console.log("found one", ethereum);
      }
      /*
       * Check if we're authorized to access the user's wallet
       */

      const accounts = await ethereum.request({ method: "eth_accounts" });
      if (accounts.length !== 0) {
        const account = accounts[0];
        console.log("account ", account);
        setCurrentAccount(account);
      } else {
        console.log("no authorized account found");
      }
    } catch (error) {
      console.log(error);
    }
  };

  //connect wallet with button click
  const connectWallet = async () => {
    try {
      const { ethereum } = window;
      if (!ethereum) {
        console.log("you need to install metamask");
        return;
      }
      const accounts = await ethereum.request({
        method: "eth_requestAccounts",
      });

      console.log("Connected", accounts[0]);
      setCurrentAccount(accounts[0]);
    } catch (error) {
      console.log(error);
    }
  };
  useEffect(() => {
    checkIfWalletIsConnected();
  }, []);

  //truncate wallet address
  function truncate(input) {
    return input.substring(0, 5) + "..." + input.substring(38);
  }

  return (
    <div className="App">
      {currentAccount.length === 0 ? (
        <div>
          <div className="nav">
            <h1>SendFunds</h1>
          </div>
          <div className="content">
            <div>
              <p className="description">
                Send <i className="fa-brands fa-ethereum"></i> to your friends
                and family.
              </p>
              <button className="connect-btn" onClick={() => connectWallet()}>
                Connect Wallet
              </button>
            </div>
          </div>
        </div>
      ) : (
        <div>
          <div className="nav flex">
            <h1>SendFunds</h1>
            <p className="wallet-address">{truncate(currentAccount)}</p>
          </div>
          <div className="content connected-wallet">
            <p className="description">
              Send <i className="fa-brands fa-ethereum"></i> to your friends and
              family.
            </p>
          </div>
        </div>
      )}
    </div>
  );
}

export default Home;

Let's go over the connectWallet and truncate functions.

const connectWallet = async () => {
    try {
      const { ethereum } = window;
      if (!ethereum) {
        console.log("you need to install metamask");
        return;
      }
      const accounts = await ethereum.request({
        method: "eth_requestAccounts",
      });

      console.log("Connected", accounts[0]);
      setCurrentAccount(accounts[0]);
    } catch (error) {
      console.log(error);
    }
  };

Here, we are checking if window.ethereum is present. If it is, we call eth_requestAccounts to ask Metamask to give us access to the user's wallet. Then we are setting setCurrentAccount to the first account.

 function truncate(input) {
    return input.substring(0, 5) + "..." + input.substring(38);
  }

Since, wallet addresses are too long, we are truncating it.

Finally, we are doing some conditional rendering. If currentAccount.length === 0, the user needs to connect their wallet, else display a welcome text.

The styling for the Home.css page:

body{
    background: rgb(100,0,123);
    background: radial-gradient(circle, rgba(100,0,123,1) 0%, rgba(62,20,86,1) 100%);
    color: #fff;
    margin: 2px 40px;
    font-family: 'Bellota', cursive;
  }

  .content {
    text-align: center;
    margin: 160px auto 40px;
  }

  .description {
    font-size: 30px;
    font-weight: bold;
  }

  .connect-btn {
  color: white;
  padding: 10px 30px;
  font-size: 1.3em;
  background: transparent;
  border-radius: 50px;
  border: 1px solid white;
  margin: 10px auto 0;
  cursor: pointer;
  opacity: 0.7;
  font-family: 'Bellota', cursive;
  font-weight: bold;
  }

.nav {
  border-bottom: 1px solid #fff;
}

.nav h1 {
  margin-bottom: 0;
  text-align: left;
}

.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  place-items: flex-end;
}

.nav p {
  margin: 3px 0;
}

.connected-wallet {
  margin: 70px auto 40px;

}

.wallet-address {
  border: 1px solid #fff;
  padding: 2px 15px;
  border-radius: 50px;
}

I got my icon from font awesome and added the cdn to my index.html file. For the font, I used Bellota from google fonts and also added the link to my index.html file.

Import Home.js in your App.js file.

import './App.css';
import Home from './components/Home';


function App() {
  return (
    <div>
      <Home />
    </div>
  );
}

export default App;

Run npm start to check out your Dapp.

Your Home page should be looking like this:

Form implementation

Let's dive into our form creation. Under the utils folder, create a new file called SendFunds.json. This will house the artifacts gotten when you deployed your contract.
Under artifacts/contracts/SendFunds.sol, you will find a SendFunds.json file. Copy everything and paste in inside your utils/SendFunds.json.

You also need to create two new files under your components: Form.js and Form.css.

Let's create a custom form inside your Form.js file:

import React, {useState} from 'react';
import './Form.css';


const Form = () => {
    const [walletAddress, setWalletAddress] = useState('')
    const [amount, setAmount] = useState('')


  return (
    <div className="form">
      <form>
        <p>
          <input
            type="text"
            name=""
            id=""
            placeholder="Enter Wallet Address"
            required
            value={walletAddress}
            onChange={(e) => setWalletAddress(e.target.value)}
          />
        </p>
        <p>
          <input
            type="number"
            name=""
            id=""
            placeholder="Enter Amount"
            required
            value={amount}
            onChange={(e) => setAmount(e.target.value)}
            step='any'
            min='0'
          />
        </p>
        <button type="submit">
          Send
        </button>
      </form>

    </div>
  );
};

export default Form;

The code above is pretty straight forward. Two input fields. One a number and the other a text type. Then, I am saving the values in state.

Note: Don't forget to include your Form.js file at the bottom of your Home.js file.

Now, let's call our sendFunds function from our smart contract.

import React, { useState } from "react";
import { ethers } from "ethers";
import abi from "../utils/SendFunds.json";
import { parseEther } from "ethers/lib/utils";

const Form = () => {
  const [walletAddress, setWalletAddress] = useState("");
  const [amount, setAmount] = useState("");

  const contractAddress = "0x0FB172Db7Ab332f3ea5189C4A3659720124880Bc";
  const contractABI = abi.abi;
  const sendFunds = async () => {
    try {
      const { ethereum } = window;
      if (ethereum) {
        const provider = new ethers.providers.Web3Provider(ethereum);
        const signer = provider.getSigner();
        const sendFundsContract = new ethers.Contract(
          contractAddress,
          contractABI,
          signer
        );
        const sendFundsTxn = await sendFundsContract.sendFunds(
          walletAddress,
          ethers.utils.parseEther(amount),
          { gasLimit: 300000, value: parseEther(amount) }
        );
        await sendFundsTxn.wait();
        setWalletAddress('')
        setAmount('')
      } else {
        console.log("ethereum object does not exist!");
      }
    } catch (error) {
      console.log(error);
    }
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    sendFunds();
  };

  return (
    <div className="form">
      <form onSubmit={handleSubmit}>
        <p>
          <input
            type="text"
            name=""
            id=""
            placeholder="Enter Wallet Address"
            required
            value={walletAddress}
            onChange={(e) => setWalletAddress(e.target.value)}
          />
        </p>
        <p>
          <input
            type="number"
            name=""
            id=""
            placeholder="Enter Amount"
            required
            value={amount}
            onChange={(e) => setAmount(e.target.value)}
            step="any"
            min="0"
          />
        </p>
        <button type="submit">Send</button>
      </form>
    </div>
  );
};

export default Form;

We have a lot going on here, so let's break it down.

import { ethers } from "ethers";

We are importing ethers because we will need it in order to interact with our smart contract.

import abi from "../utils/SendFunds.json";

Next, we are importing our abi. You can read more about it here.

import { parseEther } from "ethers/lib/utils";

We use parseEther when we want to convert a value from ETH to WEI which is the value we want to send to the contract when calling a payable method.

const contractAddress = "0x0FB172Db7Ab332f3ea5189C4A3659720124880Bc";

The contract address gotten when we deployed our smart contract. Incase you didn't save yours, run npx hardhat run scripts/deploy.js --network goerli.

  const contractABI = abi.abi;

The abi gotten from our SendFunds.json file.

const provider = new ethers.providers.Web3Provider(ethereum);
const signer = provider.getSigner();

A Provider is what we use to actually talk to Ethereum nodes. A signer is used to sign transactions and send the signed transactions to the Ethereum network. Read more abour signers here.

const sendFundsTxn = await sendFundsContract.sendFunds(
          walletAddress,
          ethers.utils.parseEther(amount),
          { gasLimit: 300000, value: parseEther(amount) }
        );
        await sendFundsTxn.wait();

We are calling the function we wrote in our smart contract and passing in the necessary arguments and waiting for the transaction to execute.

Next is the function to get all of our transactions:

import React, { useEffect, useState } from "react";
import { ethers } from "ethers";
import abi from "../utils/SendFunds.json";
import { parseEther } from "ethers/lib/utils";
import Transaction from "./Transactions";
import "./Form.css";

const Form = () => {
  const [walletAddress, setWalletAddress] = useState("");
  const [amount, setAmount] = useState("");
  const [allTxns, setAllTxns] = useState([]);
  const [isTxn, setIsTxn] = useState(false);

  const contractAddress = "0x0FB172Db7Ab332f3ea5189C4A3659720124880Bc";
  const contractABI = abi.abi;
  const sendFunds = async () => {
    try {
      const { ethereum } = window;
      if (ethereum) {
        const provider = new ethers.providers.Web3Provider(ethereum);
        const signer = provider.getSigner();
        const sendFundsContract = new ethers.Contract(
          contractAddress,
          contractABI,
          signer
        );
        const sendFundsTxn = await sendFundsContract.sendFunds(
          walletAddress,
          ethers.utils.parseEther(amount),
          { gasLimit: 300000, value: parseEther(amount) }
        );
        await sendFundsTxn.wait();
      } else {
        console.log("ethereum object does not exist!");
      }
    } catch (error) {
      console.log(error);
    }
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    sendFunds();
  };

  const getAllTransactions = async () => {
    try {
      const { ethereum } = window;
      if (ethereum) {
        const provider = new ethers.providers.Web3Provider(ethereum);
        const signer = provider.getSigner();
        const sendFundsContract = new ethers.Contract(
          contractAddress,
          contractABI,
          signer
        );
        let getAllTxn = await sendFundsContract.getAllTxn();
        setIsTxn(true);

        let txns = [];
        getAllTxn.forEach((txn) => {
          txns.push({
            address: txn.reciever,
            amount: txn.amount,
            timestamp: new Date(txn.timestamp * 1000),
          });
        });
        setAllTxns(txns);
      } else {
        console.log("ethereum object does not exist!");
      }
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    getAllTransactions();
  }, []);

 useEffect(() => {
    let sendFundsContract;

    const onNewTransaction = (to, amount, timestamp) => {
      console.log("New transaction", to, amount, timestamp);
      setAllTxns(prevState => [
        ...prevState,
        {
          address: to,
          amount: amount,
          timestamp: new Date(timestamp * 1000)
        },
      ]);
    };

    if (window.ethereum) {
      const provider = new ethers.providers.Web3Provider(window.ethereum);
      const signer = provider.getSigner();
      sendFundsContract = new ethers.Contract(contractAddress, contractABI, signer);
      sendFundsContract.on("NewTxn", onNewTransaction);
    }

    return () => {
      if (sendFundsContract) {
        sendFundsContract.off("NewTxn", onNewTransaction);
      }
    };
  }, []);

  return (
    <div className="form">
          {/* don't forget to add the input fields, i removed them to make the code shorter */}

      <div>
        {isTxn === false ? (
          <div></div>
        ) : (
          <div>
            <Transaction allTxns={allTxns} />
          </div>
        )}
      </div>
    </div>
  );
};

export default Form;

We are calling the getAllTxn function and pushing it into an array that we store with useState and sending the array to the Transaction component. You can go ahead and create a Transaction.js and Transaction.css files inside your components folder.
I am also catching the event I created on the smart contract so I don't have to refresh the page whenever I send in a new transaction.

The styling I used for the form. Add it to your Form.css file:

* {
  font-family: 'Bellota', cursive;

}

button {
  color: white;
  padding: 10px 30px;
  font-size: 1.3em;
  background: transparent;
  border-radius: 50px;
  border: 1px solid white;
  margin: 10px auto 0;
  cursor: pointer;
  opacity: 0.7;
  font-weight: bold;
}

.form {
    text-align: center;
    margin: 60px auto 40px;
}

input {
    border: 1px solid #fff;
    padding: 8px 13px;
    border-radius: 50px;
    width: 30%;
    margin-bottom: 20px;
    font-weight: bold;
    font-size: 18px;
}

For the final bit of this tutorial, let us display our transactions on the front end.

In your Transaction.js file, input the following code:

import React from 'react';
import './Transaction.css'
import moment from 'moment'
import {ethers} from 'ethers'

const Transaction = ({allTxns}) => {
  console.log(allTxns)
  return (
    <div className='transaction-container'>
    <h2>All Transactions:</h2>
     {allTxns.length === 0 ? <div>

       </div>: <div className='grid-container'>

          {allTxns.map((txn, index) => {
            return (
              <div key={index} className='transactions'>
                <p>Reciever: {txn.address}</p>
                <p>Amount: {ethers.utils.formatUnits(txn.amount.toString(), 'ether')} eth</p>
                <p>Date:  {moment(txn.timestamp.toString()).format('MM/DD/YYYY')}</p>
                </div>
            )
          })}
         </div>}
    </div>
  );
};

export default Transaction;

What is going on here is very clear. We are getting the allTxns prop from the Form.js file and we are displaying the data. Changing WEI to ETH using ethers.utils.formatUnits and changing the txn.timestamp to something more readable using moment.

Styling for Transaction.css file:

.transaction-container {
    text-align: left;
    margin-top: 20px;
}

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-gap: 10px;
}

.transactions{
    background-color: #ffffff;
    color: black;
    padding: 0 10px;
    border-radius: 10px;
    width: 60%;

}

Run npm start in your terminal. Send some transactions. Your web page should be looking like this:

Further learning

Connect with me on: Twitter || LinkedIn

Differences between Web2(social web) and Web3(semantic web)

Chichi Johnson — Tue, 01 Mar 2022 16:32:23 +0000

Before we dive into the differences between web2 and web3, we first need to understand what web2 and web3 are.

WHAT IS WEB2
Web2 is the version of the internet most of us know of today. With technologies like js, html and css, the web became more interactive as tech giants like meta, Twitter and Amazon provides services to us and in the process collected data from us.

WHAT IS WEB3
This is an idea for a new iteration of the World Wide Web based on blockchains which incorporates concepts including decentralization and token based economics.

Differences between web2 and web3

WEB2	WEB3
Apps like Twitter and Facebook are centralized	Apps or dApps are decentralized
Servers can go down	Servers can’t go down
Participation in this network is controlled by a central authority	participation is free to anyone and isn’t controlled by a central authority
central authorities can censor data	censorship is much harder as information has many ways to move through the network

Conclusion:

With the emergence of web3, web2 is not and will not be completely eradicated because it still has its usefulness.
Although web3 has its limitations such as scalability, accessibility and cost. It is still very new and more web3 technologies are being invented everyday.

An intern at blockgames hoping to work and learn at Nestcoin and the amazing team at Zuriteam

How to get google client ID and client Secret

Chichi Johnson — Sun, 05 Apr 2020 15:43:34 +0000

These are the easy steps in creating your own google client ID and google Secret.

Go to console.developers.google.com.
Click on new project.
Add project name and click on create.
Make sure the project you are on is the newly created one.
Click on the hamburger icon, navigate to api services and choose credentials.

Then click on create credentials and click on oauth client ID.
Before you can create client ID, you need to configure consent screen.

click on configure consent screen.
Click on external and create.
Type in the application name. You can fill out the form if you like, it is not required. Make sure the application name does not have the word 'google' in it.
Go back to the dashboard and click on enable Apis and services.

For google, it is google plus api.

click on enable.
Go back to credentials, click on create credentials then navigate to oauth client ID.
Click on web application. if you are using localhost, follow the image instruction below for authorized javascript origin and redirect uri. then click on create.
Your oauth client ID and client Secret is successfully created.

Forem: Chichi Johnson

My Journey to becoming a Quantum Engineer

Certification

Career path

Setting Up a Desktop Project with Wails, React, and Vite: A Step-by-Step Guide

INTRODUCTION

PREREQUISITES

SETTING UP THE DEVELOPMENT ENVIRONMENT

RUNNING YOUR APPLICATION

Introduction to databases

INTRODUCTION

WHAT IS A DATABASE (DB)

WHAT IS A DATABASE MANAGEMENT SYSTEM (DBMS)

TYPES OF DATABASE MANAGEMENT SYSTEMS

RELATIONAL DATABASE

DOCUMENT DATABASE

GRAPH DATABASE

KEY-VALUE DATABASE

CONCLUSION

How to verify a contract on Etherscan.

INTRODUCTION

Verifying a contract with no external imports.

Verifying a contract with external imports.

Chakra UI vs Shadcn UI

INTRODUCTION

WHAT IS CHAKRA UI?

WHAT IS SHADCN UI?

SIMILARITIES

DIFFERENCES

CONCLUSION

Zero Knowledge Proofs vs. Fraud Proofs

Introduction

What are zero knowledge proofs

Types of zero knowledge proofs

Real world applications of zero knowledge proofs

Limitations of zero knowledge proofs

What are fraud proofs

Closing remarks

Further reading

Build a Web3 app with Solidity

What we will be building

Installing dependencies

Node js

Metamask wallet

Create-react-app

Sample project

Hardhat

Sample project

Writing our smart contract code

Testing out our smart contract

Deploy to the Göerli testnet with Alchemy

Setting up the front end

Connecting our wallet

Form implementation

Further learning

Differences between Web2(social web) and Web3(semantic web)

How to get google client ID and client Secret