From e4b09412274a1c1c314a53267a18deef93522b57 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Thu, 24 Aug 2023 10:54:29 +0300
Subject: [PATCH] feat: separate overview to a component

---
 src/pages/ValidatorOnboarding/Overview.tsx    | 53 +++++++++++++++++++
 .../ValidatorOnboarding.tsx                   | 51 ++----------------
 2 files changed, 56 insertions(+), 48 deletions(-)
 create mode 100644 src/pages/ValidatorOnboarding/Overview.tsx

diff --git a/src/pages/ValidatorOnboarding/Overview.tsx b/src/pages/ValidatorOnboarding/Overview.tsx
new file mode 100644
index 00000000..9adb1516
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/Overview.tsx
@@ -0,0 +1,53 @@
+import { Stack, Text as TextTam, YStack } from 'tamagui'
+import { Button, Shadow, Text } from '@status-im/components'
+
+const Overview = () => {
+  return (
+    <>
+      <Shadow
+        variant="$2"
+        style={{
+          borderRadius: '16px',
+          border: 'none',
+          flexDirection: 'row',
+          backgroundColor: '#fff',
+        }}
+        className="content"
+      >
+        <YStack className="layout-left" space={10} style={{ padding: '16px 32px' }}>
+          <TextTam fontSize={27} fontWeight={'700'} style={{ marginBottom: '20px' }}>
+            Overview
+          </TextTam>
+
+          <Text size={27}>
+            Becoming a validator is a big responsibility with important preparation steps. Only
+            start the deposit process when youre ready.
+          </Text>
+          <Text size={15} color="#939BA1">
+            By running a validator, you'll be responsible for securing the network and receive
+            continuous payouts for actions that help the network reach consensus.
+          </Text>
+          <Text size={15} color="#939BA1">
+            Since the successful transition to proof-of-stake via The Merge, Ethereum is fully
+            secured by proof-of-stake validators. By running a validator, you'll be helping to
+            secure the Ethereum network.
+          </Text>
+        </YStack>
+        <section className="layout-right">
+          <div className="image-container">
+            <img
+              src="./background-images/sync-status-background.png"
+              alt="background"
+              className="background-img"
+            />
+          </div>
+        </section>
+      </Shadow>
+      <Stack style={{ alignItems: 'end', width: '100%', marginTop: '16px' }}>
+        <Button>Continue</Button>
+      </Stack>
+    </>
+  )
+}
+
+export default Overview
diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
index f83cdfa7..9b1c3e60 100644
--- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
@@ -1,9 +1,9 @@
-import { Stack, Text as TextTam, YStack } from 'tamagui'
-import { Button, Shadow, Text } from '@status-im/components'
+import { YStack } from 'tamagui'
 import FormStepper from './FormStepper'
 import PageWrapperGradient from '../../components/PageWrappers/PageWrapperGradient'
 import Titles from '../../components/General/Titles'
 import { useState } from 'react'
+import Overview from './Overview'
 
 const ValidatorOnboarding = () => {
   const [activeStep, setActiveStep] = useState(0)
@@ -29,52 +29,7 @@ const ValidatorOnboarding = () => {
           subtitle="Earn Rewards for securing the Ethereum Network"
         />
         <FormStepper activeStep={activeStep} changeActiveStep={changeActiveStep} />
-        {activeStep === 0 && (
-          <>
-            <Shadow
-              variant="$2"
-              style={{
-                borderRadius: '16px',
-                border: 'none',
-                flexDirection: 'row',
-                backgroundColor: '#fff',
-              }}
-              className="content"
-            >
-              <YStack className="layout-left" space={10} style={{ padding: '16px 32px' }}>
-                <TextTam fontSize={27} fontWeight={'700'} style={{ marginBottom: '20px' }}>
-                  Overview
-                </TextTam>
-
-                <Text size={27}>
-                  Becoming a validator is a big responsibility with important preparation steps.
-                  Only start the deposit process when youre ready.
-                </Text>
-                <Text size={15} color="#939BA1">
-                  By running a validator, you'll be responsible for securing the network and receive
-                  continuous payouts for actions that help the network reach consensus.
-                </Text>
-                <Text size={15} color="#939BA1">
-                  Since the successful transition to proof-of-stake via The Merge, Ethereum is fully
-                  secured by proof-of-stake validators. By running a validator, you'll be helping to
-                  secure the Ethereum network.
-                </Text>
-              </YStack>
-              <section className="layout-right">
-                <div className="image-container">
-                  <img
-                    src="./background-images/sync-status-background.png"
-                    alt="background"
-                    className="background-img"
-                  />
-                </div>
-              </section>
-            </Shadow>
-            <Stack style={{ alignItems: 'end', width: '100%', marginTop: '16px' }}>
-              <Button>Continue</Button>
-            </Stack>
-          </>
-        )}
+        {activeStep === 0 && <Overview />}
       </YStack>
     </PageWrapperGradient>
   )