React Hooks for Web3 Ethereum Developers

Hooks to connect wallet, cache the data, avoid duplication, interact with Contracts.

Youtube short

Web3 is growing rapidly

I am talking about Wagmi the collection of react hooks for Ethereum.

This library has 280K downloads per month but only one 3K github stars. Just one line of installation code.

yarn add wagmi ethers

Features

• 20+ hooks of collection for working with wallets, ENS, contracts, transactions, signing, etc.
• Connect it to the existing wallets.
• Provide built-in wallet connectors such as Coinbase, Metamask etc.
• Caching and request deduplication just like React Query
• Auto refresh data when network changes or accounts.
• Typescript support

This sounds good because when I started web3, I have to add these things manually mostly and have to develop these hooks on our own.

But this collection of hooks will certainly help a lot to the developers.

Installation

• Just one of the codes to install the package and its dependency.
• Create the client using providers and chain networks.
• Pass the client to the Wagmi Provider and wrap the provider with the root of the application just like Redux and third-party libraries.

Client

Manage wallet connection states such as auto-connection, ethers providers and connectors.

WagmiConfig

You can consider it as the Provider. It uses React Context to manage all the hooks configurations together.

Meaning letting all the hooks have the same centralised data or client configurations.

Providers

Add compatibility with different chains such as Infura, and Alchemy.

Connectors

Provide Injectors to support the wallet by providing an Ethereum provider in the browser. Helps to easily provide wallet connectivity in your application such as Metamask, Coinbase etc.

Hooks

The reusable functions provide all the features that wagmi supports out of the box to ease the development process.

Such as useAccount hook helps to get the connected user account details such as an address, balance and so on.

Competitors

Web-3-react

useDapp

Web3Modal

Conclusion

I will cover another story with an in-depth understanding of the hooks provided by it.

Until next time, have a good day.

Keep developing
Shrey
iHateReading