WAGMI React Hooks Makes Building Apps on Ethereum Easy

WAGMI React Hooks is a library built on ethers.js for interacting with Ethereum.

Ethers.js is a lightweight alternative to Web3.js to build a JavaScript frontend to interact with Ethereum or EVM compatible blockchains. The library has gained in popularity seeing increasing downloads and usage in Web3 projects.

Using React Hooks, which have been a part of React since v16.8, has become the most common approach to building React applications. Hooks result in writing less code and increase reusability, readability, and testability.

Now, thanks to Tom Meagher, we have the MIT licensed wagmi React Hooks library which brings together the best of ethers.js and React hooks. Tom is a developer at Mirror.xyz, a blockchain based publishing platform.

I created wagmi because web3-react and others are infrequently updated, difficult to use, and not tested.

@awkweb

Wagmi has 20+ hooks for working with wallets, ENS (Ethereum Name Service), contracts, transactions, signing, and more:

Wallets:

• useConnect
• useAccount
• useBalance
• useNetwork

ENS:

• useEnsLookup
• useEnsAvatar
• useEnsResolver

Contracts:

• useContractWrite
• useContractRead
• useContractEvent

Transactions:

• useTransaction
• useWaitForTransaction

It’s easy to get started with wagmi in your project. You simply wrap your app with the wagmi Provider component:

import { Provider } from 'wagmi'
const App = () => (
  <Provider>
    <YourRoutes />
  </Provider>
)

Every component inside the Provider component is set up with the default InjectedConnector for connecting to wallets and ethers.js Default Provider to fetch data.

Wagmi React Hooks has several advantages compared to other Ethereum React hooks libraries.

Web3-react requires you to set up connectors and methods for connecting wallets on your own, install all connectors separately, and doesn’t provide hooks for interacting with Ethereum.

useDApp is built on web3-react and uses a non-standard hook API and lacks TypeScript generics support.

Web3modal cannot be used headlessly and has no hooks for interacting with Ethereum, fetching information, etc.

Wagmi is TypeScript ready and addresses all of these issues with built-in wallet connectors for MetaMask, WalletConnect, and Coinbase Wallet, a full test suite, and extensive documentation. Wagmi also has no dependencies beyond ethers.js.

You are free to use whichever RPC you want by implementing a custom provider and connector.

Overall, wagmi React Hooks wagmi React Hooks library provides an easy way to build a Web3 dApp that interacts with the Ethereum ecosystem, without having to write a ton of code.

wagmi (GitHub)

Docs