How To Build A Web3 e-Commerce Platform with React and Solidity: (PART II)

What you will be building, see the and for more info. live demo GitHub repo Introduction In the of this tutorial, we built the smart contract that powers our application. Now let’s build the frontend for interacting with it as you can see above. PART-ONE Not much talking, let’s get coding… We’ll begin by installing the rest of the dependencies for this application. Installing App Dependencies On your terminal, run the following commands… yarn add firebase #Database SDK yarn add @cometchat-pro/chat #Chat SDK yarn add @material-tailwind/react #UI Kit If you have successfully executed the above commands, let’s move to create some private keys for Firebase and CometChat. Creating Private Keys To utilize the Firebase or CometChat SDK, we need to create an app with their services. Don’t worry, this won't cost you a dime. Firebase is limited but free, it's more than enough to help you learn full-stack development. CometChat offers its users a trial version for testing out their SDK and getting acquainted with how their technology works. Use this example If you do not already have a Firebase account, create one for yourself. After that, go to Firebase and create a new project called , then activate the Google authentication service, as detailed below. Creating an App with Firebase freshers Firebase supports authentication via a variety of providers. For example, social authentication, phone numbers, and the traditional email and password method. Because we'll be using the Google authentication in this tutorial, we'll need to enable it for the project we created in Firebase, as it's disabled by default. Click the sign-in method under the authentication tab for your project, and you should see a list of providers currently supported by Firebase. Super, that will be all for the firebase authentication, let's generate the Firebase SDK configuration keys. You need to go and register your application under your Firebase project. On the project’s overview page, select the add app option and pick as the platform. web Return to the project overview page after completing the SDK config registration, as shown in the image below. Now you click on the project settings to copy your SDK configuration setups. The configuration keys shown in the image above must be copied to the file. We will later use it in this project. .env Create a file called in the folder of this project and paste the following codes into it before saving. firebase.js src import { initializeApp } from 'firebase/app' import { setAlert } from './store' import { getAuth, signInWithEmailAndPassword, createUserWithEmailAndPassword, signOut, onAuthStateChanged, } from 'firebase/auth'

import { getFirestore, query, getDocs, updateDoc, collection, collectionGroup, orderBy, deleteDoc, addDoc, doc, setDoc, serverTimestamp, } from 'firebase/firestore'

const firebaseConfig = { apiKey: process.env.REACT_APP_FB_AUTH_KEY, authDomain: 'fresher-a5113.firebaseapp.com', projectId: 'fresher-a5113', storageBucket: 'fresher-a5113.appspot.com', messagingSenderId: '443136794867', appId: process.env.REACT_APP_FB_APP_ID, }

const app = initializeApp(firebaseConfig) const auth = getAuth(app) const db = getFirestore(app)

const logInWithEmailAndPassword = async (email, password) => { try { return await signInWithEmailAndPassword(auth, email, password).then( (res) => res.user ) } catch (error) { setAlert(JSON.stringify(error), 'red') } }

const registerWithEmailAndPassword = async ( email, password, fullname, phone, account, address ) => { try { const res = await createUserWithEmailAndPassword(auth, email, password) const user = res.user const userDocRef = doc(db, 'users', user.email)

await setDoc(userDocRef, { uid: user.uid, fullname, email, phone, account, address, })

return user } catch (error) { setAlert(JSON.stringify(error), 'red') } }

const logout = async () => { try { await signOut(auth) return true } catch (error) { setAlert(JSON.stringify(error), 'red') } }

const addToOrders = async (cart) => { try { const order = { order: Math.random().toString(36).substring(2, 9).toUpperCase(), timestamp: serverTimestamp(), cart, }

await addDoc( collection(db, `users/${auth.currentUser.email}`, 'orders'), order ) return order } catch (error) { setAlert(JSON.stringify(error), 'red') } }

