fix: format and clean code

src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClientCard.tsx

@@ -1,18 +1,19 @@
 import { Stack, YStack } from 'tamagui'
-import Icon from '../../../components/General/Icon'
 import { Text } from '@status-im/components'
 
- 
+import Icon from '../../../components/General/Icon'
+
 type ConsensusClientCardProps = {
   name: string
   icon: string
 }
+
 const ConsensusClientCard = ({ name, icon }: ConsensusClientCardProps) => {
   return (
     <YStack
       style={{
         backgroundColor: '#2A4AF50D',
-        border: '1px solid #2A4AF5', 
+        border: '1px solid #2A4AF5',
         borderRadius: '16px',
         padding: '12px 16px',
         width: '29%',
@@ -28,4 +29,5 @@ const ConsensusClientCard = ({ name, icon }: ConsensusClientCardProps) => {
     </YStack>
   )
 }
+
 export default ConsensusClientCard

src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusGaugeCard.tsx

@@ -1,6 +1,7 @@
 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'

src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusSelection.tsx

@@ -1,10 +1,11 @@
 import { XStack, Stack, Text as TextTam, YStack } from 'tamagui'
-import PairedDeviceCard from './PairedDeviceCard'
 import { Text } from '@status-im/components'
+import { useSelector } from 'react-redux'
+
+import PairedDeviceCard from './PairedDeviceCard'
 import ConsensusGaugeCard from './ConsensusGaugeCard'
 import ConsensusClientCard from './ConsensusClientCard'
 import LinkWithArrow from '../../../components/General/LinkWithArrow'
-import { useSelector } from 'react-redux'
 import { RootState } from '../../../redux/store'
 
 const ConsensusSelection = () => {
@@ -23,12 +24,13 @@ const ConsensusSelection = () => {
     Nimbus: '/icons/NimbusDisabled.svg',
   }
 
-  const a = [
+  const clients = [
     {
       name: selectedClient,
       icon: clientIcons[selectedClient],
     },
   ]
+
   return (
     <YStack style={{ width: '100%', padding: '32px' }}>
       <XStack justifyContent={'space-between'}>
@@ -66,7 +68,7 @@ const ConsensusSelection = () => {
       </TextTam>
 
       <XStack space={'$8'}>
-        <ConsensusClientCard name={a[0].name} icon={a[0].icon} />
+        <ConsensusClientCard name={clients[0].name} icon={clients[0].icon} />
         <YStack width={'67%'} space={'$4'}>
           <Text size={27}>The resource efficient Ethereum Clients.</Text>
           <Text size={15}>

src/pages/ValidatorOnboarding/ValidatorSetup/ExecClientCard.tsx

@@ -1,6 +1,7 @@
 import { Stack, XStack, YStack } from 'tamagui'
-import Icon from '../../../components/General/Icon'
 import { Text } from '@status-im/components'
+
+import Icon from '../../../components/General/Icon'
 import { selectClient } from '../../../redux/ValidatorOnboarding/ValidatorSetup/slice'
 import { useDispatch, useSelector } from 'react-redux'
 import { RootState } from '../../../redux/store'
@@ -8,9 +9,9 @@ import { RootState } from '../../../redux/store'
 type ExecClientCardProps = {
   name: string
   icon: string
-
   isComingSoon?: boolean
 }
+
 const ExecClientCard = ({ name, icon, isComingSoon }: ExecClientCardProps) => {
   const dispatch = useDispatch()
   const selectedClient = useSelector((state: RootState) => state.execClient.selectedClient)
@@ -60,4 +61,5 @@ const ExecClientCard = ({ name, icon, isComingSoon }: ExecClientCardProps) => {
     </YStack>
   )
 }
+
 export default ExecClientCard

src/pages/ValidatorOnboarding/ValidatorSetup/OsCard.tsx

@@ -1,14 +1,15 @@
 import { Stack, YStack } from 'tamagui'
-import Icon from '../../../components/General/Icon'
 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
@@ -31,4 +32,5 @@ const OsCard = ({ name, icon, onClick, isSelected }: OsCardProps) => {
     </YStack>
   )
 }
+
 export default OsCard

src/pages/ValidatorOnboarding/ValidatorSetup/PairedDeviceCard.tsx

@@ -1,5 +1,3 @@
-// make func component for this file
-
 import { XStack, YStack } from 'tamagui'
 import { ClearIcon } from '@status-im/icons'
 import { Avatar, Text } from '@status-im/components'
@@ -31,4 +29,5 @@ const PairedDeviceCard = () => {
     </XStack>
   )
 }
+
 export default PairedDeviceCard

src/pages/ValidatorOnboarding/ValidatorSetup/SyntaxHighlighter.tsx

@@ -1,5 +1,6 @@
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
 import { solarizedlight } from 'react-syntax-highlighter/dist/esm/styles/prism'
+
 type SyntaxHighlighterBoxProps = {
   rows: string[]
 }
@@ -12,6 +13,7 @@ const customStyle = {
   },
   backgroundColor: 'white',
 }
+
 const SyntaxHighlighterBox = ({ rows }: SyntaxHighlighterBoxProps) => {
   return (
     <SyntaxHighlighter
@@ -25,4 +27,5 @@ const SyntaxHighlighterBox = ({ rows }: SyntaxHighlighterBoxProps) => {
     </SyntaxHighlighter>
   )
 }
+
 export default SyntaxHighlighterBox

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

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react'
-import ValidatorSetupInstall from './ValidatorInstall'
 
+import ValidatorSetupInstall from './ValidatorInstall'
 
 const meta = {
   title: 'ValidatorOnboarding/ValidatorSetupInstall',

src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstall.tsx

@@ -1,14 +1,17 @@
 import { XStack, Stack, YStack } from 'tamagui'
 import { InformationBox, Text } from '@status-im/components'
 import { CloseCircleIcon } from '@status-im/icons'
-import OsCard from './OsCard'
-import SyntaxHighlighterBox from './SyntaxHighlighter'
 import { useState } from 'react'
 import { useSelector } from 'react-redux'
+
+import OsCard from './OsCard'
+import SyntaxHighlighterBox from './SyntaxHighlighter'
 import { RootState } from '../../../redux/store'
+
 const ValidatorSetupInstall = () => {
   const [selectedOs, setSelectedOs] = useState('Mac')
   const selectedClient = useSelector((state: RootState) => state.execClient.selectedClient)
+
   return (
     <YStack style={{ width: '100%', padding: '16px 32px' }}>
       <XStack justifyContent={'space-between'} style={{ marginBottom: '10px' }}>

src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react'
+import { withRouter } from 'storybook-addon-react-router-v6'
 
 import ValidatorSetup from './ValidatorSetup'
-import { withRouter } from 'storybook-addon-react-router-v6'
 
 const meta = {
   title: 'ValidatorOnboarding/ValidatorSetup',

src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx

@@ -1,9 +1,10 @@
 import { XStack, Stack, Text as TextTam, YStack } from 'tamagui'
-import PairedDeviceCard from './PairedDeviceCard'
 import { Text } from '@status-im/components'
-import ExecClientCard from './ExecClientCard'
 import { Link } from 'react-router-dom'
 
+import PairedDeviceCard from './PairedDeviceCard'
+import ExecClientCard from './ExecClientCard'
+
 const ValidatorSetup = () => {
   return (
     <YStack style={{ width: '100%', padding: '16px 32px' }}>

src/redux/ValidatorOnboarding/ValidatorSetup/slice.tsx

@@ -3,9 +3,11 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit'
 interface ExecClientState {
   selectedClient: string
 }
+
 const initialState: ExecClientState = {
   selectedClient: '',
 }
+
 const execClientSlice = createSlice({
   name: 'execClient',
   initialState,