Build a retail store decentralized app on Celo blockchain.

Introduction

In this tutorial, you will learn how to how to build a computer retail store using celo composer.

Prerequisites​

To start building, you’ll need a basic understanding of web development, Node (v16), yarn, and Git.

• Node (v16), NVM
• Yarn
• Git

Celo Composer

The easiest way to get started with Celo Composer is using @celo/celo-composer . This CLI tool enables you to quickly start building dApps on Celo for multiple frameworks including React, React Native (w/o Expo), Flutter, and Angular. You can create the dApp using the default Composer templates provided by Celo. In our case, we will work with react, specifically NextJS. The stack included in celo composer:

• NextJS - React framework
• Typescript
• React Celo
• TailwindCSS for styling
• Hardhat Smart contract development environment
• Solidity Smart Contract Language

Getting Started

1. Bootstrap the application using this Celo Composer command.

npx @celo/celo-composer create

2. Select React framework(NextJS)

3. Select react-celo as the web3 library

4. Select hardhat for the smart contract framework.

5. Select No for subgraph

6. Give a name to your project and you are done.

cd into your app then install the dependencies required in the project. In the root directory, run

yarn

//or

npm install

Creating our Smart Contract

First, we are going to build our smart contract and with this, you will be required to have a bit of knowledge of Solidity. To learn more about solidity contracts and the structures of a contract you can check out this link.

In the hardhat directory, navigate to contracts and create a new file then name it computerMarketplace.sol. Delete the other boilerplate files.

The completed code Should look like this.

// SPDX-License-Identifier: MIT

pragma solidity >=0.7.0 <0.9.0;

/*

Interface that allows contract to transfer and recieve ERC20 tokens

*/
interface IERC20Token {
    function transfer(address, uint256) external returns (bool);

    function approve(address, uint256) external returns (bool);

    function transferFrom(address, address, uint256) external returns (bool);

    function totalSupply() external view returns (uint256);

    function balanceOf(address) external view returns (uint256);

    function allowance(address, address) external view returns (uint256);

    event Transfer(address indexed from, address indexed to, uint256 value);
    event Approval(
        address indexed owner,
        address indexed spender,
        uint256 value
    );
}

