Add logic and style

src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx

@@ -1,9 +1,32 @@
-import { YStack } from 'tamagui'
+import { XStack, Stack, Text as TextTam, YStack } from 'tamagui'
 import PairedDeviceCard from './PairedDeviceCard'
-import { XStack } from 'tamagui'
 import { Text } from '@status-im/components'
+import ExecClientCard from './ExecClientCard'
 
 const ValidatorSetup = () => {
+  const execClientCardsContent = [
+    {
+      name: 'Nethermind',
+      icon: '/icons/nethermind-circle.png',
+    },
+    {
+      name: 'Besu',
+      icon: '/icons/open-ethereum-circle',
+    },
+    {
+      name: 'Geth',
+      icon: '/icons/teku-circle',
+    },
+    {
+      name: 'Erigon',
+      icon: '/icons/lighthouse-circle',
+    },
+    {
+      name: 'Nimbus',
+      icon: '/icons/prysm-circle',
+      isComingSoon: true,
+    },
+  ]
   return (
     <YStack style={{ width: '100%' }}>
       <XStack justifyContent={'space-between'}>
@@ -12,6 +35,31 @@ const ValidatorSetup = () => {
         </Text>
         <PairedDeviceCard />
       </XStack>
+
+      <YStack>
+        <Stack style={{ marginBottom: '4px' }}>
+          <Text size={13} color="#647084">
+            Execution Client Detection
+          </Text>
+        </Stack>
+        <Text size={15} weight={'regular'}>
+          No existing execution client installations have been detected on paired device.
+        </Text>
+        <Text size={13} color="#828282">
+          If you believe this to be incorrect please test your pairing to the correct device and try
+          again.
+        </Text>
+      </YStack>
+
+      <TextTam fontSize={27} style={{ margin: '5px', marginLeft: 0 }}>
+        Select Execution client
+      </TextTam>
+      <XStack justifyContent={'space-between'}>
+        {execClientCardsContent.length &&
+          execClientCardsContent.map(e => (
+            <ExecClientCard name={e.name} icon={e.icon} isComingSoon={e.isComingSoon || false} />
+          ))}
+      </XStack>
     </YStack>
   )
 }