DEV Community: Adebayo Olamilekan

Building And Deploying A Subgraph (Part 2)

Adebayo Olamilekan — Sun, 03 Mar 2024 20:37:04 +0000

Just like how fries can be eaten alone 🍟 or eaten together with either ketchup or mayonnaise, this tutorial is both 1) a standalone tutorial for deploying and querying a subgraph. 2) a continuation from my previous tutorial on building a savings dapp.

Prerequisites
Introduction
Tips to know about subgraphs
Initialize Subgraph
Tweak Code and Deploy
Querying Subgraph
Conclusion

Prerequisites

To build, deploy, and query from a subgraph you will need the following essentials:

A deployed smart contract (whether verified or not),
a crypto wallet,
a subgraph studio account,
and a cup of coffee ☕.

Before we start building the subgraph project, ensure you have the following above, done? now take a sip 🍵 and let's start building.

Introduction

A subgraph according to The Graph (which is a decentralized protocol for indexing and querying blockchain data) is a custom API built on blockchain data. They are queried using the GraphQL query language and are deployed to a Graph Node using the Graph CLI.

In simpler terms, a subgraph is like a customizable API for easily querying and getting specific data from a blockchain using GraphQL.

To get started, we need to have a subgraph studio account, which is very easy to do in 2 simple steps;

Connect your wallet and
Sign a message, then you should have a page like this;

Click on the Create a Subgraph button and enter a subgraph name. You have successfully created a subgraph. well-done!!

Tips to know about subgraphs

Deleting a subgraph is not possible once it's created.
Once a subgraph is created, the name cannot be changed.
To enable faster and more easy querying of data from a subgraph, the contract associated with it should emit events.
Subgraph mappings are written in AssemblyScript therefore using libraries like ether.js in the subgraph is not possible.

You can check out more of the tips or FAQs of a subgraph here

Initialize Subgraph

On the lower right side (you will have to scroll down) of your dashboard page of the subgraph you just created, steps on how to Initialize, Deploy and Build the subgraph are shown.

Following the steps;

We need to install the graph cli before a subgraph can be initialized.

npm install -g @graphprotocol/graph-cli

or

yarn global add @graphprotocol/graph-cli

After the installation, run the below

graph init --studio <SUBGRAPH_NAME>

Here you will be asked for the protocol, chain and other information of the contract you want to subgraph, following the last tutorial of writing, deploying and verifying our crypto-saves smart contract, these are the answers to the questions from the terminal:

Protocol: ethereum
Subgraph Slug: Crypto-Saves (or any name you want)
Directory to create the subgraph in: Crypto-Saves (or anywhere you want)
Ethereum Network: mumbai (the chain where the contract was deployed)
Contract Address: 0x4b1d98af1af713456c1fc86afed67b94c4648f6d (Contract Address)

After you receive the Subgraph created message then run the next command;

graph auth --studio <DEPLOY_KEY>
cd <Name_of_subgraph>

Using the events of the contract, the graph auto-generates the subgraph's code which needs little to no tweaking before deployment and publishing. The command below auto-generates the code and then builds it.

graph codegen && graph build

Now take another sip of that coffee ☕

Tweak Code and Deploy

Navigate to the src folder in the subgraph root directory, then check the auto-generated file, the graph does splendid work and most times the file doesn't need tweaking and you can just deploy directly, but following my tutorial (Personal Crypto Savings Dapp) series, a little tweaking is needed.

Change the code in the schema.graphql file in the root directory to the following updated code:

type EtherLocked @entity(immutable: true) {
  id: ID!
  name: String! # string
  owner: Bytes! # address
  amount: BigInt! # uint256
  releaseTime: BigInt! # uint256
  lockType: String! 
  locked: Boolean
  blockNumber: BigInt!
  blockTimestamp: BigInt!
  transactionHash: Bytes!
}

type EtherUnlocked @entity(immutable: true) {
  id: ID!
  name: String! # string
  owner: Bytes! # address
  amount: BigInt! # uint256
  locked: Boolean
  blockNumber: BigInt!
  blockTimestamp: BigInt!
  transactionHash: Bytes!
}

type LockupTimeExtended @entity(immutable: true) {
  id: ID!
  name: String! # string
  owner: Bytes! # address
  releaseTime: BigInt! # uint256
  blockNumber: BigInt!
  blockTimestamp: BigInt!
  transactionHash: Bytes!
}

type OwnershipTransferred @entity(immutable: true) {
  id: ID!
  previousOwner: Bytes! # address
  newOwner: Bytes! # address
  blockNumber: BigInt!
  blockTimestamp: BigInt!
  transactionHash: Bytes!
}

Here I updated the schema and changed some types for better querying results. After this run:

graph codegen

This would update the generated folder with the new types and fields obtained from the update of the schema.graphql, to complete this we will need to change some things in a file under the src folder to:

import {
  EtherLocked as EtherLockedEvent,
  EtherUnlocked as EtherUnlockedEvent,
  LockupTimeExtended as LockupTimeExtendedEvent,
  OwnershipTransferred as OwnershipTransferredEvent,
} from "../generated/CryptoSaves/CryptoSaves";
import {
  EtherLocked,
  EtherUnlocked,
  LockupTimeExtended,
  OwnershipTransferred,
} from "../generated/schema";

export function handleEtherLocked(event: EtherLockedEvent): void {
  let entity = EtherLocked.load(event.params.id.toString());

  if (!entity) {
    entity = new EtherLocked(event.params.id.toString());
  }
  entity.name = event.params.name;
  entity.owner = event.params.owner;
  entity.amount = event.params.amount;
  entity.releaseTime = event.params.releaseTime;
  entity.lockType = event.params.lockType;
  entity.locked = true;
  entity.blockNumber = event.block.number;
  entity.blockTimestamp = event.block.timestamp;
  entity.transactionHash = event.transaction.hash;

  entity.save();
}

export function handleEtherUnlocked(event: EtherUnlockedEvent): void {
  let entity = EtherLocked.load(event.params.id.toString());

  if (!entity) {
    return;
  }
  entity.locked = false;
  entity.blockNumber = event.block.number;
  entity.blockTimestamp = event.block.timestamp;
  entity.transactionHash = event.transaction.hash;

  entity.save();
}

export function handleLockupTimeExtended(event: LockupTimeExtendedEvent): void {
  let entity = EtherLocked.load(event.params.id.toString());
  if (!entity) {
    return;
  }
  entity.releaseTime = event.params.releaseTime;
  entity.blockNumber = event.block.number;
  entity.blockTimestamp = event.block.timestamp;
  entity.transactionHash = event.transaction.hash;

  entity.save();
}

export function handleOwnershipTransferred(
  event: OwnershipTransferredEvent
): void {
  let entity = new OwnershipTransferred(event.transaction.hash.toString());
  entity.previousOwner = event.params.previousOwner;
  entity.newOwner = event.params.newOwner;
  entity.blockNumber = event.block.number;
  entity.blockTimestamp = event.block.timestamp;
  entity.transactionHash = event.transaction.hash;

  entity.save();
}

I am essentially doing another layer of checks before updating the fields after each event has been emitted.

Deploy

graph deploy --studio <SUBGRAPH_NAME>

This deploys your subgraph to production, enabling querying from either the playground or in your front-end application.

Querying Subgraph

A subgraph can be queried from the frontend application or from the playground that the subgraph studio offers, which I find very helpful.

Just like in the image you can write queries on the left side of the playground and get results on the right part. An explorer tab is also on the right part; which auto-generates queries by just clicking on the desired parameters.

Frontend Application querying can be done in 3 different ways:

I prefer to use the Apollo client, and I will use this in the frontend aspect of the crypto savings dapp in my next tutorial.

Conclusion

Congratulations on making it to the end of this tutorial!🎉 You should now have a good understanding of what subgraphs are, why they are useful, and how to initialize, deploy, and query them. With this knowledge, you can begin creating your subgraphs to interact with various contracts and gain insights into their behavior. Run into a wall? ask away in the comments.

Build A Personal Crypto Savings Dapp (Part 1)

Adebayo Olamilekan — Thu, 29 Feb 2024 03:40:15 +0000

Having a personal savings app for locking crypto (ether) can be fascinating and peaceful, but for those seeking returns (APY/APR), researching staking platforms becomes crucial to avoid scams. Interested? Let's build it together. Not interested? No harm; learn or critique. Let's Build!!

Introduction and Prerequisites
Contract Initialization
Variables, Mappings and Structs
Constructor Function
Main Functions
The Getter Functions
Contract Wrap Up
Contract Testing
Contract Deployment and Verification
Conclusion

Introduction and Prerequisites

This is the first part of a three-part series of building the savings dapp, In this journey, I'm adopting a backend-first approach, a preference rooted in the advantages it offers like precision in frontend parameters and Optimized development workflow.

The following tools and technologies will be used in the writing, test, and deployment of this smart contract:

Having an idea of how any the above works will make this more understandable, but if you're a total beginner then fear not, dearest gentle reader [In Lady Whisledown's Voice].

Feel free to explore the completed contract's repository here – clone it and follow the steps. Don't hesitate to give the repository a star! 😉. Additionally, you can inspect the deployed contract on the Polygon Mumbai Explorer here.

If you wish to try starting from scratch and walk your to the top then, run the following commands to set up the project:

forge init crypto-saves

If the command throws an error, maybe you don't have forge installed on your PC then you can start by following the installation process in a previous tutorial or on the official site .

After the initialization of the project, we will then install the Openzeppelin contracts library - this gives us some ready-to-use contracts that will be needed later on.

cd crypto-saves
forge install OpenZeppelin/openzeppelin-contracts

Then open your project in VS Code with code . In the foundry.toml file in your root directory replace this with the one currently in there;

[profile.default]
optimizer = true
optimizer_runs = 20000
solc_version = '0.8.20'

[profile.ci]
fuzz-runs = 10_000

[fmt]
line_length = 120

Then create a new file in the src folder named CryptoSaves.sol. In this file we are going to write out all the functions and security checks the savings dapps would need; some of the main ones are:

lockEther: To lock the crypto (ether)
unlockEther: To unlock your ether after saving
extendLockTime: Increases the locking period of a savings
withdrawAllEther: Withdraws all your crypto as long as the first lockup time has passed.
emergencyWithdraw: Allows you to withdraw your ether as long as the emergency time set has passed.

Contract Initialization

To set up the contract, In the CryptoSaves.sol file write the below block of code;

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

import {Ownable} from "../lib/openzeppelin-contracts/contracts/access/Ownable.sol";

/// @title Crypto Saving Contract
/// @author Oleanji 
/// @notice A contracts that locks funds for a a particular period of time

contract CryptoSaves is Ownable(msg.sender) {
// Rest of the contract will be written here
}

The code begins by specifying the license (MIT), and then indicates that we are using a version of the Solidity compiler equal to or greater than 0.8.13 (^0.8.13). This Solidity code defines a contract named CryptoSaves that imports the Ownable contract from the OpenZeppelin library and makes it the parent contract.

We are passing the msg.sender argument to indicate that the deployer of the contract will become its initial owner.

Variables, Mappings, and Structs

These are essentials in writing the functions for this contract, so next we define them before the main parts of the contract:

    error CannotLockZeroEther();
    error LockupIsntLocked();
    error UnlockTimeHasNotReached();
    error AdditionalMonthsShouldBeMoreThanZero();
    error NoLockupHasBeenDone();

    event EtherLocked(
        uint256 indexed id,
        string name,
        address owner,
        uint256 amount,
        uint256 releaseTime,
        string lockType
    );
    event EtherUnlocked(
        uint256 indexed id,
        string name,
        address owner,
        uint256 amount
    );
    event LockupTimeExtended(
        uint256 indexed id,
        string name,
        address owner,
        uint256 releaseTime
    );

    struct Lockup {
        uint256 lockId;
        string name;
        string lockType;
        uint256 amount;
        uint256 releaseTime;
        bool locked;
    }

    mapping(uint256 => Lockup) public lockups;

    uint256 public emergencyUnlockTimestamp;
    uint private lockIdTracker = 0;

The five custom error messages are defined at the beginning of the contract, these errors will be thrown when appropriate conditions are not met during contract execution. After Three events are defined:

EtherLocked: Fired upon successful ether lock-up,
EtherUnlocked: Emitted when ether is unlocked,
LockupTimeExtended: Triggered when extending lockup durations,

Events serve as a mechanism to notify interested parties about significant changes occurring within a smart contract.

Next, a struct called Lockup is declared, which contains several fields; This struct represents a single lockup entry, storing information about how much Ether was deposited, when it should be unlocked, and whether it is currently locked or not. [Like a savings box].

Following that, a mapping called lockups is created, which maps each lock ID to its corresponding Lockup struct. This allows easy lookups of specific lock entries based on their ID numbers.

Two variables are declared next: emergencyUnlockTimestamp and lockIdTracker. emergencyUnlockTimestamp stores the timestamp at which an emergency unlock function becomes available, while lockIdTracker keeps track of the last assigned lock ID number and is used to generate unique IDs for new lockups [Using this in place of Counters.sol].

Constructor Function

constructor(uint256 _months) {
        lockIdTracker += 1;
        emergencyUnlockTimestamp = block.timestamp + (_months * 30 days);
    }

The constructor function is a special function that gets executed only once - when the contract is deployed. Here it initializes the contract with a lockup period of _months months. It increments the lockIdTracker and calculates the emergencyUnlockTimestamp based on the input _months. Once set, the emergencyUnlockTimestamp cannot be changed.

Main Functions

LockEther Function: The lockEther function permits the contract owner to lock ether for a specified duration. Parameters accepted are:

_months: Specifies the lockup duration in months.
_name: Provides a descriptive label for the lockup.
_lockType: Represents the type of lockup being initiated.

When invoked with valid inputs, it creates a new lockup entry with a unique ID, computes the release time, and emits an "Ether Locked" event.

function lockEther(
        uint256 _months,
        string memory _name,
        string memory _lockType
    ) external payable onlyOwner {
        if (msg.value <= 0) revert CannotLockZeroEther();
        uint256 releaseTime = block.timestamp + (_months * 30 days);
        uint256 lockId = lockIdTracker;
        lockups[lockId] = Lockup(
            lockId,
            _name,
            _lockType,
            msg.value,
            releaseTime,
            true
        );
        lockIdTracker += 1;
        emit EtherLocked(
            lockId,
            _name,
            msg.sender,
            msg.value,
            releaseTime,
            _lockType
        );
    }

UnlockEther Function: The unlockEther function unlocks an already locked ether in the contract and sends the ether back to the owner; as long as the unlock time time has passed; It accepts a single parameter: _lockID: the unique identifier for each lockup made in the contract. It also emits an EtherUnlocked event after the ether has been transferred to the owner.

 function unlockEther(uint256 _lockId) external onlyOwner {
        if (!lockups[_lockId].locked) revert LockupIsntLocked();
        if (block.timestamp < lockups[_lockId].releaseTime)
            revert UnlockTimeHasNotReached();
        uint256 amountToTransfer = lockups[_lockId].amount;
        lockups[_lockId].amount = 0;
        lockups[_lockId].locked = false;
        payable(msg.sender).transfer(amountToTransfer);
        emit EtherUnlocked(
            _lockId,
            lockups[_lockId].name,
            msg.sender,
            amountToTransfer
        );
    }

ExtendLockTime Function: Sometimes we are just not ready to open our piggy banks, so we extend the day we properly open it to become very rich [like I thought when I was a kid]. This function essentially does the same by accepting the additional months then adding that to the already to the releaseTime, then emitting an LockupTimeExtended event.

function extendLockTime(
        uint256 _additionalMonths,
        uint256 _lockId
    ) external onlyOwner {
        if (_additionalMonths <= 0)
            revert AdditionalMonthsShouldBeMoreThanZero();
        if (!lockups[_lockId].locked) revert LockupIsntLocked();
        uint256 newReleaseTime = lockups[_lockId].releaseTime +
            (_additionalMonths * 30 days);
        lockups[_lockId].releaseTime = newReleaseTime;
        emit LockupTimeExtended(
            _lockId,
            lockups[_lockId].name,
            msg.sender,
            newReleaseTime
        );
    }

The Getter Functions

The are functions that just return the data from the blockain and do not modify or change the state of the contract also known as view functions.

getAllLockUps(): Retrieves complete lockup inventory maintained by the contract. Returns an array of Lockup instances, encompassing all entries. Parameterless, designed as a public view function.
getLockupDetailsById(): Extracts granular information regarding a specific lockup identified via its unique ID.
Accepts a single parameter, _lockId, identifying the target lockup entry.
Returns detailed information encapsulating the requested lockup as a Lockup instance.

Contract Wrap Up

The last part of the smart contract code is a receive function fallback function specifically crafted to accept incoming ether transfers.

receive() external payable {}

After this, the whole smart contract should look like the below,
I added some comments to better explain the code.

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

import {Ownable} from "../lib/openzeppelin-contracts/contracts/access/Ownable.sol";

/// @title Crypto Saving Contract
/// @author Oleanji
/// @notice A contracts that locks funds for a a particular period of time

