Merge branch 'hn.validator-onboarding' of https://github.com/nimbus-gui/nimbus-gui into hn.validator-onboarding

public/icons/NimbusDisabled.svg

@@ -0,0 +1,5 @@
+<svg width="74" height="60" viewBox="0 0 74 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 31443">
+<path id="Vector" d="M59.1019 45.0375V59.0747C51.3854 59.0747 47.4072 58.373 42.7293 52.0562C38.0514 45.7393 35.0293 45.0373 31.0346 45.0373V59.0747H17.001V45.0373H31.0346V31C38.2347 31 42.7293 31.9358 47.4072 38.0187C52.0851 44.1016 54.5517 45.0375 59.1019 45.0375V31H73.1355V45.0375H59.1019Z" fill="#DCE0E5"/>
+</g>
+</svg>

src/pages/ValidatorOnboarding/ValidatorSetup/ExecClientCard.tsx

@@ -1,4 +1,4 @@
-import { YStack } from 'tamagui'
+import { Stack, XStack, YStack } from 'tamagui'
 import Icon from '../../../components/General/Icon'
 import { Text } from '@status-im/components'
 
@@ -26,9 +26,28 @@ const ExecClientCard = ({ name, icon, isSelected, isComingSoon }: ExecClientCard
       }}
       space={'$12'}
     >
-      <Text size={27} weight={'semibold'} color={isComingSoon ? '#DCE0E5' : ''}>
-        {name}
-      </Text>
+      <Stack>
+        <Text size={27} weight={'semibold'} color={isComingSoon ? '#DCE0E5' : ''}>
+          {name}
+        </Text>
+        {isComingSoon && (
+          <XStack
+            style={{
+              backgroundColor: '#2A4AF5',
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              padding: '3px',
+              borderRadius: '67px',
+              width: '50%',
+            }}
+          >
+            <Text size={11} color="#fff">
+              COMING SOON
+            </Text>
+          </XStack>
+        )}
+      </Stack>
       <Icon src={icon} width={100} height={100} />
     </YStack>
   )

src/pages/ValidatorOnboarding/ValidatorSetup/PairedDeviceCard.tsx

@@ -1,7 +1,7 @@
 // make func component for this file
 
 import { XStack, YStack } from 'tamagui'
-import { CloseCircleIcon } from '@status-im/icons'
+import { ClearIcon } from '@status-im/icons'
 import { Avatar, Text } from '@status-im/components'
 
 const PairedDeviceCard = () => {
@@ -27,7 +27,7 @@ const PairedDeviceCard = () => {
           </Text>
         </YStack>
       </XStack>
-      <CloseCircleIcon key={1} size={20} color="#A1ABBD" />
+      <ClearIcon size={20} color="#A1ABBD" />
     </XStack>
   )
 }

src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx

@@ -11,20 +11,20 @@ const ValidatorSetup = () => {
     },
     {
       name: 'Besu',
-      icon: '/icons/open-ethereum-circle',
+      icon: '/icons/hyperledger-besu-circle.png',
     },
     {
       name: 'Geth',
-      icon: '/icons/teku-circle',
+      icon: '/icons/gethereum-mascot-circle.png',
       isSelected: true,
     },
     {
       name: 'Erigon',
-      icon: '/icons/lighthouse-circle',
+      icon: '/icons/erigon-circle.png',
     },
     {
       name: 'Nimbus',
-      icon: '/icons/prysm-circle',
+      icon: '/icons/NimbusDisabled.svg',
       isComingSoon: true,
     },
   ]