How to Build an Awesome Web3 Crowd-Funding Platform with React, Solidity, and CometChat

A valuable skill in Web3 development is all you need to secure your chances of being relevant in today’s tech-world. The Web3 economy is booming and the best thing you can do for yourself right now is to learn the craft. How do you develop a smart contract for your Dapp? How do you best design the Dapp interface? How do you connect the frontend to the backend that sits on the blockchain? All these questions will be answered in this tutorial. Here’s what you will be building, see on the Rinkeby test network and here… demo git repo to learn how to build a Web3 app from scratch. Before we proceed, don’t forget to Subscribe to my YouTube channel I also offer private and specialized classes for serious folks who want to learn one-on-one from a mentor. . Book your Web3 classes here With that said, let’s jump into the tutorial. Prerequisite You will need the following tools installed to build along with me: NodeJs (Super important) EthersJs Hardhat React Infuria Tailwind CSS CometChat SDK Metamask Yarn Installing Dependencies Clone the project from the repository below and run the following commands. git clone https://github.com/Daltonic/genesis cd yarn install Executing the codes below will add the following dependencies and versions to your project. { "name": "Genesis", "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" }, "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", "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" ] } } 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 STEP 2: Log in to the CometChat dashboard, only after registering. From the dashboard, add a new app called STEP 3: genesis. 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 placeholders 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 in the root of your project. **.env** Configuring Infuria App Head to , and create an account. STEP 1: Infuria From the dashboard create a new project. STEP 2: Copy the test network WebSocket or HTTPS endpoint URL to your file. STEP 3: Rinkeby .env After that, enter your Metamask secret phrase and preferred account's private key. If you followed the instructions correctly, your environment variables should now look like this. 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. Accessing Your Metamask Private Key Make sure Rinkeby is selected as the test network in your Metamask browser extension. Then, on the preferred account, click the vertical dotted line and choose account details. Please see the image below. STEP 1: 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=*************************** SECRET_KEY=****************** DEPLOYER_KEY=**********************

REACT_APP_COMET_CHAT_REGION=** REACT_APP_COMET_CHAT_APP_ID=************** REACT_APP_COMET_CHAT_AUTH_KEY=****************************** As for your , you are required to paste your secret phrase in the space provided in the environment file. SECRET_KEY **Metamask** The Genesis Smart Contract Now let’s create the smart contract for this project. Before doing that, you need to understand the scope of this project. We’re creating a crowdfunding platform where startups and projects with a great cause can raise funds. This platform help founders with the capital to start up their business, it is called Genesis, which means the BEGINING! Create a folder called in the directory of your project. Now, head to >> and create a file named and paste the code below inside of it. contracts src src contracts Genesis.sol //SPDX-License-Identifier: MIT pragma solidity ^0.8.7;

