Wagmi + ReactJS Example: Transfer Crypto and Mint an NFT

In this tutorial, we’ll be learn how to build a Web 3 Dapp (Decentralized Application) that connects to your crypto wallet, allowing you to transfer funds and mint NFTs. We’ll be using Next.js, a popular React framework, and Wagmi.sh, a collection of React Hooks that easily integrates your wallet into your website.

Here’s an outline of the tutorial:

• Getting Started
• Part 1: Transferring Crypto with React + Wagmi
• Part 2: Minting an NFT with React + Wagmi

Authorship

This article was co-authored by Aymeric Taylor (LinkedIn, Twitter), a research intern at RareSkills.

Getting Started

For the sake of simplicity, we’ll be using “Polygon Mumbai” as our test network for this tutorial, It is also supported on OpenSea.

Connect your Wallet to Polygon Mumbai — MetaMask

Navigate through MetaMask → Settings → Advanced and make sure you allow Show test networks.

Next, click on the Network Selection on the top right section and select Add network