useContractWrite

Generic hook for calling any smart contract function that requires a transaction to take place.

import { useContractWrite } from "@thirdweb-dev/react";

const { mutateAsync, isLoading, error } = useContractWrite(contract, "setName");

Usage

Provide your smart contract instance returned from the useContract hook, along with the name of the function you wish to call on your smart contract as arguments to the hook.

Then call the mutate or mutateAsync function returned by the hook, providing an array of arguments to send to your smart contract function.

import { useContractWrite, useContract, Web3Button } from "@thirdweb-dev/react";

// Your smart contract address
const contractAddress = "{{contract_address}}";

function App() {
  const { contract } = useContract(contractAddress);
  const { mutateAsync, isLoading, error } = useContractWrite(
    contract,
    "setName",
  );

  return (
    <Web3Button
      contractAddress={contractAddress}
      // Calls the "setName" function on your smart contract with "My Name" as the first argument
      action={() => mutateAsync({ args: ["My Name"] })}
    >
      Send Transaction
    </Web3Button>
  );
}

Generate

If you have cached the ABI of your smart contract using thirdweb generate, the functionName and args parameters are strongly typed according to your smart contract’s ABI.

Configuration

Function Name

Function Name

Provide the name of the contract function as the second argument.

For example, if your smart contract has a function called setName, you would provide setName as the second argument to the hook.

import { useContractWrite, useContract, Web3Button } from "@thirdweb-dev/react";

// Your smart contract address
const contractAddress = "{{contract_address}}";

function App() {
  const { contract } = useContract(contractAddress);
  const { mutateAsync, isLoading, error } = useContractWrite(
    contract,
    "setName",
  );

  return (
    <Web3Button
      contractAddress={contractAddress}
      action={() =>
        mutateAsync({
          args: ["My Name"],
        })
      }
    >
      Send Transaction
    </Web3Button>
  );
}

Arguments

Arguments

If your smart contract function requires arguments, you can provide them as arguments in the mutate or mutateAsync function that is returned by the hook.

For example, if your smart contract has a function called setName that requires a string as an argument, you would provide ["My Name"] as the arguments to the mutate or mutateAsync function by calling the function with { args: ["My Name"] }

If you provide too many or too few arguments, the error property will be populated with an error message.

If your function has no arguments, provide an empty array by calling the function with { args: [] }

import { useContractWrite, useContract, Web3Button } from "@thirdweb-dev/react";

// Your smart contract address
const contractAddress = "{{contract_address}}";

function App() {
  const { contract } = useContract(contractAddress);
  const { mutateAsync, isLoading, error } = useContractWrite(
    contract,
    "setName",
  );

  return (
    <Web3Button
      contractAddress={contractAddress}
      action={() =>
        mutateAsync({
          // Place your arguments here in an array, in the same order as your smart contract function
          args: ["My Name"],
        })
      }
    >
      Send Transaction
    </Web3Button>
  );
}

Call Overrides

Call Overrides (optional)

Override the default transaction options by providing overrides object

import { useContractWrite, useContract, Web3Button } from "@thirdweb-dev/react";
import { utils } from "ethers";

// Your smart contract address
const contractAddress = "{{contract_address}}";

function App() {
  const { contract } = useContract(contractAddress);
  const { mutateAsync, isLoading, error } = useContractWrite(
    contract,
    "setName",
  );

  return (
    <Web3Button
      contractAddress={contractAddress}
      action={() =>
        mutateAsync({
          args: ["My Name"],
          overrides: {
            gasLimit: 1000000, // override default gas limit
            value: utils.parseEther("0.1"), // send 0.1 native token with the contract call
          },
        })
      }
    >
      Send Transaction
    </Web3Button>
  );
}

export default App;