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

src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx

@@ -10,8 +10,8 @@ import './layoutGradient.css'
 import ValidatorBoxWrapper from './ValidatorBoxWrapper/ValidatorBoxWrapper'
 import { Button } from '@status-im/components'
 import { useNavigate } from 'react-router-dom'
-import ValidatorSetupInstall from './ValidatorSetup/ValidatorInstall'
 import ClientSetup from './ClientSetup/ClientSetup'
+import ConsensusSelection from './ValidatorSetup/ConsensusSelection'
 
 const ValidatorOnboarding = () => {
   const [activeStep, setActiveStep] = useState(0)
@@ -53,7 +53,8 @@ const ValidatorOnboarding = () => {
           {activeStep === 0 && <Overview />}
           {activeStep === 1 && <Advicsories />}
           {activeStep === 2 && <ClientSetup />}
-          {activeStep === 3 && <ValidatorSetupInstall />}
+          {activeStep === 3 && <ConsensusSelection />}
+          {/* <ValidatorSetup/> or <ValidatorSetupInstall/> for activeStep 3 */}
           {activeStep === 4 && <KeyGeneration isConfirmPhraseStage={isConfirmPhraseStage} />}
           {activeStep === 5 && <Activation />}
         </ValidatorBoxWrapper>

src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusSelection.tsx

@@ -0,0 +1,54 @@
+import { XStack, Stack, Text as TextTam, YStack } from 'tamagui'
+import PairedDeviceCard from './PairedDeviceCard'
+import { Text } from '@status-im/components'
+import { Link } from 'react-router-dom'
+import ConsensusGaugeCard from './ConsensusSelectionCard'
+
+const ConsensusSelection = () => {
+  return (
+    <YStack style={{ width: '100%', padding: '16px 32px' }}>
+      <XStack justifyContent={'space-between'}>
+        <Text size={27} weight={'semibold'}>
+          Validator Setup
+        </Text>
+        <XStack space={'$2'}>
+          <ConsensusGaugeCard
+            color="blue"
+            synced={134879}
+            title="Execution Sync Status"
+            total={150000}
+          />
+          <PairedDeviceCard />
+        </XStack>
+      </XStack>
+
+      <YStack>
+        <Stack style={{ marginBottom: '4px' }}>
+          <Text size={13} color="#647084">
+            Consensus 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, marginTop: '50px' }}>
+        Install Consensus client
+      </TextTam>
+
+      <Stack marginTop={'10%'}>
+        <Text size={15} weight={'semibold'} color="#2A4CF4">
+          <Link to={'https://launchpad.ethereum.org/en/faq'}></Link>
+          View Execution client comparison chart
+        </Text>
+      </Stack>
+    </YStack>
+  )
+}
+
+export default ConsensusSelection

src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusSelectionCard.tsx

@@ -0,0 +1,56 @@
+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'
+
+type ConsensusGaugeCardProps = {
+  synced: number
+  total: number
+  title: string
+  color: string
+}
+
+const ConsensusGaugeCard = ({ synced, total, title, color }: ConsensusGaugeCardProps) => {
+  return (
+    <BorderBox style={{ borderRadius: '10.1px', borderWidth: '0.5px' }}>
+      <XStack space={'$2'} alignItems="center">
+        <Stack
+          style={{
+            height: '35px',
+            width: '35px',
+          }}
+        >
+          <StandardGauge
+            data={[
+              {
+                id: title,
+                label: title,
+                value: synced,
+                color: color,
+              },
+              {
+                id: 'free',
+                label: 'free',
+                value: total - synced || 1,
+                color: '#E7EAEE',
+              },
+            ]}
+          />
+        </Stack>
+        <YStack>
+          <Text size={11} color="#84888e" weight={'semibold'}>
+            {title}
+          </Text>
+          <Text size={15} weight={'semibold'}>
+            {formatNumberForGauge(synced)} / {formatNumberForGauge(total)}
+          </Text>
+        </YStack>
+        <ClearIcon size={20} color="#A1ABBD" />
+      </XStack>
+    </BorderBox>
+  )
+}
+
+export default ConsensusGaugeCard