How to Build a Web3 Game eShop with React, Solidity, and CometChat

Web3 development is officially the new way to build web applications, and if you are not there yet, you need to catch up. The way to master building web3 apps is by understanding smart contracts, a frontend framework such as React, and how to link the smart contract with the front end. In this tutorial, you will learn how to build a decentralized web3 eShop for selling game items using the native ETH currency. This app comprises the smart contract layer, a front end where all the interactions with the smart contract take place, and an anonymous chat feature using the CometChat SDK. If you are ready to crush this build, then let’s get started. : see the on the Goerli test network and here. What you will be building demo git repo Prerequisite You will need the following tools installed to build along with me: NodeJs (Super important) EthersJs Hardhat React Tailwind CSS CometChat SDK Metamask Yarn Installing Dependencies Clone the starter project from to your computer. Also, make sure to replace it with the name of your preferred project. See the command below. this Git repo git clone https://github.com/Daltonic/tailwind_ethers_starter_kit cd Now, open the project in VS Code or on your preferred code editor. Locate the file and update it with the codes below. package.json { "name": "GameShop", "private": true, "version": "0.0.0", "scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", "eject": "react-scripts eject", "deploy": "yarn hardhat run scripts/deploy.js --network localhost" }, "dependencies": { "@cometchat-pro/chat": "^3.0.10", "@nomiclabs/hardhat-ethers": "^2.1.0", "@nomiclabs/hardhat-waffle": "^2.0.3", "ethereum-waffle": "^3.4.4", "ethers": "^5.6.9", "hardhat": "^2.10.1", "ipfs-http-client": "^57.0.3", "moment": "^2.29.4", "react": "^17.0.2", "react-dom": "^17.0.2", "react-hooks-global-state": "^1.0.2", "react-icons": "^4.3.1", "react-identicons": "^1.2.5", "react-moment": "^1.1.2", "react-router-dom": "6", "react-scripts": "5.0.0", "react-toastify": "^9.0.8", "web-vitals": "^2.1.4" }, "devDependencies": { "@openzeppelin/contracts": "^4.5.0", "@tailwindcss/forms": "0.4.0", "assert": "^2.0.0", "autoprefixer": "10.4.2", "babel-polyfill": "^6.26.0", "babel-preset-env": "^1.7.0", "babel-preset-es2015": "^6.24.1", "babel-preset-stage-2": "^6.24.1", "babel-preset-stage-3": "^6.24.1", "babel-register": "^6.26.0", "buffer": "^6.0.3", "chai": "^4.3.6", "chai-as-promised": "^7.1.1", "crypto-browserify": "^3.12.0", "dotenv": "^16.0.0", "https-browserify": "^1.0.0", "mnemonics": "^1.1.3", "os-browserify": "^0.3.0", "postcss": "8.4.5", "process": "^0.11.10", "react-app-rewired": "^2.1.11", "stream-browserify": "^3.0.0", "stream-http": "^3.2.0", "tailwindcss": "3.0.18", "url": "^0.11.0" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } } With the above codes replaced and saved in your package.json, run the command below to install the entire packages listed above. yarn install Configuring CometChat SDK Follow the steps below to configure the ; at the end, you must save these keys as an environment variable. CometChat SDK Head to Dashboard and create an account. STEP 1: CometChat Log in to the dashboard, only after registering. STEP 2: CometChat From the dashboard, add a new app called STEP 3: GameShop. Select the app you just created from the list. STEP 4: From the Quick Start copy the , , and , to your file. See the image and code snippet. STEP 5: APP_ID REGION AUTH_KEY .env Replace the placeholder keys with their appropriate values. REACT_COMET_CHAT REACT_APP_COMET_CHAT_REGION=** REACT_APP_COMET_CHAT_APP_ID=************** REACT_APP_COMET_CHAT_AUTH_KEY=****************************** The file should be created at the root of your project. **.env** Configuring Alchemy App STEP 1: Head to , and create an account. Alchemy From the dashboard create a new project. STEP 2: Copy the test network WebSocket or HTTPS endpoint URL to your file. STEP 3: Goerli .env After that, enter the private key of your preferred Metamask account to the in your environment variables and save. If you followed the instructions correctly, your environment variables should now look like this. DEPLOYER_KEY ENDPOINT_URL=*************************** DEPLOYER_KEY=**********************

REACT_APP_COMET_CHAT_REGION=** REACT_APP_COMET_CHAT_APP_ID=************** REACT_APP_COMET_CHAT_AUTH_KEY=****************************** See the section below if you don't know how to access your private key. Extracting Your Metamask Private Key Make sure is selected as the test network in your Metamask browser extension, and the older test nets have now been depreciated. STEP 1: Goerli Rinkeby Next, on the preferred account, click the vertical dotted line and choose account details. Please see the image below. Enter your password on the field provided and click the confirm button, this will enable you to access your account private key. STEP 2: Click on " to see your private key. Make sure you never expose your keys on a public page such as . That is why we are appending it as an environment variable. STEP 3: "export private key Github Copy your private key to your file. See the image and code snippet below: STEP 4: .env ENDPOINT_URL=*************************** DEPLOYER_KEY=**********************

REACT_APP_COMET_CHAT_REGION=** REACT_APP_COMET_CHAT_APP_ID=************** REACT_APP_COMET_CHAT_AUTH_KEY=****************************** Configuring the Hardhat script At the root of this project, open the file and replace its content with the following settings. hardhat.config.js require("@nomiclabs/hardhat-waffle"); require('dotenv').config()

module.exports = { defaultNetwork: "localhost", networks: { hardhat: { }, localhost: { url: "http://127.0.0.1:8545" }, goerli: { url: process.env.ENDPOINT_URL, accounts: [process.env.DEPLOYER_KEY] } }, solidity: { version: '0.8.11', settings: { optimizer: { enabled: true, runs: 200 } } }, paths: { sources: "./src/contracts", artifacts: "./src/abis" }, mocha: { timeout: 40000 } } The above script instructs hardhat on these three important rules. : This block contains the configurations for your choice of networks. On deployment, hardhat will require you to specify a network for shipping your smart contracts. Networks : This describes the version of the compiler to be used by hardhat for compiling your smart contract code into and . Solidity bytecodes abi : This simply informs hardhat of the location of your smart contracts and also a location to dump the output of the compiler which is the abi. Paths The Blockchain Service File Now that we have the above configurations set up, let’s create the smart contract for this build. On your project, head to the directory and create a new folder called . **src** **contracts** Inside this contracts folder, create a new file called , this file will contain all the logics that regulates the activities of the smart contract. Copy, paste, and save the codes below inside the file. See the full code below. **Shop.sol** **Shop.sol** //SPDX-License-Identifier: MIT pragma solidity >=0.7.0 <0.9.0;

