1+ import React from 'react' ;
2+ import { View , Text , FlatList , StyleSheet } from 'react-native' ;
3+
4+ export type TxStatus = 'pending' | 'completed' | 'failed' | 'cancelled' ;
5+
6+ export interface EscrowTransaction {
7+ id : string ;
8+ type : string ;
9+ amount : string ;
10+ status : TxStatus ;
11+ createdAt : string ;
12+ }
13+
14+ interface Props {
15+ transactions : EscrowTransaction [ ] ;
16+ }
17+
18+ const STATUS_COLOR : Record < TxStatus , string > = {
19+ pending : '#F59E0B' ,
20+ completed : '#10B981' ,
21+ failed : '#EF4444' ,
22+ cancelled : '#6B7280' ,
23+ } ;
24+
25+ const EscrowTransactionHistory : React . FC < Props > = ( { transactions } ) => {
26+ if ( transactions . length === 0 ) {
27+ return (
28+ < View style = { styles . empty } >
29+ < Text style = { styles . emptyText } > No transactions yet.</ Text >
30+ </ View >
31+ ) ;
32+ }
33+
34+ return (
35+ < FlatList
36+ data = { transactions }
37+ keyExtractor = { ( item ) => item . id }
38+ renderItem = { ( { item } ) => (
39+ < View style = { styles . row } >
40+ < View style = { styles . left } >
41+ < Text style = { styles . type } > { item . type } </ Text >
42+ < Text style = { styles . date } > { item . createdAt } </ Text >
43+ </ View >
44+ < View style = { styles . right } >
45+ < Text style = { styles . amount } > { item . amount } </ Text >
46+ < Text style = { [ styles . status , { color : STATUS_COLOR [ item . status ] } ] } >
47+ { item . status }
48+ </ Text >
49+ </ View >
50+ </ View >
51+ ) }
52+ />
53+ ) ;
54+ } ;
55+
56+ const styles = StyleSheet . create ( {
57+ empty : { padding : 16 , alignItems : 'center' } ,
58+ emptyText : { color : '#6B7280' , fontSize : 14 } ,
59+ row : { flexDirection : 'row' , justifyContent : 'space-between' , padding : 12 , borderBottomWidth : 1 , borderColor : '#E5E7EB' } ,
60+ left : { flex : 1 } ,
61+ right : { alignItems : 'flex-end' } ,
62+ type : { fontSize : 14 , fontWeight : '500' , color : '#111827' } ,
63+ date : { fontSize : 12 , color : '#6B7280' , marginTop : 2 } ,
64+ amount : { fontSize : 14 , fontWeight : '600' , color : '#111827' } ,
65+ status : { fontSize : 12 , marginTop : 2 , textTransform : 'capitalize' } ,
66+ } ) ;
67+
68+ export default EscrowTransactionHistory ;
0 commit comments