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";

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)

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)

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)

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