From 7dd5d4c1c3bf43b14dfc1a9ef0e7f00a51ed1433 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Tue, 29 Aug 2023 09:48:03 +0300
Subject: [PATCH 01/10] fix: add decorator to story

---
 .../ValidatorSetup/ValidatorSetup.stories.ts                    | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.stories.ts b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.stories.ts
index e4e3f07a..b8905326 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.stories.ts
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.stories.ts
@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
 import ValidatorSetup from './ValidatorSetup'
+import { withRouter } from 'storybook-addon-react-router-v6'
 
 const meta = {
   title: 'ValidatorOnboarding/ValidatorSetup',
@@ -10,6 +11,7 @@ const meta = {
   },
   tags: ['autodocs'],
   argTypes: {},
+  decorators: [withRouter()],
 } satisfies Meta<typeof ValidatorSetup>
 
 export default meta

From 1ffcc8ceeebe08db5658d8ec157098fc32517587 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Tue, 29 Aug 2023 09:49:28 +0300
Subject: [PATCH 02/10] fix: remove constant to not prerender

---
 .../ValidatorSetup/ValidatorSetup.tsx         | 49 ++++++++++---------
 1 file changed, 25 insertions(+), 24 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx
index 6d320492..658bacfa 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx
@@ -4,31 +4,32 @@ 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 = () => {
-  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,
-    },
-  ]
   return (
     <YStack style={{ width: '100%', padding: '16px 32px' }}>
       <XStack justifyContent={'space-between'}>

From 32176744a1995d06b4a285e85455e6eaf963a414 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Tue, 29 Aug 2023 09:53:59 +0300
Subject: [PATCH 03/10] feat: map cards

---
 .../KeyGeneration/KeyFiles.tsx                |  4 +--
 .../KeyGeneration/KeyGeneration.tsx           |  5 ++--
 .../KeyGeneration/RecoveryMechanism.tsx       | 26 ++++++++-----------
 3 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeyFiles.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/KeyFiles.tsx
index d4966d30..4b817e67 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/KeyFiles.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeyFiles.tsx
@@ -28,10 +28,10 @@ const KeyFiles = () => {
   }
 
   return (
-    <YStack space={'$2'}>
+    <YStack space={'$4'}>
       <XStack space={'$2'} style={{ justifyContent: 'space-between' }}>
         <YStack space={'$1'}>
-          <YStack space={'$2'}>
+          <YStack space={'$4'}>
             <Text size={15} color={'#647084'}>
               Encryption Password
             </Text>
diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx
index 94ec1d5c..d4044223 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx
@@ -1,9 +1,10 @@
 import { YStack } from 'tamagui'
+import { Text } from '@status-im/components'
+import { useState } from 'react'
+
 import KeyGenerationHeader from './KeyGenerationHeader'
 import RecoveryMechanism from './RecoveryMechanism'
-import { Text } from '@status-im/components'
 import KeyFiles from './KeyFiles'
-import { useState } from 'react'
 import RecoveryPhrase from './RecoveryPhrase'
 import { BOTH_KEY_AND_RECOVERY, KEY_FILES, RECOVERY_PHRASE } from '../../../constants'
 
diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanism.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanism.tsx
index eeae39cd..9bafac31 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanism.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanism.tsx
@@ -1,5 +1,6 @@
 import { Text } from '@status-im/components'
 import { XStack, YStack } from 'tamagui'
+
 import RecoveryMechanismCard from './RecoveryMechanismCard'
 import { BOTH_KEY_AND_RECOVERY, KEY_FILES, RECOVERY_PHRASE } from '../../../constants'
 
@@ -8,6 +9,8 @@ type RecoveryMechanismProps = {
   handleRecMechanismChange: (value: string) => void
 }
 
+const cards = [KEY_FILES, RECOVERY_PHRASE, BOTH_KEY_AND_RECOVERY]
+
 const RecoveryMechanism = ({
   recoveryMechanism,
   handleRecMechanismChange,
@@ -18,21 +21,14 @@ const RecoveryMechanism = ({
         Select Recovery Mechanism
       </Text>
       <XStack space={'$4'} style={{ justifyContent: 'space-between', marginTop: '40px' }}>
-        <RecoveryMechanismCard
-          value={KEY_FILES}
-          recoveryMechanism={recoveryMechanism}
-          handleRecMechanismChange={handleRecMechanismChange}
-        />
-        <RecoveryMechanismCard
-          value={RECOVERY_PHRASE}
-          recoveryMechanism={recoveryMechanism}
-          handleRecMechanismChange={handleRecMechanismChange}
-        />
-        <RecoveryMechanismCard
-          value={BOTH_KEY_AND_RECOVERY}
-          recoveryMechanism={recoveryMechanism}
-          handleRecMechanismChange={handleRecMechanismChange}
-        />
+        {cards.map(value => (
+          <RecoveryMechanismCard
+            key={value}
+            value={value}
+            recoveryMechanism={recoveryMechanism}
+            handleRecMechanismChange={handleRecMechanismChange}
+          />
+        ))}
       </XStack>
     </YStack>
   )

From 5b1964e12a3df308c3f02e722a1afb14f23196f0 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Tue, 29 Aug 2023 09:55:21 +0300
Subject: [PATCH 04/10] fix: remove not used imports giving error

---
 .../ValidatorOnboarding/ValidatorSetup/CompleteSetup.tsx      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/CompleteSetup.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/CompleteSetup.tsx
index f602642f..39d6e817 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/CompleteSetup.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/CompleteSetup.tsx
@@ -1,6 +1,6 @@
-import { XStack, Stack, YStack } from 'tamagui'
+import { XStack, YStack } from 'tamagui'
 import { Text } from '@status-im/components'
-import { useState } from 'react'
+
 const CompleteSetup = () => {
   return (
     <YStack style={{ width: '100%', padding: '16px 32px' }}>

From 7b9999d7089a230926c609696fe352e22f03f461 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Tue, 29 Aug 2023 10:16:35 +0300
Subject: [PATCH 05/10] fix: spacing and widths of key files

---
 .../KeyGeneration/KeyFiles.tsx                | 23 ++++++++++++-------
 .../KeyGeneration/KeyGeneration.tsx           | 10 ++++----
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeyFiles.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/KeyFiles.tsx
index 4b817e67..58143902 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/KeyFiles.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeyFiles.tsx
@@ -1,10 +1,8 @@
-import { XStack, YStack } from 'tamagui'
+import { Stack, XStack, YStack } from 'tamagui'
 import { Button, InformationBox, Input, Text } from '@status-im/components'
 import { ClearIcon, CloseCircleIcon } from '@status-im/icons'
 import { useState } from 'react'
 
-import BorderBox from '../../../components/General/BorderBox'
-
 const KeyFiles = () => {
   const [encryptedPassword, setEncryptedPassword] = useState('')
   const [confirmEncryptedPassword, setConfirmEncryptedPassword] = useState('')
@@ -29,8 +27,8 @@ const KeyFiles = () => {
 
   return (
     <YStack space={'$4'}>
-      <XStack space={'$2'} style={{ justifyContent: 'space-between' }}>
-        <YStack space={'$1'}>
+      <XStack space={'$2'} style={{ justifyContent: 'space-between', width: '100%' }}>
+        <YStack space={'$4'} style={{ width: '66%' }}>
           <YStack space={'$4'}>
             <Text size={15} color={'#647084'}>
               Encryption Password
@@ -68,13 +66,22 @@ const KeyFiles = () => {
             />
           </YStack>
         </YStack>
-        <BorderBox>
+        <YStack
+          style={{
+            border: '1px solid #DCE0E5',
+            borderRadius: '16px',
+            padding: '12px 16px',
+            width: '32%',
+          }}
+        >
           <Text size={15} weight={'semibold'}>
             Download Key Files
           </Text>
-        </BorderBox>
+        </YStack>
       </XStack>
-      <Button onPress={generateKeyFilesHandler}>Generate Key files</Button>
+      <Stack style={{ width: 'fit-content' }}>
+        <Button onPress={generateKeyFilesHandler}>Generate Key files</Button>
+      </Stack>
       <InformationBox
         message="You should see that you have one keystore per validator. This keystore contains your signing key, encrypted with your password. Warning: Do not store keys on multiple (backup) validator clients at once"
         variant="error"
diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx
index d4044223..5ba1dbe8 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx
@@ -1,4 +1,4 @@
-import { YStack } from 'tamagui'
+import { Stack, YStack } from 'tamagui'
 import { Text } from '@status-im/components'
 import { useState } from 'react'
 
@@ -27,9 +27,11 @@ const KeyGeneration = () => {
         recoveryMechanism={recoveryMechanism}
         handleRecMechanismChange={handleRecMechanismChange}
       />
-      <Text size={27} weight={'semibold'}>
-        4 Validators
-      </Text>
+      <Stack style={{ margin: '30px 0' }}>
+        <Text size={27} weight={'semibold'}>
+          4 Validators
+        </Text>
+      </Stack>
       {isKeyFiles && <KeyFiles />}
       {isRecoveryPhrase && <RecoveryPhrase />}
     </YStack>

From 851448cca76f4fbb24c28ae97a00693a59a60832 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Tue, 29 Aug 2023 10:36:10 +0300
Subject: [PATCH 06/10] feat: add blur phrases with handler and sizes

---
 .../KeyGeneration/RecoveryPhrase.tsx          | 32 ++++++++++++++++---
 1 file changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
index aa2ffcf0..531c707f 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
@@ -1,11 +1,35 @@
-import { YStack } from 'tamagui'
-import { Button, InformationBox } from '@status-im/components'
+import { Stack, YStack } from 'tamagui'
+import { Button, InformationBox, Text } from '@status-im/components'
 import { CloseCircleIcon } from '@status-im/icons'
+import { useState } from 'react'
 
 const RecoveryPhrase = () => {
+  const [isReveal, setIsReveal] = useState(false)
+
+  const revealHandler = () => {
+    setIsReveal(state => !state)
+  }
+
   return (
-    <YStack space={'$2'}>
-      <Button>Reveal Recovery Phrase</Button>
+    <YStack space={'$4'} style={{ width: '100%' }}>
+      <Stack
+        style={{
+          border: `1px solid #2A4AF566`,
+          borderRadius: '16px',
+          padding: '12px 16px',
+          backgroundColor: '#f4f6fe',
+          width: '100%',
+        }}
+      >
+        <Stack style={{ filter: `blur(${isReveal ? '0px' : '4px'})` }}>
+          <Text size={15} weight={'semibold'}>
+            asdf
+          </Text>
+        </Stack>
+      </Stack>
+      <Stack style={{ width: 'fit-content', marginBottom: '12px' }}>
+        <Button onPress={revealHandler}>Reveal Recovery Phrase</Button>
+      </Stack>
       <InformationBox
         message="Write down and keep your Secret Recovery Phrase in a secure place. Make sure no one is looking at your screen."
         variant="error"

From 8dd77585174cf97af5d7566e8fb1a5d38f7b664d Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Tue, 29 Aug 2023 10:38:33 +0300
Subject: [PATCH 07/10] feat: add dynamic margin for both states

---
 .../ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx   | 2 +-
 .../ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx  | 8 ++++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx
index 5ba1dbe8..f0b06f99 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx
@@ -33,7 +33,7 @@ const KeyGeneration = () => {
         </Text>
       </Stack>
       {isKeyFiles && <KeyFiles />}
-      {isRecoveryPhrase && <RecoveryPhrase />}
+      {isRecoveryPhrase && <RecoveryPhrase isKeyFiles={isKeyFiles} />}
     </YStack>
   )
 }
diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
index 531c707f..cd28c1f0 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
@@ -3,7 +3,11 @@ import { Button, InformationBox, Text } from '@status-im/components'
 import { CloseCircleIcon } from '@status-im/icons'
 import { useState } from 'react'
 
-const RecoveryPhrase = () => {
+type RecoveryPhraseProps = {
+  isKeyFiles: boolean
+}
+
+const RecoveryPhrase = ({ isKeyFiles }: RecoveryPhraseProps) => {
   const [isReveal, setIsReveal] = useState(false)
 
   const revealHandler = () => {
@@ -11,7 +15,7 @@ const RecoveryPhrase = () => {
   }
 
   return (
-    <YStack space={'$4'} style={{ width: '100%' }}>
+    <YStack space={'$4'} style={{ width: '100%', marginTop: isKeyFiles ? '20px' : '0px' }}>
       <Stack
         style={{
           border: `1px solid #2A4AF566`,

From a7c70823aa1bad8ebb6f8ba7199c5589ddc4edd5 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Tue, 29 Aug 2023 10:43:12 +0300
Subject: [PATCH 08/10] fix: size of download key files

---
 src/pages/ValidatorOnboarding/KeyGeneration/KeyFiles.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeyFiles.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/KeyFiles.tsx
index 58143902..cc0c105e 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/KeyFiles.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeyFiles.tsx
@@ -72,6 +72,7 @@ const KeyFiles = () => {
             borderRadius: '16px',
             padding: '12px 16px',
             width: '32%',
+            marginTop: '3.4%',
           }}
         >
           <Text size={15} weight={'semibold'}>

From 0916161e3c6c5bc62c8be8ef63f6c88417866615 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Tue, 29 Aug 2023 10:58:16 +0300
Subject: [PATCH 09/10] feat: create Confirm Recovery Phrase component

---
 .../KeyGeneration/ConfirmRecoveryPhrase.tsx        | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase.tsx

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase.tsx
new file mode 100644
index 00000000..02957565
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase.tsx
@@ -0,0 +1,14 @@
+import { YStack } from 'tamagui'
+import KeyGenerationTitle from './KeyGenerationTitle'
+import { Text } from '@status-im/components'
+
+const ConfirmRecoveryPhrase = () => {
+  return (
+    <YStack space={'$4'} style={{ width: '100%', marginTop: '20px' }}>
+      <KeyGenerationTitle />
+      <Text size={27}>Confirm Recovery Phrase</Text>
+    </YStack>
+  )
+}
+
+export default ConfirmRecoveryPhrase

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 10/10] 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 }}>