From 0dfe9b737c332c8e71458795516ac8fa0be1b707 Mon Sep 17 00:00:00 2001 From: Pavel <14926950+prichodko@users.noreply.github.com> Date: Thu, 3 Mar 2022 16:54:59 +0100 Subject: [PATCH] Simplify consumer configuration and add options (#236) * Improve components configuration * Update examples * Move Theme to types --- examples/channel/index.tsx | 7 +-- examples/community/index.tsx | 9 +-- .../src/components/Chat/EmojiPicker.tsx | 2 +- .../src/components/Modals/WalletModal.tsx | 5 +- .../src/contexts/configProvider.tsx | 26 -------- .../src/contexts/messengerProvider.tsx | 16 ++--- .../src/hooks/messenger/useMessenger.ts | 13 ++-- packages/status-react/src/index.tsx | 2 +- .../src/modules/channel/GroupChatRoom.tsx | 9 ++- .../src/modules/channel/index.tsx | 57 +++++++++--------- .../src/modules/community/index.tsx | 59 +++++++++---------- packages/status-react/src/styles/themes.ts | 34 +---------- packages/status-react/src/types/config.tsx | 9 +++ packages/status-react/src/types/theme.tsx | 33 +++++++++++ .../status-react/src/utils/createMessenger.ts | 5 +- 15 files changed, 134 insertions(+), 152 deletions(-) delete mode 100644 packages/status-react/src/contexts/configProvider.tsx create mode 100644 packages/status-react/src/types/config.tsx create mode 100644 packages/status-react/src/types/theme.tsx diff --git a/examples/channel/index.tsx b/examples/channel/index.tsx index 335d3a8..f7a55e0 100644 --- a/examples/channel/index.tsx +++ b/examples/channel/index.tsx @@ -7,11 +7,10 @@ const App = () => { return (
', - dappUrl: '', + options={{ + showMembers: false, }} />
diff --git a/examples/community/index.tsx b/examples/community/index.tsx index 6f4cc80..4be44cf 100644 --- a/examples/community/index.tsx +++ b/examples/community/index.tsx @@ -6,14 +6,7 @@ import { Community, lightTheme } from '@status-im/react' const App = () => { return (
- ', - dappUrl: '', - }} - /> +
) } diff --git a/packages/status-react/src/components/Chat/EmojiPicker.tsx b/packages/status-react/src/components/Chat/EmojiPicker.tsx index 83e322b..c8e017c 100644 --- a/packages/status-react/src/components/Chat/EmojiPicker.tsx +++ b/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 = { diff --git a/packages/status-react/src/components/Modals/WalletModal.tsx b/packages/status-react/src/components/Modals/WalletModal.tsx index dce84ec..2845c24 100644 --- a/packages/status-react/src/components/Modals/WalletModal.tsx +++ b/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, diff --git a/packages/status-react/src/contexts/configProvider.tsx b/packages/status-react/src/contexts/configProvider.tsx deleted file mode 100644 index f2088c8..0000000 --- a/packages/status-react/src/contexts/configProvider.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React, { createContext, useContext } from 'react' - -export type ConfigType = { - environment: string - dappUrl: string -} - -const ConfigContext = createContext({ - environment: 'production', - dappUrl: '', -}) - -export function useConfig() { - return useContext(ConfigContext) -} - -type ConfigProviderProps = { - children: React.ReactNode - config: ConfigType -} - -export function ConfigProvider({ children, config }: ConfigProviderProps) { - return ( - {children} - ) -} diff --git a/packages/status-react/src/contexts/messengerProvider.tsx b/packages/status-react/src/contexts/messengerProvider.tsx index c957b60..3fc21c1 100644 --- a/packages/status-react/src/contexts/messengerProvider.tsx +++ b/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({ 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 ( {children} diff --git a/packages/status-react/src/hooks/messenger/useMessenger.ts b/packages/status-react/src/hooks/messenger/useMessenger.ts index d0275cc..996a0c2 100644 --- a/packages/status-react/src/hooks/messenger/useMessenger.ts +++ b/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(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, diff --git a/packages/status-react/src/index.tsx b/packages/status-react/src/index.tsx index 3a4fded..0daf2bb 100644 --- a/packages/status-react/src/index.tsx +++ b/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' diff --git a/packages/status-react/src/modules/channel/GroupChatRoom.tsx b/packages/status-react/src/modules/channel/GroupChatRoom.tsx index 1495314..9009324 100644 --- a/packages/status-react/src/modules/channel/GroupChatRoom.tsx +++ b/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 ( {!narrow && ( diff --git a/packages/status-react/src/modules/channel/index.tsx b/packages/status-react/src/modules/channel/index.tsx index 02b40c8..f82835c 100644 --- a/packages/status-react/src/modules/channel/index.tsx +++ b/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(null) return ( - - - - - - - - - - - -