87 lines
2.9 KiB
TypeScript
87 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useRef, useMemo } from "react";
|
|
import { formatAddress } from "@/lib/utils";
|
|
import { format } from "date-fns";
|
|
import { gsap } from "gsap";
|
|
|
|
interface Transaction {
|
|
id: string;
|
|
proposalId: number;
|
|
to: string;
|
|
value: string;
|
|
status: "pending" | "executed" | "rejected";
|
|
createdAt: Date;
|
|
}
|
|
|
|
export function RecentActivity() {
|
|
// TODO: Fetch recent transactions from backend/indexer
|
|
const transactions = useMemo<Transaction[]>(() => [], []); // Placeholder
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
if (containerRef.current && transactions.length > 0) {
|
|
const items = containerRef.current.children;
|
|
gsap.from(items, {
|
|
opacity: 0,
|
|
x: -20,
|
|
duration: 0.5,
|
|
stagger: 0.1,
|
|
ease: "power2.out",
|
|
});
|
|
}
|
|
}, [transactions]);
|
|
|
|
return (
|
|
<div>
|
|
<h2 className="text-2xl font-semibold mb-4">Recent Activity</h2>
|
|
<div className="bg-gray-900 rounded-xl p-6">
|
|
{transactions.length === 0 ? (
|
|
<div className="text-center py-8 text-gray-400">
|
|
No recent transactions
|
|
</div>
|
|
) : (
|
|
<div ref={containerRef} className="space-y-4">
|
|
{transactions.map((tx) => (
|
|
<div
|
|
key={tx.id}
|
|
className="bg-gray-800 rounded-lg p-4 border border-gray-700 hover:border-gray-600 transition-colors"
|
|
>
|
|
<div className="flex justify-between items-start">
|
|
<div className="flex-1">
|
|
<div className="flex items-center gap-3 mb-2">
|
|
<span className="text-sm font-mono text-gray-400">
|
|
#{tx.proposalId}
|
|
</span>
|
|
<span
|
|
className={`px-2 py-1 rounded text-xs font-semibold ${
|
|
tx.status === "executed"
|
|
? "bg-green-900/30 text-green-400"
|
|
: tx.status === "pending"
|
|
? "bg-yellow-900/30 text-yellow-400"
|
|
: "bg-red-900/30 text-red-400"
|
|
}`}
|
|
>
|
|
{tx.status}
|
|
</span>
|
|
</div>
|
|
<div className="text-sm text-gray-300">
|
|
<span className="text-gray-500">To:</span> {formatAddress(tx.to)}
|
|
</div>
|
|
<div className="text-sm text-gray-400 mt-1">
|
|
{format(new Date(tx.createdAt), "MMM dd, yyyy HH:mm")}
|
|
</div>
|
|
</div>
|
|
<div className="text-right">
|
|
<div className="text-lg font-semibold">{tx.value} ETH</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|