Order validator setup files in folders and fix warning

src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx

@@ -10,10 +10,10 @@ import KeyGeneration from './KeyGeneration/KeyGeneration'
 import Activation from './Activation/Activation'
 import ValidatorBoxWrapper from './ValidatorBoxWrapper/ValidatorBoxWrapper'
 import ClientSetup from './ClientSetup/ClientSetup'
-import ConsensusSelection from './ValidatorSetup/ConsensusSelection'
+import ConsensusSelection from './ValidatorSetup/ConsensusClient/ConsensusSelection'
 import Advisories from './Advisories/Advisories'
-import ValidatorSetup from './ValidatorSetup/ValidatorSetup'
-import ValidatorSetupInstall from './ValidatorSetup/ValidatorInstall'
+import ValidatorSetup from './ValidatorSetup/Validator Setup/ValidatorSetup'
+import ValidatorSetupInstall from './ValidatorSetup/ValidatorInstalling/ValidatorInstall'
 import ContinueButton from './ContinueButton'
 import {
   setIsCopyPastedPhrase,
@@ -21,7 +21,7 @@ import {
 } from '../../redux/ValidatorOnboarding/KeyGeneration/slice'
 import { RootState } from '../../redux/store'
 import './layoutGradient.css'
-import ActivationValidatorSetup from './ValidatorSetup/ActivationValidatorSetup'
+import ActivationValidatorSetup from './ValidatorSetup/ValidatorActivation/ActivationValidatorSetup'
 import wordlist from 'web-bip39/wordlists/english'
 
 const ValidatorOnboarding = () => {

src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusClientCard.tsx

@@ -1,7 +1,7 @@
 import { Stack, YStack } from 'tamagui'
 import { Text } from '@status-im/components'
 
-import Icon from '../../../components/General/Icon'
+import Icon from '../../../../components/General/Icon'
 
 type ConsensusClientCardProps = {
   name: string

src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusGaugeCard.stories.tsx

@@ -18,6 +18,6 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
   args: {
-    color:'orange',  synced:140000, total:200000, title: 'Synced Files'
+    color: 'orange', synced: 140000, total: 200000, title: 'Synced Files'
   },
 }

src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusGaugeCard.tsx

@@ -2,9 +2,9 @@ import { Stack, XStack, YStack } from 'tamagui'
 import { ClearIcon } from '@status-im/icons'
 import { Text } from '@status-im/components'
 
-import StandardGauge from '../../../components/Charts/StandardGauge'
-import BorderBox from '../../../components/General/BorderBox'
-import { formatNumberForGauge } from '../../../utilities'
+import StandardGauge from '../../../../components/Charts/StandardGauge'
+import BorderBox from '../../../../components/General/BorderBox'
+import { formatNumberForGauge } from '../../../../utilities'
 
 type ConsensusGaugeCardProps = {
   synced: number

src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusSelection.tsx

@@ -5,8 +5,8 @@ import { useSelector } from 'react-redux'
 import PairedDeviceCard from './PairedDeviceCard'
 import ConsensusGaugeCard from './ConsensusGaugeCard'
 import ConsensusClientCard from './ConsensusClientCard'
-import LinkWithArrow from '../../../components/General/LinkWithArrow'
-import { RootState } from '../../../redux/store'
+import LinkWithArrow from '../../../../components/General/LinkWithArrow'
+import { RootState } from '../../../../redux/store'
 
 const clientIcons = {
   Nethermind: '/icons/nethermind-circle.png',

src/pages/ValidatorOnboarding/ValidatorSetup/OsCard.tsx

@@ -1,36 +0,0 @@
-import { Stack, YStack } from 'tamagui'
-import { Text } from '@status-im/components'
-
-import Icon from '../../../components/General/Icon'
-
-type OsCardProps = {
-  name: string
-  icon: string
-  onClick?: () => void
-  isSelected?: boolean
-}
-
-const OsCard = ({ name, icon, onClick, isSelected }: OsCardProps) => {
-  return (
-    <YStack
-      style={{
-        backgroundColor: isSelected ? '#2A4AF50D' : 'none',
-        border: isSelected ? '1px solid #2A4AF566' : '1px solid rgba(0, 0, 0, 0.15);',
-        borderRadius: '16px',
-        padding: '12px 16px',
-        width: '33%',
-      }}
-      space={'$12'}
-      onPress={onClick}
-    >
-      <Stack>
-        <Text size={27} weight={'semibold'}>
-          {name}
-        </Text>
-      </Stack>
-      <Icon src={icon} width={100} height={100} />
-    </YStack>
-  )
-}
-
-export default OsCard

src/pages/ValidatorOnboarding/ValidatorSetup/Validator Setup/ExecClientCard.tsx

@@ -2,9 +2,9 @@ import { Stack, XStack, YStack } from 'tamagui'
 import { Text } from '@status-im/components'
 import { useDispatch, useSelector } from 'react-redux'
 
-import Icon from '../../../components/General/Icon'
-import { selectClient } from '../../../redux/ValidatorOnboarding/ValidatorSetup/slice'
-import { RootState } from '../../../redux/store'
+import Icon from '../../../../components/General/Icon'
+import { selectClient } from '../../../../redux/ValidatorOnboarding/ValidatorSetup/slice'
+import { RootState } from '../../../../redux/store'
 
 type ExecClientCardProps = {
   name: string
@@ -24,8 +24,8 @@ const ExecClientCard = ({ name, icon, isComingSoon }: ExecClientCardProps) => {
         border: isComingSoon
           ? '1px solid #F5F6F8'
           : isSelected
-          ? '1px solid #2A4AF5'
-          : '1px solid #DCE0E5',
+            ? '1px solid #2A4AF5'
+            : '1px solid #DCE0E5',
         borderRadius: '16px',
         padding: '12px 16px',
         width: '19%',

src/pages/ValidatorOnboarding/ValidatorSetup/Validator Setup/ValidatorSetup.tsx

@@ -1,9 +1,9 @@
 import { XStack, Stack, Text as TextTam, YStack } from 'tamagui'
 import { Text } from '@status-im/components'
 
-import PairedDeviceCard from './PairedDeviceCard'
+import PairedDeviceCard from '../ConsensusClient/PairedDeviceCard'
 import ExecClientCard from './ExecClientCard'
-import LinkWithArrow from '../../../components/General/LinkWithArrow'
+import LinkWithArrow from '../../../../components/General/LinkWithArrow'
 
 const ValidatorSetup = () => {
   return (

src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorActivation/ActivationValidatorSetup.tsx

@@ -3,7 +3,7 @@ import { XStack, Stack, YStack } from 'tamagui'
 import { Text } from '@status-im/components'
 import Confetti from 'react-confetti'
 
-import ActivationCard from '../Activation/ActivationCard'
+import ActivationCard from '../../Activation/ActivationCard'
 
 const ActivationValidatorSetup = () => {
   const [showConfetti, setShowConfetti] = useState(true)

src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx

@@ -6,7 +6,7 @@ import { useSelector } from 'react-redux'
 
 import OsCard from './OsCard'
 import SyntaxHighlighterBox from './SyntaxHighlighter'
-import { RootState } from '../../../redux/store'
+import { RootState } from '../../../../redux/store'
 
 const ValidatorSetupInstall = () => {
   const [selectedOs, setSelectedOs] = useState('Mac')

src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/osCard.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import osCard from './OsCard'
+
+const meta = {
+    title: 'ValidatorOnboarding/osCard',
+    component: osCard,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+} satisfies Meta<typeof osCard>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+    args: {
+        icon: "/icons/MAC.png",
+        name: "Mac",
+        isSelected: true
+    },
+}