Group fixes (#1182)

* fix: fixed group minor issues

* fix: fixed group fiex

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

@@ -158,7 +158,7 @@ const ChatPreviewListTest = () => {
             onLoading={(loadingData) => { console.log("loading data: ", loadingData) }}
             onPaging={(chats) => { console.log("paging chats are: ", chats) }}
             onPreload={(chats) => { console.log("preload chats are: ", chats) }}
-            prefillChatPreviewList={prefill}
+            // prefillChatPreviewList={prefill}
           // listType='SEARCH'
           // searchParamter='0x56A734ba4C7c7b117774C9aAcCEf521eBE66d65b'
         />

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

@@ -7,7 +7,7 @@ export const ChatProfileTest = () => {
             <ChatProfile 
                 chatProfileLeftHelperComponent={<div>left component</div>}
                 chatProfileRightHelperComponent={<div>right component</div>}
-                chatId='monalisha.wallet'
+                chatId='4ac5ab85c9c3d57adbdf2dba79357e56b2f9ef0256befe750d9f93af78d2ca68'
 // chatId='36baf37e441fdd94e23406c6c716fc4e91a93a9ee68e070cd5b054534dbe09a6'
             />
         </div>

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

@@ -99,7 +99,7 @@ export const ChatPreviewList: React.FC<IChatPreviewListProps> = (
   // set ref
   const listInnerRef = useRef<HTMLDivElement>(null);
 
-  const { chatStream, chatRequestStream, chatAcceptStream } =
+  const { chatStream, chatRequestStream, chatAcceptStream, groupCreateStream } =
     usePushChatStream();
   // Helper Functions
 
@@ -151,6 +151,23 @@ export const ChatPreviewList: React.FC<IChatPreviewListProps> = (
     });
   };
 
+  //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]);
+  }
+
+
   // Transform stream message
   const transformStreamMessage: (item: any) => void = async (item: any) => {
     if (!user) {
@@ -566,6 +583,18 @@ export const ChatPreviewList: React.FC<IChatPreviewListProps> = (
       }
     }
   }, [chatStream]);
+
+  useEffect(() => {
+    if (
+      Object.keys(groupCreateStream).length > 0 &&
+      groupCreateStream.constructor === Object
+    ) {
+      if (options.listType === CONSTANTS.CHAT.LIST_TYPE.CHATS) {
+        transformGroupCreationStream(groupCreateStream);
+      }
+    }
+  }, [groupCreateStream]);
+
   useEffect(() => {
     if (
       Object.keys(chatRequestStream).length > 0 &&

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

@@ -449,6 +449,7 @@ const GroupInformation = ({
                 />
               )}
             <AcceptedMembers
+              theme={theme}
               acceptedMemberPaginationData={acceptedMemberPaginationData}
               setAcceptedMemberPaginationData={setAcceptedMemberPaginationData}
               acceptedMembers={groupMembers?.accepted}

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

@@ -44,6 +44,7 @@ type AcceptedMembersProps = {
   >;
   acceptedMembers: ChatMemberProfile[];
   chatId: string;
+  theme: IChatTheme;
 };
 
 const UPDATE_KEYS = {
@@ -89,7 +90,6 @@ export const PendingMembers = ({
     }));
     // eslint-disable-next-line no-use-before-define
   }, [isInViewportPending]);
-
   if (pendingMembers && pendingMembers.length) {
     return (
       <PendingRequestWrapper theme={theme}>
@@ -115,7 +115,8 @@ export const PendingMembers = ({
           maxHeight="10rem"
           overflow="hidden auto"
           justifyContent="start"
-          borderRadius="16px"
+          borderRadius="12px"
+          theme={theme}
         >
           {showPendingRequests &&
             pendingMembers &&
@@ -143,7 +144,7 @@ export const PendingMembers = ({
             ))}
           {pendingMemberPaginationData.loading && (
             <Section>
-              <Spinner size="20" />
+              <Spinner size="20" color={theme.spinnerColor}/>
             </Section>
           )}
           <div ref={pendingMemberPageRef} style={{ padding: '1px' }}></div>
@@ -160,6 +161,7 @@ export const AcceptedMembers = ({
   setAcceptedMemberPaginationData,
   acceptedMemberPaginationData,
   chatId,
+  theme,
 }: AcceptedMembersProps) => {
   const { account } = useChatData();
   const acceptedMemberPageRef = useRef<HTMLDivElement>(null);
@@ -302,7 +304,6 @@ export const AcceptedMembers = ({
   };
 
   useClickAway(dropdownRef, () => setSelectedMemberAddress(null));
-  console.debug(acceptedMembers);
   if (acceptedMembers && acceptedMembers.length) {
     return (
       <ProfileSection
@@ -311,6 +312,7 @@ export const AcceptedMembers = ({
         justifyContent="start"
         overflow="hidden auto"
         maxHeight="15rem"
+        theme={theme}
       >
         {acceptedMembers.map((item, index) => (
           <MemberProfileCard
@@ -332,7 +334,7 @@ export const AcceptedMembers = ({
         <div ref={acceptedMemberPageRef} style={{ padding: '1px' }}></div>
         {acceptedMemberPaginationData.loading && (
           <Section>
-            <Spinner size="20" />
+            <Spinner size="20" color={theme.spinnerColor} />
           </Section>
         )}
       </ProfileSection>
@@ -393,6 +395,16 @@ const Badge = styled.div`
   font-weight: 700;
 `;
 
-const ProfileSection = styled(Section)`
+const ProfileSection = styled(Section)<{ theme: IChatTheme }>`
   height: fit-content;
+  &::-webkit-scrollbar-thumb {
+    background: transparent;
+    border-radius: 10px;
+  }
+  &::-webkit-scrollbar-button {
+    height: 20px;
+  }
+  &::-webkit-scrollbar {
+    width: 0px;
+  }
 `;

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

@@ -15,13 +15,17 @@ import useChatProfile from '../../../hooks/chat/useChatProfile';
 import { useClickAway } from '../../../hooks';
 import { UpdateUserProfileModal } from './UpdateUserProfileModal';
 
-import { CoreContractChainId, InfuraAPIKey, ProfilePicture, device } from '../../../config';
+import {
+  CoreContractChainId,
+  InfuraAPIKey,
+  ProfilePicture,
+  device,
+} from '../../../config';
 import VerticalEllipsisIcon from '../../../icons/VerticalEllipsis.svg';
 import UserProfileIcon from '../../../icons/userCircleGear.svg';
 import { IChatTheme, UserProfileProps } from '../exportedTypes';
 import { MODAL_BACKGROUND_TYPE, MODAL_POSITION_TYPE } from '../../../types';
 
-
 /**
  * @interface IThemeProps
  * this interface is used for defining the props for styled components
@@ -30,35 +34,34 @@ interface IThemeProps {
   theme?: IChatTheme;
 }
 
-export const UserProfile : React.FC<UserProfileProps> = ({
+export const UserProfile: React.FC<UserProfileProps> = ({
   updateUserProfileModalBackground = MODAL_BACKGROUND_TYPE.OVERLAY,
-  updateUserProfileModalPositionType = MODAL_POSITION_TYPE.GLOBAL
+  updateUserProfileModalPositionType = MODAL_POSITION_TYPE.GLOBAL,
 }) => {
-  const {  account, user ,env} = useChatData();
+  const { account, user, env } = useChatData();
   const [userProfile, setUserProfile] = useState<IUser>();
-  const [web3Name,setWeb3Name] = useState<string|null>(null);
+  const [web3Name, setWeb3Name] = useState<string | null>(null);
   const [options, setOptions] = useState<boolean>();
-  const [showUpdateUserProfileModal,setShowUpdateUserProfileModal] = useState<boolean>(false);
+  const [showUpdateUserProfileModal, setShowUpdateUserProfileModal] =
+    useState<boolean>(false);
   const DropdownRef = useRef(null);
   const provider = new ethers.providers.InfuraProvider(
     CoreContractChainId[env],
     InfuraAPIKey
   );
 
-
   const theme = useContext(ThemeContext);
   const { fetchChatProfile } = useChatProfile();
 
   const isMobile = useMediaQuery(device.mobileL);
 
   useEffect(() => {
     (async () => {
-      const fetchedUser = await fetchChatProfile({user});
+      const fetchedUser = await fetchChatProfile({ user });
       if (fetchedUser) {
         const result = await resolveNewEns(fetchedUser?.wallets, provider, env);
         setWeb3Name(result);
         setUserProfile(fetchedUser);
-
       }
     })();
   }, [account, user]);
@@ -68,86 +71,91 @@ export const UserProfile : React.FC<UserProfileProps> = ({
 
   return (
     <>
-    <Conatiner
-      height="inherit"
-      justifyContent="space-between"
-      overflow="hidden"
-      width='100%'
-      padding="14px 10px"
-      borderRadius={theme?.borderRadius?.userProfile}
-      background={theme?.backgroundColor?.userProfileBackground}
-      theme={theme}
-    >
-      <ProfileContainer
+      <Conatiner
+        height="inherit"
+        justifyContent="space-between"
+        overflow="hidden"
+        width="100%"
+        padding="14px 10px"
+        borderRadius={theme?.borderRadius?.userProfile}
+        background={theme?.backgroundColor?.userProfileBackground}
         theme={theme}
-        member={{
-          wallet: shortenText(account || '', 8, true) as string,
-          image: userProfile?.profile?.picture || ProfilePicture,
-          web3Name: web3Name ,
-          completeWallet:account
-        }}
-        copy={true}
-        customStyle={{ fontSize: theme?.fontSize?.userProfileText,
-          fontWeight: theme?.fontWeight?.userProfileText,
-           textColor: theme?.textColor?.userProfileText}}
-      />
-      {userProfile && (
-        <Section>
-          <Image
-            src={VerticalEllipsisIcon}
-            height="21px"
-            maxHeight="21px"
-            color={theme?.iconColor?.userProfileSettings}
-            width={'auto'}
-            cursor="pointer"
-            onClick={() => setOptions(true)}
-          />
-
-        </Section>
-      )}
-       {options && (
-            <DropDownBar theme={theme} ref={DropdownRef} onClick={()=>setShowUpdateUserProfileModal(true)}>
-              <DropDownItem cursor="pointer" >
-                <Image
-                  src={UserProfileIcon}
-                  height="32px"
-                  maxHeight="32px"
-                  width={'auto'}
-                  cursor="pointer"
-                />
-
-                <TextItem cursor="pointer" >Edit Profile</TextItem>
-              </DropDownItem>
-            </DropDownBar>
-          )}
-           {showUpdateUserProfileModal && (
-            <UpdateUserProfileModal
-              theme={theme}
-              setModal={setShowUpdateUserProfileModal}
-              userProfile={userProfile!}
-              setUserProfile = {setUserProfile}
-              updateUserProfileModalBackground={updateUserProfileModalBackground}
-              updateUserProfileModalPositionType={updateUserProfileModalPositionType}
+      >
+        <ProfileContainer
+          theme={theme}
+          member={{
+            wallet: shortenText(account || '', 8, true) as string,
+            image: userProfile?.profile?.picture || ProfilePicture,
+            web3Name: web3Name,
+            completeWallet: account,
+          }}
+          copy={true}
+          customStyle={{
+            fontSize: theme?.fontSize?.userProfileText,
+            fontWeight: theme?.fontWeight?.userProfileText,
+            textColor: theme?.textColor?.userProfileText,
+          }}
+        />
+        {userProfile && (
+          <Section>
+            <Image
+              src={VerticalEllipsisIcon}
+              height="21px"
+              maxHeight="21px"
+              color={theme?.iconColor?.userProfileSettings}
+              width={'auto'}
+              cursor="pointer"
+              onClick={() => setOptions(true)}
             />
-          )}
-
-    </Conatiner>
-     <ToastContainer />
-     </>
+          </Section>
+        )}
+        {options && (
+          <DropDownBar
+            theme={theme}
+            ref={DropdownRef}
+            onClick={() => setShowUpdateUserProfileModal(true)}
+          >
+            <DropDownItem cursor="pointer">
+              <Image
+                src={UserProfileIcon}
+                height="32px"
+                maxHeight="32px"
+                width={'auto'}
+                cursor="pointer"
+              />
+
+              <TextItem cursor="pointer">Edit Profile</TextItem>
+            </DropDownItem>
+          </DropDownBar>
+        )}
+        {showUpdateUserProfileModal && (
+          <UpdateUserProfileModal
+            theme={theme}
+            setModal={setShowUpdateUserProfileModal}
+            userProfile={userProfile!}
+            setUserProfile={setUserProfile}
+            updateUserProfileModalBackground={updateUserProfileModalBackground}
+            updateUserProfileModalPositionType={
+              updateUserProfileModalPositionType
+            }
+          />
+        )}
+      </Conatiner>
+      <ToastContainer />
+    </>
   );
 };
 
 //styles
 const Conatiner = styled(Section)<IThemeProps>`
   border: ${(props) => props.theme.border?.userProfile};
   box-sizing: border-box;
-
 `;
 
 const DropDownBar = styled.div`
   position: absolute;
-  bottom: 40px;
-  right:20px;
+  bottom: 13px;
+  right: 29px;
   cursor: pointer;
   display: block;
   min-width: 170px;
@@ -170,4 +178,4 @@ const DropDownItem = styled(Span)`
 const TextItem = styled(Span)`
   white-space: nowrap;
   overflow: hidden;
-`;
+`;