import { useState, useEffect } from 'react';
function TransactionHistory() {
const [transactions, setTransactions] = useState<Transaction[]>([]);
const [loading, setLoading] = useState(true);
const [filter, setFilter] = useState<string>('all');
useEffect(() => {
async function load() {
setLoading(true);
const params: TransactionHistoryParams = { limit: 50 };
if (filter !== 'all') {
params.type = filter as any;
}
const txs = await sdk.vault.getTransactionHistory(params);
setTransactions(txs);
setLoading(false);
}
load();
}, [filter]);
const formatAmount = (amount: bigint, decimals = 18) => {
return (Number(amount) / 10 ** decimals).toFixed(4);
};
return (
<div>
{/* Filter Tabs */}
<div className="tabs">
{['all', 'deposit', 'withdraw', 'transfer'].map((type) => (
<button
key={type}
onClick={() => setFilter(type)}
className={filter === type ? 'active' : ''}
>
{type.charAt(0).toUpperCase() + type.slice(1)}
</button>
))}
</div>
{loading && <div>Loading transactions...</div>}
{!loading && transactions.length === 0 && <p>No transactions found</p>}
<table>
<thead>
<tr>
<th>Type</th>
<th>Amount</th>
<th>Status</th>
<th>Date</th>
</tr>
</thead>
<tbody>
{transactions.map((tx) => (
<tr key={tx.txHash}>
<td>
{tx.type}
{tx.direction === 'incoming' && ' (received)'}
</td>
<td>{tx.amount ? formatAmount(tx.amount) : '-'}</td>
<td>{tx.status}</td>
<td>{new Date(tx.createdAt).toLocaleDateString()}</td>
</tr>
))}
</tbody>
</table>
</div>
);
}