Web3 Button

Button that executes a function on a smart contract from the connected wallet when clicked.

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

1. There is a connected wallet (if there is not, renders a Connect Wallet Button instead).
2. The connected wallet is on the correct network as specified in the ThirdwebProvider's activeChain prop (if it is not, renders switch network button instead).

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

Usage

Render the Web3Button component with two required props to display the button:

1. contractAddress: The address of the smart contract to interact with.
2. action: The logic to execute when the button is clicked.

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

function App() {
  return (
    <Web3Button
      contractAddress="0x..." // Your smart contract address
      action={(contract) => console.log(contract)} // Logic to execute when clicked
    >
      Execute Action
    </Web3Button>
  );
}

Configuration

contractAddress (required)

The address of the smart contract to interact with.

If you have not imported your contract to the dashboard, you must additionally specify the contractAbi prop.

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

function App() {
  return (
    <Web3Button
      contractAddress="0x..."
      action={(contract) => console.log(contract)} // Logic to execute when clicked
    >
      Execute Action
    </Web3Button>
  );
}

action (required)

The logic to execute when the button is clicked.

The contract instance is available as the first argument of the function for you to interact with.

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

function App() {
  return (
    <Web3Button
      contractAddress="0x..."
      // For example, claim an NFT from this contract when the button is clicked
      action={(contract) => contract.erc721.claim(1)}
    >
      Claim NFT
    </Web3Button>
  );
}

theme (optional)

You can pass a custom theme object that will control the colors of the button or pass one of our default themes: light or dark. We also have convenient functions to get a dark or light theme: darkTheme() and lightTheme().

The default value is "dark".

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

function App() {
  return (
    <Web3Button
      contractAddress="0x..."
      action={(contract) => console.log(contract)} // Logic to execute when clicked
      theme="light"
    >
      Execute Action
    </Web3Button>>
  );
}

You could also define custom background and text color for the button:

import { Web3Button, lightTheme } from '@thirdweb-dev/react-native';

<Web3Button theme={lightTheme({
   buttonBackgroundColor: 'black',
   buttonTextColor: 'white'
})}
/>

contractAbi (optional)

The Application Binary Interface (ABI) of the contract.

This is only required if you have not imported your contract to the dashboard.

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

function App() {
  return (
    <Web3Button
      contractAddress="0x..."
      contractAbi={[{ ... }]}
      action={(contract) => console.log(contract)} // Logic to execute when clicked
    >
      Execute Action
    </Web3Button>
  );
}

overrides (optional)

The overrides to use when sending the transaction.

Includes options for overriding all transaction parameters including:

• value: The amount of wei to send with the transaction.
• gasLimit: The maximum amount of gas to use for the transaction.

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

function App() {
  return (
    <Web3Button
      contractAddress="0x..."
      action={(contract) => contract.erc721.claim(1)}
      overrides={{
        accessList: [], // The AccessList to include; only available for EIP-2930 and EIP-1559 transactions.
        blockTag: "latest", // A BlockTag specifies a specific block location in the Blockchain.
        ccipReadEnabled: false, // https://eips.ethereum.org/EIPS/eip-3668#use-of-ccip-read-for-transactions
        customData: {}, // The transaction data.
        from: "0x...", // The address this transaction is from.
        gasLimit: 100000, // The maximum amount of gas this transaction is permitted to use.
        gasPrice: 100000, // The price (in wei) per unit of gas this transaction will pay.
        maxFeePerGas: 100000, // The maximum price (in wei) per unit of gas this transaction will pay
        maxPriorityFeePerGas: 0, // The price (in wei) per unit of gas this transaction will allow in addition to the block's base fee
        nonce: 0, // The nonce used as part of the proof-of-work to mine this block.
        type: 0, // The EIP-2718 type of this transaction envelope, or undefined for to use the network default
        value: ethers.utils.parseEther("0.1"), // send 0.1 ether with the contract call
      }}
    >
      Execute Action
    </Web3Button>
  );
}

onSuccess (optional)

Callback function to be run when the contract method call is successful.

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

function App() {
  return (
    <Web3Button
      contractAddress="0x..."
      action={(contract) => console.log(contract)} // Logic to execute when clicked
      onSuccess={(result) => alert("Success!")}
    >
      Execute Action
    </Web3Button>
  );
}

onError (optional)

Callback function to be run when the contract method call fails.

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

function App() {
  return (
    <Web3Button
      contractAddress="0x..."
      action={(contract) => console.log(contract)} // Logic to execute when clicked
      onError={(error) => alert("Something went wrong!")}
    >
      Execute Action
    </Web3Button>
  );
}

onSubmit (optional)

Callback function to be run after the user has confirmed the transaction.

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

function App() {
  return (
    <Web3Button
      contractAddress="0x..."
      action={(contract) => console.log(contract)} // Logic to execute when clicked
      onSubmit={() => console.log("Transaction submitted")}
    >
      Execute Action
    </Web3Button>
  );
}

isDisabled (optional)

Option to disable the button.

By default, the button is disabled and shows a spinner icon while the transaction is executing.

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

function App() {
  return (
    <Web3Button
      contractAddress="0x..."
      action={(contract) => console.log(contract)} // Logic to execute when clicked
      isDisabled
    >
      Execute Action
    </Web3Button>
  );
}