Building a Classic Web3 NFT Minting Dapp With React and Solidity: Part 2

What you will be building, see the and for more info, don’t forget to star the project. live demo GitHub repo Introduction In of this tutorial, we coded the smart contract part of this application with Solidity, now it's time we merge it up with ReactJs. PART ONE If you haven’t checked of this tutorial, I recommend that you do that first before continuing with this second part. PART ONE If you’re getting value out of this tutorial and you want to go all-in with blockchain development then You can also contact me for lessons… Let’s jump in and start coding… Prerequisites You must have completed of this article in other to fully benefit from this part. If you haven’t, please quickly check , blockchain development is no child’s play. PART ONE PART ONE Building the Components Let’s start with building out the components one step at a time, make sure you follow the steps accurately… Like always, we’ll start with the header component, this is the normal flow of any website or application. The Header Component This was beautifully crafted with tailwind CSS using the gradients styling. It simply enables a user to connect a wallet address for minting. In the project, go to your components folder and create a new file called Header.jsx. Afterward, paste the codes below inside of it. import ethlogo from '../assets/ethlogo.png' import { connectWallet } from '../Adulam' import { useGlobalState } from '../store'

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

Explore Features Community

{connectedAccount ? null : ( Connect Wallet )} ) }

export default Header That will be it for the header, let’s work on the Hero component. The Hero Component This component is responsible for initiating the minting process as you can see with the mint button. Also, it takes a record of the total number of NFTs minted against the ones remaining. Here is the code snippet responsible for this operation… import avatar from '../assets/owner.jpg' import github from '../assets/github_icon.png' import facebook from '../assets/facebook_icon.png' import twitter from '../assets/twitter_icon.png' import linkedIn from '../assets/linkedIn_icon.png' import medium from '../assets/medium_icon.png' import { setAlert, useGlobalState, setGlobalState, setLoadingMsg, } from '../store' import { BASE_URI, payForArt } from '../Adulam'

const Hero = () => { const [connectedAccount] = useGlobalState('connectedAccount') const [maxSupply] = useGlobalState('maxSupply') const [nfts] = useGlobalState('nfts')

const mint = async () => { setGlobalState('loading', { show: true, msg: 'Retrieving IPFS data...' }) const nextTokenIndex = Number(nfts.length + 1)

fetch(`${BASE_URI + nextTokenIndex}.json`) .then((data) => data.json()) .then((res) => { setLoadingMsg('Intializing transaction...') payForArt({ ...res, buyer: connectedAccount }).then((result) => { if (result) { setGlobalState('loading', { show: false, msg: '' }) setAlert('Minting Successful...', 'green') window.location.reload() } }) }) .catch((error) => { setGlobalState('loading', { show: false, msg: '' }) console.log(error) }) }

return ( A.I Arts NFTs Collection

Mint and collect the hottest NFTs around.

Mint Now

0xf55...146a Daltonic

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 now blockchain.

{nfts.length}/{maxSupply} ) }

export default Hero Next on our list is the artworks component… The Artworks Component This component is saddled with the responsibility of rendering the artworks one after the other. The tailwind CSS came through here for helping us design a stunning interface. Let’s take a look at the codes responsible for these components’ behavior… import ethlogo from '../assets/ethlogo.png' import { useGlobalState } from '../store' import { BASE_URI } from '../Adulam'

const Artworks = () => { const [nfts] = useGlobalState('nfts')

const trucncate = (str, num = 20) => { if (str.length > num) { return str.slice(0, num) + "..." } else { return str } }

return ( Artworks

{nfts.map((nft) => ( <div key={nft.id} className={`relative shadow-xl shadow-black p-3 bg-white rounded-lg item w-64 h-64 object-contain bg-[url(${BASE_URI + nft.id}.webp)] bg-no-repeat bg-cover overflow-hidden mr-2 mb-2 cursor-pointer transition-all duration-75 delay-100 hover:shadow-[#bd255f]`} style={{backgroundImage: `url(${BASE_URI + nft.id}.webp)`}} > {nft.id}# {trucncate(nft.title)}

{nft.cost} ))}

Load more ) }

