DEV Community 👩‍💻👨‍💻

Cover image for How to develop a Simple Dapp using React and Wagmi
CyprianTinasheAarons
CyprianTinasheAarons

Posted on

How to develop a Simple Dapp using React and Wagmi

Introduction 🥳

This article will be focused on helping a developer interested in a career in web3.0. My Goal in this article is to help give a quick guide on some of the key steps involved when you are working on a decentralized web application. I will try not to be too clinical about the how-to, however, I will make sure I talk about the different parts of the project development.

Summary

We will be working on a Dapp developed using Nextjs, Tailiwindcss, WAGMI Ethereum react hooks and solidity for smart contract development. Using Pexel 's free photos as our nfts, creating our metadata, and uploading both on Pinata. We will deploy our smart contract on Ethereum Goeril Testnet and view our minted NFTs on the Opeasea testnet.

Wicked Assumptions

  1. You have basic knowledge of most parts that make up a Web3.0 project.
  2. You have some reactJs development skills
  3. Own a computer and connected to the internet

Task

Developing a simple NTF Dapp to mint 10 pexels images on Goeril Testnet

Steps Involved

1. Setting up a web3.0 Metamask Browser Wallet

2. Funding our Metamask Wallet

3. Uploading Images and Metadata on Pinata IPFS Media Manager

4. Developing an ERC721 smart Contract on Remix

5. Deploying our Smart Contract on Goeril Testnet

6. Developing a Simple Frontend using Reactjs and Tailwindcss

7. Deploying our Frontend Interface on Vercel

8. Connecting our Wallet to the decentralized application

9. Integrating the Smart Contract into our Decentralized application

10. Testing our Minting function

1. Setting up a web3.0 Metamask Browser Wallet

In the Web3.0 world installing a metamask wallet or extension is like the "Hello World" of the Web2.0 Space.

Let's install our Metamask browser extension which you can download on the service's website metamask.io. Metamask is a cool wallet that provides us with everything we need when interacting and developing our dapp.

Image description

Once you have installed the extension on your browser the next step is to set it up which is pretty straightforward and you are guided by the platform through the process.

When you are done setting up your wallet the next step is to select the testnet network in our case we will be using Goeril Testnet Network.

 2. Funding our Metamask Wallet

Multiple online tools help us with test funds we can use when developing our project.

We can add funds to our public wallet address by receiving funds from the website of our choice. We will be working with the Alchemy Goeril Faucet Tool.

Image description

Our Wallet has been Funded with 0.25 Test ETH!! 💰💰💰

Image description

Yay! We are now rich in the metaverse lol

3. Uploading Images and Metadata on Pinata IPFS Media Manager

Image description

Using Pexels select 10 images you like the most. Download the images into a local folder and make sure you save the photo contribution information as we

Image description

Once you have 10 images rename them starting from 0 to 9. Next, let's open a text editor or programming IDE This is where we will put together the metadata required by our smart contract. Let's Create 10 empty JSON files starting from 0 to 9 files.

Image description

Next using the Metadata guide from Opensea we will create the metadata that will be linked to the 10 images we downloaded above.

Image description

Below is an example of the metadata file for the first NFT. Replicate this example for each one of the JSON files


{
"description": "Art Summer Architecture High",
"external_url": "https://www.pexels.com/photo/art-summer-architecture-high-13618532/",
"image": "ipfs://{PINATA_IMAGE_FOLDER_CID}/0.jpeg",
"name": "Image #0",
"attributes": [
{
"trait_type": "Source",
"value": "https://www.pexels.com/photo/art-summer-architecture-high-13618532/"
},
{
"trait_type": "Owner",
"value": "Photo by Hatice Baran"
}
]
}

Next, you will need to set up a free Pinata Account to upload your images and metadata folder onto IPFS.

Firstly, let's upload the images folder and name it Pexels-NFT

Image description

Image description

Image description

Once the Images folder is uploaded the next step will be replacing the placeholder {PINATA_IMAGE_FOLDER_CID} in each JSON file with the correct CID as shown below

Image description