/*
Beginning of contract
*/
contract ComputerMarketplace {
    uint internal productsLength = 0;
    // address internal cUsdTokenAddress = 0x874069Fa1Eb16D44d622F2e0Ca25eeA172369bC1;
    address internal celoTokenAddress =
        0xF194afDf50B03e69Bd7D057c1Aa9e10c9954E4C9;

    address owner = msg.sender;

    /*
    Product template struct
    */

    struct Product {
        address payable owner;
        string computer_title;
        string image_url;
        string computer_specs;
        string store_location;
        uint price;
        uint sold;
    }

    // Boolean for non reentrant function

    bool private locked = false;

    /*
       Modifier making functions non reentrant by changing locked boolean for duration of transaction so that on reentry it does not pass the "not locked requirement"
    */
    modifier nonReentrant() {
        require(!locked, "Reentrant call.");
        locked = true;
        _;
        locked = false;
    }
    modifier Onlyowner() {
        require(msg.sender == owner);
        _;
    }

    //Setting Price limit for listings
    uint256 constant MAX_PRICE = 100000000000000000000;

    //Mapping for prodict indices to product struct
    mapping(uint => Product) internal products;

    //mapping users addresses to the indices for the product listings
    mapping(address => uint) internal productsByUser;

    //Max products for a seller can list
    uint internal maxProductsPerUser = 10;

    //Events for product Listing and delisting
    event ProductCreated(
        address indexed owner,
        string computer_title,
        string image_url,
        string computer_specs,
        string store_location,
        uint price
    );
    event ProductDeleted(
        address indexed owner,
        string computer_title,
        string image_url
    );
    event ProductSold(
        address indexed owner,
        string computer_title,
        string image_url
    );

    /*
    Function to change max products per user

    ->Requirement: Only the owner can set this limit
    */
    function setMaxProductsPerUser(uint _maxProductsPerUser) public Onlyowner {
        require(
            _maxProductsPerUser > 0,
            "Maximum products per user must be greater than 0"
        );
        maxProductsPerUser = _maxProductsPerUser;
    }

    function getProductsLength() public view returns (uint) {
        return (productsLength);
    }

    /*
    Function to add product listing, Emits listing event "Product Created"

    ->Requirements
    *Non of the fields of data entered should be a zero
    *Price field data should also be below max price
    *Seller should no have exceeded platform limit
    */

    function writeProduct(
        string memory _computer_title,
        string memory _image_url,
        string memory _computer_specs,
        string memory _store_location,
        uint _price
    ) public {
        require(
            bytes(_computer_title).length > 0,
            "Computer title cannot be empty"
        );
        require(bytes(_image_url).length > 0, "Image URL cannot be empty");
        require(
            bytes(_computer_specs).length > 0,
            "Computer specs cannot be empty"
        );
        require(
            bytes(_store_location).length > 0,
            "Store location cannot be empty"
        );
        require(_price > 0 && _price <= MAX_PRICE, "Invalid product price");

        require(
            productsByUser[msg.sender] < maxProductsPerUser,
            "Maximum products per user reached"
        );

        uint _sold = 0;
        products[productsLength] = Product(
            payable(msg.sender),
            _computer_title,
            _image_url,
            _computer_specs,
            _store_location,
            _price,
            _sold
        );

        productsLength++;
        productsByUser[msg.sender]++;

        emit ProductCreated(
            msg.sender,
            _computer_title,
            _image_url,
            _computer_specs,
            _store_location,
            _price
        );
    }

    /*
     Function allowing buyers to access data on a given product
     */
    function readProduct(
        uint _index
    )
        public
        view
        returns (
            address payable,
            string memory,
            string memory,
            string memory,
            string memory,
            uint,
            uint
        )
    {
        return (
            products[_index].owner,
            products[_index].computer_title,
            products[_index].image_url,
            products[_index].computer_specs,
            products[_index].store_location,
            products[_index].price,
            products[_index].sold
        );
    }

    /*
       Function allowing buyers to buy a product on the platform
       Increments the product sold counter for the number of total units sold
    */


    function buyProduct(uint _index) public payable nonReentrant {
        require(msg.value == products[_index].price);

        uint allowance = IERC20Token(celoTokenAddress).allowance(
            msg.sender,
            address(this)
        );
        require(
            allowance >= products[_index].price,
            "Celo token allowance not enough"
        );

        require(
            IERC20Token(celoTokenAddress).transferFrom(
                msg.sender,
                products[_index].owner,
                products[_index].price
            ),
            "Celo token transfer failed"
        );


        products[_index].sold++;

        emit ProductSold(
            products[_index].owner,
            products[_index].computer_title,
            products[_index].image_url
        );
    }

    function getProductsByUser(
        address _user
    ) public view returns (Product[] memory) {
        uint count = 0;
        for (uint i = 0; i < productsLength; i++) {
            if (products[i].owner == _user) {
                count++;
            }
        }

        Product[] memory ownedProducts = new Product[](count);
        uint j = 0;
        for (uint i = 0; i < productsLength; i++) {
            if (products[i].owner == _user) {
                ownedProducts[j] = products[i];
                j++;
            }
        }

        return ownedProducts;
    }

    /*
      Function a seller uses to delete a product

      ->Requirements
      *index of product must be valid ie; within the number of products listed
      * Sender of the call must be the owner of the product
    */
    function deleteProduct(uint _index) public {
        require(_index < productsLength, "Product index out of range");

        // Make sure that the caller is the owner of the product
        require(
            products[_index].owner == msg.sender,
            "Only the owner can delete their products"
        );

        // Delete the product at the specified index
        for (uint i = _index; i < productsLength - 1; i++) {
            products[i] = products[i + 1];
        }
        delete products[productsLength - 1];
        productsLength--;

        // Update the product count for the owner
        productsByUser[msg.sender]--;
    }
}

Smart Contract breakdown

First, we declared our license and the solidity version.

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

Define an ERC20 Token Contract

The ERC-20 introduces a standard for Fungible Tokens, in other words, they have a property that makes each Token be exactly the same (in type and value) as another Token. For example, an ERC-20 Token acts just like the ETH, meaning that 1 Token is and will always be equal to all the other Tokens.

interface IERC20Token {
    function transfer(address, uint256) external returns (bool);

    function approve(address, uint256) external returns (bool);

    function transferFrom(address, address, uint256) external returns (bool);

    function totalSupply() external view returns (uint256);

    function balanceOf(address) external view returns (uint256);

    function allowance(address, address) external view returns (uint256);

    event Transfer(address indexed from, address indexed to, uint256 value);
    event Approval(
        address indexed owner,
        address indexed spender,
        uint256 value
    );
}

The code represents an interface which is used to interact with other contracts. They define a set of functions and events that a contract must implement to be considered compatible with other contracts that use the interface.