const addProduct = async (product) => { try { await addDoc( collection(db, `users/${auth.currentUser.email}`, 'products'), { name: product.name, uid: auth.currentUser.uid, email: auth.currentUser.email, price: product.price, description: product.description, account: product.account, imgURL: product.imgURL, stock: ((Math.random() * 10) | 0) + 1, timestamp: serverTimestamp(), } ) } catch (error) { setAlert(JSON.stringify(error), 'red') } }

const getProducts = async () => { try { const products = query( collectionGroup(db, 'products'), orderBy('timestamp', 'desc') ) const snapshot = await getDocs(products)

return snapshot.docs.map((doc) => ({ id: doc.id, ...doc.data(), price: Number(doc.data().price), })) } catch (error) { setAlert(JSON.stringify(error), 'red') } }

const getProduct = async (id) => { try { const products = query( collectionGroup(db, 'products'), orderBy('timestamp', 'desc') ) const snapshot = await getDocs(products)

const product = snapshot.docs.find((doc) => doc.id == id) return { id: product.id, ...product.data(), price: Number(product.data().price), } } catch (error) { setAlert(JSON.stringify(error), 'red') } }

const updateProduct = async (product) => { const productRef = doc(db, `users/${product.email}/products`, product.id) try { await updateDoc(productRef, product) } catch (error) { setAlert(JSON.stringify(error), 'red') } }

const deleteProduct = async (product) => { const productRef = doc(db, `users/${product.email}/products`, product.id) try { await deleteDoc(productRef) } catch (error) { setAlert(JSON.stringify(error), 'red') } }

export { auth, db, logInWithEmailAndPassword, registerWithEmailAndPassword, logout, onAuthStateChanged, addProduct, addToOrders, getProducts, getProduct, updateProduct, deleteProduct, } You are awesome if you followed everything correctly. We'll do something similar for next. CometChat Head to and signup if you don’t have an account with them. Next, log in and you will be presented with the screen below. Creating an App with CometChat CometChat Use this as an example to create a new app with the name by clicking the . You will be presented with a modal where you can enter the app details. The image below shows an example. freshers Add New App button Following the creation of your app, you will be directed to your dashboard, which should look something like this. You must also copy these keys to the .env file. Finally, delete the preloaded users, and groups as shown in the images below. Awesome, that will be enough for the setups. Use this template to ensure your file is following our convention. .env ENDPOINT_URL= SECRET_KEY= DEPLOYER_KEY=

REACT_APP_COMET_CHAT_REGION= REACT_APP_COMET_CHAT_APP_ID= REACT_APP_COMET_CHAT_AUTH_KEY=

REACT_APP_FB_AUTH_KEY= REACT_APP_FB_APP_ID= Lastly, create a file name cometChat.js in the folder of this project and paste the code below into it. src import { CometChat } from '@cometchat-pro/chat'

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 () => { try { 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) { console.log(error) } }

const loginWithCometChat = async (UID) => { try { const authKey = CONSTANTS.Auth_Key await CometChat.login(UID, authKey).then((user) => console.log('Login Successful:', { user }) ) } catch (error) { console.log(error) } }

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

return await CometChat.createUser(user, authKey).then((user) => user) } catch (error) { console.log(error) } }

const logOutWithCometChat = async () => { try { await CometChat.logout().then(() => console.log('Logged Out Successfully')) } catch (error) { console.log(error) } }

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

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

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

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

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

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

export { initCometChat, loginWithCometChat, signInWithCometChat, logOutWithCometChat, getMessages, sendMessage, getConversations, } Cool, let’s start integrating them all into our application, we will start with the components. Building The Components Let’s start crafting out all the components one after the other, always refer to the if you have any challenges. git repo The Register Component This component is responsible for saving new users into Firebase. Navigate to the and create a file named . src >> components Register.jsx import { useState } from 'react' import Button from '@material-tailwind/react/Button' import { Link, useNavigate } from 'react-router-dom' import { registerWithEmailAndPassword, logout } from '../firebase' import { signInWithCometChat } from '../cometChat' import { setAlert } from '../store'

