Add mobile navigation & Composer (#333)

* feat: add composer component * feat: complete composer component and few minor fixes * feat: add several improvements and new features * fix: change icon button in composer
2023-01-20 14:06:26 +00:00 · 2023-01-20 14:06:26 +00:00 · 33eef5c2aa
parent 067389a3f5
commit 33eef5c2aa
37 changed files with 884 additions and 392 deletions
--- a/apps/mobile/App.tsx
+++ b/apps/mobile/App.tsx
@ -2,27 +2,26 @@
 /* eslint-disable import/namespace */
 import 'expo-dev-client'

-import { useState } from 'react'
+import { useMemo, useState } from 'react'

-import {
-  Code,
-  Heading,
-  Label,
-  Messages,
-  Paragraph,
-  Shape,
-  Sidebar,
-} from '@status-im/components'
-import { Stack, TamaguiProvider } from '@tamagui/core'
+import { createNativeStackNavigator } from '@react-navigation/native-stack'
+import { Heading } from '@status-im/components'
+import { Avatar } from '@status-im/components/src/avatar'
+import { Stack as View, TamaguiProvider } from '@tamagui/core'
 import { useFonts } from 'expo-font'
-import { SafeAreaView, ScrollView, TouchableOpacity } from 'react-native'
+import { SafeAreaProvider } from 'react-native-safe-area-context'
+import { AnimatePresence } from 'tamagui'

+import { NavigationProvider } from './navigation/provider'
+import { ChannelScreen } from './screens/channel'
+import { HomeScreen } from './screens/home'
 import tamaguiConfig from './tamagui.config'

-type ThemeVars = 'light' | 'dark'
+const Stack = createNativeStackNavigator()

 export default function App() {
-  const [theme, setTheme] = useState<ThemeVars>('light')
+  const [position, setPosition] = useState(0)
+
  const [loaded] = useFonts({
    Inter: require('@tamagui/font-inter/otf/Inter-Medium.otf'),
    InterBold: require('@tamagui/font-inter/otf/Inter-Bold.otf'),
@ -30,56 +29,95 @@ export default function App() {
    UbuntuMono: require('./assets/fonts/UbuntuMono.ttf'),
  })

+  const onScroll = event => {
+    if (event.nativeEvent.contentOffset.y > 90) {
+      setPosition(event.nativeEvent.contentOffset.y)
+    } else {
+      setPosition(0)
+    }
+  }
+
+  const showMinimizedHeader = useMemo(() => {
+    return position > 90
+  }, [position])
+
  if (!loaded) {
    return null
  }

  return (
-    <TamaguiProvider config={tamaguiConfig} defaultTheme={theme}>
-      <SafeAreaView>
-        <ScrollView>
-          <Sidebar
-            name="Rarible"
-            description="Multichain community-centric NFT marketplace. Create, buy and sell your NFTs."
-            membersCount={123}
-          />
-          <Stack
-            flexDirection="column"
-            justifyContent="center"
-            alignItems="center"
-            paddingTop={20}
-            paddingHorizontal={12}
-            width="100%"
-            backgroundColor="$background"
-          >
-            <Heading weight="semibold" marginBottom={12}>
-              Communities
-            </Heading>
-            <Heading heading="h2" marginBottom={12}>
-              This is an Heading 2
-            </Heading>
-            <Paragraph weight="semibold" marginBottom={12} uppercase>
-              Paragraph uppercased and bolded
-            </Paragraph>
-            <Paragraph marginBottom={12} uppercase>
-              This is a paragraph
-            </Paragraph>
-            <Label marginBottom={12}>This is a label</Label>
-            <Code marginBottom={12}>This is a code line</Code>
-            <Paragraph fontWeight="400">0x213abc190 ... 121ah4a9e</Paragraph>
-            <Shape marginVertical={20} />
-
-            <Paragraph>Theme selected - {theme}</Paragraph>
-            <TouchableOpacity
-              onPress={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
+    <TamaguiProvider config={tamaguiConfig} defaultTheme="light">
+      <NavigationProvider>
+        <SafeAreaProvider>
+          <Stack.Navigator>
+            <Stack.Screen
+              name="Home"
+              options={{
+                headerBlurEffect: 'systemUltraThinMaterialLight',
+                headerTransparent: true,
+                headerShadowVisible: true,
+                header: () => (
+                  <View
+                    height={100}
+                    animation="fast"
+                    backgroundColor={
+                      showMinimizedHeader ? '$background' : 'transparent'
+                    }
+                    padding={16}
+                    paddingTop={48}
+                    flexDirection="row"
+                    justifyContent="space-between"
+                    alignItems="center"
+                  >
+                    <AnimatePresence>
+                      {showMinimizedHeader && (
+                        <View
+                          key="header"
+                          animation={[
+                            'fast',
+                            {
+                              opacity: {
+                                overshootClamping: true,
+                              },
+                            },
+                          ]}
+                          enterStyle={{ opacity: 0 }}
+                          exitStyle={{ opacity: 0 }}
+                          opacity={1}
+                          flexDirection="row"
+                          alignItems="center"
+                          justifyContent="space-between"
+                          width="100%"
+                        >
+                          <Heading color="$textPrimary">Rarible</Heading>
+                          <Avatar
+                            withOutline
+                            src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images"
+                            size={48}
+                          />
+                        </View>
+                      )}
+                    </AnimatePresence>
+                  </View>
+                ),
+              }}
            >
-              <Paragraph>Toogle theme</Paragraph>
-            </TouchableOpacity>
-
-            <Messages />
-          </Stack>
-        </ScrollView>
-      </SafeAreaView>
+              {props => (
+                <HomeScreen
+                  {...props}
+                  onScroll={onScroll}
+                  isMinimized={showMinimizedHeader}
+                />
+              )}
+            </Stack.Screen>
+            <Stack.Screen
+              name="Channel"
+              component={ChannelScreen}
+              options={{ title: 'Messages' }}
+            />
+          </Stack.Navigator>
+        </SafeAreaProvider>
+      </NavigationProvider>
    </TamaguiProvider>
  )
 }
--- a/apps/mobile/navigation/provider.tsx
+++ b/apps/mobile/navigation/provider.tsx
@ -0,0 +1,9 @@
+import { NavigationContainer } from '@react-navigation/native'
+
+export function NavigationProvider({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return <NavigationContainer>{children}</NavigationContainer>
+}
--- a/apps/mobile/package.json
+++ b/apps/mobile/package.json
@ -10,6 +10,8 @@
  },
  "dependencies": {
    "@babel/runtime": "^7.18.9",
+    "@react-navigation/native": "^6.1.2",
+    "@react-navigation/native-stack": "^6.9.8",
    "@status-im/components": "*",
    "expo": "^47.0.12",
    "expo-constants": "^14.0.2",
@ -21,6 +23,8 @@
    "react": "18.1.0",
    "react-dom": "^18.1.0",
    "react-native": "0.70.5",
+    "react-native-safe-area-context": "4.4.1",
+    "react-native-screens": "~3.18.0",
    "react-native-web": "~0.18.7"
  },
  "devDependencies": {
--- a/apps/mobile/screens/channel.tsx
+++ b/apps/mobile/screens/channel.tsx
@ -0,0 +1,34 @@
+// eslint-disable-next-line eslint-comments/disable-enable-pair
+/* eslint-disable import/namespace */
+import { Composer, Messages } from '@status-im/components'
+import { Stack, useTheme } from '@tamagui/core'
+import {
+  Keyboard,
+  KeyboardAvoidingView,
+  Platform,
+  TouchableWithoutFeedback,
+} from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { ScrollView } from 'tamagui'
+
+export const ChannelScreen = () => {
+  const insets = useSafeAreaInsets()
+  const theme = useTheme()
+
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      keyboardVerticalOffset={Platform.select({ ios: 60 })}
+      style={{ height: '100%', flex: 1, backgroundColor: theme.background.val }}
+    >
+      <ScrollView paddingHorizontal={12} width="100%">
+        <Messages py={20} />
+      </ScrollView>
+      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+        <Stack pb={insets.bottom}>
+          <Composer />
+        </Stack>
+      </TouchableWithoutFeedback>
+    </KeyboardAvoidingView>
+  )
+}
--- a/apps/mobile/screens/home.tsx
+++ b/apps/mobile/screens/home.tsx
@ -0,0 +1,34 @@
+// eslint-disable-next-line eslint-comments/disable-enable-pair
+/* eslint-disable import/namespace */
+import { useState } from 'react'
+
+import { Sidebar } from '@status-im/components'
+import { Stack } from '@tamagui/core'
+import { StatusBar } from 'expo-status-bar'
+import { ScrollView } from 'tamagui'
+
+export const HomeScreen = ({ navigation, onScroll, isMinimized }) => {
+  const [selectedChannel, setSelectedChannel] = useState<string>('welcome')
+
+  const onChannelPress = (id: string) => {
+    setSelectedChannel(id)
+    navigation.navigate('Channel')
+  }
+
+  return (
+    <Stack flex={1} backgroundColor="$background">
+      <StatusBar style={isMinimized ? 'dark' : 'light'} animated />
+      <ScrollView onScroll={onScroll} scrollEventThrottle={16} flex={1}>
+        <Stack pb={40}>
+          <Sidebar
+            name="Rarible"
+            description="Multichain community-centric NFT marketplace. Create, buy and sell your NFTs."
+            membersCount={123}
+            onChannelPress={onChannelPress}
+            selectedChannel={selectedChannel}
+          />
+        </Stack>
+      </ScrollView>
+    </Stack>
+  )
+}
--- a/apps/vite/src/app.tsx
+++ b/apps/vite/src/app.tsx
@ -3,6 +3,7 @@ import { useState } from 'react'
 import {
  Button,
  Code,
+  Composer,
  Heading,
  Label,
  Messages,
@ -10,17 +11,41 @@ import {
  Shape,
  Sidebar,
 } from '@status-im/components'
-import { Stack, TamaguiProvider } from '@tamagui/core'
+import { Stack, styled, TamaguiProvider } from '@tamagui/core'
+import { AnimatePresence } from 'tamagui'

 import tamaguiConfig from '../tamagui.config'
 import { Topbar } from './components/topbar'

 type ThemeVars = 'light' | 'dark'

+const AnimatableDrawer = styled(Stack, {
+  variants: {
+    fromRight: {
+      true: {
+        x: 500,
+        width: 0,
+      },
+    },
+    fromLeft: {
+      true: {
+        x: 500,
+        width: 250,
+      },
+    },
+  },
+})
+
 function App() {
  const [theme, setTheme] = useState<ThemeVars>('light')
  const [showMembers, setShowMembers] = useState(false)

+  const [selectedChannel, setSelectedChannel] = useState<string>('welcome')
+
+  const onChannelPress = (id: string) => {
+    setSelectedChannel(id)
+  }
+
  return (
    <TamaguiProvider config={tamaguiConfig} defaultTheme={theme}>
      <div id="app">
@ -29,9 +54,10 @@ function App() {
            name="Rarible"
            description="Multichain community-centric NFT marketplace. Create, buy and sell your NFTs."
            membersCount={123}
+            onChannelPress={onChannelPress}
+            selectedChannel={selectedChannel}
          />
        </div>
-
        <main id="main">
          <Topbar
            membersVisisble={showMembers}
@ -71,16 +97,30 @@ function App() {
              </Stack>
            </Stack>
          </div>
-          <Stack
-            backgroundColor="$background"
-            justifyContent="center"
-            alignItems="center"
-          >
-            <Paragraph weight="semibold">Composer</Paragraph>
-          </Stack>
+          <Composer />
        </main>

-        {showMembers && <div id="members">members</div>}
+        <AnimatePresence>
+          {showMembers && (
+            <AnimatableDrawer
+              id="members"
+              key="members"
+              animation={[
+                'fast',
+                {
+                  opacity: {
+                    overshootClamping: true,
+                  },
+                },
+              ]}
+              enterStyle={{ opacity: 0 }}
+              exitStyle={{ opacity: 0 }}
+              opacity={1}
+            >
+              members
+            </AnimatableDrawer>
+          )}
+        </AnimatePresence>
      </div>
    </TamaguiProvider>
  )
--- a/apps/vite/src/main.tsx
+++ b/apps/vite/src/main.tsx
@ -1,5 +1,8 @@
 import '../styles/reset.css'
 import '../styles/app.css'
+import '@tamagui/core/reset.css'
+import '@tamagui/font-inter/css/400.css'
+import '@tamagui/font-inter/css/700.css'

 import React from 'react'

--- a/apps/vite/styles/app.css
+++ b/apps/vite/styles/app.css
@ -15,13 +15,9 @@ body,
  display: grid;
  grid-template-rows: 56px 1fr 100px;
  height: 100vh;
-}
-
-#main,
-#sidebar,
-#members,
-#main > div {
+  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-width: 0 1px;
 }

 #sidebar {
--- a/packages/components/src/accordion/accordion.tsx
+++ b/packages/components/src/accordion/accordion.tsx
@ -1,9 +1,9 @@
 import React from 'react'

+import { ChevronIcon } from '@status-im/icons'
 import { Stack } from '@tamagui/core'
 import { AnimatePresence } from 'tamagui'

-import { Chevron } from '../icon'
 import { Label, Paragraph } from '../typography'

 import type { GetProps } from '@tamagui/core'
@ -48,9 +48,17 @@ const Accordion = ({
            <Stack flexDirection="row" alignItems="center">
              <Stack
                animation="fast"
-                transform={[{ rotateZ: isExpanded ? '90deg' : '0deg' }]}
+                justifyContent="center"
+                transform={[
+                  {
+                    rotateZ: isExpanded ? '90deg' : '0deg',
+                  },
+                  {
+                    translateY: isExpanded ? -4 : 0,
+                  },
+                ]}
              >
-                <Chevron color="$neutral-50" size={16} />
+                <ChevronIcon color="$neutral-50" size={16} />
              </Stack>
              <Paragraph
                marginLeft={4}
--- a/packages/components/src/accordion/accordionItem.tsx
+++ b/packages/components/src/accordion/accordionItem.tsx
@ -1,6 +1,6 @@
+import { MutedIcon } from '@status-im/icons'
 import { Stack } from '@tamagui/core'

-import { Muted } from '../icon'
 import { Label, Paragraph } from '../typography'

 import type { GetProps } from '@tamagui/core'
@ -42,7 +42,10 @@ const AccordionItem = ({
          },
        },
      ]}
-      backgroundColor={isSelected ? '$turquoise-50-opa-10' : 'transparent'}
+      backgroundColor={isSelected ? '$primary-50-opa-10' : 'transparent'}
+      hoverStyle={{
+        backgroundColor: '$primary-50-opa-5',
+      }}
      borderRadius="$4"
      padding={8}
      width="100%"
@ -105,7 +108,9 @@ const AccordionItem = ({
              />
            </Stack>
          )}
-          {channelStatus === 'muted' && <Muted size={20} color="$neutral-40" />}
+          {channelStatus === 'muted' && (
+            <MutedIcon size={20} color="$neutral-40" />
+          )}
        </Stack>
      )}
    </Stack>
--- a/packages/components/src/avatar/avatar.tsx
+++ b/packages/components/src/avatar/avatar.tsx
@ -24,6 +24,11 @@ const Base = styled(Stack, {

  variants: {
    size: {
+      80: {
+        width: 80,
+        height: 80,
+        borderRadius: 80 / 2,
+      },
      56: {
        width: 56,
        height: 56,
@ -80,10 +85,15 @@ const Indicator = styled(Stack, {

  variants: {
    size: {
+      80: {
+        width: 10,
+        height: 10,
+        borderRadius: '50%',
+      },
      56: {
        width: 10,
        height: 10,
-        borderRadius: 10 / 2,
+        borderRadius: '50%',
      },
      // FIXME: use catch all variant
      52: {
--- a/packages/components/src/chat-message/chat-message.tsx
+++ b/packages/components/src/chat-message/chat-message.tsx
@ -24,6 +24,7 @@ const ChatMessage = (props: Props) => {
      space={10}
      position="relative"
      alignItems="flex-start"
+      justifyContent="center"
      paddingHorizontal={8}
      paddingVertical={12}
      borderRadius={16}
@ -50,7 +51,7 @@ const ChatMessage = (props: Props) => {
          <Paragraph weight="semibold" color="$neutral-100">
            Alisher Yakupov
          </Paragraph>
-          <Paragraph fontFamily="$mono" color="$neutral-50" fontSize={11}>
+          <Paragraph color="$neutral-50" fontSize={11}>
            zQ3...9d4Gs0
          </Paragraph>
          <Paragraph color="$neutral-50" variant={11}>
--- a/packages/components/src/chat-message/components/actions.tsx
+++ b/packages/components/src/chat-message/components/actions.tsx
@ -3,7 +3,7 @@ import { Stack } from 'tamagui'
 import { Paragraph } from '../../typography'

 interface Props {
-  onClick: VoidFunction
+  onClick?: VoidFunction
 }

 export const Actions = (_props: Props) => {
--- a/packages/components/src/chat-message/index.tsx
+++ b/packages/components/src/chat-message/index.tsx
@ -1,10 +1,16 @@
+import { Stack } from '@tamagui/core'
+
 import { ChatMessage } from './chat-message'

+import type { GetProps } from '@tamagui/core'
+
 export * from './chat-message'

-export const Messages = () => {
+type BaseProps = GetProps<typeof Stack>
+
+export const Messages = (props: BaseProps) => {
  return (
-    <>
+    <Stack {...props}>
      <ChatMessage text="fsdjkf kasldjf ksdlfjksdlfj asdklfj sdkljf" />
      <ChatMessage text="fsdjkf kasldjf ksdlfjksdlfj asdklfj sdkljf" />
      <ChatMessage text="fsdjkf kasldjf ksdlfjksdlfj asdklfj sdkljf" />
@ -21,6 +27,6 @@ export const Messages = () => {
      <ChatMessage text="fsdjkf kasldjf ksdlfjksdlfj asdklfj sdkljf" />
      <ChatMessage text="fsdjkf kasldjf ksdlfjksdlfj asdklfj sdkljf" />
      <ChatMessage text="fsdjkf kasldjf ksdlfjksdlfj asdklfj sdkljf" />
-    </>
+    </Stack>
  )
 }
--- a/packages/components/src/composer/composer.tsx
+++ b/packages/components/src/composer/composer.tsx
@ -0,0 +1,52 @@
+import {
+  AudioIcon,
+  FormatIcon,
+  ImageIcon,
+  ReactionIcon,
+} from '@status-im/icons'
+import { Stack, XStack, YStack } from 'tamagui'
+
+import { IconButton } from '../icon-button'
+import { Input } from '../input'
+
+import type { GetProps } from '@tamagui/core'
+
+type BaseProps = GetProps<typeof YStack>
+
+const Composer = (props: BaseProps) => {
+  return (
+    <YStack
+      backgroundColor="$background"
+      shadowColor="rgba(9, 16, 28, 0.08)"
+      shadowOffset={{ width: 0, height: -4 }}
+      shadowRadius={20}
+      borderTopLeftRadius={20}
+      borderTopRightRadius={20}
+      elevation={0}
+      px={16}
+      pt={8}
+      pb={12}
+      width="100%"
+      {...props}
+    >
+      <YStack>
+        <Input
+          elevation={10}
+          placeholder="Type something..."
+          borderWidth={0}
+          px={0}
+        />
+      </YStack>
+      <XStack alignItems="center" justifyContent="space-between" pt={8}>
+        <Stack space={12} flexDirection="row">
+          <IconButton noBackground icon={<ImageIcon />} />
+          <IconButton noBackground icon={<ReactionIcon />} />
+          <IconButton noBackground icon={<FormatIcon />} />
+        </Stack>
+        <IconButton noBackground icon={<AudioIcon />} />
+      </XStack>
+    </YStack>
+  )
+}
+
+export { Composer }
--- a/packages/components/src/composer/index.tsx
+++ b/packages/components/src/composer/index.tsx
@ -0,0 +1 @@
+export { Composer } from './composer'
--- a/packages/components/src/icon-button/icon-button.tsx
+++ b/packages/components/src/icon-button/icon-button.tsx
@ -13,9 +13,10 @@ const Base = styled(Stack, {
  display: 'inline-flex',
  alignItems: 'center',
  justifyContent: 'center',
+  animation: 'fast',

-  width: 31,
-  height: 31,
+  width: 30,
+  height: 30,
  borderWidth: 1,
  backgroundColor: '$neutral-10',
  borderColor: '$neutral-10',
@ -24,7 +25,27 @@ const Base = styled(Stack, {
    backgroundColor: '$neutral-20',
  },

+  pressStyle: {
+    backgroundColor: '$neutral-20',
+  },
+
  variants: {
+    noBackground: {
+      true: {
+        backgroundColor: 'transparent',
+        borderColor: '$neutral-20',
+
+        hoverStyle: {
+          backgroundColor: 'transparent',
+          borderColor: '$neutral-30',
+        },
+
+        pressStyle: {
+          backgroundColor: 'transparent',
+          borderColor: '$neutral-30',
+        },
+      },
+    },
    selected: {
      true: {
        backgroundColor: '$neutral-30',
@ -56,14 +77,17 @@ interface Props {
  icon: React.ReactElement
  onPress?: () => void
  selected?: boolean
+  noBackground?: boolean
 }

 const IconButton = (props: Props) => {
-  const { icon, selected, onPress } = props
+  const { icon, noBackground, selected, onPress } = props

  return (
-    <Base selected={selected} onPress={onPress}>
-      <Icon selected={selected}>{icon}</Icon>
+    <Base selected={selected} onPress={onPress} noBackground={noBackground}>
+      <Icon selected={selected} pointerEvents="none">
+        {icon}
+      </Icon>
    </Base>
  )
 }
--- a/packages/components/src/icon/IconProps.ts
+++ b/packages/components/src/icon/IconProps.ts
@ -1,18 +0,0 @@
-import type {
-  SizeTokens,
-  StyleObject,
-  ThemeParsed,
-  Tokens,
-} from '@tamagui/core'
-import type { SvgProps } from 'react-native-svg'
-
-type GetTokenString<A> = A extends string ? `$${A}` : `$${string}`
-export type ColorTokens =
-  | GetTokenString<keyof Tokens['color']>
-  | GetTokenString<keyof ThemeParsed>
-
-export type IconProps = SvgProps & {
-  size?: number | SizeTokens
-  color?: ColorTokens
-  style?: StyleObject
-}
--- a/packages/components/src/icon/index.tsx
+++ b/packages/components/src/icon/index.tsx
@ -1,3 +0,0 @@
-export { Chevron } from './icons/chevron'
-export { Group } from './icons/group'
-export { Muted } from './icons/muted'
--- a/packages/components/src/icons/icons.stories.tsx
+++ b/packages/components/src/icons/icons.stories.tsx
@ -1,6 +1,8 @@
+/* eslint-disable eslint-comments/disable-enable-pair */
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 import * as icons from '@status-im/icons'

-import { Text } from '../typography'
+import { Paragraph } from '../typography'

 import type { IconProps } from '@status-im/icons'
 import type { Meta, StoryObj } from '@storybook/react'
@ -35,8 +37,8 @@ export const All: Story = {
              key={name}
              style={{ display: 'flex', flexDirection: 'column' }}
            >
-              <Icon color="black" />
-              <Text>{unpascal(name)}</Text>
+              <Icon color="$background" />
+              <Paragraph>{unpascal(name)}</Paragraph>
            </div>
          )
        })}
--- a/packages/components/src/index.tsx
+++ b/packages/components/src/index.tsx
@ -1,5 +1,6 @@
 export * from './button'
 export * from './chat-message'
+export * from './composer'
 export * from './divider'
 export * from './icon-button'
 export * from './image'
--- a/packages/components/src/sidebar/mock-data.tsx
+++ b/packages/components/src/sidebar/mock-data.tsx
@ -0,0 +1,177 @@
+import { Basketball, Collaboration, Fire, Peach, Play, Unicorn } from '../emoji'
+
+interface Channels {
+  id: string
+  title: string
+  icon?: React.ReactNode
+  channelStatus?: 'muted' | 'normal' | 'withMessages' | 'withMentions'
+  numberOfMessages?: number
+}
+
+export interface CommunityProps {
+  id: string
+  title: string
+  numberOfNewMessages?: number
+  channels: Channels[]
+}
+
+// MOCK DATA
+export const COMMUNITIES: CommunityProps[] = [
+  {
+    id: 'welcome',
+    title: 'Welcome',
+    numberOfNewMessages: 3,
+    channels: [
+      {
+        id: 'welcome',
+        title: '# welcome',
+        icon: <Collaboration hasBackground />,
+      },
+      {
+        id: 'general-welcome',
+        title: '# general',
+        icon: <Play hasBackground />,
+      },
+      {
+        id: 'random',
+        title: '# random',
+        icon: <Fire hasBackground />,
+      },
+      {
+        id: 'onboarding',
+        title: '# onboarding',
+        icon: <Unicorn hasBackground />,
+        channelStatus: 'withMentions',
+        numberOfMessages: 3,
+      },
+    ],
+  },
+  {
+    id: 'community',
+    title: 'Community',
+    numberOfNewMessages: 5,
+    channels: [
+      {
+        id: 'announcements',
+        title: '# announcements',
+        icon: <Peach hasBackground />,
+      },
+      {
+        id: 'jobs',
+        title: '# jobs',
+        channelStatus: 'withMentions',
+        numberOfMessages: 3,
+        icon: <Play hasBackground />,
+      },
+      {
+        id: 'events',
+        title: '# events',
+        channelStatus: 'withMentions',
+        numberOfMessages: 2,
+        icon: <Fire hasBackground />,
+      },
+      {
+        id: 'meetups',
+        title: '# meetups',
+        icon: <Unicorn hasBackground />,
+      },
+    ],
+  },
+  {
+    id: 'design',
+    title: 'Design',
+    channels: [
+      {
+        id: 'design',
+        title: '# design',
+        icon: <Collaboration hasBackground />,
+      },
+      {
+        id: 'ux',
+        title: '# ux',
+        icon: <Play hasBackground />,
+      },
+      {
+        id: 'ui',
+        title: '# ui',
+        icon: <Fire hasBackground />,
+      },
+      {
+        id: 'figma',
+        title: '# figma',
+        icon: <Unicorn hasBackground />,
+      },
+    ],
+  },
+  {
+    id: 'General',
+    title: 'General',
+    channels: [
+      {
+        id: 'general',
+        title: '# general',
+        icon: <Collaboration hasBackground />,
+      },
+      {
+        id: 'people-ops',
+        title: '# people-ops',
+        icon: <Basketball hasBackground />,
+      },
+    ],
+  },
+  {
+    id: 'Frontend',
+    title: 'Frontend',
+    channels: [
+      {
+        id: 'react',
+        title: '# react',
+        icon: <Collaboration hasBackground />,
+        channelStatus: 'withMessages',
+      },
+      {
+        id: 'vue',
+        title: '# vue',
+        icon: <Play hasBackground />,
+      },
+      {
+        id: 'angular',
+        title: '# angular',
+        channelStatus: 'muted',
+        icon: <Fire hasBackground />,
+      },
+      {
+        id: 'svelte',
+        title: '# svelte',
+        icon: <Unicorn hasBackground />,
+      },
+    ],
+  },
+  {
+    id: 'Backend',
+    title: 'Backend',
+    channels: [
+      {
+        id: 'node',
+        title: '# node',
+        icon: <Collaboration hasBackground />,
+      },
+      {
+        id: 'python',
+        title: '# python',
+        icon: <Play hasBackground />,
+      },
+      {
+        id: 'ruby',
+        title: '# ruby',
+        icon: <Fire hasBackground />,
+      },
+      {
+        id: 'php',
+        title: '# php',
+        channelStatus: 'muted',
+        icon: <Unicorn hasBackground />,
+      },
+    ],
+  },
+]
--- a/packages/components/src/sidebar/sidebar.tsx
+++ b/packages/components/src/sidebar/sidebar.tsx
@ -1,212 +1,52 @@
 import { useState } from 'react'

+import { GroupIcon } from '@status-im/icons'
 import { Stack } from '@tamagui/core'

 import { Accordion } from '../accordion/accordion'
 import { AccordionItem } from '../accordion/accordionItem'
 import { Avatar } from '../avatar'
 import { Button } from '../button'
-// import { Button } from '../button'
-import { Basketball, Collaboration, Fire, Peach, Play, Unicorn } from '../emoji'
-import { Group } from '../icon'
 import { Image } from '../image'
 import { Heading, Paragraph } from '../typography'
+import { COMMUNITIES } from './mock-data'

-interface Props {
+import type { CommunityProps } from './mock-data'
+import type { GetProps } from '@tamagui/core'
+
+type BaseProps = GetProps<typeof Stack>
+
+type Props = {
  name: string
  description: string
  membersCount: number
-}
-
-interface Channels {
-  id: string
-  title: string
-  icon?: React.ReactNode
-  channelStatus?: 'muted' | 'normal' | 'withMessages' | 'withMentions'
-  numberOfMessages?: number
-}
-interface CommunitiesProps {
-  id: string
-  title: string
-  numberOfNewMessages?: number
-  channels: Channels[]
-}
-
-// MOCK DATA
-const COMMUNITIES: CommunitiesProps[] = [
-  {
-    id: 'welcome',
-    title: 'Welcome',
-    numberOfNewMessages: 3,
-    channels: [
-      {
-        id: 'welcome',
-        title: '# welcome',
-        icon: <Collaboration hasBackground />,
-      },
-      {
-        id: 'general-welcome',
-        title: '# general',
-        icon: <Play hasBackground />,
-      },
-      {
-        id: 'random',
-        title: '# random',
-        icon: <Fire hasBackground />,
-      },
-      {
-        id: 'onboarding',
-        title: '# onboarding',
-        icon: <Unicorn hasBackground />,
-        channelStatus: 'withMentions',
-        numberOfMessages: 3,
-      },
-    ],
-  },
-  {
-    id: 'community',
-    title: 'Community',
-    numberOfNewMessages: 5,
-    channels: [
-      {
-        id: 'announcements',
-        title: '# announcements',
-        icon: <Peach hasBackground />,
-      },
-      {
-        id: 'jobs',
-        title: '# jobs',
-        channelStatus: 'withMentions',
-        numberOfMessages: 3,
-        icon: <Play hasBackground />,
-      },
-      {
-        id: 'events',
-        title: '# events',
-        channelStatus: 'withMentions',
-        numberOfMessages: 2,
-        icon: <Fire hasBackground />,
-      },
-      {
-        id: 'meetups',
-        title: '# meetups',
-        icon: <Unicorn hasBackground />,
-      },
-    ],
-  },
-  {
-    id: 'Design',
-    title: 'Design',
-    channels: [
-      {
-        id: 'design',
-        title: '# design',
-        icon: <Collaboration hasBackground />,
-      },
-      {
-        id: 'ux',
-        title: '# ux',
-        icon: <Play hasBackground />,
-      },
-      {
-        id: 'ui',
-        title: '# ui',
-        icon: <Fire hasBackground />,
-      },
-      {
-        id: 'figma',
-        title: '# figma',
-        icon: <Unicorn hasBackground />,
-      },
-    ],
-  },
-  {
-    id: 'General',
-    title: 'General',
-    channels: [
-      {
-        id: 'general',
-        title: '# general',
-        icon: <Collaboration hasBackground />,
-      },
-      {
-        id: 'people-ops',
-        title: '# people-ops',
-        icon: <Basketball hasBackground />,
-      },
-    ],
-  },
-  {
-    id: 'Frontend',
-    title: 'Frontend',
-    channels: [
-      {
-        id: 'react',
-        title: '# react',
-        icon: <Collaboration hasBackground />,
-        channelStatus: 'withMessages',
-      },
-      {
-        id: 'vue',
-        title: '# vue',
-        icon: <Play hasBackground />,
-      },
-      {
-        id: 'angular',
-        title: '# angular',
-        channelStatus: 'muted',
-        icon: <Fire hasBackground />,
-      },
-      {
-        id: 'svelte',
-        title: '# svelte',
-        icon: <Unicorn hasBackground />,
-      },
-    ],
-  },
-  {
-    id: 'Backend',
-    title: 'Backend',
-    channels: [
-      {
-        id: 'node',
-        title: '# node',
-        icon: <Collaboration hasBackground />,
-      },
-      {
-        id: 'python',
-        title: '# python',
-        icon: <Play hasBackground />,
-      },
-      {
-        id: 'ruby',
-        title: '# ruby',
-        icon: <Fire hasBackground />,
-      },
-      {
-        id: 'php',
-        title: '# php',
-        channelStatus: 'muted',
-        icon: <Unicorn hasBackground />,
-      },
-    ],
-  },
-]
-
-const COMMUNITIES_EXPAND_CONTROL = COMMUNITIES.reduce(
-  (o, key) => ({ ...o, [key.id]: false }),
-
-  {} as Record<string, boolean>[]
-)
+  selectedChannel?: string
+  communities?: CommunityProps[]
+  onChannelPress: (channelId: string) => void
+} & BaseProps

 const Sidebar = (props: Props) => {
-  const { name, description, membersCount } = props
-  const [isExpanded, setIsExpanded] = useState({
-    ...COMMUNITIES_EXPAND_CONTROL,
-    welcome: true,
-  })
+  const {
+    name,
+    description,
+    membersCount,
+    communities = COMMUNITIES,
+    selectedChannel,
+    onChannelPress,
+  } = props

-  const [selectedChannel, setSelectedChannel] = useState('welcome')
+  const communitiesExpandControl = communities.reduce(
+    (o, key) => ({ ...o, [key.id]: false }),
+
+    {} as Record<string, boolean>[]
+  )
+
+  const [isExpanded, setIsExpanded] = useState({
+    ...communitiesExpandControl,
+    welcome: true,
+    community: true,
+    design: true,
+  })

  const handleToggle = (id: string) => {
    setIsExpanded(prev => ({
@ -231,23 +71,23 @@ const Sidebar = (props: Props) => {
        zIndex={10}
      >
        <Stack paddingHorizontal={16} paddingBottom={16}>
-          <Stack marginTop={-32} marginBottom={12}>
+          <Stack marginTop={-40} marginBottom={12}>
            <Avatar
              withOutline
              src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images"
-              size={56}
+              size={80}
            />
          </Stack>
          <Heading marginBottom={16}>{name}</Heading>
          <Paragraph marginBottom={12}>{description}</Paragraph>
          <Stack flexDirection="row" alignItems="center" mb={12}>
-            <Group color="$neutral-100" size={16} />
+            <GroupIcon color="$neutral-100" size={16} />
            <Paragraph ml={8}>{membersCount}</Paragraph>
          </Stack>

          <Button>Join community</Button>
        </Stack>
-        {COMMUNITIES.map(community => (
+        {communities.map(community => (
          <Accordion
            key={community.id}
            isExpanded={!!isExpanded[community.id as keyof typeof isExpanded]}
@ -258,17 +98,22 @@ const Sidebar = (props: Props) => {
              !isExpanded[community.id as keyof typeof isExpanded]
            }
          >
-            {community.channels.map(channel => (
-              <AccordionItem
-                key={channel.id}
-                icon={channel.icon}
-                title={channel.title}
-                channelStatus={channel.channelStatus}
-                numberOfMessages={channel.numberOfMessages}
-                isSelected={selectedChannel === channel.id}
-                onPress={() => setSelectedChannel(channel.id)}
-              />
-            ))}
+            {community.channels.map((channel, index) => {
+              const isLastChannelOfTheList =
+                index === community.channels.length - 1
+              return (
+                <AccordionItem
+                  key={channel.id}
+                  icon={channel.icon}
+                  title={channel.title}
+                  channelStatus={channel.channelStatus}
+                  numberOfMessages={channel.numberOfMessages}
+                  isSelected={selectedChannel === channel.id}
+                  onPress={() => onChannelPress(channel.id)}
+                  mb={isLastChannelOfTheList ? 8 : 0}
+                />
+              )
+            })}
          </Accordion>
        ))}
        <Stack borderBottomColor="$neutral-10" borderBottomWidth={1} />
--- a/packages/icons/src/audio-icon.tsx
+++ b/packages/icons/src/audio-icon.tsx
@ -0,0 +1,30 @@
+import { memo } from 'react'
+
+import { Path, Svg } from 'react-native-svg'
+
+import { themed } from './themed'
+
+import type { IconProps } from './types'
+
+function Icon(props: IconProps) {
+  const { color, size = 20, ...rest } = props
+
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox={`0 0 ${size} ${size}`}
+      fill="none"
+      {...rest}
+    >
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10 2.35A3.65 3.65 0 0 0 6.35 6v3a3.65 3.65 0 0 0 7.3 0V6A3.65 3.65 0 0 0 10 2.35ZM7.65 6a2.35 2.35 0 1 1 4.7 0v3a2.35 2.35 0 0 1-4.7 0V6Zm-2.5 1.5V9a4.85 4.85 0 1 0 9.7 0V7.5h1.3V9a6.15 6.15 0 0 1-5.5 6.116v1.234H12v1.3H8v-1.3h1.35v-1.234A6.15 6.15 0 0 1 3.85 9V7.5h1.3Z"
+        fill={color}
+      />
+    </Svg>
+  )
+}
+
+export const AudioIcon = memo<IconProps>(themed(Icon))
--- a/packages/components/src/icon/icons/chevron.tsx
+++ b/packages/components/src/icon/icons/chevron.tsx
@ -1,12 +1,11 @@
 import { memo } from 'react'

+import { themed } from '@status-im/icons/src/themed'
 import { Path, Svg } from 'react-native-svg'

-import { themed } from '../themed'
+import type { IconProps } from './types'

-import type { IconProps } from '../IconProps'
-
-const Icon = (props: IconProps) => {
+function Icon(props: IconProps) {
  const { color, size = 16, ...otherProps } = props

  return (
@ -22,6 +21,4 @@ const Icon = (props: IconProps) => {
  )
 }

-Icon.displayName = 'Chevron'
-
-export const Chevron = memo<IconProps>(themed(Icon))
+export const ChevronIcon = memo<IconProps>(themed(Icon))
--- a/packages/icons/src/format-icon.tsx
+++ b/packages/icons/src/format-icon.tsx
@ -0,0 +1,32 @@
+import { memo } from 'react'
+
+import { ClipPath, Defs, G, Path, Svg } from 'react-native-svg'
+
+import { themed } from './themed'
+
+import type { IconProps } from './types'
+
+function Icon(props: IconProps) {
+  const { color, size = 20, ...rest } = props
+
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox={`0 0 ${size} ${size}`}
+      fill="none"
+      {...rest}
+    >
+      <G clipPath="url(#format-icon-a)" fill={color}>
+        <Path d="M4.343 14.047a.858.858 0 1 1-1.622-.558l2.575-7.314a1.493 1.493 0 0 1 2.817 0l2.578 7.314a.858.858 0 1 1-1.621.559L6.753 7.15a.051.051 0 0 0-.098 0l-2.312 6.896Zm-.137-2.434c0-.38.308-.688.688-.688h3.61a.688.688 0 0 1 0 1.376h-3.61a.688.688 0 0 1-.688-.688ZM13.82 14.823c-.449 0-.857-.085-1.223-.254a2.1 2.1 0 0 1-.872-.744c-.216-.326-.324-.72-.324-1.181 0-.407.08-.736.24-.988.16-.256.374-.456.642-.6.268-.145.563-.253.886-.324.327-.073.654-.132.984-.175.43-.055.78-.097 1.048-.125.27-.03.467-.081.59-.152.127-.07.19-.194.19-.37v-.036c0-.456-.125-.81-.374-1.062-.246-.252-.62-.379-1.122-.379-.52 0-.928.114-1.223.342-.13.1-.244.204-.34.311-.193.213-.49.344-.76.248-.303-.108-.457-.453-.275-.717.133-.192.285-.355.456-.488.311-.243.65-.413 1.016-.508.37-.099.732-.148 1.09-.148.227 0 .489.028.784.083.299.053.586.162.863.328.28.166.513.417.697.752.185.336.277.785.277 1.349v4.127c0 .3-.244.544-.544.544h-.065a.48.48 0 0 1-.48-.48v-.446a.034.034 0 0 0-.034-.034.035.035 0 0 0-.03.02 1.96 1.96 0 0 1-.36.474 2.131 2.131 0 0 1-.689.448c-.286.123-.635.185-1.048.185Zm.167-.98c.43 0 .794-.084 1.09-.253a1.729 1.729 0 0 0 .904-1.5v-.653c0-.117-.193-.225-.305-.192a5.124 5.124 0 0 1-.535.115 24.109 24.109 0 0 1-1.044.139 4.158 4.158 0 0 0-.794.18c-.243.08-.44.201-.59.364-.148.16-.222.379-.222.656 0 .379.14.665.42.859.283.19.642.286 1.076.286Z" />
+      </G>
+      <Defs>
+        <ClipPath id="format-icon-a">
+          <Path d="M0 0h20v20H0z" />
+        </ClipPath>
+      </Defs>
+    </Svg>
+  )
+}
+
+export const FormatIcon = memo<IconProps>(themed(Icon))
--- a/packages/components/src/icon/icons/group.tsx
+++ b/packages/components/src/icon/icons/group.tsx
@ -1,12 +1,11 @@
 import { memo } from 'react'

+import { themed } from '@status-im/icons/src/themed'
 import { Path, Svg } from 'react-native-svg'

-import { themed } from '../themed'
+import type { IconProps } from './types'

-import type { IconProps } from '../IconProps'
-
-const Icon = (props: IconProps) => {
+function Icon(props: IconProps) {
  const { color, size = 16, ...otherProps } = props

  return (
@ -24,16 +23,14 @@ const Icon = (props: IconProps) => {
        fillRule="evenodd"
        clipRule="evenodd"
        d="M4.6 5a1.9 1.9 0 1 1 3.8 0 1.9 1.9 0 0 1-3.8 0Zm1.9-3.1a3.1 3.1 0 1 0 0 6.2 3.1 3.1 0 0 0 0-6.2ZM5 8.9a3.6 3.6 0 0 0-3.6 3.6A1.6 1.6 0 0 0 3 14.1h6a1.6 1.6 0 0 0 1.6-1.6A3.6 3.6 0 0 0 7 8.9H5Zm-2.4 3.6A2.4 2.4 0 0 1 5 10.1h2a2.4 2.4 0 0 1 2.4 2.4.4.4 0 0 1-.4.4H3a.4.4 0 0 1-.4-.4Z"
-        fill={`${color}`}
+        fill={color}
      />
      <Path
        d="M10 3.1a1.9 1.9 0 0 1 0 3.8v1.2a3.1 3.1 0 0 0 0-6.2v1.2ZM11 10.1h.5a2.4 2.4 0 0 1 2.4 2.4.4.4 0 0 1-.4.4h-2v1.2h2a1.6 1.6 0 0 0 1.6-1.6 3.6 3.6 0 0 0-3.6-3.6H11v1.2Z"
-        fill={`${color}`}
+        fill={color}
      />
    </Svg>
  )
 }

-Icon.displayName = 'Group'
-
-export const Group = memo<IconProps>(themed(Icon))
+export const GroupIcon = memo<IconProps>(themed(Icon))
--- a/packages/icons/src/image-icon.tsx
+++ b/packages/icons/src/image-icon.tsx
@ -0,0 +1,24 @@
+import { memo } from 'react'
+
+import { Path, Svg } from 'react-native-svg'
+
+import { themed } from './themed'
+
+import type { IconProps } from './types'
+
+function Icon(props: IconProps) {
+  const { color, size = 20, ...rest } = props
+
+  return (
+    <Svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} {...rest}>
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.9 2.85h-.029c-1.096 0-1.958 0-2.651.057-.707.057-1.296.177-1.831.45a4.65 4.65 0 0 0-2.032 2.032c-.273.535-.393 1.124-.45 1.83-.057.694-.057 1.556-.057 2.652v.258c0 1.096 0 1.958.057 2.651.057.707.177 1.296.45 1.831a4.65 4.65 0 0 0 2.032 2.032c.535.273 1.124.393 1.83.45.694.057 1.556.057 2.652.057h.258c1.096 0 1.958 0 2.651-.057.707-.057 1.296-.177 1.831-.45a4.65 4.65 0 0 0 2.032-2.032c.273-.535.393-1.124.45-1.83.057-.694.057-1.556.057-2.652V9.87c0-1.096 0-1.958-.057-2.651-.057-.707-.177-1.296-.45-1.831a4.65 4.65 0 0 0-2.032-2.032c-.535-.273-1.124-.393-1.83-.45-.694-.057-1.556-.057-2.652-.057H9.9ZM5.98 4.515c.32-.163.719-.261 1.346-.313.634-.051 1.443-.052 2.574-.052h.2c1.13 0 1.94 0 2.574.052.627.052 1.026.15 1.347.313a3.35 3.35 0 0 1 1.464 1.464c.163.321.261.72.313 1.347.052.634.052 1.443.052 2.574v.2c0 1.13 0 1.94-.052 2.574a8.05 8.05 0 0 1-.024.243 5.089 5.089 0 0 0-2.754-.549 5.197 5.197 0 0 0-2.284.763 8.646 8.646 0 0 0-6.58-4.703c.007-.424.02-.785.046-1.102.052-.627.15-1.026.313-1.347A3.35 3.35 0 0 1 5.98 4.515Zm5.256 9.841c.155.483.268.98.336 1.487.424-.006.785-.02 1.102-.045.627-.052 1.026-.15 1.347-.313a3.35 3.35 0 0 0 1.372-1.296 3.818 3.818 0 0 0-2.263-.525 3.936 3.936 0 0 0-1.894.692Zm-3.039-2.553a7.35 7.35 0 0 1 2.063 4.047H9.9c-1.13 0-1.94 0-2.574-.052-.627-.052-1.026-.15-1.347-.313a3.35 3.35 0 0 1-1.464-1.464c-.163-.321-.261-.72-.313-1.347-.051-.634-.052-1.443-.052-2.574v-.36a7.35 7.35 0 0 1 4.047 2.063ZM11.15 8a.85.85 0 1 1 1.7 0 .85.85 0 0 1-1.7 0ZM12 5.85a2.15 2.15 0 1 0 0 4.3 2.15 2.15 0 0 0 0-4.3Z"
+        fill={color}
+      />
+    </Svg>
+  )
+}
+
+export const ImageIcon = memo<IconProps>(themed(Icon))
--- a/packages/icons/src/index.tsx
+++ b/packages/icons/src/index.tsx
@ -1,4 +1,11 @@
+export { AudioIcon } from './audio-icon'
+export { ChevronIcon } from './chevron-icon'
+export { FormatIcon } from './format-icon'
+export { GroupIcon } from './group-icon'
+export { ImageIcon } from './image-icon'
 export { LockedIcon } from './lock-icon'
 export { MembersIcon } from './members-icon'
+export { MutedIcon } from './muted-icon'
 export { OptionsIcon } from './options-icon'
+export { ReactionIcon } from './reaction-icon'
 export type { IconProps } from './types'
--- a/packages/icons/src/lock-icon.tsx
+++ b/packages/icons/src/lock-icon.tsx
@ -1,24 +1,25 @@
+import { memo } from 'react'
+
+import { Path, Svg } from 'react-native-svg'
+
+import { themed } from './themed'
+
 import type { IconProps } from './types'

-export function LockedIcon(props: IconProps) {
+function Icon(props: IconProps) {
  const { color = 'currentColor', size = 20, ...rest } = props

  // FIXME: not need to differentiate sizes in the designs
  return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 16 16"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...rest}
-    >
-      <path
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none" {...rest}>
+      <Path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M8 .9h-.012c-.081 0-.137 0-.186.002a3 3 0 00-2.9 2.9c-.002.05-.002.105-.002.186v1.175a3.6 3.6 0 00-2.127 2.405c-.123.46-.123.998-.123 1.832v.2c0 .834 0 1.373.123 1.832a3.6 3.6 0 002.545 2.545c.46.123.998.123 1.832.123H8.85c.834 0 1.373 0 1.832-.123a3.6 3.6 0 002.545-2.545c.123-.46.123-.998.123-1.832v-.2c0-.834 0-1.373-.123-1.832A3.6 3.6 0 0011.1 5.163V3.988c0-.081 0-.137-.002-.186A3 3 0 008.012.9H8zm.75 5.2h-1.5c-.969 0-1.335.005-1.621.082a2.4 2.4 0 00-1.697 1.697c-.077.286-.082.652-.082 1.621s.005 1.335.082 1.621a2.4 2.4 0 001.697 1.697c.286.077.652.082 1.621.082h1.5c.969 0 1.335-.005 1.621-.082a2.4 2.4 0 001.697-1.697c.077-.286.082-.652.082-1.621s-.005-1.335-.082-1.621a2.4 2.4 0 00-1.697-1.697C10.085 6.105 9.72 6.1 8.75 6.1zm.288-1.2H9.9V4v-.159a1.8 1.8 0 00-1.741-1.74 5.726 5.726 0 00-.318 0 1.8 1.8 0 00-1.74 1.74V4.9H9.037zM7.4 8.25h1.2v2.5H7.4v-2.5z"
        fill={color}
      />
-    </svg>
+    </Svg>
  )
 }
+
+export const LockedIcon = memo<IconProps>(themed(Icon))
--- a/packages/icons/src/members-icon.tsx
+++ b/packages/icons/src/members-icon.tsx
@ -1,29 +1,30 @@
+import { memo } from 'react'
+
+import { Path, Svg } from 'react-native-svg'
+
+import { themed } from './themed'
+
 import type { IconProps } from './types'

-export function MembersIcon(props: IconProps) {
+function Icon(props: IconProps) {
  const { color = 'currentColor', size = 20, ...rest } = props

  return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 20 20"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...rest}
-    >
-      <path
+    <Svg width={size} height={size} viewBox="0 0 20 20" fill="none" {...rest}>
+      <Path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M6.15 6a1.85 1.85 0 113.7 0 1.85 1.85 0 01-3.7 0zM8 2.85a3.15 3.15 0 100 6.3 3.15 3.15 0 000-6.3zm-1.25 7.5a4.4 4.4 0 00-4.4 4.4c0 1.049.85 1.9 1.9 1.9h7.5a1.9 1.9 0 001.9-1.9 4.4 4.4 0 00-4.4-4.4h-2.5zm-3.1 4.4a3.1 3.1 0 013.1-3.1h2.5a3.1 3.1 0 013.1 3.1.6.6 0 01-.6.6h-7.5a.6.6 0 01-.6-.6z"
        fill={color}
      />
-      <path
+      <Path
        d="M13.5 11h.25a3.75 3.75 0 013.75 3.75v0c0 .69-.56 1.25-1.25 1.25H14.5M11.809 8c1.153 0 2.087-.895 2.087-2s-.934-2-2.087-2"
        stroke={color}
        strokeWidth={1.3}
        strokeLinejoin="round"
      />
-    </svg>
+    </Svg>
  )
 }
+
+export const MembersIcon = memo<IconProps>(themed(Icon))
--- a/packages/components/src/icon/icons/muted.tsx
+++ b/packages/components/src/icon/icons/muted.tsx
@ -1,12 +1,11 @@
 import { memo } from 'react'

+import { themed } from '@status-im/icons/src/themed'
 import { Path, Svg } from 'react-native-svg'

-import { themed } from '../themed'
+import type { IconProps } from './types'

-import type { IconProps } from '../IconProps'
-
-const Icon = (props: IconProps) => {
+function Icon(props: IconProps) {
  const { color, size = 16, ...otherProps } = props

  return (
@ -27,6 +26,4 @@ const Icon = (props: IconProps) => {
  )
 }

-Icon.displayName = 'Muted'
-
-export const Muted = memo<IconProps>(themed(Icon))
+export const MutedIcon = memo<IconProps>(themed(Icon))
--- a/packages/icons/src/options-icon.tsx
+++ b/packages/icons/src/options-icon.tsx
@ -1,20 +1,21 @@
+import { memo } from 'react'
+
+import { Circle, Svg } from 'react-native-svg'
+
+import { themed } from './themed'
+
 import type { IconProps } from './types'

-export function OptionsIcon(props: IconProps) {
+function Icon(props: IconProps) {
  const { color = 'currentColor', size = 20, ...rest } = props

  return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 20 20"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...rest}
-    >
-      <circle cx={4.5} cy={10} r={1.5} fill={color} />
-      <circle cx={10} cy={10} r={1.5} fill={color} />
-      <circle cx={15.5} cy={10} r={1.5} fill={color} />
-    </svg>
+    <Svg width={size} height={size} viewBox="0 0 20 20" fill="none" {...rest}>
+      <Circle cx={4.5} cy={10} r={1.5} fill={color} />
+      <Circle cx={10} cy={10} r={1.5} fill={color} />
+      <Circle cx={15.5} cy={10} r={1.5} fill={color} />
+    </Svg>
  )
 }
+
+export const OptionsIcon = memo<IconProps>(themed(Icon))
--- a/packages/icons/src/reaction-icon.tsx
+++ b/packages/icons/src/reaction-icon.tsx
@ -0,0 +1,32 @@
+import { memo } from 'react'
+
+import { Circle, Path, Svg } from 'react-native-svg'
+
+import { themed } from './themed'
+
+import type { IconProps } from './types'
+
+export function Icon(props: IconProps) {
+  const { color = 'currentColor', size = 20, ...rest } = props
+
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox={`0 0 ${size} ${size}`}
+      fill="none"
+      {...rest}
+    >
+      <Circle cx="10" cy="10" r="6.75" stroke={color} strokeWidth="1.3" />
+      <Path
+        d="M7.525 12a3.5 3.5 0 0 0 4.95 0"
+        stroke={color}
+        strokeWidth="1.3"
+      />
+      <Circle cx="8" cy="8.5" r="1" fill={color} />
+      <Circle cx="12" cy="8.5" r="1" fill={color} />
+    </Svg>
+  )
+}
+
+export const ReactionIcon = memo<IconProps>(themed(Icon))
--- a/packages/components/src/icon/themed.tsx
+++ b/packages/components/src/icon/themed.tsx
@ -1,6 +1,6 @@
 import { useCurrentColor } from 'tamagui'

-import type { IconProps } from './IconProps'
+import type { IconProps } from './types'
 import type React from 'react'

 export function themed(Component: React.ElementType) {
--- a/packages/icons/src/types.ts
+++ b/packages/icons/src/types.ts
@ -1,9 +1,18 @@
-import type { SVGAttributes } from 'react'
+import type {
+  SizeTokens,
+  StyleObject,
+  ThemeParsed,
+  Tokens,
+} from '@tamagui/core'
+import type { SvgProps } from 'react-native-svg'

-export interface IconProps extends SVGAttributes<SVGElement> {
-  children?: never
-  width?: never
-  height?: never
-  color?: string
-  size?: number
+type GetTokenString<A> = A extends string ? `$${A}` : `$${string}`
+export type ColorTokens =
+  | GetTokenString<keyof Tokens['color']>
+  | GetTokenString<keyof ThemeParsed>
+
+export type IconProps = SvgProps & {
+  size?: number | SizeTokens
+  color?: ColorTokens
+  style?: StyleObject
 }
--- a/yarn.lock
+++ b/yarn.lock
@ -4421,6 +4421,48 @@
  resolved "https://registry.yarnpkg.com/@react-native/polyfills/-/polyfills-2.0.0.tgz#4c40b74655c83982c8cf47530ee7dc13d957b6aa"
  integrity sha512-K0aGNn1TjalKj+65D7ycc1//H9roAQ51GJVk5ZJQFb2teECGmzd86bYDC0aYdbRf7gtovescq4Zt6FR0tgXiHQ==

+"@react-navigation/core@^6.4.6":
+  version "6.4.6"
+  resolved "https://registry.yarnpkg.com/@react-navigation/core/-/core-6.4.6.tgz#b0738667dec5927b01c4c496c2f4c73ef8a5e4dd"
+  integrity sha512-6zaAgUT5k4vhJlddUk2l52RZyMkMelHdrRv1cL57ALi2RZzERdgmbiMKhJerxFLn9S8E3PUe8vwxHzjHOZKG4w==
+  dependencies:
+    "@react-navigation/routers" "^6.1.6"
+    escape-string-regexp "^4.0.0"
+    nanoid "^3.1.23"
+    query-string "^7.1.3"
+    react-is "^16.13.0"
+    use-latest-callback "^0.1.5"
+
+"@react-navigation/elements@^1.3.13":
+  version "1.3.13"
+  resolved "https://registry.yarnpkg.com/@react-navigation/elements/-/elements-1.3.13.tgz#5105fa26df8d32810cd9f14d6ec5a3d2c2bb26d2"
+  integrity sha512-LqqK5s2ZfYHn2cQ376jC5V9dQztLH5ixkkJj9WR7JY2g4SghDd39WJhL3Jillw1Mu3F3b9sZwvAK+QkXhnDeAA==
+
+"@react-navigation/native-stack@^6.9.8":
+  version "6.9.8"
+  resolved "https://registry.yarnpkg.com/@react-navigation/native-stack/-/native-stack-6.9.8.tgz#c953a169918a4bdde56f7d2dc1073da4726b4cb7"
+  integrity sha512-74dje939lflsTXJQwCAdznbJ4B6V8sA5CSzuHwbiogL8B6EVXNa/qliXtB7DBAvzeyWDWT3u+gM2vOYJOeXYhA==
+  dependencies:
+    "@react-navigation/elements" "^1.3.13"
+    warn-once "^0.1.0"
+
+"@react-navigation/native@^6.1.2":
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/@react-navigation/native/-/native-6.1.2.tgz#6fffbf4787c233687fff8fe9ce7364ffce696d38"
+  integrity sha512-qLUe0asHofr5EhxKjvUBJ9DrPPmR4535IEwmW3oU4DRb3cLbNysjajJKHL8kcYtqPvn9Bx9QZG2x0PMb2vN23A==
+  dependencies:
+    "@react-navigation/core" "^6.4.6"
+    escape-string-regexp "^4.0.0"
+    fast-deep-equal "^3.1.3"
+    nanoid "^3.1.23"
+
+"@react-navigation/routers@^6.1.6":
+  version "6.1.6"
+  resolved "https://registry.yarnpkg.com/@react-navigation/routers/-/routers-6.1.6.tgz#f57f2a73855d329255aa225fdad75ae8e7700c6d"
+  integrity sha512-Z5DeCW3pUvMafbU9Cjy1qJYC2Bvl8iy3+PfsB0DsAwQ6zZ3WAXW5FTMX4Gb9H+Jg6qHWGbMFFwlYpS3UJ3tlVQ==
+  dependencies:
+    nanoid "^3.1.23"
+
 "@rollup/pluginutils@^4.2.0", "@rollup/pluginutils@^4.2.1":
  version "4.2.1"
  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.2.1.tgz#e6c6c3aba0744edce3fb2074922d3776c0af2a6d"
@ -8636,7 +8678,7 @@ decamelize@^5.0.0:
  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-5.0.1.tgz#db11a92e58c741ef339fb0a2868d8a06a9a7b1e9"
  integrity sha512-VfxadyCECXgQlkoEAjeghAr5gY3Hf+IKjKb+X8tGVDtveCjN+USwprd2q3QXBR9T1+x2DG0XZF5/w+7HAtSaXA==

-decode-uri-component@^0.2.0:
+decode-uri-component@^0.2.0, decode-uri-component@^0.2.2:
  version "0.2.2"
  resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.2.tgz#e69dbe25d37941171dd540e024c444cd5188e1e9"
  integrity sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==
@ -10734,6 +10776,11 @@ fill-range@^7.0.1:
  dependencies:
    to-regex-range "^5.0.1"

+filter-obj@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/filter-obj/-/filter-obj-1.1.0.tgz#9b311112bc6c6127a16e016c6c5d7f19e0805c5b"
+  integrity sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ==
+
 finalhandler@1.1.2:
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.2.tgz#b7e7d000ffd11938d0fdb053506f6ebabe9f587d"
@ -13980,7 +14027,7 @@ nanoid@^3.0.2:
  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.1.tgz#6347a18cac88af88f58af0b3594b723d5e99bb35"
  integrity sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw==

-nanoid@^3.3.1, nanoid@^3.3.4:
+nanoid@^3.1.23, nanoid@^3.3.1, nanoid@^3.3.4:
  version "3.3.4"
  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
  integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
@ -15281,6 +15328,16 @@ qs@6.11.0, qs@^6.10.0, qs@^6.4.0:
  dependencies:
    side-channel "^1.0.4"

+query-string@^7.1.3:
+  version "7.1.3"
+  resolved "https://registry.yarnpkg.com/query-string/-/query-string-7.1.3.tgz#a1cf90e994abb113a325804a972d98276fe02328"
+  integrity sha512-hh2WYhq4fi8+b+/2Kg9CEge4fDPvHS534aOOvOZeQ3+Vf2mCFsaFBYj0i+iXcAq6I9Vzp5fjMFBlONvayDC1qg==
+  dependencies:
+    decode-uri-component "^0.2.2"
+    filter-obj "^1.1.0"
+    split-on-first "^1.0.0"
+    strict-uri-encode "^2.0.0"
+
 querystringify@^2.1.1:
  version "2.2.0"
  resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"
@ -15387,6 +15444,11 @@ react-element-to-jsx-string@^15.0.0:
    is-plain-object "5.0.0"
    react-is "18.1.0"

+react-freeze@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/react-freeze/-/react-freeze-1.0.3.tgz#5e3ca90e682fed1d73a7cb50c2c7402b3e85618d"
+  integrity sha512-ZnXwLQnGzrDpHBHiC56TXFXvmolPeMjTn1UOm610M4EXGzbEDR7oOIyS2ZiItgbs6eZc4oU/a0hpk8PrcKvv5g==
+
 react-inspector@^6.0.0:
  version "6.0.1"
  resolved "https://registry.yarnpkg.com/react-inspector/-/react-inspector-6.0.1.tgz#1a37f0165d9df81ee804d63259eaaeabe841287d"
@ -15402,7 +15464,7 @@ react-is@18.1.0:
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
  integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==

-react-is@^16.13.1:
+react-is@^16.13.0, react-is@^16.13.1:
  version "16.13.1"
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@ -15427,6 +15489,19 @@ react-native-gradle-plugin@^0.70.3:
  resolved "https://registry.yarnpkg.com/react-native-gradle-plugin/-/react-native-gradle-plugin-0.70.3.tgz#cbcf0619cbfbddaa9128701aa2d7b4145f9c4fc8"
  integrity sha512-oOanj84fJEXUg9FoEAQomA8ISG+DVIrTZ3qF7m69VQUJyOGYyDZmPqKcjvRku4KXlEH6hWO9i4ACLzNBh8gC0A==

+react-native-safe-area-context@4.4.1:
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-4.4.1.tgz#239c60b8a9a80eac70a38a822b04c0f1d15ffc01"
+  integrity sha512-N9XTjiuD73ZpVlejHrUWIFZc+6Z14co1K/p1IFMkImU7+avD69F3y+lhkqA2hN/+vljdZrBSiOwXPkuo43nFQA==
+
+react-native-screens@~3.18.0:
+  version "3.18.2"
+  resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-3.18.2.tgz#d7ab2d145258d3db9fa630fa5379dc4474117866"
+  integrity sha512-ANUEuvMUlsYJ1QKukEhzhfrvOUO9BVH9Nzg+6eWxpn3cfD/O83yPBOF8Mx6x5H/2+sMy+VS5x/chWOOo/U7QJw==
+  dependencies:
+    react-freeze "^1.0.0"
+    warn-once "^0.1.0"
+
 react-native-svg@^13.7.0:
  version "13.7.0"
  resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-13.7.0.tgz#be2ffb935e996762543dd7376bdc910722f7a43c"
@ -16566,6 +16641,11 @@ spdx-license-ids@^3.0.0:
  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.11.tgz#50c0d8c40a14ec1bf449bae69a0ea4685a9d9f95"
  integrity sha512-Ctl2BrFiM0X3MANYgj3CkygxhRmr9mi6xhejbdO960nF6EDJApTYpn0BQnDKlnNBULKiCN1n3w9EBkHK8ZWg+g==

+split-on-first@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/split-on-first/-/split-on-first-1.1.0.tgz#f610afeee3b12bce1d0c30425e76398b78249a5f"
+  integrity sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==
+
 split-string@^3.0.1, split-string@^3.0.2:
  version "3.1.0"
  resolved "https://registry.yarnpkg.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"
@ -16658,6 +16738,11 @@ stream-transform@^2.1.3:
  dependencies:
    mixme "^0.5.1"

+strict-uri-encode@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"
+  integrity sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ==
+
 string-argv@^0.3.1:
  version "0.3.1"
  resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.1.tgz#95e2fbec0427ae19184935f816d74aaa4c5c19da"
@ -17866,6 +17951,11 @@ use-isomorphic-layout-effect@^1.1.1:
  resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb"
  integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==

+use-latest-callback@^0.1.5:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/use-latest-callback/-/use-latest-callback-0.1.5.tgz#a4a836c08fa72f6608730b5b8f4bbd9c57c04f51"
+  integrity sha512-HtHatS2U4/h32NlkhupDsPlrbiD27gSH5swBdtXbCAlc6pfOFzaj0FehW/FO12rx8j2Vy4/lJScCiJyM01E+bQ==
+
 use-sidecar@^1.0.1:
  version "1.0.5"
  resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.0.5.tgz#ffff2a17c1df42e348624b699ba6e5c220527f2b"
@ -18081,6 +18171,11 @@ walker@^1.0.7, walker@^1.0.8:
  dependencies:
    makeerror "1.0.12"

+warn-once@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/warn-once/-/warn-once-0.1.1.tgz#952088f4fb56896e73fd4e6a3767272a3fccce43"
+  integrity sha512-VkQZJbO8zVImzYFteBXvBOZEl1qL175WH8VmZcxF2fZAoudNhNDvHi+doCaAEdU2l2vtcIwa2zn0QK5+I1HQ3Q==
+
 watchpack@^2.2.0:
  version "2.4.0"
  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.4.0.tgz#fa33032374962c78113f93c7f2fb4c54c9862a5d"