The interface defines six functions that ERC-20 tokens must have:

• transfer: allows the owner of the token to send a specified amount of tokens to another address.

• approve: allows the owner of the token to give permission to another address to transfer a specified amount of tokens on their behalf.

• transferFrom: allows an address that has been approved to transfer a specified amount of tokens on behalf of the owner of the token.

• totalSupply: returns the total number of tokens in circulation.

• balanceOf: returns the balance of tokens owned by a specific address.

• allowance: returns the amount of tokens that an address has been approved to spend on behalf of another address.

The interface also defines two events:

• Transfer: emitted when tokens are transferred from one address to another.

• Approval: emitted when an address is approved to spend a certain amount of tokens on behalf of another address.

And then we define our smart contract ComputerMarketplace.

contract ComputerMarketplace {
    // Contract code goes here
}

Contracts in Solidity are similar to classes in object-oriented languages.

Variables, Structs, Mappings, Modifiers and Events

We will now define some variables, structs and mappings that will be used by our contract.

    uint internal productsLength = 0;

    address internal celoTokenAddress =
        0xF194afDf50B03e69Bd7D057c1Aa9e10c9954E4C9;

    struct Product {
        address payable owner;
        string computer_title;
        string image_url;
        string computer_specs;
        string store_location;
        uint price;
        uint sold;
    }

    bool private locked = false;

    modifier nonReentrant() {
        require(!locked, "Reentrant call.");
        locked = true;
        _;
        locked = false;
    }

    uint256 constant MAX_PRICE = 100000000000000000000;

    mapping(uint => Product) internal products;

    mapping(address => uint) internal productsByUser;

    event ProductCreated(address indexed owner, string computer_title, string image_url, string computer_specs, string store_location, uint price);
    event ProductDeleted(address indexed owner, string computer_title, string image_url);

• uint internal productsLength: declares a variable productsLength with an initial value of 0. It is marked as internal, which means that it can only be accessed from within the contract or contracts that inherit from it.

• address internal celoTokenAddress: declares a variable for the celo network native currency which is used to pay for products in our marketplace.

• Product: a struct that defines properties of the marketplace. The fields are:

  • owner: address of the user who owns the product. It is declared as address payable to allow it to receive payments from the buyer.
  • computer_title: name of the product.
  • image_url: URL of the product's image.
  • computer_specs: specifications of the product.
  • store_location: physical location of the store selling the product.
  • price: price of the product in CELO tokens.
  • sold: number of units of the product that have been sold so far.

• MAX_PRICE: defines the maximum allowed values for prices. The requirement statement checks whether the product price is within the valid range.

• products: mapping that stores each product by its index

• productsByUser: mapping that keeps track of how many products each user has added.

• maxProductsPerUser: determines the maximum number of products that a user can write in the ComputerMarketplace contract. By default, it is set to 10 to prevents a user from spamming the platform.

• nonReentrant: modifier to the buyProduct function to lock the function while it is being executed to prevent a user to call it at the same time and revert it if so.

• ProductCreated: event is emitted when a new product is created in the smart contract. The event has five parameters: the address of the product owner, computer title, image URL, computer specifications, store location, and price of the product. The indexed keyword is used to allow for efficient filtering and searching of the event based on its parameters.

• ProductDeleted: event is emitted when an existing product is deleted from the smart contract. The event has three parameters: the address of the product owner, computer title, and the image URL. Both events allow external parties, such as a user interface or another smart contract, to receive notifications when certain actions occur in the smart contract.

Functions

   function setMaxProductsPerUser(uint _maxProductsPerUser) public {
        require(
            _maxProductsPerUser > 0,
            "Maximum products per user must be greater than 0"
        );
        maxProductsPerUser = _maxProductsPerUser;
    }

setMaxProductsPerUser function allows the contract owner to change the maximum number of products a user can create. It takes an unsigned integer _maxProductsPerUser as an argument and sets the maxProductsPerUser variable to the value of the argument. However, the _maxProductsPerUser argument must be greater than 0, and if it is not, the function will fail and return an error message.

 function writeProduct(
        string memory _computer_title,
        string memory _image_url,
        string memory _computer_specs,
        string memory _store_location,
        uint _price
    ) public {
        require(
            productsByUser[msg.sender] < maxProductsPerUser,
            "Maximum products per user reached"
        );

        uint _sold = 0;
        products[productsLength] = Product(
            payable(msg.sender),
            _computer_title,
            _image_url,
            _computer_specs,
            _store_location,
            _price,
            _sold
        );

        productsLength++;
        productsByUser[msg.sender]++;
    }

