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 (
<div>
<Channel
publicKey="<YOUR_COMMUNITY_KEY>"
theme={lightTheme}
communityKey="<YOUR_COMMUNITY_KEY>"
config={{
environment: '<ENVIRONMENT>',
dappUrl: '<URL>',
options={{
showMembers: false,
}}
/>
</div>

View File

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

View File

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

View File

@ -3,7 +3,6 @@ import React, { useCallback } from 'react'
import { genPrivateKeyWithEntropy, Identity } from '@status-im/core'
import styled from 'styled-components'
import { useConfig } from '../../contexts/configProvider'
import {
useSetIdentity,
useSetWalletIdentity,
@ -29,11 +28,12 @@ export function WalletModal() {
const { setModal: setWalleConnectModal } = useModal(WalletConnectModalName)
const { setModal: setCoinbaseModal } = useModal(CoinbaseModalName)
const { messenger } = useMessengerContext()
const { dappUrl } = useConfig()
const handleMetamaskClick = useCallback(async () => {
// TODO: Add types for global Ethereum object
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const dappUrl = window.location.hostname
const ethereum = (window as any)?.ethereum as any | undefined
if (document.location.origin !== dappUrl) {
alert('You are not signing in from correct url!')
@ -105,7 +105,6 @@ export function WalletModal() {
alert('Metamask not found')
}, [
messenger,
dappUrl,
setIdentity,
setModal,
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 type { MessengerType } from '../hooks/messenger/useMessenger'
import type { Environment } from '~/src/types/config'
const MessengerContext = createContext<MessengerType>({
messenger: undefined,
@ -35,18 +36,19 @@ export function useMessengerContext() {
return useContext(MessengerContext)
}
interface MessengerProviderProps {
communityKey: string | undefined
interface Props {
publicKey: string
environment?: Environment
children: React.ReactNode
}
export function MessengerProvider({
communityKey,
children,
}: MessengerProviderProps) {
export function MessengerProvider(props: Props) {
const { publicKey, environment, children } = props
const identity = useIdentity()
const nickname = useNickname()
const messenger = useMessenger(communityKey, identity, nickname)
const messenger = useMessenger(publicKey, environment, identity, nickname)
return (
<MessengerContext.Provider value={messenger}>
{children}

View File

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

View File

@ -1,4 +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'
export type { Config } from './types/config'

View File

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

View File

@ -3,7 +3,6 @@ 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'
@ -13,22 +12,20 @@ import { GlobalStyle } from '~/src/styles/GlobalStyle'
import { GroupChatRoom } from './GroupChatRoom'
import type { ConfigType } from '~/src/contexts/configProvider'
import type { Theme } from '~/src/styles/themes'
import type { Config } from '~/src/types/config'
interface Props {
communityKey: string
theme: Theme
config: ConfigType
interface Props extends Config {
options: {
showMembers?: false
}
}
export const Channel = (props: Props) => {
const { communityKey, theme, config } = props
const { publicKey, theme, environment } = props
const ref = useRef<HTMLHeadingElement>(null)
return (
<ConfigProvider config={config}>
<ThemeProvider theme={theme}>
<NarrowProvider myRef={ref}>
<ModalProvider>
@ -36,7 +33,10 @@ export const Channel = (props: Props) => {
<Wrapper ref={ref}>
<GlobalStyle />
<IdentityProvider>
<MessengerProvider communityKey={communityKey}>
<MessengerProvider
publicKey={publicKey}
environment={environment}
>
<ChatStateProvider>
<GroupChatRoom />
<div id="modal-root" />
@ -48,7 +48,6 @@ export const Channel = (props: Props) => {
</ModalProvider>
</NarrowProvider>
</ThemeProvider>
</ConfigProvider>
)
}

View File

@ -3,7 +3,6 @@ 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'
@ -14,22 +13,16 @@ import { GlobalStyle } from '~/src/styles/GlobalStyle'
import { CommunityChatRoom } from './CommunityChatRoom'
import type { ConfigType } from '~/src/contexts/configProvider'
import type { Theme } from '~/src/styles/themes'
import type { Config } from '~/src/types/config'
interface Props {
theme: Theme
communityKey: string
config: ConfigType
}
type Props = Config
export const Community = (props: Props) => {
const { theme, config, communityKey } = props
const { theme, environment, publicKey } = props
const ref = useRef<HTMLHeadingElement>(null)
return (
<ConfigProvider config={config}>
<ThemeProvider theme={theme}>
<NarrowProvider myRef={ref}>
<ModalProvider>
@ -37,7 +30,10 @@ export const Community = (props: Props) => {
<Wrapper ref={ref}>
<GlobalStyle />
<IdentityProvider>
<MessengerProvider communityKey={communityKey}>
<MessengerProvider
publicKey={publicKey}
environment={environment}
>
<ChatStateProvider>
<ScrollProvider>
<CommunityChatRoom />
@ -51,7 +47,6 @@ export const Community = (props: Props) => {
</ModalProvider>
</NarrowProvider>
</ThemeProvider>
</ConfigProvider>
)
}

View File

@ -1,36 +1,4 @@
export type 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
}
import type { Theme } from '../types/theme'
export const lightTheme: Theme = {
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 { Protocols } from 'js-waku/build/main/lib/waku'
import type { Environment } from '../types/config'
import type { Identity } from '@status-im/core'
import type { CreateOptions } from 'js-waku/build/main/lib/waku'
function createWakuOptions(env: string): CreateOptions {
function createWakuOptions(env: Environment): CreateOptions {
let bootstrap: CreateOptions['bootstrap'] = {
default: true,
}
@ -32,7 +33,7 @@ function createWakuOptions(env: string): CreateOptions {
export async function createMessenger(
identity: Identity | undefined,
env: string
env: Environment
) {
const wakuOptions = createWakuOptions(env)
const messenger = await Messenger.create(identity, wakuOptions)