1+ import { Badge , Loader , Paper , Table } from "@mantine/core" ;
2+ import { useTranslation } from "react-i18next" ;
3+ import { truncateString } from "@/utils" ;
4+ import CopyIcon from "@/components/icons/CopyIcon" ;
5+ import { IOtherBot } from "@/types" ;
6+
7+ interface IOtherBotsCard {
8+ className ?: string ;
9+ otherBots : IOtherBot [ ] ;
10+ }
11+
12+ export default function OtherBotsCard ( { otherBots, className } : IOtherBotsCard ) {
13+ const { t } = useTranslation ( ) ;
14+
15+ const tokenColumns : string [ ] = otherBots [ 0 ]
16+ ? otherBots [ 0 ] . balances . map ( balance => balance . symbol )
17+ : [ ] ;
18+
19+ return (
20+ < Paper
21+ className = { `${ className } ` }
22+ withBorder
23+ >
24+ < Table . ScrollContainer minWidth = { 470 } >
25+ < Table
26+ verticalSpacing = "md"
27+ >
28+ < Table . Thead >
29+ < Table . Tr >
30+ < Table . Th className = "uppercase" > #</ Table . Th >
31+ < Table . Th className = "uppercase" > { t ( 'other_bots_card.table.type_label' ) } </ Table . Th >
32+ < Table . Th className = "uppercase" > { t ( 'other_bots_card.table.status_label' ) } </ Table . Th >
33+ < Table . Th className = "uppercase" > { t ( 'other_bots_card.table.working_address_label' ) } </ Table . Th >
34+ { tokenColumns . map ( column => (
35+ < Table . Th
36+ key = { column }
37+ className = "uppercase"
38+ >
39+ { column }
40+ </ Table . Th >
41+ ) ) }
42+ </ Table . Tr >
43+ </ Table . Thead >
44+ < Table . Tbody >
45+ { otherBots . map ( ( ( bot , index ) => (
46+ < Table . Tr key = { index } >
47+ < Table . Td >
48+ { index + 1 }
49+ </ Table . Td >
50+ < Table . Td >
51+ { bot . type }
52+ </ Table . Td >
53+ < Table . Td >
54+ < div className = "flex items-center mb-1" >
55+ < Badge
56+ variant = "outline"
57+ color = { bot . status ? 'var(--green-default)' : 'var(--dark-red-default)' }
58+ radius = "xs"
59+ className = { `font-normal` }
60+ >
61+ < div className = "flex items-center" >
62+ < span
63+ className = "status-dot mr-2"
64+ style = { {
65+ backgroundColor : bot . status ? 'var(--green-default)' : 'var(--dark-red-default)'
66+ } }
67+ />
68+ < span style = { { color : bot . status ? 'var(--green-default)' : 'var(--dark-red-default)' } } >
69+ { t ( `other_bots_card.table.agent_${ bot . status ? 'live' : 'offline' } _label` ) }
70+ </ span >
71+ </ div >
72+ </ Badge >
73+ </ div >
74+ </ Table . Td >
75+ < Table . Td >
76+ < div className = "flex items-center" >
77+ { truncateString ( bot . address ?? '' , 5 , 5 ) }
78+ < CopyIcon
79+ text = { bot . address ?? '' }
80+ />
81+ </ div >
82+ </ Table . Td >
83+ { bot . balances . map ( balance => (
84+ < Table . Td key = { balance . symbol } >
85+ { balance . balance }
86+ </ Table . Td >
87+ ) ) }
88+ </ Table . Tr >
89+ ) ) ) }
90+ </ Table . Tbody >
91+ </ Table >
92+ </ Table . ScrollContainer >
93+ </ Paper >
94+ ) ;
95+ }
0 commit comments