writeProduct function allows a user to add a new product to the marketplace. The function first checks whether the user has already added the maximum number of products allowed per user (which is set to 10 by default). If the user has not reached the maximum, a new Product struct is created with the provided parameters, and _sold is set to 0 since the product has not yet been sold.

The new product is then added to the products mapping at the productsLength index, where productsLength is the current number of products in the marketplace. The owner of the product is set to the address of the user who called the function, and productsLength is incremented. Finally, the productsByUser mapping for the user who called the function is incremented, to keep track of the number of products that user has added to the marketplace.

  function readProduct(
        uint _index
    )
        public
        view
        returns (
            address payable,
            string memory,
            string memory,
            string memory,
            string memory,
            uint,
            uint
        )
    {
        return (
            products[_index].owner,
            products[_index].computer_title,
            products[_index].image_url,
            products[_index].computer_specs,
            products[_index].store_location,
            products[_index].price,
            products[_index].sold
        );
    }

readProduct function that takes an index as an argument and returns a tuple of data about the product at that index in the products array.

   function buyProduct(uint _index) public payable nonReentrant {
        require(
            IERC20Token(celoTokenAddress).transferFrom(
                msg.sender,
                products[_index].owner,
                products[_index].price
            ),
            "Transfer failed."
        );
        products[_index].sold++;
    }

buyProduct function is used to buy a product from the marketplace. It takes an argument _index which is the index of the product in the products array that the buyer wants to purchase. The function requires that the buyer sends an amount of CELO tokens that is equal to the price of the product.

The function then uses the transferFrom function of the IERC20Token interface to transfer the specified amount of CELO tokens from the buyer's address to the owner's address. If the transfer is successful, the function updates the sold variable of the product by incrementing it by 1.

   function deleteProduct(uint _index) public {
        require(_index < productsLength, "Product index out of range");

        // Make sure that the caller is the owner of the product
        require(
            products[_index].owner == msg.sender,
            "Only the owner can delete their products"
        );

        // Delete the product at the specified index
        for (uint i = _index; i < productsLength - 1; i++) {
            products[i] = products[i + 1];
        }
        delete products[productsLength - 1];
        productsLength--;

        // Update the product count for the owner
        productsByUser[msg.sender]--;

         emit ProductDeleted(products[_index].owner, products[_index].computer_title, products[_index].image_url);

    }

deleteProduct function allows a product owner to delete one of their products from the marketplace. The function takes an input parameter _index which represents the index of the product in the products array that the owner wants to delete.

The function first checks that the input index is within the range of valid indexes for the products array. It then checks that the caller of the function is the owner of the product they want to delete.

If both conditions are satisfied, the function proceeds to delete the product at the specified index. To do this, it shifts all products after the specified index one position to the left, effectively overwriting the product at the index being deleted. Finally, it deletes the last element of the array (which is now a duplicate of the product at the second-to-last index) and decrements the productsLength variable to reflect the new length of the products array.

The function also decrements the productsByUser mapping for the product owner to ensure that their product count is up to date.

  function getProductsByUser(
        address _user
    ) public view returns (Product[] memory) {
        uint count = 0;
        for (uint i = 0; i < productsLength; i++) {
            if (products[i].owner == _user) {
                count++;
            }
        }

        Product[] memory ownedProducts = new Product[](count);
        uint j = 0;
        for (uint i = 0; i < productsLength; i++) {
            if (products[i].owner == _user) {
                ownedProducts[j] = products[i];
                j++;
            }
        }

        return ownedProducts;
    }

getProductsByUser takes an address _user as input and returns an array of products that belong to the given user. It loops through all the products and counts the number of products owned by the user. Then it creates a new array ownedProducts with the same length as the number of products owned by the user. Finally, it loops through all the products again and adds each product owned by the user to the ownedProducts array. It then returns the ownedProducts array.

Deploying the smart contract

We will be deploying our smart contract on alfajores testnet.

Inside hardhat folder, create a .env file to store the required private keys from your wallet to deploy the contract.

MNEMONIC=""
PRIVATE_KEY=""

To deploy our smart contract successfully, navigate to the scripts directory, delete the boilerplate files and create a new file named deploy.js.

const { ethers } = require("hardhat");

async function main() {
  // Load the marketplace contract artifacts
  const computerMarketplaceFactory = await ethers.getContractFactory(
    "ComputerMarketplace"
  );

  // Deploy the contract
  const computerMarketplaceContract = await computerMarketplaceFactory.deploy();

  // Wait for deployment to finish
  await computerMarketplaceContract.deployed();

  // Log the address of the new contract
  console.log(
    "Computer Marketplace deployed to:",
    computerMarketplaceContract.address
  );
}

