feat: use new constants instead of magic strings

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

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: () => {},
   },
 }

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

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: () => {},
   },
 }