jason-wagmi
v0.0.1
Published
<p align="center"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/wevm/wagmi/main/.github/logo-dark.svg"> <img alt="wagmi logo" src="https://raw.githubusercontent.com/wevm/wagmi/main/.github/logo
Downloads
2
Readme
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:
- Join the discussions on GitHub
- Follow @wevm_dev on Twitter for project updates
- Share your project/organization using wagmi
- Browse the awesome-wagmi list of awesome projects and resources
Support
If you find wagmi useful, please consider supporting development. Thank you 🙏
Sponsors
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