main()
  .then(() => process.exit(0))
  .catch((error) => {
    console.error(error);
    process.exit(1);
  });

The code deploys the smart contract called ComputerMarketplace using the Hardhat framework. First, import the ethers object from the Hardhat library. Define main() function that loads the contract factory using the getContractFactory() method provided by the ethers object. After that, it deploys the contract using the deploy() method of the contract factory. It assigns the deployed contract instance to the computerMarketplaceContract constant.

Finally, the main() function is executed and if it runs successfully, the script exits with a code of 0. If an error is encountered, it logs the error to the console and exits with a code of 1

Open up your terminal. Ensure you are in the hardhat folder then run this script:

npx hardhat run scripts/deploy.js --network alfajores

Here's our deployed contract 0x3cA9A6BdF4754146347f2726042e5341327b6542.

Your solidity code will successfully be compiled and the contract address is generated after deployment. Save the address in a different file since we will be using the same address to interact with the contract in our frontend.

An artifacts folder is created which contains important files related to the contract, including the ABI files. ABI stands for Application Binary Interface, and it specifies the methods and properties that can be accessed externally by other contracts or applications. The ABI file is essentially a JSON representation of the contract's interface, including the function signatures and input/output parameters. Other applications or contracts can use the ABI file to interact with the deployed contract and execute its functions. Therefore, the ABI file serves as a crucial component in enabling interoperability between different smart contracts and decentralized applications with EVM compatible blockchains.

Building the UI and React Logic

Open up your terminal. Ensure you are in the root directory then run this script to start the development server:

yarn react-app:dev

Your development server is launched on http://localhost:3000/.

Build the Layout Component

Navigate into react-app and create a components directory then create a Layout component and paste the following code:

//components/Layout

import { FC, ReactNode } from "react";
import ComputerModal from "./ComputerModal";
import Header from "./Header";

interface Props {
  children: ReactNode;
}
const Layout: FC<Props> = ({ children }) => {
  return (
    <>
      <div
        data-theme="cupcake"
        className="bg-gypsum overflow-hidden flex flex-col min-h-screen"
      >
        <Header />
        <div className="py-16 max-w-7xl mx-auto space-y-8 sm:px-6 lg:px-8">
          <ComputerModal />
          {children}
        </div>
      </div>
    </>
  );
};

export default Layout;

The layout component creates a layout with a header and a modal component, and allows other components to be added as children to the layout.

A layout is UI that is shared between multiple pages. On navigation, layouts preserve state, remain interactive, and do not re-render.

Build the Header Component

In the Header component, we will display the logo, navigation links, connect wallet button and wallet balance.

//components/Header.tsx

...

//Wallet balance logic
 const {
   kit,
   address,
   disconnect,
   connect

 } = useCelo();


 const [summary, setSummary] = useState(defaultSummary);


 const fetchSummary = useCallback(async () => {
   if (!address) {
     setSummary(defaultSummary);
     return;
   }

   const [accounts, goldToken, stableTokens] = await Promise.all([
     kit.contracts.getAccounts(),
     kit.contracts.getGoldToken(),
     Promise.all(
       Object.values(StableToken).map(async (stable) => {
         let contract;
         try {
           contract = await kit.contracts.getStableToken(stable);
         } catch (e) {
           contract = null;
           console.error(e);
         }
         return {
           symbol: stable,
           contract: contract,
         };
       })
     ),
   ]);

    async function getBalances(
      stableTokens: {
        symbol: StableToken;
        contract: StableTokenWrapper | null;
      }[],
      address: string
    ) {
      return Promise.all(
        stableTokens.map(async (stable) => {
          let value, error;
          if (stable.contract) {
            value = await stable.contract.balanceOf(address);
          } else {
            error = "not deployed in network";
          }
          return {
            symbol: stable.symbol,
            value: value,
            error: error,
          };
        })
      );
    }


   const [accountSummary, celo, balances] = await Promise.all([
     accounts.getAccountSummary(address).catch((e) => {
       console.error(e);
       return defaultSummary;
     }),
     goldToken.balanceOf(address),
     getBalances(stableTokens, address),
   ]);

   setSummary({
     ...accountSummary,
     celo,
     balances,
   });
 }, [address, kit]);

  useEffect(() => {
    void fetchSummary();
  }, [fetchSummary]);


...

