James Bachini

WAGMI Tutorial | The Web3 React Framework


WAGMI is a set of Typescript React hooks for web3 which enables developers to connect to smart contracts on blockchain networks. In this tutorial we will look at how to install and setup a boilerplate in WAGMI and then build a simple read query.

WAGMI in 3 Mins [Video]

James On YouTube

How To Set Up WAGMI

You’ll need NodeJS installed from here: https://nodejs.org

Then let’s run the following commands in a new directory:

npm i wagmi viem
npm init wagmi

You’ll get a set of options to create a boilerplate for your project. In this example we will be using the Mint NFT Example

WAGMI Install

Once completed we can move into the new project directory and set up a live coding environment.

cd project-name
npm run dev

Building With WAGMI

What we can then do is right click and open in our code editor of choice, here I’m using vs code. Open up the editor and the URL http://localhost:3000 in a browser and when you make changes to the code they’ll be instantly updated in the browser.


If we start by opening up app/page.tsx we can change the text in the h1 tag to modify the page title.

From there we can go on to stylize the site or connect in other React/NextJS elements as the design requires.

Creating A WAGMI Component

Let’s add a new component to page.tsx, add in a new import and place it somewhere in the returned HTML:

import { NameNFT } from '../components/NameNFT'

... then in the return( section add the following:

<NameNFT />

We may get some errors initially because we haven’t created the component yet. So let’s go into ../components/ and create a new file called NameNFT.tsx

Code is available here: https://github.com/jamesbachini/wagmi-tutorial/blob/main/wagmi-tutorial/src/components/NameNFT.tsx

'use client'
import { useContractRead } from 'wagmi'
import { wagmiMintExampleABI } from '../generated'

export function NameNFT() {
  const {data:Name} = useContractRead({
    watch: false

  return (

So the first two lines import the useContractRead function from wagmi and an ABI (application binary interface) which is specific to the smart contract we are interacting with. The ABI acts like an instruction set for the smart contract and describes the function names, inputs and outputs that we can use. Fortunately we already have an ABI for this particular example contract in the ../generated.ts file so we will use that.

Next we care going to export the main NameNFT component and create a const value called Name. This will use the useContractRead WAGMI function to read the “name” function from the smart contract.

We pass in the address, abi, functionName and a boolean for watch which will update on changes.

Finally from within the NameNFT component function we return the formatted HTML with the {Name} variable inserted.

This will inject the Name of the NFT contract or any other onchain data you require into the web page.

To export our final code we can run the following command which will build the final project.

npm run build

Get The Blockchain Sector Newsletter, binge the YouTube channel and connect with me on Twitter

The Blockchain Sector newsletter goes out a few times a month when there is breaking news or interesting developments to discuss. All the content I produce is free, if you’d like to help please share this content on social media.

Thank you.

James Bachini

Disclaimer: Not a financial advisor, not financial advice. The content I create is to document my journey and for educational and entertainment purposes only. It is not under any circumstances investment advice. I am not an investment or trading professional and am learning myself while still making plenty of mistakes along the way. Any code published is experimental and not production ready to be used for financial transactions. Do your own research and do not play with funds you do not want to lose.



, , , ,