status-im/nimbus-gui
2
0
Fork 0
mirror of https://github.com/status-im/nimbus-gui.git synced 2025-02-15 12:56:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: made state for filtered validators

Browse Source
This commit is contained in:
RadoslavDimchev 2023-11-14 01:20:09 +02:00
parent 4f29df009a
commit f3b985713a
1 changed files with 67 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,6 @@
import { Checkbox, DropdownMenu, Text } from '@status-im/components' import { Checkbox, DropdownMenu, Text } from '@status-im/components'
import { OptionsIcon, SortIcon } from '@status-im/icons' import { OptionsIcon, SortIcon } from '@status-im/icons'
import { useState } from 'react' import { useEffect, useState } from 'react'
import { YStack, XStack, Stack } from 'tamagui' import { YStack, XStack, Stack } from 'tamagui'
import ValidatorProfile from '../../../components/General/ValidatorProfile' import ValidatorProfile from '../../../components/General/ValidatorProfile'
@ -63,8 +63,21 @@ type ManagementTableProps = {
} }
const ManagementTable = ({ tab }: ManagementTableProps) => { const ManagementTable = ({ tab }: ManagementTableProps) => {
const [currentValidators, setCurrentValidators] = useState(validators)
const [searchValue, setSearchValue] = useState('') const [searchValue, setSearchValue] = useState('')
useEffect(() => {
setCurrentValidators(
validators
.filter(validator => validator.status === tab)
.filter(
validator =>
validator.number.toString().includes(searchValue) ||
validator.address.includes(searchValue),
),
)
}, [tab, searchValue])
const changeSearchValue = (value: string) => { const changeSearchValue = (value: string) => {
setSearchValue(value) setSearchValue(value)
} }
@ -159,66 +172,59 @@ const ManagementTable = ({ tab }: ManagementTableProps) => {
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{validators {currentValidators.map((validator, index) => (
.filter(validator => validator.status === tab) <tr key={index}>
.filter( <td>
validator => <Checkbox id={index.toString()} variant="outline" />
validator.address.includes(searchValue) || </td>
validator.number.toString().includes(searchValue), <td>
) <ValidatorProfile number={validator.number} address={validator.address} />
.map((validator, index) => ( </td>
<tr key={index}> <td>
<td> <Text size={15} color={'#647084'} weight={'semibold'}>
<Checkbox id={index.toString()} variant="outline" /> {validator.balance}
</td> </Text>
<td> </td>
<ValidatorProfile number={validator.number} address={validator.address} /> <td>
</td> <Text size={15} color={'#647084'} weight={'semibold'}>
<td> {validator.income}
<Text size={15} color={'#647084'} weight={'semibold'}> </Text>
{validator.balance} </td>
</Text> <td>
</td> <Text size={15} color={'#647084'}>
<td> {validator.proposals}
<Text size={15} color={'#647084'} weight={'semibold'}> </Text>
{validator.income} </td>
</Text> <td>
</td> <Text size={15} color={'#647084'}>
<td> {validator.attestations}
<Text size={15} color={'#647084'}> </Text>
{validator.proposals} </td>
</Text> <td>
</td> <Text size={15} color={'#647084'}>
<td> {validator.effectiveness}
<Text size={15} color={'#647084'}> </Text>
{validator.attestations} </td>
</Text> <td>
</td> <Text size={15} color={'#647084'}>
<td> {validator.deposits}
<Text size={15} color={'#647084'}> </Text>
{validator.effectiveness} </td>
</Text> <td>
</td> <Text size={15} color={'#647084'}>
<td> {validator.rank}
<Text size={15} color={'#647084'}> </Text>
{validator.deposits} </td>
</Text> <td>
</td> <Text size={15} color={'#2F80ED'} weight={'semibold'}>
<td> {validator.status}
<Text size={15} color={'#647084'}> </Text>
{validator.rank} </td>
</Text> <td>
</td> <OptionsIcon size={20} color="#647084" style={{ cursor: 'pointer' }} />
<td> </td>
<Text size={15} color={'#2F80ED'} weight={'semibold'}> </tr>
{validator.status} ))}
</Text>
</td>
<td>
<OptionsIcon size={20} color="#647084" style={{ cursor: 'pointer' }} />
</td>
</tr>
))}
</tbody> </tbody>
</table> </table>
</YStack> </YStack>