//return JSX

<Disclosure as="nav" className="">
      {({ open }) => (
        <>
          <div className="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
            <div className="relative flex h-16 justify-between">
              <div className="absolute inset-y-0 left-0 flex items-center sm:hidden">
                {/* Mobile menu button */}
                <Disclosure.Button className="inline-flex items-center justify-center rounded-md p-2 text-black focus:outline-none focus:ring-1 focus:ring-inset focus:rounded-none focus:ring-black">
                  <span className="sr-only">Open main menu</span>
                  {open ? (
                    <XMarkIcon className="block h-6 w-6" aria-hidden="true" />
                  ) : (
                    <Bars3Icon className="block h-6 w-6" aria-hidden="true" />
                  )}
                </Disclosure.Button>
              </div>
              <div className="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
                <div className="flex flex-shrink-0 items-center">
                  <Image
                    className="block h-8 w-auto lg:block"
                    src="/mafraq.svg"
                    width="24"
                    height="24"
                    alt="Logo"
                  />
                </div>
                <div className="hidden sm:ml-6 md:flex sm:space-x-8">
                  <Link
                    href="/"
                    className="inline-flex items-center border-b-2 border-black px-1 pt-1 text-sm font-medium text-gray-900"
                  >
                    Home
                  </Link>
                </div>
                <div className="hidden sm:ml-6 md:flex sm:space-x-8">
                  <Link
                    href="/mycomputers"
                    className="inline-flex items-center px-1 pt-1 text-sm font-medium text-gray-900"
                  >
                    My Computers
                  </Link>
                </div>
              </div>
              <div className="absolute inset-y-0 right-0 hidden sm:flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
                {address ? (
                  <div className="flex gap-4 items-center">
                    <div>
                      <CheckoutModal />
                    </div>

                    <p className="inline-flex content-center place-items-center rounded-full py-2 px-5 text-md font-medium border-2 border-[#250438] text-[#250438]">
                      CELO BAL: {Web3.utils.fromWei(summary.celo.toFixed())}
                    </p>

                    <button
                      type="button"
                      className="inline-flex content-center place-items-center rounded-full border-[#250438]  bg-[#250438] py-2 px-5 text-md font-medium text-snow hover:bg-[#8e24cc] "
                      onClick={disconnect}
                    >
                      {shortenAddress(address)}
                    </button>
                  </div>
                ) : (
                  <button
                    type="button"
                    className="inline-flex content-center place-items-center rounded-full border border-[#250438] bg-[#250438] py-2 px-5 text-md font-medium text-snow hover:bg-[#8e24cc]"
                    onClick={() =>
                      connect().catch((e) => console.log((e as Error).message))
                    }
                  >
                    Connect
                  </button>
                )}
              </div>
            </div>
          </div>

          <Disclosure.Panel className="flex sm:hidden">
            <div className="space-y-1 pt-2 pb-4">
              <Disclosure.Button
                as="a"
                href="#"
                className="block border-l-4 border-black py-2 pl-3 pr-4 text-base font-medium text-black"
              >
                Home
              </Disclosure.Button>
              {/* Add here your custom menu elements */}
              <div className=" ">
                {address ? (
                  <div className="flex flex-col items-start space-y-4 ml-4">
                    <div>
                      <CheckoutModal />
                    </div>

                    <p className=" text-white inline-flex content-center place-items-center rounded-full py-2 px-5 text-md font-medium bg-gray-500/30">
                      CELO BAL: {Web3.utils.fromWei(summary.celo.toFixed())}
                    </p>
                    <button
                      type="button"
                      className="inline-flex content-center place-items-center rounded-full border-[#250438]  bg-[#250438] py-2 px-5 text-md font-medium text-snow hover:bg-[#8e24cc]"
                      onClick={disconnect}
                    >
                      {shortenAddress(address)}
                    </button>
                  </div>
                ) : (
                  <button
                    type="button"
                    className="inline-flex content-center place-items-center rounded-full border border-[#250438] bg-[#250438] py-2 px-5 text-md font-medium text-snow hover:bg-[#8e24cc]"
                    onClick={() =>
                      connect().catch((e) => console.log((e as Error).message))
                    }
                  >
                    Connect
                  </button>
                )}
              </div>
            </div>
          </Disclosure.Panel>
        </>
      )}
    </Disclosure>

...

The useCelo hook is a convenient way to integrate Celo blockchain functionality into React applications. By using this hook, developers can easily interact with the blockchain network, retrieve data, and trigger transactions from within their React components.

