useClaimToken

Hook for claiming a ERC20 tokens from a smart contract.

Available to use on smart contracts that implement both the ERC20 interface and the claim function, such as the Token Drop.

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

const { mutateAsync, isLoading, error } = useClaimToken(contract);

Usage

Provide your token contract as the argument to the hook.

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

// Your smart contract address
const contractAddress = "{{contract_address}}";

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

  return (
    <Web3Button
      contractAddress={contractAddress}
      action={() =>
        claimToken({
          to: "{{wallet_address}}", // Use useAddress hook to get current wallet address
          amount: 100, // Amount of token to claim
        })
      }
    >
      Claim Token
    </Web3Button>
  );
}

Parameters

to (required)

to (required)

Likely, you will want to claim the token to the currently connected wallet address.

You can use the useAddress hook to get this value.

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

// Your smart contract address
const contractAddress = "{{contract_address}}";

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

  return (
    <Web3Button
      contractAddress={contractAddress}
      action={() =>
        claimToken({
          to: address, // Use useAddress hook to get current wallet address
          amount: 100, // Amount of token to claim
        })
      }
    >
      Claim Token
    </Web3Button>
  );
}

amount (required)

amount (required)

The amount of tokens to be claimed.

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

// Your smart contract address
const contractAddress = "{{contract_address}}";

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

  return (
    <Web3Button
      contractAddress={contractAddress}
      action={() =>
        claimToken({
          to: "{{wallet_address}}", // Use useAddress hook to get current wallet address
          amount: 100, // Amount of token to claim
        })
      }
    >
      Claim Token
    </Web3Button>
  );
}

checkERC20Allowance (optional)

checkERC20Allowance (optional)

Boolean value to check whether the current wallet has enough allowance to pay for claiming the tokens before attempting to claim the tokens.

Defaults to true.

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

// Your smart contract address
const contractAddress = "{{contract_address}}";

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

  return (
    <Web3Button
      contractAddress={contractAddress}
      action={() =>
        claimToken({
          to: "{{wallet_address}}", // Use useAddress hook to get current wallet address
          amount: 100, // Amount of token to claim
          checkERC20Allowance: false, // Set to true if you want to check ERC20 allowance
        })
      }
    >
      Claim Token
    </Web3Button>
  );
}