From 5d3926779ff55c1f7fd76d8db3970ca66e2a6f05 Mon Sep 17 00:00:00 2001
From: Pavel <14926950+prichodko@users.noreply.github.com>
Date: Thu, 3 Mar 2022 16:20:23 +0100
Subject: [PATCH] Update @status-im/react exports (#235)

* Move Community to modules folder

* Move Channel to modules folder

* Remove fetch metadata provider

* Update index file extension
---
 examples/channel/index.tsx                    |  4 +-
 examples/community/index.tsx                  |  4 +-
 packages/status-react/package.json            |  2 +-
 .../components/Chat/ChatMessageContent.tsx    | 34 +++++-----
 .../src/components/Chat/ChatTopbar.tsx        |  4 +-
 .../src/components/CommunityChat.tsx          | 67 -------------------
 .../src/contexts/fetchMetadataProvider.tsx    | 27 --------
 .../src/groupChatComponents/GroupChat.tsx     | 58 ----------------
 packages/status-react/src/index.ts            |  4 --
 packages/status-react/src/index.tsx           |  4 ++
 .../channel}/GroupChat/GroupChatBody.tsx      | 24 +++----
 .../channel}/GroupChatRoom.tsx                | 35 +++++-----
 .../channel}/GroupMembers/GroupMembers.tsx    |  4 +-
 .../src/modules/channel/index.tsx             | 60 +++++++++++++++++
 .../community}/CommunityChatRoom.tsx          | 47 ++++++-------
 .../community/CommunitySidebar.tsx}           | 12 ++--
 .../src/modules/community/index.tsx           | 63 +++++++++++++++++
 17 files changed, 212 insertions(+), 241 deletions(-)
 delete mode 100644 packages/status-react/src/components/CommunityChat.tsx
 delete mode 100644 packages/status-react/src/contexts/fetchMetadataProvider.tsx
 delete mode 100644 packages/status-react/src/groupChatComponents/GroupChat.tsx
 delete mode 100644 packages/status-react/src/index.ts
 create mode 100644 packages/status-react/src/index.tsx
 rename packages/status-react/src/{groupChatComponents => modules/channel}/GroupChat/GroupChatBody.tsx (84%)
 rename packages/status-react/src/{groupChatComponents => modules/channel}/GroupChatRoom.tsx (59%)
 rename packages/status-react/src/{groupChatComponents => modules/channel}/GroupMembers/GroupMembers.tsx (90%)
 create mode 100644 packages/status-react/src/modules/channel/index.tsx
 rename packages/status-react/src/{components => modules/community}/CommunityChatRoom.tsx (54%)
 rename packages/status-react/src/{components/Community.tsx => modules/community/CommunitySidebar.tsx} (58%)
 create mode 100644 packages/status-react/src/modules/community/index.tsx

diff --git a/examples/channel/index.tsx b/examples/channel/index.tsx
index 165c1524..335d3a87 100644
--- a/examples/channel/index.tsx
+++ b/examples/channel/index.tsx
@@ -1,12 +1,12 @@
 import React, { StrictMode } from 'react'
 import { render } from 'react-dom'
 