After we are done with our metadata JSON folder we can upload it and take note of the CID

Image description

Awesome!! Now the fun parts begin 😀😀

 4. Developing an ERC721 smart Contract on Remix

Using OpenZeppelin Contracts we can quickly put together a smart contract to mint our NFTs !! Go to OpenZeppelin Contract Wizard

As the image below shows, we selected an ERC721 contract and picked some features for our contract.

Image description

Once you have a simple minting contract template let's take it to Remix. Remix is a cool online IDE used to work with Solidity contracts.

Image description

Let's copy our contract from openzepplin wizard and place it into remix as shown below

Image description

Set up our solidity compiler as shown below

Image description

  1. Deploying our Smart Contract on Goeril Testnet

Next, we deploy our contract and make sure you change the Environment variable to Injected Web3 and select the Goeril Test network wallet address

Image description

Metamask will pop up for us to confirm the contract deployment

Image description

You can verify the contract via etherscan block explorer or you can use the Remix verification plugin. In this case, that's what we will use

Image description

  1. Setup an Etherscan account and create an API key

Image description

  1. Go back to Remix verification plugin and add the API Key we created

Image description

  1. VERIFIED!! Contract Address: 0xCDe88C6AD38aB5B6C980Fa22FC1f63f0Bf0bd8C3 you can check on [Goerli Etherscan(https://goerli.etherscan.io/address/0xcde88c6ad38ab5b6c980fa22fc1f63f0bf0bd8c3)

Image description

6. Developing a Simple Frontend using Reactjs and Tailwindcss

We will work with Nextjs and install Tailwindcss, and Headlessui among other tools for the project.

Checkout the official website for Nextjs and set up a Nextjs project using the command below:

npx create-next-app@latest

Image description

Next, we set up Tailwind for Nextjs by taking the steps highlighted in the official guide Tailwindcss For Nextjs Setup

Image description

Lastly, Develop a simple one-page website and add the repo on GitHub.

You can check out the Pexels NFT Repo Here

Folder Structure

Image description

User Interface design

Image description

7. Deploying our Frontend Interface on Vercel

Set up a Vercel account and connect it to your GitHub account

And once connected let's add the repo with the project and deploy the project.

Image description

Image description

Image description

Yay! Finally, we can view our newly deployed website on Pexels Website Link

8. Connecting our Wallet to the decentralized application

Next step let's add the Wallets using WAGMI

npm i wagmi ethers

Image description

Let's make use of the WAGMI Connect Wallet Example and by following the 3 steps highlighted in the example we can put together the wallet connection feature.

Image description

9. Integrating the Smart Contract into our Decentralized application

Using react useContract and useSigner WAGMI react hooks we can connect our dapp to the contract read and write functions.

Below is a snippet example :

import { useContract } from 'wagmi' 
import contractABI from '../abi/abi.json'

const contractAddress = '0xCDe88C6AD38aB5B6C980Fa22FC1f63f0Bf0bd8C3'

function App() {
  const mainContract = useContract({
    addressOrName: contractAddress,
    contractInterface: contractABI,
  })
};
Enter fullscreen mode Exit fullscreen mode

Image description

Once we have successfully intergrated the web3.0 elements to the website we can go ahead and set a mint function.

const mint = async () => {
    setMinting(true);
    const tx = await mainContract.safeMint(address);
    await tx.wait();
    setMinting(false);
    setMinted(true);
  };
Enter fullscreen mode Exit fullscreen mode

10. Testing our Minting function

We can go ahead and click the mint button to test our minting function.

Image description

Image description

Image description

Yay! We have a Successful Transaction and we can view our mint on testnet Opensea

Image description

Conclusion 🚀🚀🚀

I hope my article helps you get started with Web3.0 development and start getting paid. And if so please react to it, share it, and let us make it go viral lol😂

Focus and Consistency will help you make all your career goals come through keep learning and working hard.

Thank you for reading this -Follow me on Twitter

Checkout my website

Top comments (0)

Every Week

We have a Welcome Thread where we invite members to tell us a bit about themselves. Join the conversation with us!