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 (