From 8983245445085aeb0dca91d99eb5863234770407 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Wed, 18 Oct 2023 16:20:19 +0300
Subject: [PATCH] feat: separate validators tabs

---
 .../General/RightSideBar/RightSidebar.tsx     | 27 ++--------------
 .../General/RightSideBar/ValidatorsTabs.tsx   | 32 +++++++++++++++++++
 2 files changed, 35 insertions(+), 24 deletions(-)
 create mode 100644 src/components/General/RightSideBar/ValidatorsTabs.tsx

diff --git a/src/components/General/RightSideBar/RightSidebar.tsx b/src/components/General/RightSideBar/RightSidebar.tsx
index 8f0cfdfd..0f7bbb37 100644
--- a/src/components/General/RightSideBar/RightSidebar.tsx
+++ b/src/components/General/RightSideBar/RightSidebar.tsx
@@ -1,12 +1,12 @@
-import { Avatar, Tabs, Text } from '@status-im/components'
+import { Avatar, Text } from '@status-im/components'
 import { XStack, YStack } from 'tamagui'
 
 import AddCard from '../AddCards/AddCard'
-import ValidatorsList from './ValidatorsList'
 import AlertsList from './AlertsList'
 import LogsList from './LogsList'
 import DiamondCard from './DiamondCard'
 import ValidatorsCount from './ValidatorsCount'
+import ValidatorsTabs from './ValidatorsTabs'
 import { getFormattedWalletAddress } from '../../../utilities'
 import styles from './RightSidebar.module.css'
 
@@ -38,28 +38,7 @@ const RightSidebar = () => {
         <AddCard style={{ padding: '0 2vw' }} />
       </XStack>
       <ValidatorsCount />
-      <Tabs defaultValue="active">
-        <Tabs.List size={32}>
-          <Tabs.Trigger type="default" value="active">
-            Active
-          </Tabs.Trigger>
-          <Tabs.Trigger type="default" value="pending">
-            Pending
-          </Tabs.Trigger>
-          <Tabs.Trigger type="default" value="inactive">
-            Inactive
-          </Tabs.Trigger>
-        </Tabs.List>
-        <Tabs.Content value="active">
-          <ValidatorsList />
-        </Tabs.Content>
-        <Tabs.Content value="pending">
-          <ValidatorsList />
-        </Tabs.Content>
-        <Tabs.Content value="inactive">
-          <ValidatorsList />
-        </Tabs.Content>
-      </Tabs>
+      <ValidatorsTabs />
       <AlertsList />
       <LogsList />
     </YStack>
diff --git a/src/components/General/RightSideBar/ValidatorsTabs.tsx b/src/components/General/RightSideBar/ValidatorsTabs.tsx
new file mode 100644
index 00000000..fd8d6b14
--- /dev/null
+++ b/src/components/General/RightSideBar/ValidatorsTabs.tsx
@@ -0,0 +1,32 @@
+import { Tabs } from '@status-im/components'
+
+import ValidatorsList from './ValidatorsList'
+
+const ValidatorsTabs = () => {
+  return (
+    <Tabs defaultValue="active">
+      <Tabs.List size={32}>
+        <Tabs.Trigger type="default" value="active">
+          Active
+        </Tabs.Trigger>
+        <Tabs.Trigger type="default" value="pending">
+          Pending
+        </Tabs.Trigger>
+        <Tabs.Trigger type="default" value="inactive">
+          Inactive
+        </Tabs.Trigger>
+      </Tabs.List>
+      <Tabs.Content value="active">
+        <ValidatorsList />
+      </Tabs.Content>
+      <Tabs.Content value="pending">
+        <ValidatorsList />
+      </Tabs.Content>
+      <Tabs.Content value="inactive">
+        <ValidatorsList />
+      </Tabs.Content>
+    </Tabs>
+  )
+}
+
+export default ValidatorsTabs