From d631096678a38132d633e9236100c2d2a512d48f Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Fri, 1 Sep 2023 00:21:09 +0300
Subject: [PATCH] Add workflow of validator setup

---
 .../ValidatorOnboarding/ValidatorOnboarding.tsx  | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
index 20eca687..9752bae8 100644
--- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
@@ -12,10 +12,14 @@ import { useNavigate } from 'react-router-dom'
 import ClientSetup from './ClientSetup/ClientSetup'
 import ConsensusSelection from './ValidatorSetup/ConsensusSelection'
 import Advisories from './Advisories/Advisories'
+import ValidatorSetup from './ValidatorSetup/ValidatorSetup'
+import ValidatorSetupInstall from './ValidatorSetup/ValidatorInstall'
 
 const ValidatorOnboarding = () => {
   const [activeStep, setActiveStep] = useState(0)
   const [isConfirmPhraseStage, setIsConfirmPhraseStage] = useState(false)
+  const [subStepValidatorSetup, setSubStepValidatorSetup] = useState(0)
+
   const navigate = useNavigate()
 
   const changeActiveStep = (step: number) => {
@@ -25,8 +29,13 @@ const ValidatorOnboarding = () => {
   const continueHandler = () => {
     if (activeStep === 4 && isConfirmPhraseStage === false) {
       setIsConfirmPhraseStage(true)
+    } else if (activeStep === 3 && subStepValidatorSetup < 2) {
+      setSubStepValidatorSetup(subStepValidatorSetup + 1)
     } else if (activeStep < 5) {
       setActiveStep(activeStep + 1)
+      if (activeStep === 3 && subStepValidatorSetup === 2) {
+        setSubStepValidatorSetup(0)
+      }
     } else {
       navigate('/')
     }
@@ -53,8 +62,11 @@ const ValidatorOnboarding = () => {
           {activeStep === 0 && <Overview />}
           {activeStep === 1 && <Advisories />}
           {activeStep === 2 && <ClientSetup />}
-          {activeStep === 3 && <ConsensusSelection />}
-          {/* <ValidatorSetup/> or <ValidatorSetupInstall/> for activeStep 3 */}
+
+          {activeStep === 3 && subStepValidatorSetup === 0 && <ValidatorSetup />}
+          {activeStep === 3 && subStepValidatorSetup === 1 && <ValidatorSetupInstall />}
+          {activeStep === 3 && subStepValidatorSetup === 2 && <ConsensusSelection />}
+          
           {activeStep === 4 && <KeyGeneration isConfirmPhraseStage={isConfirmPhraseStage} />}
           {activeStep === 5 && <Activation />}
         </ValidatorBoxWrapper>