contract Shop { enum OrderEnum { PLACED, DELEVIRED, CANCELED, REFUNDED }

struct ProductStruct { uint id; string sku; address seller; string name; string imageURL; string description; uint price; uint timestamp; bool deleted; uint stock; }

struct OrderStruct { uint pid; uint id; string sku; string name; string imageURL; address buyer; address seller; uint qty; uint total; uint timestamp; string destination; string phone; OrderEnum status; }

struct CartStruct { uint id; uint qty; }

struct BuyerStruct { address buyer; uint price; uint qty; uint timestamp; }

struct ShopStats { uint products; uint orders; uint sellers; uint sales; uint paid; uint balance; }

address public owner; ShopStats public stats; uint public fee; ProductStruct[] products; mapping(address => ProductStruct[]) productsOf; mapping(uint => OrderStruct[]) ordersOf; mapping(address => ShopStats) public statsOf; mapping(uint => BuyerStruct[]) buyersOf; mapping(uint => bool) public productExist; mapping(uint => mapping(uint => bool)) public orderExist;

event Sale( uint256 id, address indexed buyer, address indexed seller, uint256 price, uint256 timestamp );

constructor(uint _fee) { owner = msg.sender; fee = _fee; }

function createProduct( string memory sku, string memory name, string memory description, string memory imageURL, uint price, uint stock ) public payable returns (bool) { require(msg.value >= fee, "Insufficient fund"); require(bytes(sku).length > 0, "sku cannot be empty"); require(bytes(name).length > 0, "name cannot be empty"); require(bytes(description).length > 0, "description cannot be empty"); require(bytes(imageURL).length > 0, "image URL cannot be empty"); require(price > 0, "price cannot be zero"); require(stock > 0, "stock cannot be zero");

productExist[stats.products] = true; statsOf[msg.sender].products++; stats.sellers++; ProductStruct memory product;

product.id = stats.products++; product.sku = sku; product.seller = msg.sender; product.name = name; product.imageURL = imageURL; product.description = description; product.price = price; product.stock = stock; product.timestamp = block.timestamp;

products.push(product); return true; }

function updateProduct( uint id, string memory name, string memory description, string memory imageURL, uint price, uint stock ) public returns (bool) { require(products[id].seller == msg.sender, "Unauthorize Personel"); require(bytes(name).length > 0, "name cannot be empty"); require(bytes(description).length > 0, "description cannot be empty"); require(price > 0, "price cannot be zero"); require(stock > 0, "stock cannot be zero");

ProductStruct memory product; product.id = id; product.seller = msg.sender; product.name = name; product.imageURL = imageURL; product.description = description; product.price = price; product.stock = stock;

products[id] = product; updateOrderDetails(product);

return true; }

function updateOrderDetails(ProductStruct memory product) internal { for(uint i=0; i < ordersOf[product.id].length; i++) { OrderStruct memory order = ordersOf[product.id][i]; order.name = product.name; order.imageURL = product.imageURL; ordersOf[product.id][i] = order; } }

function deleteProduct(uint id) public returns (bool) { require(products[id].seller == msg.sender, "Unauthorize Personel"); products[id].deleted = true; return true; }

function getProduct(uint id) public view returns (ProductStruct memory) { require(productExist[id], "Product not found"); return products[id]; } function getProducts() public view returns (ProductStruct[] memory) { return products; }

function createOrder( uint[] memory ids, uint[] memory qtys, string memory destination, string memory phone ) public payable returns (bool) { require(msg.value >= totalCost(ids, qtys), "Insufficient amount"); require(bytes(destination).length > 0, "destination cannot be empty"); require(bytes(phone).length > 0, "phone cannot be empty"); stats.balance += totalCost(ids, qtys);

for(uint i = 0; i = qtys[i]) { products[ids[i]].stock -= qtys[i]; statsOf[msg.sender].orders++; stats.orders++;

OrderStruct memory order;

order.pid = products[ids[i]].id; order.id = ordersOf[order.pid].length; // order Id resolved order.sku = products[ids[i]].sku; order.buyer = msg.sender; order.seller = products[ids[i]].seller; order.name = products[ids[i]].name; order.imageURL = products[ids[i]].imageURL; order.qty = qtys[i]; order.total = qtys[i] * products[ids[i]].price; order.timestamp = block.timestamp; order.destination = destination; order.phone = phone;

ordersOf[order.pid].push(order); orderExist[order.pid][order.id] = true;

emit Sale( order.id, order.buyer, order.seller, order.total, block.timestamp ); } }

return true; }

function totalCost(uint[] memory ids, uint[] memory qtys) internal view returns (uint) { uint total; for(uint i = 0; i < ids.length; i++) { total += products[i].price * qtys[i]; } return total; }

function deliverOrder(uint pid, uint id) public returns (bool) { require(orderExist[pid][id], "Order not found"); OrderStruct memory order = ordersOf[pid][id]; require(order.seller == msg.sender, "Unauthorized Entity"); require(order.status != OrderEnum.DELEVIRED, "Order already delievered"); order.status = OrderEnum.DELEVIRED; ordersOf[pid][id] = order;

stats.balance -= order.total; statsOf[order.seller].paid += order.total; statsOf[order.seller].sales++; stats.sales++;

payTo(order.seller, order.total);

buyersOf[id].push( BuyerStruct( order.buyer, order.total, order.qty, block.timestamp ) ); return true; }

function cancelOrder(uint pid, uint id) public returns (bool) { require(orderExist[pid][id], "Order not found"); OrderStruct memory order = ordersOf[pid][id]; require(order.buyer == msg.sender, "Unauthorized Entity"); require(order.status != OrderEnum.CANCELED, "Order already canceled");

order.status = OrderEnum.CANCELED; products[order.pid].stock += order.qty; ordersOf[pid][id] = order;

payTo(order.buyer, order.total); return true; }

function getOrders() public view returns (OrderStruct[] memory props) { props = new OrderStruct[](stats.orders);

for(uint i=0; i < stats.orders; i++) { for(uint j=0; j < ordersOf[i].length; j++) { props[i] = ordersOf[i][j]; } } }

function getOrder(uint pid, uint id) public view returns (OrderStruct memory) { require(orderExist[pid][id], "Order not found"); return ordersOf[pid][id]; }

function getBuyers(uint pid) public view returns (BuyerStruct[] memory buyers) { require(productExist[pid], "Product does not exist"); return buyersOf[pid]; }

function payTo(address to, uint256 amount) internal { (bool success1, ) = payable(to).call{value: amount}(""); require(success1); } } Now, let’s explain what is going on in the smart contract above. We have the following: : This enumerable describes the various status an order goes through in its lifecycle. For example, an order could be placed, delivered, canceled, etc. OrderEnum : This structure model the details of each product to be stored in this smart contract. For example, the SKU, stock, price, and so on. ProductStruct : This structure embodies the details of each order placed in the shop such as the order id, the buyer, the quantity of items, and more. OrderStruct : This structure contains the data a cart collects for each item to be submitted as an order in this shop. CartStruct : This structure speaks of the kind of data to be collected whenever a buyer purchases a product from our shop. BuyerStruct : This is a structure that details the statistics of our shop. Information such as the number of sellers, products, orders, and sales are contained by this struct. ShopStats For the state variables, we have the following. : This state variable contains the account of the deployer of this smart contract. Owner : This holds information about the current statistics of our shop. Stats : This contains how much to be charged per creation of a product on this platform. Fee : This holds a collection of products added to this platform. Products : This captures the products added by a specific seller to our shop. ProductsOf : This contains a list of orders purchased by a specific buyer in the shop. OrdersOf : This holds the statistics of each buyer or seller on the platform. StatsOf : This accommodates information of the buyers of a specific product. BuyersOf : This checks if a product is found in our shop. ProductExist : This checks if an order is found in our shop. OrderExist For the functions, we have the following. : This adds a new function to the shop using supplied product information such as the name, description, and price. CreateProduct : This modifies existing product information with new data supplied via the function’s parameters. UpdateProduct : This function sends a product’s update across every order it has received already. UpdateOrderDetails : This toggles an existing product to a deleted state and becomes unavailable for purchase. DeleteProduct : This returns the entire list of products in our shop. GetProduct : This returns a specific product from our shop by targeting its Id. GetProducts : This function cancels an order, it is accessible only by the buyer of such product. CreateOrder : This calculates the overall cost for each product ordered. TotalCost : This function delivers an order, it is accessible only by the seller of such product. DeliverOrder : This function marks an order as canceled and is accessible only to be the buyer of such product. CancelOrder : This returns the entire collection of orders placed on this shop. GetOrders : This returns a specific order by its Id. GetOrder : Returns a collection of buyers of a particular product. GetBuyers : Sends a specific amount to a specific address when invoked. PayTo If you are new to Solidity, I have a full . So do check it out, like it, and subscribe! FREE course on YouTube called, Mastering Solidity Basics https://www.youtube.com/watch?v=11DsTLhI_i4?embedable=true Configuring the Deployment Script Navigate to the scripts folder and then to your file and paste the code below into it. If you can't find a script folder, make one, create a file, and paste the following code into it. deploy.js deploy.js const { ethers } = require('hardhat') const fs = require('fs')

