upgraded push user for push chat (#1406)

* upgraded push user for push chat * Moved chat user context to app context (#1412) * partial commit * added search and dynamic linking in chatpreviewlist * fixed dynamic link * added formatting for .wallet * Resolve verifier address issue * Console error and warning fix (#1390) * fixed button and chatviewlist warning * fixed memory leak in useeffect * Push admin address updated * added chat components * Added Collapsable Sidebar UI (#1410) * Sidebar Collapsable new UI and Logic (#1396) * Sidebar Collapsable new UI and Logic * Sidebar State persistant and Yield Farming logo done * Sidebar components are adjusted according to the design * Module width changes when collapsed * Fixed the margin of dashboard, send and yield modules * Removed the arrow in more button * changes according to code rules * Tooltip for collapsable sidebar * name change * changes --------- Co-authored-by: Abhishek <[email protected]> * modified 404 page not found page (#1405) * fixed button and chatviewlist warning * fixed memory leak in useeffect * modified 404 not found page in dapp * removed unnecessary styles * few tweaks --------- Co-authored-by: harshrajat <[email protected]> * Moved ChatuserContext to AppContext * fixed reviw bugs * fixed a bug * fix: z-index of chat profile & chat preview load on big screen * Update user is fixed and restapi version updated * Read only mode active when user rejects signature * rejection toast is added and chat is ready for read mode --------- Co-authored-by: harshrajat <[email protected]> Co-authored-by: Monalisha Mishra <[email protected]> Co-authored-by: Nilesh Gupta <[email protected]> Co-authored-by: Satyam <[email protected]> Co-authored-by: Monalisha Mishra <[email protected]> Co-authored-by: Pritipriya Singh <[email protected]> --------- Co-authored-by: harshrajat <[email protected]> Co-authored-by: Monalisha Mishra <[email protected]> Co-authored-by: Nilesh Gupta <[email protected]> Co-authored-by: Satyam <[email protected]> Co-authored-by: Monalisha Mishra <[email protected]> Co-authored-by: Pritipriya Singh <[email protected]>
push-protocol · Feb 13, 2024 · d35a432 · d35a432
1 parent c511e78
commit d35a432
Show file tree

Hide file tree

Showing 30 changed files with 1,046 additions and 1,038 deletions.
diff --git a/package.json b/package.json
@@ -33,9 +33,9 @@
  "@mui/icons-material": "^5.8.4",
  "@mui/lab": "^5.0.0-alpha.72",
  "@mui/material": "^5.5.0",
- "@pushprotocol/restapi": "1.6.6",
+ "@pushprotocol/restapi": "0.0.1-alpha.64",
  "@pushprotocol/socket": "0.5.3",
- "@pushprotocol/uiweb": "1.2.4",
+ "@pushprotocol/uiweb": "0.0.1-alpha.41",
  "@reduxjs/toolkit": "^1.7.1",
  "@testing-library/dom": "^9.0.1",
  "@testing-library/jest-dom": "^4.2.4",

diff --git a/src/App.tsx b/src/App.tsx
@@ -13,7 +13,7 @@ import { createGlobalStyle } from 'styled-components';
 
 // Internal Compoonents
 import InitState from 'components/InitState';
-import AppContextProvider from 'contexts/AppContext';
+import AppContextProvider, { AppContext } from 'contexts/AppContext';
 import NavigationContextProvider from 'contexts/NavigationContext';
 import { useAccount, useInactiveListener, useSDKSocket } from 'hooks';
 import { resetAdminSlice } from 'redux/slices/adminSlice';
@@ -35,7 +35,6 @@ import { setIndex, setRun, setWelcomeNotifsEmpty } from './redux/slices/userJour
 import { appConfig } from 'config';
 import GLOBALS from 'config/Globals';
 import { themeDark, themeLight } from 'config/Themization';
-import { ChatUserContext } from 'contexts/ChatUserContext';
 import { GlobalContext } from 'contexts/GlobalContext';
 
 // space imports
@@ -113,13 +112,15 @@ if (appConfig?.appEnv === "prod") {
  }
 }
 
+
 // Provess App
 export default function App() {
  const dispatch = useDispatch();
 
  const { isActive, account, chainId, provider } = useAccount();
  const [currentTime, setcurrentTime] = React.useState(0);
  const { authError, setAuthError } = useContext(ErrorContext);
+ const { pgpPvtKey } = useContext<any>(AppContext);
  const { sidebarCollapsed, setSidebarCollapsed } = React.useContext(GlobalContext);
 
  const updateOnboardTheme = useUpdateTheme();
@@ -241,8 +242,6 @@ export default function App() {
  };
 
  const librarySigner = provider?.getSigner(account);
- const { pgpPvtKey } = useContext<any>(ChatUserContext);
-
 
  const spaceUI = useMemo(() => new SpacesUI({
  account: account,
@@ -260,7 +259,6 @@ export default function App() {
 
  return (
  <ThemeProvider theme={darkMode ? themeDark : themeLight}>
- <AppContextProvider>
  {(!isActive || !allowedChain) && (
  <SectionV2 minHeight="100vh">
  <AppLogin toggleDarkMode={toggleDarkMode} />
@@ -333,8 +331,6 @@ export default function App() {
  </NavigationContextProvider>
  </>
  )}
-
- </AppContextProvider>
  </ThemeProvider>
  );
 }

diff --git a/src/components/chat/w2wChat/TypeBar/Typebar.tsx b/src/components/chat/w2wChat/TypeBar/Typebar.tsx
@@ -10,16 +10,16 @@ import styled, { useTheme } from 'styled-components';
 import LoaderSpinner, { LOADER_TYPE } from 'components/reusables/loaders/LoaderSpinner';
 import { ButtonV2, ItemHV2, SpanV2 } from 'components/reusables/SharedStylingV2';
 import { Context } from 'modules/chat/ChatModule';
-import { AppContext } from 'types/chat';
+import { ChatUserAppContext } from 'types/chat';
 import { FileMessageContent } from './Files/Files';
 import GifPicker from './Gifs/GifPicker';
 
 // Internal configs
 import { appConfig } from 'config';
-import { ChatUserContext } from 'contexts/ChatUserContext';
 import { caip10ToWallet } from 'helpers/w2w';
 import { MessagetypeType } from '../../../../types/chat';
 import {filterXSS} from 'xss'
+import { AppContext } from 'contexts/AppContext';
 
 
 interface ITypeBar {
@@ -48,8 +48,8 @@ const Typebar = ({
  setSnackbarText,
  approveIntent,
 }: ITypeBar) => {
- const { currentChat, activeTab, setChat }: AppContext = useContext<AppContext>(Context);
- const {connectedUser} = useContext(ChatUserContext);
+ const { currentChat, activeTab, setChat }: ChatUserAppContext = useContext<ChatUserAppContext>(Context);
+ const {connectedUser} = useContext(AppContext);
  const [showEmojis, setShowEmojis] = useState<boolean>(false);
  const [isGifPickerOpened, setIsGifPickerOpened] = useState<boolean>(false);
  const fileInputRef = useRef<HTMLInputElement>(null);

diff --git a/src/components/chat/w2wChat/chatBox/ChatBox.tsx b/src/components/chat/w2wChat/chatBox/ChatBox.tsx
@@ -15,7 +15,7 @@ import ScrollToBottom from 'react-scroll-to-bottom';
 import { useClickAway } from 'react-use';
 import styled, { useTheme } from 'styled-components';
 import { produce } from 'immer';
-import { ChatProfile, ChatViewList, MessageInput } from '@pushprotocol/uiweb';
+import { ChatProfile, ChatViewList, MessageInput, UserProfile } from '@pushprotocol/uiweb';
 // Internal Components
 import { ReactComponent as Info } from 'assets/chat/group-chat/info.svg';
 import { ReactComponent as InfoDark } from 'assets/chat/group-chat/infodark.svg';
@@ -26,7 +26,6 @@ import LoaderSpinner, { LOADER_TYPE } from 'components/reusables/loaders/LoaderS
 import { ButtonV2, ImageV2, ItemHV2, ItemVV2, SpanV2 } from 'components/reusables/SharedStylingV2';
 import Tooltip from 'components/reusables/tooltip/Tooltip';
 import { Content } from 'components/SharedStyling';
-import { ChatUserContext } from 'contexts/ChatUserContext';
 import { checkIfChatExist } from 'helpers/w2w/user';
 import { useAccount, useDeviceWidthCheck } from 'hooks';
 import { useResolveWeb3Name } from 'hooks/useResolveWeb3Name';
@@ -60,7 +59,7 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(props,
 });
 
 const ChatBox = ({ showGroupInfoModal }): JSX.Element => {
- const { currentChat, viewChatBox, receivedIntents, activeTab, setChat }: ContextType =
+ const { currentChat, viewChatBox, receivedIntents, activeTab,setViewChatBox, setChat, selectedChatId }: ContextType =
  useContext<ContextType>(Context);
  const { web3NameList }: AppContextType = useContext(AppContext);
 
@@ -72,13 +71,11 @@ const ChatBox = ({ showGroupInfoModal }): JSX.Element => {
  const [isGroup, setIsGroup] = useState<boolean>(false);
  const [showGroupInfo, setShowGroupInfo] = useState<boolean>(false);
  const groupInfoRef = useRef<HTMLInputElement>(null);
- const { connectedUser } = useContext(ChatUserContext);
+ const { connectedUser } = useContext(AppContext);
  const { videoObject } = useContext(VideoCallContext);
  const theme = useTheme();
  const isMobile = useDeviceWidthCheck(600);
 
-
-
  useClickAway(groupInfoRef, () => setShowGroupInfo(false));
 
  //resolve web3 names
@@ -87,7 +84,15 @@ const ChatBox = ({ showGroupInfoModal }): JSX.Element => {
  // get web3 name
  let ensName = '';
  if (!isGroup && currentChat?.wallets?.split(',')[0].toString()) {
- const walletLowercase = currentChat.wallets.includes(':nft') ? caip10ToWallet(currentChat?.wallets.replace(/eip155:\d+:/, 'eip155:').split(':nft')[0].toString().toLowerCase()) : caip10ToWallet(currentChat?.wallets?.split(',')[0].toString())?.toLowerCase();
+ const walletLowercase = currentChat.wallets.includes(':nft')
+ ? caip10ToWallet(
+ currentChat?.wallets
+ .replace(/eip155:\d+:/, 'eip155:')
+ .split(':nft')[0]
+ .toString()
+ .toLowerCase()
+ )
+ : caip10ToWallet(currentChat?.wallets?.split(',')[0].toString())?.toLowerCase();
  const checksumWallet = ethers.utils.getAddress(walletLowercase);
  ensName = web3NameList[checksumWallet];
  }
@@ -107,7 +112,6 @@ const ChatBox = ({ showGroupInfoModal }): JSX.Element => {
 
  if (currentChat) {
  setIsGroup(checkIfGroup(currentChat));
- console.log('currentChat', checkIfGroup(currentChat), isGroup);
  // We only delete the messages once the user clicks on another chat. The user could click multiple times on the same chat and it would delete the previous messages
  // even though the user was still on the same chat.
  const image = getGroupImage(currentChat);
@@ -121,17 +125,17 @@ const ChatBox = ({ showGroupInfoModal }): JSX.Element => {
  if (Loading) setLoading(false);
  }, [currentChat]);
 
- const getDisplayName = () => {
- if (ensName) return `${ensName} (${currentChat.wallets.includes(':nft') ? caip10ToWallet(currentChat?.wallets.replace(/eip155:\d+:/, 'eip155:').split(':nft')[0].toString().toLowerCase()) : caip10ToWallet(currentChat?.wallets?.split(',')[0].toString())?.toLowerCase()})`;
- if (isGroup)
- return isMobile
- ? currentChat?.groupInformation?.groupName.length > 25
- ? currentChat?.groupInformation?.groupName?.slice(0, 25) + '...'
- : currentChat?.groupInformation?.groupName
- : currentChat?.groupInformation?.groupName;
- if (currentChat?.wallets) return caip10ToWallet(currentChat.wallets.includes(':nft') ? currentChat?.wallets.replace(/eip155:\d+:/, 'eip155:').split(':nft')[0].toString().toLowerCase() : currentChat?.wallets?.split(',')[0].toString()?.toLowerCase());
+ const getChatId = () => {
+ let chatId = selectedChatId || currentChat?.did;
+ if(chatId){
+ return (chatId?.includes(':nft:')
+ ? chatId.replace(/eip155:\d+:/, 'eip155:').split(':nft')[0]
+ : chatId) ;
+ }
+ return chatId;
+
+
  };
-
  const handleCloseSuccessSnackbar = (event?: React.SyntheticEvent | Event, reason?: string): void => {
  if (reason === 'clickaway') {
  return;
@@ -167,10 +171,9 @@ const ChatBox = ({ showGroupInfoModal }): JSX.Element => {
  { id: 7, content: 'Access to more chat requests and messages will be added in the near future' },
  ];
 
-
  return (
  <Container>
- {!viewChatBox ? (
+ {(!viewChatBox && !getChatId() )? (
  <WelcomeItem gap="25px">
  {activeTab == 4 && (
  <LoaderSpinner
@@ -224,7 +227,6 @@ const ChatBox = ({ showGroupInfoModal }): JSX.Element => {
  </WelcomeItem>
  ) : (
  <>
-
  <Snackbar
  open={openReprovalSnackbar}
  autoHideDuration={10000}
@@ -252,54 +254,64 @@ const ChatBox = ({ showGroupInfoModal }): JSX.Element => {
  background={theme.default.bg}
  padding="6px"
  fontWeight="500"
- zIndex="99999"
+ zIndex="1"
  >
- {(!!currentChat || !!Object.keys(currentChat || {}).length) && (
 
- <ChatProfile component={<Tooltip
- tooltipContent="Video call"
- placementProps={{
- bottom: '1.4rem',
- transform: 'translateX(-92%)',
- borderRadius: '12px 12px 2px 12px',
- width: '75px',
- padding: '0.3rem 0.8rem 0.25rem 0.8rem',
- }}
- wrapperProps={{ width: 'fit-content', minWidth: 'fit-content' }}
- >
- <VideoCallButton onClick={startVideoCallHandler}>
- <ImageV2
- cursor="pointer"
- src={videoCallIcon}
- />
- </VideoCallButton>
- </Tooltip>} style="Info" chatId={(currentChat?.did?.includes(":") ? currentChat?.did.split(":")[1] : currentChat?.did) || currentChat?.groupInformation?.chatId} />
-
-
+ {getChatId() && (
+ <ChatProfile
+ chatProfileLeftHelperComponent = {
+ isMobile?
+ <SpanV2 onClick={()=>setViewChatBox(false)}>
+ <MdOutlineArrowBackIos />
+ </SpanV2>
+ :null
+ }
+ chatProfileRightHelperComponent={
+ <Tooltip
+ tooltipContent="Video call"
+ placementProps={{
+ bottom: '1.4rem',
+ transform: 'translateX(-92%)',
+ borderRadius: '12px 12px 2px 12px',
+ width: '75px',
+ padding: '0.3rem 0.8rem 0.25rem 0.8rem',
+ }}
+ wrapperProps={{ width: 'fit-content', minWidth: 'fit-content' }}
+ >
+ <VideoCallButton onClick={startVideoCallHandler}>
+ <ImageV2
+ cursor="pointer"
+ src={videoCallIcon}
+ />
+ </VideoCallButton>
+ </Tooltip>
+ }
+ chatId={getChatId()}
+ />
  )}
  </ItemHV2>
 
  <MessageContainer>
- {(!!currentChat || !!Object.keys(currentChat || {}).length) && (
+ {(getChatId()) && (
  <ChatViewList
- key={currentChat?.did}
- chatId={(currentChat?.did?.includes(":nft:") ? currentChat?.did.replace(/eip155:\d+:/, 'eip155:').split(':nft')[0] : currentChat?.did) || currentChat?.groupInformation?.chatId}
+ chatId={getChatId()}
  limit={10}
  />
  )}
  </MessageContainer>
  {checkIfChatExist({ chats: receivedIntents, currentChat, connectedUser, isGroup }) ? null : (
  <>
  <MessageInputWrapper>
- {(!!currentChat || !!Object.keys(currentChat || {}).length) && (
-
- <MessageInput chatId={currentChat?.did?.includes(":nft:") ? currentChat?.did.replace(/eip155:\d+:/, 'eip155:').split(':nft')[0] : currentChat?.did || currentChat?.groupInformation?.chatId} />
-
+ {getChatId() && (
+ <MessageInput
+ chatId={
+ getChatId()
+ }
+ />
  )}
  </MessageInputWrapper>
  </>
  )}
-
  </>
  )}
  </Container>
@@ -317,7 +329,7 @@ const MessageInputWrapper = styled.div`
  justify-content: center;
  position: absolute;
  bottom: 8px;
- z-index: 99;
+
 `;
 
 const ChatContainer = styled.div`
@@ -358,8 +370,6 @@ const MessageContainer = styled(ItemVV2)`
  @media (max-height: 400px) {
  height: 45%;
  }
-
-
 `;
 
 const GroupInfo = styled(ItemHV2)`

diff --git a/src/components/chat/w2wChat/chatQR/chatQR.tsx b/src/components/chat/w2wChat/chatQR/chatQR.tsx
@@ -9,9 +9,9 @@ import { AiOutlineClose, AiOutlineQrcode } from "react-icons/ai";
 import { H2V2, ItemHV2, ItemVV2 } from "components/reusables/SharedStylingV2";
 import GLOBALS, { device } from "config/Globals";
 import BlurBG from "components/reusables/blurs/BlurBG";
-import { ChatUserContext } from "contexts/ChatUserContext";
 import chatBoxImage from "../../../../assets/chat/chatBox.svg";
 import { useAccount } from "hooks";
+import { AppContext } from "contexts/AppContext";
 
 const ChatQR = ({
  type = LOADER_TYPE.STANDALONE,
@@ -21,7 +21,7 @@ const ChatQR = ({
 }) => {
  const theme = useTheme();
  const { account } = useAccount();
- const { createUserIfNecessary, displayQR, setDisplayQR, pgpPvtKey, connectedPeerID } = useContext(ChatUserContext);
+ const { pgpPvtKey,connectedPeerID,displayQR, setDisplayQR, createUserIfNecessary } = useContext(AppContext);
  const [myPeer, myPeerID] = usePeer();
  const [qrCodeText, setQrCodeText] = useState('');
  const [loading, setLoading] = useState(true);

diff --git a/src/components/chat/w2wChat/chatQR/mobileView.tsx b/src/components/chat/w2wChat/chatQR/mobileView.tsx
@@ -2,11 +2,11 @@ import BlurBG from 'components/reusables/blurs/BlurBG';
 import { LOADER_OVERLAY, LOADER_TYPE } from 'components/reusables/loaders/LoaderSpinner';
 import { ItemVV2 } from 'components/reusables/SharedStylingV2';
 import GLOBALS, { device } from 'config/Globals';
-import { ChatUserContext } from 'contexts/ChatUserContext';
 import React, { useContext } from 'react';
 import { AiOutlineClose, AiOutlineMore } from 'react-icons/ai';
 import styled, { useTheme } from 'styled-components';
 import backgroundImage from "../../../../assets/chat/QRBackground.svg";
+import { AppContext } from 'contexts/AppContext';
 
 const MobileView = ({
  type = LOADER_TYPE.STANDALONE,
@@ -15,7 +15,13 @@ const MobileView = ({
  width = 'auto'
 }) => {
 
- const { createUserIfNecessary, displayQR, setDisplayQR, pgpPvtKey, connectedPeerID } = useContext(ChatUserContext);
+ const {
+ pgpPvtKey,
+ connectedPeerID, 
+ displayQR, 
+ setDisplayQR, 
+ createUserIfNecessary 
+ } = useContext(AppContext);
  const theme = useTheme();
 
  return (