Simplify consumer configuration and add options (#236)

* Improve components configuration

* Update examples

* Move Theme to types

examples/channel/index.tsx

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

examples/community/index.tsx

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

packages/status-react/src/components/Chat/EmojiPicker.tsx

@@ -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 = {

packages/status-react/src/components/Modals/WalletModal.tsx

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

packages/status-react/src/contexts/configProvider.tsx

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

packages/status-react/src/contexts/messengerProvider.tsx

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

packages/status-react/src/hooks/messenger/useMessenger.ts

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

packages/status-react/src/index.tsx

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

packages/status-react/src/modules/channel/GroupChatRoom.tsx

@@ -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 && (

packages/status-react/src/modules/channel/index.tsx

@@ -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,42 +12,42 @@ 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>
-            <ToastProvider>
-              <Wrapper ref={ref}>
-                <GlobalStyle />
-                <IdentityProvider>
-                  <MessengerProvider communityKey={communityKey}>
-                    <ChatStateProvider>
-                      <GroupChatRoom />
-                      <div id="modal-root" />
-                    </ChatStateProvider>
-                  </MessengerProvider>
-                </IdentityProvider>
-              </Wrapper>
-            </ToastProvider>
-          </ModalProvider>
-        </NarrowProvider>
-      </ThemeProvider>
-    </ConfigProvider>
+    <ThemeProvider theme={theme}>
+      <NarrowProvider myRef={ref}>
+        <ModalProvider>
+          <ToastProvider>
+            <Wrapper ref={ref}>
+              <GlobalStyle />
+              <IdentityProvider>
+                <MessengerProvider
+                  publicKey={publicKey}
+                  environment={environment}
+                >
+                  <ChatStateProvider>
+                    <GroupChatRoom />
+                    <div id="modal-root" />
+                  </ChatStateProvider>
+                </MessengerProvider>
+              </IdentityProvider>
+            </Wrapper>
+          </ToastProvider>
+        </ModalProvider>
+      </NarrowProvider>
+    </ThemeProvider>
   )
 }
 

packages/status-react/src/modules/community/index.tsx

@@ -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,44 +13,40 @@ 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>
-            <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>
+    <ThemeProvider theme={theme}>
+      <NarrowProvider myRef={ref}>
+        <ModalProvider>
+          <ToastProvider>
+            <Wrapper ref={ref}>
+              <GlobalStyle />
+              <IdentityProvider>
+                <MessengerProvider
+                  publicKey={publicKey}
+                  environment={environment}
+                >
+                  <ChatStateProvider>
+                    <ScrollProvider>
+                      <CommunityChatRoom />
+                      <div id="modal-root" />
+                    </ScrollProvider>
+                  </ChatStateProvider>
+                </MessengerProvider>
+              </IdentityProvider>
+            </Wrapper>
+          </ToastProvider>
+        </ModalProvider>
+      </NarrowProvider>
+    </ThemeProvider>
   )
 }
 

packages/status-react/src/styles/themes.ts

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

packages/status-react/src/types/config.tsx

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

packages/status-react/src/types/theme.tsx

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

packages/status-react/src/utils/createMessenger.ts

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