From 60d4cdc7e4197c3e790cfceef56e7b7552a61ebf Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Mon, 28 Aug 2023 13:15:49 +0300
Subject: [PATCH] feat: add new state to story and component

---
 .../RecoveryMechanism.stories.ts              |  5 ++-
 .../KeyGeneration/RecoveryMechanism.tsx       | 44 +++++++++++--------
 2 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanism.stories.ts b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanism.stories.ts
index 7bc18916..460ea0e5 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanism.stories.ts
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanism.stories.ts
@@ -16,5 +16,8 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Page: Story = {
-  args: {},
+  args: {
+    selectedRecoveryMechanism: 'Key Files',
+    handleRecoveryMechanismChange: () => {},
+  },
 }
diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanism.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanism.tsx
index 5c8eb84f..e7c4878c 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanism.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanism.tsx
@@ -1,29 +1,37 @@
 import { Text } from '@status-im/components'
 import { XStack } from 'tamagui'
-import BorderBox from '../../../components/General/BorderBox'
+import RecoveryMechanismCard from './RecoveryMechanismCard'
 
-const RecoveryMechanism = () => {
+type RecoveryMechanismProps = {
+  selectedRecoveryMechanism: string
+  handleRecoveryMechanismChange: (value: string) => void
+}
+
+const RecoveryMechanism = ({
+  selectedRecoveryMechanism,
+  handleRecoveryMechanismChange,
+}: RecoveryMechanismProps) => {
   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 space={'$1'}>
+        <RecoveryMechanismCard
+          value="Key Files"
+          selectedRecoveryMechanism={selectedRecoveryMechanism}
+          handleRecoveryMechanismChange={handleRecoveryMechanismChange}
+        />
+        <RecoveryMechanismCard
+          value="Recovery Phrase"
+          selectedRecoveryMechanism={selectedRecoveryMechanism}
+          handleRecoveryMechanismChange={handleRecoveryMechanismChange}
+        />
+        <RecoveryMechanismCard
+          value="Both Key Files & Recovery Phrase"
+          selectedRecoveryMechanism={selectedRecoveryMechanism}
+          handleRecoveryMechanismChange={handleRecoveryMechanismChange}
+        />
       </XStack>
     </XStack>
   )