fixed video call chatid issue

package.json

@@ -33,7 +33,7 @@
     "@mui/icons-material": "^5.8.4",
     "@mui/lab": "^5.0.0-alpha.72",
     "@mui/material": "^5.5.0",
-    "@pushprotocol/restapi": "0.0.1-alpha.71",
+    "@pushprotocol/restapi": "^1.7.2",
     "@pushprotocol/socket": "0.5.3",
     "@pushprotocol/uiweb": "1.3.1-alpha.6",
     "@reduxjs/toolkit": "^1.7.1",

src/components/chat/w2wChat/chatBox/ChatBox.tsx

@@ -33,7 +33,7 @@ import useToast from 'hooks/useToast';
 import { Context } from 'modules/chat/ChatModule';
 import { AppContext as ContextType } from 'types/chat';
 import HandwaveIcon from '../../../../assets/chat/handwave.svg';
-import { caip10ToWallet } from '../../../../helpers/w2w';
+import { caip10ToWallet, walletToCAIP10 } from '../../../../helpers/w2w';
 import { checkIfGroup, getGroupImage } from '../../../../helpers/w2w/groupChat';
 
 import { AppContext } from 'contexts/AppContext';
@@ -59,7 +59,7 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(props,
 });
 
 const ChatBox = ({ showGroupInfoModal }): JSX.Element => {
-  const { currentChat, viewChatBox, receivedIntents, activeTab,setViewChatBox, setChat, selectedChatId }: ContextType =
+  const { currentChat, viewChatBox, receivedIntents, activeTab,setViewChatBox, setChat, selectedChat }: ContextType =
     useContext<ContextType>(Context);
   const { web3NameList }: AppContextType = useContext(AppContext);
 
@@ -72,7 +72,7 @@ const ChatBox = ({ showGroupInfoModal }): JSX.Element => {
   const [showGroupInfo, setShowGroupInfo] = useState<boolean>(false);
   const groupInfoRef = useRef<HTMLInputElement>(null);
   const { connectedUser } = useContext(AppContext);
-  const { videoObject } = useContext(VideoCallContext);
+  const { videoObjectRef } = useContext(VideoCallContext);
   const theme = useTheme();
   const isMobile = useDeviceWidthCheck(600);
 
@@ -81,30 +81,10 @@ const ChatBox = ({ showGroupInfoModal }): JSX.Element => {
   //resolve web3 names
   useResolveWeb3Name(!isGroup ? currentChat?.wallets?.split(',')[0].toString() : null);
 
-  // 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 checksumWallet = ethers.utils.getAddress(walletLowercase);
-    ensName = web3NameList[checksumWallet];
-  }
+
   const navigate = useNavigate();
   const location = useLocation();
-  useEffect(() => {
-    // if ens is resolved, update browse to match ens name is it doesn't match
-    if (ensName && location.pathname !== `/chat/${ensName}`) {
-      // lastly, set navigation for dynamic linking
-      navigate(`/chat/${ensName}`, { replace: true });
-    }
-  }, [ensName]);
+
 
   useEffect(() => {
     setIsGroup(false);
@@ -126,7 +106,7 @@ const ChatBox = ({ showGroupInfoModal }): JSX.Element => {
   }, [currentChat]);
 
   const getChatId = () => {
-    let chatId = selectedChatId || currentChat?.did;
+    let chatId = selectedChat?.recipient || currentChat?.did;
     if(chatId){
       return (chatId?.includes(':nft:')
         ? chatId.replace(/eip155:\d+:/, 'eip155:').split(':nft')[0]
@@ -136,6 +116,30 @@ const ChatBox = ({ showGroupInfoModal }): JSX.Element => {
 
 
   };
+    // get web3 name
+    console.debug(getChatId())
+    let ensName = '';
+    if (!isGroup && (getChatId())) {
+      const walletLowercase = getChatId().includes(':nft')
+        ? caip10ToWallet(
+            (getChatId())
+              .replace(/eip155:\d+:/, 'eip155:')
+              .split(':nft')[0]
+              .toString()
+              .toLowerCase()
+          )
+        : caip10ToWallet(getChatId())?.toLowerCase();
+        console.debug(walletLowercase)
+      const checksumWallet = ethers.utils.getAddress(walletLowercase);
+      ensName = web3NameList[checksumWallet];
+    }
+    useEffect(() => {
+      // if ens is resolved, update browse to match ens name is it doesn't match
+      if (ensName && location.pathname !== `/chat/${ensName}`) {
+        // lastly, set navigation for dynamic linking
+        navigate(`/chat/${ensName}`, { replace: true });
+      }
+    }, [ensName]);
   const handleCloseSuccessSnackbar = (event?: React.SyntheticEvent | Event, reason?: string): void => {
     if (reason === 'clickaway') {
       return;
@@ -144,12 +148,12 @@ const ChatBox = ({ showGroupInfoModal }): JSX.Element => {
   };
 
   const startVideoCallHandler = async () => {
-    videoObject?.setData((oldData) => {
+    videoObjectRef.current?.setData((oldData) => {
       return produce(oldData, (draft) => {
-        draft.local.address = account;
-        draft.incoming[0].address = caip10ToWallet(currentChat.wallets.toString());
+        draft.local.address = caip10ToWallet(account);
+        draft.incoming[0].address = caip10ToWallet((getChatId()).toString());
         draft.incoming[0].status = PushAPI.VideoCallStatus.INITIALIZED;
-        draft.meta.chatId = currentChat.chatId;
+        draft.meta.chatId = selectedChat.chatId;
       });
     });
   };

src/contexts/VideoCallContext.tsx

@@ -10,6 +10,7 @@ import { initVideoCallData } from '@pushprotocol/restapi/src/lib/video';
 import { User } from 'types/chat';
 import { useAccount } from 'hooks';
 import { AppContext } from './AppContext';
+import { useSelector } from 'react-redux';
 
 interface RequestWrapperOptionsType {
   senderAddress: string;
@@ -40,7 +41,7 @@ const VideoCallContextProvider: React.FC<React.ReactNode> = ({ children }) => {
   const [isCallAccepted, setIsCallAccepted] = useState(false);
   const [incomingCallUserData, setIncomingCallUserData] = useState<User | null>(null);
   const { chainId, account, provider } = useAccount();
-  const { connectedUser, createUserIfNecessary} = useContext(AppContext);
+  const { connectedUser, createUserIfNecessary } = useContext(AppContext);
 
   const [data, setData] = useState<PushAPI.VideoCallData>(initVideoCallData);
 
@@ -55,23 +56,32 @@ const VideoCallContextProvider: React.FC<React.ReactNode> = ({ children }) => {
     };
   }, [data.incoming[0].status]);
 
+  const { userPushSDKInstance } = useSelector((state: any) => {
+    return state.user;
+  });
+
   useEffect(() => {
+
     if (!provider || !account || !connectedUser) return null;
 
     (async () => {
       let createdUser;
+
+      const response = await userPushSDKInstance.encryption.info();
+
       if (!connectedUser.publicKey) {
         createdUser = await createUserIfNecessary();
       }
+
       videoObjectRef.current = new PushAPI.video.Video({
         signer: provider.getSigner(account),
         chainId,
-        pgpPrivateKey: connectedUser.privateKey || createdUser?.privateKey,
+        pgpPrivateKey: response.decryptedPgpPrivateKey || createdUser?.privateKey,
         env: appConfig.appEnv,
         setData,
       });
     })();
-  }, [connectedUser, provider, account]);
+  }, [connectedUser, provider, account, userPushSDKInstance]);
 
   // wrapper methods over the class methods
 
@@ -157,8 +167,8 @@ const VideoCallContextProvider: React.FC<React.ReactNode> = ({ children }) => {
         isVideoCallInitiator:
           data.incoming[0].status !== PushAPI.VideoCallStatus.UNINITIALIZED
             ? videoObjectRef.current?.isInitiator
-            : () => {},
-        videoObject: videoObjectRef.current,
+            : () => { },
+        videoObjectRef,
       }}
     >
       {children}

src/modules/chat/ChatModule.tsx

@@ -37,7 +37,7 @@ import useToast from 'hooks/useToast';
 import ChatBoxSection from 'sections/chat/ChatBoxSection';
 import ChatSidebarSection from 'sections/chat/ChatSidebarSection';
 import VideoCallSection from 'sections/video/VideoCallSection';
-import { ChatUserAppContext, Feeds, MessageIPFS, MessageIPFSWithCID, User, VideoCallInfoI } from 'types/chat';
+import { ChatUserAppContext, Feeds, MessageIPFS, MessageIPFSWithCID, SelectedchatType, User, VideoCallInfoI } from 'types/chat';
 import { checkIfIntent, getUpdatedChatAndIntent, getUpdatedGroupInfo } from 'helpers/w2w/user';
 
 // Internal Configs
@@ -82,7 +82,7 @@ function Chat({ chatid }) {
 
   const [viewChatBox, setViewChatBox] = useState<boolean>(false);
   const [currentChat, setCurrentChat] = useState<Feeds>();
-  const [selectedChatId, setSelectedChatId] = useState<string>();
+  const [selectedChat, setSelectedChat] = useState<SelectedchatType>();
 
   const [receivedIntents, setReceivedIntents] = useState<Feeds[]>([]);
   const [isLoading, setIsLoading] = useState<boolean>(true);
@@ -374,7 +374,7 @@ function Chat({ chatid }) {
   };
 
   useEffect(() => {
-    let formattedchatId = selectedChatId || chatid;
+    let formattedchatId = selectedChat?.recipient || chatid;
 
     if (formattedchatId) {
       setViewChatBox(true);
@@ -386,7 +386,7 @@ function Chat({ chatid }) {
       setViewChatBox(false);
       navigate(`/chat`);
     }
-  }, [selectedChatId]);
+  }, [selectedChat]);
 
   useEffect(() => {}, [account, connectedUser?.privateKey]);
   return (
@@ -405,8 +405,8 @@ function Chat({ chatid }) {
               <Context.Provider
                 value={{
                   currentChat,
-                  selectedChatId,
-                  setSelectedChatId,
+                  selectedChat,
+                  setSelectedChat,
                   receivedIntents,
                   setReceivedIntents,
                   viewChatBox,

src/sections/chat/ChatSidebarSection.tsx

@@ -68,7 +68,7 @@ const ChatSidebarSection = ({ showCreateGroupModal, autofilledSearch }) => {
   const theme = useTheme();
 
   const {readOnlyWallet} = useContext(GlobalContext);
-  const { setSelectedChatId } = useContext(Context);
+  const { setSelectedChat } = useContext(Context);
   const { setMode } = useContext(GlobalContext);
 
   const isNewTagVisible = getIsNewTagVisible(new Date('2023-02-22T00:00:00.000'), 90);
@@ -275,7 +275,7 @@ const ChatSidebarSection = ({ showCreateGroupModal, autofilledSearch }) => {
         >
           <ChatPreviewList
             listType="CHATS"
-            onChatSelected={async (chatid, chatParticipant) => setSelectedChatId(await formatChatParticipant(chatParticipant, chatid))}
+            onChatSelected={async (chatid, chatParticipant) =>setSelectedChat({chatId:chatid,recipient:await formatChatParticipant(chatParticipant, chatid)}) }
 
             onUnreadCountChange={(count) => {
               // console.log('Count is: ', count);
@@ -293,7 +293,7 @@ const ChatSidebarSection = ({ showCreateGroupModal, autofilledSearch }) => {
         >
           <ChatPreviewList
             listType="REQUESTS"
-            onChatSelected={async (chatid, chatParticipant) => { console.log(chatParticipant); setSelectedChatId(await formatChatParticipant(chatParticipant, chatid)) }}
+            onChatSelected={async (chatid, chatParticipant) => { console.log(chatParticipant); setSelectedChat({chatId:chatid,recipient:await formatChatParticipant(chatParticipant, chatid)}) }}
             onUnreadCountChange={(count) => {
               // console.log('Count is: ', count);
             }}
@@ -329,7 +329,7 @@ const ChatSidebarSection = ({ showCreateGroupModal, autofilledSearch }) => {
             <ChatPreviewList
               listType="SEARCH"
               searchParamter={searchedUser || ''}
-              onChatSelected={async (chatid, chatParticipant) => setSelectedChatId(await formatChatParticipant(chatParticipant, chatid))}
+              onChatSelected={async (chatid, chatParticipant) => setSelectedChat({chatId:chatid,recipient:await formatChatParticipant(chatParticipant, chatid)}) }
               onUnreadCountChange={(count) => {
                 // console.log('Count is: ', count);
               }}

src/types/chat.ts

@@ -99,10 +99,13 @@ export interface TwitterFeedReturnType{
     messageType:string;
 }
 
+export interface SelectedchatType {
+  chatId: string | undefined;recipient:string|undefined
+}
 export interface ChatUserAppContext {
   currentChat: Feeds;
-  selectedChatId: string | undefined;
-  setSelectedChatId:(chatId: string | undefined) => void;
+  selectedChat: SelectedchatType;
+  setSelectedChat:(chat:SelectedchatType) => void;
   viewChatBox: boolean;
   setViewChatBox:(chatId: boolean) => void;
   receivedIntents: Feeds[];

yarn.lock

@@ -5405,7 +5405,7 @@ __metadata:
     "@mui/icons-material": ^5.8.4
     "@mui/lab": ^5.0.0-alpha.72
     "@mui/material": ^5.5.0
-    "@pushprotocol/restapi": 0.0.1-alpha.71
+    "@pushprotocol/restapi": ^1.7.2
     "@pushprotocol/socket": 0.5.3
     "@pushprotocol/uiweb": 1.3.1-alpha.6
     "@reduxjs/toolkit": ^1.7.1
@@ -5594,9 +5594,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@pushprotocol/restapi@npm:0.0.1-alpha.71":
-  version: 0.0.1-alpha.71
-  resolution: "@pushprotocol/restapi@npm:0.0.1-alpha.71"
+"@pushprotocol/restapi@npm:^1.7.2":
+  version: 1.7.2
+  resolution: "@pushprotocol/restapi@npm:1.7.2"
   dependencies:
     "@metamask/eth-sig-util": ^5.0.2
     axios: ^0.27.2
@@ -5619,7 +5619,7 @@ __metadata:
   peerDependenciesMeta:
     ethers:
       optional: true
-  checksum: f54952b8d5eeb6bfad61af52b5d25a5989e9075d3640800cd3042f56c411659ee3add38d673df1497479d3a7fb7500db7789fa9b4e696a0544b556345cd950f7
+  checksum: 345e4ddc88e5ef5062fdd570b326c6d6becb8eb25120c615bd6e677d14418b952558e9064fe13a14c2e3fd40daa2bf4b84c0c71e0c4b69ccdb6c24c52d6ff9bf
   languageName: node
   linkType: hard