fix(left-sidebar): simplify by removing redux

src/components/General/LeftSidebar/LeftSidebar.tsx

@@ -9,12 +9,10 @@ import {
   SettingsIcon,
 } from '@status-im/icons'
 import { Stack, YStack } from 'tamagui'
-import { useSelector } from 'react-redux'
 import { Tooltip } from '@status-im/components'
 
 import LeftSidebarIconButton from './LeftSidebarIconButton'
-import { SidebarButton } from '../../../redux/LeftSidebar/slice'
+import { LEFT_SIDEBAR_ICONS } from '../../../constants'
-import { RootState } from '../../../redux/store'
 
 const iconMap = {
   '/dashboard': <DashboardIcon size={20} />,
@@ -28,8 +26,6 @@ const iconMap = {
 }
 
 const LeftSidebar = () => {
-  const buttons = useSelector((state: RootState) => state.leftSidebar.buttons)
-
   return (
     <YStack
       space={'$3'}
@@ -39,14 +35,12 @@ const LeftSidebar = () => {
         border: '1px solid #F0F2F5',
       }}
     >
-      {buttons.map((button: SidebarButton) => (
+      {LEFT_SIDEBAR_ICONS.map(icon => (
-        <Tooltip side="right" content={button.tooltip} key={button.path}>
+        <Tooltip side="right" content={icon.tooltip} key={icon.path}>
           <Stack>
             <LeftSidebarIconButton
-              iconEl={iconMap[button.path as keyof typeof iconMap]}
+              iconEl={iconMap[icon.path as keyof typeof iconMap]}
-              isDotOn={button.isDotOn}
+              path={icon.path}
-              isDisabled={button.isDisabled}
-              path={button.path}
             />
           </Stack>
         </Tooltip>

src/components/General/LeftSidebar/LeftSidebarIconButton.stories.tsx

@@ -20,17 +20,15 @@ type Story = StoryObj<typeof meta>
 export const Default: Story = {
   args: {
     iconEl: <DashboardIcon size={20} />,
-    isDotOn: false,
     isDisabled: false,
     path: 'dashboard',
   },
 }
 
-export const DotOn: Story = {
+export const Disabled: Story = {
   args: {
     iconEl: <DashboardIcon size={20} />,
-    isDotOn: true,
+    isDisabled: true,
-    isDisabled: false,
     path: 'dashboard',
   },
 }

src/components/General/LeftSidebar/LeftSidebarIconButton.tsx

@@ -1,20 +1,20 @@
-import { IconButton } from '@status-im/components'
+import { IconAvatarProps, IconButton } from '@status-im/components'
 import { Stack } from 'tamagui'
 import { Link } from 'react-router-dom'
 
 type IconButtonWithDotProps = {
-  iconEl: any
+  iconEl: IconAvatarProps['icon']
-  isDotOn: boolean
-  isDisabled?: boolean
   path: string
 }
 
-const LeftSidebarIconButton = ({
+const LeftSidebarIconButton = ({ iconEl, path }: IconButtonWithDotProps) => {
-  iconEl,
+  const isDotOn = path === '/notifications'
-  isDotOn,
+  const isDisabled =
-  isDisabled,
+    path === '/advanced-analytics' ||
-  path,
+    path === '/community' ||
-}: IconButtonWithDotProps) => {
+    path === '/notifications' ||
+    path === '/settings'
+
   return (
     <Link to={path}>
       <IconButton

src/redux/LeftSidebar/slice.ts

@@ -1,59 +0,0 @@
-import { createSlice } from '@reduxjs/toolkit'
-
-export interface SidebarButton {
-  isDotOn: boolean
-  isDisabled?: boolean
-  path: string
-  tooltip?: string
-}
-
-interface LeftSidebarState {
-  buttons: SidebarButton[]
-}
-
-const initialState: LeftSidebarState = {
-  buttons: [
-    { isDotOn: false, path: '/dashboard', tooltip: 'Dashboard' },
-    {
-      isDotOn: false,
-      path: '/validator-management',
-      tooltip: 'Validator Management',
-    },
-    {
-      isDotOn: false,
-      isDisabled: true,
-      path: '/charts',
-    },
-    {
-      isDotOn: false,
-      path: '/device-health-check',
-      tooltip: 'Device Health Check',
-    },
-    { isDotOn: false, path: '/logs', tooltip: 'Logs' },
-    {
-      isDotOn: false,
-      isDisabled: true,
-      path: '/communities',
-    },
-    {
-      isDotOn: true,
-      isDisabled: true,
-      path: '/activityCenter',
-    },
-    {
-      isDotOn: false,
-      isDisabled: true,
-      path: '/settings',
-    },
-  ],
-}
-
-const leftSidebarSlice = createSlice({
-  name: 'leftSidebar',
-  initialState,
-  reducers: {},
-})
-
-export const {} = leftSidebarSlice.actions
-
-export default leftSidebarSlice.reducer

src/redux/store.ts

@@ -6,7 +6,6 @@ import pinnedMessageReducer from './PinnedMessage/slice'
 import execClientReducer from './ValidatorOnboarding/ClientSetup/slice'
 import keyGenerationReducer from './ValidatorOnboarding/KeyGeneration/slice'
 import depositReducer from './Deposit/slice'
-import leftSidebarReducer from './LeftSidebar/slice'
 import rightSidebarReducer from './RightSidebar/slice'
 import validatorOnboardingReducer from './ValidatorOnboarding/slice'
 import advisoriesReducer from './ValidatorOnboarding/Advisories/slice'
@@ -26,7 +25,6 @@ const store = configureStore({
     theme: themeReducer,
     keyGeneration: keyGenerationReducer,
     deposit: depositReducer,
-    leftSidebar: leftSidebarReducer,
     rightSidebar: rightSidebarReducer,
     validatorOnboarding: validatorOnboardingReducer,
     advisories: advisoriesReducer,