async function main() { const fee = ethers.utils.parseEther('0.002') const Contract = await ethers.getContractFactory('Shop') const contract = await Contract.deploy(fee)

await contract.deployed()

const address = JSON.stringify({ address: contract.address }, null, 4) fs.writeFile('./src/abis/contractAddress.json', address, 'utf8', (err) => { if (err) { console.error(err) return } console.log('Deployed contract address', contract.address) }) }

main().catch((error) => { console.error(error) process.exitCode = 1 }) The above script when executed as a Hardhat command will ship the smart contract into any chosen network. Shop.sol With the above instructions diligently followed, open up a terminal pointing to this project and run the below commands separately on two terminals. VS Code enables you to do this straight from your editor. See the command below. yarn hardhat node # Terminal #1 yarn hardhat run scripts/deploy.js --network localhost # Terminal #2 If the above commands were successfully executed, you will see these sorts of activities on your terminal. See the image below. Developing the Frontend Now that we have our smart contract on a network and all our artifacts (bytecodes and abi) generated, let’s start creating the front end with React step-by-step. Create a new folder called components in the src directory, which will house all of the React components. Components Header component This component is in charge of displaying information about the currently connected user, the number of items in his cart, and a clickable Identicon that shows more seller options. See the codes responsible for its behavior below. import Identicon from 'react-identicons' import { FaEthereum } from 'react-icons/fa' import { Link, useNavigate } from 'react-router-dom' import { AiOutlineShoppingCart } from 'react-icons/ai' import { setGlobalState, truncate, useGlobalState } from '../store' import { connectWallet } from '../Blockchain.Service'

const Header = () => { const navigate = useNavigate() const [cart] = useGlobalState('cart') const [connectedAccount] = useGlobalState('connectedAccount')

return ( GameShop

navigate('/cart')} className="rounded-full text-gray-500 bg-gray-200 font-semibold text-sm flex align-center cursor-pointer active:bg-gray-300 transition duration-300 ease w-max py-1 px-2" > {cart.length}

setGlobalState('menu', 'scale-100')} className="bg-transparent shadow-sm shadow-gray-400 rounded-full" > {connectedAccount ? ( {truncate(connectedAccount, 4, 4, 11)} ) : ( Connect )} ) }

export default Header Banner Component This component captures a beautiful display of game items. This was designed to give our app a good feel of being a GameShop. import bannerImg from '../assets/banner.png'

const Banner = () => { return ( Win a Game Win some money worth upto a game console while surfing our game collection, click on the spin button.

Spin Now ) }

export default Banner ShopStats Component This component records a statistic about the shop's current state. This section displays the number of products, sellers, orders, and so on. Look at the code that is responsible for this. import React from 'react'

const ShopStats = ({ stats }) => { return ( {stats.products} Products {stats.sellers} Sellers {stats.sales} Sales ) }

export default ShopStats The Cards Component This component renders a collection of game products on cards. Each card contains game information such as the name, price, stock, and image URL. See the code snippet below. import Identicon from 'react-identicons' import { FaEthereum } from 'react-icons/fa' import { Link } from 'react-router-dom' import { truncate } from '../store'

const Cards = ({ products, title, seller }) => { return ( <> {seller ? ( ) : null} {title}

{products.map((product, i) => product.deleted ? null : , )}

Load More ) }

const Card = ({ product }) => ( {truncate(product.name, 20, 0, 23)}

{product.price}

{product.stock} in stock )

export default Cards Details Component This component displays the details of a specific game item such as the full name, image, description, seller details, and so on. Also, this component contains essential buttons for editing, adding items to the cart, deleting, and chatting with the seller button. See the codes below. import Identicon from 'react-identicons' import { FaEthereum } from 'react-icons/fa' import { useNavigate, Link } from 'react-router-dom' import { setGlobalState, truncate, useGlobalState } from '../store' import { addToCart } from '../Cart.Service' import { useEffect, useState } from 'react' import { getUser } from '../Chat.Service' import { toast } from 'react-toastify'

const Details = ({ product }) => { const navigate = useNavigate() const [connectedAccount] = useGlobalState('connectedAccount') const [currentUser] = useGlobalState('currentUser') const [seller, setSeller] = useState(false)

const handleChat = () => { if (currentUser) { if (seller) { navigate('/chat/' + product.seller) } else { toast('Seller not registered for chat yet!') } } else { setGlobalState('chatModal', 'scale-100') } }

const handleEdit = () => { setGlobalState('product', product) setGlobalState('updateModal', 'scale-100') }

const handleDelete = () => { setGlobalState('product', product) setGlobalState('deleteModal', 'scale-100') }

useEffect(async () => { await getUser(product.seller).then((user) => { if (user.name) setSeller(user.uid == product.seller) }) }, [])

return ( {product.name} {product.description}

{truncate(product.seller, 4, 4, 11)}

{product.stock} in stock

{product.deleted ? null : connectedAccount == product.seller ? ( <button className="px-6 py-2.5 bg-blue-800 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-900 hover:shadow-lg focus:bg-blue-900 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-900 active:shadow-lg transition duration-150 ease-in-out flex justify-start items-center space-x-2" onClick={handleEdit} > Edit Product

<button className="px-6 py-2.5 bg-red-800 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-red-900 hover:shadow-lg focus:bg-red-900 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-red-900 active:shadow-lg transition duration-150 ease-in-out flex justify-start items-center space-x-2" onClick={handleDelete} > Delete Product ) : ( <button className="px-6 py-2.5 bg-blue-800 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-900 hover:shadow-lg focus:bg-blue-900 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-900 active:shadow-lg transition duration-150 ease-in-out flex justify-start items-center space-x-2" onClick={() => addToCart(product)} > Add to Cart

{product.price} )} <button className="px-6 py-2.5 bg-transparent border-blue-800 text-blue-800 font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-900 hover:shadow-lg border focus:border-blue-900 focus:shadow-lg focus:outline-none focus:ring-0 active:border-blue-900 active:shadow-lg transition duration-150 ease-in-out hover:text-white" onClick={handleChat} > Chat with Seller ) }

export default Details Buyers Component This component shows a list of buyers who bought a specific game item. See the codes listed below. import { FaEthereum } from 'react-icons/fa' import Identicon from 'react-identicons' import { truncate } from '../store'

const Buyers = ({ buyers }) => { return ( {buyers.length Buyer Cost Qty Date {buyers.map((buyer, i) => ( {truncate(buyer.buyer, 4, 4, 11)} {buyer.price} EHT

{buyer.qty} {buyer.timestamp} ))} )} ) }

export default Buyers Orders Component This component renders a collection of orders for both the buyer and the seller, giving the buyer the ability to cancel an order so long as it isn’t delivered, and the seller, the ability to deliver a game product. See the codes below. import { Link } from 'react-router-dom' import { FaEthereum } from 'react-icons/fa' import { cancelOrder, delieverOrder } from '../Blockchain.Service' import { useGlobalState } from '../store' import { toast } from 'react-toastify'

const DELEVIRED = 1 const CANCELED = 2

const onDeliver = async (pid, id) => { await toast.promise( new Promise(async (resolve, reject) => { await delieverOrder(pid, id) .then(() => resolve()) .catch(() => reject()) }), { pending: 'Approve transaction...', success: 'Order delivered, will reflect in your Order history within 30sec 🙌', error: 'Encountered error placing order 🤯', }, ) }

const onCancel = async (pid, id) => { await toast.promise( new Promise(async (resolve, reject) => { await cancelOrder(pid, id) .then(() => resolve()) .catch(() => reject()) }), { pending: 'Approve transaction...', success: 'Order delivered, will reflect in your Order history within 30sec 🙌', error: 'Encountered error placing order 🤯', }, ) }

