status-im
/
dappconnect-sdks
mirror of https://github.com/status-im/dappconnect-sdks.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Update @status-im/react exports (#235) 

* Move Community to modules folder

* Move Channel to modules folder

* Remove fetch metadata provider

* Update index file extension
This commit is contained in:
Pavel 2022-03-03 16:20:23 +01:00 committed by GitHub
parent 3179159211
commit 81a6c0b2ed
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 212 additions and 241 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
examples/channel/index.tsx
View File

@ -1,12 +1,12 @@
import React, { StrictMode } from 'react' import React, { StrictMode } from 'react'
import { render } from 'react-dom' import { render } from 'react-dom'
import { GroupChat, lightTheme } from '@status-im/react' import { Channel, lightTheme } from '@status-im/react'
const App = () => { const App = () => {
return ( return (
<div> <div>
<GroupChat <Channel
theme={lightTheme} theme={lightTheme}
communityKey="<YOUR_COMMUNITY_KEY>" communityKey="<YOUR_COMMUNITY_KEY>"
config={{ config={{

4
examples/community/index.tsx
View File

@ -1,12 +1,12 @@
import React, { StrictMode } from 'react' import React, { StrictMode } from 'react'
import { render } from 'react-dom' import { render } from 'react-dom'
import { CommunityChat, lightTheme } from '@status-im/react' import { Community, lightTheme } from '@status-im/react'
const App = () => { const App = () => {
return ( return (
<div> <div>
<CommunityChat <Community
theme={lightTheme} theme={lightTheme}
communityKey="<YOUR_COMMUNITY_KEY>" communityKey="<YOUR_COMMUNITY_KEY>"
config={{ config={{

2
packages/status-react/package.json
View File

@ -11,7 +11,7 @@
"bugs": { "bugs": {
"url": "https://github.com/status-im/status-web/issues" "url": "https://github.com/status-im/status-web/issues"
}, },
"source": "src/index.ts", "source": "src/index.tsx",
"main": "dist/index.js", "main": "dist/index.js",
"module": "dist/index.esm.js", "module": "dist/index.esm.js",
"types": "dist/types.d.ts", "types": "dist/types.d.ts",

34
packages/status-react/src/components/Chat/ChatMessageContent.tsx
View File

@ -3,7 +3,6 @@ import React, { useEffect, useMemo, useRef, useState } from 'react'
import { decode } from 'html-entities' import { decode } from 'html-entities'
import styled from 'styled-components' import styled from 'styled-components'
import { useFetchMetadata } from '../../contexts/fetchMetadataProvider'
import { useUserPublicKey } from '../../contexts/identityProvider' import { useUserPublicKey } from '../../contexts/identityProvider'
import { useMessengerContext } from '../../contexts/messengerProvider' import { useMessengerContext } from '../../contexts/messengerProvider'
import { useClickOutside } from '../../hooks/useClickOutside' import { useClickOutside } from '../../hooks/useClickOutside'
@ -61,13 +60,12 @@ export function ChatMessageContent({
setLinkOpen, setLinkOpen,
setMentioned, setMentioned,
}: ChatMessageContentProps) { }: ChatMessageContentProps) {
const fetchMetadata = useFetchMetadata()
const { content, image } = useMemo(() => message, [message]) const { content, image } = useMemo(() => message, [message])
const [elements, setElements] = useState<(string | React.ReactElement)[]>([ const [elements, setElements] = useState<(string | React.ReactElement)[]>([
content, content,
]) ])
const [link, setLink] = useState<string | undefined>(undefined) const [link, setLink] = useState<string | undefined>(undefined)
const [openGraph, setOpenGraph] = useState<Metadata | undefined>(undefined) const [openGraph] = useState<Metadata | undefined>(undefined)
useEffect(() => { useEffect(() => {
let link let link
@ -95,21 +93,21 @@ export function ChatMessageContent({
setElements(newSplit) setElements(newSplit)
}, [content, setLink, setMentioned, setElements, setLinkOpen]) }, [content, setLink, setMentioned, setElements, setLinkOpen])
useEffect(() => { // useEffect(() => {
const updatePreview = async () => { // const updatePreview = async () => {
if (link && fetchMetadata) { // if (link && fetchMetadata) {
try { // try {
const metadata = await fetchMetadata(link) // const metadata = await fetchMetadata(link)
if (metadata) { // if (metadata) {
setOpenGraph(metadata) // setOpenGraph(metadata)
} // }
} catch { // } catch {
return // return
} // }
} // }
} // }
updatePreview() // updatePreview()
}, [link, fetchMetadata]) // }, [link, fetchMetadata])
return ( return (
<ContentWrapper> <ContentWrapper>

4
packages/status-react/src/components/Chat/ChatTopbar.tsx
View File

@ -5,12 +5,12 @@ import styled from 'styled-components'
import { useMessengerContext } from '../../contexts/messengerProvider' import { useMessengerContext } from '../../contexts/messengerProvider'
import { useNarrow } from '../../contexts/narrowProvider' import { useNarrow } from '../../contexts/narrowProvider'
import { useClickOutside } from '../../hooks/useClickOutside' import { useClickOutside } from '../../hooks/useClickOutside'
import { CommunitySidebar } from '../../modules/community/CommunitySidebar'
import { import {
ActivityButton, ActivityButton,
ActivityWrapper, ActivityWrapper,
} from '../ActivityCenter/ActivityButton' } from '../ActivityCenter/ActivityButton'
import { Channel } from '../Channels/Channel' import { Channel } from '../Channels/Channel'
import { Community } from '../Community'
import { ChannelMenu } from '../Form/ChannelMenu' import { ChannelMenu } from '../Form/ChannelMenu'
import { ActivityIcon } from '../Icons/ActivityIcon' import { ActivityIcon } from '../Icons/ActivityIcon'
import { MembersIcon } from '../Icons/MembersIcon' import { MembersIcon } from '../Icons/MembersIcon'
@ -85,7 +85,7 @@ export function ChatTopbar({
<> <>
{narrow && ( {narrow && (
<CommunityWrap className={narrow ? 'narrow' : ''}> <CommunityWrap className={narrow ? 'narrow' : ''}>
<Community /> <CommunitySidebar />
</CommunityWrap> </CommunityWrap>
)} )}

67
packages/status-react/src/components/CommunityChat.tsx
View File

@ -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;
`

27
packages/status-react/src/contexts/fetchMetadataProvider.tsx
View File

@ -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>
)
}

58
packages/status-react/src/groupChatComponents/GroupChat.tsx
View File

@ -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;
`

4
packages/status-react/src/index.ts
View File

@ -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'

4
packages/status-react/src/index.tsx Normal file
View File

@ -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'

24
packages/status-react/src/groupChatComponents/GroupChat/GroupChatBody.tsx → packages/status-react/src/modules/channel/GroupChat/GroupChatBody.tsx
View File

@ -2,19 +2,19 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react'
import styled from 'styled-components' import styled from 'styled-components'
import { ChatCreation } from '../../components/Chat/ChatCreation' import { ChatCreation } from '~/src/components/Chat/ChatCreation'
import { ChatInput } from '../../components/Chat/ChatInput' import { ChatInput } from '~/src/components/Chat/ChatInput'
import { ChatTopbar, ChatTopbarLoading } from '../../components/Chat/ChatTopbar' import { ChatTopbar, ChatTopbarLoading } from '~/src/components/Chat/ChatTopbar'
import { TokenRequirement } from '../../components/Form/TokenRequirement' import { TokenRequirement } from '~/src/components/Form/TokenRequirement'
import { MessagesList } from '../../components/Messages/MessagesList' import { MessagesList } from '~/src/components/Messages/MessagesList'
import { NarrowChannels } from '../../components/NarrowMode/NarrowChannels' import { NarrowChannels } from '~/src/components/NarrowMode/NarrowChannels'
import { NarrowMembers } from '../../components/NarrowMode/NarrowMembers' import { NarrowMembers } from '~/src/components/NarrowMode/NarrowMembers'
import { LoadingSkeleton } from '../../components/Skeleton/LoadingSkeleton' import { LoadingSkeleton } from '~/src/components/Skeleton/LoadingSkeleton'
import { useMessengerContext } from '../../contexts/messengerProvider' import { useMessengerContext } from '~/src/contexts/messengerProvider'
import { useNarrow } from '../../contexts/narrowProvider' import { useNarrow } from '~/src/contexts/narrowProvider'
import type { Reply } from '../../hooks/useReply' import type { Reply } from '~/src/hooks/useReply'
import type { ChannelData } from '../../models/ChannelData' import type { ChannelData } from '~/src/models/ChannelData'
export enum ChatBodyState { export enum ChatBodyState {
Chat, Chat,

35
packages/status-react/src/groupChatComponents/GroupChatRoom.tsx → packages/status-react/src/modules/channel/GroupChatRoom.tsx
View File

@ -2,23 +2,24 @@ import React, { useState } from 'react'
import styled from 'styled-components' import styled from 'styled-components'
import { Channels } from '../components/Channels/Channels' import { Channels } from '~/src/components/Channels/Channels'
import { ChatCreation } from '../components/Chat/ChatCreation' import { ChatCreation } from '~/src/components/Chat/ChatCreation'
import { AgreementModal } from '../components/Modals/AgreementModal' import { AgreementModal } from '~/src/components/Modals/AgreementModal'
import { CoinbaseModal } from '../components/Modals/CoinbaseModal' import { CoinbaseModal } from '~/src/components/Modals/CoinbaseModal'
import { EditModal } from '../components/Modals/EditModal' import { EditModal } from '~/src/components/Modals/EditModal'
import { LeavingModal } from '../components/Modals/LeavingModal' import { LeavingModal } from '~/src/components/Modals/LeavingModal'
import { LogoutModal } from '../components/Modals/LogoutModal' import { LogoutModal } from '~/src/components/Modals/LogoutModal'
import { ProfileFoundModal } from '../components/Modals/ProfileFoundModal' import { ProfileFoundModal } from '~/src/components/Modals/ProfileFoundModal'
import { ProfileModal } from '../components/Modals/ProfileModal' import { ProfileModal } from '~/src/components/Modals/ProfileModal'
import { StatusModal } from '../components/Modals/StatusModal' import { StatusModal } from '~/src/components/Modals/StatusModal'
import { UserCreationModal } from '../components/Modals/UserCreationModal' import { UserCreationModal } from '~/src/components/Modals/UserCreationModal'
import { UserCreationStartModal } from '../components/Modals/UserCreationStartModal' import { UserCreationStartModal } from '~/src/components/Modals/UserCreationStartModal'
import { WalletConnectModal } from '../components/Modals/WalletConnectModal' import { WalletConnectModal } from '~/src/components/Modals/WalletConnectModal'
import { WalletModal } from '../components/Modals/WalletModal' import { WalletModal } from '~/src/components/Modals/WalletModal'
import { ToastMessageList } from '../components/ToastMessages/ToastMessageList' import { ToastMessageList } from '~/src/components/ToastMessages/ToastMessageList'
import { ChatState, useChatState } from '../contexts/chatStateProvider' import { ChatState, useChatState } from '~/src/contexts/chatStateProvider'
import { useNarrow } from '../contexts/narrowProvider' import { useNarrow } from '~/src/contexts/narrowProvider'
import { GroupChatBody } from './GroupChat/GroupChatBody' import { GroupChatBody } from './GroupChat/GroupChatBody'
import { GroupMembers } from './GroupMembers/GroupMembers' import { GroupMembers } from './GroupMembers/GroupMembers'

4
packages/status-react/src/groupChatComponents/GroupMembers/GroupMembers.tsx → packages/status-react/src/modules/channel/GroupMembers/GroupMembers.tsx
View File

@ -2,8 +2,8 @@ import React, { useMemo, useState } from 'react'
import styled from 'styled-components' import styled from 'styled-components'
import { MembersList } from '../../components/Members/MembersList' import { MembersList } from '~/src/components/Members/MembersList'
import { useMessengerContext } from '../../contexts/messengerProvider' import { useMessengerContext } from '~/src/contexts/messengerProvider'
export function GroupMembers() { export function GroupMembers() {
const { addContact, activeChannel } = useMessengerContext() const { addContact, activeChannel } = useMessengerContext()

60
packages/status-react/src/modules/channel/index.tsx Normal file
View File

@ -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;
`

47
packages/status-react/src/components/CommunityChatRoom.tsx → packages/status-react/src/modules/community/CommunityChatRoom.tsx
View File

@ -2,28 +2,29 @@ import React, { useState } from 'react'
import styled from 'styled-components' import styled from 'styled-components'
import { ChatState, useChatState } from '../contexts/chatStateProvider' import { Channels } from '~/src/components/Channels/Channels'
import { useMessengerContext } from '../contexts/messengerProvider' import { ChatBody } from '~/src/components/Chat/ChatBody'
import { useNarrow } from '../contexts/narrowProvider' import { ChatCreation } from '~/src/components/Chat/ChatCreation'
import { Channels } from './Channels/Channels' import { Members } from '~/src/components/Members/Members'
import { ChatBody } from './Chat/ChatBody' import { AgreementModal } from '~/src/components/Modals/AgreementModal'
import { ChatCreation } from './Chat/ChatCreation' import { CoinbaseModal } from '~/src/components/Modals/CoinbaseModal'
import { Community } from './Community' import { CommunityModal } from '~/src/components/Modals/CommunityModal'
import { Members } from './Members/Members' import { EditModal } from '~/src/components/Modals/EditModal'
import { AgreementModal } from './Modals/AgreementModal' import { LeavingModal } from '~/src/components/Modals/LeavingModal'
import { CoinbaseModal } from './Modals/CoinbaseModal' import { LogoutModal } from '~/src/components/Modals/LogoutModal'
import { CommunityModal } from './Modals/CommunityModal' import { ProfileFoundModal } from '~/src/components/Modals/ProfileFoundModal'
import { EditModal } from './Modals/EditModal' import { ProfileModal } from '~/src/components/Modals/ProfileModal'
import { LeavingModal } from './Modals/LeavingModal' import { StatusModal } from '~/src/components/Modals/StatusModal'
import { LogoutModal } from './Modals/LogoutModal' import { UserCreationModal } from '~/src/components/Modals/UserCreationModal'
import { ProfileFoundModal } from './Modals/ProfileFoundModal' import { UserCreationStartModal } from '~/src/components/Modals/UserCreationStartModal'
import { ProfileModal } from './Modals/ProfileModal' import { WalletConnectModal } from '~/src/components/Modals/WalletConnectModal'
import { StatusModal } from './Modals/StatusModal' import { WalletModal } from '~/src/components/Modals/WalletModal'
import { UserCreationModal } from './Modals/UserCreationModal' import { ToastMessageList } from '~/src/components/ToastMessages/ToastMessageList'
import { UserCreationStartModal } from './Modals/UserCreationStartModal' import { ChatState, useChatState } from '~/src/contexts/chatStateProvider'
import { WalletConnectModal } from './Modals/WalletConnectModal' import { useMessengerContext } from '~/src/contexts/messengerProvider'
import { WalletModal } from './Modals/WalletModal' import { useNarrow } from '~/src/contexts/narrowProvider'
import { ToastMessageList } from './ToastMessages/ToastMessageList'
import { CommunitySidebar } from './CommunitySidebar'
function Modals() { function Modals() {
return ( return (
@ -98,7 +99,7 @@ const ChannelsWrapper = styled.div`
flex-direction: column; flex-direction: column;
` `
const StyledCommunity = styled(Community)` const StyledCommunity = styled(CommunitySidebar)`
padding: 0 0 0 8px; padding: 0 0 0 8px;
margin: 0 0 16px; margin: 0 0 16px;
` `

12
packages/status-react/src/components/Community.tsx → packages/status-react/src/modules/community/CommunitySidebar.tsx
View File

@ -2,17 +2,17 @@ import React from 'react'
import styled from 'styled-components' import styled from 'styled-components'
import { useMessengerContext } from '../contexts/messengerProvider' import { CommunityIdentity } from '../../components/CommunityIdentity'
import { useModal } from '../contexts/modalProvider' import { CommunityModalName } from '../../components/Modals/CommunityModal'
import { CommunityIdentity } from './CommunityIdentity' import { CommunitySkeleton } from '../../components/Skeleton/CommunitySkeleton'
import { CommunityModalName } from './Modals/CommunityModal' import { useMessengerContext } from '../../contexts/messengerProvider'
import { CommunitySkeleton } from './Skeleton/CommunitySkeleton' import { useModal } from '../../contexts/modalProvider'
interface CommunityProps { interface CommunityProps {
className?: string className?: string
} }
export function Community({ className }: CommunityProps) { export function CommunitySidebar({ className }: CommunityProps) {
const { communityData } = useMessengerContext() const { communityData } = useMessengerContext()
const { setModal } = useModal(CommunityModalName) const { setModal } = useModal(CommunityModalName)

63
packages/status-react/src/modules/community/index.tsx Normal file
View File

@ -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;
`