Skip to main content

Function.useKeybanAccountTokenBalances

function useKeybanAccountTokenBalances(account: KeybanAccount, options?: PaginationArgs): ApiResult<PaginatedData<KeybanTokenBalance>, PaginationExtra>

Returns an ApiResult of the ERC20 tokens of an account.

The useKeybanAccountTokenBalances React hook enables you to fetch and monitor the list of ERC20 token balances owned by a specific Keyban account. It supports pagination, allowing efficient handling of large token collections by fetching data in manageable segments. This hook returns an ApiResult tuple containing the paginated token balance data, any potential errors, and additional pagination controls.

Parameters​

ParameterTypeDescription
accountKeybanAccountThe Keyban account object containing the address.
options?PaginationArgsOptional pagination arguments for fetching the token balances.

Returns​

ApiResult<PaginatedData<KeybanTokenBalance>, PaginationExtra>

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

Throws​

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

Throws​

If no ERC20 token balances are found for the provided account (SdkErrorTypes.TokenBalancesNotFound).

Example​

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

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

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

  const [balances, balancesError, { fetchMore, loading }] = useKeybanAccountTokenBalances(account, { first: 5 });

  if (balancesError) {
    return <div>Error fetching token balances: {balancesError.message}</div>;
  }

  if (!balances) {
    return <div>Loading token balances...</div>;
  }

  return (
    <div>
      <h3>Your ERC20 Token Balances</h3>
      <ul>
        {balances.nodes.map((balance) => (
          <li key={balance.id}>
            <p>Token: {balance.token?.symbol || "Unknown"}</p>
            <p>Balance: {balance.balance}</p>
            {balance.token && (
              <>
                <p>Name: {balance.token.name || "N/A"}</p>
                <p>Decimals: {balance.token.decimals !== null ? balance.token.decimals : "N/A"}</p>
                <img src={balance.token.iconUrl || ""} alt={`${balance.token.symbol} icon`} width={24} height={24} />
              </>
            )}
          </li>
        ))}
      </ul>
      {balances.hasNextPage && (
        <button onClick={fetchMore} disabled={loading}>
          {loading ? 'Loading...' : 'Load More'}
        </button>
      )}
    </div>
  );
};

export default TokenBalancesList;

Remarks​

  • Pagination Support: Utilize the PaginationArgs to control the number of ERC20 token balances fetched per request and to navigate through pages using cursors.
  • Real-Time Updates: The hook subscribes to changes in the ERC20 token 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​