Simplify consumer configuration and add options (#236)

* Improve components configuration

* Update examples

* Move Theme to types
This commit is contained in:
Pavel 2022-03-03 16:54:59 +01:00 committed by GitHub
parent 5d3926779f
commit e839363c53
No known key found for this signature in database
GPG Key ID: 0EB8D75C775AB6F1
15 changed files with 134 additions and 152 deletions

View File

@ -7,11 +7,10 @@ const App = () => {
return ( return (
<div> <div>
<Channel <Channel
publicKey="<YOUR_COMMUNITY_KEY>"
theme={lightTheme} theme={lightTheme}
communityKey="<YOUR_COMMUNITY_KEY>" options={{
config={{ showMembers: false,
environment: '<ENVIRONMENT>',
dappUrl: '<URL>',
}} }}
/> />
</div> </div>

View File

@ -6,14 +6,7 @@ import { Community, lightTheme } from '@status-im/react'
const App = () => { const App = () => {
return ( return (
<div> <div>
<Community <Community publicKey="<YOUR_COMMUNITY_KEY>" theme={lightTheme} />
theme={lightTheme}
communityKey="<YOUR_COMMUNITY_KEY>"
config={{
environment: '<ENVIRONMENT>',
dappUrl: '<URL>',
}}
/>
</div> </div>
) )
} }

View File

@ -6,7 +6,7 @@ import { useTheme } from 'styled-components'
import { useLow } from '../../contexts/narrowProvider' import { useLow } from '../../contexts/narrowProvider'
import { lightTheme } from '../../styles/themes' import { lightTheme } from '../../styles/themes'
import type { Theme } from '../../styles/themes' import type { Theme } from '~/src/types/theme'
import type { EmojiData } from 'emoji-mart' import type { EmojiData } from 'emoji-mart'
type EmojiPickerProps = { type EmojiPickerProps = {

View File

@ -3,7 +3,6 @@ import React, { useCallback } from 'react'
import { genPrivateKeyWithEntropy, Identity } from '@status-im/core' import { genPrivateKeyWithEntropy, Identity } from '@status-im/core'
import styled from 'styled-components' import styled from 'styled-components'
import { useConfig } from '../../contexts/configProvider'
import { import {
useSetIdentity, useSetIdentity,
useSetWalletIdentity, useSetWalletIdentity,
@ -29,11 +28,12 @@ export function WalletModal() {
const { setModal: setWalleConnectModal } = useModal(WalletConnectModalName) const { setModal: setWalleConnectModal } = useModal(WalletConnectModalName)
const { setModal: setCoinbaseModal } = useModal(CoinbaseModalName) const { setModal: setCoinbaseModal } = useModal(CoinbaseModalName)
const { messenger } = useMessengerContext() const { messenger } = useMessengerContext()
const { dappUrl } = useConfig()
const handleMetamaskClick = useCallback(async () => { const handleMetamaskClick = useCallback(async () => {
// TODO: Add types for global Ethereum object // TODO: Add types for global Ethereum object
// eslint-disable-next-line @typescript-eslint/no-explicit-any // eslint-disable-next-line @typescript-eslint/no-explicit-any
const dappUrl = window.location.hostname
const ethereum = (window as any)?.ethereum as any | undefined const ethereum = (window as any)?.ethereum as any | undefined
if (document.location.origin !== dappUrl) { if (document.location.origin !== dappUrl) {
alert('You are not signing in from correct url!') alert('You are not signing in from correct url!')
@ -105,7 +105,6 @@ export function WalletModal() {
alert('Metamask not found') alert('Metamask not found')
}, [ }, [
messenger, messenger,
dappUrl,
setIdentity, setIdentity,
setModal, setModal,
setWalletIdentity, setWalletIdentity,

View File

@ -1,26 +0,0 @@
import React, { createContext, useContext } from 'react'
export type ConfigType = {
environment: string
dappUrl: string
}
const ConfigContext = createContext<ConfigType>({
environment: 'production',
dappUrl: '',
})
export function useConfig() {
return useContext(ConfigContext)
}
type ConfigProviderProps = {
children: React.ReactNode
config: ConfigType
}
export function ConfigProvider({ children, config }: ConfigProviderProps) {
return (
<ConfigContext.Provider value={config}>{children}</ConfigContext.Provider>
)
}

View File

@ -4,6 +4,7 @@ import { useMessenger } from '../hooks/messenger/useMessenger'
import { useIdentity, useNickname } from './identityProvider' import { useIdentity, useNickname } from './identityProvider'
import type { MessengerType } from '../hooks/messenger/useMessenger' import type { MessengerType } from '../hooks/messenger/useMessenger'
import type { Environment } from '~/src/types/config'
const MessengerContext = createContext<MessengerType>({ const MessengerContext = createContext<MessengerType>({
messenger: undefined, messenger: undefined,
@ -35,18 +36,19 @@ export function useMessengerContext() {
return useContext(MessengerContext) return useContext(MessengerContext)
} }
interface MessengerProviderProps { interface Props {
communityKey: string | undefined publicKey: string
environment?: Environment
children: React.ReactNode children: React.ReactNode
} }
export function MessengerProvider({ export function MessengerProvider(props: Props) {
communityKey, const { publicKey, environment, children } = props
children,
}: MessengerProviderProps) {
const identity = useIdentity() const identity = useIdentity()
const nickname = useNickname() const nickname = useNickname()
const messenger = useMessenger(communityKey, identity, nickname) const messenger = useMessenger(publicKey, environment, identity, nickname)
return ( return (
<MessengerContext.Provider value={messenger}> <MessengerContext.Provider value={messenger}>
{children} {children}

View File

@ -8,7 +8,6 @@ import {
useState, useState,
} from 'react' } from 'react'
import { useConfig } from '../../contexts/configProvider'
import { createCommunity } from '../../utils/createCommunity' import { createCommunity } from '../../utils/createCommunity'
import { createMessenger } from '../../utils/createMessenger' import { createMessenger } from '../../utils/createMessenger'
import { uintToImgUrl } from '../../utils/uintToImgUrl' import { uintToImgUrl } from '../../utils/uintToImgUrl'
@ -31,6 +30,7 @@ import type {
Identity, Identity,
Messenger, Messenger,
} from '@status-im/core' } from '@status-im/core'
import type { Environment } from '~/src/types/config'
export type MessengerType = { export type MessengerType = {
messenger: Messenger | undefined messenger: Messenger | undefined
@ -62,8 +62,10 @@ export type MessengerType = {
subscriptionsDispatch: (action: SubscriptionAction) => void subscriptionsDispatch: (action: SubscriptionAction) => void
} }
function useCreateMessenger(identity: Identity | undefined) { function useCreateMessenger(
const { environment } = useConfig() environment: Environment,
identity: Identity | undefined
) {
const [messenger, setMessenger] = useState<Messenger | undefined>(undefined) const [messenger, setMessenger] = useState<Messenger | undefined>(undefined)
useEffect(() => { useEffect(() => {
createMessenger(identity, environment).then(e => { createMessenger(identity, environment).then(e => {
@ -163,7 +165,8 @@ function subscriptionReducer(
} }
export function useMessenger( export function useMessenger(
communityKey: string | undefined, communityKey: string,
environment: Environment | undefined = 'production',
identity: Identity | undefined, identity: Identity | undefined,
newNickname: string | undefined newNickname: string | undefined
) { ) {
@ -177,7 +180,7 @@ export function useMessenger(
}, [subscriptions]) }, [subscriptions])
const [channelsState, channelsDispatch] = useChannelsReducer() const [channelsState, channelsDispatch] = useChannelsReducer()
const messenger = useCreateMessenger(identity) const messenger = useCreateMessenger(environment, identity)
const { contacts, contactsDispatch, contactsClass, nickname } = useContacts( const { contacts, contactsDispatch, contactsClass, nickname } = useContacts(
messenger, messenger,
identity, identity,

View File

@ -1,4 +1,4 @@
export type { ConfigType } from './contexts/configProvider'
export { type ChannelProps, Channel } from './modules/channel' export { type ChannelProps, Channel } from './modules/channel'
export { type CommunityProps, Community } from './modules/community' export { type CommunityProps, Community } from './modules/community'
export { darkTheme, lightTheme } from './styles/themes' export { darkTheme, lightTheme } from './styles/themes'
export type { Config } from './types/config'

View File

@ -23,6 +23,8 @@ 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'
// import type { ChannelProps } from '.'
function Modals() { function Modals() {
return ( return (
<> <>
@ -42,11 +44,16 @@ function Modals() {
) )
} }
export function GroupChatRoom() { // interface Props {
// options: ChannelProps['options']
// }
export const GroupChatRoom = () => {
const [state] = useChatState() const [state] = useChatState()
const [showMembers, setShowMembers] = useState(false) const [showMembers, setShowMembers] = useState(false)
const [editGroup, setEditGroup] = useState(false) const [editGroup, setEditGroup] = useState(false)
const narrow = useNarrow() const narrow = useNarrow()
return ( return (
<ChatWrapper> <ChatWrapper>
{!narrow && ( {!narrow && (

View File

@ -3,7 +3,6 @@ import React, { useRef } from 'react'
import styled, { ThemeProvider } from 'styled-components' import styled, { ThemeProvider } from 'styled-components'
import { ChatStateProvider } from '~/src/contexts/chatStateProvider' import { ChatStateProvider } from '~/src/contexts/chatStateProvider'
import { ConfigProvider } from '~/src/contexts/configProvider'
import { IdentityProvider } from '~/src/contexts/identityProvider' import { IdentityProvider } from '~/src/contexts/identityProvider'
import { MessengerProvider } from '~/src/contexts/messengerProvider' import { MessengerProvider } from '~/src/contexts/messengerProvider'
import { ModalProvider } from '~/src/contexts/modalProvider' import { ModalProvider } from '~/src/contexts/modalProvider'
@ -13,42 +12,42 @@ import { GlobalStyle } from '~/src/styles/GlobalStyle'
import { GroupChatRoom } from './GroupChatRoom' import { GroupChatRoom } from './GroupChatRoom'
import type { ConfigType } from '~/src/contexts/configProvider' import type { Config } from '~/src/types/config'
import type { Theme } from '~/src/styles/themes'
interface Props { interface Props extends Config {
communityKey: string options: {
theme: Theme showMembers?: false
config: ConfigType }
} }
export const Channel = (props: Props) => { export const Channel = (props: Props) => {
const { communityKey, theme, config } = props const { publicKey, theme, environment } = props
const ref = useRef<HTMLHeadingElement>(null) const ref = useRef<HTMLHeadingElement>(null)
return ( return (
<ConfigProvider config={config}> <ThemeProvider theme={theme}>
<ThemeProvider theme={theme}> <NarrowProvider myRef={ref}>
<NarrowProvider myRef={ref}> <ModalProvider>
<ModalProvider> <ToastProvider>
<ToastProvider> <Wrapper ref={ref}>
<Wrapper ref={ref}> <GlobalStyle />
<GlobalStyle /> <IdentityProvider>
<IdentityProvider> <MessengerProvider
<MessengerProvider communityKey={communityKey}> publicKey={publicKey}
<ChatStateProvider> environment={environment}
<GroupChatRoom /> >
<div id="modal-root" /> <ChatStateProvider>
</ChatStateProvider> <GroupChatRoom />
</MessengerProvider> <div id="modal-root" />
</IdentityProvider> </ChatStateProvider>
</Wrapper> </MessengerProvider>
</ToastProvider> </IdentityProvider>
</ModalProvider> </Wrapper>
</NarrowProvider> </ToastProvider>
</ThemeProvider> </ModalProvider>
</ConfigProvider> </NarrowProvider>
</ThemeProvider>
) )
} }

View File

@ -3,7 +3,6 @@ import React, { useRef } from 'react'
import styled, { ThemeProvider } from 'styled-components' import styled, { ThemeProvider } from 'styled-components'
import { ChatStateProvider } from '~/src/contexts/chatStateProvider' import { ChatStateProvider } from '~/src/contexts/chatStateProvider'
import { ConfigProvider } from '~/src/contexts/configProvider'
import { IdentityProvider } from '~/src/contexts/identityProvider' import { IdentityProvider } from '~/src/contexts/identityProvider'
import { MessengerProvider } from '~/src/contexts/messengerProvider' import { MessengerProvider } from '~/src/contexts/messengerProvider'
import { ModalProvider } from '~/src/contexts/modalProvider' import { ModalProvider } from '~/src/contexts/modalProvider'
@ -14,44 +13,40 @@ import { GlobalStyle } from '~/src/styles/GlobalStyle'
import { CommunityChatRoom } from './CommunityChatRoom' import { CommunityChatRoom } from './CommunityChatRoom'
import type { ConfigType } from '~/src/contexts/configProvider' import type { Config } from '~/src/types/config'
import type { Theme } from '~/src/styles/themes'
interface Props { type Props = Config
theme: Theme
communityKey: string
config: ConfigType
}
export const Community = (props: Props) => { export const Community = (props: Props) => {
const { theme, config, communityKey } = props const { theme, environment, publicKey } = props
const ref = useRef<HTMLHeadingElement>(null) const ref = useRef<HTMLHeadingElement>(null)
return ( return (
<ConfigProvider config={config}> <ThemeProvider theme={theme}>
<ThemeProvider theme={theme}> <NarrowProvider myRef={ref}>
<NarrowProvider myRef={ref}> <ModalProvider>
<ModalProvider> <ToastProvider>
<ToastProvider> <Wrapper ref={ref}>
<Wrapper ref={ref}> <GlobalStyle />
<GlobalStyle /> <IdentityProvider>
<IdentityProvider> <MessengerProvider
<MessengerProvider communityKey={communityKey}> publicKey={publicKey}
<ChatStateProvider> environment={environment}
<ScrollProvider> >
<CommunityChatRoom /> <ChatStateProvider>
<div id="modal-root" /> <ScrollProvider>
</ScrollProvider> <CommunityChatRoom />
</ChatStateProvider> <div id="modal-root" />
</MessengerProvider> </ScrollProvider>
</IdentityProvider> </ChatStateProvider>
</Wrapper> </MessengerProvider>
</ToastProvider> </IdentityProvider>
</ModalProvider> </Wrapper>
</NarrowProvider> </ToastProvider>
</ThemeProvider> </ModalProvider>
</ConfigProvider> </NarrowProvider>
</ThemeProvider>
) )
} }

View File

@ -1,36 +1,4 @@
export type Theme = { import type { Theme } from '../types/theme'
primary: string
secondary: string
tertiary: string
bodyBackgroundColor: string
sectionBackgroundColor: string
bodyBackgroundGradient: string
guestNameColor: string
iconColor: string
iconUserColor: string
iconTextColor: string
logoColor: string
activeChannelBackground: string
notificationColor: string
inputColor: string
border: string
buttonBg: string
buttonBgHover: string
buttonNoBg: string
buttonNoBgHover: string
skeletonLight: string
skeletonDark: string
redColor: string
greenColor: string
greenBg: string
mentionColor: string
mentionHover: string
mentionBg: string
mentionBgHover: string
shadow: string
reactionBg: string
blueBg: string
}
export const lightTheme: Theme = { export const lightTheme: Theme = {
primary: '#000', primary: '#000',

View File

@ -0,0 +1,9 @@
import type { Theme } from './theme'
export type Environment = 'production' | 'test'
export interface Config {
publicKey: string
environment?: Environment
theme?: Theme
}

View File

@ -0,0 +1,33 @@
export interface Theme {
primary: string
secondary: string
tertiary: string
bodyBackgroundColor: string
sectionBackgroundColor: string
bodyBackgroundGradient: string
guestNameColor: string
iconColor: string
iconUserColor: string
iconTextColor: string
logoColor: string
activeChannelBackground: string
notificationColor: string
inputColor: string
border: string
buttonBg: string
buttonBgHover: string
buttonNoBg: string
buttonNoBgHover: string
skeletonLight: string
skeletonDark: string
redColor: string
greenColor: string
greenBg: string
mentionColor: string
mentionHover: string
mentionBg: string
mentionBgHover: string
shadow: string
reactionBg: string
blueBg: string
}

View File

@ -3,10 +3,11 @@ import { getPredefinedBootstrapNodes } from 'js-waku'
import { Fleet } from 'js-waku/build/main/lib/discovery/predefined' import { Fleet } from 'js-waku/build/main/lib/discovery/predefined'
import { Protocols } from 'js-waku/build/main/lib/waku' import { Protocols } from 'js-waku/build/main/lib/waku'
import type { Environment } from '../types/config'
import type { Identity } from '@status-im/core' import type { Identity } from '@status-im/core'
import type { CreateOptions } from 'js-waku/build/main/lib/waku' import type { CreateOptions } from 'js-waku/build/main/lib/waku'
function createWakuOptions(env: string): CreateOptions { function createWakuOptions(env: Environment): CreateOptions {
let bootstrap: CreateOptions['bootstrap'] = { let bootstrap: CreateOptions['bootstrap'] = {
default: true, default: true,
} }
@ -32,7 +33,7 @@ function createWakuOptions(env: string): CreateOptions {
export async function createMessenger( export async function createMessenger(
identity: Identity | undefined, identity: Identity | undefined,
env: string env: Environment
) { ) {
const wakuOptions = createWakuOptions(env) const wakuOptions = createWakuOptions(env)
const messenger = await Messenger.create(identity, wakuOptions) const messenger = await Messenger.create(identity, wakuOptions)