contract CryptoSaves is Ownable(msg.sender) {
    /// -----------------------------------------------------------------------
    /// Errors
    /// -----------------------------------------------------------------------
    error CannotLockZeroEther();
    error LockupIsntLocked();
    error UnlockTimeHasNotReached();
    error AdditionalMonthsShouldBeMoreThanZero();
    error NoLockupHasBeenDone();

    /// -----------------------------------------------------------------------
    /// Events
    /// -----------------------------------------------------------------------

    event EtherLocked(
        uint256 indexed id,
        string name,
        address owner,
        uint256 amount,
        uint256 releaseTime,
        string lockType
    );
    event EtherUnlocked(
        uint256 indexed id,
        string name,
        address owner,
        uint256 amount
    );
    event LockupTimeExtended(
        uint256 indexed id,
        string name,
        address owner,
        uint256 releaseTime
    );

    /// -----------------------------------------------------------------------
    /// Structs
    /// -----------------------------------------------------------------------
    struct Lockup {
        uint256 lockId;
        string name;
        string lockType;
        uint256 amount;
        uint256 releaseTime;
        bool locked;
    }

    /// -----------------------------------------------------------------------
    /// Mappings
    /// -----------------------------------------------------------------------
    mapping(uint256 => Lockup) public lockups;

    /// -----------------------------------------------------------------------
    /// Variables
    /// -----------------------------------------------------------------------
    uint256 public emergencyUnlockTimestamp;
    uint private lockIdTracker = 0;

    /// -----------------------------------------------------------------------
    /// Constructor
    /// -----------------------------------------------------------------------
    constructor(uint256 _months) {
        lockIdTracker += 1;
        emergencyUnlockTimestamp = block.timestamp + (_months * 30 days);
    }

    /// -----------------------------------------------------------------------
    /// External functions
    /// -----------------------------------------------------------------------

    /// @notice locks your ether for a specific amount of month
    /// @param _months the number of months to lock the ether for
    function lockEther(
        uint256 _months,
        string memory _name,
        string memory _lockType
    ) external payable onlyOwner {
        if (msg.value <= 0) revert CannotLockZeroEther();
        uint256 releaseTime = block.timestamp + (_months * 30 days);
        uint256 lockId = lockIdTracker;
        lockups[lockId] = Lockup(
            lockId,
            _name,
            _lockType,
            msg.value,
            releaseTime,
            true
        );
        lockIdTracker += 1;
        emit EtherLocked(
            lockId,
            _name,
            msg.sender,
            msg.value,
            releaseTime,
            _lockType
        );
    }

    /// @notice unlocks ether when the unlock date has reached
    /// @param _lockId the Id of the lockUp you want to unlock
    function unlockEther(uint256 _lockId) external onlyOwner {
        if (!lockups[_lockId].locked) revert LockupIsntLocked();
        if (block.timestamp < lockups[_lockId].releaseTime)
            revert UnlockTimeHasNotReached();
        uint256 amountToTransfer = lockups[_lockId].amount;
        lockups[_lockId].amount = 0;
        lockups[_lockId].locked = false;
        payable(msg.sender).transfer(amountToTransfer);
        emit EtherUnlocked(
            _lockId,
            lockups[_lockId].name,
            msg.sender,
            amountToTransfer
        );
    }

    /// @notice extends lock time ether when the unlock date has reached
    /// @param _lockId the Id of the lockUp you want to edit its date
    /// @param _additionalMonths the number of months to increase the lock up for
    function extendLockTime(
        uint256 _additionalMonths,
        uint256 _lockId
    ) external onlyOwner {
        if (_additionalMonths <= 0)
            revert AdditionalMonthsShouldBeMoreThanZero();
        if (!lockups[_lockId].locked) revert LockupIsntLocked();
        uint256 newReleaseTime = lockups[_lockId].releaseTime +
            (_additionalMonths * 30 days);
        lockups[_lockId].releaseTime = newReleaseTime;
        emit LockupTimeExtended(
            _lockId,
            lockups[_lockId].name,
            msg.sender,
            newReleaseTime
        );
    }

    /// @notice Withdraws all amount in the contract as long as you have locked once
    function withdrawAllEther() external onlyOwner {
        uint256 currentId = lockIdTracker;
        if (currentId == 0 || address(this).balance <= 0)
            revert NoLockupHasBeenDone();
        if (block.timestamp < lockups[1].releaseTime)
            revert UnlockTimeHasNotReached();
        uint256 amountToTransfer = address(this).balance;
        payable(msg.sender).transfer(amountToTransfer);
    }

    /// @notice Withdraws all amount in the contract as long as the emergency lock period has passed
    function emergencyWithdraw() external onlyOwner {
        uint256 currentId = lockIdTracker;
        if (currentId == 0 || address(this).balance <= 0)
            revert NoLockupHasBeenDone();
        if (
            emergencyUnlockTimestamp > lockups[currentId].releaseTime &&
            emergencyUnlockTimestamp > block.timestamp
        ) revert UnlockTimeHasNotReached();
        uint256 amountToTransfer = address(this).balance;
        payable(msg.sender).transfer(amountToTransfer);
    }

     /// @notice Gets all the Lockups created
    function getAllLockUps() external view returns (Lockup[] memory) {
        uint256 total = lockIdTracker;
        Lockup[] memory lockup = new Lockup[](total);
        for (uint256 i = 1; i < total; i++) {
            lockup[i] = lockups[i];
        }
        return lockup;
    }

    /// @notice Gets specific lock up details
    /// @param _lockId the Id of the lockUp you want details for
    function getLockupDetailsById(
        uint256 _lockId
    ) external view returns (Lockup memory) {
        Lockup memory lockDetails = lockups[_lockId];
        return (lockDetails);
    }

    receive() external payable {}
}

Run this to build and compile the contract written so far.

forge build

Contract Testing

To test the CryptoSaves contract already written we will need to write a test script for this in the test folder named CryptoSaves.t.sol, In this script we will test each of the following:

Creating a lockup using the lockEther Function
Unlocking a created lockup using the unlockEther Function
Extending the lockup time for a lockup
Getting all Lockups data with the GetAllLockUps() function
Getting a single lockup data with the getLockupDetailsById() function
Then replicating all the errors listed in the contract.

This is all shown in the below script with more comments to explain each line.

Use forge test to run the test script, add a v flag to increase the verbosity i.e for more details from running the test script so I mostly use
forge test -vvvv

// SPDX-License-Identifier: UNLICENSED
pragma solidity ^0.8.13;

import "forge-std/Test.sol";
import "../src/CryptoSaves.sol";
import "forge-std/console.sol";

contract CryptoSavesCheatsTest is Test {
    CryptoSaves public cryptoSaves;
    address alice = vm.addr(0x2);

    function setUp() public {
        vm.startPrank(alice);
        cryptoSaves = new CryptoSaves(8); //using 8 months as my emergency time
        vm.stopPrank();
    }

    function testLockEther() public {
        vm.startPrank(alice);

        /// crediting aka dealing 200 ethers to alice account
        vm.deal(alice, 200 ether);

        // first lockup
        cryptoSaves.lockEther{value: 5 ether}(3, "LockUpOne", "Fees");
        assertEq(cryptoSaves.getLockupDetailsById(1).amount, 5e18);

        // second lockup
        cryptoSaves.lockEther{value: 50 ether}(6, "LockUpTwo", "Family");
        assertEq(cryptoSaves.getLockupDetailsById(2).amount, 50e18);

        vm.stopPrank();
    }

    function testUnlockEther() public {
        vm.startPrank(alice);

        vm.deal(alice, 60 ether);

        // Locking up 5 ether for 3*30 days
        cryptoSaves.lockEther{value: 5 ether}(3, "My First LockUp", "Fees");
        assertEq(cryptoSaves.getLockupDetailsById(1).amount, 5e18);

        // Locking up 50 ether for 6*30 days
        cryptoSaves.lockEther{value: 50 ether}(6, "My Second LockUp", "Travel");
        assertEq(cryptoSaves.getLockupDetailsById(2).amount, 50e18);

        // skips forward into the future to  3*30 days from now to be able to unlock
        skip(7776001);

        // unlocks
        cryptoSaves.unlockEther(1);
        assertEq(cryptoSaves.getLockupDetailsById(1).locked, false);
        assertEq(address(alice).balance, 10e18);

        // skips more forward into the future to  3*30 days
        // so a total of 6*30 days from now to be able to unlock
        skip(7776001);

        //second unlock
        cryptoSaves.unlockEther(2);
        assertEq(cryptoSaves.getLockupDetailsById(2).locked, false);
        assertEq(address(alice).balance, 60e18);

        vm.stopPrank();
    }

    function testExtendLockTime() public {
        vm.startPrank(alice);

        vm.deal(alice, 60 ether);

        // Locking up 5 ether for 3*30 days
        cryptoSaves.lockEther{value: 5 ether}(3, "LockUpOne", "Fees");
        assertEq(cryptoSaves.getLockupDetailsById(1).amount, 5e18);

        cryptoSaves.extendLockTime(3, 1);
        assertGt(cryptoSaves.getLockupDetailsById(1).releaseTime, 7776001);
    }

    function testGetAllLockUps() public {
        vm.startPrank(alice);
        vm.deal(alice, 60 ether);

        // third lockup
        cryptoSaves.lockEther{value: 5 ether}(3, "LockUpOne", "Fees");
        // second lockup
        cryptoSaves.lockEther{value: 7 ether}(6, "LockUpTwo", "Fees");
        //third lockup
        cryptoSaves.lockEther{value: 21 ether}(6, "LockUpThree", "Pets");
        //fourth lockup
        cryptoSaves.lockEther{value: 11 ether}(6, "LockUpFour", "Festivals");

        // now check for all lockupdetails

        //first lockup
        assertEq(cryptoSaves.getAllLockUps()[1].amount, 5e18);
        assertEq(cryptoSaves.getAllLockUps()[1].locked, true);

        //second lockup
        assertEq(cryptoSaves.getAllLockUps()[2].amount, 7e18);
        assertEq(cryptoSaves.getAllLockUps()[2].locked, true);
        //third lockup
        assertEq(cryptoSaves.getAllLockUps()[4].amount, 11e18);
        assertEq(cryptoSaves.getAllLockUps()[4].locked, true);

        vm.stopPrank();
    }

    function testGetLockupDetailsById() public {
        vm.startPrank(alice);
        vm.deal(alice, 10 ether);

        // Locking up 5 ether for 3*30 days
        cryptoSaves.lockEther{value: 10 ether}(3, "LockUpOne", "Fees");
        assertEq(cryptoSaves.getLockupDetailsById(1).amount, 10e18);
        assertEq(cryptoSaves.getLockupDetailsById(1).locked, true);
        assertEq(cryptoSaves.getLockupDetailsById(1).lockId, 1);

        assertGt(
            cryptoSaves.getLockupDetailsById(1).releaseTime,
            3 * 30 * 24 * 60 * 60
        );
        // the months * days*hrs*min*sec
    }

    function testWithdrawAllEther() public {
        vm.deal(address(cryptoSaves), 4 ether);

        vm.startPrank(alice);

        vm.deal(alice, 60 ether);

        cryptoSaves.lockEther{value: 5 ether}(3, "LockUpOne", "Fees");
        assertEq(cryptoSaves.getLockupDetailsById(1).locked, true);

        skip(7776001);

        //withdraws all the money in the contract
        cryptoSaves.withdrawAllEther();
        assertEq(address(alice).balance, 64e18);

        vm.stopPrank();
    }

    function testEmergencyWithdraw() public {
        vm.deal(address(cryptoSaves), 48 ether);
        vm.startPrank(alice);
        vm.deal(alice, 10 ether);

        cryptoSaves.lockEther{value: 6 ether}(3, "My First LockUp", "Fees");
        assertEq(cryptoSaves.getLockupDetailsById(1).amount, 6e18);
        assertEq(
            cryptoSaves.getLockupDetailsById(1).amount + address(alice).balance,
            10e18
        );
        // the emergency withdraw time is after 8*30 daysso to to skip intime after then

        skip(8 * 30 * 24 * 60 * 60 + 1);

        //withdraws all the money in the contract for emergencies
        cryptoSaves.emergencyWithdraw();

        assertEq(address(alice).balance, 58e18);

        vm.stopPrank();
    }

    function testCannotLockZeroEther() public {
        vm.startPrank(alice);
        vm.expectRevert(CryptoSaves.CannotLockZeroEther.selector);
        cryptoSaves.lockEther{value: 0 ether}(3, "First Locking", "Pets");
        vm.stopPrank();
    }

    function testLockupIsntLocked() public {
        vm.startPrank(alice);
        vm.deal(alice, 10 ether);

        cryptoSaves.lockEther{value: 6 ether}(3, "LockUp", "Fees");
        assertEq(cryptoSaves.getLockupDetailsById(1).locked, true);

        skip(3 * 30 * 24 * 60 * 60 + 1);
        cryptoSaves.unlockEther(1);
        vm.expectRevert(CryptoSaves.LockupIsntLocked.selector);
        cryptoSaves.extendLockTime(1, 1);
        vm.stopPrank();
    }

    function testUnlockTimeHasNotReached() public {
        vm.startPrank(alice);
        vm.deal(alice, 10 ether);

        cryptoSaves.lockEther{value: 6 ether}(3, "LockUp No1", "Fees");

        vm.expectRevert(CryptoSaves.UnlockTimeHasNotReached.selector);
        cryptoSaves.unlockEther(1);

        //skip by a month to test if it will go through
        skip(1 * 30 * 24 * 60 * 60 + 1);

        vm.expectRevert(CryptoSaves.UnlockTimeHasNotReached.selector);
        cryptoSaves.withdrawAllEther();
        //skip by another month totest if it will go through
        skip(1 * 30 * 24 * 60 * 60 + 1);

        vm.expectRevert(CryptoSaves.UnlockTimeHasNotReached.selector);
        cryptoSaves.emergencyWithdraw();

        vm.stopPrank();
    }

    function testAdditionalMonthsShouldBeMoreThanZero() public {
        vm.startPrank(alice);
        vm.deal(alice, 10 ether);

        cryptoSaves.lockEther{value: 6 ether}(3, "My First LockUp", "Fees");

        vm.expectRevert(
            CryptoSaves.AdditionalMonthsShouldBeMoreThanZero.selector
        );
        cryptoSaves.extendLockTime(0, 1);
        vm.stopPrank();
    }

    function testNoLockupHasBeenDone() public {
        vm.startPrank(alice);
        assertEq(address(cryptoSaves).balance, 0);

        vm.expectRevert(CryptoSaves.NoLockupHasBeenDone.selector);
        cryptoSaves.emergencyWithdraw();

        vm.stopPrank();
    }
}

Contract Deployment and Verification

This is the last part of building this project, here we will deploy and verify the contract to the polygon Mumbai test network, Before that we need to write our deployment script which essentially shows the deployment of the CryptoSaves contract, along with an eight-month emergency lock period.

// SPDX-License-Identifier: UNLICENSED
pragma solidity ^0.8.13;

import {Script} from "../lib/forge-std/src/Script.sol";
import {console} from "../lib/forge-std/src/console.sol";
import {CryptoSaves} from "../src/CryptoSaves.sol";

contract CryptoSavesScript is Script {
    function run() external {
        vm.startBroadcast();
        console.log(
            "....Deploying CryptoSaves deployer with 8 months emergency lock period.... "
        );
        CryptoSaves cryptoSave = new CryptoSaves(8);
        console.log("CryptoSaves Contract Deployed To:", address(cryptoSave));
        vm.stopBroadcast();
    }
}

To run this script, we will use the below command which not only deploys the contract but also verifies it on the polygon mumbai test network.

forge script script/CryptoSaves.s.sol:CryptoSavesScript --rpc-url RPC_URL  --private-key YOUR_PRIVATE_KEY --broadcast --verify --etherscan-api-key YOUR_POLYGONSCAN_API -vvvv --gas-price 60 --legacy

To use this command you will need:

RPC_URL : This is a url needed to deploy the contract and you can get it from different providers, but in this tutorial I am using Ankr.
YOUR_PRIVATE_KEY: This is the key of the account you want to use for deployment which shouldn't be shared with anyone. You can get some mumbai test token to use for deployment here
YOUR_POLYGONSCAN_API: In order to verify the contract you will need an api key from polygon, you can get that by creating and account then an api key.

After getting all the keys and replacing them you can now run the command to deploy and verify your crypto saves contract.

From the result obtained here, the contract was deployed to:

Address: 0x4b1D98AF1af713456c1fC86Afed67b94c4648f6d
Polygon Mumbai Link: CryptoSaves Contract

Conclusion

This marks the end of our journey in this tutorial. I hope you found this helpful and resourceful, have any questions? leave a comment.

Now you have a fully deployed and verified personal crypto savings contract. Feels good right!

Note: The code for this project is here.

11 Ways to Improve Website Performance in Next.js Webpages

Adebayo Olamilekan — Mon, 21 Aug 2023 19:06:44 +0000

In today's rapidly evolving digital landscape, optimizing your website's performance and enhancing user experience are paramount to capturing user engagement and achieving higher search engine rankings. This comprehensive guide delves into essential strategies and techniques tailored for Next.js applications to amplify performance and deliver an exceptional browsing experience. Let's embark on this journey to elevate your website's performance and user satisfaction!

Performance Testing Prerequisites

Before testing your website's performance using Lighthouse:

Incognito Mode: Test in incognito mode without browser extensions to ensure accurate results.
Build Your Site: Run yarn build or npm run build to build your Next.js application.
Production Build: Only test the performance of a production build, not a development version. Start your server with yarn start or npm run start.

1. Server-side Rendering (SSR)

Leverage Next.js's inbuilt Server-side Rendering (SSR) capabilities to minimize Time to First Paint (TTFP) and enrich user experience. SSR generates initial HTML on the server, resulting in reduced client-side rendering time.

2. Code Splitting and Lazy Loading

Divide your code into smaller units through dynamic imports (import()) to load components on-demand. This approach minimizes initial load times by deferring the loading of non-critical components. Consider a blog site where comment sections or large images are loaded only when necessary.

import dynamic from 'next/dynamic';

const LazyComponent = dynamic(() => import('./LazyComponent'));

function HomePage() {
  return (
    <div>
      {/* Other content */}
      <LazyComponent />
    </div>
  );
}

3. Optimize Images

Optimize images for modern formats like WebP and adopt responsive images with Next.js's <Image> component. This reduces file sizes and improves load times.

import Image from 'next/image';

<Image
  src="/images/my-image.webp"
  alt="An optimized image"
  width={1200}
  height={800}
  layout="responsive"
/>

4. Bundle Analysis

Employ tools like webpack-bundle-analyzer to dissect your bundles and identify heavy dependencies. Trim unnecessary code and optimize bundles for faster loading.

5. Minification and Compression

Minify CSS and JavaScript to eliminate unnecessary characters. Enable Gzip or Brotli compression on your server to shrink transfer sizes.

6. Reduce Third-Party Dependencies

Prune third-party libraries judiciously, ensuring they align with performance goals. Over-reliance on external dependencies can introduce performance bottlenecks.

7. Monitoring

Regularly gauge performance with tools like Lighthouse, PageSpeed Insights, and real user monitoring. Track progress and address issues promptly.

8. Optimizing Third-Party Scripts

Use Next.js's Script component to optimize loading for third-party JavaScript. Fetch and execute scripts as needed, avoiding delays in page rendering.

