React Hooks for Ethereum
- 🚀 20+ hooks for working with wallets, ENS, contracts, transactions, signing, etc.
- 💼 Built-in wallet connectors for MetaMask, WalletConnect, Coinbase Wallet, and Injected
- 👟 Caching, request deduplication, and persistence
- 🌀 Auto-refresh data on wallet, block, and network changes
- 🦄 TypeScript ready
- 🌳 Test suite running against forked Ethereum network
...and a lot more.
For full documentation and examples, visit wagmi.sh.
Install wagmi and its ethers peer dependency.
npm install wagmi ethers
Connect a wallet in under 60 seconds. LFG.
import { Provider, createClient } from 'wagmi'
const client = createClient()
function App() {
return (
<Provider client={client}>
<Profile />
</Provider>
)
}
import { useAccount, useConnect, useDisconnect } from 'wagmi'
import { InjectedConnector } from 'wagmi/connectors/injected'
function Profile() {
const { data } = useAccount()
const { connect } = useConnect({
connector: new InjectedConnector(),
})
const { disconnect } = useDisconnect()
if (data)
return (
<div>
Connected to {data.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 React Context Provider
. 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 the following places for more wagmi-related content:
- Join the discussions on GitHub
- Follow @awkweb and @wagmi_sh on Twitter for project updates
- Sign the guestbook
- Share your project/organization using wagmi
If you find wagmi useful, please consider supporting development. Thank you 🙏
If you're interested in contributing to wagmi, please read the contributing docs before submitting a pull request.
- awkweb.eth (@awkweb) – Mirror
- moxey.eth (@jakemoxey) – Rainbow
Thanks to julianhutton.eth (@julianjhutton) for providing the awesome logo!
WAGMIT License