const Order = ({ orders, title, seller }) => { const [connectedAccount] = useGlobalState('connectedAccount')

return ( {title}

S/N Product Qty Price Status Total {seller ? orders.map((order, i) => order.seller == connectedAccount ? ( ) : null, ) : orders.map((order, i) => order.buyer == connectedAccount ? ( ) : null, )}

{seller ? orders.map((order, i) => order.seller == connectedAccount ? ( ) : null, ) : orders.map((order, i) => order.buyer == connectedAccount ? ( ) : null, )} ) }

const SellerOrder = ({ order, i }) => ( {i + 1}

{order.name}

{order.qty}

{(order.total / order.qty).toFixed(3)} EHT

{order.status == DELEVIRED ? ( Delievered ) : order.status == CANCELED ? ( Canceled ) : ( onDeliver(order.pid, order.id)} > Deliever )}

{order.total} EHT )

const BuyerOrder = ({ order, i }) => ( {i + 1}

{order.name}

{order.qty}

{(order.total / order.qty).toFixed(3)} EHT

{order.status == DELEVIRED ? ( Delievered ) : order.status == CANCELED ? ( Canceled ) : ( onCancel(order.pid, order.id)} > Cancel )} {order.total} EHT )

const MobileSellerOrder = ({ order, i }) => ( #{i + 1}

{order.name}

{order.qty} x {order.total / order.qty} EHT = {order.total} EHT

{order.status == DELEVIRED ? ( Delievered ) : order.status == CANCELED ? ( Canceled ) : ( onDeliver(order.pid, order.id)} > Deliever )} )

const MobileBuyerOrder = ({ order, i }) => ( #{i + 1}

{order.name}

{order.qty} x {order.total / order.qty} EHT = {order.total} EHT

{order.status == DELEVIRED ? ( Delievered ) : order.status == CANCELED ? ( Canceled ) : ( onCancel(order.pid, order.id)} > Cancel )} )

export default Order Adding a Game to The Shop To add a new game to our shop we use two components, the “AddButton” and the “CreateProduct” component. The “AddButton” is responsible for launching the create product modal. Create each one of these components in the components folder and paste the following codes inside them. see the codes below. import { BsPlusLg } from 'react-icons/bs' import { setGlobalState } from '../store'

const AddButton = () => { return ( setGlobalState('modal', 'scale-100')} > ) }

export default AddButton import { useEffect, useState } from 'react' import { FaTimes } from 'react-icons/fa' import { createProduct } from '../Blockchain.Service' import { setGlobalState, useGlobalState } from '../store' import { toast } from 'react-toastify' import { getUser } from '../Chat.Service'

const CreateProduct = () => { const [modal] = useGlobalState('modal') const [connectedAccount] = useGlobalState('connectedAccount') const [name, setName] = useState('') const [price, setPrice] = useState('') const [stock, setStock] = useState('') const [description, setDescription] = useState('') const [imageURL, setImageURL] = useState('') const [seller, setSeller] = useState(false)

const handleSubmit = async (e) => { e.preventDefault()

if (!name || !price || !imageURL || !description || !stock) return const params = { sku: (Math.random() + 1).toString(36).substring(7).toUpperCase(), name, description, stock, price, imageURL, }

await toast.promise( new Promise(async (resolve, reject) => { await createProduct(params) .then(() => resolve()) .catch(() => reject()) }), { pending: 'Approve transaction to product...', success: 'Product successfully created, will reflect within 30sec 👌', error: 'Encountered error updating your product 🤯', }, )

closeModal()

if(!seller) toast("Please sign in to have your customers chat with you.") }

useEffect(async () => { await getUser(connectedAccount).then((user) => { if (user.name) setSeller(user.uid == connectedAccount) }) }, [])

const closeModal = () => { setGlobalState('modal', 'scale-0') resetForm() }

const resetForm = () => { setImageURL('') setName('') setPrice('') setStock('') setDescription('') }

return ( Add Product

{imageURL ? ( ) : null}

setName(e.target.value)} value={name} required />

setPrice(e.target.value)} value={price} required /> setStock(e.target.value)} value={stock} required />

setImageURL(e.target.value)} pattern="^(http(s)?:\/\/)+[\w\-\._~:\/?#[\]@!\$&'\*\+,;=.]+$" value={imageURL} required />

setDescription(e.target.value)} value={description} required >

<button type="submit" className="flex flex-row justify-center items-center w-full text-white text-md bg-blue-500 py-2 px-5 rounded-full drop-shadow-xl border-transparent border hover:bg-transparent hover:text-blue-500 hover:border hover:border-blue-500 focus:outline-none focus:ring mt-5" > Create Product ) }

export default CreateProduct The Administrative Components This component includes the edit, delete, and chat with seller components. The ability to edit or delete a product is solely the responsibility of the owner of such a product. For the chat with seller button, both the seller and the buyer must willfully sign up for this service to be able to receive anonymous chats from the buyers. Then he will be able to see them in his chat history. The logic for each of these components is contained in the codes below; create and paste the codes into their respective components. import { FaTimes } from 'react-icons/fa' import { setGlobalState, useGlobalState } from '../store' import { loginWithCometChat, signUpWithCometChat } from '../Chat.Service' import { toast } from 'react-toastify'

const ChatModal = () => { const [chatModal] = useGlobalState('chatModal') const [connectedAccount] = useGlobalState('connectedAccount')

const handleLogin = async () => { await toast.promise( new Promise(async (resolve, reject) => { await loginWithCometChat(connectedAccount) .then((res) => res == true ? resolve() : reject()) .catch(() => reject()) }), { pending: 'Signing in...', success: 'Successfully signed in 👌', error: 'Encountered error while signing in 🤯', }, )

closeModal() }

const handleSignup = async () => { await toast.promise( new Promise(async (resolve, reject) => { await signUpWithCometChat(connectedAccount, connectedAccount) .then((res) => res == true ? resolve() : reject()) .catch(() => reject()) }), { pending: 'Signing up...', success: 'Successfully signed up, proceed to login... 👌', error: 'Encountered error while signing up 🤯', }, )

closeModal() }

const closeModal = () => { setGlobalState('chatModal', 'scale-0') }

return ( ) }

const ChatAuth = ({ login, sign }) => ( <> Authentication You will have to sign up or login to access the chat features of this app.

<button type="submit" onClick={login} className="flex flex-row justify-center items-center w-full text-white text-md bg-blue-900 py-2 px-5 rounded-full drop-shadow-xl border-transparent border hover:bg-transparent hover:text-blue-900 hover:border hover:border-blue-900 focus:outline-none focus:ring mt-5" > Login

Sign Up )

export default ChatModal import { FaTimes } from 'react-icons/fa' import { setGlobalState, useGlobalState } from '../store' import { deleteProduct } from '../Blockchain.Service' import { toast } from 'react-toastify'

const DeleteProduct = () => { const [deleteModal] = useGlobalState('deleteModal') const [product] = useGlobalState('product')

const handleDelete = async (e) => { e.preventDefault()

await toast.promise( new Promise(async (resolve, reject) => { await deleteProduct(product?.id) .then(() => resolve()) .catch(() => reject()) }), { pending: 'Approving transaction...', success: 'Product deleted, will reflect within 30sec 👌', error: 'Encountered error deleting your product 🤯', }, )

closeModal() }

const closeModal = () => { setGlobalState('deleteModal', 'scale-0') }

return (

You are about to delete "{product?.name}" {' '} permanently!

Are you sure?

<button type="submit" onClick={handleDelete} className="flex flex-row justify-center items-center w-full text-white text-md bg-red-500 py-2 px-5 rounded-full drop-shadow-xl border-transparent border hover:bg-transparent hover:text-red-500 hover:border hover:border-red-500 focus:outline-none focus:ring mt-5" > Delete Product ) }

export default DeleteProduct import { useEffect, useState } from 'react' import { FaTimes } from 'react-icons/fa' import { updateProduct } from '../Blockchain.Service' import { setGlobalState, useGlobalState } from '../store' import { toast } from 'react-toastify'

