feat: add new state to story and component

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: () => {},
+  },
 }

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