/wagmi

React Hooks for Ethereum

Primary LanguageTypeScriptMIT LicenseMIT

wagmi logo

React Hooks for Ethereum

Version MIT License Downloads per month Best of JS


Note

wagmi is in the Gitcoin Grants Beta Round until May 9. Click here to support development. Thank you 🙏

Features

  • 🚀 20+ hooks for working with wallets, ENS, contracts, transactions, signing, etc.
  • 💼 Built-in wallet connectors for MetaMask, WalletConnect, Coinbase Wallet, Injected, and more
  • 👟 Caching, request deduplication, multicall, batching, and persistence
  • 🌀 Auto-refresh data on wallet, block, and network changes
  • 🦄 TypeScript ready (infer types from ABIs and EIP-712 Typed Data)
  • 📦 Command-line interface for managing ABIs and code generation
  • 🌳 Test suite running against forked Ethereum network

...and a lot more.

Documentation

For full documentation and examples, visit wagmi.sh.

Installation

Install wagmi and its ethers peer dependency.

npm install wagmi ethers@^5

Quick Start

Connect a wallet in under 60 seconds. LFG.

import { WagmiConfig, createClient } from 'wagmi'
import { getDefaultProvider } from 'ethers'

const client = createClient({
  autoConnect: true,
  provider: getDefaultProvider(),
})

function App() {
  return (
    <WagmiConfig client={client}>
      <Profile />
    </WagmiConfig>
  )
}
import { useAccount, useConnect, useDisconnect } from 'wagmi'
import { InjectedConnector } from 'wagmi/connectors/injected'

function Profile() {
  const { address } = useAccount()
  const { connect } = useConnect({
    connector: new InjectedConnector(),
  })
  const { disconnect } = useDisconnect()

  if (address)
    return (
      <div>
        Connected to {address}
        <button onClick={() => disconnect()}>Disconnect</button>
      </div>
    )
  return <button onClick={() => connect()}>Connect Wallet</button>
}

In this example, we create a wagmi Client and pass it to the WagmiConfig React Context. The client is set up to use the ethers Default Provider and automatically connect to previously connected wallets.

Next, we use the useConnect hook to connect an injected wallet (e.g. MetaMask) to the app. Finally, we show the connected account's address with useAccount and allow them to disconnect with useDisconnect.

We've only scratched the surface for what you can do with wagmi!

Check out ConnectKit or Web3Modal to get started with pre-built interface on top of wagmi for managing wallet connections.

Community

Check out the following places for more wagmi-related content:

Support

If you find wagmi useful, please consider supporting development. Thank you 🙏

Sponsors

paradigm logo
family logo context logo WalletConnect logo LooksRare logo PartyDAO logo Dynamic logo Sushi logo Stripe logo BitKeep logo Privy logo Spruce logo

Contributing

If you're interested in contributing, please read the contributing docs before submitting a pull request.

Authors

Thanks to julianhutton.eth (@julianjhutton) for providing the awesome logo!

License

MIT License


Powered by Vercel