• CLI
• Getting Started

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.

Installation

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.

npm run 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, goerli } 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',
            [goerli.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.

npm run wagmi generate

In this example, the generate command will do the following:

• Validate the etherscan and react 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'],
})

Want to learn more? Continue on reading the documentation.