From 32176744a1995d06b4a285e85455e6eaf963a414 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Tue, 29 Aug 2023 09:53:59 +0300
Subject: [PATCH] feat: map cards

---
 .../KeyGeneration/KeyFiles.tsx                |  4 +--
 .../KeyGeneration/KeyGeneration.tsx           |  5 ++--
 .../KeyGeneration/RecoveryMechanism.tsx       | 26 ++++++++-----------
 3 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeyFiles.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/KeyFiles.tsx
index d4966d30..4b817e67 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/KeyFiles.tsx
+++ b/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>
diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx
index 94ec1d5c..d4044223 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx
+++ b/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'
 
diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanism.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanism.tsx
index eeae39cd..9bafac31 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanism.tsx
+++ b/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>
   )