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>
  );
}

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>
  );
}