feat: map cards

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>

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'
 

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