const UpateProduct = () => { const [modal] = useGlobalState('updateModal') const [product] = useGlobalState('product') const [name, setName] = useState(product?.name) const [price, setPrice] = useState(product?.price) const [stock, setStock] = useState(product?.stock) const [oldStock, setOldStock] = useState(product?.stock) const [description, setDescription] = useState(product?.description) const [imageURL, setImageURL] = useState(product?.imageURL)

useEffect(() => { setName(product?.name) setDescription(product?.description) setPrice(product?.price) setStock(product?.stock) setImageURL(product?.imageURL) }, [product])

const handleSubmit = async (e) => { e.preventDefault()

if ( !name || !price || !imageURL || !description || !stock || stock < oldStock ) return const params = { id: product.id, name, description, stock, price, imageURL, }

await toast.promise( new Promise(async (resolve, reject) => { await updateProduct(params) .then(() => resolve()) .catch(() => reject()) }), { pending: 'Approve transaction to product...', success: 'Product successfully updated, will reflect within 30sec 🦄', error: 'Encountered error updating your product 🤯', }, )

closeModal() console.log('Product updated') }

const closeModal = () => { setGlobalState('updateModal', 'scale-0') }

return ( Edit Product

{imageURL ? ( ) : null}

setName(e.target.value)} value={name || ''} required />

setPrice(e.target.value)} value={price || ''} required />

setStock(e.target.value)} value={stock || ''} required />

setImageURL(e.target.value)} pattern="^(http(s)?:\/\/)+[\w\-\._~:\/?#[\]@!\$&'\*\+,;=.]+$" value={imageURL || ''} required />

setDescription(e.target.value)} value={description || ''} required >

<button type="submit" className="flex flex-row justify-center items-center w-full text-white text-md bg-blue-500 py-2 px-5 rounded-full drop-shadow-xl border-transparent border hover:bg-transparent hover:text-blue-500 hover:border hover:border-blue-500 focus:outline-none focus:ring mt-5" > Update Product ) }

export default UpateProduct The Menu Component This component is in charge of directing users to other areas of the application, such as your order and sales history, recent customer chats, and statistics. See the code for the component below. import { FaTimes } from 'react-icons/fa' import { useNavigate } from 'react-router-dom' import { setGlobalState, useGlobalState } from '../store'

const Menu = () => { const [menu] = useGlobalState('menu') const navigate = useNavigate()

const navTo = (route) => { setGlobalState('menu', 'scale-0') navigate(route) }

return ( Account

setGlobalState('menu', 'scale-0')} >

<button type="button" data-mdb-ripple="true" data-mdb-ripple-color="light" className="px-6 py-2.5 bg-white text-black font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 hover:text-white active:shadow-lg transition duration-150 ease-in-out w-full text-left" onClick={() => navTo('/orders')} > Order History <button type="button" data-mdb-ripple="true" data-mdb-ripple-color="light" className="px-6 py-2.5 bg-white text-black font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 hover:text-white active:shadow-lg transition duration-150 ease-in-out w-full text-left" onClick={() => navTo('/sales')} > Sales History

<button type="button" data-mdb-ripple="true" data-mdb-ripple-color="light" className="px-6 py-2.5 bg-white text-black font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 hover:text-white active:shadow-lg transition duration-150 ease-in-out w-full text-left" onClick={() => navTo('/recents')} > Recent Chats

<button type="button" data-mdb-ripple="true" data-mdb-ripple-color="light" className="px-6 py-2.5 bg-white text-black font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 hover:text-white active:shadow-lg transition duration-150 ease-in-out w-full text-left" onClick={() => navTo('/seller/0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266')} > My Products

<button type="button" data-mdb-ripple="true" data-mdb-ripple-color="light" className="px-6 py-2.5 bg-white text-black font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 hover:text-white active:shadow-lg transition duration-150 ease-in-out w-full text-left" onClick={() => navTo('/stats/0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266')} > My Stats ) }

export default Menu The Shopping Cart Components The cart component has a highly responsive design as well as an instant price calibrator. See the codes listed below. import { useEffect, useState } from 'react' import { FaEthereum } from 'react-icons/fa' import { Link } from 'react-router-dom' import { remFromCart, updateCart } from '../Cart.Service' import Summary from './Summary'

const Cart = ({ cart, summary }) => { const [cartItems, setCartItems] = useState([]) const [process, setProcess] = useState(false)

const increase = (product) => { product.qty++ updateCart(product) setCartItems(cart) setProcess(!process) }

const decrease = (product) => { if (product.qty == 1) { remFromCart(product) } else { product.qty-- updateCart(product) } setCartItems(cart) setProcess(!process) }

useEffect(() => { setCartItems(cart) }, [process])

return ( <> Shopping Cart

S/N Product Qty Price Action Total

{cartItems.map((product, i) => ( {i + 1}

{product.name}

decrease(product)} > - {product.qty} increase(product)} > +

{product.price} EHT

<button type="button" className="inline-block px-6 py-2.5 bg-transparent text-red-600 font-medium text-xs leading-tight uppercase rounded hover:text-red-700 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none focus:ring-0 active:bg-gray-200 transition duration-150 ease-in-out" onClick={() => remFromCart(product)} > Remove {(product.qty * product.price).toFixed(3)} EHT ))}

{cartItems.map((product, i) => ( {product.name}

decrease(product)} > - {product.qty} increase(product)} > +

{(product.qty * product.price).toFixed(3)} EHT

remFromCart(product)} > Remove ))} ) }

export default Cart The Summary Component This component enables you to supply the address and phone number of where you want the item shipped. See the codes below. import { FaEthereum } from 'react-icons/fa' import { useState } from 'react' import { createOrder } from '../Blockchain.Service' import { clearCart } from '../Cart.Service' import { toast } from 'react-toastify'

const Summary = ({ summary }) => { const [destination, setDestination] = useState('') const [phone, setPhone] = useState('')

const handleCheckout = async (e) => { e.preventDefault() if (!phone || !destination) return

const params = { phone, destination, ...summary }

await toast.promise( new Promise(async (resolve, reject) => { await createOrder(params) .then(() => { onReset() clearCart() resolve() }) .catch(() => reject()) }), { pending: 'Approve transaction...', success: 'Order placed, will reflect in your Order history within 30sec 🙌', error: 'Encountered error placing order 🤯', }, ) }

const onReset = () => { setDestination('') setPhone('') }

return ( Destination

<input type="text" className="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" placeholder="Your full address" name="destination" onChange={(e) => setDestination(e.target.value)} value={destination} />

Phone

<input type="text" className="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" placeholder="Phone" name="phone" onChange={(e) => setPhone(e.target.value)} value={phone} />

<button className="px-6 py-2.5 bg-transparent border-blue-800 text-blue-800 font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-900 hover:shadow-lg border focus:border-blue-900 focus:shadow-lg focus:outline-none focus:ring-0 active:border-blue-900 active:shadow-lg transition duration-150 ease-in-out hover:text-white w-full" > Back to Shopping

Order Summary

Subtotal

{(summary.grand - summary.tax).toFixed(3)} EHT

Tax

{summary.tax.toFixed(3)} EHT

Grand Total

{summary.grand.toFixed(3)} EHT

Place Order Now ) }

export default Summary The Stats Components This section handles funding and withdrawals from your store. For a complete understanding, refer to the codes below. const Treasury = ({ stats }) => { return ( {0} ETH Paid {stats.balance} ETH Balance <button type="button" className="inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded-full shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out" > Withdraw Fund <button type="button" className="inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded-full shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out" > Fund Account ) }

