Skip to main content

Function.useKeybanAccountTransferHistory

function useKeybanAccountTransferHistory(account: KeybanAccount, options?: PaginationArgs): ApiResult<PaginatedData<KeybanAssetTransfer>, PaginationExtra>;

Returns an ApiResult tuple for the transfer history of an account.

The useKeybanAccountTransferHistory hook fetches and subscribes to a paginated list of all asset transfers (incoming and outgoing) for a given Keyban account.

Parameters​

ParameterTypeDescription
accountKeybanAccountThe KeybanAccount object containing the user's wallet address.
options?PaginationArgsPagination arguments: - first?: number of transfers to fetch initially. - after?: cursor string to fetch the next page.

Returns​

ApiResult<PaginatedData<KeybanAssetTransfer>, PaginationExtra>

  • 0: PaginatedData<KeybanAssetTransfer> — contains nodes, hasNextPage, hasPrevPage, totalCount.
    • 1: Error if an error occurred during load, otherwise null.
    • 2: PaginationExtra — { loading: boolean; fetchMore?: () => void }.

Throws​

If the provided account address is invalid (SdkErrorTypes.AddressInvalid).

Throws​

If no transfer history is found (SdkErrorTypes.TransferHistoryNotFound).

Example​

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

function TransferHistoryList() {
  const [account, accountError] = useKeybanAccount();
  if (accountError) throw accountError;

  const [history, historyError, { fetchMore, loading }] =
    useKeybanAccountTransferHistory(account, { first: 5 });
  if (historyError) throw historyError;

  return (
    <div>
      <h3>Your Transfer History</h3>
      <ul>
        {history.nodes.map((tx) => (
          <li key={tx.id}>
            <p>ID: {tx.id}</p>
            <p>From: {tx.fromId}</p>
            <p>To: {tx.toId}</p>
            <p>Amount: {tx.value}</p>
            <p>Date: {new Date(tx.transaction?.date!).toLocaleString()}</p>
          </li>
        ))}
      </ul>
      {history.hasNextPage && (
        <button onClick={() => fetchMore?.()} disabled={loading}>
          {loading ? "Loading…" : "Load more"}
        </button>
      )}
    </div>
  );
}

Remarks​

  • This hook uses React Suspense via Apollo’s useSuspenseQuery and may suspend rendering until data is available.
  • Subscribes to real-time updates of transfers via GraphQL subscriptions.
  • Ensure your component is wrapped in a <KeybanProvider> and within a Suspense boundary.

See​