Implement redux in validator setup

src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusSelection.tsx

@@ -4,12 +4,16 @@ import { Text } from '@status-im/components'
 import ConsensusGaugeCard from './ConsensusGaugeCard'
 import ConsensusClientCard from './ConsensusClientCard'
 import LinkWithArrow from '../../../components/General/LinkWithArrow'
+import { useSelector } from 'react-redux'
+import { RootState } from '../../../redux/store'
 
 const ConsensusSelection = () => {
+  const selectedClient = useSelector((state: RootState) => state.execClient.selectedClient)
+
   const a = [
     {
-      name: 'Nimbus',
+      name: selectedClient,
-      icon: '/icons/Nimbus-black.png',
+      icon: '/icons/Nimbus-black.png', // FIXL change icon based on selectedClient
     },
   ]
   return (
@@ -53,7 +57,7 @@ const ConsensusSelection = () => {
         <YStack width={'67%'} space={'$4'}>
           <Text size={27}>The resource efficient Ethereum Clients.</Text>
           <Text size={15}>
-            Nimbus is a client implementation for both execution and consensus layers that strives
+            {selectedClient} is a client implementation for both execution and consensus layers that strives
             to be as lightweight as possible in terms of resources used. This allows it to perform
             well on embedded systems, resource-restricted devices -- including Raspberry Pis -- and
             multi-purpose servers.

src/pages/ValidatorOnboarding/ValidatorSetup/ExecClientCard.tsx

@@ -3,6 +3,7 @@ import Icon from '../../../components/General/Icon'
 import { Text } from '@status-im/components'
 import { selectClient } from '../../../redux/ValidatorOnboarding/ValidatorSetup/slice'
 import { useDispatch, useSelector } from 'react-redux'
+import { RootState } from '../../../redux/store'
 
 type ExecClientCardProps = {
   name: string
@@ -12,9 +13,9 @@ type ExecClientCardProps = {
 }
 const ExecClientCard = ({ name, icon, isComingSoon }: ExecClientCardProps) => {
   const dispatch = useDispatch()
-  const selectedClient = useSelector(selectClient)
+  const selectedClient = useSelector((state: RootState) => state.execClient.selectedClient)
-  const isSelected = selectedClient.payload.execClient.selectedClient === name
+  const isSelected = selectedClient === name
- 
+
   return (
     <YStack
       style={{

src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstall.tsx

@@ -4,8 +4,11 @@ import { CloseCircleIcon } from '@status-im/icons'
 import OsCard from './OsCard'
 import SyntaxHighlighterBox from './SyntaxHighlighter'
 import { useState } from 'react'
+import { useSelector } from 'react-redux'
+import { RootState } from '../../../redux/store'
 const ValidatorSetupInstall = () => {
   const [selectedOs, setSelectedOs] = useState('Mac')
+  const selectedClient = useSelector((state: RootState) => state.execClient.selectedClient)
   return (
     <YStack style={{ width: '100%', padding: '16px 32px' }}>
       <XStack justifyContent={'space-between'} style={{ marginBottom: '10px' }}>
@@ -18,7 +21,7 @@ const ValidatorSetupInstall = () => {
         <Stack style={{ marginBottom: '4px' }}>
           <YStack space={'$3'}>
             <Text size={19} weight={'semibold'}>
-              Geth
+              {selectedClient}
             </Text>
 
             <Text size={15} color="#647084">
@@ -39,7 +42,7 @@ const ValidatorSetupInstall = () => {
               }}
               space={'$3'}
             >
-              <Text size={27}> Installing Geth</Text>
+              <Text size={27}> Installing {selectedClient}</Text>
               <Text size={19} color="#647084" weight={'regular'}>
                 There are several ways to install Geth, including via a package manager, downloading
                 a pre-built bundle, running as a docker container or building from downloaded source

src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx

@@ -36,7 +36,7 @@ const ValidatorSetup = () => {
         <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={'Erigon'} icon={'/icons/erigon-circle.png'} />
         <ExecClientCard name={'Nimbus'} icon={'/icons/NimbusDisabled.svg'} isComingSoon={true} />
       </XStack>
       <Stack marginTop={'10%'}>