Class component uiweb chat component

.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

@@ -9,17 +9,17 @@ const ChatViewComponentTest = () => {
     'bafyreidesy6f4iu34eqccmqh55g35wu36lvlz42c63ivtmgjjhezlzdqta',
     'bafyreig3gs4tpwxumiz5fxypyt4omlxhvrvuj66kfoyioeshawlau6lgem',
   ];
-
+console.log('in chat view component')
   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/uiweb/src/lib/components/chat/ChatProfile/AddWalletContent.tsx

@@ -24,6 +24,7 @@ import CloseIcon from '../../../icons/close.svg';
 import { ChatSearchInput, CustomStyleParamsType, ModalHeader } from '../reusables';
 import useGetChatProfile from '../../../hooks/useGetChatProfile';
 import { BackIcon } from '../../../icons/Back';
+import useChatProfile from '../../../hooks/chat/useChatProfile';
 
 
 type AddWalletContentProps = {
@@ -50,7 +51,7 @@ export const AddWalletContent = ({
   const [filteredUserData, setFilteredUserData] = useState<any>(null);
   const { account, env } = useChatData();
   const isMobile = useMediaQuery(device.mobileL);
-  const {fetchChatProfile} = useGetChatProfile();
+  const {fetchUserChatProfile} = useChatProfile();
   const groupInfoToast = useToast();
   const customSearchStyle:CustomStyleParamsType = {
    background:theme.backgroundColor?.modalInputBackground,
@@ -64,7 +65,7 @@ export const AddWalletContent = ({
     //fix ens search 
     const newChatUser = await getNewChatUser({
       searchText: searchedText,
-      fetchChatProfile,
+      fetchChatProfile:fetchUserChatProfile,
       env,
     });
     if(newChatUser){

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

@@ -68,7 +68,7 @@ export const ChatProfile: React.FC<IChatProfile> = ({
 
   const fetchProfileData = async () => {
     if (isValidETHAddress(chatId)) {
-      const ChatProfile = await fetchUserChatProfile({ profileId: chatId });
+      const ChatProfile = await fetchUserChatProfile({ profileId: chatId,env });
       const result = await resolveNewEns(chatId, provider);
       setEnsName(result);
       setChatInfo(ChatProfile);

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.fromCAIP10).split(':')[1] !== account && (
         <Span
           theme={theme}
           alignSelf="start"
@@ -40,8 +41,8 @@ const SenderMessageAddress = ({ chat }: { chat: IMessagePayload }) => {
           fontWeight={theme.fontWeight?.chatReceivedBubbleAddressText}
           color={theme.textColor?.chatReceivedBubbleAddressText}
         >
-          {chat.fromDID.split(':')[1].slice(0, 6)}...
-          {chat.fromDID.split(':')[1].slice(-6)}
+          {chat.fromCAIP10.split(':')[1].slice(0, 6)}...
+          {chat.fromCAIP10.split(':')[1].slice(-6)}
         </Span>
       )}
     </>
@@ -65,7 +66,7 @@ const SenderMessageProfilePicture = ({ chat }: { chat: IMessagePayload }) => {
   }, [account, chat.fromCAIP10]);
   return (
     <Section justifyContent="start" alignItems="start">
-      {chat.fromCAIP10.split(':')[1] !== account && (
+      {(chat.fromCAIP10).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
@@ -339,15 +340,15 @@ const TwitterCard = ({
 export const ChatViewBubble = ({ decryptedMessagePayload }: { decryptedMessagePayload: IMessagePayload }) => {
   const { account } = useChatData();
   const position =
-    pCAIP10ToWallet(decryptedMessagePayload.fromDID).toLowerCase() !== account?.toLowerCase()
+    pCAIP10ToWallet(decryptedMessagePayload.fromCAIP10).toLowerCase() !== account?.toLowerCase()
       ? 0
       : 1;
   const { tweetId, messageType }: TwitterFeedReturnType = checkTwitterUrl({
     message: decryptedMessagePayload?.messageContent,
   });
   const [isGroup, setIsGroup] = useState<boolean>(false);
   useEffect(() => {
-    if (decryptedMessagePayload.toDID.split(':')[0] === 'eip155') {
+    if ((decryptedMessagePayload.toCAIP10).split(':')[0] === 'eip155') {
       if (isGroup) {
         setIsGroup(false);
       }
@@ -356,7 +357,7 @@ export const ChatViewBubble = ({ decryptedMessagePayload }: { decryptedMessagePa
         setIsGroup(true);
       }
     }
-  }, [decryptedMessagePayload.toDID, isGroup]);
+  }, [decryptedMessagePayload.toCAIP10, isGroup]);
 
   if (messageType === 'TwitterFeedLink') {
     decryptedMessagePayload.messageType = 'TwitterFeedLink';

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

@@ -26,7 +26,7 @@ export const ApproveRequestBubble = ({
   chatId,
   setChatFeed,
 }: IApproveRequestBubbleProps) => {
-  const { pgpPrivateKey } = useChatData();
+  const { alias } = 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 alias.chat.accept(chatId);
       if (response) {
         const updatedChatFeed = { ...(chatFeed as IFeeds) };
         updatedChatFeed.intent = response;