feat: create flow for confirming recovery phrase

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 />
+      {isConfirmPhraseStage && <ConfirmRecoveryPhrase />}
-      <RecoveryMechanism
+      {isConfirmPhraseStage === false && (
-        recoveryMechanism={recoveryMechanism}
+        <>
-        handleRecMechanismChange={handleRecMechanismChange}
+          <KeyGenerationHeader />
-      />
+          <RecoveryMechanism
-      <Stack style={{ margin: '30px 0' }}>
+            recoveryMechanism={recoveryMechanism}
-        <Text size={27} weight={'semibold'}>
+            handleRecMechanismChange={handleRecMechanismChange}
-          4 Validators
+          />
-        </Text>
+          <Stack style={{ margin: '30px 0' }}>
-      </Stack>
+            <Text size={27} weight={'semibold'}>
-      {isKeyFiles && <KeyFiles />}
+              4 Validators
-      {isRecoveryPhrase && <RecoveryPhrase isKeyFiles={isKeyFiles} />}
+            </Text>
+          </Stack>
+          {isKeyFiles && <KeyFiles />}
+          {isRecoveryPhrase && <RecoveryPhrase isKeyFiles={isKeyFiles} />}
+        </>
+      )}
     </YStack>
   )
 }

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 }}>