-import { GroupChat, lightTheme } from '@status-im/react'
+import { Channel, lightTheme } from '@status-im/react'
 
 const App = () => {
   return (
     <div>
-      <GroupChat
+      <Channel
         theme={lightTheme}
         communityKey="<YOUR_COMMUNITY_KEY>"
         config={{
diff --git a/examples/community/index.tsx b/examples/community/index.tsx
index b1d272d7..6f4cc80c 100644
--- a/examples/community/index.tsx
+++ b/examples/community/index.tsx
@@ -1,12 +1,12 @@
 import React, { StrictMode } from 'react'
 import { render } from 'react-dom'
 
-import { CommunityChat, lightTheme } from '@status-im/react'
+import { Community, lightTheme } from '@status-im/react'
 
 const App = () => {
   return (
     <div>
-      <CommunityChat
+      <Community
         theme={lightTheme}
         communityKey="<YOUR_COMMUNITY_KEY>"
         config={{
diff --git a/packages/status-react/package.json b/packages/status-react/package.json
index 67bc2b3f..bd6364e5 100644
--- a/packages/status-react/package.json
+++ b/packages/status-react/package.json
@@ -11,7 +11,7 @@
   "bugs": {
     "url": "https://github.com/status-im/status-web/issues"
   },
-  "source": "src/index.ts",
+  "source": "src/index.tsx",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/types.d.ts",
diff --git a/packages/status-react/src/components/Chat/ChatMessageContent.tsx b/packages/status-react/src/components/Chat/ChatMessageContent.tsx
index b3e568e0..f19b4276 100644
--- a/packages/status-react/src/components/Chat/ChatMessageContent.tsx
+++ b/packages/status-react/src/components/Chat/ChatMessageContent.tsx
@@ -3,7 +3,6 @@ import React, { useEffect, useMemo, useRef, useState } from 'react'
 import { decode } from 'html-entities'
 import styled from 'styled-components'
 
-import { useFetchMetadata } from '../../contexts/fetchMetadataProvider'
 import { useUserPublicKey } from '../../contexts/identityProvider'
 import { useMessengerContext } from '../../contexts/messengerProvider'
 import { useClickOutside } from '../../hooks/useClickOutside'
@@ -61,13 +60,12 @@ export function ChatMessageContent({
   setLinkOpen,
   setMentioned,
 }: ChatMessageContentProps) {
-  const fetchMetadata = useFetchMetadata()
   const { content, image } = useMemo(() => message, [message])
   const [elements, setElements] = useState<(string | React.ReactElement)[]>([
     content,
   ])
   const [link, setLink] = useState<string | undefined>(undefined)
-  const [openGraph, setOpenGraph] = useState<Metadata | undefined>(undefined)
+  const [openGraph] = useState<Metadata | undefined>(undefined)
 
   useEffect(() => {
     let link
@@ -95,21 +93,21 @@ export function ChatMessageContent({
     setElements(newSplit)
   }, [content, setLink, setMentioned, setElements, setLinkOpen])
 
-  useEffect(() => {
-    const updatePreview = async () => {
-      if (link && fetchMetadata) {
-        try {
-          const metadata = await fetchMetadata(link)
-          if (metadata) {
-            setOpenGraph(metadata)
-          }
-        } catch {
-          return
-        }
-      }
-    }
-    updatePreview()
-  }, [link, fetchMetadata])
+  // useEffect(() => {
+  //   const updatePreview = async () => {
+  //     if (link && fetchMetadata) {
+  //       try {
+  //         const metadata = await fetchMetadata(link)
+  //         if (metadata) {
+  //           setOpenGraph(metadata)
+  //         }
+  //       } catch {
+  //         return
+  //       }
+  //     }
+  //   }
+  //   updatePreview()
+  // }, [link, fetchMetadata])
 
   return (
     <ContentWrapper>
diff --git a/packages/status-react/src/components/Chat/ChatTopbar.tsx b/packages/status-react/src/components/Chat/ChatTopbar.tsx
index 586fe563..3565c8c2 100644
--- a/packages/status-react/src/components/Chat/ChatTopbar.tsx
+++ b/packages/status-react/src/components/Chat/ChatTopbar.tsx
@@ -5,12 +5,12 @@ import styled from 'styled-components'
 import { useMessengerContext } from '../../contexts/messengerProvider'
 import { useNarrow } from '../../contexts/narrowProvider'
 import { useClickOutside } from '../../hooks/useClickOutside'
+import { CommunitySidebar } from '../../modules/community/CommunitySidebar'
 import {
   ActivityButton,
   ActivityWrapper,
 } from '../ActivityCenter/ActivityButton'
 import { Channel } from '../Channels/Channel'
-import { Community } from '../Community'
 import { ChannelMenu } from '../Form/ChannelMenu'
 import { ActivityIcon } from '../Icons/ActivityIcon'
 import { MembersIcon } from '../Icons/MembersIcon'
@@ -85,7 +85,7 @@ export function ChatTopbar({
           <>
             {narrow && (
               <CommunityWrap className={narrow ? 'narrow' : ''}>
-                <Community />
+                <CommunitySidebar />
               </CommunityWrap>
             )}
 
diff --git a/packages/status-react/src/components/CommunityChat.tsx b/packages/status-react/src/components/CommunityChat.tsx
deleted file mode 100644
index e1dd549b..00000000
--- a/packages/status-react/src/components/CommunityChat.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import React, { useRef } from 'react'
-
-import styled, { ThemeProvider } from 'styled-components'
-
-import { ChatStateProvider } from '../contexts/chatStateProvider'
-import { ConfigProvider } from '../contexts/configProvider'
-import { FetchMetadataProvider } from '../contexts/fetchMetadataProvider'
-import { IdentityProvider } from '../contexts/identityProvider'
-import { MessengerProvider } from '../contexts/messengerProvider'
-import { ModalProvider } from '../contexts/modalProvider'
-import { NarrowProvider } from '../contexts/narrowProvider'
-import { ScrollProvider } from '../contexts/scrollProvider'
-import { ToastProvider } from '../contexts/toastProvider'
-import { GlobalStyle } from '../styles/GlobalStyle'
-import { CommunityChatRoom } from './CommunityChatRoom'
-
-import type { ConfigType } from '..'
-import type { Metadata } from '../models/Metadata'
-import type { Theme } from '../styles/themes'
-
-interface CommunityChatProps {
-  theme: Theme
-  communityKey: string
-  config: ConfigType
-  fetchMetadata?: (url: string) => Promise<Metadata | undefined>
-}
-
-export function CommunityChat({
-  theme,
-  config,
-  fetchMetadata,
-  communityKey,
-}: CommunityChatProps) {
-  const ref = useRef<HTMLHeadingElement>(null)
-  return (
-    <ConfigProvider config={config}>
-      <ThemeProvider theme={theme}>
-        <NarrowProvider myRef={ref}>
-          <FetchMetadataProvider fetchMetadata={fetchMetadata}>
-            <ModalProvider>
-              <ToastProvider>
-                <Wrapper ref={ref}>
-                  <GlobalStyle />
-                  <IdentityProvider>
-                    <MessengerProvider communityKey={communityKey}>
-                      <ChatStateProvider>
-                        <ScrollProvider>
-                          <CommunityChatRoom />
-                          <div id="modal-root" />
-                        </ScrollProvider>
-                      </ChatStateProvider>
-                    </MessengerProvider>
-                  </IdentityProvider>
-                </Wrapper>
-              </ToastProvider>
-            </ModalProvider>
-          </FetchMetadataProvider>
-        </NarrowProvider>
-      </ThemeProvider>
-    </ConfigProvider>
-  )
-}
-
-const Wrapper = styled.div`
-  height: 100%;
-  overflow: hidden;
-`
diff --git a/packages/status-react/src/contexts/fetchMetadataProvider.tsx b/packages/status-react/src/contexts/fetchMetadataProvider.tsx
deleted file mode 100644
index b476f9e9..00000000
--- a/packages/status-react/src/contexts/fetchMetadataProvider.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React, { createContext, useContext } from 'react'
-
-type Metadata = Record<string, string>
-
-const FetchMetadataContext = createContext<
-  ((link: string) => Promise<Metadata>) | undefined
->(undefined)
-
-export function useFetchMetadata() {
-  return useContext(FetchMetadataContext)
-}
-
-interface FetchMetadataProviderProps {
-  children: React.ReactNode
-  fetchMetadata?: (link: string) => Promise<Metadata>
-}
-
-export function FetchMetadataProvider({
-  children,
-  fetchMetadata,
-}: FetchMetadataProviderProps) {
-  return (
-    <FetchMetadataContext.Provider value={fetchMetadata}>
-      {children}
-    </FetchMetadataContext.Provider>
-  )
-}
diff --git a/packages/status-react/src/groupChatComponents/GroupChat.tsx b/packages/status-react/src/groupChatComponents/GroupChat.tsx
deleted file mode 100644
index b5d72b87..00000000
--- a/packages/status-react/src/groupChatComponents/GroupChat.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import React, { useRef } from 'react'
-
-import styled, { ThemeProvider } from 'styled-components'
-
-import { ChatStateProvider } from '../contexts/chatStateProvider'
-import { ConfigProvider } from '../contexts/configProvider'
-import { FetchMetadataProvider } from '../contexts/fetchMetadataProvider'
-import { IdentityProvider } from '../contexts/identityProvider'
-import { MessengerProvider } from '../contexts/messengerProvider'
-import { ModalProvider } from '../contexts/modalProvider'
-import { NarrowProvider } from '../contexts/narrowProvider'
-import { ToastProvider } from '../contexts/toastProvider'
-import { GlobalStyle } from '../styles/GlobalStyle'
-import { GroupChatRoom } from './GroupChatRoom'
-
-import type { ConfigType } from '..'
-import type { Metadata } from '../models/Metadata'
-import type { Theme } from '../styles/themes'
-
-interface GroupChatProps {
-  theme: Theme
-  config: ConfigType
-  fetchMetadata?: (url: string) => Promise<Metadata | undefined>
-}
-
-export function GroupChat({ theme, config, fetchMetadata }: GroupChatProps) {
-  const ref = useRef<HTMLHeadingElement>(null)
-  return (
-    <ConfigProvider config={config}>
-      <ThemeProvider theme={theme}>
-        <NarrowProvider myRef={ref}>
-          <FetchMetadataProvider fetchMetadata={fetchMetadata}>
-            <ModalProvider>
-              <ToastProvider>
-                <Wrapper ref={ref}>
-                  <GlobalStyle />
-                  <IdentityProvider>
-                    <MessengerProvider communityKey={undefined}>
-                      <ChatStateProvider>
-                        <GroupChatRoom />
-                        <div id="modal-root" />
-                      </ChatStateProvider>
-                    </MessengerProvider>
-                  </IdentityProvider>
-                </Wrapper>
-              </ToastProvider>
-            </ModalProvider>
-          </FetchMetadataProvider>
-        </NarrowProvider>
-      </ThemeProvider>
-    </ConfigProvider>
-  )
-}
-
-const Wrapper = styled.div`
-  height: 100%;
-  overflow: hidden;
-`
diff --git a/packages/status-react/src/index.ts b/packages/status-react/src/index.ts
deleted file mode 100644
index 2257db38..00000000
--- a/packages/status-react/src/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export { CommunityChat } from './components/CommunityChat'
-export type { ConfigType } from './contexts/configProvider'
-export { GroupChat } from './groupChatComponents/GroupChat'
-export { darkTheme, lightTheme } from './styles/themes'
diff --git a/packages/status-react/src/index.tsx b/packages/status-react/src/index.tsx
new file mode 100644
index 00000000..3a4fded2
--- /dev/null
+++ b/packages/status-react/src/index.tsx
@@ -0,0 +1,4 @@
+export type { ConfigType } from './contexts/configProvider'
+export { type ChannelProps, Channel } from './modules/channel'
+export { type CommunityProps, Community } from './modules/community'
+export { darkTheme, lightTheme } from './styles/themes'
diff --git a/packages/status-react/src/groupChatComponents/GroupChat/GroupChatBody.tsx b/packages/status-react/src/modules/channel/GroupChat/GroupChatBody.tsx
similarity index 84%
rename from packages/status-react/src/groupChatComponents/GroupChat/GroupChatBody.tsx
rename to packages/status-react/src/modules/channel/GroupChat/GroupChatBody.tsx
index 6a5117ef..a75b23d8 100644
--- a/packages/status-react/src/groupChatComponents/GroupChat/GroupChatBody.tsx
+++ b/packages/status-react/src/modules/channel/GroupChat/GroupChatBody.tsx
@@ -2,19 +2,19 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react'
 
 import styled from 'styled-components'
 
-import { ChatCreation } from '../../components/Chat/ChatCreation'
-import { ChatInput } from '../../components/Chat/ChatInput'
-import { ChatTopbar, ChatTopbarLoading } from '../../components/Chat/ChatTopbar'
-import { TokenRequirement } from '../../components/Form/TokenRequirement'
-import { MessagesList } from '../../components/Messages/MessagesList'
-import { NarrowChannels } from '../../components/NarrowMode/NarrowChannels'
-import { NarrowMembers } from '../../components/NarrowMode/NarrowMembers'
-import { LoadingSkeleton } from '../../components/Skeleton/LoadingSkeleton'
-import { useMessengerContext } from '../../contexts/messengerProvider'
-import { useNarrow } from '../../contexts/narrowProvider'
+import { ChatCreation } from '~/src/components/Chat/ChatCreation'
+import { ChatInput } from '~/src/components/Chat/ChatInput'
+import { ChatTopbar, ChatTopbarLoading } from '~/src/components/Chat/ChatTopbar'
+import { TokenRequirement } from '~/src/components/Form/TokenRequirement'
+import { MessagesList } from '~/src/components/Messages/MessagesList'
+import { NarrowChannels } from '~/src/components/NarrowMode/NarrowChannels'
+import { NarrowMembers } from '~/src/components/NarrowMode/NarrowMembers'
+import { LoadingSkeleton } from '~/src/components/Skeleton/LoadingSkeleton'
+import { useMessengerContext } from '~/src/contexts/messengerProvider'
+import { useNarrow } from '~/src/contexts/narrowProvider'
 
-import type { Reply } from '../../hooks/useReply'
-import type { ChannelData } from '../../models/ChannelData'
+import type { Reply } from '~/src/hooks/useReply'
+import type { ChannelData } from '~/src/models/ChannelData'
 
 export enum ChatBodyState {
   Chat,
diff --git a/packages/status-react/src/groupChatComponents/GroupChatRoom.tsx b/packages/status-react/src/modules/channel/GroupChatRoom.tsx
similarity index 59%
rename from packages/status-react/src/groupChatComponents/GroupChatRoom.tsx
rename to packages/status-react/src/modules/channel/GroupChatRoom.tsx
index 55f69781..14953149 100644
--- a/packages/status-react/src/groupChatComponents/GroupChatRoom.tsx
+++ b/packages/status-react/src/modules/channel/GroupChatRoom.tsx
@@ -2,23 +2,24 @@ import React, { useState } from 'react'
 
 import styled from 'styled-components'
 
-import { Channels } from '../components/Channels/Channels'
-import { ChatCreation } from '../components/Chat/ChatCreation'
-import { AgreementModal } from '../components/Modals/AgreementModal'
-import { CoinbaseModal } from '../components/Modals/CoinbaseModal'
-import { EditModal } from '../components/Modals/EditModal'
-import { LeavingModal } from '../components/Modals/LeavingModal'
-import { LogoutModal } from '../components/Modals/LogoutModal'
-import { ProfileFoundModal } from '../components/Modals/ProfileFoundModal'
-import { ProfileModal } from '../components/Modals/ProfileModal'
-import { StatusModal } from '../components/Modals/StatusModal'
-import { UserCreationModal } from '../components/Modals/UserCreationModal'
-import { UserCreationStartModal } from '../components/Modals/UserCreationStartModal'
-import { WalletConnectModal } from '../components/Modals/WalletConnectModal'
-import { WalletModal } from '../components/Modals/WalletModal'
-import { ToastMessageList } from '../components/ToastMessages/ToastMessageList'
-import { ChatState, useChatState } from '../contexts/chatStateProvider'
-import { useNarrow } from '../contexts/narrowProvider'
+import { Channels } from '~/src/components/Channels/Channels'
+import { ChatCreation } from '~/src/components/Chat/ChatCreation'
+import { AgreementModal } from '~/src/components/Modals/AgreementModal'
+import { CoinbaseModal } from '~/src/components/Modals/CoinbaseModal'
+import { EditModal } from '~/src/components/Modals/EditModal'
+import { LeavingModal } from '~/src/components/Modals/LeavingModal'
+import { LogoutModal } from '~/src/components/Modals/LogoutModal'
+import { ProfileFoundModal } from '~/src/components/Modals/ProfileFoundModal'
+import { ProfileModal } from '~/src/components/Modals/ProfileModal'
+import { StatusModal } from '~/src/components/Modals/StatusModal'
+import { UserCreationModal } from '~/src/components/Modals/UserCreationModal'
+import { UserCreationStartModal } from '~/src/components/Modals/UserCreationStartModal'
+import { WalletConnectModal } from '~/src/components/Modals/WalletConnectModal'
+import { WalletModal } from '~/src/components/Modals/WalletModal'
+import { ToastMessageList } from '~/src/components/ToastMessages/ToastMessageList'
+import { ChatState, useChatState } from '~/src/contexts/chatStateProvider'
+import { useNarrow } from '~/src/contexts/narrowProvider'
+
 import { GroupChatBody } from './GroupChat/GroupChatBody'
 import { GroupMembers } from './GroupMembers/GroupMembers'
 
diff --git a/packages/status-react/src/groupChatComponents/GroupMembers/GroupMembers.tsx b/packages/status-react/src/modules/channel/GroupMembers/GroupMembers.tsx
similarity index 90%
rename from packages/status-react/src/groupChatComponents/GroupMembers/GroupMembers.tsx
rename to packages/status-react/src/modules/channel/GroupMembers/GroupMembers.tsx
index aabea524..e0b51728 100644
--- a/packages/status-react/src/groupChatComponents/GroupMembers/GroupMembers.tsx
+++ b/packages/status-react/src/modules/channel/GroupMembers/GroupMembers.tsx
@@ -2,8 +2,8 @@ import React, { useMemo, useState } from 'react'
 
 import styled from 'styled-components'
 
-import { MembersList } from '../../components/Members/MembersList'
-import { useMessengerContext } from '../../contexts/messengerProvider'
+import { MembersList } from '~/src/components/Members/MembersList'
+import { useMessengerContext } from '~/src/contexts/messengerProvider'
 
 export function GroupMembers() {
   const { addContact, activeChannel } = useMessengerContext()
diff --git a/packages/status-react/src/modules/channel/index.tsx b/packages/status-react/src/modules/channel/index.tsx
new file mode 100644
index 00000000..02b40c8a
--- /dev/null
+++ b/packages/status-react/src/modules/channel/index.tsx
@@ -0,0 +1,60 @@
+import React, { useRef } from 'react'
+
+import styled, { ThemeProvider } from 'styled-components'
+
+import { ChatStateProvider } from '~/src/contexts/chatStateProvider'
+import { ConfigProvider } from '~/src/contexts/configProvider'
+import { IdentityProvider } from '~/src/contexts/identityProvider'
+import { MessengerProvider } from '~/src/contexts/messengerProvider'
+import { ModalProvider } from '~/src/contexts/modalProvider'
+import { NarrowProvider } from '~/src/contexts/narrowProvider'
+import { ToastProvider } from '~/src/contexts/toastProvider'
+import { GlobalStyle } from '~/src/styles/GlobalStyle'
+
+import { GroupChatRoom } from './GroupChatRoom'
+
+import type { ConfigType } from '~/src/contexts/configProvider'
+import type { Theme } from '~/src/styles/themes'
+
+interface Props {
+  communityKey: string
+  theme: Theme
+  config: ConfigType
+}
+
+export const Channel = (props: Props) => {
+  const { communityKey, theme, config } = props
+
+  const ref = useRef<HTMLHeadingElement>(null)
+
+  return (
+    <ConfigProvider config={config}>
+      <ThemeProvider theme={theme}>
+        <NarrowProvider myRef={ref}>
+          <ModalProvider>
+            <ToastProvider>
+              <Wrapper ref={ref}>
+                <GlobalStyle />
+                <IdentityProvider>
+                  <MessengerProvider communityKey={communityKey}>
+                    <ChatStateProvider>
+                      <GroupChatRoom />
+                      <div id="modal-root" />
+                    </ChatStateProvider>
+                  </MessengerProvider>
+                </IdentityProvider>
+              </Wrapper>
+            </ToastProvider>
+          </ModalProvider>
+        </NarrowProvider>
+      </ThemeProvider>
+    </ConfigProvider>
+  )
+}
+
+export type { Props as ChannelProps }
+
+const Wrapper = styled.div`
+  height: 100%;
+  overflow: hidden;
+`
diff --git a/packages/status-react/src/components/CommunityChatRoom.tsx b/packages/status-react/src/modules/community/CommunityChatRoom.tsx
similarity index 54%
rename from packages/status-react/src/components/CommunityChatRoom.tsx
rename to packages/status-react/src/modules/community/CommunityChatRoom.tsx
index 0d49704d..a8d31132 100644
--- a/packages/status-react/src/components/CommunityChatRoom.tsx
+++ b/packages/status-react/src/modules/community/CommunityChatRoom.tsx
@@ -2,28 +2,29 @@ import React, { useState } from 'react'
 
 import styled from 'styled-components'
 
-import { ChatState, useChatState } from '../contexts/chatStateProvider'
-import { useMessengerContext } from '../contexts/messengerProvider'
-import { useNarrow } from '../contexts/narrowProvider'
-import { Channels } from './Channels/Channels'
-import { ChatBody } from './Chat/ChatBody'
-import { ChatCreation } from './Chat/ChatCreation'
-import { Community } from './Community'
-import { Members } from './Members/Members'
-import { AgreementModal } from './Modals/AgreementModal'
-import { CoinbaseModal } from './Modals/CoinbaseModal'
-import { CommunityModal } from './Modals/CommunityModal'
-import { EditModal } from './Modals/EditModal'
-import { LeavingModal } from './Modals/LeavingModal'
-import { LogoutModal } from './Modals/LogoutModal'
-import { ProfileFoundModal } from './Modals/ProfileFoundModal'
-import { ProfileModal } from './Modals/ProfileModal'
-import { StatusModal } from './Modals/StatusModal'
-import { UserCreationModal } from './Modals/UserCreationModal'
-import { UserCreationStartModal } from './Modals/UserCreationStartModal'
-import { WalletConnectModal } from './Modals/WalletConnectModal'
-import { WalletModal } from './Modals/WalletModal'
-import { ToastMessageList } from './ToastMessages/ToastMessageList'
+import { Channels } from '~/src/components/Channels/Channels'
+import { ChatBody } from '~/src/components/Chat/ChatBody'
+import { ChatCreation } from '~/src/components/Chat/ChatCreation'
+import { Members } from '~/src/components/Members/Members'
+import { AgreementModal } from '~/src/components/Modals/AgreementModal'
+import { CoinbaseModal } from '~/src/components/Modals/CoinbaseModal'
+import { CommunityModal } from '~/src/components/Modals/CommunityModal'
+import { EditModal } from '~/src/components/Modals/EditModal'
+import { LeavingModal } from '~/src/components/Modals/LeavingModal'
+import { LogoutModal } from '~/src/components/Modals/LogoutModal'
+import { ProfileFoundModal } from '~/src/components/Modals/ProfileFoundModal'
+import { ProfileModal } from '~/src/components/Modals/ProfileModal'
+import { StatusModal } from '~/src/components/Modals/StatusModal'
+import { UserCreationModal } from '~/src/components/Modals/UserCreationModal'
+import { UserCreationStartModal } from '~/src/components/Modals/UserCreationStartModal'
+import { WalletConnectModal } from '~/src/components/Modals/WalletConnectModal'
+import { WalletModal } from '~/src/components/Modals/WalletModal'
+import { ToastMessageList } from '~/src/components/ToastMessages/ToastMessageList'
+import { ChatState, useChatState } from '~/src/contexts/chatStateProvider'
+import { useMessengerContext } from '~/src/contexts/messengerProvider'
+import { useNarrow } from '~/src/contexts/narrowProvider'
+
+import { CommunitySidebar } from './CommunitySidebar'
 
 function Modals() {
   return (
@@ -98,7 +99,7 @@ const ChannelsWrapper = styled.div`
   flex-direction: column;
 `
 
-const StyledCommunity = styled(Community)`
+const StyledCommunity = styled(CommunitySidebar)`
   padding: 0 0 0 8px;
   margin: 0 0 16px;
 `
diff --git a/packages/status-react/src/components/Community.tsx b/packages/status-react/src/modules/community/CommunitySidebar.tsx
similarity index 58%
rename from packages/status-react/src/components/Community.tsx
rename to packages/status-react/src/modules/community/CommunitySidebar.tsx
index b8973f10..a76ced46 100644
--- a/packages/status-react/src/components/Community.tsx
+++ b/packages/status-react/src/modules/community/CommunitySidebar.tsx
@@ -2,17 +2,17 @@ import React from 'react'
 
 import styled from 'styled-components'
 
-import { useMessengerContext } from '../contexts/messengerProvider'
-import { useModal } from '../contexts/modalProvider'
-import { CommunityIdentity } from './CommunityIdentity'
-import { CommunityModalName } from './Modals/CommunityModal'
-import { CommunitySkeleton } from './Skeleton/CommunitySkeleton'
+import { CommunityIdentity } from '../../components/CommunityIdentity'
+import { CommunityModalName } from '../../components/Modals/CommunityModal'
+import { CommunitySkeleton } from '../../components/Skeleton/CommunitySkeleton'
+import { useMessengerContext } from '../../contexts/messengerProvider'
+import { useModal } from '../../contexts/modalProvider'
 
 interface CommunityProps {
   className?: string
 }
 
-export function Community({ className }: CommunityProps) {
+export function CommunitySidebar({ className }: CommunityProps) {
   const { communityData } = useMessengerContext()
   const { setModal } = useModal(CommunityModalName)
 
diff --git a/packages/status-react/src/modules/community/index.tsx b/packages/status-react/src/modules/community/index.tsx
new file mode 100644
index 00000000..b9db0665
--- /dev/null
+++ b/packages/status-react/src/modules/community/index.tsx
@@ -0,0 +1,63 @@
+import React, { useRef } from 'react'
+
+import styled, { ThemeProvider } from 'styled-components'
+
+import { ChatStateProvider } from '~/src/contexts/chatStateProvider'
+import { ConfigProvider } from '~/src/contexts/configProvider'
+import { IdentityProvider } from '~/src/contexts/identityProvider'
+import { MessengerProvider } from '~/src/contexts/messengerProvider'
+import { ModalProvider } from '~/src/contexts/modalProvider'
+import { NarrowProvider } from '~/src/contexts/narrowProvider'
+import { ScrollProvider } from '~/src/contexts/scrollProvider'
+import { ToastProvider } from '~/src/contexts/toastProvider'
+import { GlobalStyle } from '~/src/styles/GlobalStyle'
+
+import { CommunityChatRoom } from './CommunityChatRoom'
+
+import type { ConfigType } from '~/src/contexts/configProvider'
+import type { Theme } from '~/src/styles/themes'
+
+interface Props {
+  theme: Theme
+  communityKey: string
+  config: ConfigType
+}
+
+export const Community = (props: Props) => {
+  const { theme, config, communityKey } = props
+
+  const ref = useRef<HTMLHeadingElement>(null)
+
+  return (
+    <ConfigProvider config={config}>
+      <ThemeProvider theme={theme}>
+        <NarrowProvider myRef={ref}>
+          <ModalProvider>
+            <ToastProvider>
+              <Wrapper ref={ref}>
+                <GlobalStyle />
+                <IdentityProvider>
+                  <MessengerProvider communityKey={communityKey}>
+                    <ChatStateProvider>
+                      <ScrollProvider>
+                        <CommunityChatRoom />
+                        <div id="modal-root" />
+                      </ScrollProvider>
+                    </ChatStateProvider>
+                  </MessengerProvider>
+                </IdentityProvider>
+              </Wrapper>
+            </ToastProvider>
+          </ModalProvider>
+        </NarrowProvider>
+      </ThemeProvider>
+    </ConfigProvider>
+  )
+}
+
+export type { Props as CommunityProps }
+
+const Wrapper = styled.div`
+  height: 100%;
+  overflow: hidden;
+`