export default Artworks Let’s move on to adding the Footer component… The Footer Component If you appreciate good work, you will love this design. Tailwind CSS has enabled me to build beautiful components such as this. Hey, if you are interested, I could take you on a private teaching session on blockchain development, . kindly see my offers here Coming back to this build, this current component lightly features a signature display of site brand and logo, nothing much to this component, however, I needed to include it in this tutorial. Below is the code for it… import ethlogo from '../assets/ethlogo.png'

const Footer = () => ( Explore

Features

Community

export default Footer Fantastic, we are almost done with these components, let’s add up the last two… The Alert Component This component, as intuitive as it sounds is responsible for notifying us when our minting process is done. Again, it was handcrafted by the use of Tailwind CSS and some react Icons. Let’s take a look at the codes exhibiting its behavior… import { useGlobalState } from '../store' import { FaRegTimesCircle } from 'react-icons/fa' import { BsCheck2Circle } from 'react-icons/bs'

const Alert = () => { const [alert] = useGlobalState('alert')

return ( {alert.color == 'red' ? ( ) : ( )} {alert.msg}

) }

export default Alert Nice, let's complete these components by adding the Loader component into the mix. The Loader Component This component simply displays a spinner that also shows the current progress of the NFT as it is being minted. The state management library react-global-hooks manages the activities that occur under the hood here; more on this later. Here is the code for this component... import { useGlobalState } from '../store'

const Loading = () => { const [loading] = useGlobalState('loading')

return ( Minting...

{loading.msg} ) }

export default Loading Awesome, now that we’re done with coding the components, let’s dive into and couple them together. App.jsx The App Component This component is responsible for connecting all other components to be used in this project, let’s look at how it is coded. import Alert from './components/Alert' import Artworks from './components/Artworks' import Footer from './components/Footer' import Header from './components/Header' import Hero from './components/Hero' import Loading from './components/Loading' import { loadWeb3 } from './Adulam' import { useEffect } from 'react'

const App = () => { useEffect(() => loadWeb3(), [])

return ( ) }

export default App We are not quite done yet, let’s include other essential configurations. The Index Files Please make sure that your index.jsx and index.css are having the configurations as seen in the code snippet below. @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap');

* html { padding: 0; margin: 0; box-sizing: border-box; }

body { margin: 0; font-family: 'Open Sans', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.gradient-bg-hero { background-color: #131835; background-image: radial-gradient( at 0% 0%, hsl(231deg 47% 14%) 0%, transparent 50% ), radial-gradient(at 50% 0%, hsl(333deg 85% 53%) 0, transparent 50%), radial-gradient(at 100% 0%, hsla(339, 49%, 30%, 1) 0, transparent 50%); }

.gradient-bg-artworks { background-color: #0f0e13; background-image: radial-gradient( at 50% 50%, hsl(302deg 25% 18%) 0, transparent 50% ), radial-gradient(at 0% 0%, hsla(253, 16%, 7%, 1) 0, transparent 50%), radial-gradient(at 50% 50%, hsla(339, 39%, 25%, 1) 0, transparent 50%); }

.gradient-bg-footer { background-color: #131835; background-image: radial-gradient( at 20% 100%, hsl(333deg 85% 53%) 0, transparent 40% ), radial-gradient(at 50% 120%, hsla(339, 49%, 30%, 1) 0, transparent 40%); }

.text-gradient { background: -webkit-linear-gradient(#eee, #333); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.label-gradient { background: rgb(19, 24, 53); background: linear-gradient( 31deg, rgba(19, 24, 53, 1) 0%, rgba(237, 33, 124, 0) 100% ); }

.no-scrollbar::-webkit-scrollbar { display: none; }

.lds-dual-ring { display: inline-block; } .lds-dual-ring:after { content: ' '; display: block; width: 64px; height: 64px; margin: 8px; border-radius: 50%; border: 6px solid #fff; border-color: #fff transparent #fff transparent; animation: lds-dual-ring 1.2s linear infinite; } @keyframes lds-dual-ring { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

@tailwind base; @tailwind components; @tailwind utilities; import React from 'react' import ReactDOM from 'react-dom' import { BrowserRouter } from 'react-router-dom' import './index.css' import App from './App'

ReactDOM.render( , document.getElementById('root') ) Fantastic, are there two more important files you must be aware of, let’s look at them… The Adulam Blockchain Interface For you to interact with our deployed smart contract, you need to access it via functions. The codes below enable us to interact with our smart contract which is now running on a live blockchain network. Create a file named Adulam.jsx in the src folder of this project and paste the following codes into it. import Web3 from 'web3' import { setAlert, setGlobalState, getGlobalState, setLoadingMsg, } from './store' import Adulam from './abis/Adulam.json'

const { ethereum } = window const BASE_URI = 'https://bafybeidfpvjszubegtoomoknmc7zcqnay7noteadbwxktw46guhdeqohrm.ipfs.infura-ipfs.io/'

const payForArt = async (art) => { try { const web3 = window.web3 const buyer = art.buyer const title = art.title const description = art.description const cost = web3.utils.toWei('0.01', 'ether')

const contract = await getGlobalState('contract') setLoadingMsg('NFT minting in progress...')

await contract.methods .payToMint(title, description) .send({ from: buyer, value: cost })

setLoadingMsg('Minting successful...')

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])

const networkId = await web3.eth.net.getId() const networkData = Adulam.networks[networkId]

if (networkData) { const contract = new web3.eth.Contract(Adulam.abi, networkData.address) const nfts = await contract.methods.getAllNFTs().call()

setGlobalState('nfts', structuredNfts(nfts)) setGlobalState('contract', contract) } else { window.alert('Adulam contract not deployed to detected network.') } } catch (error) { alert('Please connect your metamask wallet!') } }

const structuredNfts = (nfts) => { const web3 = window.web3 return nfts .map((nft) => ({ id: nft.id, to: nft.to, from: nft.from, cost: web3.utils.fromWei(nft.cost), title: nft.title, description: nft.description, timestamp: nft.timestamp, })) .reverse() }

export { loadWeb3, connectWallet, payForArt, BASE_URI } This is such a handy function structure that you should consider using in your subsequent blockchain project. It keeps all the blockchain-related functions together and helps us keep our sanity. Next, let’s discuss how our little but not so little state management library is coordinating these entire activities behind the scene. The Statement Management Library We’re using the react-global-hook package for our state management. Setting up redux for a small project like this can be cumbersome, and why should you when you have an implementation so simple as the one below? Create a folder inside the directory called the store and also create a file named within it, now paste the codes below in the file and save. src index.jsx import { createGlobalState } from 'react-hooks-global-state'

const { setGlobalState, useGlobalState, getGlobalState } = createGlobalState({ alert: { show: false, msg: '', color: '' }, loading: { show: false, msg: '' }, contract: null, maxSupply: 100, connectedAccount: '', nfts: [], })

const setAlert = (msg, color = 'green') => { setGlobalState('alert', { show: true, msg, color }) setTimeout(() => { setGlobalState('alert', { show: false, msg: '', color }) setGlobalState('loading', false) }, 8000) }

const setLoadingMsg = (msg) => { const loading = getGlobalState('loading') setGlobalState('loading', { ...loading, msg }) }

export { useGlobalState, setGlobalState, getGlobalState, setAlert, setLoadingMsg, } We are almost done here… The ABIs folder and files Let me direct your attention to this folder which should not be empty by now… During of this article, we specified in to create these files in this folder whenever we compile a smart contract, that’s why we’re having that folder available to us. PART ONE truffle-config.js The Assets Files I must say that we’re just about done, except that we haven’t included the assets folder and files. Let’s quickly do that… Create a folder in the directory called , next, download and move the file below inside of it. src assets to the git repo to download the images. Use this link Now that we are done with all the builds, let’s start up the server to go live by running the command below on the terminal to do this! yarn start #starts the server on localhost:3000 Congratulations, you are officially done with this build… Conclusion You have seen another classic example of how to build a web3 application. I firmly believe that if you've been coding along with me, you are one of the blockchain armies the decentralized internet is looking for. I’m currently teaching blockchain development online, if you want to go deeper with this skill, You can reach me on my website. 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 now blockchain. He is currently freelancing, building apps for clients, and 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