feat: add state to every check and effect to check all

src/pages/ValidatorManagement/ManagementTable/ManagementTableBody.tsx

@@ -5,13 +5,18 @@ import ManagementTableRow from './ManagementTableRow'
 
 type ManagementTableBodyProps = {
   filteredValidators: Validator[]
+  isAllSelected: boolean
 }
 
-const ManagementTableBody = ({ filteredValidators }: ManagementTableBodyProps) => {
+const ManagementTableBody = ({ filteredValidators, isAllSelected }: ManagementTableBodyProps) => {
   return (
     <tbody>
       {filteredValidators.map(validator => (
-        <ManagementTableRow key={validator.address} validator={validator} />
+        <ManagementTableRow
+          key={validator.address}
+          validator={validator}
+          isAllSelected={isAllSelected}
+        />
       ))}
       {filteredValidators.length === 0 && (
         <tr>

src/pages/ValidatorManagement/ManagementTable/ManagementTableRow.stories.tsx

@@ -18,5 +18,6 @@ type Story = StoryObj<typeof meta>
 export const Default: Story = {
   args: {
     validator: VALIDATORS_DATA[0],
+    isAllSelected: false,
   },
 }

src/pages/ValidatorManagement/ManagementTable/ManagementTableRow.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react'
 import { Checkbox, Text } from '@status-im/components'
 import { OptionsIcon } from '@status-im/icons'
 
@@ -6,13 +7,29 @@ import { Validator } from './ManagementTable'
 
 type ManagementTableRowProps = {
   validator: Validator
+  isAllSelected: boolean
 }
 
-const ManagementTableRow = ({ validator }: ManagementTableRowProps) => {
+const ManagementTableRow = ({ validator, isAllSelected }: ManagementTableRowProps) => {
+  const [isSelected, setIsSelected] = useState(false)
+
+  useEffect(() => {
+    setIsSelected(isAllSelected)
+  }, [isAllSelected])
+
+  const handleChangeIsSelected = () => {
+    setIsSelected(state => !state)
+  }
+
   return (
     <tr>
       <td>
-        <Checkbox id={validator.address} variant="outline" />
+        <Checkbox
+          id={validator.address}
+          variant="outline"
+          selected={isSelected}
+          onCheckedChange={handleChangeIsSelected}
+        />
       </td>
       <td>
         <ValidatorProfile number={validator.number} address={validator.address} />