import Script from 'next/script';

function IndexPage() {
  return (
    <div>
      <Script
        strategy="afterInteractive"
        src="https://www.googletagmanager.com/gtag/js?id=123"
      />
    </div>
  );
}

9. Alt Text for Images

Enhance accessibility with meaningful alt attributes for images. This ensures screen readers convey the image's purpose to visually impaired users.

import Image from 'next/image';

<Image
  src="/images/my-image.webp"
  alt="An optimized image"
  width={1200}
  height={800}
  layout="responsive"
/>

10. Remove Unused Dependencies

Regularly prune unused dependencies from your project to minimize bloat and enhance performance.

11. Font Optimization using Next Fonts

Leverage Next.js's built-in Automatic Webfont Optimization. By inlining font CSS at build time, you eliminate the extra round trip required to fetch font declarations. This optimization leads to improvements in First Contentful Paint (FCP) and Largest Contentful Paint (LCP), two key Core Web Vitals metrics.

Another notable approach is the use of next/font, which automatically optimizes fonts (including custom fonts) and removes external network requests for enhanced privacy and performance.

import { Inter } from 'next/font/google'

// If loading a variable font, you don't need to specify the font weight
const inter = Inter({ subsets: ['latin'] })

export default function MyApp({ Component, pageProps }) {
  return (
    <main className={inter.className}>
      <Component {...pageProps} />
    </main>
  )
}

Conclusion

By adhering to these strategies, you can transform your Next.js application into a high-performing platform that delights users and appeals to search engines. Continuous monitoring and refinement are key to upholding your website's standards and delivering a seamless user experience. For further insights, explore the Improving your Core Web Vitals guide on the Next.js website.

Embrace the journey of optimization and witness the transformation of your website's performance!

Earn free tokens from Axia

Adebayo Olamilekan — Wed, 26 Apr 2023 23:41:52 +0000

Axia Ecosystem is a revolutionary platform that seeks to bring creators and their audience closer through innovative incentive motivation. At Axia, we understand the challenges that content creators face in reaching their target audience and earning a sustainable income. That's why we have created a platform that rewards users for engaging with content creators.

Axia Ecosystem is built on Lens Protocol, Polygon Blockchain, and Question Gen AI. It is an idea birthed during the Season 3 of buildspace nights-and-weekends program, which seeks to empower anyone to build and launch their own ideas.

To attract users to our platform, we are offering two ways to collect tokens:

Uploading an article to Axia Ecosystem
Passing a random quiz.

In this article, we will discuss these two ways in detail and explain how you can start collecting tokens on our platform.

Section 1: Upload an Article to Axia Ecosystem

Axia is offering ONE Polygon Mumbai token to anyone who uploads an article to the platform. This is a great opportunity for content creators/developers to earn cryptocurrency while showcasing their work to a wider audience. By uploading an article to Axia, you'll also gain exposure to potential new fans and supporters (surely when Axia ecosystem launches 🎉).

To upload an article on Axia Ecosystem:

Simply go to Axia

Connect your wallet to Axia on the polygon network (either testnet or mainnent)
Go to the articles page; now click on Create New Article

Write your story and then post

Note: Add a low res image to boost the transaction

There would be 3 transaction needed to be signed this is using the postSig lens function, (we apologize for the discomfort)

Collect Reward 🎉🎉

First, change your network to Mumbai by clicking the button, then click again to claim.

The link of the contract used for claiming tokens is AxiaMumbaiDisperser

Section 2: Pass a Random Quiz on Axia Ecosystem

In addition to earning a Polygon Mumbai token for uploading an article to Axia Ecosystem, users can earn an additional token by passing a random quiz on the platform.

To take the quiz on Axia Ecosystem:

Briefly read the story for which the quiz is about (in the articles page).

Navigate to the "Random Quiz" section and follow the instructions provided. The quiz is administered by Question Gen AI and consists of a set of multiple-choice questions.

Once you pass the quiz (with a score of 4/10 or higher), you'll earn another Polygon Mumbai token by clicking on the 'Collect your rewards' button.

We hope this is very simple and straightforward to follow and understand then try out Axia Ecosystem and engage with its services. Whether you're a content creator or someone just wants to earn some tokens.

Thank you for considering Axia Ecosystem. We look forward to seeing you on the platform!

Hopefully, we launch and this would change from test tokens to real ones, 😉.

Protecting Yourself from DeFi Rug Pulls: Tips and Tricks 🔒💸💡

Adebayo Olamilekan — Sun, 09 Apr 2023 17:48:01 +0000

DeFi has gained immense popularity over the past year, with more and more people turning to decentralized finance platforms to trade, lend, and borrow crypto assets. However, with the increasing popularity of DeFi, there has also been a rise in rug pulls - a term used to describe fraudulent projects that disappear with investors' funds. In this article, we'll explore what rug pulls are and how you can avoid and detect them.

What is a Rug Pull?

A rug pull is a fraudulent practice that is typically carried out by the creators of a DeFi project. The creators lure investors with the promise of high returns and then disappear with the investors' funds. Rug pulls can happen in several ways, but they usually involve a fake project that is designed to look legitimate.

How to Avoid DeFi Rug Pulls

Research the Project: The first step in avoiding rug pulls is to research the DeFi project thoroughly. Check the project's website, read the whitepaper, and understand how the project works. Look for information about the team behind the project and their experience in the industry.
Check the Code: Check the project's code on the blockchain. Look for any vulnerabilities or potential risks. If you're not an experienced developer, you can seek the help of a technical expert.
Analyze the Tokenomics: Look at the project's tokenomics - how the tokens are distributed, how they are used, and how they will be used in the future. Check for any red flags such as a large percentage of tokens held by the project creators.
Examine the Liquidity: Check the liquidity of the project's tokens. If the liquidity is low, it could be a sign that the project is not attracting many investors. However, if the liquidity is too high, it could be a sign that the project creators are trying to pump up the price of the token before pulling the rug.
Avoid Projects with Anonymous Teams: If the team behind the project is anonymous or cannot be verified, it's best to avoid investing in the project. Anonymity can make it difficult to hold the team accountable if something goes wrong.
Look for Audits: Check if the project has been audited by a reputable third-party auditor. Audits can help identify potential vulnerabilities and reduce the risk of rug pulls.

How to Detect DeFi Rug Pulls

Sudden Drop in Price: One of the most common signs of a rug pull is a sudden drop in the token's price. If the price of the token drops significantly and suddenly, it could be a sign that the project creators have pulled the rug.
Project Website Disappears: If the project's website suddenly disappears, it's a clear sign that something is not right. The website could have been taken down by the project creators or the authorities.
Social Media Accounts Disappear: If the project's social media accounts suddenly disappear or go silent, it's a sign that something is wrong. The project creators may be trying to hide from investors or authorities.
Abnormal Trading Volume: If there is a sudden spike in trading volume followed by a drop in price, it could be a sign that the project creators are trying to create hype around the project before pulling the rug.
Locked Liquidity: If the liquidity of the project's tokens is suddenly locked or removed, it's a sign that the project creators are trying to prevent investors from selling their tokens.
Fake News: If the project creators release fake news or false information to create hype around the project, it's a clear sign that something is not right.

Conclusion

DeFi rug pulls are a real threat, and investors need to be cautious, I hope you found this article helpful in understanding the concept of rug pulls and how to avoid them in DeFi projects. Remember to always conduct thorough research before investing in any DeFi project and be cautious of high returns or promises of quick profits. With these precautions in mind, you can navigate the DeFi world safely and potentially reap the rewards of this exciting and rapidly evolving industry.

Exploring Modifiers in Solidity

Adebayo Olamilekan — Thu, 16 Mar 2023 21:21:05 +0000

Solidity is a popular programming language used to write smart contracts on the Ethereum blockchain. Smart contracts are self-executing agreements with the terms of the agreement between buyer and seller being directly written into lines of code. Modifiers are a feature of Solidity that allow developers to add extra checks and conditions to functions in their contracts.

In this article, we will explore what modifiers are, how they work, and why they are useful in Solidity contracts.

What are Modifiers?

Modifiers are pieces of code that can be added to Solidity contracts to modify the behavior of functions. A modifier is like a function in that it has a name, parameters, and code that is executed when it is called. However, a modifier does not have a return value, and it is not called directly by other functions.

Instead, a modifier is used to modify the behavior of other functions in the contract. When a function is modified by a modifier, the modifier's code is executed first. If the modifier's code passes all of its checks and conditions, then the _ symbol in the modifier code is replaced with the code of the modified function. This means that the modified function's code will be inserted in place of the _ symbol, and then the entire modified code will be executed as if it were a single function.

How do Modifiers work?

Modifiers are defined using the modifier keyword, followed by the name of the modifier and any parameters it takes. The code for the modifier is then placed inside curly braces {}. Here's an example of a simple modifier:

Solidity

modifier onlyOwner {
    require(msg.sender == owner);
    _;
}

In this example, we define a modifier called onlyOwner that checks if the address of the sender is equal to the owner of the contract. If the check passes, the _ symbol indicates where the code of the modified function will be inserted. In this case, the modifier is used to restrict access to a function so that only the owner of the contract can call it.

To use a modifier in a function, you simply add the modifier's name to the function definition, like this:

Soldity

function withdraw() public onlyOwner {
    // function code here
}

In this example, we use the onlyOwner modifier to restrict access to the withdraw function. When the withdraw function is called, the code for the onlyOwner modifier is executed first. If the check passes, the _ symbol is replaced with the code for the withdraw function, and the entire modified code is executed.

Why are Modifiers useful?

Modifiers are useful in Solidity contracts for several reasons:

Reducing code duplication: Modifiers allow you to write complex checks and conditions once and then reuse them in multiple functions throughout the contract. This reduces the amount of code you need to write and makes your contract more readable and maintainable.
Improving contract security: Modifiers can be used to add extra checks and conditions to functions, which can help prevent common security vulnerabilities like reentrancy attacks or incorrect access control. By using modifiers to add these checks and conditions, you can make your contract more secure and less prone to bugs or exploits.
Simplifying function definitions: By moving complex checks and conditions to modifiers, you can simplify the definitions of your functions. This makes your functions easier to read and understand, and can help you avoid mistakes or errors when writing new code.
Enforcing consistent behavior: Modifiers allow you to enforce consistent behavior across multiple functions in your contract. For example, you can use a modifier to ensure that only the contract owner can call certain functions, or to check that

In conclusion, modifiers are an essential tool for Solidity developers to ensure that their contracts behave in the desired way and prevent unauthorized access. They provide a simple yet powerful way to apply conditions to functions and can help make your code more reusable, readable, and secure.

Connect Wallet App using WAGMI and Tailwind CSS

Adebayo Olamilekan — Sun, 01 Jan 2023 13:22:19 +0000

In Web3 applications connecting to a user's wallet is one of the most important aspects of the application, as it allows users to interact with the app, like signing transactions, getting profile data through the user's address, etc.

Connecting a wallet to a decentralized application is like logging into a traditional web2 application. Therefore, in building a web3 application this part is essential and If it isn't built well it can reduce the user's experience when using your application.

Using applications like Rainbow kit in your dapp does a wonderful job of connecting the user's wallet, it also has different connection options, but the code is abstracted away and developers sometimes don't know how to implement this functionality.

This is a tutorial for building a connect wallet application you can use in your web3 projects.

Building a connect wallet for your decentralized application.

To build this connect wallet application, these technologies are needed;

WAGMI: It is a collection of React Hooks containing everything you need to start working with Ethereum.
Tailwind CSS: It is a CSS framework that is used to rapidly build modern websites without ever leaving your HTML.
React-icons: This package is used to get icons to use in the interface of the application.
Headless-UI: This contains components that are completely unstyled, and fully accessible, which were designed to integrate beautifully with Tailwind CSS.
Ethers Js: It's a library that is used for interacting with the Ethereum Blockchain and its ecosystem.

The complete application can be found here along with the GitHub repo to this project.

The finished look of the application can be downloaded here.

Let's get started!!! 🚀🚀

Create a new project and open PowerShell/ terminal pointing to that location and run the following:
```
npx create-next-app@latest connect-wallet-app
cd connect-wallet-app

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
npm install @headlessui/react wagmi ethers react-icons

code .
```
The above will install Next Js and other dependencies needed for this tutorial and then opens the project in your code editor.

For this tutorial, choose No for both the typescript and ESlint options, when creating the next app.
Configure your tailwind CSS installation, steps on this can be found in their docs.
Create a new folder in the root of your project and rename it to src and move the pages folder into it. Then create a new sub-folder inside the src folder named config.

Your project tree should look similar to this 👇🏽

To start using wagmi in our application we need a client, therefore a need to configure it.

Inside the config subfolder create a file named wagmi.js and write this inside

import { WalletConnectConnector } from "wagmi/connectors/walletConnect";
import { MetaMaskConnector } from "wagmi/connectors/metaMask";
import { chain, configureChains } from "wagmi";
import { publicProvider } from "wagmi/providers/public";

// using only 2 chains with WAGMI; ETH and Matic(Polygon)
const chainArray = [chain.polygon, chain.mainnet];
export const { chains, provider } = configureChains(chainArray, [
  publicProvider(),
]);

export const connectors = [
  new MetaMaskConnector({ chains, options: { shimDisconnect: true } }),
  new WalletConnectConnector({
    chains,
    options: {
      qrcode: true,
    },
  }),
];

For this tutorial only Metamask and WalletConnect wallets are implemented, you can take this further to accept multiple wallets.

We need to wrap the page components in a wagmi client, this is done in the _app.js file found in the pages subfolder.

import "../../styles/globals.css";
import { createClient, WagmiConfig } from "wagmi";
import { connectors, provider } from "../config/wagmi";

export default function App({ Component, pageProps }) {
  const client = createClient({
    autoConnect: true,
    connectors: connectors,
    provider,
  });
  return (
    <WagmiConfig client={client}>
      <Component {...pageProps} />
    </WagmiConfig>
  );
}

This ends the configuration needed to start building the main part of this application.

Running yarn dev or npm run dev to start the application would still show the default Next js page gotten from the installation. Get rid of that code and put this part in 👇🏽(Part1)

// All the needed imports for this application
import Head from "next/head";
import { useState, useEffect, Fragment } from "react";
import { Listbox, Transition, Dialog } from "@headlessui/react";
import { RiArrowDownSLine } from "react-icons/ri";
import { useNetwork, useAccount, useConnect, useDisconnect } from "wagmi";
import { utils } from "ethers";

export default function Home() {
  //The necessary data needed to use the two chains 
const NETWORK_DATA = [
    {
      id: 1,
      image: "/polygon.png",
      name: "Polygon",
      isActive: true,
      chainNoHex: 137,
      chainId: utils.hexValue(137),
      chainName: "Polygon Mainnet",
      nativeCurrency: { name: "MATIC", symbol: "MATIC", decimals: 18 },
      rpcUrls: ["https://polygon-rpc.com/"],
      blockExplorerUrls: ["https://polygonscan.com"],
    },
    {
      id: 2,
      image: "/eth.png",
      name: "Ethereum",
      isActive: false,
      chainId: utils.hexValue(1),
      chainNoHex: 1,
      chainName: "Ethereum Mainnet",
      nativeCurrency: { name: "Ether", symbol: "ETH", decimals: 18 },
      rpcUrls: ["https://api.mycryptoapi.com/eth"],
      blockExplorerUrls: ["https://etherscan.io"],
    },
  ];
// states used throughtout this project
  const [currentNetwork, setCurrentNetwork] = useState(NETWORK_DATA[0]);
// this sets the network used
  const { chain } = useNetwork();
// this gets the chain the user connected to in the app
  const { isConnected: isUserConnected, address } = useAccount();
// get a boolean for the connection of a user and also their address
  const [isOpen, setIsOpen] = useState(false);
  const [walletDetailsOpen, setWalletDetails] = useState(false);
  const [switchOpen, setSwitchOpen] = useState(false);
  const { disconnect } = useDisconnect();
// this is function used to disconnect a user after connection
 ...
}

The images referred to in the code above can be gotten from here.

This next part of the code; shows the various functions used in the application like the switch network functionality, wallet details modal, etc.

export default function Home() {
...
// this checks if the user is connected to the right chain, if not then it opens a modal for you to switch to the right wallet.
useEffect(() => {
    CheckNetwork();
  }, [isUserConnected, currentNetwork]);

  const CheckNetwork = () => {
    if (isUserConnected && chain?.id !== currentNetwork.chainNoHex) {
      console.log(chain?.id, currentNetwork.chainId);
      openSwitchOpen();
    }
  };

  function closeModal() {
    setIsOpen(false);
  }

  function openModal() {
    setIsOpen(true);
  }

  function closeWalletDetails() {
    setWalletDetails(false);
  }

  function openWalletDetails() {
    setWalletDetails(true);
  }

  function closeSwitchOpen() {
    setSwitchOpen(false);
  }

  function openSwitchOpen() {
    setSwitchOpen(true);
  }

// Logout function
  const logout = () => {
    disconnect();
    closeWalletDetails();
  };

  const { connectors, connect } = useConnect({
    onSuccess() {
      closeModal();
    },
  });
  const getText = (text) => {
    if (text) {
      return "Wallet Details";
    }

    return "Connect Wallet";
  };

  //Switch Network Functionality
  const handleSwitchNetwork = async () => {
    const { chainId, chainName, rpcUrls } = currentNetwork;
    try {
      await window.ethereum?.request({
        method: "wallet_switchEthereumChain",
        params: [{ chainId }],
      });
      closeSwitchOpen();
    } catch (switchError) {
      const err = switchError;
      if (err.code === 4902) {
        try {
          await window.ethereum?.request({
            method: "wallet_addEthereumChain",
            params: [
              {
                chainId,
                chainName,
                rpcUrls,
              },
            ],
          });
          closeSwitchOpen();
        } catch (addError) {
          return null;
        }
      }
    }
    return null;
  };
...
}

All the above code so far shows the function, variables, and logic needed for the connect wallet application.

The handleSwitchNetwork function is called upon when the user isn't connected to the selected network and what this function does is get the current networks info (chainId, name, and rpcUrls) which is used to re-connect the user to that network.

