How to develop a simple dapp using React and Vagmi?

This article will focus on helping a developer interested in making a career in web3.0. My goal in this article is to help give a quick guide on some of the important steps involved when working on a decentralized web application. I’ll try not to be too clinical about the how-tos, however, so I’ll make sure I talk about the different parts of the project development.

summary

We will be working on a dapp developed using NextJ, TallywindCS, WAGMI Ethereum React Hooks and Solidity for smart contract development. Using Pexel’s free photos as our nfts, creating our metadata, and uploading both to Pinata. We will deploy our smart contract on the Ethereum GoReal testnet and view our mined NFTs on the Opacia testnet.

bad ideas

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

Work

Developing a simple ntf dapp to generate 10 pixel images on the GoReal testnet

steps involved

1. Setting up the Web3.0 MetaMask Browser Wallet

2. Financing of our MetaMask Wallet

3. Uploading Images and Metadata to Pinata IPFS Media Manager

4. Developing an ERC721 Smart Contract on Remix

5. Deploying Our Smart Contract on the Goeril Testnet

6. Developing a Simple Frontend Using Reactjs and Tailwindcss

7. Deploying Our Frontend Interface on Versailles

8. Connecting our wallet to the decentralized application

9. Integrating Smart Contracts into Our Decentralized Application

10. Testing Our Minting Function

1. Setting up the Web3.0 MetaMask Browser Wallet

Installing a MetaMask wallet or extension in the Web3.0 world 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 great wallet that provides everything we need to interact and grow our dapps.

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.

After you have set up your wallet the next step is to select the testnet network, in our case we will be using the Goeril testnet network.

2. Financing of our MetaMask Wallet

Several online tools help us with testing funds that we can use as we develop our projects.

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

picture description

Our wallet is funded with 0.25 test ETH!! I

picture description

Wow! Now we’re rich in the metaverse lol

3. Uploading Images and Metadata to Pinata IPFS Media Manager

picture description

Select the 10 images you like the most using Pexels. Download images to local folder and make sure you save photo contribution information as we

picture description

Once you have 10 images, rename them from 0 to 9. Next, open a text editor or programming IDE. This is where we will put together the necessary metadata for our smart contract. Let’s create 10 empty JSON files, starting with files 0 through 9.

picture description

Using the metadata guide from OpenC we will create metadata that will be associated with the 10 images we downloaded above.

picture description

Below is an example of a metadata file for the first NFT. Repeat this example for each 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’ll need to set up a free Pinata account to upload your images and metadata folders to IPFS.

First, upload the images folder and name it Pexels-NFT

picture description

picture description

picture description

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

picture description

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

picture description

Brilliant!! now the fun part begins

4. Developing an ERC721 Smart Contract on Remix

Using OpenZeppelin contracts we can quickly create a smart contract to shield our NFT!! Go to the OpenZeppelin Contract Wizard

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

picture description

Once you have a simple mining contract template, move on to remix it. Remix is ​​a good online IDE used to work with Solidity contracts.

picture description

Let’s copy our contract from OpenZeppelin wizard and put it in remix as shown below

picture description

Set up our Solidity compiler as shown below

picture description

  1. Deploying our smart contract on Goeril testnet

Next, we enforce our contract and make sure you change the environment variable Injected Web3 and select goeril test network wallet address

picture description

MetaMask will pop up for us to confirm contract deployment

picture description

You can verify the contract through the Etherscan Block Explorer or you can use the Remix validation plugin. In this case, we would use

picture description

  1. Setup an Etherscan Account and Create an API Key

picture description

  1. Go back to the Remix Validation Plugin and add the API Key we just created

picture description

  1. Verified!! Contract Address: 0xCDe88C6AD38aB5B6C980Fa22FC1f63f0Bf0bd8C3 You can see [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

Leave a Comment