const Register = () => { const [fullname, setFullname] = useState('') const [email, setEmail] = useState('') const [password, setPassword] = useState('') const [phone, setPhone] = useState('') const [address, setAddress] = useState('') const [account, setAccount] = useState('') const navigate = useNavigate()

const handleRegister = async (e) => { e.preventDefault() if ( email == '' || password == '' || fullname == '' || phone == '' || account == '' || address == '' ) return registerWithEmailAndPassword( email, password, fullname, phone, account, address ).then((user) => { if (user) { logout().then(() => { signInWithCometChat(user.uid, fullname).then(() => { resetForm() setAlert('Registeration in successfully') navigate('/signin') }) }) } }) }

const resetForm = () => { setFullname('') setEmail('') setPassword('') setPhone('') setAccount('') setAddress('') }

return ( setFullname(e.target.value)} required /> setEmail(e.target.value)} required /> setPassword(e.target.value)} required /> setPhone(e.target.value)} required /> setAccount(e.target.value)} required /> setAddress(e.target.value)} required /> Already a member? sign in Sign Up ) }

export default Register Awesome!!! The Login Component Let’s also create another component called in the folder and paste the code below in it. Login.jsx src >> components import { useState } from 'react' import { Link, useNavigate } from 'react-router-dom' import { logInWithEmailAndPassword } from '../firebase' import { loginWithCometChat } from '../cometChat' import { setAlert } from '../store' import Button from '@material-tailwind/react/Button'

const Login = () => { const [email, setEmail] = useState('') const [password, setPassword] = useState('') const navigate = useNavigate()

const handleLogin = async (e) => { e.preventDefault() if (email == '' || password == '') return logInWithEmailAndPassword(email, password).then((user) => { if (user) { loginWithCometChat(user.uid).then(() => { resetForm() setAlert('Logged in successfully') navigate('/') }) } }) }

const resetForm = () => { setEmail('') setPassword('') }

return ( Login setEmail(e.target.value)} required /> setPassword(e.target.value)} required />

New user sign up Sign In ) }

export default Login Cool, these two components make up the authentication aspect of this application. We will later fuse them into their respective views. The Header Component This component encapsulates the pages on our application. It was crafted with the free . Create a file named inside the directory and paste the codes below in it. Creative TIm Tailwind-Material UI Kit Header.jsx src >> components import { useState } from 'react' import { Link, useNavigate } from 'react-router-dom' import { setAlert, useGlobalState } from '../store' import { logout } from '../firebase' import { logOutWithCometChat } from '../cometChat' import { connectWallet } from '../shared/Freshers' import Navbar from '@material-tailwind/react/Navbar' import NavbarContainer from '@material-tailwind/react/NavbarContainer' import NavbarWrapper from '@material-tailwind/react/NavbarWrapper' import NavbarBrand from '@material-tailwind/react/NavbarBrand' import NavbarToggler from '@material-tailwind/react/NavbarToggler' import NavbarCollapse from '@material-tailwind/react/NavbarCollapse' import Nav from '@material-tailwind/react/Nav' import NavItem from '@material-tailwind/react/NavItem'

const Header = () => { const [openNavbar, setOpenNavbar] = useState(false) const [cart] = useGlobalState('cart') const [isLoggedIn] = useGlobalState('isLoggedIn') const [connectedAccount] = useGlobalState('connectedAccount') const navigate = useNavigate()

const handleSignOut = () => { logout().then((res) => { if (res) { logOutWithCometChat().then(() => { setAlert('Logged out successfully') navigate('/signin') }) } }) }

return ( Freshers setOpenNavbar(!openNavbar)} ripple="white" />

{isLoggedIn ? ( customers Add Product ) : ( <> )} {isLoggedIn ? ( <> {connectedAccount ? null : ( Connect Wallet )} Logout ) : ( Login )}

{cart.length} Cart ) }