Viewing the output of your project now won't show anything, since there is no frontend code written.

The frontend code is divided into two apects:

-> The Network dropdown and connect wallet button

-> The modals

The first part 👇🏽

export default function Home() {
...
    <>
      <Head>
        <title>Connect Wallet App</title>
        <meta name="description" content="Connect wallet app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <div className="w-full">
        <div
          className={`w-full h-screen flex items-center text-center justify-center bg-orange-300 `}
        >
          <div className=" w-72 mr-6">
            <Listbox value={currentNetwork} onChange={setCurrentNetwork}>
              <div className="relative mt-1">
                <Listbox.Button className="relative w-full cursor-default rounded-lg bg-white py-2 pl-3 pr-10 text-left shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm">
                  <span className="flex items-center ">
                    {" "}
                    <img
                      src={currentNetwork.image}
                      alt={currentNetwork.name}
                      width="34px"
                    />
                    {currentNetwork.name}
                  </span>
                  <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
                    <RiArrowDownSLine
                      className="h-5 w-5 text-gray-400"
                      aria-hidden="true"
                    />
                  </span>
                </Listbox.Button>
                <Transition
                  as={Fragment}
                  leave="transition ease-in duration-100"
                  leaveFrom="opacity-100"
                  leaveTo="opacity-0"
                >
                  <Listbox.Options className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
                    {NETWORK_DATA.map((person, personIdx) => (
                      <Listbox.Option
                        key={personIdx}
                        className={({ active }) =>
                          `relative cursor-default select-none py-2 px-4  ${
                            active
                              ? "bg-amber-100 text-amber-900"
                              : "text-gray-900"
                          }`
                        }
                        value={person}
                      >
                        {({ selected }) => (
                          <>
                            <span
                              className={`flex items-center w-full text-left ${
                                selected ? "font-medium" : "font-normal"
                              }`}
                            >
                              <img
                                src={person.image}
                                alt={person.name}
                                width="34px"
                              />
                              {person.name}
                            </span>
                          </>
                        )}
                      </Listbox.Option>
                    ))}
                  </Listbox.Options>
                </Transition>
              </div>
            </Listbox>
          </div>
          <div>
            <button
              type="button"
              onClick={isUserConnected ? openWalletDetails : openModal}
              className="rounded-lg bg-black bg-opacity-20 px-4 py-2 text-center text-sm font-medium text-white hover:bg-opacity-30 "
            >
              <p>{getText(isUserConnected)}</p>
            </button>
          </div>
...
 </div>
      </div>
    </>
  );
}

The above code should show this output (a dropdown and a button).

There are 3 modals needed for this application as seen in the GIF result of the application; the select wallets modal, the switch network modal and the wallet details modal.

Select Wallet modal is used to choose between the different wallet connectors (metamask and walletconnect).

export default function Home() {
...
return (
...
<Transition appear show={isOpen} as={Fragment}>
            <Dialog as="div" className="relative z-10" onClose={closeModal}>
              <div className="fixed inset-0 overflow-y-auto">
                <div className="flex min-h-full items-center justify-center p-4 text-center">
                  <Dialog.Panel className="w-full max-w-md transform ease-in-out duration-300 overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
                    <Dialog.Title
                      as="h3"
                      className="text-lg font-medium leading-6 text-gray-900"
                    >
                      Connect Your Wallet
                    </Dialog.Title>
                    <div className="mt-2 mx-3">
                      <p className="text-sm text-gray-500">
                        Choose from the following
                      </p>
                    </div>
                    {connectors.map((connector, index) => (
                      <div
                        key={index}
                        onClick={() => connect({ connector })}
                        className="border-2 rounded-lg my-3 cursor-pointer border-gray-300 w-full text-black px-2 py-3 hover:bg-gray-200 hover:text-gray-800"
                      >
                        {connector.name}
                      </div>
                    ))}

                    <div className="mt-4">
                      <button
                        type="button"
                        className="inline-flex justify-center rounded-md border border-transparent bg-red-100 px-4 py-2 text-sm font-medium text-red-900 hover:bg-red-200 "
                        onClick={closeModal}
                      >
                        Cancel
                      </button>
                    </div>
                  </Dialog.Panel>
                </div>
              </div>
            </Dialog>
          </Transition>
...
)
}

Switch network modal is used to switch from a wrong network to the chosen selected network.

export default function Home() {
...
return (
...
<Transition appear show={switchOpen} as={Fragment}>
            <Dialog
              as="div"
              className="relative z-10"
              onClose={closeSwitchOpen}
            >
              <div className="fixed inset-0 overflow-y-auto">
                <div className="flex min-h-full items-center justify-center p-4 text-center">
                  <Dialog.Panel className="w-full max-w-lg transform ease-in-out duration-300 overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
                    <Dialog.Title
                      as="h3"
                      className="text-lg font-medium leading-6 mb-3 text-gray-900"
                    >
                      Switch Network
                    </Dialog.Title>
                    <div className="flex items-center justify-between">
                      You need to switch the nework to {currentNetwork.name}
                    </div>
                    <div className=" flex justify-between mt-4">
                      <button
                        type="button"
                        className="inline-flex justify-center rounded-md border border-transparent bg-green-100 px-4 py-2 text-sm font-medium text-green-900 hover:bg-green-200 "
                        onClick={handleSwitchNetwork}
                      >
                        Switch
                      </button>

                      <button
                        type="button"
                        className="inline-flex justify-center rounded-md border border-transparent bg-red-100 px-4 py-2 text-sm font-medium text-red-900 hover:bg-red-200 "
                        onClick={closeSwitchOpen}
                      >
                        Cancel
                      </button>
                    </div>
                  </Dialog.Panel>
                </div>
              </div>
            </Dialog>
          </Transition>
...
)
}

Wallet Details Modal is used to a brief details of the connect address, (you can improve on this in your project).

export default function Home() {
...
return (
...
<Transition appear show={walletDetailsOpen} as={Fragment}>
            <Dialog
              as="div"
              className="relative z-10"
              onClose={closeWalletDetails}
            >
              <div className="fixed inset-0 overflow-y-auto">
                <div className="flex min-h-full items-center justify-center p-4 text-center">
                  <Dialog.Panel className="w-full max-w-lg transform ease-in-out duration-300 overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
                    <Dialog.Title
                      as="h3"
                      className="text-lg font-medium leading-6 mb-3 text-gray-900"
                    >
                      Wallet Details
                    </Dialog.Title>
                    <div className="flex items-center justify-between">
                      Your Address:
                      <span className="text-orange-500"> {address}</span>
                    </div>
                    <div className="flex items-center text-left">
                      Network:
                      <span className="text-orange-500 px-3">
                        {" "}
                        {currentNetwork.name}
                      </span>
                    </div>
                    <div className="flex items-center text-left">
                      Scan:{" "}
                      <a
                        href={`${currentNetwork.blockExplorerUrls[0]}/address/${address}`}
                        target="_blank"
                        className="px-5 text-orange-500"
                      >
                        View your assets here{" "}
                      </a>
                    </div>
                    <div className="flex justify-between mt-4">
                      <button
                        type="button"
                        className="inline-flex justify-center rounded-md border border-transparent bg-red-100 px-4 py-2 text-sm font-medium text-red-900 hover:bg-red-200 "
                        onClick={logout}
                      >
                        Disconnect
                      </button>
                      <button
                        type="button"
                        className="inline-flex justify-center rounded-md border border-transparent bg-red-100 px-4 py-2 text-sm font-medium text-red-900 hover:bg-red-200 "
                        onClick={closeWalletDetails}
                      >
                        Cancel
                      </button>
                    </div>
                  </Dialog.Panel>
                </div>
              </div>
            </Dialog>
          </Transition>
...
)
}

Run your application if it's not already running using yarn dev or npm run dev. This would show your full application working, awesome!! 🎉🚀.

You now have a connect wallet app example which can be used in your upcoming web3 projects. Build great and fun stuff 😁.

8 CSS Frameworks to create wonderful websites.

Adebayo Olamilekan — Sun, 18 Dec 2022 20:46:53 +0000

Using CSS for styling can get tedious for developers as we progress and build sophisticated websites, we need something with less code and more functionality (styling).

This is why CSS frameworks are built and used, here is a list of Eight (8) best frameworks:

Material UI Material UI (MUI) is said to offer a comprehensive suite of UI tools to help you ship new features faster. Material UI is used by big organizations such as; Spotify, Unity, Nasa, Netflix e.t.c

To Install MUI

npm install @mui/material @emotion/react @emotion/styled

MUI Homepage

Foundation The most advanced responsive front-end framework in the world. Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device.(From their official website).Foundation is used by big organizations such as; Disney, Samsung, Adobe, National Geographic, e.t.c

To Install

npm install foundation-sites

//or//

yarn add foundation-sites

Foundation Homepage

Bulma Bulma is a free, open-source framework that provides ready-to-use frontend components that you can easily combine to build responsive web interfaces.CSS Knowledge is not needed when using bulma.

To Install

npm install bulma

Bulma homepage

Tailwind CSS Tailwind CSS rapidly builds modern websites without ever leaving your HTML. This is interesting as you just write styles in classes of div tags, awesome right?!

To install

npm install -D tailwindcss
npx tailwindcss init

Tailwind Homepage

Bootstrap Bootstrap is a powerful, extensible, and feature-packed frontend toolkit. With Bootstrap you can build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.

To install

npm i [email protected]

Bootstrap Homepage

Chakra UI Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications. With Chakra UI you spend less time writing UI code and more time building a great experience for your customers.

To install

npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

or

yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion

or

pnpm add @chakra-ui/react @emotion/react @emotion/styled framer-motion

Chakra UI homepage

Headless UI Headless UI has completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS. This is also created by tailwind Labs

To Install

npm install @headlessui/react

Headless UI Homepage

Semantic UI Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML.

To Install

npm install semantic-ui --save
cd semantic/
gulp build

Semantic UI Homepage

There are lots more that are also good to build super websites, but the trick to choosing the best is... no trick, just go with the one you feel will work with you well after thorough research.

Some amazing JS components

Adebayo Olamilekan — Sun, 04 Dec 2022 09:00:11 +0000

We all want to make this cool website with all these amazing features, well I'll help with some of those features like;

React-scroll: This react component that helps to animate vertical scrolling on your webpage/web app. Cool right🤗 ?
React intersection observer: This is another amazing js component that you can implement in your web project to do anything like animation, text/ background color change, etc. The react intersection observer tells you when an element enters a certain viewport.

Why all this explanation with no example 🙄, Don't worry I got you covered ;).

This is an example of using the above react components in your web project.

The link to check out the above demonstration is here or check out my git repo here

Let get buildy 👷🏻‍♂️🛠️

Technologies Used

After a successful Installation of the above technologies, the folders in code editor should be similar to:

Step 1

Go to your Index.js file inside the pages folder and
import theses necessary components to be used in the example

import { Link, Element } from "react-scroll";
import { useInView } from "react-intersection-observer";

The Link class imported from the react-scroll component serves as a link to the Element class also imported.
Which means the Link_scrolls to the specified _Element.

Whereby the useInView hook checks if a particular element is in view when scrolling action a]happens on the screen.

Step 2

Copy this into the Home default function

// These are references to each page shown  
const { ref: PAGE_ONE, inView: viewOne } = useInView({
    threshold: 0.3,
  });
  const { ref: PAGE_TWO, inView: viewTwo } = useInView({
    threshold: 0.3,
  });
  const { ref: PAGE_THREE, inView: viewThree } = useInView({
    threshold: 0.3,
  });
  const { ref: PAGE_FOUR, inView: viewFour } = useInView({
    threshold: 0.3,
  });

// An array of each page and its details
  const pagesAndDetails = [
    { title: "PAGE_ONE", details: "Details of Page One" },
    { title: "PAGE_TWO", details: "Details of Page Two" },
    { title: "PAGE_THREE", details: "Details of Page Three" },
    { title: "PAGE_FOUR", details: "Details of Page Four" },
  ];
// An array of each page's colors
  const colors = ["#b8c7ce ", "#E9E948", "#f1f1f1 ", "#7bc191"];

Step 3

Copt this into the return function

<>
      <Head>
        <title>React Scroll Web</title>
        <meta
          name="description"
          content="An example of a react scroll website"
        />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <div className="w-full">
        <div className="flex flex-wrap items-center justify-between px-12 fixed">
          <Link
            activeClass="active"
            to="PAGE ONE"
            spy
            smooth
            duration={700}
            className="px-3 py-3 mb-2 bg-[#b8c7ce] rounded-xl border-2 border-white cursor-pointer mr-4"
          >
            {viewOne ? (
              <span>YOU ARE AT {pagesAndDetails[0].title}</span>
            ) : (
              <span> GO TO {pagesAndDetails[0].title}</span>
            )}
          </Link>
          <Link
            activeClass="active"
            to="PAGE TWO"
            spy
            smooth
            duration={700}
            className="px-3 py-3 mb-2 bg-[#E9E948] rounded-xl border-2 border-white cursor-pointer  mr-4"
          >
            {viewTwo ? (
              <span>YOU ARE AT {pagesAndDetails[1].title}</span>
            ) : (
              <span> GO TO {pagesAndDetails[1].title}</span>
            )}
          </Link>
          <Link
            activeClass="active"
            to="PAGE THREE"
            spy
            smooth
            duration={700}
            className="px-3 py-3 mb-2 bg-[#f1f1f1] rounded-xl border-2 border-white cursor-pointer mr-4"
          >
            {viewThree ? (
              <span>YOU ARE AT {pagesAndDetails[2].title}</span>
            ) : (
              <span> GO TO {pagesAndDetails[2].title}</span>
            )}
          </Link>
          <Link
            activeClass="active"
            to="PAGE FOUR"
            spy
            smooth
            duration={700}
            className="px-3 py-3 mb-2 bg-[#7bc191] rounded-xl border-2 border-white cursor-pointer mr-4"
          >
            {viewFour ? (
              <span>YOU ARE AT {pagesAndDetails[3].title}</span>
            ) : (
              <span> GO TO {pagesAndDetails[3].title}</span>
            )}
          </Link>
        </div>

        <Element
          name="PAGE ONE"
          className={`w-full h-screen py-3`}
          style={{
            backgroundColor: colors[0],
          }}
        >
          <div
            ref={PAGE_ONE}
            className={`w-full h-full -mt-16 flex flex-col items-center text-center justify-center `}
          >
            <div className={`w-full mt-2 py-5 font-bold text-2xl `}>
              {pagesAndDetails[0].title}
            </div>
            <div className="w-full  text-sm">{pagesAndDetails[0].details}</div>
          </div>
        </Element>
        <Element
          name="PAGE TWO"
          className={`w-full h-screen py-3`}
          style={{
            backgroundColor: colors[1],
          }}
        >
          <div
            ref={PAGE_TWO}
            className={`w-full h-full -mt-16 flex flex-col items-center text-center justify-center `}
          >
            <div className={`w-full mt-2 py-5 font-bold text-2xl `}>
              {pagesAndDetails[1].title}
            </div>
            <div className="w-full  text-sm">{pagesAndDetails[1].details}</div>
          </div>
        </Element>
        <Element
          name="PAGE THREE"
          className={`w-full h-screen py-3`}
          style={{
            backgroundColor: colors[2],
          }}
        >
          <div
            ref={PAGE_THREE}
            className={`w-full h-full -mt-16 flex flex-col items-center text-center justify-center `}
          >
            <div className={`w-full mt-2 py-5 font-bold text-2xl `}>
              {pagesAndDetails[2].title}
            </div>
            <div className="w-full  text-sm">{pagesAndDetails[2].details}</div>
          </div>
        </Element>
        <Element
          name="PAGE FOUR"
          className={`w-full h-screen py-3`}
          style={{
            backgroundColor: colors[3],
          }}
        >
          <div
            ref={PAGE_FOUR}
            className={`w-full h-full -mt-16 flex flex-col items-center text-center justify-center `}
          >
            <div className={`w-full mt-2 py-5 font-bold text-2xl `}>
              {pagesAndDetails[3].title}
            </div>
            <div className="w-full  text-sm">{pagesAndDetails[3].details}</div>
          </div>
        </Element>
      </div>
    </>

The above code links each button to a page element and changes text when the page is in view.

Step 4

Run the project

npm run dev 

 // or

yarn dev

Great work 🎊🎊🎉🎉

There are more better ways to use these components in your project this is just a simple example.

Look out for more amazing JS components.

Installing foundry toolchain on windows.

Adebayo Olamilekan — Wed, 02 Nov 2022 20:08:39 +0000

As windows users, we mostly suffer when installing complicated software and programs on our machines, just like foundry smart contract tool-chain.

Foundry manages your dependencies, compiles your project, runs tests, deploys, and lets you interact with the chain from the command line and via Solidity scripts. (from official website)

Using Foundry to compile, test and deploy is much faster and better compared to other smart contract tools like hardhat or truffle because using foundry is not only faster but testing and deployments are all written in solidity and not JavaScript.

Foundry doesn't only use solidity for testing and deployment, it also has the following interesting tools:

1) Forge:This is a command-line tool of foundry, that is used to install dependencies, build contracts, test them, deploy and also verify smart contracts.
2) Cast:This helps with smart contracts calls both locally and onchain (awesome right).
3) Anvil:This is the last tool of foundry and this serves as a local testnet, just like hardhat local node and ganache.

A Little more details on this on this Twitter thread

So to use Foundry on our machines we follow the steps given on their site

A couple of commands are just needed to get foundry ready on both mac and Linux machines but not windows.

Steps to get Foundry on your Windows PC

1) Download rust by going to rust.

2) After successful installation, run the installed exe file, which should open up a window like command prompt.

if the window shows up like this then "Proceed with installation" by either pressing the "Enter" key or 1 and then press the "Enter" key.

But in case it doesn't look like the above and like this picture (below)

Then you'll have to download Microsoft Visual Studio here

Then install the following packages, i.e tick the boxes ticked here (below) just like what was required in the rust exe window. _ [Packages to install: MSVC & Windows 10 SDK]_

Installation process

After a successful downloading and installation then re-run the rust exe and it should look like this

So you can now proceed with the installation.

The installation of foundry (forge, cast, and anvil) might take a while, But after it's done you can check if it's installed by running this command:

forge -V

forge --version

Now you can use foundry in building smart contracts :)

6 Chrome extension🔧 ⚙that can boost your productivity as a web developer 👩‍💻 🚀🚀

Adebayo Olamilekan — Wed, 07 Sep 2022 17:03:16 +0000

As a beginner or intermediate web developer most times we wish there are somethings we can debug and locate errors for before checking back to our super lengthy code 😩.

Good news though👍🏽, I got you covered ;). There are extensions/tools that can be installed and used on the chrome browser to boost our productivity as a developer

Here are six (6) chrome extensions that can boost your productivity :

Pesticide

As web developers we sometimes run into situations where the result of our styling isn't what we expected and this can be so frustrating 😫.

Well pesticide helps with this.
It outlines each element and see how your elements are nested in one another and this is really awesome.

There are two types of pesticide chrome extension, one is with hover bar while the other isn't.

The above picture shows the use of pesticide on Canva

Pesticide can be gotten from here

Eye Dropper

Most developers are not really friends with our UI designers 😂, this is because of the breath-taking designs and colors we are to code.

Getting the right colors can sometimes be a headache,. especially when you wanna clone an app or website and you can seem to get the specific colors, in that case you can use the eye dropper chrome extension.

The eye dropper chrome extension helps you to get colors from Web pages and this is do damn useful.

You can just visit the figma page of the
UI design, use the eye dropper extension and get the colors used.

Eye dropper can be gotten from here

Page Ruler

Getting the exact dimensions (width, height) of an object in your Web page can be helpful.

Either when duplicating a website and you need the exact dimensions of an object on a webpage or for any other project you're working on that you need the exact dimensions from a Web page. Then the page ruler is here to rescue you 📏👩‍⚕️.

It's when activated this extension goes in a Ruler mode and when you drag your mouse, it create a box and it gives full details of the dimensions.

The above image shows the ruler chrome extension used on my github page and it can be gotten from here

GoFullPage Chrome extension

Are you a beginner in web dev?

If so, you may have wondered how others get a full picture of webpages they build and you also want to do this either to see the full result of your hardwork or send it to a client
Gofullpage is the secret solution 🤗

This chrome extension helps you to get the full image of your webpage, and gives you options to either get it in pdf or in jpg.

It also have an editor that you can use to edit your new Web page image.

The link is here

Font Finder

This is an all-in-one tool as the name implies this chrome extension Is used to get details of a font used on a webpage, but it does so much more than that like the details of the font selected, the color, line height, font weight etc.

When using this tool, and then you hover on your webpage this extension gives details on the element and it type then a full description when you click on it.

Get it here

*JSON viewer *

Dealing with json data format can be confusing at times 😕. The format may not be structured well and you don't understand it that way..

Json viewer helps to structure your json data on your webpage.

It automatically structures it and even had code lines.

Get it here

This is the end of this article, I hope you found these extensions useful and if you already use some I hope you found some more here.

NOTE : There are over 130,000 extensions on chrome and this is just so small, so you can explore more at the store

How to Create a FullStack Dapp using Next JS, Tailwind CSS and The graph. (Part 2)

Adebayo Olamilekan — Thu, 01 Sep 2022 11:37:16 +0000

Hi there, welcome to the second part of a two-series tutorial on how to create a Fullstack dapp using web3 technologies some of which are:

Tailwind Css for styling
The graph for indexing data
Next Js react framework to build our application
Solidity for writing smart contracts
Web3 . strorage for storing our data
Ethers . js Library for interacting with the blockchain

If you have gone through the first part of this series and want to understand this much better you can get it at Part One of NFT AIR Tutorial

Its been a few weeks since I wrote the first part of this tutorial and I'm sorry about that 🙏, but before starting this part (Frontend aspect) we need to know what we've done and ** what is to be done**;

NFT AIR Dapp Project

Create a nextJs application ✅
Install the necessary dependencies ✅
Write our smart contract ✅
Test the contract ✅
Deploy the Contract ✅
Create and connect your Project with your subgraph ✅
Install more dependencies
Getting assets (Pictures) used in the project
Creating Pages, Components and writing Queries (i.e wallet connection, contract interaction, data retrieval from the graph ectera)
Testing and Running.
Create and Upload an art.

So far we are done with 6 out of 11 things to do to create our fullstack dapp project, and that's progress 🤗💖.
It only remains 5 things to do to get our full project ready,
this 👇

Prerequisites

Like in the previous tutorial you should ensure that you have the following on your machine.

Text Editor of your choice Installed on your machine (preferably Vs code )
Have npm or yarn installed
[Most Important] Have a glass of juice, coffee or bag of chips beside you, because this can get tiring and you should be able to snack and get your energy back ;)

Project BuidLing and Setup

Lets Begin! (Take a sip of that drink or a bite from that snack and lets get buidl-y 😅 )

Installing more dependencies We've installed quite a few dependencies in the last tutorial, but those pertain to the backend of the Dapp and now we will be installing more dependencies for the frontend aspect of this application. we'll be installing:

Tailwind Css (Styling)
web3 storage (Storing and retrieiving data)
rainbow kit (wallet connection)
wagmi (React hook for wallet connection)
axios
- Installing rainbow kit for wallet connection, wagmi a collection of react hooks for dealing with wallet connection, ethers for blockchain interaction from the frontend (If you already have it installed you can choose to remove it),

