feat(left-sidebar): merge map constants for icons

src/components/General/LeftSidebar/LeftSidebar.tsx

@@ -12,18 +12,45 @@ import { Stack, YStack } from 'tamagui'
 import { Tooltip } from '@status-im/components'
 
 import LeftSidebarIconButton from './LeftSidebarIconButton'
-import { LEFT_SIDEBAR_ICONS } from '../../../constants'
 
-const iconMap = {
-  '/dashboard': <DashboardIcon size={20} />,
-  '/validator-management': <SpeedIcon size={20} />,
-  '/advanced-analytics': <ChartIcon size={20} />,
-  '/device-health-check': <HeartIcon size={20} />,
-  '/logs': <CodeBlockIcon size={20} />,
-  '/community': <CommunitiesIcon size={20} />,
-  '/notifications': <ActivityCenterIcon size={20} />,
-  '/settings': <SettingsIcon size={20} />,
-}
+export const LEFT_SIDEBAR_ICONS = [
+  {
+    path: '/dashboard',
+    tooltip: 'Dashboard',
+    icon: <DashboardIcon size={20} />,
+  },
+  {
+    path: '/validator-management',
+    tooltip: 'Validator Management',
+    icon: <SpeedIcon size={20} />,
+  },
+  {
+    path: '/advanced-analytics',
+    tooltip: 'Advanced Analytics',
+    icon: <ChartIcon size={20} />,
+  },
+  {
+    path: '/device-health-check',
+    tooltip: 'Device Health Check',
+    icon: <HeartIcon size={20} />,
+  },
+  { path: '/logs', tooltip: 'Logs', icon: <CodeBlockIcon size={20} /> },
+  {
+    path: '/community',
+    tooltip: 'Community',
+    icon: <CommunitiesIcon size={20} />,
+  },
+  {
+    path: '/notifications',
+    tooltip: 'Notifications',
+    icon: <ActivityCenterIcon size={20} />,
+  },
+  {
+    path: '/settings',
+    tooltip: 'Settings',
+    icon: <SettingsIcon size={20} />,
+  },
+]
 
 const LeftSidebar = () => {
   return (
@@ -38,10 +65,7 @@ const LeftSidebar = () => {
       {LEFT_SIDEBAR_ICONS.map(icon => (
         <Tooltip side="right" content={icon.tooltip} key={icon.path}>
           <Stack>
-            <LeftSidebarIconButton
-              iconEl={iconMap[icon.path as keyof typeof iconMap]}
-              path={icon.path}
-            />
+            <LeftSidebarIconButton icon={icon.icon} path={icon.path} />
           </Stack>
         </Tooltip>
       ))}

src/components/General/LeftSidebar/LeftSidebarIconButton.tsx

@@ -3,11 +3,11 @@ import { Stack } from 'tamagui'
 import { Link } from 'react-router-dom'
 
 type IconButtonWithDotProps = {
-  iconEl: IconAvatarProps['icon']
+  icon: IconAvatarProps['icon']
   path: string
 }
 
-const LeftSidebarIconButton = ({ iconEl, path }: IconButtonWithDotProps) => {
+const LeftSidebarIconButton = ({ icon, path }: IconButtonWithDotProps) => {
   const isDotOn = path === '/notifications'
   const isDisabled =
     path === '/advanced-analytics' ||
@@ -18,7 +18,7 @@ const LeftSidebarIconButton = ({ iconEl, path }: IconButtonWithDotProps) => {
   return (
     <Link to={path}>
       <IconButton
-        icon={iconEl}
+        icon={icon}
         variant={isDisabled ? 'outline' : 'ghost'}
         selected={path === window.location.pathname}
         disabled={isDisabled}

src/constants.ts

@@ -276,36 +276,6 @@ export const MANAGE_VALIDATOR_TABS_TABLE_DATA = [
   { headers: [] },
 ]
 
-// Left Sidebar
-export const LEFT_SIDEBAR_ICONS = [
-  { path: '/dashboard', tooltip: 'Dashboard' },
-  {
-    path: '/validator-management',
-    tooltip: 'Validator Management',
-  },
-  {
-    path: '/advanced-analytics',
-    tooltip: 'Advanced Analytics',
-  },
-  {
-    path: '/device-health-check',
-    tooltip: 'Device Health Check',
-  },
-  { path: '/logs', tooltip: 'Logs' },
-  {
-    path: '/community',
-    tooltip: 'Community',
-  },
-  {
-    path: '/notifications',
-    tooltip: 'Notifications',
-  },
-  {
-    path: '/settings',
-    tooltip: 'Settings',
-  },
-]
-
 // Pair Device
 export const VC = 'VC'
 export const VALIDATOR_CLIENT = 'Validator Client'