From b89e4641a30375df890fe3ba2a5e632f962b5e7a Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Tue, 29 Aug 2023 09:20:41 +0300
Subject: [PATCH 1/7] feat: create RecoveryPhrase component

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

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
new file mode 100644
index 00000000..aa2ffcf0
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
@@ -0,0 +1,18 @@
+import { YStack } from 'tamagui'
+import { Button, InformationBox } from '@status-im/components'
+import { CloseCircleIcon } from '@status-im/icons'
+
+const RecoveryPhrase = () => {
+  return (
+    <YStack space={'$2'}>
+      <Button>Reveal Recovery Phrase</Button>
+      <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"
+        icon={<CloseCircleIcon size={20} />}
+      />
+    </YStack>
+  )
+}
+
+export default RecoveryPhrase

From 0cb1ad783d11da2d68afd4bcd75c49861816cf66 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Tue, 29 Aug 2023 09:20:56 +0300
Subject: [PATCH 2/7] feat: clear parent component

---
 .../KeyGeneration/KeyGeneration.tsx           | 26 +++----------------
 .../KeyGeneration/PasswordFields.tsx          | 11 +++++---
 2 files changed, 12 insertions(+), 25 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx
index 7d3cd5c9..deba084c 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx
@@ -1,10 +1,10 @@
 import { YStack } from 'tamagui'
 import KeyGenerationHeader from './KeyGenerationHeader'
 import RecoveryMechanism from './RecoveryMechanism'
-import { Button, InformationBox, Text } from '@status-im/components'
-import { CloseCircleIcon } from '@status-im/icons'
+import { Text } from '@status-im/components'
 import PasswordFields from './PasswordFields'
 import { useState } from 'react'
+import RecoveryPhrase from './RecoveryPhrase'
 
 const KeyGeneration = () => {
   const [selectedRecoveryMechanism, setSelectedRecoveryMechanism] = useState('Key Files')
@@ -23,26 +23,8 @@ const KeyGeneration = () => {
       <Text size={27} weight={'semibold'}>
         4 Validators
       </Text>
-      {selectedRecoveryMechanism === 'Key Files' && (
-        <>
-          <PasswordFields />
-          <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"
-            icon={<CloseCircleIcon size={20} />}
-          />
-        </>
-      )}
-      {selectedRecoveryMechanism === 'Recovery Phrase' && (
-        <>
-          <Button>Reveal Recovery Phrase</Button>
-          <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"
-            icon={<CloseCircleIcon size={20} />}
-          />
-        </>
-      )}
+      {selectedRecoveryMechanism === 'Key Files' && <PasswordFields />}
+      {selectedRecoveryMechanism === 'Recovery Phrase' && <RecoveryPhrase />}
     </YStack>
   )
 }
diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/PasswordFields.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/PasswordFields.tsx
index 6799a8f8..067f779a 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/PasswordFields.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/PasswordFields.tsx
@@ -1,9 +1,9 @@
 import { XStack, YStack } from 'tamagui'
-import { Button, Input, Text } from '@status-im/components'
-import { ClearIcon } from '@status-im/icons'
+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'
-import { useState } from 'react'
 
 const PasswordFields = () => {
   const [encryptedPassword, setEncryptedPassword] = useState('')
@@ -75,6 +75,11 @@ const PasswordFields = () => {
         </BorderBox>
       </XStack>
       <Button onPress={generateKeyFilesHandler}>Generate Key files</Button>
+      <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"
+        icon={<CloseCircleIcon size={20} />}
+      />
     </YStack>
   )
 }

From 82138ee24cf029ba466c0f67a0646b2dfc35b2ee Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Tue, 29 Aug 2023 09:22:17 +0300
Subject: [PATCH 3/7] fix: change password fields name to key files

---
 .../{PasswordFields.stories.ts => KeyFiles.stories.ts}    | 8 ++++----
 .../KeyGeneration/{PasswordFields.tsx => KeyFiles.tsx}    | 4 ++--
 .../ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx   | 4 ++--
 3 files changed, 8 insertions(+), 8 deletions(-)
 rename src/pages/ValidatorOnboarding/KeyGeneration/{PasswordFields.stories.ts => KeyFiles.stories.ts} (61%)
 rename src/pages/ValidatorOnboarding/KeyGeneration/{PasswordFields.tsx => KeyFiles.tsx} (97%)

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/PasswordFields.stories.ts b/src/pages/ValidatorOnboarding/KeyGeneration/KeyFiles.stories.ts
similarity index 61%
rename from src/pages/ValidatorOnboarding/KeyGeneration/PasswordFields.stories.ts
rename to src/pages/ValidatorOnboarding/KeyGeneration/KeyFiles.stories.ts
index 3c516369..c6149731 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/PasswordFields.stories.ts
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeyFiles.stories.ts
@@ -1,16 +1,16 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
-import PasswordFields from './PasswordFields'
+import KeyFiles from './KeyFiles'
 
 const meta = {
-  title: 'ValidatorOnboarding/PasswordFields',
-  component: PasswordFields,
+  title: 'ValidatorOnboarding/KeyFiles',
+  component: KeyFiles,
   parameters: {
     layout: 'centered',
   },
   tags: ['autodocs'],
   argTypes: {},
-} satisfies Meta<typeof PasswordFields>
+} satisfies Meta<typeof KeyFiles>
 
 export default meta
 type Story = StoryObj<typeof meta>
diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/PasswordFields.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/KeyFiles.tsx
similarity index 97%
rename from src/pages/ValidatorOnboarding/KeyGeneration/PasswordFields.tsx
rename to src/pages/ValidatorOnboarding/KeyGeneration/KeyFiles.tsx
index 067f779a..d4966d30 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/PasswordFields.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeyFiles.tsx
@@ -5,7 +5,7 @@ import { useState } from 'react'
 
 import BorderBox from '../../../components/General/BorderBox'
 
-const PasswordFields = () => {
+const KeyFiles = () => {
   const [encryptedPassword, setEncryptedPassword] = useState('')
   const [confirmEncryptedPassword, setConfirmEncryptedPassword] = useState('')
 
@@ -84,4 +84,4 @@ const PasswordFields = () => {
   )
 }
 
-export default PasswordFields
+export default KeyFiles
diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx
index deba084c..8d35ccb5 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx
@@ -2,7 +2,7 @@ import { YStack } from 'tamagui'
 import KeyGenerationHeader from './KeyGenerationHeader'
 import RecoveryMechanism from './RecoveryMechanism'
 import { Text } from '@status-im/components'
-import PasswordFields from './PasswordFields'
+import KeyFiles from './KeyFiles'
 import { useState } from 'react'
 import RecoveryPhrase from './RecoveryPhrase'
 
@@ -23,7 +23,7 @@ const KeyGeneration = () => {
       <Text size={27} weight={'semibold'}>
         4 Validators
       </Text>
-      {selectedRecoveryMechanism === 'Key Files' && <PasswordFields />}
+      {selectedRecoveryMechanism === 'Key Files' && <KeyFiles />}
       {selectedRecoveryMechanism === 'Recovery Phrase' && <RecoveryPhrase />}
     </YStack>
   )

From dd715fb6cc9ac7217e9c9d5054ad4fe0dcd6b896 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Tue, 29 Aug 2023 09:26:24 +0300
Subject: [PATCH 4/7] feat: create constants for key generation

---
 src/constants.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/constants.ts b/src/constants.ts
index 0967460f..c0a5a451 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -9,3 +9,9 @@ export const BAD_STORAGE_TEXT =
 export const BAD_CPU_CLOCK_RATE_TEXT = 'Your CPU clock rate is below the recommended 2.4GHz.'
 export const BAD_RAM_MEMORY_TEXT = 'There is insufficient RAM required for selected services.'
 export const BAD_NETWORK_TEXT = 'Network Latency is high.'
+
+/* Validator Onboarding */
+
+export const KEY_FILES = 'Key Files'
+export const RECOVERY_PHRASE = 'Recovery Phrase'
+export const BOTH_KEY_AND_RECOVERY = 'Both Key Files & Recovery Phrase'

From 0e5062d1a50775b17dd63444c735d0a14199fdfd Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Tue, 29 Aug 2023 09:27:02 +0300
Subject: [PATCH 5/7] feat: use new constants instead of magic strings

---
 .../ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx    | 7 ++++---
 .../KeyGeneration/RecoveryMechanism.stories.ts             | 3 ++-
 .../KeyGeneration/RecoveryMechanism.tsx                    | 7 ++++---
 .../KeyGeneration/RecoveryMechanismCard.stories.ts         | 5 +++--
 4 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx
index 8d35ccb5..34b8c8c1 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx
@@ -5,9 +5,10 @@ import { Text } from '@status-im/components'
 import KeyFiles from './KeyFiles'
 import { useState } from 'react'
 import RecoveryPhrase from './RecoveryPhrase'
+import { KEY_FILES, RECOVERY_PHRASE } from '../../../constants'
 
 const KeyGeneration = () => {
-  const [selectedRecoveryMechanism, setSelectedRecoveryMechanism] = useState('Key Files')
+  const [selectedRecoveryMechanism, setSelectedRecoveryMechanism] = useState(KEY_FILES)
 
   const handleRecoveryMechanismChange = (value: string) => {
     setSelectedRecoveryMechanism(value)
@@ -23,8 +24,8 @@ const KeyGeneration = () => {
       <Text size={27} weight={'semibold'}>
         4 Validators
       </Text>
-      {selectedRecoveryMechanism === 'Key Files' && <KeyFiles />}
-      {selectedRecoveryMechanism === 'Recovery Phrase' && <RecoveryPhrase />}
+      {selectedRecoveryMechanism === KEY_FILES && <KeyFiles />}
+      {selectedRecoveryMechanism === RECOVERY_PHRASE && <RecoveryPhrase />}
     </YStack>
   )
 }
diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanism.stories.ts b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanism.stories.ts
index 460ea0e5..02ad657a 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanism.stories.ts
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanism.stories.ts
@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
 import RecoveryMechanism from './RecoveryMechanism'
+import { KEY_FILES } from '../../../constants'
 
 const meta = {
   title: 'ValidatorOnboarding/RecoveryMechanism',
@@ -17,7 +18,7 @@ type Story = StoryObj<typeof meta>
 
 export const Page: Story = {
   args: {
-    selectedRecoveryMechanism: 'Key Files',
+    selectedRecoveryMechanism: KEY_FILES,
     handleRecoveryMechanismChange: () => {},
   },
 }
diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanism.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanism.tsx
index 8aa131d4..baaadc68 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanism.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanism.tsx
@@ -1,6 +1,7 @@
 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'
 
 type RecoveryMechanismProps = {
   selectedRecoveryMechanism: string
@@ -18,17 +19,17 @@ const RecoveryMechanism = ({
       </Text>
       <XStack space={'$4'} style={{ justifyContent: 'space-between', marginTop: '40px' }}>
         <RecoveryMechanismCard
-          value="Key Files"
+          value={KEY_FILES}
           selectedRecoveryMechanism={selectedRecoveryMechanism}
           handleRecoveryMechanismChange={handleRecoveryMechanismChange}
         />
         <RecoveryMechanismCard
-          value="Recovery Phrase"
+          value={RECOVERY_PHRASE}
           selectedRecoveryMechanism={selectedRecoveryMechanism}
           handleRecoveryMechanismChange={handleRecoveryMechanismChange}
         />
         <RecoveryMechanismCard
-          value="Both Key Files & Recovery Phrase"
+          value={BOTH_KEY_AND_RECOVERY}
           selectedRecoveryMechanism={selectedRecoveryMechanism}
           handleRecoveryMechanismChange={handleRecoveryMechanismChange}
         />
diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanismCard.stories.ts b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanismCard.stories.ts
index 6b570d50..8f3192b0 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanismCard.stories.ts
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanismCard.stories.ts
@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
 import RecoveryMechanismCard from './RecoveryMechanismCard'
+import { KEY_FILES } from '../../../constants'
 
 const meta = {
   title: 'ValidatorOnboarding/RecoveryMechanismCard',
@@ -17,8 +18,8 @@ type Story = StoryObj<typeof meta>
 
 export const Page: Story = {
   args: {
-    value: 'Key Files',
-    selectedRecoveryMechanism: 'Key Files',
+    value: KEY_FILES,
+    selectedRecoveryMechanism: KEY_FILES,
     handleRecoveryMechanismChange: () => {},
   },
 }

From 4e8a226e04c95cf03a18c50d66d16be12184a4ff Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Tue, 29 Aug 2023 09:30:53 +0300
Subject: [PATCH 6/7] feat: show different content for current state

---
 .../ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx  | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx
index 34b8c8c1..8ecf8033 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx
@@ -14,6 +14,11 @@ const KeyGeneration = () => {
     setSelectedRecoveryMechanism(value)
   }
 
+  const isKeyFiles = recoveryMechanism === KEY_FILES || recoveryMechanism === BOTH_KEY_AND_RECOVERY
+
+  const isRecoveryPhrase =
+    recoveryMechanism === RECOVERY_PHRASE || recoveryMechanism === BOTH_KEY_AND_RECOVERY
+
   return (
     <YStack space={'$2'} style={{ width: '100%', padding: '16px 32px', alignItems: 'start' }}>
       <KeyGenerationHeader />
@@ -24,8 +29,8 @@ const KeyGeneration = () => {
       <Text size={27} weight={'semibold'}>
         4 Validators
       </Text>
-      {selectedRecoveryMechanism === KEY_FILES && <KeyFiles />}
-      {selectedRecoveryMechanism === RECOVERY_PHRASE && <RecoveryPhrase />}
+      {isKeyFiles && <KeyFiles />}
+      {isRecoveryPhrase && <RecoveryPhrase />}
     </YStack>
   )
 }

From d7569410fca5541a6ff5e153d5ffd98608291884 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Tue, 29 Aug 2023 09:33:02 +0300
Subject: [PATCH 7/7] fix: remove useless report

---
 src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
index ba3f1d83..61d349b4 100644
--- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
@@ -11,7 +11,6 @@ import ValidatorBoxWrapper from './ValidatorBoxWrapper/ValidatorBoxWrapper'
 import { Button } from '@status-im/components'
 import { useNavigate } from 'react-router-dom'
 import ValidatorSetupInstall from './ValidatorSetup/ValidatorInstall'
-import ValidatorSetup from './ValidatorSetup/ValidatorSetup'
 
 const ValidatorOnboarding = () => {
   const [activeStep, setActiveStep] = useState(0)