Docs
Hooks

Hooks

Hooks for token kit.

Installation

bash npm i @token-kit/hooks

useApproval

A custom React hook that detect whether the operator is approved to opertrate for the token.

function TokenApproval() {
  const { status, data } = useApproval({
    chainId: 1,
    contract: "0xdac17f958d2ee523a2206206994597c13d831ec7", // Contract address
    owner: "0x04B07Ab1970898FF7e4e6a487530515129deF530", // Owner address
    operator: "0x04B07Ab1970898FF7e4e6a487530515129deF530", // Operator address
    tokenType: "ERC1155", // Token type, it can be ERC721 or ERC1155, if the type is ERC721, you should also add tokenId into params
  });
 
  if (status === "pending") return <div>Loading...</div>;
  if (status === "error") return <div>Error fetching balance</div>;
 
  return (
    <div>
      <p>isApproved: {data.isApproved}</p>
    </div>
  );
}

The useApproval hook accepts an object with the following properties:

PropertyTypeDescription
chainIdnumberThe ID of the blockchain network
contract0x${string}The token contract address
owner0x${string}The token owner address
operator0x${string}The operator address to check the approval for
tokenIdstringThe token Id
tokenTypestringThe token type, it supports ERC721, ERC1155

The hook returns an object with the following structure:

| {
    status: 'error' | 'pending'
    data?: undefined
  }
| {
    status: 'success'
    data: {
      isApproved: boolean
    }
  }

useERC20Allowance

A custom React hook that detect the wallet address has allowance to operate the ERC20 token.

function TokenAllowance() {
  const { status, data } = useERC20Allowance({
    chainId: 1,
    contract: "0xdac17f958d2ee523a2206206994597c13d831ec7",
    owner: "0x1234567890123456789012345678901234567890",
    spender: "0x9876543210987654321098765432109876543210",
    amount: "2",
  });
 
  return (
    <div>
      <p>isAllowed: {data.isAllowed}</p>
    </div>
  );
}

The useAllowance hook accepts an object with the following properties:

PropertyTypeDescription
chainIdnumberThe ID of the blockchain network
contract0x${string}The ERC20 token contract address
owner0x${string}The owner address of the token
spender0x${string}The spender address to check the allowance for
amountstringThe amount

The hook returns an object with the following structure:

| {
    status: 'error' | 'pending'
    data?: undefined
  }
| {
    status: 'success'
    data: {
      isAllowed: boolean
    }
  }

useERC20Balance

A custom React hook that fetches the balance of an ERC20 token for a given wallet address, together with the token's name, symbol, and decimals.

function TokenBalance() {
  const { status, data } = useERC20Balance({
    chainId: 1,
    contract: "0xdac17f958d2ee523a2206206994597c13d831ec7", // ERC20 contract address
    wallet: "0x04B07Ab1970898FF7e4e6a487530515129deF530", // Wallet address
  });
 
  if (status === "pending") return <div>Loading...</div>;
  if (status === "error") return <div>Error fetching balance</div>;
 
  return (
    <div>
      <p>Token Name: {data.name}</p>
      <p>Symbol: {data.symbol}</p>
      <p>
        Balance: {data.formatted} {data.symbol}
      </p>
    </div>
  );
}

The useERC20Balance hook accepts an object with the following properties:

PropertyTypeDescription
chainIdnumberThe ID of the blockchain network
contract0x${string}The ERC20 token contract address
wallet0x${string}The wallet address to check the balance for

The hook returns an object with the following structure:

| {
    status: 'error' | 'pending'
    data?: undefined
  }
| {
    status: 'success'
    data: {
      formatted: string
      name: string
      symbol: string
      decimals: number
      balance: bigint
    }
  }

useERC721Allowance

A custom React hook that detect the wallet address has allowance to operate the ERC721 token

function TokenAllowance() {
  const { status, data } = useERC721Allowance({
    chainId: 1,
    contract: "0xdac17f958d2ee523a2206206994597c13d831ec7",
    owner: "0x1234567890123456789012345678901234567890",
    tokenId: "1",
  });
 
  return (
    <div>
      <p>isAllowed: {data.isAllowed}</p>
    </div>
  );
}

The useERC721Allowance hook accepts an object with the following properties:

PropertyTypeDescription
chainIdnumberThe ID of the blockchain network
contract0x${string}The ERC tok721en contract address
owner0x${string}The owner address of the token
tokenIdstringThe token Id

The hook returns an object with the following structure:

| {
    status: 'error' | 'pending'
    data?: undefined
  }
| {
    status: 'success'
    data: {
      isAllowed: boolean
    }
  }

useERC1155Allowance

A custom React hook that detect the wallet address has allowance to operate the ERC1155 token

function TokenAllowance() {
  const { status, data } = useERC1155Allowance({
    chainId: 1,
    contract: "0xcaD7587a5072CB8dF1E20aeB9B7816e41A756c48",
    owner: "0x851438Ecb37FAe596DcD49bDe643D170F3aa225B",
    tokenId: "1",
    amount: "2",
  });
 
  return (
    <div>
      <p>isAllowed: {data.isAllowed}</p>
    </div>
  );
}

The useERC1155Allowance hook accepts an object with the following properties:

PropertyTypeDescription
chainIdnumberThe ID of the blockchain network
contract0x${string}The ERC1155 token contract address
owner0x${string}The owner address of the token
tokenIdstringThe token Id
amountstringThe amount

The hook returns an object with the following structure:

| {
    status: 'error' | 'pending'
    data?: undefined
  }
| {
    status: 'success'
    data: {
      isAllowed: boolean
    }
  }

useOwner

A custom React hook that fetches the owner of a token.

function TokenOwner() {
  const { status, data } = useOwner({
    chainId: 1,
    contract: "0xdac17f958d2ee523a2206206994597c13d831ec7", // Contract address
    tokenId: "1", // Token Id
  });
 
  if (status === "pending") return <div>Loading...</div>;
  if (status === "error") return <div>Error fetching balance</div>;
 
  return (
    <div>
      <p>Token Owner: {data.owner}</p>
    </div>
  );
}

The useOwner hook accepts an object with the following properties:

PropertyTypeDescription
chainIdnumberThe ID of the blockchain network
contract0x${string}The token contract address
tokenIdstringThe token Id to check the owner for

The hook returns an object with the following structure:

| {
    status: 'error' | 'pending'
    data?: undefined
  }
| {
    status: 'success'
    data: {
      owner: string
    }
  }
FarcasterOnchain Tools