React Hooks for Ethereum
You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
Go to file
github-actions[bot] 7e9785410e
chore: version packages (#3010)
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
1 week ago
.changeset chore: version packages (#3010) 1 week ago
.github chore: remove references 3 weeks ago
.vscode chore: swap eslint/prettier for rome (#2426) 4 months ago
docs removed optional from listen in watchBlockNumber (#2990) 2 weeks ago
examples chore: fix example 3 months ago
packages chore: version packages (#3010) 1 week ago
scripts chore: swap eslint/prettier for rome (#2426) 4 months ago
.gitignore feat: @wagmi/cli (#1732) 8 months ago
.npmrc feat: @wagmi/cli (#1732) 8 months ago
LICENSE chore: swap eslint/prettier for rome (#2426) 4 months ago
README.md chore: add sponsor 3 weeks ago
package.json chore: remove references 3 weeks ago
pnpm-lock.yaml feat: update WalletConnect dependencies (#3009) 1 week ago
pnpm-workspace.yaml chore: remove references 3 weeks ago
rome.json chore: swap eslint/prettier for rome (#2426) 4 months ago
tsconfig.json refactor: remove submodule (#2956) 3 weeks ago
vitest.config.ts feat: @wagmi/cli (#1732) 8 months ago

README.md

wagmi logo

React Hooks for Ethereum

Version MIT License Downloads per month Best of JS


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 viem peer dependency.

npm install wagmi viem

Quick Start

Connect a wallet in under 60 seconds. LFG.

import { WagmiConfig, createConfig, mainnet } from 'wagmi'
import { createPublicClient, http } from 'viem'

const config = createConfig({
  autoConnect: true,
  publicClient: createPublicClient({
    chain: mainnet,
    transport: http(),
  }),
})

function App() {
  return (
    <WagmiConfig config={config}>
      <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 config and pass it to the WagmiConfig React Context. The config is set up to use viem's Public Client 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 RainbowKit, 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 rollup.id logo pancake logo celo logo rainbow logo pimlico logo zora 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