• React
  • Hooks
  • useContractWrite

useContractWrite

Hook for calling a write method on a Contract.

This is a wrapper around viem's writeContract.

import { useContractWrite } from 'wagmi'

Usage

The following examples use the wagmigotchi contract.

import { useContractWrite, usePrepareContractWrite } from 'wagmi'
 
function App() {
  const { data, isLoading, isSuccess, write } = useContractWrite({
    address: '0xecb504d39723b0be0e3a9aa33d646642d1051ee1',
    abi: wagmigotchiABI,
    functionName: 'feed',
  })
 
  return (
    <div>
      <button onClick={() => write()}>Feed</button>
      {isLoading && <div>Check Wallet</div>}
      {isSuccess && <div>Transaction: {JSON.stringify(data)}</div>}
    </div>
  )
}
💡

It is highly recommended to pair useContractWrite with the usePrepareContractWrite hook to avoid UX pitfalls.

Dynamic Arguments

It is possible to pass through dynamic arguments through to write or writeAsync.

import { useContractWrite } from 'wagmi'
 
function App() {
  const { data, isLoading, isSuccess, write } = useContractWrite({
    address: '0xecb504d39723b0be0e3a9aa33d646642d1051ee1',
    abi: wagmigotchiABI,
    functionName: 'claim',
  })
 
  return (
    <div>
      <button
        disabled={!write}
        onClick={() =>
          write({
            args: [69],
            from: '0xA0Cf798816D4b9b9866b5330EEa46a18382f251e',
            value: parseEther('0.01'),
          })
        }
      >
        Claim
      </button>
      {isLoading && <div>Check Wallet</div>}
      {isSuccess && <div>Transaction: {JSON.stringify(data)}</div>}
    </div>
  )
}

Prepared Usage

import { useContractWrite, usePrepareContractWrite } from 'wagmi'
 
function App() {
  const { config } = usePrepareContractWrite({
    address: '0xecb504d39723b0be0e3a9aa33d646642d1051ee1',
    abi: wagmigotchiABI,
    functionName: 'feed',
  })
  const { data, isLoading, isSuccess, write } = useContractWrite(config)
 
  return (
    <div>
      <button disabled={!write} onClick={() => write?.()}>
        Feed
      </button>
      {isLoading && <div>Check Wallet</div>}
      {isSuccess && <div>Transaction: {JSON.stringify(data)}</div>}
    </div>
  )
}

Return Value

{
  data?: { hash: Hex }
  error?: Error
  isError: boolean
  isIdle: boolean
  isLoading: boolean
  isSuccess: boolean
  write: ((args?: WriteContractConfig) => void) | undefined
  writeAsync: ((args?: WriteContractConfig) => Promise<{ hash: Hex }>) | undefined
  reset: () => void
  status: 'idle' | 'error' | 'loading' | 'success'
}

Configuration

abi

Contract ABI.

By defining inline or adding a const assertion to abi, TypeScript will infer the correct types for functionName and args. See the wagmi TypeScript docs for more information.

import { useContractWrite } from 'wagmi'
 
function App() {
  const { write } = useContractWrite({
    address: '0xecb504d39723b0be0e3a9aa33d646642d1051ee1',
    abi: wagmigotchiABI,
    functionName: 'feed',
  })
}

functionName

Name of function to call.

import { useContractWrite } from 'wagmi'
 
function App() {
  const { write } = useContractWrite({
    address: '0xecb504d39723b0be0e3a9aa33d646642d1051ee1',
    abi: wagmigotchiABI,
    functionName: 'feed',
  })
}

address (optional)

Contract address.

import { useContractWrite } from 'wagmi'
 
function App() {
  const { write } = useContractWrite({
    address: '0xecb504d39723b0be0e3a9aa33d646642d1051ee1',
    abi: wagmigotchiABI,
    functionName: 'feed',
  })
}

chainId (optional)

Checks the current chain to make sure it is the same as chainId. If chainId is not the current chain, the Action will throw an error.

import { useContractWrite } from 'wagmi'
 
function App() {
  const { write } = useContractWrite({
    address: '0xecb504d39723b0be0e3a9aa33d646642d1051ee1',
    abi: wagmigotchiABI,
    functionName: 'feed',
    chainId: 1,
  })
}

args (optional)

Arguments to pass to function call.

import { useContractWrite } from 'wagmi'
 
function App() {
  const { write } = useContractWrite({
    address: '0xecb504d39723b0be0e3a9aa33d646642d1051ee1',
    abi: wagmigotchiABI,
    functionName: 'feed',
    args: [],
  })
}

