Skip to main content

Function.useKeybanAccountNfts

function useKeybanAccountNfts(account: KeybanAccount, options?: PaginationArgs): ApiResult<PaginatedData<KeybanNftBalance>, PaginationExtra>

Returns an ApiResult of the NFTs of an account.

The useKeybanAccountNfts React hook allows you to fetch and subscribe to the list of all NFTs (both ERC721 and ERC1155) owned by a specific Keyban account. It supports pagination, enabling efficient retrieval of large NFT collections by fetching data in manageable chunks. This hook returns an ApiResult tuple containing the paginated NFT data, any potential errors, and additional pagination controls.

Parameters​

ParameterTypeDescription
accountKeybanAccountA Keyban account object.
options?PaginationArgsOptional pagination arguments for fetching the NFTs.

Returns​

ApiResult<PaginatedData<KeybanNftBalance>, PaginationExtra>

  • The result containing paginated NFT balances or an error, along with pagination controls.

Throws​

If the provided account has an invalid address (SdkErrorTypes.AddressInvalid).

Throws​

If no NFTs are found for the provided account (SdkErrorTypes.NftNotFound).

Example​

import React from 'react';
import { useKeybanAccount, useKeybanAccountNfts } from "@keyban/sdk-react";

const NftsList: React.FC = () => {
  const [account, accountError] = useKeybanAccount();

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

  const [nfts, nftsError, { fetchMore, loading }] = useKeybanAccountNfts(account, { first: 5 });

  if (nftsError) {
    return <div>Error fetching NFTs: {nftsError.message}</div>;
  }

  if (!nfts) {
    return <div>Loading NFTs...</div>;
  }

  return (
    <div>
      <h3>Your NFTs</h3>
      <ul>
        {nfts.nodes.map((nft) => (
          <li key={nft.id}>
            <p>NFT ID: {nft.id}</p>
            {nft.nft && (
              <>
                <p>Collection: {nft.nft.collection?.name || "Unknown"}</p>
                <p>Symbol: {nft.nft.collection?.symbol || "N/A"}</p>
                <p>Token ID: {nft.nft.tokenId}</p>
                // Render additional metadata as needed
              </>
            )}
          </li>
        ))}
      </ul>
      {nfts.hasNextPage && (
        <button onClick={fetchMore} disabled={loading}>
          {loading ? 'Loading...' : 'Load More'}
        </button>
      )}
    </div>
  );
};

export default NftsList;

Remarks​

  • Pagination Support: Utilize the PaginationArgs to control the number of NFTs fetched per request and to navigate through pages using cursors.
  • Real-Time Updates: The hook subscribes to changes in the NFT balances, ensuring that your UI reflects the latest data without manual refreshes.
  • Error Handling: Always check for errors returned by the hook to provide informative feedback to the user and handle different error scenarios gracefully.
  • Context Requirement: Ensure that your component is wrapped within a KeybanProvider to provide the necessary context for the hooks to function correctly.

See​