When used in a function component, the useCelo hook returns an object with the following properties:

• kit: an instance of the ContractKit class from the Celo SDK that provides a simple interface to interact with the Celo network. This object includes methods for interacting with smart contracts and accounts, as well as other blockchain-related functionality.
• address: the Ethereum address of the currently selected account.

The fetchSummary function uses a useCallback hook that retrieves the user's account summary, including their CELO balance and stable token balances. The useEffect hook is used to trigger the fetchSummary function when the component mounts or when its dependencies change.

App Page

The _app.tsx is the Next.js application's entry point, which is the file that is responsible for rendering the app on the client side. It imports several modules and components and exports a single functional component called App.

//pages/Layout

import "../styles/globals.css";
import type { AppProps } from "next/app";
import { CeloProvider, Alfajores } from "@celo/react-celo";
import "@celo/react-celo/lib/styles.css";

import Layout from "../components/Layout";
import { ShoppingCartProvider } from "@/context/ShoppingCartContext";
import MarketPlaceProvider from "@/context/MarketPlaceContext";

function App({ Component, pageProps }: AppProps) {
  return (
    <CeloProvider
      dapp={{
        name: "celo-composer dapp",
        description: "My awesome celo-composer description",
        url: "https://example.com",
        icon: "https://example.com/favicon.ico",
      }}
      defaultNetwork={Alfajores.name}
      connectModal={{
        providersOptions: { searchable: true },
      }}
    >
      <ShoppingCartProvider>
        <MarketPlaceProvider>
          <Layout>
            <Component {...pageProps} />
          </Layout>
        </MarketPlaceProvider>
      </ShoppingCartProvider>
    </CeloProvider>
  );
}

export default App;

The application uses react context to provide global state or configuration options to a component or a set of components that need the same data. This helps to avoid prop drilling, which is when you have to pass data through multiple levels of components that do not use the data themselves but simply pass it down to lower-level components.

The CeloProvider provides the necessary context for interacting with the Celo blockchain, along with some configuration options such as the name of the DApp, default network, and connect modal options.

ShoppingCartProvider and MarketPlaceProvider are two context providers that are used to provide data to child components. They provide a way to share data about the user's shopping cart and the state of the marketplace, respectively.

MarketPlace Context

In the react-app directory, Create an new directory and name it context then create a new file MarketPlaceContext.tsx.

Create another file and name it constants.ts. This file will be used to import and export our marketplace and erc20 token ABI JSON.

In the react-app directory, create a new folder and name it abi. From our artifacts folder in hardhat directory, copy the ComputerMarketplace.json and IERC20Token.json files and paste them in our abi folder.

//context/constants.ts

import computerAbi from "../abi/ComputerMarketplace.json";
import erc20Token from "../abi/IERC20Token.json";

export const ComputerMarketplaceContract =
  "0x3cA9A6BdF4754146347f2726042e5341327b6542";
export const ComputerMarketplaceAbi = computerAbi.abi;
export const erc20Abi = erc20Token.abi;

• ComputerMarketplaceContract: This constant is assigned the value 0x3cA9A6BdF4754146347f2726042e5341327b6542. This represents the celo address of the Computer Marketplace contract.

import { Computer } from "@/typings";
import { useCelo } from "@celo/react-celo";
import { ethers } from "ethers";
import { useRouter } from "next/navigation";
import {
  createContext,
  MouseEvent,
  useCallback,
  useContext,
  useEffect,
  useState,
} from "react";
import {
  ComputerMarketplaceAbi,
  ComputerMarketplaceContract,
  erc20Abi,
} from "./constants";
import { useShoppingCart } from "./ShoppingCartContext";

type MarketPlaceProviderProps = {
  children: React.ReactNode;
};

type MarketPlaceContextType = {
  getProducts: () => Promise<Computer[]>;
  computers: Computer[];
  myProducts: Computer[];
  handleClick: (e: MouseEvent<HTMLButtonElement>) => void;
  deleteProduct: (index: number) => void;
};

export const MarketPlaceContext = createContext({} as MarketPlaceContextType);

export function useMarketPlace() {
  return useContext(MarketPlaceContext);
}

// var window: Window & typeof globalThis & CustomWindow;
const celoContractAddress: string =
  "0xF194afDf50B03e69Bd7D057c1Aa9e10c9954E4C9";

