class based restapi migration for chat components

.husky/pre-commit

@@ -4,4 +4,4 @@
 echo "\nRunning GIT hooks..."
 yarn cleanbuild
 yarn nx affected --target=lint
-#yarn nx affected --target=test
+yarn nx affected --target=test

packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatViewComponent.tsx

@@ -13,13 +13,13 @@ const ChatViewComponentTest = () => {
   return (
     <div>
       <h2>Chat UI Test page</h2>
-      <CreateGroupModal onClose={()=>{console.log('in close')}} />
+      {/* <CreateGroupModal onClose={()=>{console.log('in close')}} /> */}
       <ChatViewComponentCard>
-      <CreateGroupModal onClose={()=>{console.log('in close')}}  modalBackground={MODAL_BACKGROUND_TYPE.OVERLAY} modalPositionType={MODAL_POSITION_TYPE.RELATIVE}/>
+      {/* <CreateGroupModal onClose={()=>{console.log('in close')}}  modalBackground={MODAL_BACKGROUND_TYPE.OVERLAY} modalPositionType={MODAL_POSITION_TYPE.RELATIVE}/> */}
 
         <ChatView 
         onVerificationFail={() => console.log("BOIIII RETURNNNSSSSS")} 
-        chatId='4ac5ab85c9c3d57adbdf2dba79357e56b2f9ef0256befe750d9f93af78d2ca68' 
+        chatId='a5dad31b20c9aaf761221b57f6f0ab96b03a456525159378388e896475b1f943' 
         limit={10}
          isConnected={true} 
          groupInfoModalBackground={MODAL_BACKGROUND_TYPE.OVERLAY}

packages/examples/sdk-frontend-react/src/app/app.tsx

@@ -314,7 +314,7 @@ export function App() {
           <Web3Context.Provider value={{ account, active, library, chainId }}>
             <SocketContext.Provider value={socketData}>
               <AccountContext.Provider value={{ pgpPrivateKey, setSpaceId }}>
-                <ChatUIProvider  env={env} theme={lightChatTheme} >
+                <ChatUIProvider signer={signer} env={env} theme={lightChatTheme} >
                   <SpacesUIProvider spaceUI={spaceUI} theme={customDarkTheme}>
                     <Routes>
                       <Route

packages/uiweb/src/lib/components/chat/ChatProfile/ChatProfile.tsx

@@ -43,7 +43,7 @@ export const ChatProfile: React.FC<IChatProfile> = ({
   groupInfoModalPositionType = MODAL_POSITION_TYPE.GLOBAL,
 }) => {
   const theme = useContext(ThemeContext);
-  const { account, env } = useChatData();
+  const { account, env, pushUser } = useChatData();
   const { getGroupByID } = useGetGroupByID();
   const { fetchUserChatProfile } = useChatProfile();
 
@@ -110,7 +110,7 @@ export const ChatProfile: React.FC<IChatProfile> = ({
   useEffect(() => {
     if (!chatId) return;
     fetchProfileData();
-  }, [chatId, account, env]);
+  }, [chatId, account, pushUser]);
 
   if (chatId && style === 'Info') {
     return (

packages/uiweb/src/lib/components/chat/ChatViewBubble/ChatViewBubble.tsx

@@ -25,13 +25,14 @@ import {
   pCAIP10ToWallet,
   shortenText,
 } from '../../../helpers';
+import { formatTime } from '../../../helpers/timestamp';
 
 const SenderMessageAddress = ({ chat }: { chat: IMessagePayload }) => {
   const { account } = useContext(ChatDataContext);
   const theme = useContext(ThemeContext);
   return (
     <>
-      {chat.fromCAIP10.split(':')[1] !== account && (
+      {(chat.fromDID).split(':')[1] !== account && (
         <Span
           theme={theme}
           alignSelf="start"
@@ -53,7 +54,7 @@ const SenderMessageProfilePicture = ({ chat }: { chat: IMessagePayload }) => {
   const [pfp, setPfp] = useState<string>('');
   const getUserPfp = async () => {
     const pfp = await getPfp({
-      account: chat.fromCAIP10.split(':')[1],
+      account: chat.fromDID.split(':')[1],
       env: env,
     });
     if (pfp) {
@@ -62,10 +63,10 @@ const SenderMessageProfilePicture = ({ chat }: { chat: IMessagePayload }) => {
   };
   useEffect(() => {
     getUserPfp();
-  }, [account, chat.fromCAIP10]);
+  }, [account, chat.fromDID]);
   return (
     <Section justifyContent="start" alignItems="start">
-      {chat.fromCAIP10.split(':')[1] !== account && (
+      {(chat.fromDID || chat.fromDID).split(':')[1] !== account && (
         <Section alignItems="start">
           {pfp && (
             <Image
@@ -123,7 +124,7 @@ const MessageCard = ({
   isGroup: boolean;
 }) => {
   const theme = useContext(ThemeContext);
-  const time = moment(chat.timestamp).format('hh:mm a');
+  const time = formatTime(chat.timestamp)
   return (
     <MessageWrapper chat={chat} isGroup={isGroup} maxWidth="70%">
       <Section
@@ -347,7 +348,7 @@ export const ChatViewBubble = ({ decryptedMessagePayload }: { decryptedMessagePa
   });
   const [isGroup, setIsGroup] = useState<boolean>(false);
   useEffect(() => {
-    if (decryptedMessagePayload.toDID.split(':')[0] === 'eip155') {
+    if ((decryptedMessagePayload.toDID).split(':')[0] === 'eip155') {
       if (isGroup) {
         setIsGroup(false);
       }

packages/uiweb/src/lib/components/chat/ChatViewComponent/ChatViewComponent.tsx

@@ -42,7 +42,7 @@ export const ChatViewComponent: React.FC<IChatViewComponentProps> = (
     verificationFailModalPosition = MODAL_POSITION_TYPE.GLOBAL,
   } = options || {};
 
-  const { env, signer, account, pgpPrivateKey } = useChatData();
+  const { env, signer, account } = useChatData();
 
   // const [conversationHash, setConversationHash] = useState<string>();
 
@@ -80,15 +80,15 @@ export const ChatViewComponent: React.FC<IChatViewComponentProps> = (
         )}
       </Section>
       {/* )} */}
-      {(!signer && !(!!account && !!pgpPrivateKey) && !isConnected) && (
+      {(!signer && !account && !isConnected) && (
         <Section flex="0 1 auto">
           <Span>
             You need to either pass signer or isConnected  to send
             messages{' '}
           </Span>
         </Section>
       )}
-      {(messageInput && (!!signer || (!!account && !!pgpPrivateKey) || isConnected )) && (
+      {(messageInput && (!!signer || (!!account) || isConnected )) && (
         <Section flex="0 1 auto" position='static'>
           <MessageInput
             onVerificationFail={onVerificationFail}

packages/uiweb/src/lib/components/chat/ChatViewList/ApproveRequestBubble.tsx

@@ -26,7 +26,7 @@ export const ApproveRequestBubble = ({
   chatId,
   setChatFeed,
 }: IApproveRequestBubbleProps) => {
-  const { pgpPrivateKey } = useChatData();
+  const { pushUser } = useChatData();
 
   const ApproveRequestText = {
     GROUP: `You were invited to the group ${chatFeed?.groupInformation?.groupName}. Please accept to continue messaging in this group.`,
@@ -39,13 +39,7 @@ export const ApproveRequestBubble = ({
 
   const handleApproveChatRequest = async () => {
     try {
-      if (!pgpPrivateKey) {
-        return;
-      }
-
-      const response = await approveChatRequest({
-        chatId,
-      });
+      const response = await pushUser?.chat.accept(chatId);
       if (response) {
         const updatedChatFeed = { ...(chatFeed as IFeeds) };
         updatedChatFeed.intent = response;