From c92e30018e0dd7aa1997f2b0ca74e57fc4644a0f Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Fri, 1 Sep 2023 09:37:14 +0300
Subject: [PATCH] fix: format and clean code

---
 .../ValidatorSetup/ConsensusCard.tsx                   |  0
 .../ValidatorSetup/ConsensusClientCard.tsx             |  8 +++++---
 .../ValidatorSetup/ConsensusGaugeCard.tsx              |  1 +
 .../ValidatorSetup/ConsensusSelection.tsx              | 10 ++++++----
 .../ValidatorSetup/ExecClientCard.tsx                  |  6 ++++--
 .../ValidatorOnboarding/ValidatorSetup/OsCard.tsx      |  6 ++++--
 .../ValidatorSetup/PairedDeviceCard.tsx                |  3 +--
 .../ValidatorSetup/SyntaxHighlighter.tsx               |  3 +++
 .../ValidatorSetup/ValidatorInstall.stories.tsx        |  2 +-
 .../ValidatorSetup/ValidatorInstall.tsx                |  7 +++++--
 .../ValidatorSetup/ValidatorSetup.stories.ts           |  2 +-
 .../ValidatorSetup/ValidatorSetup.tsx                  |  5 +++--
 src/redux/ValidatorOnboarding/ValidatorSetup/slice.tsx |  2 ++
 13 files changed, 36 insertions(+), 19 deletions(-)
 delete mode 100644 src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusCard.tsx

diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusCard.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusCard.tsx
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClientCard.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClientCard.tsx
index cdbc5610..7ea640d9 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClientCard.tsx
+++ b/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
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusGaugeCard.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusGaugeCard.tsx
index 27bdaac3..77de4ed3 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusGaugeCard.tsx
+++ b/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'
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusSelection.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusSelection.tsx
index 33ac7211..6dbd1080 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusSelection.tsx
+++ b/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}>
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ExecClientCard.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ExecClientCard.tsx
index f0e2d06d..58081b32 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ExecClientCard.tsx
+++ b/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
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/OsCard.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/OsCard.tsx
index d5270176..777e3fd4 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/OsCard.tsx
+++ b/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
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/PairedDeviceCard.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/PairedDeviceCard.tsx
index 5410e02e..6c779894 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/PairedDeviceCard.tsx
+++ b/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
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/SyntaxHighlighter.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/SyntaxHighlighter.tsx
index 7eb5a6dc..78bd5c38 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/SyntaxHighlighter.tsx
+++ b/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
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstall.stories.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstall.stories.tsx
index 2975e4d5..6c463e2e 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstall.stories.tsx
+++ b/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',
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstall.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstall.tsx
index 763275b0..bea12dd4 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstall.tsx
+++ b/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' }}>
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.stories.ts b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.stories.ts
index 5189112b..ecb50999 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.stories.ts
+++ b/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',
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx
index 23b27e2f..f13dfd6a 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx
+++ b/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' }}>
diff --git a/src/redux/ValidatorOnboarding/ValidatorSetup/slice.tsx b/src/redux/ValidatorOnboarding/ValidatorSetup/slice.tsx
index c4a7ae17..253776d2 100644
--- a/src/redux/ValidatorOnboarding/ValidatorSetup/slice.tsx
+++ b/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,