export default function MarketPlaceProvider({
  children,
}: MarketPlaceProviderProps) {
  const { kit, address } = useCelo();
  const [computers, setComputers] = useState<Computer[]>([]);
  const [myProducts, setMyProducts] = useState<Computer[]>([]);
  const { cartQuantity, cartItems, removeFromCart } = useShoppingCart();

  const router = useRouter();

  const getProducts = useCallback(
    async function (): Promise<Computer[]> {
      const contract = new kit.connection.web3.eth.Contract(
        ComputerMarketplaceAbi as any,
        ComputerMarketplaceContract
      );

      const _productsLength = await contract.methods.getProductsLength().call();
      const _products = [];

      for (let i = 0; i < _productsLength; i++) {
        let _product = new Promise(async (resolve, reject) => {
          let p = await contract.methods.readProduct(i).call();
          resolve({
            index: i,
            owner: p[0],
            computer_title: p[1],
            image_url: p[2],
            computer_specs: p[3],
            store_location: p[4],
            price: p[5],
            sold: p[6],
          });
        });
        _products.push(_product);
      }
      const products = await Promise.all(_products);
      return products as Computer[];
    },
    [kit]
  );

  useEffect(() => {
    const fetchProducts = async () => {
      const data = await getProducts();
      setComputers(data);
      console.log(data);
    };
    fetchProducts();
  }, [getProducts]);

  //get my products
  useEffect(() => {
    const fetchMyProducts = async function () {
      try {
        const contract = new kit.connection.web3.eth.Contract(
          ComputerMarketplaceAbi as any,
          ComputerMarketplaceContract
        );
        const products = await contract.methods
          .getProductsByUser(address)
          .call();
        return products;
      } catch (err) {
        console.error(err);
      }
    };

    fetchMyProducts().then((data) => {
      setMyProducts(data);
      console.log(data);
    });
  }, [kit, address]);

  // define functions
  async function approvePrice(price: string) {
    if (!address) {
      alert("Please install the Celo Wallet to use this feature.");
      return;
    }
    const celoContract = new kit.connection.web3.eth.Contract(
      erc20Abi as any,
      celoContractAddress
    );

    const txObject = celoContract.methods
      .approve(ComputerMarketplaceContract, price)
      .send({ from: address });
    return txObject;
  }

  // define event handler
  async function handleClick(e: MouseEvent<HTMLButtonElement>) {
    const target = e.target as HTMLDivElement;
    if (!target.classList.contains("buyBtn")) return;

    const index: number = parseInt(target.getAttribute("data-index")!);
    const product: Computer = computers[index];

    const cartItemsPrice = cartItems.reduce((total, cartItem) => {
      const item = computers.find((i: any) => i.index === cartItem.id);
      const itemPrice = item ? ethers.utils.formatEther(item.price) : "0";
      return total + parseFloat(itemPrice) * cartItem.quantity;
    }, 0);

    //console.log("cartItemsPrice", cartItemsPrice);

    const price = ethers.utils.parseEther(cartItemsPrice.toString());
    const itemPrice = String(price);

    try {
      await approvePrice(itemPrice);
    } catch (error) {
      alert(`⚠️ ${error.message}`);
      return;
    }

    // prompt user to confirm purchase
    const confirmMsg: string = `Are you sure you want to buy "${product.computer_title}" for ${itemPrice} CELO?`;
    if (!confirm(confirmMsg)) return;

    // process purchase
    alert(`⌛ Processing purchase for "${product.computer_title}"...`);
    try {
      const contract = new kit.connection.web3.eth.Contract(
        ComputerMarketplaceAbi as any,
        ComputerMarketplaceContract
      );

      const tx = await contract.methods
        .buyProduct(product.index)
        .send({ from: address, value: itemPrice });

      alert(`🎉 You successfully bought "${product.computer_title}".`);

      removeFromCart(product.index);
      getProducts();
    } catch (error) {
      alert(`⚠️ ${error.message}`);
    }
  }

  async function deleteProduct(index: number) {
    try {
      const contract = new kit.connection.web3.eth.Contract(
        ComputerMarketplaceAbi as any,
        ComputerMarketplaceContract
      );
      const tx = await contract.methods
        .deleteProduct(index)
        .send({ from: address });
      alert("Product deleted successfully");

      // Refresh the list of my products
      const products = await contract.methods.getProductsByUser(address);
      setMyProducts(products);
      router.refresh();
    } catch (err) {
      console.error(err);
      alert("Failed to delete product");
    }
  }

  return (
    <MarketPlaceContext.Provider
      value={{
        getProducts,
        handleClick,
        computers,
        myProducts,
        deleteProduct,
      }}
    >
      {children}
    </MarketPlaceContext.Provider>
  );
}