contract Genesis { address public owner; uint public projectTax; uint public projectCount; uint public balance; statsStruct public stats; projectStruct[] projects;

mapping(address => projectStruct[]) projectsOf; mapping(uint => backerStruct[]) backersOf; mapping(uint => bool) public projectExist;

enum statusEnum { OPEN, APPROVED, REVERTED, DELETED, PAIDOUT }

struct statsStruct { uint totalProjects; uint totalBacking; uint totalDonations; }

struct backerStruct { address owner; uint contribution; uint timestamp; bool refunded; }

struct projectStruct { uint id; address owner; string title; string description; string imageURL; uint cost; uint raised; uint timestamp; uint expiresAt; uint backers; statusEnum status; }

modifier ownerOnly(){ require(msg.sender == owner, "Owner reserved only"); _; }

event Action ( uint256 id, string actionType, address indexed executor, uint256 timestamp );

constructor(uint _projectTax) { owner = msg.sender; projectTax = _projectTax; }

function createProject( string memory title, string memory description, string memory imageURL, uint cost, uint expiresAt ) public returns (bool) { require(bytes(title).length > 0, "Title cannot be empty"); require(bytes(description).length > 0, "Description cannot be empty"); require(bytes(imageURL).length > 0, "ImageURL cannot be empty");

projectStruct memory project; project.id = projectCount; project.owner = msg.sender; project.title = title; project.description = description; project.imageURL = imageURL; project.cost = cost; project.timestamp = block.timestamp; project.expiresAt = expiresAt;

projects.push(project); projectExist[projectCount] = true; projectsOf[msg.sender].push(project); stats.totalProjects += 1;

emit Action ( projectCount++, "PROJECT CREATED", msg.sender, block.timestamp ); return true; }

function updateProject( uint id, string memory title, string memory description, string memory imageURL, uint expiresAt ) public returns (bool) { require(msg.sender == projects[id].owner, "Unauthorized Entity"); require(projectExist[id], "Project not found"); require(bytes(title).length > 0, "Title cannot be empty"); require(bytes(description).length > 0, "Description cannot be empty"); require(bytes(imageURL).length > 0, "ImageURL cannot be empty");

projects[id].title = title; projects[id].description = description; projects[id].imageURL = imageURL; projects[id].expiresAt = expiresAt;

emit Action ( id, "PROJECT UPDATED", msg.sender, block.timestamp );

return true; }

function deleteProject(uint id) public returns (bool) { require(projectExist[id], "Project not found"); require(projects[id].status == statusEnum.OPEN, "Project no longer opened"); require( msg.sender == projects[id].owner || msg.sender == owner, "Unauthorized Entity" );

projects[id].status = statusEnum.DELETED; performRefund(id);

emit Action ( id, "PROJECT DELETED", msg.sender, block.timestamp );

return true; }

function performPayout(uint id) internal { uint raised = (projects[id].raised * projectTax) / 100; uint tax = (raised * projectTax) / 100;

projects[id].status = statusEnum.PAIDOUT;

payTo(projects[id].owner, tax); payTo(owner, (raised - tax));

balance -= projects[id].raised;

emit Action ( id, "PROJECT PAID OUT", msg.sender, block.timestamp ); }

function payOutProject(uint id) public returns (bool) { require(projects[id].status == statusEnum.APPROVED, "Project no longer APPROVED"); require(projects[id].raised >= balance, "Insufficient Fund"); require( msg.sender == projects[id].owner || msg.sender == owner, "Unauthorized Entity" );

performPayout(id); return true; }

function performRefund(uint id) internal { for(uint i = 0; i < backersOf[id].length; i++) { address _owner = backersOf[id][i].owner; uint _contribution = backersOf[id][i].contribution; backersOf[id][i].refunded = true; backersOf[id][i].timestamp = block.timestamp; payTo(_owner, _contribution);

stats.totalBacking -= 1; stats.totalDonations -= _contribution; } }

function backProject(uint id) public payable returns (bool) { require(msg.value > 0 ether, "Ether must be greater than zero"); require(projectExist[id], "Project not found"); require(projects[id].status == statusEnum.OPEN, "Project no longer opened");

stats.totalBacking += 1; stats.totalDonations += msg.value; projects[id].raised += msg.value; projects[id].backers += 1;

backersOf[id].push( backerStruct( msg.sender, msg.value, block.timestamp, false ) );

emit Action ( id, "PROJECT BACKED", msg.sender, block.timestamp );

if(projects[id].raised >= projects[id].cost) { projects[id].status = statusEnum.APPROVED; balance += projects[id].raised; performPayout(id); return true; }

if(block.timestamp >= projects[id].expiresAt) { projects[id].status = statusEnum.REVERTED; performRefund(id); return true; }

return true; }

function requestRefund(uint id) public returns (bool) { require( projects[id].status != statusEnum.REVERTED || projects[id].status != statusEnum.DELETED, "Project not marked as revert or delete" ); projects[id].status = statusEnum.REVERTED; performRefund(id); return true; }

function changeTax(uint _taxPct) public ownerOnly { projectTax = _taxPct; }

function getProject(uint id) public view returns (projectStruct memory) { require(projectExist[id], "Project not found");

return projects[id]; } function getProjects() public view returns (projectStruct[] memory) { return projects; } function getBackers(uint id) public view returns (backerStruct[] memory) { return backersOf[id]; }

function payTo(address to, uint256 amount) internal { (bool success, ) = payable(to).call{value: amount}(""); require(success); } } Now let’s discuss the content of this smart contract segment by segment. Defining Essential Variables address public owner; uint public projectTax; uint public projectCount; uint public balance;

statsStruct public stats; projectStruct[] projects;

mapping(address => projectStruct[]) projectsOf; mapping(uint => backerStruct[]) backersOf; mapping(uint => bool) public projectExist; In the above block of codes, we defined the various data types and structures for storing data on the blockchain. For the single data types, we have the variable, project , , and the available in our smart contract. owner tax count balance For the multi-data types, we have and which defines the model of each project and the statistics in our smart contract. **statsStruct** **projectStruct** The mapping bear records of the project owners, backers, also the existence of a project. If you are new to Solidity, I have a full . So do check it out, like, and subscribe! FREE course on YouTube called, Mastering Solidity Basics https://youtube.com/watch?v=11DsTLhI_i4&list=PLUDcVqFK2t-D0F7eaNdA7NFSdT82RXcwe&index=1 Setting up the Essential Structs and Event enum statusEnum { OPEN, APPROVED, REVERTED, DELETED, PAIDOUT }

struct statsStruct { uint totalProjects; uint totalBacking; uint totalDonations; }

struct backerStruct { address owner; uint contribution; uint timestamp; bool refunded; }

struct projectStruct { uint id; address owner; string title; string description; string imageURL; uint cost; uint raised; uint timestamp; uint expiresAt; uint backers; statusEnum status; }

event Action ( uint256 id, string actionType, address indexed executor, uint256 timestamp ); The above code contains structures for declaring enums, structs, and events. The enum was defined to contain the various states a project can have in our platform. The contains the code a statistic should have, such as the total number of donations, backings, and projects. **statsStruct** The on the other hand, contains data types each person backing a project should have. A backer should definitely have an address, how much he is donating, the time of donation, and a refund status to show if the owner was refunded his money. **backerStruct** The describes what each project must contain and lastly, the event is a dynamic one to output information according to the calling function. **projectStruct** The Constructor and Owner Modifier function modifier ownerOnly(){ require(msg.sender == owner, "Owner reserved only"); _; }

