9
9
IconTransfer ,
10
10
IconUsers ,
11
11
} from '@tabler/icons-react' ;
12
+ import Link from 'next/link' ;
12
13
import { tv } from 'tailwind-variants' ;
13
14
14
15
import type { TransactionNode , TxStatus } from '../../types' ;
@@ -22,35 +23,37 @@ export function TxCard({ transaction: tx, className, ...props }: TxCardProps) {
22
23
const classes = styles ( ) ;
23
24
const title = tx . title as string ;
24
25
return (
25
- < Card { ...props } className = { classes . root ( { className } ) } >
26
- < Card . Header >
27
- < EntityItem >
28
- < EntityItem . Slot >
29
- < TxIcon status = { tx . statusType as TxStatus } type = { title } />
30
- </ EntityItem . Slot >
31
- < EntityItem . Info id = { tx . id } title = { title } />
32
- </ EntityItem >
33
- </ Card . Header >
34
- < Card . Body className = { classes . body ( ) } >
35
- < Flex className = { classes . row ( ) } justify = "between" >
36
- < Text leftIcon = { IconUsers } > { tx . totalAccounts } accounts</ Text >
37
- </ Flex >
38
- < Flex className = { classes . row ( ) } justify = "between" >
39
- < Text leftIcon = { IconTransfer } > { tx . totalOperations } operations</ Text >
40
- < Text className = { classes . small ( ) } >
41
- < Badge color = { TX_INTENT_MAP [ tx . statusType as string ] } >
42
- { tx . statusType }
43
- </ Badge >
44
- </ Text >
45
- </ Flex >
46
- < Flex className = { classes . row ( ) } justify = "between" >
47
- < Text leftIcon = { IconCoins } > { tx . totalAssets } assets</ Text >
48
- < Text className = { classes . small ( ) } leftIcon = { IconGasStation } >
49
- { bn ( tx . gasUsed ) . format ( { units : 3 } ) } ETH
50
- </ Text >
51
- </ Flex >
52
- </ Card . Body >
53
- </ Card >
26
+ < Link href = { `/tx/${ tx . id } ` } >
27
+ < Card { ...props } className = { classes . root ( { className } ) } >
28
+ < Card . Header >
29
+ < EntityItem >
30
+ < EntityItem . Slot >
31
+ < TxIcon status = { tx . statusType as TxStatus } type = { title } />
32
+ </ EntityItem . Slot >
33
+ < EntityItem . Info id = { tx . id } title = { title } />
34
+ </ EntityItem >
35
+ </ Card . Header >
36
+ < Card . Body className = { classes . body ( ) } >
37
+ < Flex className = { classes . row ( ) } justify = "between" >
38
+ < Text leftIcon = { IconUsers } > { tx . totalAccounts } accounts</ Text >
39
+ </ Flex >
40
+ < Flex className = { classes . row ( ) } justify = "between" >
41
+ < Text leftIcon = { IconTransfer } > { tx . totalOperations } operations</ Text >
42
+ < Text className = { classes . small ( ) } >
43
+ < Badge color = { TX_INTENT_MAP [ tx . statusType as string ] } >
44
+ { tx . statusType }
45
+ </ Badge >
46
+ </ Text >
47
+ </ Flex >
48
+ < Flex className = { classes . row ( ) } justify = "between" >
49
+ < Text leftIcon = { IconCoins } > { tx . totalAssets } assets</ Text >
50
+ < Text className = { classes . small ( ) } leftIcon = { IconGasStation } >
51
+ { bn ( tx . gasUsed ) . format ( { precision : 5 } ) } ETH
52
+ </ Text >
53
+ </ Flex >
54
+ </ Card . Body >
55
+ </ Card >
56
+ </ Link >
54
57
) ;
55
58
}
56
59
0 commit comments