useContractWrite

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

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

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(["My Name"])}
    >
      Send Transaction
    </Web3Button>
  );
}

Configuration

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(["My Name"])}
    >
      Send Transaction
    </Web3Button>
  );
}

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.

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.

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
          ["My Name"],
        )
      }
    >
      Send Transaction
    </Web3Button>
  );
}

Call Overrides (optional)

Override the default transaction options by providing an overrides object as the final argument in your arguments array.

import { useContractWrite, useContract, Web3Button } from "@thirdweb-dev/react";
import { ethers } 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([
          "My Name",
          {
            gasLimit: 1000000, // override default gas limit
            value: ethers.utils.parseEther("0.1"), // send 0.1 ether with the contract call
          },
        ])
      }
    >
      Send Transaction
    </Web3Button>
  );
}

export default App;