useGrantRole

Hook for granting a role on a smart contract.

Available to use on smart contracts that implement the Permissions interface.

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

Usage

Provide your contract from the useContract as the argument.

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

// Your smart contract address
const contractAddress = "{{contract_address}}";
const roleToGrant = "{{role}}";
const walletAddressToGrant = "{{wallet_address}}";

function App() {
  const { contract } = useContract(contractAddress);
  const { mutateAsync: grantRole, isLoading, error } = useGrantRole(contract);

  return (
    <Web3Button
      contractAddress={contractAddress}
      action={() =>
        grantRole({
          role: roleToGrant, // name of your role.
          address: walletAddressToGrant, // address to grant the role to.
        })
      }
    >
      Grant Role
    </Web3Button>
  );
}

Configuration

role (required)

The name of the role to grant the address.

Accepts any string value to include custom-defined roles.

Also accepts the default roles available on the prebuilt contracts:

string |
  "admin" |
  "minter" |
  "transfer" |
  "lister" |
  "asset" |
  "unwrap" |
  "pauser" |
  "factory";

address (required)

The address to grant the role to.

To use the address of the connected wallet, use the useAddress hook.

import {
  useGrantRole,
  useContract,
  Web3Button,
  useAddress,
} from "@thirdweb-dev/react";

// Your smart contract address
const contractAddress = "{{contract_address}}";
// name of your role.
const roleToGrant = "{{role}}";

function App() {
  const address = useAddress();
  const { contract } = useContract(contractAddress);
  const { mutateAsync: grantRole, isLoading, error } = useGrantRole(contract);

  return (
    <Web3Button
      contractAddress={contractAddress}
      action={() =>
        grantRole({
          role: roleToGrant,
          address: address,
        })
      }
    >
      Grant Role
    </Web3Button>
  );
}