yarn format

src/pages/Dashboard/IconButtonWithDot.tsx

@@ -4,44 +4,52 @@ import { Stack } from 'tamagui'
 import { toggleButtonSelection } from '../../redux/Sidebars/slice'
 
 type IconButtonWithDotProps = {
-    iconEl: any
+  iconEl: any
-    variant: 'ghost' | 'outline'
+  variant: 'ghost' | 'outline'
-    isDotOn: boolean
+  isDotOn: boolean
-    selected?: boolean
+  selected?: boolean
-    disabled?: boolean
+  disabled?: boolean
-    id: string
+  id: string
 }
 
 const IconButtonWithDot = ({
-    iconEl,
+  iconEl,
-    variant,
+  variant,
-    isDotOn,
+  isDotOn,
-    selected,
+  selected,
-    disabled,
+  disabled,
-    id
+  id,
 }: IconButtonWithDotProps) => {
-    const dispatch = useDispatch()
+  const dispatch = useDispatch()
-    const onClickHandler = (id: string) => { if (!disabled) dispatch(toggleButtonSelection(id)) }
+  const onClickHandler = (id: string) => {
+    if (!disabled) dispatch(toggleButtonSelection(id))
+  }
 
-    return (
+  return (
-        <Stack style={{ position: 'relative', display: 'inline-block' }}>
+    <Stack style={{ position: 'relative', display: 'inline-block' }}>
-            <IconButton icon={iconEl} variant={variant} selected={selected} disabled={disabled} onPress={() => onClickHandler(id)} />
+      <IconButton
-            {isDotOn && (
+        icon={iconEl}
-                <Stack
+        variant={variant}
-                    style={{
+        selected={selected}
-                        position: 'absolute',
+        disabled={disabled}
-                        right: 7,
+        onPress={() => onClickHandler(id)}
-                        top: 5,
+      />
-                        width: '9px',
+      {isDotOn && (
-                        height: '9px',
+        <Stack
-                        borderRadius: '50%',
+          style={{
-                        backgroundColor: '#1992D7',
+            position: 'absolute',
-                        border: '1.5px solid #fff',
+            right: 7,
-                    }}
+            top: 5,
-                />
+            width: '9px',
-            )}
+            height: '9px',
-        </Stack>
+            borderRadius: '50%',
-    )
+            backgroundColor: '#1992D7',
+            border: '1.5px solid #fff',
+          }}
+        />
+      )}
+    </Stack>
+  )
 }
 
 export default IconButtonWithDot

src/pages/Dashboard/LeftSidebar.tsx

@@ -17,18 +17,27 @@ const LeftSidebar = () => {
 
   const renderIcon = (id: string) => {
     switch (id) {
-      case 'dashboard': return <DashboardIcon size={20} />;
+      case 'dashboard':
-      case 'speed': return <SpeedIcon size={20} />;
+        return <DashboardIcon size={20} />
-      case 'chart': return <ChartIcon size={20} />;
+      case 'speed':
-      case 'heart': return <HeartIcon size={20} />;
+        return <SpeedIcon size={20} />
-      case 'codeBlock': return <CodeBlockIcon size={20} />;
+      case 'chart':
-      case 'communities': return <CommunitiesIcon size={20} />;
+        return <ChartIcon size={20} />
-      case 'activityCenter': return <ActivityCenterIcon size={20} />;
+      case 'heart':
-      case 'settings': return <SettingsIcon size={20} />;
+        return <HeartIcon size={20} />
-      default: return null;
+      case 'codeBlock':
+        return <CodeBlockIcon size={20} />
+      case 'communities':
+        return <CommunitiesIcon size={20} />
+      case 'activityCenter':
+        return <ActivityCenterIcon size={20} />
+      case 'settings':
+        return <SettingsIcon size={20} />
+      default:
+        return null
     }
-    
+  }
-  }; return (
+  return (
     <YStack
       space={'$4'}
       minHeight={'100vh'}
@@ -44,7 +53,7 @@ const LeftSidebar = () => {
         <IconButtonWithDot
           key={button.id}
           iconEl={renderIcon(button.id)}
-          variant={button.isDisabled ? "outline" : "ghost"}
+          variant={button.isDisabled ? 'outline' : 'ghost'}
           isDotOn={button.isDotOn}
           selected={button.isSelected}
           disabled={button.isDisabled}
@@ -52,7 +61,7 @@ const LeftSidebar = () => {
         />
       ))}
     </YStack>
-  );
+  )
 }
 
 export default LeftSidebar

src/pages/Dashboard/RightSideBar/RightSidebar.tsx