export default Treasury And there you have it for all the chunks of components. Pages It is time to put together all the components on their respective pages. On the root of your project, head to folder and create a new folder called . Now all the created components in this section must all be included in this views folder. **src** **views** The Home Page This page bundles up the banner, shop stats, and the cards components together, see the codes below. import Banner from '../components/Banner' import ShopStats from '../components/ShopStats' import Cards from '../components/Cards' import { useGlobalState } from '../store' import { loadProducts } from '../Blockchain.Service' import { useEffect, useState } from 'react'

const Home = () => { const [products] = useGlobalState('products') const [stats] = useGlobalState('stats') const [loaded, setLoaded] = useState(false)

useEffect(async () => { await loadProducts().then(() => setLoaded(true)) }, [])

return loaded ? ( <> ) : null }

export default Home The Shopping Cart Page This page features two components, the cart, and the summary components, they both help a customer place orders. The customer pays in ethers, see the codes below. import Cart from '../components/Cart' import { useGlobalState } from '../store'

const ShoppingCart = () => { const [cart] = useGlobalState('cart') const [summary] = useGlobalState('summary')

return ( <> {cart.length > 0 ? ( ) : ( Cart Empty Add some products to your cart...

)} ) }

export default ShoppingCart The Product Page The product page contains two essential components for displaying details pertaining to a specific game product. See the codes below. import { useEffect, useState } from 'react' import { useParams } from 'react-router-dom' import { loadProduct } from '../Blockchain.Service' import { useGlobalState } from '../store' import Buyers from '../components/Buyers' import Details from '../components/Details'

const Product = () => { const { id } = useParams() const [product] = useGlobalState('product') const [buyers] = useGlobalState('buyers') const [loaded, setLoaded] = useState(false)

useEffect(async () => { await loadProduct(id).then(() => setLoaded(true)) }, [])

return loaded ? ( <> ) : null }

export default Product The Orders and Sales Page The orders page uses the order component to render a list of orders for a buyer of a product that he can see from his order history. Replicate the page by creating the component below inside the views folder. See the codes below. import { useEffect } from "react" import { loadOrders } from "../Blockchain.Service" import { useGlobalState } from "../store" import Order from "../components/Order"

const Orders = () => { const [orders] = useGlobalState('orders') useEffect(async () => { await loadOrders() }, [])

return ( <> ) }

export default Orders import { useEffect } from "react" import { loadOrders } from "../Blockchain.Service" import { useGlobalState } from "../store" import Order from "../components/Order"

const Sales = () => { const [orders] = useGlobalState('orders')

useEffect(async () => { await loadOrders() }, [])

return ( <> ) }

export default Sales Chat Page This page enables a buyer to chat with a seller of a product, this was made possible with the CometChat SDK. Each seller must be authenticated anonymously with this chat service before receiving chats from their buyers. To enjoy this service, you must have configured the CometChat SDK which has been discussed above. See the codes below. import Identicon from 'react-identicons' import React, { useEffect, useState } from 'react' import { FaTimes } from 'react-icons/fa' import { useNavigate, useParams } from 'react-router-dom' import { truncate, useGlobalState } from '../store' import { sendMessage, CometChat, getMessages } from '../Chat.Service' import { toast } from 'react-toastify'

const Chat = () => { const { id } = useParams() const [currentUser] = useGlobalState('currentUser') const navigate = useNavigate()

useEffect(async () => { if (currentUser) { await getConversations().then((list) => setUsers(list)) } else { toast('Please authenticate with the chat feature first!') navigate('/') } }, [])

return currentUser ? ( <> ) : null }

const ChatHeader = ({ id }) => { const navigate = useNavigate()

return ( {truncate(id, 4, 4, 11)}

navigate('/product/' + 1)} className="rounded-full text-gray-500 bg-gray-200 font-semibold text-sm flex align-center cursor-pointer active:bg-gray-300 transition duration-300 ease w-max" > Exit ) }

const Messages = ({ id }) => { const [connectedAccount] = useGlobalState('connectedAccount') const [message, setMessage] = useState('') const [messages, setMessages] = useState([])

const handleSubmit = async (e) => { e.preventDefault() sendMessage(id, message).then((msg) => { setMessages((prevState) => [...prevState, msg]) setMessage('') scrollToEnd() }) }

const listenForMessage = (listenerID) => { CometChat.addMessageListener( listenerID, new CometChat.MessageListener({ onTextMessageReceived: (message) => { setMessages((prevState) => [...prevState, message]) scrollToEnd() }, }), ) }

const scrollToEnd = () => { const element = document.getElementById('messages-container') element.scrollTop = element.scrollHeight }

useEffect(async () => { listenForMessage(id) await getMessages(id).then((messages) => setMessages(messages.filter((msg) => msg.category == 'message')), ) }, [id])

return ( {messages.map((message, i) => message.sender.uid != connectedAccount ? ( ) : ( ), )} setMessage(e.target.value)} value={message} required /> Send ) }

const RightMessage = ({ msg }) => ( @You {new Date(msg.sentAt * 1000).toLocaleDateString()}{' '} {new Date(msg.sentAt * 1000).toLocaleTimeString()} {msg.text} )

const LeftMessage = ({ msg }) => ( @{truncate(msg.sender.uid, 4, 4, 11)} {new Date(msg.sentAt * 1000).toLocaleDateString()}{' '} {new Date(msg.sentAt * 1000).toLocaleTimeString()} {msg.text} )

export default Chat The Recent Chat Page This page shows you a list of buyers who wants to contact you for extra information about your listed products. The CometChat SDK enables all these chatting functionalities to take place, you will have to sign in or up specifically for the chat feature before you utilize it on your account. Sellers who don’t opt-in for this service cannot receive chats from their customers. See the code below. import { useEffect, useState } from 'react' import Identicon from 'react-identicons' import { useNavigate } from 'react-router-dom' import { getConversations } from '../Chat.Service' import { truncate, useGlobalState } from '../store' import { toast } from 'react-toastify'

const Recent = () => { const [users, setUsers] = useState([]) const [currentUser] = useGlobalState('currentUser') const navigate = useNavigate()

useEffect(async () => { if (currentUser) { await getConversations().then((list) => setUsers(list)) } else { toast('Please authenticate with the chat feature first!') navigate('/') } }, [])

return currentUser ? ( <> Recent Chats {users.map((user, i) => ( ))}

<button className="px-6 py-2.5 bg-transparent border-blue-800 text-blue-800 font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-900 hover:shadow-lg border focus:border-blue-900 focus:shadow-lg focus:outline-none focus:ring-0 active:border-blue-900 active:shadow-lg transition duration-150 ease-in-out hover:text-white w-full" > Back to Home ) : null }

const Conversation = ({ conversation }) => { const navigate = useNavigate() const [connectedAccount] = useGlobalState('connectedAccount')

const uid = (conversation) => { return conversation.sender.uid == connectedAccount ? conversation.receiver.uid : conversation.sender.uid }

return ( <button type="button" data-mdb-ripple="true" data-mdb-ripple-color="light" className="px-6 py-2.5 bg-white text-black font-medium text-xs leading-tight rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 hover:text-white active:shadow-lg transition duration-150 ease-in-out w-full text-left my-2" onClick={() => navigate('/chat/' + uid(conversation))} >

{truncate(uid(conversation), 4, 4, 11)} {conversation.text} {new Date(conversation.sentAt * 1000).toLocaleDateString()}{' '} {new Date(conversation.sentAt * 1000).toLocaleTimeString()} ) }

export default Recent The Seller and Stats page The last two pages are dedicated to listing specific sellers' products as well as some shop statistics. The statistics show how well the seller is doing in this market. Still, in the views component, create these two pages. See the codes listed below. import { useParams } from 'react-router-dom' import Cards from '../components/Cards'

const Seller = () => { const { id } = useParams()

return ( <> ) }

export default Seller import { useEffect, useState } from 'react' import { loadStats } from '../Blockchain.Service' import ShopStats from '../components/ShopStats' import Treasury from '../components/Treasury' import { useGlobalState } from '../store'

