Getting Started
The wagmi command line interface manages ABIs (from Etherscan/block explorers, Foundry/Hardhat projects, etc.), generates code (React Hooks, VanillaJS actions, etc.), and much more. It makes working with Ethereum easier by automating manual work (e.g. no more copying and pasting ABIs from Etherscan). You can also write plugins to extend the CLI further.
Install wagmi cli
Install the @wagmi/cli
package to your project as a dev dependency.
npm i --save-dev @wagmi/cli
Create config file
Run the init
command to generate a configuration file: either wagmi.config.ts
if TypeScript is detected, otherwise wagmi.config.js
. You can also create the configuration file manually. See Configuration for more info.
npx wagmi init
The generated configuration file will look something like this:
import { defineConfig } from '@wagmi/cli'
export default defineConfig({
out: 'src/generated.ts',
contracts: [],
plugins: [],
})
Add contracts and plugins
Once the configuration file is set up, you can add contracts and plugins to it. These contracts and plugins are used to manage ABIs (fetch from block explorers, resolve from the file system, etc.), generate code (React hooks, type-safe JS actions, etc.), and much more!
For example, we can add the ERC20
contract from wagmi
, and the etherscan
and react
plugins.
import { defineConfig } from '@wagmi/cli'
import { etherscan, react } from '@wagmi/cli/plugins'
import { erc20ABI } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'
export default defineConfig({
out: 'src/generated.ts',
contracts: [
{
name: 'erc20',
abi: erc20ABI,
},
],
plugins: [
etherscan({
apiKey: process.env.ETHERSCAN_API_KEY!,
chainId: mainnet.id,
contracts: [
{
name: 'EnsRegistry',
address: {
[mainnet.id]: '0x314159265dd8dbb310642f98f50c066173c1259b',
[sepolia.id]: '0x112234455c3a32fd11230c42e7bccd4a84e02010',
},
},
],
}),
react(),
],
})
Run code generation
Now that we added a few contracts and plugins to the configuration file, we can run the generate
command to resolve ABIs and generate code to the out
file.
npx wagmi generate
In this example, the generate
command will do the following:
- Validate the
etherscan
andreact
plugins - Fetch and cache the ENS Registry ABI from the Mainnet Etherscan API
- Pull in the
erc20ABI
using the name'ERC20'
- Generate React Hooks for both ABIs
- Save ABIs, ENS Registry deployment addresses, and React Hooks to the
out
file
Use generated code
Once out
is created, you can start using the generated code in your project.
import { mainnet } from 'wagmi/chains'
import { useEnsRegistryContract, useErc20BalanceOfRead, useErc20Read } from './generated'
// Use the generated ENS Registry contract hook
const contract = useEnsRegistryContract({
chainId: mainnet.id,
})
// Use the generated ERC-20 read hook
const { data } = useErc20Read({
address: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
functionName: 'balanceOf',
args: ['0xA0Cf798816D4b9b9866b5330EEa46a18382f251e'],
})
// Use the generated ERC-20 "balanceOf" hook
const { data } = useErc20BalanceOfRead({
address: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
args: ['0xA0Cf798816D4b9b9866b5330EEa46a18382f251e'],
})
Instead of committing the out
file, you likely want to add out
to your
.gitignore
and run generate
during the build process or before you start
your dev server in a "predev"
script (or similar).
Want to learn more? Continue on reading the documentation.