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

src/pages/ValidatorOnboarding/ClientSetup/ClientSetup.tsx

@@ -0,0 +1,27 @@
+import { Separator, Stack, XStack, YStack } from 'tamagui'
+import SetupRow from './SetupRow'
+import WithdrawalAddress from './WithdrawalAddress'
+import { Text } from '@status-im/components'
+import { ArrowLeftIcon  } from '@status-im/icons'
+import { Link } from 'react-router-dom'
+
+const ClientSetup = () => {
+  return (
+    <YStack padding={'26px'} width={'100%'} space={'$8'}>
+      <SetupRow title={'Setup up Validators'} />
+      <Separator borderColor={'#F0F2F5'} />
+      <WithdrawalAddress title={'Withdrawal address'} />
+      <Stack style={{ maxWidth: 'fit-content', marginTop: '50px' }}>
+        <Text size={15}>
+          <XStack space={'$1'} style={{ alignItems: 'center' }}>
+            <ArrowLeftIcon size={16} color="#2A4CF4" />
+            <Link style={{ color: '#2A4CF4' }} to={'/'}>
+              Edit Validators
+            </Link>
+          </XStack>
+        </Text>
+      </Stack>
+    </YStack>
+  )
+}
+export default ClientSetup

src/pages/ValidatorOnboarding/ClientSetup/SetupRow.tsx

@@ -0,0 +1,41 @@
+import { Stack, XStack, YStack } from 'tamagui'
+import { Input as StatusInput, Text } from '@status-im/components'
+import { AddIcon } from '@status-im/icons'
+
+type SetupRowProps = {
+  title: string
+}
+const SetupRow = ({ title }: SetupRowProps) => {
+  return (
+    <YStack space={'$4'}>
+      <Text size={27} weight={'semibold'}>
+        {title}
+      </Text>
+      <XStack justifyContent={'space-between'} width={'80%'}>
+        <Stack space={'$2'}>
+          <Text size={15} weight="regular" color={'#647084'}>
+            How many Validators would you like to run?
+          </Text>
+          <StatusInput icon={<AddIcon size={16} />} />
+        </Stack>
+        <YStack space={'$2'}>
+          <Text size={19} weight={'semibold'} color="#09101C">
+            ETH
+          </Text>
+          <Text size={27} weight={'semibold'} color="#09101C">
+            64
+          </Text>
+        </YStack>
+        <YStack space={'$2'}>
+          <Text size={19} weight={'semibold'} color="#09101C">
+            USD
+          </Text>
+          <Text size={27} weight={'semibold'} color="#09101C">
+            $4,273 USD
+          </Text>
+        </YStack>
+      </XStack>
+    </YStack>
+  )
+}
+export default SetupRow

src/pages/ValidatorOnboarding/ClientSetup/WithdrawalAddress.tsx

@@ -0,0 +1,33 @@
+import { Stack, YStack } from 'tamagui'
+import { InformationBox, Input as StatusInput, Text } from '@status-im/components'
+import { ClearIcon, CloseCircleIcon } from '@status-im/icons'
+type WithdrawalAddressProps = {
+  title: string
+}
+const WithdrawalAddress = ({ title }: WithdrawalAddressProps) => {
+  return (
+    <YStack space={'$4'}>
+      <Text size={27} weight={'semibold'}>
+        {title}
+      </Text>
+      <YStack space={'$3'}>
+        <Text size={13} weight="regular" color={'#647084'}>
+          Ethereum Address
+        </Text>
+        <Stack width={'100%'}>
+          <StatusInput
+            placeholder={'******************'}
+            width={'100%'}
+            icon={<ClearIcon size={16} />}
+          />
+        </Stack>
+        <InformationBox
+          message="If withdrawal address is not provided at this step, your deposited funds will remain locked on the Beacon Chain until an address is provided. Unlocking will require signing a message with your withdrawal keys, generated from your mnemonic seed phrase (so keep it safe)."
+          variant="error"
+          icon={<CloseCircleIcon size={20} color="$red" />}
+        />
+      </YStack>
+    </YStack>
+  )
+}
+export default WithdrawalAddress

src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx

@@ -32,26 +32,34 @@ const FormStepper = ({ activeStep, changeActiveStep }: FormStepperProps) => {
         data-step="Advicsories"
       />
       <Step
-        label="Validator Setup"
+        label="Client Setup"
         className="custom-step"
         onClick={() => changeActiveStep(2)}
         completed={activeStep > 1}
+        data-subtitle="Execution & Consensus"
+        data-step="Advicsories"
+      />
+      <Step
+        label="Validator Setup"
+        className="custom-step"
+        onClick={() => changeActiveStep(3)}
+        completed={activeStep > 2}
         data-subtitle="Clients, Nodes & Validators"
         data-step="Validator Setup"
       />
       <Step
         label="Key Generation"
         className="custom-step"
-        onClick={() => changeActiveStep(3)}
-        completed={activeStep > 2}
+        onClick={() => changeActiveStep(4)}
+        completed={activeStep > 3}
         data-subtitle="Secure your Keypairs"
         data-step="Key Generation"
       />
       <Step
         label="Activation"
         className="custom-step"
-        onClick={() => changeActiveStep(4)}
-        completed={activeStep > 3}
+        onClick={() => changeActiveStep(5)}
+        completed={activeStep > 4}
         data-subtitle="Complete Setup"
         data-step="Activation"
       />

src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx

@@ -11,6 +11,7 @@ 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'
 
 const ValidatorOnboarding = () => {
   const [activeStep, setActiveStep] = useState(0)
@@ -51,9 +52,10 @@ const ValidatorOnboarding = () => {
         <ValidatorBoxWrapper>
           {activeStep === 0 && <Overview />}
           {activeStep === 1 && <Advicsories />}
-          {activeStep === 2 && <ValidatorSetupInstall />}
-          {activeStep === 3 && <KeyGeneration isConfirmPhraseStage={isConfirmPhraseStage} />}
-          {activeStep === 4 && <Activation />}
+          {activeStep === 2 && <ClientSetup />}
+          {activeStep === 3 && <ValidatorSetupInstall />}
+          {activeStep === 4 && <KeyGeneration isConfirmPhraseStage={isConfirmPhraseStage} />}
+          {activeStep === 5 && <Activation />}
         </ValidatorBoxWrapper>
         <Stack style={{ alignItems: 'end', width: '100%', marginTop: '16px', zIndex: 999 }}>
           <Button onPress={continueHandler}>