From 092d70ea472de64160f99e2e9b666742924d816a Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Tue, 29 Aug 2023 11:08:44 +0300
Subject: [PATCH] feat: create flow for confirming recovery phrase

---
 .../KeyGeneration/KeyGeneration.tsx           | 44 ++++++++++++-------
 .../ValidatorOnboarding.tsx                   |  7 ++-
 2 files changed, 32 insertions(+), 19 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx
index f0b06f99..79fca551 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx
@@ -7,33 +7,43 @@ import RecoveryMechanism from './RecoveryMechanism'
 import KeyFiles from './KeyFiles'
 import RecoveryPhrase from './RecoveryPhrase'
 import { BOTH_KEY_AND_RECOVERY, KEY_FILES, RECOVERY_PHRASE } from '../../../constants'
+import ConfirmRecoveryPhrase from './ConfirmRecoveryPhrase'
 
-const KeyGeneration = () => {
+type KeyGenerationProps = {
+  isConfirmPhraseStage: boolean
+}
+
+const KeyGeneration = ({ isConfirmPhraseStage }: KeyGenerationProps) => {
   const [recoveryMechanism, setRecoveryMechanism] = useState(KEY_FILES)
 
-  const handleRecMechanismChange = (value: string) => {
-    setRecoveryMechanism(value)
-  }
-
   const isKeyFiles = recoveryMechanism === KEY_FILES || recoveryMechanism === BOTH_KEY_AND_RECOVERY
 
   const isRecoveryPhrase =
     recoveryMechanism === RECOVERY_PHRASE || recoveryMechanism === BOTH_KEY_AND_RECOVERY
 
+  const handleRecMechanismChange = (value: string) => {
+    setRecoveryMechanism(value)
+  }
+
   return (
     <YStack space={'$2'} style={{ width: '100%', padding: '16px 32px', alignItems: 'start' }}>
-      <KeyGenerationHeader />
-      <RecoveryMechanism
-        recoveryMechanism={recoveryMechanism}
-        handleRecMechanismChange={handleRecMechanismChange}
-      />
-      <Stack style={{ margin: '30px 0' }}>
-        <Text size={27} weight={'semibold'}>
-          4 Validators
-        </Text>
-      </Stack>
-      {isKeyFiles && <KeyFiles />}
-      {isRecoveryPhrase && <RecoveryPhrase isKeyFiles={isKeyFiles} />}
+      {isConfirmPhraseStage && <ConfirmRecoveryPhrase />}
+      {isConfirmPhraseStage === false && (
+        <>
+          <KeyGenerationHeader />
+          <RecoveryMechanism
+            recoveryMechanism={recoveryMechanism}
+            handleRecMechanismChange={handleRecMechanismChange}
+          />
+          <Stack style={{ margin: '30px 0' }}>
+            <Text size={27} weight={'semibold'}>
+              4 Validators
+            </Text>
+          </Stack>
+          {isKeyFiles && <KeyFiles />}
+          {isRecoveryPhrase && <RecoveryPhrase isKeyFiles={isKeyFiles} />}
+        </>
+      )}
     </YStack>
   )
 }
diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
index 61d349b4..9c7f1eca 100644
--- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
@@ -14,6 +14,7 @@ import ValidatorSetupInstall from './ValidatorSetup/ValidatorInstall'
 
 const ValidatorOnboarding = () => {
   const [activeStep, setActiveStep] = useState(0)
+  const [isConfirmPhraseStage, setIsConfirmPhraseStage] = useState(false)
   const navigate = useNavigate()
 
   const changeActiveStep = (step: number) => {
@@ -21,7 +22,9 @@ const ValidatorOnboarding = () => {
   }
 
   const continueHandler = () => {
-    if (activeStep < 4) {
+    if (activeStep === 3 && isConfirmPhraseStage === false) {
+      setIsConfirmPhraseStage(true)
+    } else if (activeStep < 4) {
       setActiveStep(activeStep + 1)
     } else {
       navigate('/')
@@ -49,7 +52,7 @@ const ValidatorOnboarding = () => {
           {activeStep === 0 && <Overview />}
           {activeStep === 1 && <Advicsories />}
           {activeStep === 2 && <ValidatorSetupInstall />}
-          {activeStep === 3 && <KeyGeneration />}
+          {activeStep === 3 && <KeyGeneration isConfirmPhraseStage={isConfirmPhraseStage} />}
           {activeStep === 4 && <Activation />}
         </ValidatorBoxWrapper>
         <Stack style={{ alignItems: 'end', width: '100%', marginTop: '16px', zIndex: 999 }}>