Skip to main content

Web3 Button

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

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).

Below is an example of the button before and after the user connects their wallet:

How To Use It

Pass in the contractAddress and an action to call where you can access your contract directly.

In the below example, we mint an NFT on our contract inside the action:

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

<Web3Button
// The contract address
contractAddress="0x424037abd63d32595bD843791ab015C31c87Cb6d"
// Access the contract itself, perform any action you want on it:
action={(contract) =>
contract.erc721.mint({
name: "Hello world!",
// This way, you get the benefits of the SDK
// Image can be of type File, or any url that points to a file.
image: "ipfs://Qmf9csTfndWRgH2z35WUBm9jTuQKfSv1dJC9YKW6iTZkDP/0",
description: "Your awesome NFT",
})
}
// If the function succeeds, we can do something here.
onSuccess={(result) => console.log(result)}
// If the function fails, we can do something here.
onError={(error) => console.error(error)}
>
Mint NFT
</Web3Button>;