Export LeftSedebar buttons wrapper

src/pages/Dashboard/IconButtonWithDot.tsx

@@ -0,0 +1,31 @@
+
+import { IconButton } from "@status-im/components";
+import { Stack } from "tamagui";
+
+type IconButtonWithDotProps = {
+    iconEl: any;
+    variant: 'ghost' | 'outline';
+    isDotOn: boolean;
+};
+
+const IconButtonWithDot = ({ iconEl, variant, isDotOn }: IconButtonWithDotProps) => {
+    return (
+        <Stack style={{ position: 'relative', display: 'inline-block' }} >
+            <IconButton icon={iconEl} variant={variant} />
+            {isDotOn && (
+                <Stack style={{
+                    position: 'absolute',
+                    right: 7,
+                    top: 5,
+                    width: '9px',
+                    height: '9px',
+                    borderRadius: '50%',
+                    backgroundColor: '#1992D7',
+                    border: '1.5px solid #fff'
+                }} />
+            )}
+        </Stack >
+    );
+};
+
+export default IconButtonWithDot;

src/pages/Dashboard/LeftSidebar.tsx

@@ -10,6 +10,7 @@ import {
   SettingsIcon,
 } from '@status-im/icons'
 import { Stack, YStack } from 'tamagui'
+import IconButtonWithDot from './IconButtonWithDot'
 
 const LeftSidebar = () => {
   return (
@@ -43,6 +44,7 @@ const LeftSidebar = () => {
           border: '1.5px solid #fff'
         }} />
       </Stack>
+      <IconButtonWithDot iconEl={<ActivityCenterIcon size={20} />} variant="ghost" isDotOn={true} />
       <IconButton icon={<SettingsIcon size={20} />} variant="ghost" />
     </YStack>
   )