Transaction List

A component for displaying a list of Solana transactions with details like signature, block, time, sender, and fee.

Installation

Usage

import TxnList from "@/components/soldevkit-ui/transaction/txn-list";
import { VersionedTransactionResponse } from "@solana/web3.js";

// transactions should be VersionedTransactionResponse objects from Solana
const transactions: VersionedTransactionResponse[] = [
  // ... your transaction objects
];

export default function Example() {
  return (
    <TxnList
      transactions={transactions}
      onClick={(txn) => console.log("Transaction clicked:", txn.transaction.signatures[0])}
    />
  );
}

Features

• Solscan Integration: Direct links to transaction details and accounts on Solscan
• Real-time Block Time: Calculates estimated transaction time using current slot and average block time
• Empty States: Graceful handling when no transactions are available
• Responsive Design: Mobile-friendly table layout
• Time Formatting: Human-readable relative time display using date-fns
• Fee Display: Properly formatted SOL fee amounts
• Address Truncation: Shortened addresses for better readability
• Click Handling: Optional callback for transaction row interactions

Props

Dependencies

This component requires the following dependencies:

{
  "@solana/web3.js": "^1.87.0",
  "@solana/wallet-adapter-react": "^0.15.0",
  "date-fns": "^2.30.0",
  "lucide-react": "^0.263.0"
}

Built with ❤️ for the Solana ecosystem. Contributions welcome!