feat: use recovery mechanism from redux

src/pages/ValidatorOnboarding/ContinueButton.tsx

@@ -2,10 +2,10 @@ import { Stack, XStack } from 'tamagui'
 import { Button, InformationBox } from '@status-im/components'
 import { CloseCircleIcon } from '@status-im/icons'
 import { useSelector } from 'react-redux'
+import { useEffect, useState } from 'react'
 
 import { RootState } from '../../redux/store'
 import LinkWithArrow from '../../components/General/LinkWithArrow'
-import { useEffect, useState } from 'react'
 
 type ContinueButton = {
   continueHandler: () => void

src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx

@@ -1,6 +1,6 @@
 import { Stack, YStack } from 'tamagui'
 import { Text } from '@status-im/components'
-import { useState } from 'react'
+import { useSelector } from 'react-redux'
 
 import KeyGenerationHeader from './KeyGenerationHeader/KeyGenerationHeader'
 import RecoveryMechanism from './RecoveryMechanism/RecoveryMechanism'
@@ -8,13 +8,14 @@ import KeystoreFiles from './KeystoreFiles'
 import RecoveryPhrase from './RecoveryPhrase'
 import ConfirmRecoveryPhrase from './ConfirmRecoveryPhrase/ConfirmRecoveryPhrase'
 import { BOTH_KEY_AND_RECOVERY, KEYSTORE_FILES, RECOVERY_PHRASE } from '../../../constants'
+import { RootState } from '../../../redux/store'
 
 type KeyGenerationProps = {
   isConfirmPhraseStage: boolean
 }
 
 const KeyGeneration = ({ isConfirmPhraseStage }: KeyGenerationProps) => {
-  const [recoveryMechanism, setRecoveryMechanism] = useState(KEYSTORE_FILES)
+  const { recoveryMechanism } = useSelector((state: RootState) => state.keyGeneration)
 
   const isKeystoreFiles =
     recoveryMechanism === KEYSTORE_FILES || recoveryMechanism === BOTH_KEY_AND_RECOVERY
@@ -22,20 +23,13 @@ const KeyGeneration = ({ isConfirmPhraseStage }: KeyGenerationProps) => {
   const isRecoveryPhrase =
     recoveryMechanism === RECOVERY_PHRASE || recoveryMechanism === BOTH_KEY_AND_RECOVERY
 
-  const handleRecMechanismChange = (value: string) => {
-    setRecoveryMechanism(value)
-  }
-
   return (
     <YStack space={'$2'} style={{ width: '100%', padding: '16px 32px', alignItems: 'start' }}>
       {isConfirmPhraseStage && <ConfirmRecoveryPhrase />}
       {isConfirmPhraseStage === false && (
         <>
           <KeyGenerationHeader />
-          <RecoveryMechanism
+          <RecoveryMechanism recoveryMechanism={recoveryMechanism} />
-            recoveryMechanism={recoveryMechanism}
-            handleRecMechanismChange={handleRecMechanismChange}
-          />
           <Stack style={{ margin: '30px 0' }}>
             <Text size={27} weight={'semibold'}>
               4 Validators

src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanism/RecoveryMechanism.stories.ts

@@ -18,27 +18,23 @@ type Story = StoryObj<typeof meta>
 export const KeystoreFiles: Story = {
   args: {
     recoveryMechanism: KEYSTORE_FILES,
-    handleRecMechanismChange: () => {},
   },
 }
 
 export const RecoveryPhrase: Story = {
   args: {
     recoveryMechanism: RECOVERY_PHRASE,
-    handleRecMechanismChange: () => {},
   },
 }
 
 export const BothKeystoreAndRecovery: Story = {
   args: {
     recoveryMechanism: BOTH_KEY_AND_RECOVERY,
-    handleRecMechanismChange: () => {},
   },
 }
 
 export const WithoutRecMechanism: Story = {
   args: {
     recoveryMechanism: '',
-    handleRecMechanismChange: () => {},
   },
 }

src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanism/RecoveryMechanism.tsx

@@ -6,15 +6,11 @@ import { BOTH_KEY_AND_RECOVERY, KEYSTORE_FILES, RECOVERY_PHRASE } from '../../..
 
 type RecoveryMechanismProps = {
   recoveryMechanism: string
-  handleRecMechanismChange: (value: string) => void
 }
 
 const cards = [RECOVERY_PHRASE, KEYSTORE_FILES, BOTH_KEY_AND_RECOVERY]
 
-const RecoveryMechanism = ({
+const RecoveryMechanism = ({ recoveryMechanism }: RecoveryMechanismProps) => {
-  recoveryMechanism,
-  handleRecMechanismChange,
-}: RecoveryMechanismProps) => {
   return (
     <YStack style={{ width: '100%' }}>
       <Text size={19} weight={'semibold'}>
@@ -22,12 +18,7 @@ const RecoveryMechanism = ({
       </Text>
       <XStack space={'$4'} style={{ justifyContent: 'space-between', marginTop: '40px' }}>
         {cards.map(value => (
-          <RecoveryMechanismCard
+          <RecoveryMechanismCard key={value} value={value} recoveryMechanism={recoveryMechanism} />
-            key={value}
-            value={value}
-            recoveryMechanism={recoveryMechanism}
-            handleRecMechanismChange={handleRecMechanismChange}
-          />
         ))}
       </XStack>
     </YStack>

src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanism/RecoveryMechanismCard.stories.ts

@@ -19,7 +19,6 @@ export const Selected: Story = {
   args: {
     value: KEYSTORE_FILES,
     recoveryMechanism: KEYSTORE_FILES,
-    handleRecMechanismChange: () => {},
   },
 }
 
@@ -27,7 +26,6 @@ export const NotSelected: Story = {
   args: {
     value: KEYSTORE_FILES,
     recoveryMechanism: '',
-    handleRecMechanismChange: () => {},
   },
 }
 
@@ -35,6 +33,5 @@ export const WithoutValue: Story = {
   args: {
     value: '',
     recoveryMechanism: KEYSTORE_FILES,
-    handleRecMechanismChange: () => {},
   },
 }

src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanism/RecoveryMechanismCard.tsx

@@ -1,16 +1,20 @@
 import { Text } from '@status-im/components'
+import { useDispatch } from 'react-redux'
+
+import { setRecoveryMechanism } from '../../../../redux/ValidatorOnboarding/KeyGeneration/slice'
 
 type RecoveryMechanismProps = {
   value: string
   recoveryMechanism: string
-  handleRecMechanismChange: (value: string) => void
 }
 
-const RecoveryMechanismCard = ({
+const RecoveryMechanismCard = ({ value, recoveryMechanism }: RecoveryMechanismProps) => {
-  value,
+  const dispatch = useDispatch()
-  recoveryMechanism,
+
-  handleRecMechanismChange,
+  const handleRecMechanismChange = () => {
-}: RecoveryMechanismProps) => {
+    dispatch(setRecoveryMechanism(value))
+  }
+
   return (
     <div
       style={{
@@ -22,7 +26,7 @@ const RecoveryMechanismCard = ({
         width: '100%',
         height: '140px',
       }}
-      onClick={() => handleRecMechanismChange(value)}
+      onClick={handleRecMechanismChange}
     >
       <Text size={15} weight={'semibold'}>
         {value}