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