yarn add @rainbow-me/rainbowkit wagmi ethers axios urql graphql react-icons

 - To use Web3 storage in our project we do not only need to install it dependency but also create an account [here] (https://web3.storage/) and then also create a token, this token is what will be used to upload files to web3 storage. Read more about the [docs] (https://web3.storage/docs/how-tos/generate-api-token/), and urql is used to fetch data from a subgraph.

To install web3 Storage

npm install web3.storage

yarn add web3.storage

Getting your token

After getting your token, you can add it to your constant.js file like this;

export const Token = "YOUR_TOKEN_HERE"

We also need our graph api that we'll be using to query data from our subgraph, and this is gotten from our subgraph page.

Go to the graph hosted service and go to My Dashboard, open up your NFT AIR Subgraph and get your api key from there.

The Api key is below the QUERIES (HTTP) heading copy that and put it in your constants file.

Now your constants file should have 3 constants;

NFT AIR address
Token from web3 storage.
Api key from your subgragh

-To install Tailwind css

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

After installation you should follow the steps on how to continue here in their docs.

Getting Assets for the Dapp

I used some pngs in my dapp and to get that you can go to public folder in my repo and download them.

Creating pages, components and writing queries

Here we start showing UI for the code we have written so far, in form of pages on the website just like the preview below

We will be creating this pages:

Register/Dashboard (Homepage)
Feed (Shows list of all art uploaded)
Starred page (shows starred art of a user)
Creations page (Shows all your creation)
Create page ( This is where we create the art and upload them)
Components:
- Loader component
- Navbar component

We would start with the building of the components first;

*The Loader component * This shows up when a new page is to loaded, or a current one reloaded. The code is short so you can decide not to make it a component and decide to implement it in every page.

First create a new folder in your root directory with components as its name, and a new file named loader.js with this code in it .

const Loader = () => {
    return (
      <div className="flex items-center justify-center h-screen bg-white ">
          <img src="proxy.php?url=/loading.png" alt="loading..." />
      </div>
    )
  }

  export default Loader

Navbar Component

This contains the various pages for our dapp and its responsive for both pc and mobile view

import Link from "next/link"
import {useState } from "react";
import { HiMenu } from "react-icons/hi";
import { BiX } from "react-icons/bi";



function Navbar () {
    const [openMenu,setOpenMenu] = useState(false)
    return (
        <nav className='shadow-md fixed w-full z-50  '>
                <div className='flex items-center bg-white h-24 rounded-b-lg w-full' >
                    <div className='flex items items-center w-full mx-5 md:mx-20 justify-between'>
                        <div className='flex items-center justify-center '>
                            <h1 className='font-bold text-2xl cursor-pointer'>
                                 NFT <span className='text-green-400'> AIR</span>
                            </h1>
                        </div>
                        <div className='hidden md:block'>
                            <div className='ml-10 flex items-baseline space-x-8'>
                                <Link href="proxy.php?url=/" className=' cusor-pointer '>
                                    <div className='no-underline font-semibold text-black-600 hover:text-orange-600 cursor-pointer'>
                                        Home
                                    </div>
                                </Link>
                                <Link href="proxy.php?url=/Feed" className=' cusor-pointer '>
                                    <div className='no-underline font-semibold text-black-600 hover:text-orange-600 cursor-pointer'>
                                        Feed
                                    </div>
                                </Link>
                                <Link href="proxy.php?url=/starred" className=' cusor-pointer '>
                                    <div className='no-underline font-semibold text-black-600 hover:text-orange-600 cursor-pointer'>
                                        Starred
                                    </div>
                                </Link>
                                <Link href="proxy.php?url=/creations" className=' cusor-pointer '>
                                    <div className='no-underline font-semibold text-black-600 hover:text-orange-600 cursor-pointer'>
                                       Creations
                                    </div>
                                </Link>

                                <Link href="proxy.php?url=/create" className=' cusor-pointer '>
                                    <button className='no-underline bg-green-500 py-2 px-3 rounded-lg font-bold text-teal-50 hover:bg-orange-500 cursor-pointer '>
                                        Create NFT
                                    </button>
                                </Link>

                            </div>
                        </div>
                        <div className='block md:hidden'>
                            <button onClick={()=> setOpenMenu(!openMenu)} className=' ml-10 cursor-pointer flex items-center bg-green-500 text-gray-50  hover:bg-orange-500 px-2 py-2 rounded-lg '>

                                {
                                    !openMenu ? 
                                    (
                                        <HiMenu className='font-bold text-2xl' /> 
                                    )
                                    :
                                    (
                                        <BiX className='font-bold text-2xl' />

                                    )
                                }
                            </button>
                        </div>
                    </div>
                </div>      
                <div className='md:hidden  bg-white  rounded-b-lg w-full ' >
                    <div className=' mx-20 justify-between'>
                        {
                            openMenu && 
                            <div className=' flex flex-column items-center  space-y-8 py-3'>
                                <Link href="proxy.php?url=/" className=' cusor-pointer '>
                                    <div className='no-underline font-semibold text-lg text-black-600 hover:text-orange-600 block cursor-pointer'>
                                        Home
                                    </div>
                                </Link>
                                <Link href="proxy.php?url=/Feed" className=' cusor-pointer '>
                                    <div className='no-underline font-semibold text-lg text-black-600 hover:text-orange-600 cursor-pointer'>
                                        Feed
                                    </div>
                                </Link>
                                <Link href="proxy.php?url=/starred" className=' cusor-pointer '>
                                    <div className='no-underline font-semibold text-lg text-black-600 hover:text-orange-600 cursor-pointer'>
                                        Starred
                                    </div>
                                </Link>
                                <Link href="proxy.php?url=/creations" className=' cusor-pointer '>
                                    <div className='no-underline font-semibold text-lg text-black-600 hover:text-orange-600 cursor-pointer'>
                                       Creations
                                    </div>
                                </Link>

                                <Link href="proxy.php?url=/create" className=' cusor-pointer '>
                                    <button className='no-underline bg-green-500 py-2 px-3 rounded-lg font-semibold text-lg text-teal-50  hover:bg-orange-500 cursor-pointer '>
                                        Create NFT
                                    </button>
                                </Link>
                            </div>
                        }
                    </div>
                </div>           
        </nav>
    )
}

export default Navbar

Now we are done with the components folder and files, now to get to the pages started.
Go to your pages folder and open _app.js and paste the following code inside :

import '../styles/globals.css'
import '@rainbow-me/rainbowkit/styles.css';
import {
  apiProvider,
  configureChains,
  getDefaultWallets,
  RainbowKitProvider,
} from '@rainbow-me/rainbowkit';
import { chain, createClient, WagmiProvider } from 'wagmi';
import Navbar from '../components/Navbar';
import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
import { useState } from 'react';
import Router from 'next/router';
import Loader from '../components/loader';


const { chains, provider } = configureChains(
  [chain.mainnet, chain.polygon, chain.polygonMumbai],
  [
    apiProvider.alchemy(process.env.ANKR_ID),
    apiProvider.fallback()
  ]
);
const { connectors } = getDefaultWallets({
  appName: 'My RainbowKit App',
  chains
});
const wagmiClient = createClient({
  autoConnect: true,
  connectors,
  provider
})

function MyApp({ Component, pageProps }) {
  const[loader,setLoader]= useState(false)
  Router.events.on("routeChangeStart" , (url) => {
    setLoader(true)
  })

  Router.events.on("routeChangeComplete" , (url) => {
    setLoader(false)
  })

  return(
    <div >

      <WagmiProvider client={wagmiClient}>
      <RainbowKitProvider 
    chains={chains}>
      <div className=''>
      {
      loader ?
      (
        <Loader/>
      ) 
      :
      ( 
        <>
          <Navbar/>
          <div  className='h-24 w-full'>
          </div>
          <Component {...pageProps} /> 
        </>

      )

      }
       </div>
      </RainbowKitProvider>
    </WagmiProvider>
    </div>

  )
}

export default MyApp

This is the main page and this is where other pages are initialized "_app.js"

Homepage
We will be using the index.js file under the pages folder as the homepage for our dapp.

import Head from 'next/head'
import { ConnectButton } from '@rainbow-me/rainbowkit';
import { useContract, useProvider,useSigner,useAccount,useBalance,useConnect  } from 'wagmi'
import {MemeForestAddress,ApiUriv} from '../constant'
import { useEffect, useState } from "react";
import MEME from '../artifacts/contracts/MemeForest.sol/MemeForest.json'
import { createClient } from 'urql'


const MemberQuery= `
query {
  memebers{
    Name
    Adddress
    TotalMeme
    StarredMemes
    Date
  }
}
`

const client = createClient({
  url: ApiUriv,
})



export default function Home(props) {
  const { data} = useAccount()
  const person = data?.address;
  const [name, setName] = useState("")
  const [Address, setAddress] = useState("")
  const [loading,setLoading] = useState(false)
  const [AMember,setAMember] = useState(false)
  const[loadingpage,setLoadingPage] = useState(false)
  const provider = useProvider()
  const { data: signer } = useSigner()
  const contractWithSigner = useContract({
      addressOrName: MemeForestAddress,
      contractInterface: MEME.abi,
      signerOrProvider: signer,
    })

    const contractWithProvider = useContract({
      addressOrName: MemeForestAddress,
      contractInterface: MEME.abi,
      signerOrProvider: provider,
    })
    useEffect(() => {
      PageLoad()
      checkIfAMember(props);

  }, []);

    const PageLoad = async () =>{
      try {
          setLoadingPage(true)
          const delay = ms => new Promise(res => setTimeout(res, ms));
          await delay(7000);
          setLoadingPage(false)
      } catch (e) {
          console.log(e)
      }
  }
  const joinMembership = async () => {
    try {
      setLoading(true)
      let _time =  new Date().toLocaleString();
      if(!name) {
        alert("Name is not there")
    }
      const join = await contractWithSigner.CreateMembers(name,_time)
      await join.wait()
      setLoading(false)
      setAMember(true)
      checkIfAMember(props);
    } catch (w) {
      console.log(w)
    }
  }
  const checkIfAMember = async (props) => {
    try {

        let data = props.members;
        const addresses = ['']
        const tx = await Promise.all(data.map(async i => {

            addresses.push(i.Adddress)
            return addresses
        }));
        const Address = person.toLowerCase()
        setAddress(Address);
        const isThere = addresses.includes(Address)
        setAMember(isThere)
    } catch (e) {
        console.log(e)
        setAMember(false)
    }
}



const renderButton = () => {

  if(!AMember) {
    return (
      <div className='flex items-center w-full h-full  z-0'> 
      <div className=' flex flex-col-reverse md:flex-row items-center md:justify-between w-full h-full '>

          <div className='flex flex-column items-center w-full basis-2/5 space-y-6 p-20 mr-4  mt-10'>
              <div className='flex items-center text-3xl text-center text-black font-bold'>
                <span>Welcome To NFT <span className='text-green-500'> Air </span> </span>
              </div>
              <div className='text-sm text-gray-400'>
                Register to become a Member
              </div>
              <div className='pt-2 w-full'>
                <input className='px-2 py-1 h-10 font-semibold text-sm w-full border rounded-xl ' placeholder='Enter your Name'  onChange={e => setName(e.target.value)}/>
              </div>
              <div className='flex flex-col items-center  justify-center w-full'>
                {
                  loading ?
                  <button className='text-lg text-gray-50 flex items-center justify-center font-semibold w-full py-2 bg-white  rounded-xl '>
                   <img src="proxy.php?url=/loader.png" alt="loading..." className='w-8 h-8 mt-2' />
                  </button>
                  :

                  <button className='text-lg text-gray-50  font-semibold w-full py-2 bg-green-500 hover:bg-gray-50 hover:text-green-500 border hover:border-slate-100 rounded-xl'
                  onClick={joinMembership}>
                    Register
                  </button>
                }

                <span className='text-sm text-gray-400 pt-1'> ------------OR------------</span>
                <div className=' text-gray-50 text-xs pt-3 flex items-center justify-center'>
                 <ConnectButton />
                </div>
              </div>
          </div>
          <div className='w-full flex items-center justify-center md:justify-around basis-2/5 md:ml-4  md:mt-0'>
            <img src='/main-removebg-preview.png' className='w-fit' />
          </div>
          </div>
      </div>
    )
  }



  if (AMember) {
    return(
      <div>
          <div className='text-lg font-semibold w-full'>
            {
              props.members.map((lists,i) => {

                return(

                    <div key={i}  className='text-lg font-semibold'>
                      {

                       lists.Adddress == Address &&

                        <div className='flex flex-col w-full items-center justify-between space-y-20'>
                          <div className='shadow-sm w-full bg-green-400'>
                            <div className='flex flex-col items-center w-full'>
                              <div className='border border-slate-400 flex flex-col md:flex-row items-center w-full'>
                                <div className="w-full basis-1/5 p-4">
                                  <div className='rounded-lg border border-red-400 h-full p-20' >
                                      01
                                  </div>
                                </div>
                                <div className="flex flex-col justify-between w-full basis-4/5 space-y-6 p-10 mr-4 ">
                                  <div className=' flex items-center justify-between   font-semibold hover:cursor-pointer '>
                                    <span className='pb-2 pr-5 text-3xl  text-white border-b border-white'>
                                    {lists.Name}
                                    </span>
                                    <div className='text-sm'>
                                    <ConnectButton />
                                    </div>
                                  </div>
                                  <div className='flex justify-between flex-col md:flex-row space-y-6 md:space-y-6 text-lg font-thin hover:cursor-pointer text-white  pt-2'>
                                    <div className='flex items-end text-sm md:text-lg font-medium '>
                                        {lists.Adddress}
                                    </div>
                                    <div className='flex flex-col text-lg  '>
                                      <span className='font-medium'> Date Joined</span>
                                      <span className='font-normal'> {lists.Date}</span>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div className='flex flex-col items-center w-full p-10'>
                            <div className='flex flex-col md:flex-row justify-between space-y-6 md:space-x-6 md:space-y-0  hover:cursor-pointer'>
                            <div className='flex flex-col  items-center p-10  text-orange-500 hover:bg-gray-50 rounded-lg border-2 border-green-400'>
                                <span className='font-medium '> Number Of Starred Memes</span>
                                <span className='font-normal'> {lists.StarredMemes}</span>
                              </div>
                              <div className='flex flex-col  items-center p-10  text-orange-500 hover:bg-gray-50 rounded-lg border-2 border-green-400'>
                                <span className='font-medium'> Number Of Total Memes</span>
                                <span className='font-normal'> {lists.TotalMeme}</span>
                              </div>
                            </div>
                          </div>
                        </div>
                     }
                    </div>
                ) 
              })

            }
          </div>

      </div>
      )
  }
}





  return (
    <div>
      <Head>
        <title>Home</title>
        <meta name="description" content="By Oleanji" />
        <link rel="icon" href="proxy.php?url=/favicon.ico" />
      </Head>
       {renderButton()}
    </div>
  )
}


async function GetData() {
  const data = await client.query(MemberQuery).toPromise()
  return data.data.memebers
}


export async function getServerSideProps() {
  const data = await GetData()
  return{
    props:{
      members:data
    }
  }
}

The results

Here, we get users to register their address, and in doing so they become members of the dapp and they are able to create art and upload.

Feed
This shows to everyone regardless of your membership status, but you are only able to view and not react if you are not a member.

import Head from 'next/head'
import { ConnectButton } from '@rainbow-me/rainbowkit';
import { useContract, useProvider,useSigner,useAccount,useBalance,useConnect  } from 'wagmi'
import {MemeForestAddress,Token, ApiUriv} from '../constant'
import { useEffect, useState } from "react";
import MEME from '../artifacts/contracts/MemeForest.sol/MemeForest.json'
import 'bootstrap/dist/css/bootstrap.css'
import axios from "axios"
import { createClient } from 'urql'
import { Web3Storage } from 'web3.storage'



const MemesQuery= `
query {
    memes(
    orderBy : id,
    orderDirection: desc
        ) 
    {
        id
        MemeInfo
        Owner
        IsStarred
        Stars
        Likes
        Date
        FileType
        IsDownloadable
        StarredAddresses
        LikesAddresses
    }
}
`

const MemberQuery= `
query {
  memebers{
    Name
    Adddress
    TotalMeme
    StarredMemes
    Date
  }
}
`

const client = createClient({
  url: ApiUriv,
})


export default function Feed (props) {
    const Memeslength  = props.memes.length
    const { data} = useAccount()
    const person = data?.address;
    const[loadingStar, setLoadingStar] = useState(false)
    const[memberDetails,setMemberDetails] = useState([])
    const[loadingLike, setLoadingLike] = useState(false)
    const[loadingLikeId, setLoadingLikeId] = useState(0)
    const[loadingStarId, setLoadingStarId] = useState(0)
    const provider = useProvider()
    const { data: signer} = useSigner()
    const[loadingpage,setLoadingPage] = useState(false)
    const contractWithSigner = useContract({
        addressOrName: MemeForestAddress,
        contractInterface: MEME.abi,
        signerOrProvider: signer,
    })
    const contractWithProvider = useContract({
        addressOrName: MemeForestAddress,
        contractInterface: MEME.abi,
        signerOrProvider: provider,
    })
    useEffect(() => {
            PageLoad();
            FechMemeInfo(props);
    }, []);

    const PageLoad = async () =>{
        try {
            setLoadingPage(true)
            const delay = ms => new Promise(res => setTimeout(res, ms));
            await delay(20000);
            setLoadingPage(false)
        } catch (e) {
            console.log(e)
        }
    }

    const StarMeme = async (id,bool) =>{
        try {
            setLoadingStar(true)
            setLoadingStarId(id)
            if (bool == true) {
                const data= await contractWithSigner.RemoveStarMeme(id)
                await data.wait()
                await FechMemeInfo(props);
            }
            else {

                const data= await contractWithSigner.StarMeme(id)
                await data.wait()
                await FechMemeInfo(props);
            }
            setLoadingStar(false)

        } catch (e) {
            console.log(e)
        }
    }
    const download = (e,name) => {
        try {
            const Link = `https://${e}.ipfs.dweb.link/image`
            axios({
                url: Link, //your url
                method: 'GET',
                responseType: 'blob', // important
            }).then((response) => {
                const url = window.URL.createObjectURL(new Blob([response.data]));
                const link = document.createElement('a');
                link.href = url;
                  link.setAttribute("download", name+".png" ); 
                  document.body.appendChild(link);
                  link.click();

              });
        } catch (error) {
            console.log(error)
        }
      };
    const LikeMeme = async (id,bool) =>{
        try {
            setLoadingLike(true)
            setLoadingLikeId(id)
            if (bool == true) {

                const data= await contractWithSigner.UnLikeMeme(id)
                await data.wait()
                await FechMemeInfo(props); 

            }
            else {
                const data= await contractWithSigner.LikeMeme(id)
                await data.wait()
                await FechMemeInfo(props);

            }
            setLoadingLike(false)

        } catch (e) {
            console.log(e)
        }
    }
    function getAccessToken () {

        return Token;
    }

    function makeStorageClient () {
    return new Web3Storage({ token: getAccessToken() })
    }
    const FechMemeInfo = async (props) => {
        const client = makeStorageClient()
        let data = props.memes;
        const tx = await Promise.all(data.map(async i => {
            const res = await client.get(i.MemeInfo) 
            if(!res.ok) {
                return;
            }

                const StarAnswer= signer ? await contractWithProvider.WhatDidIStar(i.id,person) : false;
                const LikeAnswer= signer ? await contractWithProvider.WhatDidILike(i.id,person) : false;


            let files = await res.files()
            const info =  await axios.get(`https://${files[0].cid}.ipfs.dweb.link`)
            let List = {
                Name:info.data.nameOfFile,
                Description:info.data.DescriptionOfFile,
                image:info.data.image,
                Owner: i.Owner,
                IsStarred:i.IsStarred,
                NumberOfStars:i.Stars,
                NumberOfLikes:i.Likes,
                Date:i.Date,
                Id :i.id,
                IsDownloadable : i.IsDownloadable,
                FileType :i.FileType,
                DidMemberStarMe: StarAnswer,
                DidMemberLikeMe:LikeAnswer

            }
            return List
        })); 
        setMemberDetails(tx)
    }
    const renderButton = () => {



        if(Memeslength == 0) {
            return (
                <div className='flex flex-row items-center justify-center' >


                    {
                        loadingpage ? 
                        ( 
                            <div className='text-center text-8xl'>
                              <img src="proxy.php?url=/loading.png" alt="loading..." />
                            </div>
                        ) 
                        : 
                        (
                            <h4 className='text-center'>
                                There are no Memes For Display
                            </h4>
                        )
                    }
                </div>
            )
        }
        if (Memeslength>0){
            return(
                <>
                {
                    loadingpage ? 
                    ( 
                        <div className='flex flex-row items-center justify-center' >
                            <div className='text-center text-8xl'>
                                <img src="proxy.php?url=/loading.png" alt="loading..." />
                            </div>
                        </div>
                    ) 
                    : 
                    (
                        <div className='grid xs:grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4  gap-4 px-5 py-2 ' >
                        {
                            memberDetails.map((card,i) => {
                                return(  
                                    <div key={i} className='w-full shadow-md p-3 rounded-3xl bg-gray-50 '>
                                        {
                                              <div className='flex flex-col' >
                                                    <div className='group flex flex-row items-center justify-center overflow-hidden rounded-lg '  >
                                                        <a href={card.File} target='_blank' rel="noreferrer" >  
                                                           {
                                                               (card.FileType == "img/png") ?
                                                               (
                                                                <img src={`https://${card.image}.ipfs.dweb.link/image`}  className='w-full rounded-lg h-36 group-hover:scale-150 transition ease duration-300' alt="..." />
                                                               )
                                                               :
                                                               (
                                                                <video src={`https://${card.image}.ipfs.dweb.link/image`}  className='w-full rounded-lg h-36 group-hover:scale-150 transition ease duration-300' alt="..."  width="500px" height="500px"  controls="controls"/> 
                                                               )
                                                           } 

                                                        </a>
                                                        <div className=' hidden p-1 rounded-lg bg-gray-700 text-gray-100 font-medium text-xs group-hover:inline absolute self-start  ' >
                                                            {
                                                                props.members.map((lists,i) => {
                                                                    return(

                                                                        <div key={i}  >
                                                                        {
                                                                            lists.Adddress == card.Owner &&
                                                                            <div>
                                                                                {lists.Name}
                                                                            </div>
                                                                        }
                                                                        </div>
                                                                    )
                                                                })

                                                            }
                                                        </div>
                                                        <div className='hidden p-1 rounded-lg bg-gray-700 text-gray-100 font-thin text-xs group-hover:inline absolute self-end'  >
                                                            {
                                                                card.Date

                                                            }
                                                        </div>
                                                   </div>
                                                    <div className='py-2 px-3 border-2 border-gray-500 h-auto mx-2 mt-4 rounded-lg' >
                                                        <div className='grid grid-rows grid-flow-col gap-1  ' >

                                                        {
                                                                card.Name.length > 7 ?
                                                            (
                                                                <div className='flex items-end row-start-2 row-span-2 rounded-lg font-black text-xs  ' >
                                                                    {card.Name}
                                                                </div> 
                                                            ) : 
                                                            (
                                                                <div className='flex items-end row-start-2 row-span-2 rounded-lg font-black text-sm  '>
                                                                      {card.Name}
                                                                </div> 
                                                            )

                                                         }
                                                            {
                                                                card.IsDownloadable ?
                                                                <div className='row-start-2 row-span-2 flex items-center justify-center rounded-lg shadow-md py-2 hover:shadow-xl transition ease ' >
                                                                    <a href={`https://${card.image}.ipfs.dweb.link/image`} download target='_blank' rel="noreferrer" onClick={(e) =>download(card.image,card.Name)}>  
                                                                    <img src='./arrow.png' alt='' className='h-5 w-5 mt-1' />
                                                                    </a>

                                                                 </div>
                                                                 :
                                                                 <div className='row-start-2 h-10 row-span-2 flex items-center justify-center rounded-lg py-2 ' >

                                                                </div>
                                                            }

                                                        </div>

                                                        <div className='rounded-md mt-3 text-sm h-auto ' >
                                                            {card.Description} 
                                                        </div>
                                                        <div className='flex flex-row  justify-between space-x-1'>
                                                            <button className='rounded-md border-2 border-black flex mt-3  items-center justify-around h-8 w-24 hover:bg-[#FFFF00] 'onClick={() => StarMeme(card.Id, card.DidMemberStarMe)}>

                                                                {
                                                                   ((loadingStarId == card.Id) && loadingStar ) ? 
                                                                    (
                                                                        <button className='bg-[#FFFF00] rounded-md flex items-center justify-around h-7 w-24'>
                                                                            <h4>

                                                                            <img src="proxy.php?url=/loader.png" alt="loading..." className='w-8 h-8 mt-2' />
                                                                            </h4>
                                                                        </button>
                                                                    ) 
                                                                    : 
                                                                    (
                                                                        (card.DidMemberStarMe == true) ?
                                                                        (
                                                                            <>
                                                                            <img src='./filledStar.png' alt='STAR'  className='w-5 h-5'  />
                                                                            {card.NumberOfStars}
                                                                            </>
                                                                        ) 
                                                                        :
                                                                        (
                                                                            <>
                                                                            <img src='./strokeStar.png' alt='STAR' className='w-5 h-5'  />
                                                                            {card.NumberOfStars}
                                                                            </>
                                                                        )
                                                                    )
                                                                }
                                                            </button>
                                                           <button className='rounded-md border-2 border-black flex mt-3  items-center justify-around h-8 w-24 hover:bg-[#ff0000] '  onClick={() => LikeMeme(card.Id, card.DidMemberLikeMe)}
                                                               >
                                                                    {
                                                                    ((loadingLikeId == card.Id) && loadingLike) ?
                                                                    (
                                                                        <button className='rounded-md border-2 border-black flex  items-center justify-around h-8 w-24 bg-[#FFFF00] ' >
                                                                            <h4>
                                                                            <img src='./filledStar.png' alt='STAR'  className='w-5 h-5'  />
                                                                            </h4>
                                                                        </button>
                                                                    ) 
                                                                    :
                                                                    (
                                                                        (card.DidMemberLikeMe == true) ?
                                                                            (

                                                                                <>
                                                                                    <img src='./filledLove.png' alt='STAR'  className='w-5 h-5'  />
                                                                                    {card.NumberOfLikes}
                                                                                </>
                                                                            ) 
                                                                            :
                                                                            (
                                                                                <>
                                                                                    <img src='./UnfilledLove.png' alt='STAR' className='w-5 h-5'  />
                                                                                    {card.NumberOfLikes}
                                                                                </>
                                                                            )
                                                                    )
                                                                }
                                                            </button>

                                                        </div>

                                                    </div>
                                                </div>

                                        }
                                    </div>
                                )
                            })
                        }
                    </div>
                    )
                }
                </>

            ) 
        }



    }

    return (
        <div> 
            <Head>
                <title>Home</title>
                <meta name="description" content="By Oleanji" />
                <link rel="icon" href="proxy.php?url=/favicon.ico" />
            </Head>

            <div className='flex flex-col space-y-6'>
                <div className='flex flex-col items-end pt-3 px-2'>
                    <ConnectButton />
                </div>
                <div className=''> 
                    {renderButton()}
                </div>
            </div>
        </div>
      )
}

async function GetData() {
    const data = await client.query(MemesQuery).toPromise()
    return (data.data.memes)
  }
  async function MemInfo() {

    const info = await client.query(MemberQuery).toPromise()
    return (info.data.memebers)
  }

  export async function getServerSideProps() {
    const data = await GetData()
    const info = await MemInfo()
    return{
      props:{
        memes:data,
        members:info
      }
    }
  }

Result:

Starred Page

This page will contain the list of starred items of a particular member of the dapp (i.e the art you reacted with a star)

import Head from 'next/head'
import { ConnectButton } from '@rainbow-me/rainbowkit';
import { useContract, useProvider,useSigner,useAccount,useBalance,useConnect  } from 'wagmi'
import {MemeForestAddress,Token, ApiUriv} from '../constant'
import { useEffect, useState } from "react";
import MEME from '../artifacts/contracts/MemeForest.sol/MemeForest.json'
import axios from "axios"
import { createClient } from 'urql'
import { Web3Storage } from 'web3.storage'
import { useRouter } from 'next/router';


const MemesQuery= `
query {
    memes(
    orderBy : id,
    orderDirection: desc
        ) 
    {
        id
        MemeInfo
        Owner
        IsStarred
        Stars
        Likes
        Date
        FileType
        IsDownloadable
        StarredAddresses
        LikesAddresses
    }
}
`

const MemberQuery= `
query {
  memebers{
    Name
    Adddress
    TotalMeme
    StarredMemes
    Date
  }
}
`

const client = createClient({
  url: ApiUriv,
})    


export default function Starred (props) {  
    const { data} = useAccount()
    const person = data?.address;
    const[loadingStarId, setLoadingStarId] = useState(0)
    const[loadingStar, setLoadingStar] = useState(false)
    const[DidIStarMeme, SetDidIStarMeme] =useState(false)
    const [AMember,setAMember] = useState(false)
    const[memeDetails,setMemeDetails] = useState([])
    const[loadingpage,setLoadingPage] = useState(false)
    const provider = useProvider()
    const { data: signer} = useSigner()
    const contractWithSigner = useContract({
        addressOrName: MemeForestAddress,
        contractInterface: MEME.abi,
        signerOrProvider: signer,
    })

    const contractWithProvider = useContract({
        addressOrName: MemeForestAddress,
        contractInterface: MEME.abi,
        signerOrProvider: provider,
    });
    const router = useRouter()

    useEffect(() => {
        PageLoad();
        checkIfAMember(props);
        StarredMemes(props);
    }, []);


    const PageLoad = async () =>{
        try {
            setLoadingPage(true)
            const delay = ms => new Promise(res => setTimeout(res, ms));
            await delay(7000);
            setLoadingPage(false)
        } catch (e) {
            console.log(e)
        }
    }
    const checkIfAMember = async (props) => {
        try {

            let data = props.members;
            const addresses = ['']
            const tx = await Promise.all(data.map(async i => {

                addresses.push(i.Adddress)
                return addresses
            }));
            const Address = person.toLowerCase()
            const isThere = addresses.includes(Address)
            setAMember(isThere)
        } catch (e) {
            console.log(e)
            setAMember(false)
        }
    }
    function getAccessToken () {
        return Token;
    }
    function makeStorageClient () {
    return new Web3Storage({ token: getAccessToken() })
    }

    const StarredMemes = async (props) => {
        const client = makeStorageClient()
        let data = props.memes;
        const tx = await Promise.all(data.map(async i => {
            const res = await client.get(i.MemeInfo) 
            if(!res.ok) {
                return;
            }
            const StarredAddress = i.StarredAddresses;

            for (let i = 0; i < StarredAddress.length; i++) {
                const Address = person.toLowerCase()
                const CurrentAddress = StarredAddress[i]
                if(Address == CurrentAddress ){
                    SetDidIStarMeme(true)
                }
                else{
                    SetDidIStarMeme(false)
                }

            }
            const StarAnswer= await contractWithProvider.WhatDidIStar(i.id,person);
            let files = await res.files()
            const info =  await axios.get(`https://${files[0].cid}.ipfs.dweb.link`)
            let List = {
                Name:info.data.nameOfFile,
                Description:info.data.DescriptionOfFile,
                image:info.data.image,
                Owner: i.Owner,
                IsStarred:i.IsStarred,
                NumberOfStars:i.Stars,
                NumberOfLikes:i.Likes,
                Date:i.Date,
                Id :i.id,
                IsDownloadable : i.IsDownloadable,
                FileType :i.FileType,
                DidMemberStarMe: StarAnswer,
            }
            return List
        })); 
        setMemeDetails(tx)
    }


    const StarMeme = async (id,bool) =>{
        try {
            setLoadingStar(true)
            setLoadingStarId(id)
            if (bool == true) {
                const data= await contractWithSigner.RemoveStarMeme(id)
                await data.wait()
                await FechMemeInfo(props);
            }
            else {
                const data= await contractWithSigner.StarMeme(id)
                await data.wait()
                await FechMemeInfo(props);
            }
            setLoadingStar(false)

        } catch (e) {
            console.log(e)
        }
    }


    const download = (e,name) => {

        axios({
            url: e, //your url
            method: 'GET',
            responseType: 'blob', // important
        }).then((response) => {
            const url = window.URL.createObjectURL(new Blob([response.data]));
            const link = document.createElement('a');
            link.href = url;
              link.setAttribute("download", name+".png" ); 
              document.body.appendChild(link);
              link.click();

          });

      };

    const gohome = () => {
        router.push('/')
    }
    const create = () => {
        router.push('/create')
    }

      const renderButton = () => {
        if(!AMember){
            return (
                <div>
                    {
                    loadingpage ? 
                    ( 
                        <div className='flex flex-row items-center justify-center text-8xl '>
                           <img src="proxy.php?url=/loading.png" alt="loading..." />
                        </div>
                    ) 
                    : 
                    (
                        <div className='flex flex-col items-center justify-center space-y-5 '> 
                            <div className='text-center font-bold text-lg '>
                                Go Back Home and Register before Seeing Starred Memes 
                            </div>
                            <img src='/sad.png' className='w-1/6'/>  
                            <button onClick={gohome} className='no-underline bg-green-500 py-2 px-3 rounded-lg font-bold text-teal-50 hover:bg-orange-500 cursor-pointer ' > 
                                Home
                            </button>
                        </div>
                    )
                    }
                </div>  
            )
        }
        if(AMember) {
           if(memeDetails.length == 0) 
           {
            return (
                <div>
                    {
                    loadingpage ? 
                    ( 
                        <div className='flex flex-row items-center justify-center text-8xl '>
                             <img src="proxy.php?url=/loading.png" alt="loading..." />
                        </div>
                    ) 
                    : 
                    (
                        <div className='flex flex-col items-center justify-center space-y-5 ' > 
                            <div className='text-center font-bold text-lg '>
                                You have No Starred Memes Go back to Create Memes 
                            </div>
                            <img src='/sad.png' className='w-1/6'/>  
                            <button onClick={create} className='no-underline bg-green-500 py-2 px-3 rounded-lg font-bold text-teal-50 hover:bg-orange-500 cursor-pointer '> 
                                Create Meme
                            </button>
                        </div>
                    )
                    }
                </div>
            )
           }
           if(memeDetails.length > 0){
            return(
                <div className='flex flex-col ' >
                <h3 className='text-center font-bold text-lg self-center'>
                    YOUR STARRED NFTS ART(S)
                </h3>

                <div className='grid xs:grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4  gap-4 px-5 py-2 ' >
                    {
                        memeDetails.map((card,i) => {
                            return(  
                                <>
                                 {
                                    (card.DidMemberStarMe == true)&& 

                                    <div key={i} className='w-full shadow-md p-3 rounded-3xl bg-gray-50 '>
                                        <div className='flex flex-col' >
                                        <div className='group flex flex-row items-center justify-center overflow-hidden rounded-lg '  >
                                            <a href={card.File} target='_blank' rel="noreferrer" >  
                                               {
                                                   (card.FileType == "img/png") ?
                                                   (
                                                    <img src={`https://${card.image}.ipfs.dweb.link/image`}  className='w-full rounded-lg h-36 group-hover:scale-150 transition ease duration-300' alt="..." />
                                                   )
                                                   :
                                                   (
                                                    <video src={`https://${card.image}.ipfs.dweb.link/image`}  className='w-full rounded-lg h-36 group-hover:scale-150 transition ease duration-300' alt="..."  width="500px" height="500px"  controls="controls"/> 
                                                   )
                                               } 

                                            </a>
                                            <div className=' hidden p-1 rounded-lg bg-gray-700 text-gray-100 font-medium text-xs group-hover:inline absolute self-start  ' >
                                                {
                                                    props.members.map((lists,i) => {
                                                        return(

                                                            <div key={i}  >
                                                            {
                                                                lists.Adddress == card.Owner &&
                                                                <div>
                                                                    {lists.Name}
                                                                </div>
                                                            }
                                                            </div>
                                                        )
                                                    })

                                                }
                                            </div>
                                            <div className='hidden p-1 rounded-lg bg-gray-700 text-gray-100 font-thin text-xs group-hover:inline absolute self-end'  >
                                                {
                                                    card.Date

                                                }
                                            </div>
                                       </div>
                                        <div className='py-2 px-3 border-2 border-gray-500 h-auto mx-2 mt-4 rounded-lg' >
                                            <div className='grid grid-rows grid-flow-col gap-1  ' >

                                            {
                                                    card.Name.length > 7 ?
                                                (
                                                    <div className='flex items-end row-start-2 row-span-2 rounded-lg font-black text-xs  ' >
                                                        {card.Name}
                                                    </div> 
                                                ) : 
                                                (
                                                    <div className='flex items-end row-start-2 row-span-2 rounded-lg font-black text-sm  '>
                                                          {card.Name}
                                                    </div> 
                                                )

                                             }
                                                {
                                                    card.IsDownloadable ?
                                                    <div className='row-start-2 row-span-2 flex items-center justify-center rounded-lg shadow-md py-2 hover:shadow-xl transition ease ' >
                                                        <a href={`https://${card.image}.ipfs.dweb.link/image`} download target='_blank' rel="noreferrer" onClick={(e) =>download(card.image,card.Name)}>  
                                                        <img src='./arrow.png' alt='' className='h-5 w-5 mt-1' />
                                                        </a>

                                                     </div>
                                                     :
                                                     <div className='row-start-2 h-10 row-span-2 flex items-center justify-center rounded-lg py-2 ' >

                                                    </div>
                                                }

                                            </div>

                                            <div className='rounded-md mt-3 text-sm h-auto ' >
                                                {card.Description} 
                                            </div>
                                            <div className=''>
                                                <button className='rounded-md border-2 border-black flex mt-3  items-center justify-around h-8 w-full hover:bg-[#FFFF00] 'onClick={() => StarMeme(card.Id, card.DidMemberStarMe)}>

                                                    {
                                                        ((loadingStarId == card.Id) && loadingStar ) ? 
                                                        (
                                                            <button className='bg-[#FFFF00] rounded-md flex  items-center justify-around h-7 w-full'>
                                                                <h4>
                                                                <img src="proxy.php?url=/loader.png" alt="loading..." className='w-8 h-8 mt-2' />
                                                                </h4>
                                                            </button>
                                                        ) 
                                                        : 
                                                        (
                                                            (card.DidMemberStarMe == true) ?
                                                            (
                                                                <>
                                                                <img src='./filledStar.png' alt='STAR'  className='w-5 h-5'  />
                                                                {card.NumberOfStars}
                                                                </>
                                                            ) 
                                                            :
                                                            (
                                                                <>
                                                                <img src='./strokeStar.png' alt='STAR' className='w-5 h-5'  />
                                                                {card.NumberOfStars}
                                                                </>
                                                            )
                                                        )
                                                    }
                                                </button>


                                            </div>

                                        </div>
                                    </div>
                                    </div> 

                                }

                                </>
                            )
                        })
                    }
                </div>
                <div className='flex items-center justify-center space-x-3 py-3 w-full '>      
                    <img src='/sad.png' className='w-[40px]'/>
                    <div className='px-5 text-center text-sm'>
                        Thats all of your Starred Nft Art(s)
                    </div> 
                </div> 
                </div>
            )
           }
        }

      }



    return (
        <div> 
        <Head>
            <title>Home</title>
            <meta name="description" content="By Oleanji" />
            <link rel="icon" href="proxy.php?url=/favicon.ico" />
        </Head>
        <div className='flex flex-col space-y-6'>
            <div className='flex flex-col items-end pt-3 px-2'>
                <ConnectButton />
            </div>
            <div> 
                {renderButton()}
            </div>
        </div>
    </div>
    )
}

async function GetData() {
    const data = await client.query(MemesQuery).toPromise()
    return (data.data.memes)
  }
  async function MemInfo() {
    const info = await client.query(MemberQuery).toPromise()
    return (info.data.memebers)
  }
  export async function getServerSideProps() {
    const data = await GetData()
    const info = await MemInfo()
    return{
      props:{
        memes:data,
        members:info
      }
    }
  }

This shows all your starred items, by checking:

If you are a member
how many items have you starred

Result:(if you haven't created any art)

Creations Page

This page shows the creations of a member of the dapp and shows the reactions of others on it.

import Head from 'next/head'
import { ConnectButton } from '@rainbow-me/rainbowkit';
import { useContract, useProvider,useSigner,useAccount,useBalance,useConnect  } from 'wagmi'
import {MemeForestAddress,Token, ApiUriv} from '../constant'
import { useEffect, useState } from "react";
import MEME from '../artifacts/contracts/MemeForest.sol/MemeForest.json'
import 'bootstrap/dist/css/bootstrap.css'
import axios from "axios"
import { createClient } from 'urql'
import { Web3Storage } from 'web3.storage'



const MemesQuery= `
query {
    memes(
    orderBy : id,
    orderDirection: desc
        ) 
    {
        id
        MemeInfo
        Owner
        IsStarred
        Stars
        Likes
        Date
        FileType
        IsDownloadable
        StarredAddresses
        LikesAddresses
    }
}
`

const MemberQuery= `
query {
  memebers{
    Name
    Adddress
    TotalMeme
    StarredMemes
    Date
  }
}
`

const client = createClient({
  url: ApiUriv,
})


export default function Feed (props) {
    const Memeslength  = props.memes.length
    const Memberslength  = props.members.length
    const { data} = useAccount()
    const person = data?.address;
    const [Address, setAddress] = useState("")
    const [memes,setMemes] = useState([])
    const [aCreator, setIsACreator] = useState(false)
    const[loadingStar, setLoadingStar] = useState(false)
    const[memberDetails,setMemberDetails] = useState([])
    const[loadingLike, setLoadingLike] = useState(false)
    const[loadingLikeId, setLoadingLikeId] = useState(0)
    const[loadingStarId, setLoadingStarId] = useState(0)
    const provider = useProvider()
    const { data: signer} = useSigner()
    const[loadingpage,setLoadingPage] = useState(false)
    const contractWithSigner = useContract({
        addressOrName: MemeForestAddress,
        contractInterface: MEME.abi,
        signerOrProvider: signer,
    })
    const contractWithProvider = useContract({
        addressOrName: MemeForestAddress,
        contractInterface: MEME.abi,
        signerOrProvider: provider,
    })
    useEffect(() => {
        const Newperson = person?.toLocaleLowerCase()
        setAddress(Newperson);
            PageLoad();
            FechMemeInfo(props);
    }, []);

    const PageLoad = async () =>{
        try {
            setLoadingPage(true)
            const delay = ms => new Promise(res => setTimeout(res, ms));
            await delay(20000);
            setLoadingPage(false)
        } catch (e) {
            console.log(e)
        }
    }

    const create = () => {
        router.push('/create')
    }

    const StarMeme = async (id,bool) =>{
        try {
            setLoadingStar(true)
            setLoadingStarId(id)
            if (bool == true) {
                const data= await contractWithSigner.RemoveStarMeme(id)
                await data.wait()
                await FechMemeInfo(props);
            }
            else {

                const data= await contractWithSigner.StarMeme(id)
                await data.wait()
                await FechMemeInfo(props);
            }
            setLoadingStar(false)

        } catch (e) {
            console.log(e)
        }
    }
    const download = (e,name) => {
        try {
            const Link = `https://${e}.ipfs.dweb.link/image`
            axios({
                url: Link, //your url
                method: 'GET',
                responseType: 'blob', // important
            }).then((response) => {
                const url = window.URL.createObjectURL(new Blob([response.data]));
                const link = document.createElement('a');
                link.href = url;
                  link.setAttribute("download", name+".png" ); 
                  document.body.appendChild(link);
                  link.click();

              });
        } catch (error) {
            console.log(error)
        }
      };
    const LikeMeme = async (id,bool) =>{
        try {
            setLoadingLike(true)
            setLoadingLikeId(id)
            if (bool == true) {

                const data= await contractWithSigner.UnLikeMeme(id)
                await data.wait()
                await FechMemeInfo(props); 

            }
            else {
                const data= await contractWithSigner.LikeMeme(id)
                await data.wait()
                await FechMemeInfo(props);

            }
            setLoadingLike(false)

        } catch (e) {
            console.log(e)
        }
    }
    function getAccessToken () {

        return Token;
    }

    function makeStorageClient () {
    return new Web3Storage({ token: getAccessToken() })
    }
    const FechMemeInfo = async (props) => {
        const client = makeStorageClient()
        let data = props.memes;
        const tx = await Promise.all(data.map(async i => {
            const res = await client.get(i.MemeInfo) 
            if(!res.ok) {
                return;
            }

                const StarAnswer= await contractWithProvider.WhatDidIStar(i.id,person);
                const LikeAnswer= await contractWithProvider.WhatDidILike(i.id,person);


            let files = await res.files()
            const info =  await axios.get(`https://${files[0].cid}.ipfs.dweb.link`)
            let List = {
                Name:info.data.nameOfFile,
                Description:info.data.DescriptionOfFile,
                image:info.data.image,
                Owner: i.Owner,
                IsStarred:i.IsStarred,
                NumberOfStars:i.Stars,
                NumberOfLikes:i.Likes,
                Date:i.Date,
                Id :i.id,
                IsDownloadable : i.IsDownloadable,
                FileType :i.FileType,
                DidMemberStarMe: StarAnswer,
                DidMemberLikeMe:LikeAnswer

            }
            return List
        })); 
        setMemberDetails(tx);
    }
    const renderButton = () => {
        if(Memeslength == 0) {
            return (
                <div className='flex flex-row items-center justify-center' >


                    {
                        loadingpage ? 
                        ( 
                            <div className='text-center text-8xl'>
                              <img src="proxy.php?url=/loading.png" alt="loading..." />
                            </div>
                        ) 
                        : 
                        (
                           <>
                            <img src='/sad.png' className='w-1/6'/>
                            <h4>
                                There are no Memes For Display
                            </h4>
                            </>
                        )
                    }
                </div>
            )
        }
        if (Memeslength>0){
            return(
                <>
                {
                    loadingpage ? 
                    ( 
                        <div className='flex flex-row items-center justify-center' >
                            <div className='text-center text-8xl'>
                                <img src="proxy.php?url=/loading.png" alt="loading..." />
                            </div>
                        </div>
                    ) 
                    : 
                    (
                        <div className='flex flex-col ' >
                        <h3 className='text-center font-bold text-lg self-center'>
                            YOUR CREATED NFT ART(S)
                        </h3>

                        <div className='grid xs:grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4  gap-4 px-5 py-2 ' >
                        {
                            memberDetails.map((card,i) => {
                                return(  
                                    <>
                                    <div key={i} >
                                        {
                                             (card.Owner == Address) &&
                                             <div className='w-full shadow-md p-3 rounded-3xl bg-gray-50 '>
                                              <div className='flex flex-col' >
                                                    <div className='group flex flex-row items-center justify-center overflow-hidden rounded-lg '  >
                                                        <a href={card.File} target='_blank' rel="noreferrer" >  
                                                           {
                                                               (card.FileType == "img/png") ?
                                                               (
                                                                <img src={`https://${card.image}.ipfs.dweb.link/image`}  className='w-full rounded-lg h-36 group-hover:scale-150 transition ease duration-300' alt="..." />
                                                               )
                                                               :
                                                               (
                                                                <video src={`https://${card.image}.ipfs.dweb.link/image`}  className='w-full rounded-lg h-36 group-hover:scale-150 transition ease duration-300' alt="..."  width="500px" height="500px"  controls="controls"/> 
                                                               )
                                                           } 

                                                        </a>
                                                        <div className=' hidden p-1 rounded-lg bg-gray-700 text-gray-100 font-medium text-xs group-hover:inline absolute self-start  ' >
                                                            {
                                                                props.members.map((lists,i) => {
                                                                    return(

                                                                        <div key={i}  >
                                                                        {
                                                                            lists.Adddress == card.Owner &&
                                                                            <div>
                                                                                {lists.Name}
                                                                            </div>
                                                                        }
                                                                        </div>
                                                                    )
                                                                })

                                                            }
                                                        </div>
                                                        <div className='hidden p-1 rounded-lg bg-gray-700 text-gray-100 font-thin text-xs group-hover:inline absolute self-end'  >
                                                            {
                                                                card.Date

                                                            }
                                                        </div>
                                                   </div>
                                                    <div className='py-2 px-3 border-2 border-gray-500 h-auto mx-2 mt-4 rounded-lg' >
                                                        <div className='grid grid-rows grid-flow-col gap-1  ' >

                                                        {
                                                                card.Name.length > 7 ?
                                                            (
                                                                <div className='flex items-end row-start-2 row-span-2 rounded-lg font-black text-xs  ' >
                                                                    {card.Name}
                                                                </div> 
                                                            ) : 
                                                            (
                                                                <div className='flex items-end row-start-2 row-span-2 rounded-lg font-black text-sm  '>
                                                                      {card.Name}
                                                                </div> 
                                                            )

                                                         }
                                                            {
                                                                card.IsDownloadable ?

                                                                <div className='row-start-2 row-span-2 flex items-center justify-center rounded-lg shadow-md py-2 hover:shadow-xl transition ease ' >
                                                                    <a href={`https://${card.image}.ipfs.dweb.link/image`} download target='_blank' rel="noreferrer" onClick={(e) =>download(card.image,card.Name)}>  
                                                                    <img src='./arrow.png' alt='' className='h-5 w-5 mt-1' />
                                                                    </a>

                                                                 </div>
                                                                 :
                                                                 <div className='row-start-2 h-10 row-span-2 flex items-center justify-center rounded-lg py-2 ' >
                                                                </div>
                                                            }

                                                        </div>

                                                        <div className='rounded-md mt-3 text-sm h-auto ' >
                                                            {card.Description} 
                                                        </div>
                                                        <div className='flex flex-row  justify-between space-x-1'>
                                                            <button className='rounded-md border-2 border-black flex mt-3  items-center justify-around h-8 w-24 hover:bg-[#FFFF00] 'onClick={() => StarMeme(card.Id, card.DidMemberStarMe)}>

                                                                {
                                                                   ((loadingStarId == card.Id) && loadingStar ) ? 
                                                                    (
                                                                        <button className='bg-[#FFFF00] rounded-md flex items-center justify-around h-7 w-24'>
                                                                            <h4>

                                                                            <img src="proxy.php?url=/loader.png" alt="loading..." className='w-8 h-8 mt-2' />
                                                                            </h4>
                                                                        </button>
                                                                    ) 
                                                                    : 
                                                                    (
                                                                        (card.DidMemberStarMe == true) ?
                                                                        (
                                                                            <>
                                                                            <img src='./filledStar.png' alt='STAR'  className='w-5 h-5'  />
                                                                            {card.NumberOfStars}
                                                                            </>
                                                                        ) 
                                                                        :
                                                                        (
                                                                            <>
                                                                            <img src='./strokeStar.png' alt='STAR' className='w-5 h-5'  />
                                                                            {card.NumberOfStars}
                                                                            </>
                                                                        )
                                                                    )
                                                                }
                                                            </button>
                                                           <button className='rounded-md border-2 border-black flex mt-3  items-center justify-around h-8 w-24 hover:bg-[#ff0000] '  onClick={() => LikeMeme(card.Id, card.DidMemberLikeMe)} >
                                                                {
                                                                    ((loadingLikeId == card.Id) && loadingLike) ?
                                                                    (
                                                                        <button className='rounded-md border-2 border-black flex  items-center justify-around h-8 w-24 bg-[#FFFF00] ' >
                                                                            <h4>
                                                                                <img src='./filledStar.png' alt='STAR'  className='w-5 h-5'  />
                                                                            </h4>
                                                                        </button>
                                                                    ) 
                                                                    :
                                                                    (
                                                                        (card.DidMemberLikeMe == true) ?
                                                                            (

                                                                                <>
                                                                                    <img src='./filledLove.png' alt='STAR'  className='w-5 h-5'  />
                                                                                    {card.NumberOfLikes}
                                                                                </>
                                                                            ) 
                                                                            :
                                                                            (
                                                                                <>
                                                                                    <img src='./UnfilledLove.png' alt='STAR' className='w-5 h-5'  />
                                                                                    {card.NumberOfLikes}
                                                                                </>
                                                                            )
                                                                    )
                                                                }
                                                            </button>

                                                        </div>

                                                    </div>
                                                </div>
                                           </div>
                                        }
                                    </div>
                                    </>
                                )
                            })
                        }


                    </div>
                    <div className='flex items-center justify-center w-full py-4'>      
                            <img src='/sad.png' className='w-[40px]'/>
                            <div className='px-5 text-center text-sm'>
                            Thats all of your Created Nft Art(s)
                            </div> 
                        </div>     
                    </div>
                    )
                }
                </>

            ) 
        }



    }

    return (
        <div> 
            <Head>
                <title>Home</title>
                <meta name="description" content="By Oleanji" />
                <link rel="icon" href="proxy.php?url=/favicon.ico" />
            </Head>

            <div className='flex flex-col space-y-6'>
                <div className='flex flex-col items-end pt-3 px-2'>
                    <ConnectButton />
                </div>
                <div className=''> 
                    {renderButton()}
                </div>
            </div>
        </div>
      )
}

async function GetData() {
    const data = await client.query(MemesQuery).toPromise()
    return (data.data.memes)
  }
  async function MemInfo() {

    const info = await client.query(MemberQuery).toPromise()
    return (info.data.memebers)
  }

  export async function getServerSideProps() {
    const data = await GetData()
    const info = await MemInfo()
    return{
      props:{
        memes:data,
        members:info
      }
    }
  }

Create Page

This page is used to upload the art of members

import Head from 'next/head'
import { ConnectButton } from '@rainbow-me/rainbowkit';
import { useContract, useProvider,useSigner,useAccount  } from 'wagmi'
import {MemeForestAddress, Token, ApiUriv} from '../constant'
import { useEffect, useState } from "react";
import MEME from '../artifacts/contracts/MemeForest.sol/MemeForest.json'
import { createClient } from 'urql'
import { useRouter } from 'next/router';
import { Web3Storage } from 'web3.storage'


const MemberQuery= `
query {
  memebers{
    Name
    Adddress
    TotalMeme
    StarredMemes
    Date
  }
}
`

const client = createClient({
  url: ApiUriv,
})    


export default function Create (props) {

    const { data} = useAccount()
    const person = data?.address;
    const [AMember,setAMember] = useState(false)
    const [nameOfFile, setNameOfFile] = useState("")
    const [DescriptionOfFile, setDescriptionOfFile] = useState("")
    const [Image, setImage] = useState()
    const [viewing,setViewing] = useState()
    const[loading, setLoading] = useState(false)
    const[IsVideo, setIsVideo] = useState(false)
    const[IsImage, setIsImage] = useState(false)
    const[IsDownloadable, SetIsDownloadable] = useState(false)
    const[loadingpage,setLoadingPage] = useState(false)
    const[valueExtension, setValueExtension] = useState("")
    const [numberOfLoading, setNumberOfLoading] = useState(3)
    const { data: signer, isError, isLoading } = useSigner()
    const contractWithSigner = useContract({
        addressOrName: MemeForestAddress,
        contractInterface: MEME.abi,
        signerOrProvider: signer,
    })
    const router = useRouter()
    useEffect(() => {
        PageLoad()

            checkIfAMember(props);

    }, []);

    const PageLoad = async () =>{
        try {
            setLoadingPage(true)
            const delay = ms => new Promise(res => setTimeout(res, ms));
            await delay(7000);
            setLoadingPage(false)
        } catch (e) {
            console.log(e)
        }
    }
    const checkIfAMember = async (props) => {
        try {

            let data = props.members;
            const addresses = ['']
            const tx = await Promise.all(data.map(async i => {

                addresses.push(i.Adddress)
                return addresses
            }));
            const Address = person.toLowerCase()
            const isThere = addresses.includes(Address)
            setAMember(isThere)
        } catch (e) {
            console.log(e)
            setAMember(false)
        }
    }

    const CreateMemes = async (memeInfo, valueExt) => {
        try {


            let time = new Date().toLocaleString();

            const create = await contractWithSigner.CreateMemeItems(memeInfo,person,time,valueExt,IsDownloadable)
            setNumberOfLoading(1)
            await create.wait()
            setLoading(false)
            Feed();

        } catch (error) {
            console.log(error)
        }
    }



    function getAccessToken () {  

    return Token;
    }

    function makeStorageClient () {
    return new Web3Storage({ token: getAccessToken() })
    }
    const Uploading = async (valueExt) => {
        try {
            if(!nameOfFile) {
                alert("Name of Meme is not there")
            }
            if(!DescriptionOfFile) {
                alert("Description of Meme is not there")
            }
            if(!Image) {
                alert("Put in a picture of your meme")
            }
            if(nameOfFile && DescriptionOfFile ) {
                setLoading(true)
                const client = makeStorageClient()
                const file = new File([Image], 'image', { type: 'img/png' })
                const cid = await client.put([file])
                const data = JSON.stringify ({
                    nameOfFile, 
                    DescriptionOfFile, 
                    image:cid
                })
                setNumberOfLoading(2)
                const blob = new Blob([data], { type: 'application/json' })
                const files = [

                    new File([blob], 'MemeInfo')
                ]
                const MemeInfo = await client.put(files)
                CreateMemes(MemeInfo,valueExt);
            }


        } catch (e) {
            console.log(e)
        }
    }
    const gohome = () => {
        router.push('/')
    }
    const Feed = () => {
        router.push('/Feed')
    }


    function OnFileChange(e) {
        try {
            const file = e.target.files[0]

        const fie = e.target.files[0].name

        if(fie){
            const extension = fie.slice((Math.max(0, fie.lastIndexOf(".")) || Infinity) + 1);

            if (extension==="mp4" || extension==="mkv" || extension ==="avi" || extension ==="m4a"){
                setIsVideo(true);
                setIsImage(false);
                setValueExtension("img/mp4")
            }
            else{
                setIsVideo(false);
                setIsImage(true);
                setValueExtension("img/png")
            }
        }
        if(file){
            const image = URL.createObjectURL(file)
            setViewing(image)
            let reader = new FileReader()
            reader.onload = function () {
                if(reader.result){
                    setImage(Buffer.from(reader.result))
                }
            }
            reader.readAsArrayBuffer(file)
        }

        } catch (error) {
           console.log(error )
        }

    }
    const checkbox = () => {
        let value = IsDownloadable;
        SetIsDownloadable (!value)
    }
    const renderButton = () =>{
        if(!AMember){
            return (
                <div>
                    {
                    loadingpage ? 
                    ( 
                        <div className='flex flex-row items-center justify-center text-8xl '>
                           <img src="proxy.php?url=/loading.png" alt="loading..." />
                        </div>
                    ) 
                    : 
                    (
                        <div className='flex flex-col items-center justify-center '> 
                            <div className='text-center font-bold text-lg '>
                                Go Back Home and Register before Uploading Memes 
                            </div>
                            <img src='/sad.png' className='w-1/6'/>  
                            <button onClick={gohome} className='no-underline bg-green-500 py-2 px-3 rounded-lg font-bold text-teal-50 hover:bg-orange-500 cursor-pointer ' > 
                                Home
                            </button>
                        </div>
                    )
                    }
                </div>  
            )
        }
        if(AMember){

                return( 
                    <>
                {
                    loadingpage ? 
                    ( 
                        <div className='flex flex-row items-center justify-center' >
                            <div className='text-center text-8xl'>
                                <img src="proxy.php?url=/loading.png" alt="loading..." />
                            </div>
                        </div>
                    ) 
                    : 
                    (
                    <div className='flex flex-col items-center justify-center  w-full'> 

                            <h3 className='text-center font-bold text-lg self-center'>
                               CREATE YOUR NFT ART AND SHOW THE WORLD
                            </h3>

                        <div className='flex flex-col md:flex-row items-center justify-center py-2 w-4/5 space-y-8 md:space-x-8'>
                            <div className=' w-full self-start top-0 py-2'>
                                <div className='flex flex-col space-y-4 items-center justify-start p-3 '>
                                    <div className=' self-start font-semibold' >
                                    Name: 
                                    </div>

                                    <input type='text' 
                                    placeholder='Name Of Meme'
                                    onChange={e => setNameOfFile(e.target.value)}
                                    className='p-1 border-2 border-slate-500 mx-4 rounded-lg w-3/4 self-start text-sm '
                                    />
                                </div>

                                <div className='flex flex-col space-y-4 items-center justify-start p-3 '>
                                    <div className=' self-start font-semibold'>
                                        Description: 
                                    </div>
                                    <input type='text' 
                                    placeholder='Describe your meme'
                                    onChange={e => setDescriptionOfFile(e.target.value)}
                                    className='p-1 border-2 border-slate-500 mx-4 rounded-lg w-3/4  self-start text-sm '
                                />
                                </div>
                            </div>
                            <div className='py-2 w-full flex flex-col items-center justify-center'>
                                {
                                    viewing?  
                                    <div className=' border-2 border-slate-400 '> 
                                        {
                                            IsImage?
                                            (
                                                <img src={viewing} alt='Your Image' className='w-32 m-4'/>
                                            )
                                            :
                                            (

                                                <video src={viewing} width="500px" height="500px" /> 

                                            )
                                        }

                                    </div>
                                    :
                                    <div className='w-full h-auto border-2 border-slate-400 flex items-center justify-center '> 
                                        <img src='/empty.png' alt='No image Here'  className='w-48 m-4'/>
                                    </div>
                                }
                                <div className='flex flex-row space-x-3 items-center justify-start p-3 w-full'>
                                    <div className='font-semibold'>
                                        IsDownloadable ?
                                    </div>
                                    <input
                                    type='checkbox'
                                     onChange={() => checkbox() }
                                     />

                                </div>
                                <div className='flex flex-row space-x-3 items-center justify-start p-3 w-full '>
                                    <div className='font-semibold' >
                                    File: 
                                    </div>
                                    <input type='file' 
                                    onChange={OnFileChange}
                                    className='p-1 border-2 border-slate-500 mx-4 rounded-lg w-full text-sm '
                                    />
                                </div>
                                {
                                    loading ? 
                                    (

                                        <button className=' flex items-center justify-center text-center w-full border border-slate-600 border-hidden px-2 py-2 font-semibold text-gray-50 text-lg mt-4 mx-4 bg-green-500  rounded-lg space-x-3 '>
                                        <img src="proxy.php?url=/loader.png" alt="loading..." className='w-8 h-8 ' />
                                            <span >
                                            {numberOfLoading}
                                            </span>
                                        </button>

                                    ) : 
                                    (
                                        <button onClick={() => Uploading(valueExtension)}  
                                        className='text-center w-full border border-slate-600 border-hidden px-2 py-2 font-semibold text-gray-50 text-sm mt-4 mx-4 bg-green-500 hover:text-green-500 hover:bg-white hover:border hover:border-slate-500 rounded-lg'
                                        >
                                        Create Meme

                                        </button>
                                    )
                                }

                            </div>
                        </div>
                    </div>
                    )
                } 
                </>
            )
        }
    }


    return (
        <div> 
            <Head>
                <title>Home</title>
                <meta name="description" content="By Oleanji" />
                <link rel="icon" href="proxy.php?url=/favicon.ico" />
            </Head>

            <div className='flex flex-col space-y-6'>
                <div className='flex flex-col items-end pt-3 px-2'>
                    <ConnectButton />
                </div>
                <div className=''> 
                    {renderButton()}
                </div>
            </div>
        </div>
      )
}



  async function MemInfo() {
    const info = await client.query(MemberQuery).toPromise()
    return (info.data.memebers)
  }
  export async function getServerSideProps() {
    const info = await MemInfo()
    return{
      props:{
        members:info
      }
    }
  }

Result:

You give a name and write description for your art before uploading your it.

TESTING

To run this project open your terminal with the directory pointing to this project and run

yarn dev

This should reun your dapp on this site "http://localhost:3000/"

Check it out and if you run into any errors then write a comment below.

We are finally done with all the tasks to do, I hope by now your drink or snack is almost finished ;) If so, go get another.

Congratulations!!!!!!!!!!!!!!!!!!!!🎉🎉🚀🚀💖🎊 you have finished building your Fullstack NFT AIR Dapp.

Now we are done with all

Create a nextJs application ✅
Install the necessary dependencies ✅
Write our smart contract ✅
Test the contract ✅
Deploy the Contract ✅
Create and connect your Project with your subgraph ✅
Install more dependencies ✅
Getting assets (Pictures) used in the project✅
Creating Pages, Components and writing Queries (i.e wallet connection, contract interaction, data retrieval from the graph ectera)
Testing and Running. ✅
Create and Upload an art.

Create and Upload Art.

Go to the create page and create your art 🎉🎉🚀🚀

DEV Community: Adebayo Olamilekan

Building And Deploying A Subgraph (Part 2)

Table of contents

Prerequisites

Introduction

Tips to know about subgraphs

Initialize Subgraph

Following the steps;

Tweak Code and Deploy

Deploy

Querying Subgraph

Conclusion

Build A Personal Crypto Savings Dapp (Part 1)

Table of contents

Introduction and Prerequisites

Contract Initialization

Variables, Mappings, and Structs

Constructor Function

Main Functions

The Getter Functions

Contract Wrap Up

Contract Testing

Contract Deployment and Verification

Conclusion

11 Ways to Improve Website Performance in Next.js Webpages

Performance Testing Prerequisites

1. Server-side Rendering (SSR)

2. Code Splitting and Lazy Loading

3. Optimize Images

4. Bundle Analysis

5. Minification and Compression

6. Reduce Third-Party Dependencies

7. Monitoring

8. Optimizing Third-Party Scripts

9. Alt Text for Images

10. Remove Unused Dependencies

11. Font Optimization using Next Fonts

Conclusion

Earn free tokens from Axia

Section 1: Upload an Article to Axia Ecosystem

Protecting Yourself from DeFi Rug Pulls: Tips and Tricks 🔒💸💡

What is a Rug Pull?

How to Avoid DeFi Rug Pulls

How to Detect DeFi Rug Pulls

Conclusion

Exploring Modifiers in Solidity

What are Modifiers?

How do Modifiers work?

Why are Modifiers useful?

Connect Wallet App using WAGMI and Tailwind CSS

Building a connect wallet for your decentralized application.

Let's get started!!! 🚀🚀

8 CSS Frameworks to create wonderful websites.

Some amazing JS components

Step 1

Step 2

Step 3

Step 4

Installing foundry toolchain on windows.

*Steps to get Foundry on your Windows PC *

6 Chrome extension🔧 ⚙that can boost your productivity as a web developer 👩‍💻 🚀🚀

How to Create a FullStack Dapp using Next JS, Tailwind CSS and The graph. (Part 2)

Prerequisites

Project BuidLing and Setup

Getting Assets for the Dapp

Creating pages, components and writing queries

TESTING

Create and Upload Art.

Steps to get Foundry on your Windows PC