status-im/nimbus-gui
2
0
Fork 0
mirror of https://github.com/status-im/nimbus-gui.git synced 2025-02-18 14:26:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: separate table body into component

Browse Source
This commit is contained in:
RadoslavDimchev 2023-11-20 18:58:44 +02:00
parent fc9d9c1f3e
commit fc57025d31
2 changed files with 73 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
src/pages/ValidatorManagement/ManagementTable/ManagementTable.tsx
View File

@ -1,13 +1,11 @@
import { Checkbox, Text } from '@status-im/components'
import { OptionsIcon } from '@status-im/icons'
import { useEffect, useMemo, useState } from 'react' import { useEffect, useMemo, useState } from 'react'
import { YStack, XStack } from 'tamagui' import { YStack, XStack } from 'tamagui'
import { VALIDATORS_DATA, VALIDATOR_TABS_MANAGEMENT } from '../../../constants' import { VALIDATORS_DATA, VALIDATOR_TABS_MANAGEMENT } from '../../../constants'
import ValidatorProfile from '../../../components/General/ValidatorProfile'
import SearchManagement from './SearchManagement' import SearchManagement from './SearchManagement'
import DropdownFilter from './DropdownFilter' import DropdownFilter from './DropdownFilter'
import ManagementTableHeader from './ManagementTableHeader' import ManagementTableHeader from './ManagementTableHeader'
import ManagementTableBody from './ManagementTableBody'
import './ManagementTable.css' import './ManagementTable.css'
type ManagementTableProps = { type ManagementTableProps = {
@ -16,7 +14,7 @@ type ManagementTableProps = {
changeSearchValue: (value: string) => void changeSearchValue: (value: string) => void
} }
type Validator = { export type Validator = {
number: number number: number
address: string address: string
balance: number balance: number
@ -69,60 +67,7 @@ const ManagementTable = ({ tab, searchValue, changeSearchValue }: ManagementTabl
</XStack> </XStack>
<table> <table>
<ManagementTableHeader validatorsAmount={filteredValidators.length} /> <ManagementTableHeader validatorsAmount={filteredValidators.length} />
<tbody> <ManagementTableBody filteredValidators={filteredValidators} />
{filteredValidators.map((validator, index) => (
<tr key={index}>
<td>
<Checkbox id={index.toString()} variant="outline" />
</td>
<td>
<ValidatorProfile number={validator.number} address={validator.address} />
</td>
<td>
<Text size={15} color={'#647084'} weight={'semibold'}>
{validator.balance}
</Text>
</td>
<td>
<Text size={15} color={'#647084'} weight={'semibold'}>
{validator.income}
</Text>
</td>
<td>
<Text size={15} color={'#647084'}>
{validator.proposals}
</Text>
</td>
<td>
<Text size={15} color={'#647084'}>
{validator.attestations}
</Text>
</td>
<td>
<Text size={15} color={'#647084'}>
{validator.effectiveness}%
</Text>
</td>
<td>
<Text size={15} color={'#2F80ED'} weight={'semibold'}>
{validator.status}
</Text>
</td>
<td>
<OptionsIcon size={20} color="#647084" style={{ cursor: 'pointer' }} />
</td>
</tr>
))}
{filteredValidators.length === 0 && (
<tr>
<td colSpan={11}>
<Text size={15} color={'#647084'} weight={'semibold'}>
No validators
</Text>
</td>
</tr>
)}
</tbody>
</table> </table>
</YStack> </YStack>
) )

70
src/pages/ValidatorManagement/ManagementTable/ManagementTableBody.tsx Normal file
View File

@ -0,0 +1,70 @@
import { Checkbox, Text } from '@status-im/components'
import { OptionsIcon } from '@status-im/icons'
import ValidatorProfile from '../../../components/General/ValidatorProfile'
import { Validator } from './ManagementTable'
type ManagementTableBodyProps = {
filteredValidators: Validator[]
}
const ManagementTableBody = ({ filteredValidators }: ManagementTableBodyProps) => {
return (
<tbody>
{filteredValidators.map((validator, index) => (
<tr key={index}>
<td>
<Checkbox id={index.toString()} variant="outline" />
</td>
<td>
<ValidatorProfile number={validator.number} address={validator.address} />
</td>
<td>
<Text size={15} color={'#647084'} weight={'semibold'}>
{validator.balance}
</Text>
</td>
<td>
<Text size={15} color={'#647084'} weight={'semibold'}>
{validator.income}
</Text>
</td>
<td>
<Text size={15} color={'#647084'}>
{validator.proposals}
</Text>
</td>
<td>
<Text size={15} color={'#647084'}>
{validator.attestations}
</Text>
</td>
<td>
<Text size={15} color={'#647084'}>
{validator.effectiveness}%
</Text>
</td>
<td>
<Text size={15} color={'#2F80ED'} weight={'semibold'}>
{validator.status}
</Text>
</td>
<td>
<OptionsIcon size={20} color="#647084" style={{ cursor: 'pointer' }} />
</td>
</tr>
))}
{filteredValidators.length === 0 && (
<tr>
<td colSpan={11}>
<Text size={15} color={'#647084'} weight={'semibold'}>
No validators
</Text>
</td>
</tr>
)}
</tbody>
)
}
export default ManagementTableBody