From 340b5f7dd648cb138ba61426bd7c94f5e9f87db2 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Mon, 28 Aug 2023 13:15:20 +0300
Subject: [PATCH] feat: create state for selected mechanism

---
 .../KeyGeneration/KeyGeneration.tsx                  | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx
index 5ea8de0f..345befe2 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx
@@ -4,12 +4,22 @@ import RecoveryMechanism from './RecoveryMechanism'
 import { Button, InformationBox, Text } from '@status-im/components'
 import { CloseCircleIcon } from '@status-im/icons'
 import PasswordFields from './PasswordFields'
+import { useState } from 'react'
 
 const KeyGeneration = () => {
+  const [selectedRecoveryMechanism, setSelectedRecoveryMechanism] = useState('key-files')
+
+  const handleRecoveryMechanismChange = (value: string) => {
+    setSelectedRecoveryMechanism(value)
+  }
+
   return (
     <YStack space={'$2'} style={{ width: '100%', padding: '16px 32px', alignItems: 'start' }}>
       <KeyGenerationHeader />
-      <RecoveryMechanism />
+      <RecoveryMechanism
+        selectedRecoveryMechanism={selectedRecoveryMechanism}
+        handleRecoveryMechanismChange={handleRecoveryMechanismChange}
+      />
       <Text size={27} weight={'semibold'}>
         4 Validators
       </Text>