import React, { useState, useEffect, useCallback } from 'react';
import { View, Text, FlatList, ActivityIndicator } from 'react-native';
import type {
PrivacyBoost,
Transaction,
} from '@sunnyside-io/privacy-boost-react-native';
function TransactionHistoryScreen({ sdk }: { sdk: PrivacyBoost }) {
const [transactions, setTransactions] = useState<Transaction[]>([]);
const [cursor, setCursor] = useState<string | undefined>(undefined);
const [filter, setFilter] = useState<string | undefined>(undefined);
const [loading, setLoading] = useState(true);
const loadMore = useCallback(async () => {
setLoading(true);
try {
const page = await sdk.getTransactionHistory(filter, 25, cursor);
setTransactions((prev) => (cursor ? [...prev, ...page.data] : page.data));
setCursor(page.next);
} catch (error) {
console.log('Failed to load transactions:', error);
}
setLoading(false);
}, [sdk, filter, cursor]);
// Reset when filter changes
useEffect(() => {
setCursor(undefined);
setTransactions([]);
loadMore();
}, [filter]);
const formatDate = (timestamp: bigint) =>
new Date(Number(timestamp) * 1000).toLocaleDateString();
return (
<View style={{ padding: 16 }}>
<FlatList
data={transactions}
keyExtractor={(item) => item.txHash}
renderItem={({ item }) => (
<View style={{ paddingVertical: 8 }}>
<Text style={{ fontWeight: 'bold' }}>
{item.txType} · {item.direction}
</Text>
<Text>Value: {sdk.formatAmount(item.value, 18)}</Text>
<Text style={{ color: 'gray' }}>{formatDate(item.createdAt)}</Text>
</View>
)}
onEndReached={() => cursor && loadMore()}
onEndReachedThreshold={0.5}
ListFooterComponent={loading ? <ActivityIndicator /> : null}
ListEmptyComponent={!loading ? <Text>No transactions</Text> : null}
/>
</View>
);
}