export default Header This component renders the particular food properties to screen in a beautifully crafted card from tailwind CSS and Material design. Create a file called still in the and paste the following codes in it. The Food Component Food.jsx components folder Each card renders the name, image, description, price, and the remaining stocks of a food product. Here is the code for it. import React from 'react' import Card from '@material-tailwind/react/Card' import CardImage from '@material-tailwind/react/CardImage' import CardBody from '@material-tailwind/react/CardBody' import CardFooter from '@material-tailwind/react/CardFooter' import H6 from '@material-tailwind/react/Heading6' import Paragraph from '@material-tailwind/react/Paragraph' import Button from '@material-tailwind/react/Button' import { setAlert, setGlobalState, useGlobalState } from '../store' import { Link } from 'react-router-dom'

const Food = ({ item }) => { const [cart] = useGlobalState('cart')

const addToCart = (item) => { item.added = true let cartItems = [...cart] const newItem = { ...item, qty: (item.qty += 1), stock: (item.stock -= 1) } if (cart.find((_item) => _item.id == item.id)) { cartItems[item] = newItem setGlobalState('cart', [...cartItems]) } else { setGlobalState('cart', [...cartItems, newItem]) } setAlert(`${item.name} added to cart!`) }

const toCurrency = (num) => num.toLocaleString('en-US', { style: 'currency', currency: 'USD', })

return (

{item.name}

Don't be scared of the truth because we need to...

{toCurrency(item.price)} {item.stock} in stock

{item.stock > 0 ? ( addToCart(item)} color="green" size="md" ripple="light" disabled={item.stock == 0} > Add To Cart ) : ( Out of Stock )} ) }

export default Food Next, let’s look at the foods component. This component is responsible for rendering the entire collection of food data in our database. Let’s look at its code snippet. The Foods Components Still, in the , create another file called and paste the codes below in it. components directory Foods.jsx import Food from './Food'

const Foods = ({ products }) => { return ( {products.map((item, i) => ( ))} ) }

export default Foods Lastly, let’s look at the component. CartItem The CartItem Component This component is responsible for showing a single item in our cart collection. Here is the code responsible for it. import { useState } from 'react' import Card from '@material-tailwind/react/Card' import CardStatusFooter from '@material-tailwind/react/CardStatusFooter' import { Link } from 'react-router-dom' import { Image, Button } from '@material-tailwind/react' import { setGlobalState, useGlobalState } from '../store'

const CartItem = ({ item }) => { const [qty, setQty] = useState(item.qty) const [cart] = useGlobalState('cart')

const toCurrency = (num) => num.toLocaleString('en-US', { style: 'currency', currency: 'USD', })

const increaseQty = () => { let cartItems = [...cart] const newItem = { ...item, qty: (item.qty += 1), stock: (item.stock -= 1) } cartItems[item] = newItem setGlobalState('cart', cartItems) setQty(newItem.qty) }

const decreaseQty = () => { let cartItems = [...cart] if (qty == 1) { const index = cartItems.indexOf(item) cartItems.splice(index, 1) } else { const newItem = { ...item, qty: (item.qty -= 1), stock: (item.stock += 1), } cartItems[item] = newItem setQty(newItem.qty) } setGlobalState('cart', cartItems) }

return (

- {qty} +

Sub Total: {toCurrency(item.price * qty)} ) }

export default CartItem Congratulations, you just finished coding the components, let’s move on to creating the views… The Views Now that we’ve created the components supporting the various views, let’s proceed next by creating the individual pages. The Home View This view renders the Food component structure. This is to say, the home view retrieves all the food collection from firebase and shows them on screen. Let’s take a look at the codes responsible for it. Navigate to the and create a file named , then, paste the code below inside of it. In fact, you will create all these files in the views folder. views directory Home.jsx import { useEffect, useState } from 'react' import Header from '../components/Header' import Foods from '../components/Foods' import { getProducts } from '../firebase'

const Home = () => { const [products, setProducts] = useState([])

useEffect(() => { getProducts().then((products) => { products.filter((item) => { item.price = Number(item.price) item.qty = 0 }) setProducts(products) }) }, [])

return ( ) }

