fix(manage-validator): add left side folder

src/pages/ManageValidator/LeftManageSide/DepositStepper.tsx

@@ -1,7 +1,7 @@
 import { Stepper, Step } from 'react-form-stepper'
 import { useNavigate } from 'react-router-dom'
-import { DepositStatusSteps, FORM_STEPS } from '../../constants'
+import { DepositStatusSteps, FORM_STEPS } from '../../../constants'
-import { useWindowSize } from '../../hooks/useWindowSize'
+import { useWindowSize } from '../../../hooks/useWindowSize'
 import styles from './DepositStepper.module.css'
 type DepositStepperProps = {
   activeStep: number

src/pages/ManageValidator/LeftManageSide/Footer.tsx

@@ -2,7 +2,7 @@ import { Text as TextStat } from '@status-im/components'
 
 import { Text, XStack } from 'tamagui'
 import { ExternalIcon } from '@status-im/icons'
-import Icon from '../../components/General/Icon'
+import Icon from '../../../components/General/Icon'
 const Footer = () => {
   return (
     <XStack

src/pages/ManageValidator/LeftManageSide/Header.tsx

@@ -1,5 +1,5 @@
 import { XStack } from 'tamagui'
-import Titles from '../../components/General/Titles'
+import Titles from '../../../components/General/Titles'
 import { PopupIcon } from '@status-im/icons'
 const Header = () => {
   return (

src/pages/ManageValidator/LeftManageSide/LeftManageSide.tsx

@@ -0,0 +1,37 @@
+import { Stack, YStack } from 'tamagui'
+
+import Header from './Header'
+import ValidatorInfo from './ValidatorInfo'
+import DepositStatus from './DepositStatus'
+import ValidatorBalance from './ValidatorBalance'
+import ValidatorDataCards from './ValidatorDataCards'
+import ValidatorSettingsCards from './ValidatorSeettingsCards'
+import ValidatorGraffiti from './ValidatorGraffiti'
+import ValidatorDataTabs from './ManageValidatorTable/ValidatorDataTabs'
+import Footer from './Footer'
+
+const LeftManageSide = () => {
+  return (
+    <Stack
+      width={'50%'}
+      maxWidth="50%"
+      flexGrow={1}
+      space={'$2'}
+      style={{ borderRight: '1px solid #DCE0E5' }}
+    >
+      <Header />
+      <YStack backgroundColor="#F4F6FE" space={'$3'}>
+        <ValidatorInfo />
+        <DepositStatus />
+        <ValidatorBalance />
+      </YStack>
+      <ValidatorDataCards />
+      <ValidatorSettingsCards />
+      <ValidatorGraffiti />
+      <ValidatorDataTabs />
+      <Footer />
+    </Stack>
+  )
+}
+
+export default LeftManageSide

src/pages/ManageValidator/LeftManageSide/ManageValidatorTable/ValidatorDataTabs.tsx

@@ -1,11 +1,11 @@
 import { Stack } from 'tamagui'
-import { MANAGE_VALIDATOR_TABS } from '../../../constants'
+import { MANAGE_VALIDATOR_TABS } from '../../../../constants'
 import ValidatorTable from './ValidatorTable'
 import { Tabs } from '@status-im/components'
 import { useDispatch, useSelector } from 'react-redux'
 
-import { RootState } from '../../../redux/store'
+import { RootState } from '../../../../redux/store'
-import { setCurrentTab } from '../../../redux/ManageValidatorTab/slice'
+import { setCurrentTab } from '../../../../redux/ManageValidatorTab/slice'
 
 const ValidatorDataTabs = () => {
   const dispatch = useDispatch()

src/pages/ManageValidator/LeftManageSide/ManageValidatorTable/ValidatorTableHeader.tsx

@@ -1,7 +1,7 @@
 import { Text } from '@status-im/components'
 import { useSelector } from 'react-redux'
-import { RootState } from '../../../redux/store'
+import { RootState } from '../../../../redux/store'
-import { MANAGE_VALIDATOR_TABS_TABLE_DATA } from '../../../constants'
+import { MANAGE_VALIDATOR_TABS_TABLE_DATA } from '../../../../constants'
 
 const ValidatorTableHeader = () => {
   const currentTab = useSelector(

src/pages/ManageValidator/LeftManageSide/ManageValidatorTable/ValidatorTableRow.tsx

@@ -1,7 +1,7 @@
 import { Text } from '@status-im/components'
-import { RootState } from '../../../redux/store'
+import { RootState } from '../../../../redux/store'
 import { useSelector } from 'react-redux'
-import { MANAGE_VALIDATOR_TABS_TABLE_DATA } from '../../../constants'
+import { MANAGE_VALIDATOR_TABS_TABLE_DATA } from '../../../../constants'
 
 const ValidatorTableRow = () => {
   const currentTab = useSelector(

src/pages/ManageValidator/LeftManageSide/ValidatorBalance.tsx

@@ -1,6 +1,6 @@
 import { Text } from '@status-im/components'
 import { Stack, XStack, YStack } from 'tamagui'
-import Icon from '../../components/General/Icon'
+import Icon from '../../../components/General/Icon'
 
 const ValidatorBalance = () => {
   return (

src/pages/ManageValidator/LeftManageSide/ValidatorDataCard.tsx

@@ -1,6 +1,6 @@
 import { Text } from '@status-im/components'
 import { XStack, YStack } from 'tamagui'
-import Icon from '../../components/General/Icon'
+import Icon from '../../../components/General/Icon'
 
 type ValidatorDataCardProps = {
   title: string

src/pages/ManageValidator/LeftManageSide/ValidatorInfo.tsx

@@ -1,8 +1,8 @@
 import { XStack, YStack } from 'tamagui'
-import ValidatorNameAddress from '../../components/General/ValidatorNameAddress'
+import ValidatorNameAddress from '../../../components/General/ValidatorNameAddress'
 import { Avatar, Text } from '@status-im/components'
 import { ChevronLeftIcon, ChevronRightIcon } from '@status-im/icons'
-import Icon from '../../components/General/Icon'
+import Icon from '../../../components/General/Icon'
 const ValidatorInfo = () => {
   return (
     <XStack space={'$2'} padding="30px" justifyContent="space-between">

src/pages/ManageValidator/LeftManageSide/ValidatorToolCard.tsx

@@ -1,7 +1,7 @@
 import { Stack, YStack } from 'tamagui'
 import { Text } from '@status-im/components'
 
-import Icon from '../../components/General/Icon'
+import Icon from '../../../components/General/Icon'
 
 type ValidatorToolCardProps = {
   name: string

src/pages/ManageValidator/ManageValidator.tsx

@@ -1,17 +1,8 @@
-import { XStack, YStack } from 'tamagui'
+import { XStack } from 'tamagui'
-import { Stack } from 'tamagui'
 
 import LeftSidebar from '../../components/General/LeftSidebar/LeftSidebar'
 import RightManageSettings from './RightManageSettings/RightManageSettings'
-import ValidatorInfo from './ValidatorInfo'
+import LeftManageSide from './LeftManageSide/LeftManageSide'
-import DepositStatus from './DepositStatus'
-import Header from './Header'
-import ValidatorBalance from './ValidatorBalance'
-import ValidatorDataCards from './ValidatorDataCards'
-import ValidatorDataTabs from './ManageValidatorTable/ValidatorDataTabs'
-import ValidatorGraffiti from './ValidatorGraffiti'
-import Footer from './Footer'
-import ValidatorSettingsCards from './ValidatorSeettingsCards'
 
 const ManageValidator = () => {
   return (
@@ -24,25 +15,7 @@ const ManageValidator = () => {
           flexGrow: 1,
         }}
       >
-        <Stack
+        <LeftManageSide />
-          width={'50%'}
-          maxWidth="50%"
-          flexGrow={1}
-          space={'$2'}
-          style={{ borderRight: '1px solid #DCE0E5' }}
-        >
-          <Header />
-          <YStack backgroundColor="#F4F6FE" space={'$3'}>
-            <ValidatorInfo />
-            <DepositStatus />
-            <ValidatorBalance />
-          </YStack>
-          <ValidatorDataCards />
-          <ValidatorSettingsCards />
-          <ValidatorGraffiti />
-          <ValidatorDataTabs />
-          <Footer />
-        </Stack>
         <RightManageSettings />
       </XStack>
     </XStack>