constructor(uint _projectTax) { owner = msg.sender; projectTax = _projectTax; } Whenever the modifier is attached to a calling function, it restricts its accessibility to the deployer of the smart contract only. **ownerOnly()** The function, on the other hand, initializes the owner state variable along with the tax per project. This tax is what will be charged per an approved project. **constructor()** The Project Create Function function createProject( string memory title, string memory description, string memory imageURL, uint cost, uint expiresAt ) public returns (bool) { require(bytes(title).length > 0, "Title cannot be empty"); require(bytes(description).length > 0, "Description cannot be empty"); require(bytes(imageURL).length > 0, "ImageURL cannot be empty"); projectStruct memory project; project.id = projectCount; project.owner = msg.sender; project.title = title; project.description = description; project.imageURL = imageURL; project.cost = cost; project.timestamp = block.timestamp; project.expiresAt = expiresAt; projects.push(project); projectExist[projectCount] = true; projectsOf[msg.sender].push(project); stats.totalProjects += 1;

emit Action ( projectCount++, "PROJECT CREATED", msg.sender, block.timestamp ); return true; } This method takes in project information and pushes it to the project's array. Next, it sets other records such as the statistics and project owners. Lastly, an event is emitted bearing some records of the just created project. The Project Updation Function function updateProject( uint id, string memory title, string memory description, string memory imageURL, uint expiresAt ) public returns (bool) { require(msg.sender == projects[id].owner, "Unauthorized Entity"); require(projectExist[id], "Project not found"); require(bytes(title).length > 0, "Title cannot be empty"); require(bytes(description).length > 0, "Description cannot be empty"); require(bytes(imageURL).length > 0, "ImageURL cannot be empty");

projects[id].title = title; projects[id].description = description; projects[id].imageURL = imageURL; projects[id].expiresAt = expiresAt;

emit Action ( id, "PROJECT UPDATED", msg.sender, block.timestamp ); return true; } This function updates a project according to the project Id using the title, description, image URL, and expiration time. On completion, it emits a Project Updated event. The Deletion Function function deleteProject(uint id) public returns (bool) { require(projectExist[id], "Project not found"); require(projects[id].status == statusEnum.OPEN, "Project no longer opened"); require( msg.sender == projects[id].owner || msg.sender == owner, "Unauthorized Entity" );

projects[id].status = statusEnum.DELETED; performRefund(id);

emit Action ( id, "PROJECT DELETED", msg.sender, block.timestamp ); return true; } The function above marks a project as completed, which by so doing, performs a refund operation sending back all the donations to the appropriate donors. These are the duties of the following functions; Other Functions : Releases the contributed money to the project owner as well as paying the platform’s task. PerformPayout() : Performs criteria checks and calls the function internally. PayOutProject() performPayout() : Returns money to the backer of a specific project. PerformRefund() : Performs criteria checks and calls the function. RequestRefund() performRefund() : Makes donation to a specific project. BackProject() : Changes the platform’s task for projects. ChangeTax() : Returns a particular project detail by Id. GetProject() : Returns all projects on the smart contract. GetProjects() : Returns a list of backers for a particular project. GetBackers() : Sends a specific amount of money to a specific address. PayTo() Fantastic, there you have it for the smart contract, now let’s get into merging it with the React frontend. Configuring the Deployment Script One more thing to do with the smart contract is to configure the deployment script. Head to the >> and paste the codes below inside of it. scripts deploy.js const hre = require('hardhat') const fs = require('fs')