export default Home The Product View This view is responsible for showcasing in detail the information about a product. From this page, users can view, edit, and delete products as well as chat with the seller, or quickly purchase the food item with Ethereum. Here is the code for it… import Header from '../components/Header' import { useEffect, useState } from 'react' import { useParams, useNavigate } from 'react-router-dom' import { Button, CardImage } from '@material-tailwind/react' import { getProduct, deleteProduct, auth } from '../firebase' import { setGlobalState, useGlobalState, setAlert } from '../store' import { payWithEthers } from '../shared/Freshers'

const Product = () => { const { id } = useParams() const navigate = useNavigate() const [product, setProduct] = useState(null) const [cart] = useGlobalState('cart') const [isLoggedIn] = useGlobalState('isLoggedIn') const [buyer] = useGlobalState('connectedAccount') const [ethToUsd] = useGlobalState('ethToUsd')

const addToCart = () => { const item = product item.added = true let cartItems = [...cart] const newItem = { ...item, qty: (item.qty += 1), stock: (item.stock -= 1) } if (cart.find((_item) => _item.id == item.id)) { cartItems[item] = newItem setGlobalState('cart', [...cartItems]) } else { setGlobalState('cart', [...cartItems, newItem]) } setAlert('Product added to cart') }

const handlePayWithEthers = () => { const item = { ...product, buyer, price: (product.price / ethToUsd).toFixed(4) } payWithEthers(item).then((res) => { if (res) setAlert('Product purchased!') }) }

const handleDeleteProduct = () => { deleteProduct(product).then(() => { setAlert('Product deleted!') navigate('/') }) }

const toCurrency = (num) => num.toLocaleString('en-US', { style: 'currency', currency: 'USD', })

useEffect(() => { getProduct(id).then((data) => setProduct({ ...data, qty: 1 })) }, [id])

return ( {!!product ? (

{product.name} Product information {toCurrency(product.price)} {product.stock} left in stock

{product.description}

Add To Cart

{isLoggedIn ? ( <> {auth.currentUser.uid != product.uid && product.account != buyer ? ( Buy with ETH ) : null}

{auth.currentUser.uid == product.uid ? null : ( navigate('/chat/' + product.uid)} buttonType="link" color="green" size="md" ripple="light" > Chat WIth Seller )} ) : null} {isLoggedIn && auth.currentUser.uid == product.uid ? ( <> navigate('/product/edit/' + id)} buttonType="link" color="green" size="md" ripple="light" > Edit Product Delete ) : null} ) : null} ) }

export default Product The AddProduct View As the name implies, this view is responsible for storing new food items into our Firestore collection. Observe the code snippet below… import { useState } from 'react' import { Link, useNavigate } from 'react-router-dom' import { addProduct } from '../firebase' import { setAlert } from '../store' import { useGlobalState } from '../store' import Button from '@material-tailwind/react/Button' import Header from '../components/Header'

const AddProduct = () => { const [name, setName] = useState('') const [price, setPrice] = useState('') const [imgURL, setImgURL] = useState('') const [description, setDescription] = useState('') const [account] = useGlobalState('connectedAccount') const navigate = useNavigate()

const handleAddProduct = (e) => { e.preventDefault() if (!account) { setAlert('Please connect your metamask account!', 'red') return }

if (name == '' || price == '' || imgURL == '' || description == '') return addProduct({ name, price, imgURL, description, account }).then(() => { setAlert('Product created successfully') navigate('/') }) }

return ( Add Product setName(e.target.value)} required /> setPrice(e.target.value)} required /> setImgURL(e.target.value)} required /> setDescription(e.target.value)} required />

Back to Home Save Product ) }

