What is wagmi?
The wagmi npm package is a collection of React Hooks for Ethereum, designed to make it easier to work with Ethereum-based applications. It provides a set of tools to manage wallet connections, interact with smart contracts, and handle blockchain data in a React environment.
What are wagmi's main functionalities?
Wallet Connection
This feature allows users to connect and disconnect their Ethereum wallets. It provides hooks to manage the wallet connection state and handle different wallet connectors.
import { useAccount, useConnect, useDisconnect } from 'wagmi';
function Wallet() {
const { address, isConnected } = useAccount();
const { connect, connectors } = useConnect();
const { disconnect } = useDisconnect();
return (
<div>
{isConnected ? (
<div>
<p>Connected to {address}</p>
<button onClick={() => disconnect()}>Disconnect</button>
</div>
) : (
<div>
{connectors.map((connector) => (
<button key={connector.id} onClick={() => connect(connector)}>
Connect with {connector.name}
</button>
))}
</div>
)}
</div>
);
}
Smart Contract Interaction
This feature allows users to read from and write to smart contracts. It provides hooks to interact with smart contract functions and manage the state of these interactions.
import { useContractRead, useContractWrite } from 'wagmi';
const contractConfig = {
addressOrName: '0xContractAddress',
contractInterface: ContractABI,
};
function ContractInteraction() {
const { data: balance } = useContractRead({ ...contractConfig, functionName: 'balanceOf', args: ['0xAddress'] });
const { write: transfer } = useContractWrite({ ...contractConfig, functionName: 'transfer', args: ['0xRecipient', 100] });
return (
<div>
<p>Balance: {balance?.toString()}</p>
<button onClick={() => transfer()}>Transfer</button>
</div>
);
}
Blockchain Data
This feature allows users to access blockchain data such as the current block number and the connected network. It provides hooks to fetch and display this data in a React component.
import { useBlockNumber, useNetwork } from 'wagmi';
function BlockchainData() {
const { data: blockNumber } = useBlockNumber();
const { chain } = useNetwork();
return (
<div>
<p>Current Block Number: {blockNumber}</p>
<p>Connected Network: {chain?.name}</p>
</div>
);
}
Other packages similar to wagmi
web3-react
web3-react is a library for managing Ethereum wallet connections in React applications. It provides hooks for connecting to wallets, handling network changes, and interacting with smart contracts. Compared to wagmi, web3-react is more focused on wallet connection management and less on providing a comprehensive set of hooks for various blockchain interactions.
ethers.js
ethers.js is a library for interacting with the Ethereum blockchain and its ecosystem. It provides utilities for connecting to Ethereum nodes, interacting with smart contracts, and managing wallets. While ethers.js is not React-specific, it can be used in conjunction with React to achieve similar functionalities as wagmi.
wagmi
React Hooks for Ethereum
Features
- 🚀 20+ hooks for working with wallets, ENS, contracts, transactions, signing, etc.
- 💼 Built-in wallet connectors for MetaMask, WalletConnect, and Coinbase Wallet
- 👟 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.
Documentation
For full documentation and examples, visit wagmi.sh.
Installation
Install wagmi and its ethers peer dependency.
npm install wagmi ethers
Quick Start
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 { connectors, connect } = useConnect({
connector: new InjectedConnector(),
})
const { disconnect } = useDisconnect()
if (data?.address)
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
(using the default configuration) and pass it to the React Context Provider
. Next, we use the useConnect
hook to connect an injected wallet (i.e. 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:
Support
Help support future development and make wagmi a sustainable open-source project:
Contributing
If you're interested in contributing to wagmi, please read the contributing docs before submitting a pull request.
License
The MIT License.
wagmi frens