From 7d6661ded15d33fd469ba7e14827150140a9661e Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Fri, 1 Sep 2023 00:59:48 +0300
Subject: [PATCH] Implement redux in validator setup

---
 .../ValidatorSetup/ConsensusSelection.tsx              | 10 +++++++---
 .../ValidatorSetup/ExecClientCard.tsx                  |  7 ++++---
 .../ValidatorSetup/ValidatorInstall.tsx                |  7 +++++--
 .../ValidatorSetup/ValidatorSetup.tsx                  |  2 +-
 4 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusSelection.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusSelection.tsx
index db2658e8..7ec5762b 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusSelection.tsx
+++ b/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',
-      icon: '/icons/Nimbus-black.png',
+      name: selectedClient,
+      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.
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ExecClientCard.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ExecClientCard.tsx
index fcb770ed..f0e2d06d 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ExecClientCard.tsx
+++ b/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 isSelected = selectedClient.payload.execClient.selectedClient === name
- 
+  const selectedClient = useSelector((state: RootState) => state.execClient.selectedClient)
+  const isSelected = selectedClient === name
+
   return (
     <YStack
       style={{
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstall.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstall.tsx
index 30e52b25..763275b0 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstall.tsx
+++ b/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
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx
index ac1a053f..23b27e2f 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx
+++ b/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%'}>