export default AddProduct Awesome, we are moving forward, let’s see the edit product view… The Edit Product View This view enables us to edit our existing food items. Of course, you need to be the one who initially added the food product to the shop before you can edit. Only product owners can edit, let’s look at the codes performing this action. import Header from '../components/Header' import Button from '@material-tailwind/react/Button' import { useEffect, useState } from 'react' import { Link, useParams, useNavigate } from 'react-router-dom' import { updateProduct, getProduct, auth } from '../firebase' import { setAlert } from '../store' import { useGlobalState } from '../store'

const EditProduct = () => { const { id } = useParams() const navigate = useNavigate() const [product, setProduct] = useState(null) const [name, setName] = useState('') const [price, setPrice] = useState('') const [imgURL, setImgURL] = useState('') const [description, setDescription] = useState('') const [account] = useGlobalState('connectedAccount')

useEffect(() => { getProduct(id).then((data) => { if (auth.currentUser.uid != data.uid) navigate('/') setProduct(data) setName(data.name) setPrice(Number(data.price)) setImgURL(data.imgURL) setDescription(data.description) }) }, [id])

const handleProductUpdate = (e) => { e.preventDefault() if (!account) { setAlert('Please connect your metamask account!', 'red') return }

if (name == '' || price == '' || imgURL == '' || description == '') return updateProduct({ ...product, name, price, imgURL, description, account, }).then(() => { setAlert('Product updated successfully') navigate('/product/' + product.id) }) }

return ( Update Product setName(e.target.value)} required /> setPrice(e.target.value)} required /> setImgURL(e.target.value)} required /> setDescription(e.target.value)} required />

Back to product Update ) }

export default EditProduct Lastly, for the cases relating to products, let’s look at the cart view… The Cart View In this view, you can modify and place your orders. Once you place your order, it is immediately saved in Firestore. Below is how the code is written. import CartItem from '../components/CartItem' import Header from '../components/Header' import { Link } from 'react-router-dom' import { Button } from '@material-tailwind/react' import { useEffect, useState } from 'react' import { addToOrders } from '../firebase' import { setAlert, setGlobalState, useGlobalState } from '../store'

const Cart = () => { const [cart] = useGlobalState('cart') const [isLoggedIn] = useGlobalState('isLoggedIn') const [total, setTotal] = useState(0)

const getTotal = () => { let total = 0 cart.forEach((item) => (total += item.qty * item.price)) setTotal(total) }

const placeOrder = () => { if (!isLoggedIn) return

addToOrders(cart).then((data) => { setGlobalState('cart', []) setAlert(`Order Placed with Id: ${data.order}`) }) }

const clearCart = () => { setGlobalState('cart', []) }

const toCurrency = (num) => num.toLocaleString('en-US', { style: 'currency', currency: 'USD', })

useEffect(() => getTotal(), [cart])

return ( {cart.length > 0 ? ( {cart.map((item, i) => ( ))} Grand Total: {toCurrency(total)} Clear Cart {isLoggedIn ? ( Place Order ) : null} ) : ( Cart empty, add some items to your cart Choose Product )} ) }

export default Cart Next, let’s take care of the last four views in our tray… The ChatList View This view simply lists out the recent conversations you’ve had with your customers so far. This is possible with the help of CometChat SDK, the codes below show you how it was implemented. import Header from '../components/Header' import { getConversations } from '../cometChat' import { useEffect, useState } from 'react' import { Link } from 'react-router-dom' import { auth } from '../firebase'

const ChatList = () => { const [customers, setCustomers] = useState([]) const [loaded, setLoaded] = useState(false)

useEffect(() => { getConversations().then((conversation) => { console.log(conversation) setCustomers(conversation) setLoaded(true) }) }, [])

return ( Recent Chats {loaded ? customers.map((customer, i) => ( )) : null} ) }

