Generated Hooks

When you run w3m generate, the codegen pipeline creates typed React hooks for every contract in your project. These hooks are generated by the hook-generator plugin in @web3marketlabs/codegen and provide fully-typed wrappers around Wagmi’s contract hooks.

Naming Convention

For each contract, two types of hooks are generated:

• useRead{ContractName}{FunctionName}() — for view and pure functions (read state without modifying it)
• useWrite{ContractName}{FunctionName}() — for nonpayable and payable functions (modify on-chain state)

The function name is capitalized (first letter uppercased) when appended to the hook name. For example, a function named balanceOf on a contract named Token produces useReadTokenBalanceOf.

Under the Hood

• Read hooks use Wagmi’s useReadContract. They accept an optional options parameter with an enabled flag to control when the query runs.
• Write hooks use Wagmi’s useWriteContract. They return a write function that triggers the transaction, along with all other properties from useWriteContract (e.g., isPending, isError, data).
• Type mapping — Solidity types are mapped to TypeScript types:
  • address becomes `0x${string}`
  • bool becomes boolean
  • string becomes string
  • bytes and bytesN become `0x${string}`
  • uint* and int* become bigint
  • Arrays become readonly T[]
  • Tuples with named components become typed objects

Example

For an ERC-20 Token contract named Token, the following hooks would be generated:

Read hooks

// View/pure functions
useReadTokenName()
useReadTokenSymbol()
useReadTokenDecimals()
useReadTokenTotalSupply()
useReadTokenBalanceOf({ account: '0x...' })
useReadTokenAllowance({ owner: '0x...', spender: '0x...' })

Write hooks

// State-mutating functions
useWriteTokenTransfer()
useWriteTokenApprove()
useWriteTokenTransferFrom()
useWriteTokenMint()       // if the contract has a mint function
useWriteTokenBurn()       // if the contract has a burn function

Usage

import {
  useReadTokenBalanceOf,
  useWriteTokenTransfer,
} from '../generated/hooks/useToken'
 
function TokenBalance({ address }: { address: `0x${string}` }) {
  const { data: balance } = useReadTokenBalanceOf({ account: address })
  const { write: transfer, isPending } = useWriteTokenTransfer()
 
  return (
    <div>
      <p>Balance: {balance?.toString()}</p>
      <button
        onClick={() => transfer()}
        disabled={isPending}
      >
        Transfer
      </button>
    </div>
  )
}

Generated File Structure

The codegen pipeline writes files to the directory configured by codegen.outDir in your kit.config.ts (default: src/generated):

src/generated/
  abis/
    Token.ts          # Exported ABI constant
  hooks/
    useToken.ts       # Read and write hooks for Token contract

Each hooks file imports its contract ABI from the abis/ directory and exports individual hook functions.

Generated File Header

All generated files include a header comment:

// ============================================================
// THIS FILE IS AUTO-GENERATED BY @web3marketlabs/codegen
// DO NOT EDIT THIS FILE MANUALLY
// ============================================================

Read Hook Signature

Generated read hooks accept the function’s ABI inputs as a typed arguments object, plus an optional options parameter:

function useReadTokenBalanceOf(
  args: { account: `0x${string}` },
  options?: { enabled?: boolean }
): ReturnType<typeof useReadContract>

Write Hook Signature

Generated write hooks accept the function’s ABI inputs as a typed arguments object and return a write function plus the rest of useWriteContract’s return value:

function useWriteTokenTransfer(args: {
  to: `0x${string}`
  amount: bigint
}): {
  write: () => void
  isPending: boolean
  isError: boolean
  // ...rest of useWriteContract return
}

Triggering Code Generation

Run the codegen pipeline with:

w3m generate

Or use the alias:

w3m generate

This compiles your Solidity contracts (if using Foundry), resolves the ABI artifacts, and runs all codegen plugins including the hook generator.