Create redux for validator onboarding

Create logic in redux for validator setup

src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx

@@ -4,31 +4,6 @@ import { Text } from '@status-im/components'
 import ExecClientCard from './ExecClientCard'
 import { Link } from 'react-router-dom'
 
-const execClientCardsContent = [
-  {
-    name: 'Nethermind',
-    icon: '/icons/nethermind-circle.png',
-  },
-  {
-    name: 'Besu',
-    icon: '/icons/hyperledger-besu-circle.png',
-  },
-  {
-    name: 'Geth',
-    icon: '/icons/gethereum-mascot-circle.png',
-    isSelected: true,
-  },
-  {
-    name: 'Erigon',
-    icon: '/icons/erigon-circle.png',
-  },
-  {
-    name: 'Nimbus',
-    icon: '/icons/NimbusDisabled.svg',
-    isComingSoon: true,
-  },
-]
-
 const ValidatorSetup = () => {
   return (
     <YStack style={{ width: '100%', padding: '16px 32px' }}>
@@ -58,15 +33,28 @@ const ValidatorSetup = () => {
         Select Execution client
       </TextTam>
       <XStack justifyContent={'space-between'}>
-        {execClientCardsContent.length &&
+        <ExecClientCard
-          execClientCardsContent.map(e => (
+          name={'Nethermind'}
-            <ExecClientCard
+          icon={'/icons/nethermind-circle.png'}
-              name={e.name}
+          isSelected={false}
-              icon={e.icon}
+        />
-              isSelected={e.isSelected || false}
+        <ExecClientCard
-              isComingSoon={e.isComingSoon}
+          name={'Besu'}
-            />
+          icon={'/icons/hyperledger-besu-circle.png'}
-          ))}
+          isSelected={false}
+        />
+        <ExecClientCard
+          name={'Geth'}
+          icon={'/icons/gethereum-mascot-circle.png'}
+          isSelected={true}
+        />
+        <ExecClientCard name={'Erigon'} icon={'/icons/erigon-circle.png'} isSelected={false} />
+        <ExecClientCard
+          name={'Nimbus'}
+          icon={'/icons/NimbusDisabled.svg'}
+          isSelected={false}
+          isComingSoon={true}
+        />
       </XStack>
       <Stack marginTop={'10%'}>
         <Text size={15} weight={'semibold'} color="#2A4CF4">

src/redux/ValidatorOnboarding/ValidatorSetup/slice.tsx

@@ -0,0 +1,21 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+
+interface ExecClientState {
+  selectedClient: string
+}
+const initialState: ExecClientState = {
+  selectedClient: '',
+}
+const execClientSlice = createSlice({
+  name: 'execClient',
+  initialState,
+  reducers: {
+    selectClient: (state: ExecClientState, action: PayloadAction<string>) => {
+      state.selectedClient = action.payload
+    },
+  },
+})
+
+export const { selectClient } = execClientSlice.actions
+
+export default execClientSlice.reducer

src/redux/store.tsx

@@ -1,11 +1,13 @@
 import { configureStore } from '@reduxjs/toolkit'
 import deviceHealthReducer from './deviceHealthCheck/slice'
 import pinnedMessageReducer from './PinnedMessage/slice'
+import execClientReducer from './ValidatorOnboarding/ValidatorSetup/slice'
 
 const store = configureStore({
   reducer: {
     deviceHealth: deviceHealthReducer,
     pinnedMessage: pinnedMessageReducer,
+    execClient: execClientReducer,
   },
 })