From 45014fed2b5f0011d83a9493c1a9c9efd8798bab Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Mon, 28 Aug 2023 11:27:43 +0300
Subject: [PATCH] feat: create recovery mechanism component

---
 .../KeyGeneration/KeyGeneration.tsx           |  2 ++
 .../KeyGeneration/RecoveryMechanism.tsx       | 32 +++++++++++++++++++
 2 files changed, 34 insertions(+)
 create mode 100644 src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanism.tsx

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx
index aa4f43d6..cb0ba691 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx
@@ -1,10 +1,12 @@
 import { YStack } from 'tamagui'
 import KeyGenerationHeader from './KeyGenerationHeader'
+import RecoveryMechanism from './RecoveryMechanism'
 
 const KeyGeneration = () => {
   return (
     <YStack space={'$2'} style={{ width: '100%', padding: '16px 32px' }}>
       <KeyGenerationHeader />
+      <RecoveryMechanism />
     </YStack>
   )
 }
diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanism.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanism.tsx
new file mode 100644
index 00000000..5c8eb84f
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanism.tsx
@@ -0,0 +1,32 @@
+import { Text } from '@status-im/components'
+import { XStack } from 'tamagui'
+import BorderBox from '../../../components/General/BorderBox'
+
+const RecoveryMechanism = () => {
+  return (
+    <XStack style={{ width: '100%', alignItems: 'center', justifyContent: 'space-between' }}>
+      <Text size={19} weight={'semibold'}>
+        Select Recovery Mechanism
+      </Text>
+      <XStack space={'$2'}>
+        <BorderBox>
+          <Text size={15} weight={'semibold'}>
+            Key Files
+          </Text>
+        </BorderBox>
+        <BorderBox>
+          <Text size={15} weight={'semibold'}>
+            Recovery Phrase
+          </Text>
+        </BorderBox>
+        <BorderBox>
+          <Text size={15} weight={'semibold'}>
+            Both Key Files & Recovery Phrase
+          </Text>
+        </BorderBox>
+      </XStack>
+    </XStack>
+  )
+}
+
+export default RecoveryMechanism