From 55adac051bd8107ea8ae91e7f11062b1b7600d24 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Mon, 28 Aug 2023 23:30:19 +0300
Subject: [PATCH] Create validator install page

---
 .../ValidatorOnboarding.tsx                   |  4 +-
 .../ValidatorSetup/ValidatorInstall.tsx       | 40 +++++++++++++++++++
 2 files changed, 42 insertions(+), 2 deletions(-)
 create mode 100644 src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstall.tsx

diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
index 21b6e7b2..61d349b4 100644
--- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
@@ -5,12 +5,12 @@ import { useState } from 'react'
 import Overview from './Overview/Overview'
 import KeyGeneration from './KeyGeneration/KeyGeneration'
 import Advicsories from './Advicsories/Advicsories'
-import ValidatorSetup from './ValidatorSetup/ValidatorSetup'
 import Activation from './Activation/Activation'
 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'
 
 const ValidatorOnboarding = () => {
   const [activeStep, setActiveStep] = useState(0)
@@ -48,7 +48,7 @@ const ValidatorOnboarding = () => {
         <ValidatorBoxWrapper>
           {activeStep === 0 && <Overview />}
           {activeStep === 1 && <Advicsories />}
-          {activeStep === 2 && <ValidatorSetup />}
+          {activeStep === 2 && <ValidatorSetupInstall />}
           {activeStep === 3 && <KeyGeneration />}
           {activeStep === 4 && <Activation />}
         </ValidatorBoxWrapper>
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstall.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstall.tsx
new file mode 100644
index 00000000..431bd1f5
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstall.tsx
@@ -0,0 +1,40 @@
+import { XStack, Stack, YStack } from 'tamagui'
+import { InformationBox, Text } from '@status-im/components'
+import { Link } from 'react-router-dom'
+import { CloseCircleIcon } from '@status-im/icons'
+
+const ValidatorSetupInstall = () => {
+  return (
+    <YStack style={{ width: '100%', padding: '16px 32px' }}>
+      <XStack justifyContent={'space-between'} style={{ marginBottom: '10px' }}>
+        <Text size={27} weight={'semibold'}>
+          Validator Setup
+        </Text>
+      </XStack>
+
+      <YStack>
+        <Stack style={{ marginBottom: '4px' }}>
+          <YStack space={'$3'}>
+            <Text size={15} weight={'semibold'}>
+              Geth
+            </Text>
+
+            <Text size={13} color="#647084">
+              Geth is written in Go, fully open source and licensed under the GNU LGPL v3. Geth is
+              one of the three original implementations of the Ethereum protocol.
+            </Text>
+            <InformationBox
+              message="No connection has been created to a Nimbus service for over 3 minutes. Please ensure that the generated pairing ID was input into the CLI. If you are unable to pair device, consider connect via IP.   "
+              variant="error"
+              icon={<CloseCircleIcon size={20} color="$red" />}
+            />
+          </YStack>
+        </Stack>
+      </YStack>
+
+     
+    </YStack>
+  )
+}
+
+export default ValidatorSetupInstall