async function main() { const taxFee = 5 // unit is in percent const Contract = await hre.ethers.getContractFactory('Genesis') const contract = await Contract.deploy(taxFee) 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 code above when executed compiles the smart contract and deploys it to the specified network. Head to the root of the project and open up . Reviewing the Hardhat Config File hardhat.config.js require("@nomiclabs/hardhat-waffle"); require('dotenv').config()

module.exports = { defaultNetwork: "localhost", networks: { hardhat: { }, localhost: { url: "http://127.0.0.1:8545" }, rinkeby: { 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 } } Pay heed to the two objects called networks and paths. We specified two networks which are the localhost and the Rinkeby test networks. The localhost is for development purposes and the Rinkeby is for productions/staging purposes. The environment variables called and were gotten from Infuria and Metamask respectively. ENDPOINT_URL DEVELOPER_KEY For the path, we are specifying where our smart contracts live and where to dump the generated artifacts. For this case, we specified that they should be kept in the folder. src Great, lastly spin up your hardhat blockchain server and deploy the smart contract using the commands below. yarn hardhat node yarn hardhat run scripts/deploy.js --network localhost Developing the Frontend Let’s put together the various components of the React frontend step by step. Now create a folder called component in the directory. This is where all the components will live. Components src Header Component This component beautifully features two items, the logo which helps you navigate back to the home page, and the button which helps you connect to your Metamask wallet. Create a file named Header.jsx and paste the codes below inside of it. **connect wallet** import { Link } from 'react-router-dom' import { TbBusinessplan } from 'react-icons/tb' import { connectWallet } from '../Genesis' import { useGlobalState, truncate } from '../store'

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

return ( Genesis {connectedAccount ? ( <button type="button" data-mdb-ripple="true" data-mdb-ripple-color="light" className="inline-block px-6 py-2.5 bg-green-600 text-white font-medium text-xs leading-tight uppercase rounded-full shadow-md hover:bg-green-700 hover:shadow-lg focus:bg-green-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-green-800 active:shadow-lg transition duration-150 ease-in-out" > {truncate(connectedAccount, 4, 4, 11)} ) : ( <button type="button" data-mdb-ripple="true" data-mdb-ripple-color="light" className="inline-block px-6 py-2.5 bg-green-600 text-white font-medium text-xs leading-tight uppercase rounded-full shadow-md hover:bg-green-700 hover:shadow-lg focus:bg-green-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-green-800 active:shadow-lg transition duration-150 ease-in-out" onClick={connectWallet} > Connect Wallet )} ) }

export default Header Hero Component This component is responsible for displaying statistics about the projects created on the platform including the total number of backings and donations. To replicate, create a component called in the components folder and paste the codes below inside of it. Hero.jsx import { setGlobalState, useGlobalState } from '../store'

const Hero = () => { const [stats] = useGlobalState('stats')

const scrollToProjects = () => { document.getElementById('projects').scrollIntoView() }

return ( Bring creative projects to life on GENESIS. <button className="inline-block px-7 py-3 mr-2 bg-green-600 text-white font-medium text-sm leading-snug uppercase shadow-md hover:bg-green-700 hover:shadow-lg focus:bg-green-700 focus:shadow-lg focus:outline-none focus:ring-0 rounded-full active:bg-green-800 active:shadow-lg transition duration-150 ease-in-out" data-mdb-ripple="true" data-mdb-ripple-color="light" onClick={() => setGlobalState('modal', 'scale-100')} > Add Project <button className="inline-block px-7 py-3 bg-transparent text-green-600 font-medium text-sm leading-snug uppercase hover:text-green-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 rounded-full" data-mdb-ripple="true" data-mdb-ripple-color="light" onClick={scrollToProjects} > Back Projects

{stats.totalProjects} Projects {stats.totalBacking} Backing {stats.totalDonations} ETH Donated ) }

export default Hero Projects and ProjectCard components This component is responsible for rendering individual cards of projects. On the components directory, create a file called Projects.jsx and paste the codes below inside of it. import { useEffect, useState } from 'react' import ProjectCard from "./ProjectCard"

const Projects = ({projects}) => { const [end, setEnd] = useState(4) const [count] = useState(4)

const [collection, setCollection] = useState([])

const getCollection = () => { return projects.slice(0, end) }

useEffect(() => { setCollection(getCollection()) }, [projects, end])

return ( {collection.map((project, i) => ( ))}

{projects.length > 0 && projects.length > collection.length ? ( <button type="button" data-mdb-ripple="true" data-mdb-ripple-color="light" className="inline-block px-6 py-2.5 bg-green-600 text-white font-medium text-xs leading-tight uppercase rounded-full shadow-md hover:bg-green-700 hover:shadow-lg focus:bg-green-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-green-800 active:shadow-lg transition duration-150 ease-in-out" onClick={() => setEnd(end + count)} > Load More ) : null} ) }

export default Projects Again, create another file called still inside the components folder and paste the following codes in it. **ProjectCard.jsx** import Identicon from 'react-identicons' import { Link } from 'react-router-dom' import { FaEthereum } from 'react-icons/fa' import { daysRemaining, truncate } from '../store'

const ProjectCard = ({ project }) => (

{project.title} {truncate(project.owner, 4, 4, 11)}

{new Date().getTime() > Number(project.expiresAt + '000') ? 'Expired' : daysRemaining(project.expiresAt)}{' '} left {project.raised} ETH Raised {project.cost} EHT {project.backers} Backing{project.backer == 1 ? '' : 's'}

{project.status == 0 ? ( Open ) : null} {project.status == 1 ? ( Accepted ) : null} {project.status == 2 ? ( Reverted ) : null} {project.status == 3 ? ( Deleted ) : null} {project.status == 4 ? ( Paid ) : null} )

export default ProjectCard Great, we are moving forward. AddButton and CreateProject Components This component together enables us to create new projects. Good use of Tailwind’s CSS was what it took to craft out that beautiful modal. In the components folder, create a component called and paste the codes below into it. **AddButton.jsx** import { BsPlusLg } from 'react-icons/bs' import { setGlobalState } from '../store'

const AddButton = () => { return ( <button type="button" className="flex justify-center items-center rounded-full bg-green-600 text-white leading-normal uppercase shadow-md hover:bg-green-700 hover:shadow-lg focus:bg-green-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-green-800 active:shadow-lg transition duration-150 ease-in-out w-9 h-9" onClick={() => setGlobalState('modal', 'scale-100')} > ) }

export default AddButton Next, create another component called which is configured to be launched by the component. Paste the codes below within it. **CreateProject.jsx** **AddButton.jsx** import { useState } from 'react' import { FaTimes } from 'react-icons/fa' import { setGlobalState, useGlobalState } from '../store' import { createProject, loadProjects } from '../Genesis'

const CreateProject = () => { const [modal] = useGlobalState('modal') const [title, setTitle] = useState('') const [cost, setCost] = useState('') const [date, setDate] = useState('') const [description, setDescription] = useState('') const [imageURL, setImageURL] = useState('')

const toTimestamp = (strDate) => { const datum = Date.parse(strDate) return datum / 1000 }

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

if (!title || !cost || !imageURL || !description || !date) return const params = { title, description, cost, expiresAt: toTimestamp(date), imageURL, }

createProject(params) .then(() => { setGlobalState('modal', 'scale-0') console.log('Project Created!') resetForm() loadProjects() }) .catch((error) => console.log(error)) }

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

const resetForm = () => { setImageURL('') setTitle('') setDate('') setCost('') setDescription('') }

return ( Add Project

setTitle(e.target.value)} value={title} required />

setCost(e.target.value)} value={cost} required />

