Web3 Button

The Web3 Button component calls a function on your smart contract when clicked.

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

<Web3Button
  contractAddress="<your-smart-contract-address-here>"
  action={(contract) =>
    contract.erc721.mint({
      name: "Hello world!",
    })
  }
>
  Mint NFT
</Web3Button>;

It ensures the following before attempting to call the contract function:

1. There is a connected wallet (If there is not, renders a ConnectWalletButton component instead).
2. The connected wallet is on the correct network (as specified in the ThirdwebProvider's desiredChainId).

Example: Web3 Button

Props

Prop	Required	Description	Type
contractAddress	Required	The address of the smart contract to interact with	string
action	Required	Function to run when the button is pressed.	(contract) => any
contractAbi	Optional	Provide the ABI of the smart contract you want to interact with	object, string, or JSON
accentColor	Optional	The background color of the button	Hex Code
colorMode	Optional	Change the color of the text inside the button	light or dark
onSubmit	Optional	Run logic when the action is called	() => void
onSuccess	Optional	Run logic when the action function finishes successfully	(result) => void
onError	Optional	Run logic when the action function errors	(error) => void
isDisabled	Optional	Disable the button from being pressed	boolean

Examples

Basic

<Web3Button
  contractAddress="<your-smart-contract-address-here>"
  action={(contract) => console.log(contract)}
  colorMode="dark"
  accentColor="#ff0000"
>
  Print Contract from ABI
</Web3Button>

Using ABI

<Web3Button
  contractAddress="<your-smart-contract-address-here>"
  contractAbi={"<your-smart-contract-abi-here>"}
  action={(contract) => console.log(contract)}
  colorMode="dark"
  accentColor="#ff0000"
>
  Print Contract from ABI
</Web3Button>

Full Example

<Web3Button
  contractAddress="<your-smart-contract-address-here>"
  contractAbi={"<your-smart-contract-abi-here>"}
  action={(contract) => console.log(contract)}
  colorMode="dark"
  accentColor="#ff0000"
  onSubmit={() => console.log("Submitting")}
  onSuccess={(result) => console.log("Success", result)}
  onError={(error) => console.log("Error", error)}
  isDisabled={false}
>
  Web3Button
</Web3Button>