const Stats = () => { const [stats] = useGlobalState('myStats') const [loaded, setLoaded] = useState(false) useEffect(async () => { await loadStats().then(() => setLoaded(true)) }, [])

return loaded ? ( <> Your Stats Back to Home ) : null }

export default Stats Fantastic, that will be all for the pages, let’s proceed to other essential components of this application. Configuring Other Components There are other components that complete this application and in this part, we will be working on them one step at a time. Head to the src folder and open the file and replace its content with the codes below. The App.jsx File **App.jsx** import { Route, Routes } from 'react-router-dom' import { useEffect, useState } from 'react' import { isWallectConnected } from './Blockchain.Service' import { ToastContainer } from 'react-toastify' import { checkStorage } from './Cart.Service' import Header from './components/Header' import AddButton from './components/AddButton' import CreateProduct from './components/CreateProduct' import UpateProduct from './components/UpateProduct' import Menu from './components/Menu' import Home from './views/Home' import Product from './views/Product' import Orders from './views/Orders' import Chat from './views/Chat' import Seller from './views/Seller' import Recent from './views/Recent' import Stats from './views/Stats' import Sales from './views/Sales' import ShoppingCart from './views/ShoppingCart' import DeleteProduct from './components/DeleteProduct' import ChatModal from './components/ChatModal' import { isUserLoggedIn } from './Chat.Service'

const App = () => { const [loaded, setLoaded] = useState(false)

useEffect(async () => { await isWallectConnected().then(async () => { checkStorage() await isUserLoggedIn() setLoaded(true) console.log('Blockchain Loaded') }) }, [])

return loaded ? (

} /> } /> } /> } /> } /> } /> } /> } /> } />

) : null }

export default App The above codes will ensure that all the components and pages are represented properly. You will need a state management library to work with the blockchain and link all the various components together. For the sake of simplicity, we are using a . State Management Service react-hooks-global-state Navigate to the and create a new folder called the . Inside this store folder, create a new file called and paste the codes below inside and save. **project** >> **src** store **index.jsx** import { createGlobalState } from 'react-hooks-global-state'

const { setGlobalState, useGlobalState, getGlobalState } = createGlobalState({ chatModal: 'scale-0', deleteModal: 'scale-0', updateModal: 'scale-0', modal: 'scale-0', menu: 'scale-0', connectedAccount: '', currentUser: null, contract: null, stats: null, myStats: null, buyers: [], orders: [], sales: [], products: [], product: null, cart: [], summary: { total: 0, grand: 0, tax: 0, qtys: [], ids: [] }, })

const truncate = (text, startChars, endChars, maxLength) => { if (text.length > maxLength) { let start = text.substring(0, startChars) let end = text.substring(text.length - endChars, text.length) while (start.length + end.length < maxLength) { start = start + '.' } return start + end } return text }

export { useGlobalState, setGlobalState, getGlobalState, truncate } All the data coming from the blockchain will be stored in the above file and used across the entire application. This file contains all the procedures for communicating with your smart contract that lives on the blockchain. In the src folder, create a file called and paste the codes below and save. The Blockchain Service EthersJs **Blockchain.services.jsx** import abi from './abis/src/contracts/Shop.sol/Shop.json' import address from './abis/contractAddress.json' import { getGlobalState, setGlobalState } from './store' import { ethers } from 'ethers' import { logOutWithCometChat } from './Chat.Service'

const toWei = (num) => ethers.utils.parseEther(num.toString())

const { ethereum } = window const contractAddress = address.address const contractAbi = abi.abi const fee = toWei('0.002')

const getEtheriumContract = () => { const connectedAccount = getGlobalState('connectedAccount')

if (connectedAccount) { const provider = new ethers.providers.Web3Provider(ethereum) const signer = provider.getSigner() const contract = new ethers.Contract(contractAddress, contractAbi, signer)

return contract } else { return getGlobalState('contract') } }

const isWallectConnected = async () => { try { if (!ethereum) return alert('Please install Metamask') const accounts = await ethereum.request({ method: 'eth_accounts' })

window.ethereum.on('chainChanged', (chainId) => { window.location.reload() })

window.ethereum.on('accountsChanged', async () => { setGlobalState('connectedAccount', accounts[0].toLowerCase()) await logOutWithCometChat() await isWallectConnected() })

if (accounts.length) { setGlobalState('connectedAccount', accounts[0].toLowerCase()) } else { alert('Please connect wallet.') console.log('No accounts found.') } } catch (error) { reportError(error) } }

const connectWallet = async () => { try { if (!ethereum) return alert('Please install Metamask') const accounts = await ethereum.request({ method: 'eth_requestAccounts' }) setGlobalState('connectedAccount', accounts[0].toLowerCase()) } catch (error) { reportError(error) } }

const createProduct = async ({ sku, name, description, imageURL, price, stock, }) => { try { if (!ethereum) return alert('Please install Metamask') const connectedAccount = getGlobalState('connectedAccount') const contract = getEtheriumContract() price = toWei(price)

await contract.createProduct( sku, name, description, imageURL, price, stock, { from: connectedAccount, value: fee._hex, }, ) } catch (error) { reportError(error) } }

const updateProduct = async ({ id, name, description, imageURL, price, stock, }) => { try { if (!ethereum) return alert('Please install Metamask') const connectedAccount = getGlobalState('connectedAccount') const contract = getEtheriumContract() price = toWei(price)

await contract.updateProduct( id, name, description, imageURL, price, stock, { from: connectedAccount, }, ) } catch (error) { reportError(error) } }

const deleteProduct = async (id) => { try { if (!ethereum) return alert('Please install Metamask') const connectedAccount = getGlobalState('connectedAccount') const contract = getEtheriumContract() await contract.deleteProduct(id, { from: connectedAccount }) } catch (error) { reportError(error) } }

const createOrder = async ({ ids, qtys, phone, destination, grand }) => { try { if (!ethereum) return alert('Please install Metamask') const connectedAccount = getGlobalState('connectedAccount') const contract = getEtheriumContract() grand = toWei(grand)

await contract.createOrder(ids, qtys, destination, phone, { from: connectedAccount, value: grand._hex, }) } catch (error) { reportError(error) } }

const loadProducts = async () => { try { if (!ethereum) return alert('Please install Metamask')

const connectedAccount = getGlobalState('connectedAccount') const contract = getEtheriumContract() const products = await contract.getProducts() const stats = await contract.stats() const myStats = await contract.statsOf(connectedAccount)

setGlobalState('products', structuredProducts(products)) setGlobalState('stats', structureStats(stats)) setGlobalState('myStats', structureStats(myStats)) } catch (error) { reportError(error) } }

const loadProduct = async (id) => { try { if (!ethereum) return alert('Please install Metamask')

const contract = getEtheriumContract() const product = await contract.getProduct(id) const buyers = await contract.getBuyers(id)

setGlobalState('product', structuredProducts([product])[0]) setGlobalState('buyers', structuredBuyers(buyers)) } catch (error) { reportError(error) } }

const loadOrders = async () => { try { if (!ethereum) return alert('Please install Metamask') const contract = getEtheriumContract()

const orders = await contract.getOrders() setGlobalState('orders', structuredOrders(orders)) } catch (error) { reportError(error) } }

const loadStats = async () => { try { if (!ethereum) return alert('Please install Metamask')

const connectedAccount = getGlobalState('connectedAccount') const contract = getEtheriumContract() const myStats = await contract.statsOf(connectedAccount)

setGlobalState('myStats', structureStats(myStats)) } catch (error) { reportError(error) } }

const delieverOrder = async (pid, id) => { try { if (!ethereum) return alert('Please install Metamask') const connectedAccount = getGlobalState('connectedAccount') const contract = getEtheriumContract() await contract.deliverOrder(pid, id, { from: connectedAccount }) } catch (error) { reportError(error) } }

const cancelOrder = async (pid, id) => { try { if (!ethereum) return alert('Please install Metamask') const connectedAccount = getGlobalState('connectedAccount') const contract = getEtheriumContract() await contract.cancelOrder(pid, id, { from: connectedAccount }) } catch (error) { reportError(error) } }