@@ -48,8 +48,12 @@ const RightSidebar = () => {
         <AddCard padding={'0 2vw'} />
       </XStack>
       <XStack justifyContent={'space-between'} width={'85%'}>
-        <Text size={19} weight={'semibold'}>Validators</Text>
+        <Text size={19} weight={'semibold'}>
-        <Text size={19} weight={'semibold'}>{countOfValidators}</Text>
+          Validators
+        </Text>
+        <Text size={19} weight={'semibold'}>
+          {countOfValidators}
+        </Text>
       </XStack>
       <Tabs defaultValue="active">
         <Tabs.List size={32}>

src/pages/Dashboard/RightSideBar/SearchInput.stories.tsx

@@ -15,5 +15,5 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
-  args: {value: 'Search value', },
+  args: { value: 'Search value' },
 }

src/pages/Dashboard/RightSideBar/SearchInput.tsx

@@ -1,27 +1,26 @@
-import { Input } from "@status-im/components"
+import { Input } from '@status-im/components'
-import { SearchIcon } from "@status-im/icons"
+import { SearchIcon } from '@status-im/icons'
 
 type InputSearchProps = {
-    value: string
+  value: string
-    setValue: (value: string) => void
+  setValue: (value: string) => void
 }
 const InputSearch = ({ value, setValue }: InputSearchProps) => {
-
+  return (
-    return (
+    <>
-        <>
+      <Input
-            <Input
+        placeholder="Search Validators"
-                placeholder="Search Validators"
+        value={value}
-                value={value}
+        onChangeText={setValue}
-                onChangeText={setValue}
+        icon={<SearchIcon size={20} />}
-                icon={<SearchIcon size={20} />}
+        onClear={() => setValue('')}
-                onClear={() => setValue('')}
+        size={40}
-                size={40}
+        // button={{
-            // button={{
+        //     label: 'Confirm',
-            //     label: 'Confirm',
+        //     onPress: () => alert('Confirmed!'),
-            //     onPress: () => alert('Confirmed!'),
+        // }}
-            // }}
+      />
-            />
+    </>
-        </>
+  )
-    )
 }
 export default InputSearch

src/pages/Dashboard/RightSideBar/ValidatorListItem.stories.tsx

@@ -3,17 +3,23 @@ import type { Meta, StoryObj } from '@storybook/react'
 import ValidatorListItem from './ValidatorListItem'
 
 const meta = {
-    title: 'Dashboard/ValidatorListItem',
+  title: 'Dashboard/ValidatorListItem',
-    component: ValidatorListItem,
+  component: ValidatorListItem,
-    parameters: {
+  parameters: {
-        layout: 'centered',
+    layout: 'centered',
-    },
+  },
-    tags: ['autodocs'],
+  tags: ['autodocs'],
 } satisfies Meta<typeof ValidatorListItem>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
-    args: { avatarKey: '37880sfsef38fsb', name: 'Validator 1', selected: true, isAvatarChipIncluded: true, isVerified: true },
+  args: {
+    avatarKey: '37880sfsef38fsb',
+    name: 'Validator 1',
+    selected: true,
+    isAvatarChipIncluded: true,
+    isVerified: true,
+  },
 }

src/pages/Dashboard/RightSideBar/ValidatorsList.stories.tsx

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

src/pages/Dashboard/RightSideBar/ValidatorsList.tsx

@@ -5,7 +5,6 @@ import { useState, useEffect } from 'react'
 import { useDispatch } from 'react-redux'
 import { setCountOfValidators } from '../../../redux/RightSidebar/slice'
 
-
 const ValidatorsList = () => {
   const dispatch = useDispatch()
 

src/redux/RightSidebar/slice.ts

@@ -1,25 +1,23 @@
-import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
 
 type RightSidebarStateType = {
-    countOfValidators: number;
+  countOfValidators: number
-};
+}
 
 const initialState: RightSidebarStateType = {
-    countOfValidators: 0,
+  countOfValidators: 0,
-};
+}
 
 const rightSidebarSlice = createSlice({
-    name: 'rightSidebar',
+  name: 'rightSidebar',
-    initialState,
+  initialState,
-    reducers: {
+  reducers: {
-        setCountOfValidators: (state, action: PayloadAction<number>) => {
+    setCountOfValidators: (state, action: PayloadAction<number>) => {
-            state.countOfValidators = action.payload;
+      state.countOfValidators = action.payload
-        },
     },
-});
+  },
+})
 
-export const {
+export const { setCountOfValidators } = rightSidebarSlice.actions
-    setCountOfValidators,
-} = rightSidebarSlice.actions;
 
-export default rightSidebarSlice.reducer;
+export default rightSidebarSlice.reducer

src/redux/store.ts

@@ -15,7 +15,7 @@ const store = configureStore({
     theme: themeReducer,
     keyGeneration: keyGenerationReducer,
     leftSidebar: leftSidebarReducer,
-    rightSidebar: rightSidebarReducer
+    rightSidebar: rightSidebarReducer,
   },
 })