setDate(e.target.value)} value={date} required />

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

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

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

export default CreateProject ProjectDetails Component This component is responsible for displaying details of a particular project and also providing some critical buttons to summon other components. To replicate this component, create a file called in the components directory and paste the codes below into it. **ProjectDetails.jsx** import Identicon from 'react-identicons' import { FaEthereum } from 'react-icons/fa' import { useNavigate } from 'react-router-dom' import { payoutProject } from '../Genesis' import { daysRemaining, setGlobalState, truncate, useGlobalState, } from '../store'

const ProjectDetails = ({ project }) => { const navigate = useNavigate() const [connectedAccount] = useGlobalState('connectedAccount') const [group] = useGlobalState('group')

const handleChat = () => { if (group?.hasJoined) { navigate(`/chats/` + project.id) } else { setGlobalState('chatModal', 'scale-100') } }

return ( {project.title} {new Date().getTime() > Number(project.expiresAt + '000') ? 'Expired' : daysRemaining(project.expiresAt)}{' '} left {truncate(project.owner, 4, 4, 11)} {project.backers} Backing{project.backer == 1 ? '' : 's'}

{project.status == 0 ? ( Open ) : null} {project.status == 1 ? ( Accepted ) : null} {project.status == 2 ? ( Reverted ) : null} {project.status == 3 ? ( Deleted ) : null} {project.status == 4 ? ( Paid ) : null} {project.description}

{project.raised} ETH Raised {project.cost} EHT

{project.status == 0 ? ( <button type="button" data-mdb-ripple="true" data-mdb-ripple-color="light" className="inline-block px-6 py-2.5 bg-green-600 text-white font-medium text-xs leading-tight uppercase rounded-full shadow-md hover:bg-green-700 hover:shadow-lg focus:bg-green-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-green-800 active:shadow-lg transition duration-150 ease-in-out" onClick={() => setGlobalState('backModal', 'scale-100')} > Back This Project ) : null}

{connectedAccount.toLowerCase() == project.owner.toLowerCase() ? ( project.status != 3 ? ( project.status == 1 ? ( <button type="button" data-mdb-ripple="true" data-mdb-ripple-color="light" className="inline-block px-6 py-2.5 bg-orange-600 text-white font-medium text-xs leading-tight uppercase rounded-full shadow-md hover:bg-orange-700 hover:shadow-lg focus:bg-orange-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-orange-800 active:shadow-lg transition duration-150 ease-in-out" onClick={() => payoutProject(project.id)} > Payout ) : project.status != 4 ? ( <> <button type="button" data-mdb-ripple="true" data-mdb-ripple-color="light" className="inline-block px-6 py-2.5 bg-gray-600 text-white font-medium text-xs leading-tight uppercase rounded-full shadow-md hover:bg-gray-700 hover:shadow-lg focus:bg-gray-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-gray-800 active:shadow-lg transition duration-150 ease-in-out" onClick={() => setGlobalState('updateModal', 'scale-100')} > Edit <button type="button" data-mdb-ripple="true" data-mdb-ripple-color="light" className="inline-block px-6 py-2.5 bg-red-600 text-white font-medium text-xs leading-tight uppercase rounded-full shadow-md hover:bg-red-700 hover:shadow-lg focus:bg-red-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-red-800 active:shadow-lg transition duration-150 ease-in-out" onClick={() => setGlobalState('deleteModal', 'scale-100')} > Delete ) : ( <button type="button" data-mdb-ripple="true" data-mdb-ripple-color="light" className="inline-block px-6 py-2.5 bg-gray-600 text-white font-medium text-xs leading-tight uppercase rounded-full shadow-md hover:bg-gray-700 hover:shadow-lg focus:bg-gray-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-gray-800 active:shadow-lg transition duration-150 ease-in-out" > project Closed ) ) : null ) : null}

<button type="button" data-mdb-ripple="true" data-mdb-ripple-color="light" className="inline-block px-6 py-2.5 bg-orange-600 text-white font-medium text-xs leading-tight uppercase rounded-full shadow-md hover:bg-orange-700 hover:shadow-lg focus:bg-orange-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-orange-800 active:shadow-lg transition duration-150 ease-in-out" onClick={handleChat} > Chat ) }

export default ProjectDetails UpdateProject Component As intuitive as its name sound, this component helps us update projects provided that the user has the right clearance. In the components folder, create a file called and paste the codes below into it. **UpdateProject.jsx** import { useState } from 'react' import { FaTimes } from 'react-icons/fa' import { setGlobalState, useGlobalState } from '../store' import { updateProject } from '../Genesis'

