Skip to main content

Wagmi Library

Wagmi

Wagmi is a React Hooks library for Ethereum. You can learn more about the rationale behind the project in the Why Wagmi section.

Installation

For new projects, it is recommended to set up your Wagmi app using the create-wagmi command line interface (CLI). This will create a new Wagmi project using TypeScript and install the required dependencies.

npm create wagmi@latest

Once the command runs, you'll see some prompts to complete.

Project name: wagmi-project
Select a framework: React / Vanilla

After the prompts, create-wagmi will create a directory with your project name and install the required dependencies.

cd wagmi-project/

5ireChain Configuration

For adding 5ireChain to the default code provided, we need to do some changes.

Inside the wagmi.ts file, let’s add 5ireChain’s Thunder Testnet. You can find it in the Chain section of Wagmi official documentation.

  • Import thunderTestnet from the wagmi’s chains.

import { thunderTestnet} from 'wagmi/chains'

  • Add injected connector to the connectors

injected(),

  • In the transports add thunderTestnet:

[[thunderTestnet.id](http://thundertestnet.id/)]: http(),

The final code would look like:

import { http, createConfig } from 'wagmi'
import { thunderTestnet} from 'wagmi/chains'
import { injected } from 'wagmi/connectors'

export const config = createConfig({
  chains: [ thunderTestnet],
  connectors: [
      injected(),
  ],
  ssr: true,
  transports: {
    [thunderTestnet.id]: http(),
  },
})

declare module 'wagmi' {
  interface Register {
    config: typeof config
  }
}

Install the required dependencies

  • To install the required dependencies
  npm install

Run the app in development mode

  • For running the app: 
  npm run dev