Activity

TransactionList

TransactionList gives you an activity feed that is immediately useful in wallets and portfolio views, including explorer links, direction labels, token transfer context, and pagination.

Provider requiredExplorer linksHook available

Primary use

Wallet activity

Show recent on-chain activity for a selected address and network.

Built-in context

Direction + token info

Rows include sent/received semantics, method names, timestamps, and token transfers.

Escape hatch

useTransactionHistory

Drop down to the hook when you need a fully custom feed presentation.

Great for portfolio dashboards

Use it as-is when your product needs a quick recent activity surface.

Composable with your own filters

Pair it with AddressInput and ChainSelect to build a simple activity explorer.

Interactive activity viewer

Select a chain, enter an address, and load paginated activity without wiring your own table or explorer links.

Interactive activity viewer

import { TransactionList } from '@avalabs/avacloud-kit-ui-preview';export function Example() {return (  <TransactionList    chainId="43114"    address="0x71C7656EC7ab88b098defB751B7401B5f6d8976F"    pageSize={10}  />);}

Common customizations

Custom click handling

<TransactionList
  chainId="43114"
  address={address}
  onTransactionClick={(tx) => {
    console.log('Transaction:', tx.nativeTransaction?.txHash);
  }}
/>

Custom empty state

<TransactionList
  chainId="43114"
  address={address}
  emptyMessage="No transactions yet. Make your first transaction!"
/>

Hide pagination

<TransactionList
  chainId="43114"
  address={address}
  showPagination={false}
  pageSize={5}
/>

Use the hook directly

import { useTransactionHistory } from '@avalabs/avacloud-kit-ui-preview';
import { TransactionSortOrder } from '@avalabs/avacloud-kit-ui-preview/client';

export function CustomTransactionList() {
  const { data, isLoading, isError } = useTransactionHistory({
    chainId: '43114',
    address: '0x71C7656EC7ab88b098defB751B7401B5f6d8976F',
    pageSize: 20,
    sortOrder: TransactionSortOrder.DESC,
  });

  if (isLoading) return <div>Loading...</div>;
  if (isError) return <div>Error loading transactions</div>;

  return (
    <ul>
      {data?.transactions.map((tx) => (
        <li key={tx.nativeTransaction?.txHash}>
          {tx.nativeTransaction?.txHash}
        </li>
      ))}
    </ul>
  );
}