const UpdateProject = ({ project }) => { const [updateModal] = useGlobalState('updateModal') const [title, setTitle] = useState(project.title) const [date, setDate] = useState(project.date) const [description, setDescription] = useState(project.description) const [imageURL, setImageURL] = useState(project.imageURL)

const toTimestamp = (strDate) => { const datum = Date.parse(strDate) return datum / 1000 }

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

if (!title || !imageURL || !description || !date) return const params = { id: project.id, title, description, expiresAt: toTimestamp(date), imageURL, }

updateProject(params).then(() => { closeModal() }) }

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

return ( Edit Project

setTitle(e.target.value)} value={title} required />

setDate(e.target.value)} value={date} required />

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

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

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

export default UpdateProject DeleteProject Component Like the UpdateProject component, this component can only be utilized if you are the owner of the project or if you are the deployer of the smart contract. Head on to the components folder and create a new file called and paste the codes below into it. DeleteProject.jsx import { FaTimes } from 'react-icons/fa' import { setGlobalState, useGlobalState } from '../store' import { deleteProject } from '../Genesis'

const DeleteProject = ({ project }) => { const [deleteModal] = useGlobalState('deleteModal')

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

deleteProject(project.id).then(() => { setGlobalState('deleteModal', 'scale-0') console.log('Project Deleted!') }) }

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

return ( #{project.title}

Are you sure?

This is irriversible!

<button type="submit" onClick={handleSubmit} 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 Project ) }

export default DeleteProject ChatAuth Component This little component is responsible for authenticating users for anonymous chat. Also through this component, owners of projects can create new projects and others can join. Create a file called and paste the codes below inside of it. **ChatAuth.jsx** import { useNavigate } from 'react-router-dom' import { FaTimes } from 'react-icons/fa' import { setGlobalState, useGlobalState } from '../store' import { createNewGroup, joinGroup, loginWithCometChat, signInWithCometChat, } from '../CometChat'

const ChatAuth = ({ project }) => { const [chatModal] = useGlobalState('chatModal') const [currentUser] = useGlobalState('currentUser')

return ( {currentUser ? : } ) }

const Auth = () => { const handleSignUp = () => { signInWithCometChat().then(() => handleLogin()) }

const handleLogin = () => { loginWithCometChat().then(() => { // perform duties... if (currentUser) console.log('Current user', currentUser) }) }

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

return ( Authenticate Chat

Sign in or up to participate in chat.

Login Sign up ) }

const Actions = ({ project }) => { const navigate = useNavigate() const [connectedAccount] = useGlobalState('connectedAccount') const [group] = useGlobalState('group')

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

const handleGroupCreation = () => { createNewGroup(`pid_${project.id}`, project.title) }

const handleGroupJoin = () => { joinGroup(`pid_${project.id}`).then(() => navigate(`/chats/` + project.id)) }

return ( Authenticate Chat

{connectedAccount.toLowerCase() != project.owner.toLowerCase() ? ( group ? ( Enter Group ) : ( No group created for this projected

Close ) ) : ( Create Group )} ) }

export default ChatAuth BackProject Component This component helps you to specify and donate the number of ethers you are willing to contribute to the project. To replicate, let’s create another component called and paste the codes in it. **BackProject.jsx** import { useState } from 'react' import { FaTimes } from 'react-icons/fa' import { setGlobalState, useGlobalState } from '../store' import { backProject } from '../Genesis'

const BackProject = ({project}) => { const [backModal] = useGlobalState('backModal') const [amount, setAmount] = useState('')

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

if (!amount) return

backProject(project.id, amount) .then(() => { closeModal() console.log('Project Backed!') setAmount('') }) }

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

return ( #{project.title}

setAmount(e.target.value)} value={amount} required />

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

export default BackProject ProjectBackers Component This component lists out all the backers of a particular project. Create a file named and paste the codes inside of it. **ProjectBackers.jsx** import Identicon from 'react-identicons' import Moment from 'react-moment' import { FaEthereum } from 'react-icons/fa' import { truncate } from '../store'

const ProjectBackers = ({ backers }) => { return ( Backer Donation Refunded Time {backers.map((backer, i) => ( {truncate(backer.owner, 4, 4, 11)} {backer.contribution} EHT {backer.refunded ? ( Yes ) : ( No )} {backer.timestamp} ))} ) }

export default ProjectBackers Messages Component This component is responsible for rendering chat content to the view. First, create a file called and paste the following codes inside of it. **Messages.jsx** import { useEffect, useState } from 'react' import { getMessages, sendMessage, CometChat } from '../CometChat' import { truncate, useGlobalState } from '../store'

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

useEffect(() => { getMessages(gid).then((msgs) => { if (!!!msgs.code) setMessages(msgs.filter((msg) => msg.category == 'message')) })

listenForMessage(gid) }, [gid])

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

const handleMessage = (e) => { e.preventDefault() sendMessage(gid, message).then((msg) => { if (!!!msg.code) { setMessages((prevState) => [...prevState, msg]) setMessage('') scrollToEnd() } }) }

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

const dateToTime = (date) => { let hours = date.getHours() let minutes = date.getMinutes() let ampm = hours >= 12 ? 'pm' : 'am' hours = hours % 12 hours = hours ? hours : 12 minutes = minutes < 10 ? '0' + minutes : minutes let strTime = hours + ':' + minutes + ' ' + ampm return strTime }

return ( <> {messages.map((msg, i) => msg.sender.uid.toLowerCase() != connectedAccount.toLowerCase() ? ( ) : ( ) )}

setMessage(e.target.value)} required /> Send ) }

const RightMessage = ({ message, timestamp, owner }) => ( @You {timestamp} {message} )

const LeftMessage = ({ message, timestamp, owner }) => ( @{owner} {timestamp} {message} )

export default Messages We have three major views on this project, they include the Home, Product, and Chat pages. Let’s have them created one after the other. The Views On the directory create a new folder called and create the following files within it. src views Home Page This component bundles the smaller components and services that make up the home page. Create a file in the views directory called and paste the codes below into it. **Home.jsx** import { useEffect, useState } from 'react' import { loadProjects } from '../Genesis' import { useGlobalState } from '../store' import Hero from '../components/Hero' import Projects from '../components/Projects'

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

useEffect(() => { loadProjects().then(() => setLoaded(true)) }, [])

return loaded ? ( <> ) : null }