const reportError = (error) => { console.log(error.message) throw new Error('No ethereum object.') }

const structuredProducts = (products) => products .map((product) => ({ id: Number(product.id), sku: product.sku, seller: product.seller.toLowerCase(), name: product.name, description: product.description, imageURL: product.imageURL, stock: Number(product.stock), price: parseInt(product.price._hex) / 10 ** 18, deleted: product.deleted, timestamp: new Date(product.timestamp).getTime(), })) .reverse()

const structuredOrders = (orders) => orders .map((order) => ({ pid: Number(order.pid), id: Number(order.id), name: order.name, sku: order.sku, seller: order.seller.toLowerCase(), buyer: order.buyer.toLowerCase(), destination: order.destination, phone: order.phone, imageURL: order.imageURL, qty: Number(order.qty), status: Number(order.status), total: parseInt(order.total._hex) / 10 ** 18, timestamp: new Date(order.timestamp.toNumber()).getTime(), })) .reverse()

const structuredBuyers = (buyers) => buyers .map((buyer) => ({ buyer: buyer.buyer.toLowerCase(), qty: Number(buyer.qty), price: parseInt(buyer.price._hex) / 10 ** 18, timestamp: new Date(buyer.timestamp.toNumber() * 1000).toDateString(), })) .reverse()

const structureStats = (stats) => ({ balance: Number(stats.balance), orders: Number(stats.orders), products: Number(stats.products), sales: Number(stats.sales), paid: Number(stats.paid._hex), sellers: Number(stats.sellers), })

export { isWallectConnected, connectWallet, createProduct, updateProduct, deleteProduct, loadProducts, loadProduct, createOrder, loadOrders, loadStats, delieverOrder, cancelOrder, } This file contains the codes that calibrate our cart system, it ensures that every change in price and quantity of items is reflected in the sub and grand total of our cart. The Cart Service On the directory, create a new file named , copy the codes below and paste them into it and save. **src** **Cart.Services.jsx** import { getGlobalState, setGlobalState } from './store'

const addToCart = (product) => { const products = getGlobalState('cart') if (!products.find((p) => product.id == p.id)) { setGlobalState('cart', [...products, { ...product, qty: 1 }]) localStorage.setItem( 'cart', JSON.stringify([...products, { ...product, qty: 1 }]), ) summarizeCart() } }

const remFromCart = (product) => { let products = getGlobalState('cart') products = products.filter((p) => p.id != product.id) setGlobalState('cart', products) localStorage.setItem('cart', JSON.stringify(products)) summarizeCart() }

const updateCart = (product) => { const products = getGlobalState('cart') products.forEach((p) => { if (p.id == product.id) p = product }) setGlobalState('cart', products) localStorage.setItem('cart', JSON.stringify(products)) summarizeCart() }

const clearCart = () => { setGlobalState('cart', []) localStorage.removeItem('cart') summarizeCart() }

const summarizeCart = () => { const products = getGlobalState('cart') const summary = getGlobalState('summary') products.forEach((p, i) => { summary.total += p.qty * p.price if (summary.ids.includes(p.id)) { summary.qtys[i] = p.qty } else { summary.ids[i] = p.id summary.qtys[i] = p.qty } }) summary.tax = 0.002 summary.grand = summary.total + summary.tax setGlobalState('summary', summary) summary.total = 0 // summary.grand = 0 }

const checkStorage = () => { let products = JSON.parse(localStorage.getItem('cart')) if (products?.length) { setGlobalState('cart', JSON.parse(localStorage.getItem('cart'))) summarizeCart() } }

export { addToCart, remFromCart, updateCart, checkStorage, clearCart } This file contains the codes for interacting with the CometChat SDK. In the folder, create a new file named . Now, copy the codes below, paste them into the file, and save. The Chat Service **src** **Chat.Services.jsx** import { CometChat } from '@cometchat-pro/chat' import { setGlobalState } from './store'

const CONSTANTS = { APP_ID: process.env.REACT_APP_COMET_CHAT_APP_ID, REGION: process.env.REACT_APP_COMET_CHAT_REGION, Auth_Key: process.env.REACT_APP_COMET_CHAT_AUTH_KEY, }

const initCometChat = async () => { const appID = CONSTANTS.APP_ID const region = CONSTANTS.REGION

const appSetting = new CometChat.AppSettingsBuilder() .subscribePresenceForAllUsers() .setRegion(region) .build()

await CometChat.init(appID, appSetting) .then(() => console.log('Initialization completed successfully')) .catch((error) => error) }

const loginWithCometChat = async (UID) => { const authKey = CONSTANTS.Auth_Key return await CometChat.login(UID, authKey) .then((user) => { setGlobalState('currentUser', user) return true }) .catch((error) => error) }

const signUpWithCometChat = async (UID, name) => { let authKey = CONSTANTS.Auth_Key const user = new CometChat.User(UID) user.setName(name)

return await CometChat.createUser(user, authKey) .then((user) => { console.log('Signed In: ', user) return true }) .catch((error) => error) }

const logOutWithCometChat = async () => { return await CometChat.logout() .then(() => setGlobalState('currentUser', null)) .catch((error) => error) }

const isUserLoggedIn = async () => { await CometChat.getLoggedinUser() .then((user) => setGlobalState('currentUser', user)) .catch((error) => console.log('error:', error)) }

const getUser = async (UID) => { return await CometChat.getUser(UID) .then((user) => user) .catch((error) => error) }

const getMessages = async (UID) => { const limit = 30 const messagesRequest = new CometChat.MessagesRequestBuilder() .setUID(UID) .setLimit(limit) .build()

return await messagesRequest .fetchPrevious() .then((messages) => messages) .catch((error) => error) }

const sendMessage = async (receiverID, messageText) => { const receiverType = CometChat.RECEIVER_TYPE.USER const textMessage = new CometChat.TextMessage( receiverID, messageText, receiverType, )

return await CometChat.sendMessage(textMessage) .then((message) => message) .catch((error) => error) }

const getConversations = async () => { const limit = 30 const conversationsRequest = new CometChat.ConversationsRequestBuilder() .setLimit(limit) .build()

return await conversationsRequest .fetchNext() .then((conversationList) => conversationList) .catch((error) => error) }

export { initCometChat, loginWithCometChat, signUpWithCometChat, logOutWithCometChat, getMessages, sendMessage, getConversations, isUserLoggedIn, getUser, CometChat, } Finally, click the link below to download the image. If the folder does not already exist in your src directory, create one. asset https://github.com/Daltonic/gameshop/blob/master/src/assets/banner.png?raw=true With all that setup, run the command below to have the project running on your local machine. yarn start This will open the project on the browser at . **localhost:3000** Conclusion That concludes the tutorial for this build, you have learned how to create a decentralized eCommerce platform that allows you to list game products on a marketplace. Buyers can purchase your game product and on delivery, the money is released to the seller of the product. This is one powerful use case for developing a real-life decentralized web3 application. More of these kinds of builds can be found here on my account. You can also . Or to speed up your web3 learning process. watch my free videos on my YouTube channel book your private web3 classes with me With that said, I will catch you next time, have a great day! About the Author Gospel Darlington is a full-stack blockchain developer with years of experience in the software development industry. 6+ By combining Software Development, writing, and teaching, he demonstrates how to build decentralized applications on EVM-compatible blockchain networks. His stacks include , , , , , , , , and more. JavaScript React Vue Angular Node React Native NextJs Solidity For more information about him, kindly visit and follow his page on , , , or his . Twitter Github LinkedIn website

How to Build a Web3 Game eShop with React, Solidity, and CometChat

Too Long; Didn't Read

Darlington Gospel

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How to Build a Web3 Game eShop with React, Solidity, and CometChat

Too Long; Didn't Read

Darlington Gospel

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES