Transaction Table

1import { formatDistanceToNow } from "date-fns";
2import { ExternalLinkIcon } from "lucide-react";
3import { Badge } from "@/components/ui/badge";
4import {
5  Table,
6  TableBody,
7  TableCell,
8  TableHead,
9  TableHeader,
10  TableRow,
11} from "@/components/ui/table";
12import { cn } from "@/lib/utils";
13import { TokenIcon } from "@/registry/sol/token-icon";
14 
15interface TxnTableProps {
16  transactions: {
17    signature: string;
18    timestamp: Date;
19    action: string;
20    token: string;
21    tokenIcon?: string;
22    amount: string;
23    value?: string;
24    explorerUrl?: string;
25  }[];
26  className?: string;
27}
28 
29const truncateSignature = (sig: string) => {
30  if (sig.length <= 12) return sig;
31  return `${sig.slice(0, 4)}...${sig.slice(-4)}`;
32};
33 
34const TxnTable = ({ transactions, className }: TxnTableProps) => {
35  return (
36    <Table className={className}>
37      <TableHeader>
38        <TableRow>
39          <TableHead>Signature</TableHead>
40          <TableHead>Time</TableHead>
41          <TableHead>Action</TableHead>
42          <TableHead>Token</TableHead>
43          <TableHead className="text-right">Amount</TableHead>
44        </TableRow>
45      </TableHeader>
46      <TableBody>
47        {transactions.map((txn, i) => {
48          const explorerUrl =
49            txn.explorerUrl ?? `https://solscan.io/tx/${txn.signature}`;
50 
51          return (
52            <TableRow key={`${txn.signature}-${i}`}>
53              <TableCell>
54                <a
55                  href={explorerUrl}
56                  target="_blank"
57                  rel="noopener noreferrer"
58                  className={cn(
59                    "inline-flex items-center gap-1 font-mono text-xs",
60                    "text-muted-foreground hover:text-foreground transition-colors",
61                  )}
62                >
63                  {truncateSignature(txn.signature)}
64                  <ExternalLinkIcon className="size-3" />
65                </a>
66              </TableCell>
67              <TableCell className="text-muted-foreground text-sm">
68                {formatDistanceToNow(txn.timestamp, { addSuffix: true })}
69              </TableCell>
70              <TableCell>
71                <Badge variant="secondary" className="capitalize text-xs">
72                  {txn.action}
73                </Badge>
74              </TableCell>
75              <TableCell>
76                <div className="flex items-center gap-1.5">
77                  {txn.tokenIcon && (
78                    <TokenIcon
79                      src={txn.tokenIcon}
80// … truncated