export default Home Project View There is a lot of logic that goes into the making of this page which can be seen by the number of actionable buttons integrated with it. To implement, create a new file called in the src >> and paste the codes below inside of it. Project.jsx views import ChatAuth from '../components/ChatAuth' import BackProject from '../components/BackProject' import UpdateProject from '../components/UpdateProject' import ProjectDetails from '../components/ProjectDetails' import ProjectBackers from '../components/ProjectBackers' import DeleteProject from '../components/DeleteProject' import { loadProject } from '../Genesis' import { useGlobalState } from '../store' import { useEffect, useState } from 'react' import { useParams } from 'react-router-dom' import { getGroup } from '../CometChat'

const Project = () => { const { id } = useParams() const [loaded, setLoaded] = useState(false) const [project] = useGlobalState('project') const [backers] = useGlobalState('backers') const [group] = useGlobalState('group') const [currentUser] = useGlobalState('currentUser')

useEffect(() => { if (currentUser) getGroup('pid_' + id) loadProject(id).then(() => setLoaded(true)) }, [currentUser])

return loaded ? ( {backers.length > 0 ? : null}

) : null }

export default Project Chat View This view allows you to engage in a one-to-many chat using the CometChat SDK. This is how to replicate it, jump into the views directory, create a file called , and paste the codes below inside of it. Chat.jsx import Identicon from 'react-identicons' import { useNavigate, useParams } from 'react-router-dom' import { truncate, useGlobalState } from '../store' import Messages from '../components/Messages'

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

return ( {truncate(connectedAccount, 4, 4, 11)} <button type="button" data-mdb-ripple="true" data-mdb-ripple-color="light" className="inline-block px-6 py-2.5 bg-gray-800 text-white border-gray-600 font-medium text-xs leading-tight uppercase shadow-md hover:bg-transparent hover:shadow-lg hover:text-gray-700 focus:bg-gray-700 focus:shadow-lg focus:outline-none focus:ring-0 border active:bg-gray-800 active:shadow-lg transition duration-150 ease-in-out rounded-full" onClick={() => navigate(`/projects/` + id)} > Back to Project ) }

export default Chat This mother component bundles and regulates all the pages and components in this application. In the folder, replace the codes inside the file named with the one below. The App Component src **App.jsx** import { useEffect, useState } from 'react' import { isWallectConnected } from './Genesis' import { Route, Routes } from 'react-router-dom' import { useGlobalState } from './store' import { checkAuthState } from './CometChat' import Header from './components/Header' import AddButton from './components/AddButton' import CreateProject from './components/CreateProject' import Home from './views/Home' import Project from './views/Project' import Chat from './views/Chat'

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

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

return ( {loaded ? ( } /> } /> } /> ) : null}

{connectedAccount ? ( <> ) : null} ) }

export default App That completes the views and components for this project, now let’s add up the rest of the essential files. Other Essential Files We are using a moderate state management library called to store the data coming from the blockchain. Doing this method greatly simplifies the code. The Store Service react-hooks-global-state In your directory, create a folder and a file called >> and paste the codes below inside. src store index.jsx import moment from 'moment' import { createGlobalState } from 'react-hooks-global-state'

const { setGlobalState, useGlobalState, getGlobalState } = createGlobalState({ modal: 'scale-0', updateModal: 'scale-0', deleteModal: 'scale-0', backModal: 'scale-0', chatModal: 'scale-0', connectedAccount: '', backers: [], projects: [], project: null, contract: null, stats: null, currentUser: null, group: null, })

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 }

const daysRemaining = (days) => { const todaysdate = moment() days = Number((days + '000').slice(0)) days = moment(days).format('YYYY-MM-DD') days = moment(days) days = days.diff(todaysdate, 'days') return days == 1 ? '1 day' : days + ' days' }

export { useGlobalState, setGlobalState, getGlobalState, truncate, daysRemaining } The Blockchain Service Now, is one of the most important files in this project, and all the codes to interact with our smart contract are written here. Create a file called in the folder and paste the codes below. **Genesis.jsx** src import abi from './abis/src/contracts/Genesis.sol/Genesis.json' import address from './abis/contractAddress.json' import { getGlobalState, setGlobalState } from './store' import { ethers } from 'ethers' import { logOutWithCometChat } from './CometChat'

const { ethereum } = window const contractAddress = address.address const contractAbi = abi.abi

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]) await logOutWithCometChat() await isWallectConnected() })

