Implement logic for validator setuo workflow

src/pages/ValidatorOnboarding/ValidatorSetup/ExecClientCard.tsx

@@ -1,16 +1,20 @@
 import { Stack, XStack, YStack } from 'tamagui'
 import Icon from '../../../components/General/Icon'
 import { Text } from '@status-im/components'
-
-// make func component
+import { selectClient } from '../../../redux/ValidatorOnboarding/ValidatorSetup/slice'
+import { useDispatch, useSelector } from 'react-redux'
 
 type ExecClientCardProps = {
   name: string
   icon: string
-  isSelected?: boolean
+
   isComingSoon?: boolean
 }
-const ExecClientCard = ({ name, icon, isSelected, isComingSoon }: ExecClientCardProps) => {
+const ExecClientCard = ({ name, icon, isComingSoon }: ExecClientCardProps) => {
+  const dispatch = useDispatch()
+  const selectedClient = useSelector(selectClient)
+  const isSelected = selectedClient.payload.execClient.selectedClient === name
+ 
   return (
     <YStack
       style={{
@@ -25,6 +29,9 @@ const ExecClientCard = ({ name, icon, isSelected, isComingSoon }: ExecClientCard
         width: '19%',
       }}
       space={'$12'}
+      onClick={() => {
+        dispatch(selectClient(name))
+      }}
     >
       <Stack>
         <Text size={27} weight={'semibold'} color={isComingSoon ? '#DCE0E5' : ''}>
@@ -48,7 +55,7 @@ const ExecClientCard = ({ name, icon, isSelected, isComingSoon }: ExecClientCard
           </XStack>
         )}
       </Stack>
-      <Icon src={icon} width={100} height={100}  />
+      <Icon src={icon} width={100} height={100} />
     </YStack>
   )
 }

src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx

@@ -33,28 +33,11 @@ const ValidatorSetup = () => {
         Select Execution client
       </TextTam>
       <XStack justifyContent={'space-between'}>
-        <ExecClientCard
-          name={'Nethermind'}
-          icon={'/icons/nethermind-circle.png'}
-          isSelected={false}
-        />
-        <ExecClientCard
-          name={'Besu'}
-          icon={'/icons/hyperledger-besu-circle.png'}
-          isSelected={false}
-        />
-        <ExecClientCard
-          name={'Geth'}
-          icon={'/icons/gethereum-mascot-circle.png'}
-          isSelected={true}
-        />
+        <ExecClientCard name={'Nethermind'} icon={'/icons/nethermind-circle.png'} />
+        <ExecClientCard name={'Besu'} icon={'/icons/hyperledger-besu-circle.png'} />
+        <ExecClientCard name={'Geth'} icon={'/icons/gethereum-mascot-circle.png'} />
         <ExecClientCard name={'Erigon'} icon={'/icons/erigon-circle.png'} isSelected={false} />
-        <ExecClientCard
-          name={'Nimbus'}
-          icon={'/icons/NimbusDisabled.svg'}
-          isSelected={false}
-          isComingSoon={true}
-        />
+        <ExecClientCard name={'Nimbus'} icon={'/icons/NimbusDisabled.svg'} isComingSoon={true} />
       </XStack>
       <Stack marginTop={'10%'}>
         <Text size={15} weight={'semibold'} color="#2A4CF4">