Skip to main content

Function.useKeybanAccountNft

function useKeybanAccountNft(
   account: KeybanAccount, 
   tokenAddress: `0x${string}`, 
tokenId: string): ApiResult<KeybanNftBalance>

The useKeybanAccountNft React hook allows you to fetch the balance of a specific NFT (ERC721 or ERC1155) owned by a Keyban account. It provides detailed information about the NFT, including metadata and collection details, offering a reactive and easy-to-use interface within functional components.

Parameters​

ParameterTypeDescription
accountKeybanAccountThe Keyban account object containing the address.
tokenAddress`0x${string}`The address of the token contract.
tokenIdstringThe ID of the token.

Returns​

ApiResult<KeybanNftBalance>

  • The result containing the NFT balance or an error.

Throws​

If the NFT is not found (SdkErrorTypes.NftNotFound).

Example​

import { useKeybanAccount, useKeybanAccountNft } from "@keyban/sdk-react";

const NftDisplay: React.FC<{ tokenAddress: Address; tokenId: string }> = ({ tokenAddress, tokenId }) => {
  const [account, accountError] = useKeybanAccount();

  if (accountError) {
    // Handle account retrieval error
    return <div>Error fetching account: {accountError.message}</div>;
  }

  const [nftBalance, nftError] = useKeybanAccountNft(account, tokenAddress, tokenId);

  if (nftError) {
    // Handle NFT retrieval error (e.g., NFT not found)
    return <div>Error fetching NFT: {nftError.message}</div>;
  }

  if (!nftBalance) {
    // Display a loading indicator or an appropriate message
    return <div>Loading NFT...</div>;
  }

  return (
    <div>
      <h3>NFT Details</h3>
      <p>NFT ID: {nftBalance.id}</p>
      {nftBalance.nft && (
        <>
          <p>Collection Name: {nftBalance.nft.collection?.name || "Unknown"}</p>
          <p>Symbol: {nftBalance.nft.collection?.symbol || "N/A"}</p>
          <p>Token ID: {nftBalance.nft.tokenId}</p>
          // Display additional metadata as needed
        </>
      )}
    </div>
  );
};

export default NftDisplay;