const Conversation = ({ conversation, currentUser, owner }) => { const possessor = (key) => { return currentUser == owner ? conversation.sender[key] : conversation.receiver[key] }

const timeAgo = (date) => { let seconds = Math.floor((new Date() - date) / 1000) let interval = seconds / 31536000

if (interval > 1) { return Math.floor(interval) + 'yr' } interval = seconds / 2592000 if (interval > 1) { return Math.floor(interval) + 'mo' } interval = seconds / 86400 if (interval > 1) { return Math.floor(interval) + 'd' } interval = seconds / 3600 if (interval > 1) { return Math.floor(interval) + 'h' } interval = seconds / 60 if (interval > 1) { return Math.floor(interval) + 'm' } return Math.floor(seconds) + 's' }

return ( {possessor('name')} {conversation.text}

{timeAgo(new Date(Number(conversation.sentAt) * 1000).getTime())} ) }

export default ChatList The Chat View This is a one-on-one chat view for a seller and a buyer to communicate. The CometChat SDK makes this easier for us. The following code demonstrates how it works pretty well. import { CometChat } from '@cometchat-pro/chat' import { sendMessage, getMessages } from '../cometChat' import { useEffect, useState } from 'react' import { useParams } from 'react-router-dom' import Header from '../components/Header'

const Chat = () => { const { receiverID } = useParams() const [message, setMessage] = useState('') const [messages, setMessages] = useState([])

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

const handleGetMessages = () => { getMessages(receiverID).then((msgs) => { setMessages(msgs) scrollToEnd() }) }

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

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

useEffect(() => { handleGetMessages() listenForMessage(receiverID) }, [receiverID])

return ( Chat

{messages.map((msg, i) => msg?.receiverId?.toLowerCase() != receiverID.toLowerCase() ? ( {msg.text}

) : ( {msg.text}

) )}

<input type="text" placeholder="Type Message..." className="px-3 py-8 placeholder-blueGray-300 text-blueGray-600 relative bg-green-100 rounded text-sm border border-blueGray-300 outline-none focus:outline-none focus:ring w-full flex-1 border-0" value={message} onChange={(e) => setMessage(e.target.value)} /> ) }

export default Chat Create a new file named and paste the codes below inside of it. The SignUp View SignUp.jsx import Header from '../components/Header' import Register from '../components/Register'

const SignUp = () => { return ( ) }

export default SignUp Let’s do the same for the SignIn view, create a new file called and paste the codes below inside of it. The SignIn View SignIn.jsx import Header from '../components/Header' import Login from '../components/Login'

const SignIn = () => { return ( ) }

export default SignIn Amazing, we’ve just added all the essential views in our application, let’s tidy up the rest of the code… The App.jsx File This is the first file that runs before every other view and component in our application. In your App.jsx file, paste the following codes inside of it. import { useEffect, useState } from 'react' import { Routes, Route } from 'react-router-dom' import { useGlobalState, setGlobalState, latestPrice } from './store' import { auth, onAuthStateChanged } from './firebase' import Product from './views/Product' import Home from './views/Home' import SignUp from './views/SignUp' import SignIn from './views/SignIn' import AuthGuard from './AuthGuard' import EditProduct from './views/EditProduct' import AddProduct from './views/AddProduct' import Cart from './views/Cart' import Chat from './views/Chat' import ChatList from './views/ChatList' import { loadWeb3 } from './shared/Freshers'

function App() { const [user, setUser] = useState(null) const [isLoaded, setIsLoaded] = useState(false) const [alert] = useGlobalState('alert')

useEffect(() => { loadWeb3() onAuthStateChanged(auth, (user) => { if (user) { setUser(user) setGlobalState('isLoggedIn', true) } else { setUser(null) setGlobalState('isLoggedIn', false) } setIsLoaded(true) }) latestPrice() }, [])

return ( {isLoaded ? ( <> {alert.show ? ( Alert! {alert.msg}! setGlobalState('alert', { show: false, msg: '' }) } className="absolute bg-transparent text-2xl font-semibold leading-none right-0 top-0 mt-2 mr-6 outline-none focus:outline-none" > × ) : null} } /> } /> } /> } /> } /> } /> } /> } /> } /> ) : null} ) }

export default App The AuthGuard.jsx File This file contains the logic for bouncing out unauthenticated users from accessing secured routes in our application. Create a new file in the folder and name it , then paste the following codes within it. src AuthGuard.jsx import { Navigate } from 'react-router-dom'

