fix(validator-management): separate manage and management

src/App.tsx

@@ -6,10 +6,8 @@ import injectedModule from '@web3-onboard/injected-wallets'
 import walletConnectModule from '@web3-onboard/walletconnect'
 import { useSelector } from 'react-redux'
 
-import config from '../tamagui.config'
 import LandingPage from './pages/LandingPage/LandingPage'
 import DeviceHealthCheckOnboarding from './pages/DeviceHealthCheckOnboarding/DeviceHealthCheckOnboarding'
-import { RootState } from './redux/store'
 import DeviceSyncStatus from './pages/DeviceSyncStatus/DeviceSyncStatus'
 import PairDevice from './pages/PairDevice/PairDevice'
 import PinnedNotification from './components/General/PinnedNottification'
@@ -18,6 +16,9 @@ import ValidatorOnboarding from './pages/ValidatorOnboarding/ValidatorOnboarding
 import Dashboard from './pages/Dashboard/Dashboard'
 import ValidatorManagement from './pages/ValidatorManagement/ValidatorManagement'
 import LogsPage from './pages/LogsPage/LogsPage'
+import ManageValidator from './pages/ValidatorManagement/ManageValidator/ManageValidator'
+import config from '../tamagui.config'
+import { RootState } from './redux/store'
 import { ethereumRopsten, wcV2InitOptions, apiKey } from './constants'
 import './App.css'
 
@@ -34,7 +35,6 @@ import Activation from './pages/ValidatorOnboarding/Activation/Activation'
 import ConfirmRecoveryPhrase from './pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase/ConfirmRecoveryPhrase'
 import Deposit from './pages/ValidatorOnboarding/Deposit/Deposit'
 import DeviceHealthCheck from './pages/DeviceHealthCheck/DeviceHealthCheck'
-import ManageValidator from './pages/ValidatorManagement/ManageValidator/ManageValidator'
 
 const injected = injectedModule()
 const walletConnect = walletConnectModule(wcV2InitOptions)

src/pages/ValidatorManagement/ValidatorManagement.tsx

@@ -1,24 +1,51 @@
-import { XStack } from 'tamagui'
+import { Text } from '@status-im/components'
+import { XStack, YStack } from 'tamagui'
 
-import ValidatorManagementContent from './ValidatorManagementContent'
 import LeftSidebar from '../../components/General/LeftSidebar/LeftSidebar'
 import RightSidebar from '../../components/General/RightSideBar/RightSidebar'
+import ManagementTabs from './ManagementTabs'
+import AddCardsContainer from '../../components/General/AddCards/AddCardsContainer'
+import ManagementHeader from './ManagementHeader'
+import ManagementCard from './ManagementCard'
 import styles from './validatorManagement.module.css'
 
-import ManageValidator from './ManageValidator/ManageValidator'
-
 const ValidatorManagement = () => {
-  const isValidatorOpen = true
-
   return (
     <XStack style={{ height: '100vh' }}>
       <LeftSidebar />
-      {isValidatorOpen ? <ManageValidator /> : <ValidatorManagementContent />}
-      {!isValidatorOpen && (
-        <div className={styles['right-sidebar-wrapper']}>
-          <RightSidebar />
+      <YStack
+        space="$4"
+        alignItems="flex-start"
+        style={{
+          flexGrow: '1',
+          overflowY: 'auto',
+          padding: '0 24px 24px 24px',
+        }}
+        className={'transparent-scrollbar'}
+      >
+        <ManagementHeader />
+        <div
+          style={{
+            display: 'flex',
+            flexWrap: 'wrap',
+            justifyContent: 'space-between',
+            width: '100%',
+            gap: '16px',
+          }}
+          className={styles['cards']}
+        >
+          <ManagementCard />
+          <ManagementCard />
+          <AddCardsContainer cardsAmount={2} />
         </div>
-      )}
+        <Text size={27} weight={'semibold'}>
+          Validators
+        </Text>
+        <ManagementTabs />
+      </YStack>
+      <div className={styles['right-sidebar-wrapper']}>
+        <RightSidebar />
+      </div>
     </XStack>
   )
 }

src/pages/ValidatorManagement/ValidatorManagementContent.stories.ts

@@ -1,19 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-
-import ValidatorManagementContent from './ValidatorManagementContent'
-
-const meta = {
-  title: 'ValidatorManagement/ValidatorManagementContent',
-  component: ValidatorManagementContent,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-} satisfies Meta<typeof ValidatorManagementContent>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {},
-}

src/pages/ValidatorManagement/ValidatorManagementContent.tsx

@@ -1,45 +0,0 @@
-import { Text } from '@status-im/components'
-import { YStack } from 'tamagui'
-
-import ManagementTabs from './ManagementTabs'
-import AddCardsContainer from '../../components/General/AddCards/AddCardsContainer'
-import ManagementHeader from './ManagementHeader'
-import ManagementCard from './ManagementCard'
-import styles from './validatorManagement.module.css'
-
-const ValidatorManagementContent = () => {
-  return (
-    <YStack
-      space="$4"
-      alignItems="flex-start"
-      style={{
-        flexGrow: '1',
-        overflowY: 'auto',
-        padding: '0 24px 24px 24px',
-      }}
-      className={'transparent-scrollbar'}
-    >
-      <ManagementHeader />
-      <div
-        style={{
-          display: 'flex',
-          flexWrap: 'wrap',
-          justifyContent: 'space-between',
-          width: '100%',
-          gap: '16px',
-        }}
-        className={styles['cards']}
-      >
-        <ManagementCard />
-        <ManagementCard />
-        <AddCardsContainer cardsAmount={2} />
-      </div>
-      <Text size={27} weight={'semibold'}>
-        Validators
-      </Text>
-      <ManagementTabs />
-    </YStack>
-  )
-}
-
-export default ValidatorManagementContent