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

address (optional)

Contract address.

import { useContractWrite } from 'wagmi'
 
function App() {
  const { write } = useContractWrite({
    address: '0xecb504d39723b0be0e3a9aa33d646642d1051ee1',
    abi: wagmigotchiABI,
    functionName: 'feed',
  })
 
  return <button onClick={() => write()}>Feed</button>
}

chainId (optional)

Checks the current chain to make sure it is the same as chainId. If chainId is not the current chain, the connector attempts to switch to it before sending the transaction.

import { useContractWrite } from 'wagmi'
 
function App() {
  const { write } = useContractWrite({
    address: '0xecb504d39723b0be0e3a9aa33d646642d1051ee1',
    chainId: 1,
    abi: wagmigotchiABI,
    functionName: 'feed',
  })
 
  return <button onClick={() => write()}>Feed</button>
}

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',
  })
 
  return <button onClick={() => write()}>Feed</button>
}

functionName

Name of function to call.

import { useContractWrite } from 'wagmi'
 
function App() {
  const { write } = useContractWrite({
    address: '0xecb504d39723b0be0e3a9aa33d646642d1051ee1',
    abi: wagmigotchiABI,
    functionName: 'feed',
  })
 
  return <button onClick={() => write()}>Feed</button>
}

args (optional)

Arguments to pass to function call.

import { useContractWrite } from 'wagmi'
 
function App() {
  const { write } = useContractWrite({
    address: '0xecb504d39723b0be0e3a9aa33d646642d1051ee1',
    abi: wagmigotchiABI,
    functionName: 'feed',
    args: [],
  })
 
  return <button onClick={() => write()}>Feed</button>
}

overrides (optional)

Overrides to pass to function call. If the function is payable, you can pass a value here.

import { useContractWrite } from 'wagmi'
 
function App() {
  const { write } = useContractWrite({
    address: '0xecb504d39723b0be0e3a9aa33d646642d1051ee1',
    abi: wagmigotchiABI,
    functionName: 'feed',
    overrides: {
      from: '0xA0Cf798816D4b9b9866b5330EEa46a18382f251e',
      value: parseEther('0.01'),
    },
  })
 
  return <button onClick={() => write()}>Feed</button>
}

onError (optional)

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

import { usePrepareContractWrite, useContractWrite } from 'wagmi'
 
function App() {
  const { config } = usePrepareContractWrite({ ... })
  const { write } = useContractWrite({
    ...config,
    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 { usePrepareContractWrite, useContractWrite } from 'wagmi'
 
function App() {
  const { config } = usePrepareContractWrite({ ... })
  const { write } = useContractWrite({
    ...config,
    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 { usePrepareContractWrite, useContractWrite } from 'wagmi'
 
function App() {
  const { config } = usePrepareContractWrite({ ... })
  const { write } = useContractWrite({
    ...config,
    onSettled(data, error) {
      console.log('Settled', { data, error })
    },
  })
}

onSuccess (optional)

Function to invoke when write is successful.

import { usePrepareContractWrite, useContractWrite } from 'wagmi'
 
function App() {
  const { config } = usePrepareContractWrite({ ... })
  const { write } = useContractWrite({
    ...config,
    onSuccess(data) {
      console.log('Success', data)
    },
  })
}

useContractReads useDisconnect