feat: change key files to keystore files

src/constants.ts

@@ -12,6 +12,6 @@ export const BAD_NETWORK_TEXT = 'Network Latency is high.'
 
 /* Validator Onboarding */
 
-export const KEY_FILES = 'Key Files'
+export const KEYSTORE_FILES = 'KeystoreFiles'
 export const RECOVERY_PHRASE = 'Recovery Phrase'
-export const BOTH_KEY_AND_RECOVERY = 'Both Key Files & Recovery Phrase'
+export const BOTH_KEY_AND_RECOVERY = 'Both KeystoreFiles & Recovery Phrase'

src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx

@@ -4,9 +4,9 @@ import { useState } from 'react'
 
 import KeyGenerationHeader from './KeyGenerationHeader'
 import RecoveryMechanism from './RecoveryMechanism'
-import KeyFiles from './KeyFiles'
+import KeystoreFiles from './KeystoreFiles'
 import RecoveryPhrase from './RecoveryPhrase'
-import { BOTH_KEY_AND_RECOVERY, KEY_FILES, RECOVERY_PHRASE } from '../../../constants'
+import { BOTH_KEY_AND_RECOVERY, KEYSTORE_FILES, RECOVERY_PHRASE } from '../../../constants'
 import ConfirmRecoveryPhrase from './ConfirmRecoveryPhrase'
 
 type KeyGenerationProps = {
@@ -14,9 +14,10 @@ type KeyGenerationProps = {
 }
 
 const KeyGeneration = ({ isConfirmPhraseStage }: KeyGenerationProps) => {
-  const [recoveryMechanism, setRecoveryMechanism] = useState(KEY_FILES)
+  const [recoveryMechanism, setRecoveryMechanism] = useState(KEYSTORE_FILES)
 
-  const isKeyFiles = recoveryMechanism === KEY_FILES || recoveryMechanism === BOTH_KEY_AND_RECOVERY
+  const isKeystoreFiles =
+    recoveryMechanism === KEYSTORE_FILES || recoveryMechanism === BOTH_KEY_AND_RECOVERY
 
   const isRecoveryPhrase =
     recoveryMechanism === RECOVERY_PHRASE || recoveryMechanism === BOTH_KEY_AND_RECOVERY
@@ -40,8 +41,8 @@ const KeyGeneration = ({ isConfirmPhraseStage }: KeyGenerationProps) => {
               4 Validators
             </Text>
           </Stack>
-          {isKeyFiles && <KeyFiles />}
+          {isKeystoreFiles && <KeystoreFiles />}
-          {isRecoveryPhrase && <RecoveryPhrase isKeyFiles={isKeyFiles} />}
+          {isRecoveryPhrase && <RecoveryPhrase isKeystoreFiles={isKeystoreFiles} />}
         </>
       )}
     </YStack>

src/pages/ValidatorOnboarding/KeyGeneration/KeystoreFiles.stories.ts

@@ -1,16 +1,16 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
-import KeyFiles from './KeyFiles'
+import KeystoreFiles from './KeystoreFiles'
 
 const meta = {
-  title: 'ValidatorOnboarding/KeyFiles',
+  title: 'ValidatorOnboarding/KeystoreFiles',
-  component: KeyFiles,
+  component: KeystoreFiles,
   parameters: {
     layout: 'centered',
   },
   tags: ['autodocs'],
   argTypes: {},
-} satisfies Meta<typeof KeyFiles>
+} satisfies Meta<typeof KeystoreFiles>
 
 export default meta
 type Story = StoryObj<typeof meta>

src/pages/ValidatorOnboarding/KeyGeneration/KeystoreFiles.tsx

@@ -3,11 +3,11 @@ import { Button, InformationBox, Input, Text } from '@status-im/components'
 import { ClearIcon, CloseCircleIcon } from '@status-im/icons'
 import { useState } from 'react'
 
-const KeyFiles = () => {
+const KeystoreFiles = () => {
   const [encryptedPassword, setEncryptedPassword] = useState('')
   const [confirmEncryptedPassword, setConfirmEncryptedPassword] = useState('')
 
-  const generateKeyFilesHandler = () => {}
+  const generateKeystoreFilesHandler = () => {}
 
   const changeEncryptedPasswordHandler = (e: any) => {
     setEncryptedPassword(e.target.value)
@@ -81,7 +81,7 @@ const KeyFiles = () => {
         </YStack>
       </XStack>
       <Stack style={{ width: 'fit-content' }}>
-        <Button onPress={generateKeyFilesHandler}>Generate Key files</Button>
+        <Button onPress={generateKeystoreFilesHandler}>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"
@@ -92,4 +92,4 @@ const KeyFiles = () => {
   )
 }
 
-export default KeyFiles
+export default KeystoreFiles

src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanism.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
 import RecoveryMechanism from './RecoveryMechanism'
-import { KEY_FILES } from '../../../constants'
+import { KEYSTORE_FILES } from '../../../constants'
 
 const meta = {
   title: 'ValidatorOnboarding/RecoveryMechanism',
@@ -18,7 +18,7 @@ type Story = StoryObj<typeof meta>
 
 export const Page: Story = {
   args: {
-    recoveryMechanism: KEY_FILES,
+    recoveryMechanism: KEYSTORE_FILES,
     handleRecMechanismChange: () => {},
   },
 }

src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanism.tsx

@@ -2,14 +2,14 @@ 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'
+import { BOTH_KEY_AND_RECOVERY, KEYSTORE_FILES, RECOVERY_PHRASE } from '../../../constants'
 
 type RecoveryMechanismProps = {
   recoveryMechanism: string
   handleRecMechanismChange: (value: string) => void
 }
 
-const cards = [KEY_FILES, RECOVERY_PHRASE, BOTH_KEY_AND_RECOVERY]
+const cards = [KEYSTORE_FILES, RECOVERY_PHRASE, BOTH_KEY_AND_RECOVERY]
 
 const RecoveryMechanism = ({
   recoveryMechanism,

src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanismCard.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
 import RecoveryMechanismCard from './RecoveryMechanismCard'
-import { KEY_FILES } from '../../../constants'
+import { KEYSTORE_FILES } from '../../../constants'
 
 const meta = {
   title: 'ValidatorOnboarding/RecoveryMechanismCard',
@@ -18,8 +18,8 @@ type Story = StoryObj<typeof meta>
 
 export const Page: Story = {
   args: {
-    value: KEY_FILES,
+    value: KEYSTORE_FILES,
-    recoveryMechanism: KEY_FILES,
+    recoveryMechanism: KEYSTORE_FILES,
     handleRecMechanismChange: () => {},
   },
 }

src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx

@@ -4,10 +4,10 @@ import { CloseCircleIcon } from '@status-im/icons'
 import { useState } from 'react'
 
 type RecoveryPhraseProps = {
-  isKeyFiles: boolean
+  isKeystoreFiles: boolean
 }
 
-const RecoveryPhrase = ({ isKeyFiles }: RecoveryPhraseProps) => {
+const RecoveryPhrase = ({ isKeystoreFiles }: RecoveryPhraseProps) => {
   const [isReveal, setIsReveal] = useState(false)
 
   const revealHandler = () => {
@@ -15,7 +15,7 @@ const RecoveryPhrase = ({ isKeyFiles }: RecoveryPhraseProps) => {
   }
 
   return (
-    <YStack space={'$4'} style={{ width: '100%', marginTop: isKeyFiles ? '20px' : '0px' }}>
+    <YStack space={'$4'} style={{ width: '100%', marginTop: isKeystoreFiles ? '20px' : '0px' }}>
       <Stack
         style={{
           border: `1px solid #2A4AF566`,