feat: add different states for recovery mechanisms

src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx

@@ -23,18 +23,26 @@ const KeyGeneration = () => {
       <Text size={27} weight={'semibold'}>
         4 Validators
       </Text>
-      <PasswordFields />
+      {selectedRecoveryMechanism === 'Key Files' && (
-      <InformationBox
+        <>
-        message="You should see that you have one keystore per validator. This keystore contains your signing key, encrypted with your password. Warning: Do not store keys on multiple (backup) validator clients at once"
+          <PasswordFields />
-        variant="error"
+          <InformationBox
-        icon={<CloseCircleIcon size={20} />}
+            message="You should see that you have one keystore per validator. This keystore contains your signing key, encrypted with your password. Warning: Do not store keys on multiple (backup) validator clients at once"
-      />
+            variant="error"
-      <Button>Reveal Recovery Phrase</Button>
+            icon={<CloseCircleIcon size={20} />}
-      <InformationBox
+          />
-        message="Write down and keep your Secret Recovery Phrase in a secure place. Make sure no one is looking at your screen."
+        </>
-        variant="error"
+      )}
-        icon={<CloseCircleIcon size={20} />}
+      {selectedRecoveryMechanism === 'Recovery Phrase' && (
-      />
+        <>
+          <Button>Reveal Recovery Phrase</Button>
+          <InformationBox
+            message="Write down and keep your Secret Recovery Phrase in a secure place. Make sure no one is looking at your screen."
+            variant="error"
+            icon={<CloseCircleIcon size={20} />}
+          />
+        </>
+      )}
     </YStack>
   )
 }