Skip to main content

Function.useKeybanAccountTransferHistory

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

Returns an ApiResult of the transfer history of an account.

The useKeybanAccountTransferHistory React hook allows you to fetch and subscribe to the list of all asset transfers (both incoming and outgoing) associated with a specific Keyban account. It supports pagination, enabling efficient retrieval of extensive transfer histories by fetching data in manageable chunks. This hook returns an ApiResult tuple containing the paginated transfer data, any potential errors, and additional pagination controls.

Parameters​

ParameterTypeDescription
accountKeybanAccountThe Keyban account object containing the address.
options?PaginationArgsOptional pagination arguments.

Returns​

ApiResult<PaginatedData<KeybanAssetTransfer>, PaginationExtra>

  • The API result containing paginated data of Keyban asset transfers and pagination extra information.

Throws​

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

Throws​

If no transfer history is found for the provided account (SdkErrorTypes.TransferHistoryNotFound).

Example​

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

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

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

  const [txHistory, txHistoryError, { fetchMore, loading }] = useKeybanAccountTransferHistory(account, { first: 5 });

  if (txHistoryError) {
    return <div>Error fetching transfer history: {txHistoryError.message}</div>;
  }

  if (!txHistory) {
    return <div>Loading transfer history...</div>;
  }

  return (
    <div>
      <h3>Your Transfer History</h3>
      <ul>
        {txHistory.nodes.map((transfer) => (
          <li key={transfer.id}>
            <p>Transaction ID: {transfer.transactionId}</p>
            <p>From: {transfer.fromAddress}</p>
            <p>To: {transfer.toAddress}</p>
            <p>Amount: {transfer.amount}</p>
            <p>Asset: {transfer.assetSymbol}</p>
            <p>Timestamp: {new Date(transfer.timestamp).toLocaleString()}</p>
            // Render additional transfer details as needed
          </li>
        ))}
      </ul>
      {txHistory.hasNextPage && (
        <button onClick={fetchMore} disabled={loading}>
          {loading ? 'Loading...' : 'Load More'}
        </button>
      )}
    </div>
  );
};

export default TransferHistoryList;

Remarks​

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