feat(right sidebar): add nodes list to the right button

src/components/General/RightSideBar/RightSidebar.tsx

@@ -1,6 +1,11 @@
 import { Avatar, Popover, Text } from '@status-im/components'
 import { Stack, XStack, YStack } from 'tamagui'
-import { AddSmallIcon, CopyIcon } from '@status-im/icons'
+import {
+  AddSmallIcon,
+  CloseIcon,
+  CopyIcon,
+  OptionsIcon,
+} from '@status-im/icons'
 
 import AlertsList from '../../../components/General/RightSideBar/AlertsList'
 import LogsList from '../../../components/General/RightSideBar/LogsList'
@@ -11,12 +16,17 @@ import ValidatorsCount from '../../../components/General/RightSideBar/Validators
 
 import NodesList from './NodesList'
 import DiamondCard from './DiamondCard'
+import { useState } from 'react'
 
 const DashboardSidebar = () => {
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false)
   const onCopyWalletAddress = () => {
     copyFunction('0xb9dc35')
   }
 
+  const handlePopoverOpenChange = (open: boolean) => {
+    setIsPopoverOpen(open)
+  }
   return (
     <YStack
       width={'320px'}
@@ -30,7 +40,12 @@ const DashboardSidebar = () => {
         overflowY: 'auto',
       }}
     >
-      <XStack alignItems="center" space={'$2'} backgroundColor={'#F5F5F5'}>
+      <XStack
+        justifyContent="space-between"
+        alignItems="center"
+        alignContent="center"
+      >
+        <XStack space={'$2'} alignItems="center">
           <Avatar type="user" size={32} name="Ethereum Mainnet" />
           <YStack>
             <Text size={15} weight={'semibold'}>
@@ -47,40 +62,51 @@ const DashboardSidebar = () => {
             </XStack>
           </YStack>
         </XStack>
+        <Popover
+          side="top"
+          align="center"
+          onOpenChange={handlePopoverOpenChange}
+          children={[
+            <Stack
+              style={{
+                border: '1px solid #C8D0D8',
+                borderRadius: '9px',
+                marginRight: '10px',
+                padding: '3px',
+                cursor: 'pointer',
+              }}
+            >
+              {isPopoverOpen ? (
+                <CloseIcon size={20} />
+              ) : (
+                <OptionsIcon size={20} />
+              )}
+            </Stack>,
+            <NodesList></NodesList>,
+          ]}
+        ></Popover>
+      </XStack>
       <XStack space={'$2'} alignItems="center" justifyContent="space-between">
         <DiamondCard />
       </XStack>
       <ValidatorsCount />
-
-      <Popover
-        side="top"
-        align="center"
-        children={[
-          <YStack
-            backgroundColor={'#757e8c'}
-            style={{
-              padding: '8px 12px',
-              borderRadius: '16px',
-              flexGrow: '1',
-              height: 'max-fit',
-            }}
-          >
       <XStack
-              style={{ marginBottom: '8px' }}
+        backgroundColor={'#757e8c'}
         alignContent="center"
         alignItems="center"
         justifyContent="center"
         space="$2"
+        style={{
+          padding: '8px 12px',
+          borderRadius: '16px',
+        }}
       >
         <AddSmallIcon size={20} color="#fff"></AddSmallIcon>
         <Text size={19} color={'#FFF'}>
           Add Validator
         </Text>
       </XStack>
-          </YStack>,
+
-          <NodesList></NodesList>,
-        ]}
-      ></Popover>
       <ValidatorsTabs />
       <AlertsList />
       <LogsList />

src/pages/Dashboard/Dashboard.tsx

@@ -3,7 +3,7 @@ import { XStack } from 'tamagui'
 import LeftSidebar from '../../components/General/LeftSidebar/LeftSidebar'
 import DashboardContent from './DashboardContent'
 import { useWindowSize } from '../../hooks/useWindowSize'
-import DashboardSidebar from './DashboardSidebar/DashboardSidebar'
+import RightSideBar from '../../components/General/RightSideBar/RightSidebar'
 
 const Dashboard = () => {
   const { width } = useWindowSize()
@@ -11,7 +11,7 @@ const Dashboard = () => {
     <XStack style={{ height: '100vh' }}>
       <LeftSidebar />
       <DashboardContent />
-      {width > 900 && <DashboardSidebar />}
+      {width > 900 && <RightSideBar />}
     </XStack>
   )
 }