if (accounts.length) { setGlobalState('connectedAccount', accounts[0]) } 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]) } catch (error) { reportError(error) } }

const createProject = async ({ title, description, imageURL, cost, expiresAt, }) => { try { if (!ethereum) return alert('Please install Metamask')

const contract = getEtheriumContract() cost = ethers.utils.parseEther(cost) await contract.createProject(title, description, imageURL, cost, expiresAt)

await loadProjects() // The blockchain is too slow for this... window.location.reload() // That's why we used this... } catch (error) { reportError(error) } }

const updateProject = async ({ id, title, description, imageURL, expiresAt, }) => { try { if (!ethereum) return alert('Please install Metamask')

const contract = getEtheriumContract() await contract.updateProject(id, title, description, imageURL, expiresAt)

await loadProjects() // The blockchain is too slow for this... window.location.reload() // That's why we used this... } catch (error) { reportError(error) } }

const backProject = async (id, amount) => { try { if (!ethereum) return alert('Please install Metamask') const connectedAccount = getGlobalState('connectedAccount') const contract = getEtheriumContract() amount = ethers.utils.parseEther(amount)

await contract.backProject(id, { from: connectedAccount, value: amount._hex, })

await loadProjects() // The blockchain is too slow for this... window.location.reload() // That's why we used this... } catch (error) { reportError(error) } }

const refundProject = async (id) => { try { if (!ethereum) return alert('Please install Metamask') const connectedAccount = getGlobalState('connectedAccount') const contract = getEtheriumContract()

await contract.requestRefund(id, { from: connectedAccount, })

await loadProjects() // The blockchain is too slow for this... window.location.reload() // That's why we used this... } catch (error) { reportError(error) } }

const payoutProject = async (id) => { try { if (!ethereum) return alert('Please install Metamask') const connectedAccount = getGlobalState('connectedAccount') const contract = getEtheriumContract()

await contract.payOutProject(id, { from: connectedAccount, })

await loadProjects() // The blockchain is too slow for this... window.location.reload() // That's why we used this... } catch (error) { reportError(error) } }

const getBackers = async (id) => { try { if (!ethereum) return alert('Please install Metamask') const contract = getEtheriumContract() let backers = await contract.getBackers(id)

setGlobalState('backers', structuredBackers(backers)) } catch (error) { reportError(error) } }

const deleteProject = async (id) => { try { if (!ethereum) return alert('Please install Metamask') const contract = getEtheriumContract() await contract.deleteProject(id)

await loadProjects() // The blockchain is too slow for this... window.location.reload() // That's why we used this... } catch (error) { reportError(error) } }

const loadProject = async (id) => { try { if (!ethereum) return alert('Please install Metamask') const contract = getEtheriumContract() let project = await contract.getProject(id) project = structuredProjects([project])[0]

setGlobalState('project', project) await getBackers(id) console.log("Project Loaded...") } catch (error) { alert(JSON.stringify(error.message)) reportError(error) } }

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

const contract = getEtheriumContract() const projects = await contract.getProjects() const stats = await contract.stats()

setGlobalState('stats', structureStats(stats)) setGlobalState('projects', structuredProjects(projects)) } catch (error) { reportError(error) } }

const structuredBackers = (backers) => backers .map((backer) => ({ owner: backer.owner, refunded: backer.refunded, timestamp: new Date(backer.timestamp.toNumber() * 1000).toJSON(), contribution: parseInt(backer.contribution._hex) / 10 ** 18, })) .reverse()

const structuredProjects = (projects) => projects .map((project) => ({ id: project.id.toNumber(), owner: project.owner, title: project.title, description: project.description, timestamp: new Date(project.timestamp.toNumber()).getTime(), expiresAt: new Date(project.expiresAt.toNumber()).getTime(), date: toDate(project.expiresAt.toNumber() * 1000), imageURL: project.imageURL, raised: parseInt(project.raised._hex) / 10 ** 18, cost: parseInt(project.cost._hex) / 10 ** 18, backers: project.backers.toNumber(), status: project.status, })) .reverse()

const toDate = (timestamp) => { const date = new Date(timestamp) const dd = date.getDate() > 9 ? date.getDate() : `0${date.getDate()}` const mm = date.getMonth() + 1 > 9 ? date.getMonth() + 1 : `0${date.getMonth() + 1}` const yyyy = date.getFullYear() return `${yyyy}-${mm}-${dd}` }

const structureStats = (stats) => ({ totalProjects: stats.totalProjects.toNumber(), totalBacking: stats.totalBacking.toNumber(), totalDonations: parseInt(stats.totalDonations._hex) / 10 ** 18, })

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

export { getEtheriumContract, isWallectConnected, connectWallet, createProject, updateProject, deleteProject, loadProjects, loadProject, backProject, payoutProject, refundProject, } This file contains all the functions needed to establish chat communications with the CometChat SDK. On your folder create a file named and paste the codes below inside. The CometChat Services src **CometChat.jsx** import abi from './abis/src/contracts/Genesis.sol/Genesis.json' import address from './abis/contractAddress.json' import { getGlobalState, setGlobalState } from './store' import { ethers } from 'ethers' import { logOutWithCometChat } from './CometChat'