account (optional)

The Account to write to the contract from.

import { useContractWrite } from 'wagmi'
 
function App() {
  const { write } = useContractWrite({
    address: '0xecb504d39723b0be0e3a9aa33d646642d1051ee1',
    abi: wagmigotchiABI,
    functionName: 'feed',
    account: '0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266',
  })
}

gas (optional)

Gas limit for transaction execution.

import { useContractWrite } from 'wagmi'
 
function App() {
  const { write } = useContractWrite({
    address: '0xecb504d39723b0be0e3a9aa33d646642d1051ee1',
    abi: wagmigotchiABI,
    functionName: 'feed',
    gas: 1_000_000n,
  })
}

gasPrice (optional)

The price (in wei) to pay per gas. Only applies to Legacy Transactions.

import { useContractWrite, parseGwei } from 'wagmi'
 
function App() {
  const { write } = useContractWrite({
    address: '0xecb504d39723b0be0e3a9aa33d646642d1051ee1',
    abi: wagmigotchiABI,
    functionName: 'feed',
    gasPrice: parseGwei('20'),
  })
}

maxFeePerGas (optional)

Total fee per gas (in wei), inclusive of maxPriorityFeePerGas. Only applies to EIP-1559 Transactions

import { useContractWrite, parseGwei } from 'wagmi'
 
function App() {
  const { write } = useContractWrite({
    address: '0xecb504d39723b0be0e3a9aa33d646642d1051ee1',
    abi: wagmigotchiABI,
    functionName: 'feed',
    maxFeePerGas: parseGwei('20'),
  })
}

maxPriorityFeePerGas (optional)

Max priority fee per gas (in wei). Only applies to EIP-1559 Transactions

import { useContractWrite, parseGwei } from 'wagmi'
 
function App() {
  const { write } = useContractWrite({
    address: '0xecb504d39723b0be0e3a9aa33d646642d1051ee1',
    abi: wagmigotchiABI,
    functionName: 'feed',
    maxPriorityFeePerGas: parseGwei('20'),
  })
}

nonce (optional)

Unique number identifying this transaction.

import { useContractWrite, parseGwei } from 'wagmi'
 
function App() {
  const { write } = useContractWrite({
    address: '0xecb504d39723b0be0e3a9aa33d646642d1051ee1',
    abi: wagmigotchiABI,
    functionName: 'feed',
    nonce: 69,
  })
}

value (optional)

Value in wei sent with this transaction.

import { useContractWrite, parseEther } from 'wagmi'
 
function App() {
  const { write } = useContractWrite({
    address: '0xecb504d39723b0be0e3a9aa33d646642d1051ee1',
    abi: wagmigotchiABI,
    functionName: 'feed',
    value: parseEther('0.1'),
  })
}

onError (optional)

Function to invoke when an error is thrown while attempting to write.

import { useContractWrite } from 'wagmi'
 
function App() {
  const { write } = useContractWrite({
    address: '0xecb504d39723b0be0e3a9aa33d646642d1051ee1',
    abi: wagmigotchiABI,
    functionName: 'feed',
    onError(error) {
      console.log('Error', error)
    },
  })
}

onMutate (optional)

Function fires before the contract write function and is passed same variables the contract write function would receive. Value returned from this function will be passed to both onError and onSettled functions in event of a failure.

import { useContractWrite } from 'wagmi'
 
function App() {
  const { write } = useContractWrite({
    address: '0xecb504d39723b0be0e3a9aa33d646642d1051ee1',
    abi: wagmigotchiABI,
    functionName: 'feed',
    onMutate({ args, overrides }) {
      console.log('Mutate', { args, overrides })
    },
  })
}

onSettled (optional)

Function to invoke when write is settled (either successfully sent, or an error has thrown).

import { useContractWrite } from 'wagmi'
 
function App() {
  const { write } = useContractWrite({
    address: '0xecb504d39723b0be0e3a9aa33d646642d1051ee1',
    abi: wagmigotchiABI,
    functionName: 'feed',
    onSettled(data, error) {
      console.log('Settled', { data, error })
    },
  })
}

onSuccess (optional)

Function to invoke when write is successful.

import { useContractWrite } from 'wagmi'
 
function App() {
  const { write } = useContractWrite({
    address: '0xecb504d39723b0be0e3a9aa33d646642d1051ee1',
    abi: wagmigotchiABI,
    functionName: 'feed',
    onSuccess(data) {
      console.log('Success', data)
    },
  })
}