const AuthGuard = ({ user, children, redirectPath = '/signin' }) => { if (!user) { return }

return children }

export default AuthGuard The Index.jsx File Paste the following codes inside of the file and save… index.jsx import React from 'react' import ReactDOM from 'react-dom' import { BrowserRouter } from 'react-router-dom' import '@material-tailwind/react/tailwind.css' import { initCometChat } from './cometChat' import App from './App'

initCometChat().then(() => { ReactDOM.render( , document.getElementById('root') ) }) The Store Using the power of the react-hooks-global-state library, let's create a store to manage some of our global state variables. In the , >> create a file named and paste the codes below inside of it. src directory store index.jsx import { createGlobalState } from 'react-hooks-global-state'

const { setGlobalState, useGlobalState } = createGlobalState({ isLoggedIn: false, alert: { show: false, msg: '', color: '' }, cart: [], contract: null, connectedAccount: '', ethToUsd: 0, })

const setAlert = (msg, color = 'amber') => { setGlobalState('alert', { show: true, msg, color }) setTimeout(() => { setGlobalState('alert', { show: false, msg: '', color }) }, 5000) }

const latestPrice = async () => { await fetch( 'https://min-api.cryptocompare.com/data/price?fsym=ETH&tsyms=USD' ) .then((data) => data.json()) .then((res) => setGlobalState('ethToUsd', res.USD)) }

export { useGlobalState, setGlobalState, setAlert, latestPrice } The ABI Connector File Lastly, we have the file that serves as an interface between our smart contract’s Abi and the frontend. All the codes needed to interact with our smart contract are stored in this file, here is the code for it. fresher.jsx import Web3 from 'web3' import { setAlert, setGlobalState } from '../store' import Store from './abis/Store.json'

const { ethereum } = window

const getContract = async () => { const web3 = window.web3 const networkId = await web3.eth.net.getId() const networkData = Store.networks[networkId]

if (networkData) { const contract = new web3.eth.Contract(Store.abi, networkData.address) return contract } else { window.alert('Store contract not deployed to detected network.') } }

const payWithEthers = async (product) => { try { const web3 = window.web3 const seller = product.account const buyer = product.buyer const amount = web3.utils.toWei(product.price.toString(), 'ether') const purpose = `Sales of ${product.name}`

const contract = await getContract() await contract.methods .payNow(seller, purpose) .send({ from: buyer, value: amount }) return true } catch (error) { setAlert(error.message, 'red') } }

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) { setAlert(JSON.stringify(error), 'red') } }

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

window.web3 = new Web3(ethereum) await ethereum.enable()

window.web3 = new Web3(window.web3.currentProvider)

const web3 = window.web3 const accounts = await web3.eth.getAccounts() setGlobalState('connectedAccount', accounts[0]) } catch (error) { alert('Please connect your metamask wallet!') } }

export { loadWeb3, connectWallet, payWithEthers } Within this shared folder, we have another folder called that contained the generated ABI code for our deployed store. Truffle generated these codes for us when we deployed the smart contract in the of this article. abis PART-ONE Make sure you have included the file in the file, this is very important so you don’t expose your private keys online. .env .gitignore If that’s all taken care of, then you should know that you have completed this project. Congratulations!!! Conclusion Blockchain technology has come to stay, in this new world of smart contracts, DAO, NFTs, and DeFi applications, it is very important to arm yourself with blockchain development skills. Can’t wait to see you in the next article, check the and for more info. live demo GitHub repo Till next time, all the best! About the Author Gospel Darlington kick-started his journey as a software engineer in 2016. Over the years, he has grown full-blown skills in JavaScript stacks such as React, ReactNative, VueJs, and more. He is currently freelancing, building apps for clients, writing technical tutorials teaching others how to do what he does. Gospel Darlington is open and available to hear from you. You can reach him on , , , or on his . LinkedIn Facebook Github website