Main Release 1.4.0

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

@@ -7,7 +7,14 @@ import { CONSTANTS, IFeeds, IUser } from '@pushprotocol/restapi';
 import styled from 'styled-components';
 
 // Internal Compoonents
-import { getAddress, getNewChatUser, pCAIP10ToWallet, traceStackCalls, walletToPCAIP10 } from '../../../helpers';
+import {
+  getAddress,
+  getDomainIfExists,
+  getNewChatUser,
+  pCAIP10ToWallet,
+  traceStackCalls,
+  walletToPCAIP10,
+} from '../../../helpers';
 import { useChatData, usePushChatStream } from '../../../hooks';
 import useFetchChat from '../../../hooks/chat/useFetchChat';
 import useFetchMessageUtilities from '../../../hooks/chat/useFetchMessageUtilities';
@@ -609,7 +616,7 @@ export const ChatPreviewList: React.FC<IChatPreviewListProps> = (options: IChatP
           let userProfile: IUser | undefined = undefined;
           let groupProfile: Group;
 
-          if (formattedChatId.includes('.')) {
+          if (getDomainIfExists(formattedChatId)) {
             const address = await getAddress(formattedChatId, user ? user.env : CONSTANTS.ENV.PROD);
             if (address) formattedChatId = pCAIP10ToWallet(address);
             else {

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

@@ -1,33 +1,17 @@
 // React + Web3 Essentials
-import { ethers } from 'ethers';
 import React, { useContext, useEffect, useRef, useState } from 'react';
 
 // External Packages
-import { CONSTANTS, IFeeds, IUser } from '@pushprotocol/restapi';
 import styled from 'styled-components';
 
 // Internal Compoonents
-import {
-  deriveChatId,
-  getAddress,
-  getNewChatUser,
-  pCAIP10ToWallet,
-  traceStackCalls,
-  walletToPCAIP10,
-} from '../../../helpers';
-import { useChatData, usePushChatStream } from '../../../hooks';
+import { deriveChatId, getDomainIfExists, pCAIP10ToWallet } from '../../../helpers';
+import { useChatData } from '../../../hooks';
 import useFetchChat from '../../../hooks/chat/useFetchChat';
-import useFetchMessageUtilities from '../../../hooks/chat/useFetchMessageUtilities';
 import useGetGroupByIDnew from '../../../hooks/chat/useGetGroupByIDnew';
-import usePushUser from '../../../hooks/usePushUser';
 import { Button, Section, Span, Spinner } from '../../reusables';
 import { ChatPreview } from '../ChatPreview';
-import {
-  displayDefaultUser,
-  generateRandomNonce,
-  transformChatItems,
-  transformStreamToIChatPreviewPayload,
-} from '../helpers';
+import { generateRandomNonce, getChatParticipantDisplayName, transformStreamToIChatPreviewPayload } from '../helpers';
 
 // Internal Configs
 import { ThemeContext } from '../theme/ThemeProvider';
@@ -37,7 +21,6 @@ import { ThemeContext } from '../theme/ThemeProvider';
 // Interfaces & Types
 import {
   ChatPreviewSearchListErrorCodes,
-  Group,
   IChatPreviewSearchListError,
   IChatPreviewSearchListProps,
   IChatPreviewPayload,
@@ -73,7 +56,6 @@ interface IChatPreviewListMeta {
 }
 
 // Constants
-const CHAT_PAGE_LIMIT = 10;
 const SCROLL_LIMIT = 25;
 
 // Exported Interfaces & Types
@@ -82,9 +64,7 @@ const SCROLL_LIMIT = 25;
 export const ChatPreviewSearchList: React.FC<IChatPreviewSearchListProps> = (options: IChatPreviewSearchListProps) => {
   // get hooks
   const { user } = useChatData();
-  const { fetchUserProfile } = usePushUser();
   const { getGroupByIDnew } = useGetGroupByIDnew();
-  const { fetchLatestMessage, fetchChatList } = useFetchMessageUtilities();
 
   // set chat preview list
   const [chatPreviewList, setChatPreviewList] = useState<IChatPreviewList>({
@@ -192,7 +172,7 @@ export const ChatPreviewSearchList: React.FC<IChatPreviewSearchListProps> = (opt
       let derivedChatId = formattedChatId;
 
       // Check if the chatId is ENS / Web3 Name
-      if (formattedChatId.includes('.')) {
+      if (getDomainIfExists(formattedChatId)) {
         // resolve web3 name
         derivedChatId = await deriveChatId(formattedChatId, user);
       }
@@ -211,7 +191,6 @@ export const ChatPreviewSearchList: React.FC<IChatPreviewSearchListProps> = (opt
             const groupInfo = await getGroupByIDnew({
               groupId: derivedChatId,
             });
-
             if (groupInfo) {
               searchedChat = {
                 ...searchedChat,
@@ -230,19 +209,17 @@ export const ChatPreviewSearchList: React.FC<IChatPreviewSearchListProps> = (opt
           } else {
             const userProfile = await user?.info({ overrideAccount: chatInfo.recipient });
             console.debug('UIWeb::components::ChatPreviewSearchList::loadMoreChats::userProfile', userProfile);
-
             searchedChat = {
               ...searchedChat,
               chatId: derivedChatId,
-              chatParticipant: derivedChatId,
+              chatParticipant: getChatParticipantDisplayName(derivedChatId, formattedChatId),
               chatGroup: false,
               chatPic: userProfile?.profile?.picture || null,
               chatMsg: {
                 messageType: 'Text',
                 messageContent: chatInfo?.list === 'CHATS' ? 'Resume Chat!' : 'Start Chat!',
               },
             };
-
             resolved = true;
           }
         } else {
@@ -349,22 +326,6 @@ export const ChatPreviewSearchList: React.FC<IChatPreviewSearchListProps> = (opt
     });
   };
 
-  //Transform group creation stream
-  const transformGroupCreationStream: (item: any) => void = async (item: any) => {
-    const transformedItem: IChatPreviewPayload = {
-      chatId: item?.chatId,
-      chatPic: item?.meta.image,
-      chatParticipant: item?.meta.name,
-      chatGroup: true,
-      chatTimestamp: undefined,
-      chatMsg: {
-        messageType: '',
-        messageContent: '',
-      },
-    };
-    addChatItems([transformedItem], false);
-  };
-
   // Transform stream message
   const transformStreamMessage: (item: any) => void = async (item: any) => {
     if (!user) {

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

@@ -12,6 +12,7 @@ import styled from 'styled-components';
 import {
   deriveChatId,
   getAddress,
+  getDomainIfExists,
   pCAIP10ToWallet,
   resolveWeb3Name,
   shortenText,
@@ -166,6 +167,7 @@ export const ChatProfile: React.FC<IChatProfile> = ({
                 profile.abbrRecipient = getAbbreiatedRecipient(recipient);
                 profile.desc = profileInfo.profile?.desc;
                 profile.isGroup = false;
+                profile.web3Name = getDomainIfExists(chatId);
               } else {
                 throw new Error(
                   'UIWeb::ChatProfile::user.profile.info fetch error, possible push user does not exist.'
@@ -180,13 +182,14 @@ export const ChatProfile: React.FC<IChatProfile> = ({
               profile.icon = null;
               profile.chatId = derivedChatId;
               profile.recipient = recipient;
+              profile.web3Name = getDomainIfExists(chatId);
               profile.abbrRecipient = getAbbreiatedRecipient(recipient);
               profile.desc = '';
               profile.isGroup = false;
             }
 
             // get and set web3 name asynchrounously
-            if (profile.recipient) {
+            if (profile.recipient && !profile.web3Name) {
               setupWeb3Name(profile.recipient);
             }
           }

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

@@ -423,7 +423,6 @@ const GroupInformation = ({
         <Section
           borderRadius="16px"
           flexDirection="column"
-          gap="16px"
         >
           {groupMembers.loading ? (
             <Spinner
@@ -1014,7 +1013,7 @@ const GroupDescription = styled.div`
   gap: 5px;
 `;
 
-const PublicEncrypted = styled(Section)<{ alert?: boolean }>`
+const PublicEncrypted = styled(Section) <{ alert?: boolean }>`
   display: flex;
   flex-direction: row;
   width: 100%;
@@ -1040,7 +1039,7 @@ const AddWalletContainer = styled.div`
   align-items: center;
 `;
 
-const ConditionSection = styled(Section)<{ theme: IChatTheme }>`
+const ConditionSection = styled(Section) <{ theme: IChatTheme }>`
   &::-webkit-scrollbar-thumb {
     background: ${(props) => props.theme.scrollbarColor};
     border-radius: 10px;
@@ -1053,7 +1052,7 @@ const ConditionSection = styled(Section)<{ theme: IChatTheme }>`
   }
 `;
 
-const ScrollSection = styled(Section)<{ theme: IChatTheme }>`
+const ScrollSection = styled(Section) <{ theme: IChatTheme }>`
   &::-webkit-scrollbar-thumb {
     background: ${(props) => props.theme.scrollbarColor};
     border-radius: 10px;

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

@@ -105,11 +105,10 @@ export const PendingMembers = ({
         <ProfileSection
           flexDirection="column"
           flex="1"
-          maxHeight="10rem"
-          overflow="hidden auto"
           justifyContent="start"
           borderRadius="12px"
           theme={theme}
+          padding='10px 0 0 0'
         >
           {showPendingRequests &&
             pendingMembers &&
@@ -123,7 +122,7 @@ export const PendingMembers = ({
                     icon: item?.userInfo?.profile?.picture || null,
                     chatId: null,
                     web3Name: null,
-                    recipient: shortenText(pCAIP10ToWallet(item.address?.split(':')[1]), 6, true),
+                    recipient: pCAIP10ToWallet(item.address?.split(':')[1]),
                     abbrRecipient: shortenText(pCAIP10ToWallet(item.address?.split(':')[1]), 6, true),
                     desc: null,
                   }}
@@ -301,9 +300,8 @@ export const AcceptedMembers = ({
         flexDirection="column"
         zIndex="2"
         justifyContent="start"
-        overflow="hidden auto"
-        maxHeight="15rem"
         theme={theme}
+        padding='10px 0 0 0'
       >
         {acceptedMembers.map((item, index) => (
           <MemberProfileCard
@@ -313,8 +311,8 @@ export const AcceptedMembers = ({
               isAdmin(item) && accountStatus?.role === GROUP_ROLES.ADMIN.toLowerCase()
                 ? [removeAdminDropdown, removeMemberDropdown]
                 : accountStatus?.role === GROUP_ROLES.ADMIN.toLowerCase()
-                ? [addAdminDropdown, removeMemberDropdown]
-                : []
+                  ? [addAdminDropdown, removeMemberDropdown]
+                  : []
             }
             selectedMemberAddress={selectedMemberAddress}
             setSelectedMemberAddress={setSelectedMemberAddress}
@@ -371,11 +369,11 @@ const PendingSection = styled.div`
   align-items: center;
   flex: 1;
   cursor: pointer;
-  padding: 15px 20px;
+  padding: 15px 20px 5px 20px;
   box-sizing: border-box;
 `;
 
-const ArrowImage = styled(Image)<ShadowedProps>`
+const ArrowImage = styled(Image) <ShadowedProps>`
   margin-left: auto;
   transform: ${(props) => (props?.setPosition ? 'rotate(0)' : 'rotate(180deg)')};
 `;
@@ -390,7 +388,7 @@ const Badge = styled.div`
   font-weight: 700;
 `;
 
-const ProfileSection = styled(Section)<{ theme: IChatTheme }>`
+const ProfileSection = styled(Section) <{ theme: IChatTheme }>`
   height: fit-content;
   &::-webkit-scrollbar-thumb {
     background: transparent;

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

@@ -300,7 +300,7 @@ export const ChatViewList: React.FC<IChatViewListProps> = (options: IChatViewLis
     }
 
     return () => {
-      // add comment
+      //Empty return
     };
   }, [chatAcceptStream, participantJoinStream]);
 

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

@@ -6,7 +6,7 @@ import { createPortal } from 'react-dom';
 import { MdCheckCircle, MdError } from 'react-icons/md';
 import styled from 'styled-components';
 
-import { deriveChatId, pCAIP10ToWallet, setAccessControl, walletToPCAIP10 } from '../../../helpers';
+import { deriveChatId, getDomainIfExists, pCAIP10ToWallet, setAccessControl, walletToPCAIP10 } from '../../../helpers';
 import { useChatData, useClickAway, useDeviceWidthCheck, usePushChatStream } from '../../../hooks';
 import useFetchChat from '../../../hooks/chat/useFetchChat';
 import useGetGroupByIDnew from '../../../hooks/chat/useGetGroupByIDnew';
@@ -163,7 +163,7 @@ export const MessageInput: React.FC<MessageInputProps> = ({
       if (!user) return;
       if (chatId) {
         let derivedChatId = chatId;
-        if (derivedChatId.includes('.')) {
+        if (getDomainIfExists(derivedChatId)) {
           derivedChatId = (await deriveChatId(chatId, user))!;
         }
 

packages/uiweb/src/lib/components/chat/helpers/helper.ts

@@ -2,7 +2,7 @@ import { Env, IFeeds, IMessageIPFSWithCID, IUser, ParticipantStatus } from '@pus
 import { ethers } from 'ethers';
 import moment from 'moment';
 import { ProfilePicture } from '../../../config';
-import { getAddress, walletToPCAIP10 } from '../../../helpers';
+import { getAddress, getDomainIfExists, walletToPCAIP10 } from '../../../helpers';
 import { Group, IChatPreviewPayload, IMessagePayload, User } from '../exportedTypes';
 
 export const profilePicture = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAvklEQVR4AcXBsW2FMBiF0Y8r3GQb6jeBxRauYRpo4yGQkMd4A7kg7Z/GUfSKe8703fKDkTATZsJsrr0RlZSJ9r4RLayMvLmJjnQS1d6IhJkwE2bT13U/DBzp5BN73xgRZsJMmM1HOolqb/yWiWpvjJSUiRZWopIykTATZsJs5g+1N6KSMiO1N/5DmAkzYTa9Lh6MhJkwE2ZzSZlo7xvRwson3txERzqJhJkwE2bT6+JhoKTMJ2pvjAgzYSbMfgDlXixqjH6gRgAAAABJRU5ErkJggg==`;
@@ -108,8 +108,6 @@ export const formatAddress = async (chatPreviewPayload: IChatPreviewPayload, env
     // check and remove eip155:
     if (formattedAddress.includes('eip155:')) {
       formattedAddress = formattedAddress.replace('eip155:', '');
-    } else if (formattedAddress.includes('.')) {
-      formattedAddress = (await getAddress(formattedAddress, env))!;
     }
   }
 
@@ -228,3 +226,7 @@ export const transformStreamToIMessageIPFSWithCID: (item: any) => IMessageIPFSWi
   };
   return transformedItem;
 };
+
+export const getChatParticipantDisplayName = (derivedChatId: string, chatId: string) => {
+  return derivedChatId ? getDomainIfExists(chatId) ?? derivedChatId : derivedChatId;
+};