From 9e0057bc611781b89ba6854f432a1b9a926c52c6 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Fri, 1 Sep 2023 00:38:36 +0300
Subject: [PATCH] Create redux for validator onboarding

Create logic in redux for validator setup
---
 .../ValidatorSetup/ValidatorSetup.tsx         | 56 ++++++++-----------
 .../ValidatorSetup/slice.tsx                  | 21 +++++++
 src/redux/store.tsx                           |  2 +
 3 files changed, 45 insertions(+), 34 deletions(-)
 create mode 100644 src/redux/ValidatorOnboarding/ValidatorSetup/slice.tsx

diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx
index 658bacfa..30267bf5 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx
+++ b/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 &&
-          execClientCardsContent.map(e => (
-            <ExecClientCard
-              name={e.name}
-              icon={e.icon}
-              isSelected={e.isSelected || false}
-              isComingSoon={e.isComingSoon}
-            />
-          ))}
+        <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={'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">
diff --git a/src/redux/ValidatorOnboarding/ValidatorSetup/slice.tsx b/src/redux/ValidatorOnboarding/ValidatorSetup/slice.tsx
new file mode 100644
index 00000000..c4a7ae17
--- /dev/null
+++ b/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
diff --git a/src/redux/store.tsx b/src/redux/store.tsx
index 70d352db..713b0dd6 100644
--- a/src/redux/store.tsx
+++ b/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,
   },
 })