Main Release 1.3.7 (#1334)

* fixed chat responsiveness * fixed preview link alignment to right * added relative imports for better management * Search issue (#1270) * fix: fixed lint issues * fix: added test for chat preview search list * fix: fixed review comment * Update ChatPreviewSearchList.tsx * fix: fixed support chat init issue (#1292) * fix: fixed support chat init issue * fix: fixed lint errors * fix(chatviewlist): increase hidden/encrypted chat blur fix #1307 * Added Reaction support, (#1303) * Fixed responsiveness in mobile for UIWeb:Chat * fixes text alignment on frames preview link to come on right * scroll bar fixes * fixed reaction picker position, tweaked group type text, removed add button from define conditions in gated group * removed unnecessary console.debug * removed unnecessary console.debug * Resolved comments, fixed curved edges go away, fixed correct time placement in ChatBubble * Resolved comments * fix: add selected option * fix: add return fn * fix: add comment to fn * fix: add push bot address * fix: export const * fix: reset chat_id * fix: remove console * fix: update dark mode theme * fix: code review comments * fix: add null check * fix: update conditions * fix: update chatprevie badge conditions * Space - id integration (#1322) * feat: integrating spaceid in uiweb * fix: fixed project id setting error * fix: removed unnecessary code * fix: added space id * Update AddWallets.tsx * fix: made some optimisations * fix: fixed lint issues --------- Co-authored-by: KlausMikhaelson <[email protected]> * fix: fixed the blurr issue in chat on join and accept group (#1305) * fix: fixed lint issue --------- Co-authored-by: harshrajat <[email protected]> Co-authored-by: Harsh | Push <[email protected]> Co-authored-by: Monalisha Mishra <[email protected]> Co-authored-by: Mohammed S <[email protected]> Co-authored-by: corlard3y <[email protected]> Co-authored-by: KlausMikhaelson <[email protected]> Co-authored-by: Monalisha Mishra <[email protected]>
push-protocol · May 31, 2024 · 66647f0 · 66647f0
1 parent d51dda2
commit 66647f0
Show file tree

Hide file tree

Showing 21 changed files with 512 additions and 437 deletions.
diff --git a/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatPreview.tsx b/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatPreview.tsx
@@ -55,7 +55,7 @@ const ChatPreviewTest = () => {
               "Well, hello there, human! It's a pleasure to be in the presence of such a sophisticated carbon-based life form. How can I assist you today? Or perhaps you just want to chat and bask in the glory of my witty remarks? Either way, I'm here for you!",
           },
         }}
-        badge={{ count: 1 }}
+        badge={{ count: 2 }}
         selected={false}
         setSelected={console.log('Selected')}
       />

diff --git a/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatPreviewSearchList.tsx b/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatPreviewSearchList.tsx
@@ -2,7 +2,7 @@ import { ChatPreviewSearchList } from '@pushprotocol/uiweb';
 import styled from 'styled-components';
 
 const ChatPreviewSearchListTest = () => {
-  const walletAddress = "0xFA3F8E79fb9B03e7a04295594785b91588Aa4DC8";
+  const walletAddress = 'fabio.eth';
   return (
     <>
       <Conatiner>

diff --git a/packages/examples/sdk-frontend-react/src/app/constants.ts b/packages/examples/sdk-frontend-react/src/app/constants.ts
@@ -1,3 +1,2 @@
 // the unique id for a chat or the receivers's wallet ddress or domain name
-export const CHAT_ID =
-  '34c44214589cecc176a136ee1daf0f0231ecc6d6574b920b5ae39eb971fa3cb4';
+export const CHAT_ID = 'allen.bnb';
diff --git a/packages/uiweb/package.json b/packages/uiweb/package.json
@@ -10,6 +10,7 @@
     "@livepeer/react": "^2.6.0",
     "@pushprotocol/socket": "^0.5.0",
     "@unstoppabledomains/resolution": "^8.5.0",
+    "@web3-name-sdk/core": "^0.1.15",
     "@web3-onboard/coinbase": "^2.2.5",
     "@web3-onboard/core": "^2.21.1",
     "@web3-onboard/injected-wallets": "^2.10.5",

diff --git a/packages/uiweb/src/lib/components/chat/ChatPreview/ChatPreview.tsx b/packages/uiweb/src/lib/components/chat/ChatPreview/ChatPreview.tsx
@@ -17,6 +17,7 @@ import { pCAIP10ToWallet } from '../../../helpers';
 import { createBlockie } from '../../../helpers/blockies';
 import { IChatTheme } from '../theme';
 import { ThemeContext } from '../theme/ThemeProvider';
+import { pushBotAddress } from '../../../config/constants';
 /**
  * @interface IThemeProps
  * this interface is used for defining the props for styled components
@@ -41,7 +42,7 @@ export const ChatPreview: React.FC<IChatPreviewProps> = (options: IChatPreviewPr
       setFormattedAddress(address);
       if (!options.chatPreviewPayload?.chatGroup) {
         try {
-          const result = await resolveWeb3Name(address, user);
+          const result = await resolveWeb3Name(address, user?.env);
           if (result) setWeb3Name(result);
         } catch (e) {
           // console.debug(e);
@@ -50,6 +51,10 @@ export const ChatPreview: React.FC<IChatPreviewProps> = (options: IChatPreviewPr
     })();
   }, []);
 
+  const hasBadgeCount = !!options?.badge?.count;
+  const isSelected = options?.selected;
+  const isBot =  options?.chatPreviewPayload?.chatParticipant === "PushBot" || options?.chatPreviewPayload?.chatParticipant === pushBotAddress;
+
   // For blockie if icon is missing
   const blockieContainerRef = useRef<HTMLDivElement>(null);
 
@@ -159,6 +164,7 @@ export const ChatPreview: React.FC<IChatPreviewProps> = (options: IChatPreviewPr
             flex="initial"
             cursor="pointer"
             className={options.readmode ? 'skeleton' : ''}
+            animation={theme.skeletonBG}
           >
             <Message theme={theme}>
               {options?.chatPreviewPayload?.chatMsg?.messageType === 'Image' ||
@@ -193,8 +199,9 @@ export const ChatPreview: React.FC<IChatPreviewProps> = (options: IChatPreviewPr
                 options?.chatPreviewPayload?.chatMsg?.messageContent
               )}
             </Message>
-            {!!options?.badge?.count && <Badge theme={theme}>{options.badge.count}</Badge>}
-          </Section>
+
+            {hasBadgeCount && !(isBot || (isSelected && hasBadgeCount)) && <Badge theme={theme}>{options.badge?.count}</Badge>}
+          </Section>                  
         </Section>
       </Button>
     </ChatPreviewContainer>

diff --git a/packages/uiweb/src/lib/components/chat/ChatProfile/ChatProfile.tsx b/packages/uiweb/src/lib/components/chat/ChatProfile/ChatProfile.tsx
@@ -93,7 +93,7 @@ export const ChatProfile: React.FC<IChatProfile> = ({
   // To setup web3 name, asynchrounously
   const setupWeb3Name = async (address: string) => {
     console.debug('UIWeb::ChatProfile::setupWeb3Name sending address for resolution', address);
-    const result = await resolveWeb3Name(address, user);
+    const result = await resolveWeb3Name(address, user?.env);
     console.debug('UIWeb::ChatProfile::setupWeb3Name got result as ', address, result);
 
     setInitialized((prevState) => ({
@@ -372,7 +372,7 @@ const AddonComponentSection = styled(Section)`
 
   @media ${device.mobileL} {
     gap: 5px;
-  } ;
+  }
 `;
 
 const ImageItem = styled.div`

diff --git a/packages/uiweb/src/lib/components/chat/ChatViewList/ChatViewList.tsx b/packages/uiweb/src/lib/components/chat/ChatViewList/ChatViewList.tsx
@@ -280,10 +280,16 @@ export const ChatViewList: React.FC<IChatViewListProps> = (options: IChatViewLis
 
   // Change listtype to 'CHATS' and hidden to false when chatAcceptStream is received
   useEffect(() => {
-    if (Object.keys(chatAcceptStream || {}).length > 0 && chatAcceptStream.constructor === Object) {
+    if (
+      (Object.keys(chatAcceptStream || {}).length > 0 && chatAcceptStream.constructor === Object) ||
+      (Object.keys(participantJoinStream || {}).length > 0 && participantJoinStream.constructor === Object)
+    ) {
       // Always change hidden to false and list will be CHATS
       const updatedChatInfo = { ...(initialized.chatInfo as IChatInfoResponse) };
-      if (updatedChatInfo) updatedChatInfo.list = 'CHATS';
+      if (updatedChatInfo) {
+        updatedChatInfo.list = 'CHATS';
+        if (updatedChatInfo?.meta) updatedChatInfo.meta.visibility = true;
+      }
 
       // set initialized after chat accept animation is done
       const timer = setTimeout(() => {
@@ -293,15 +299,23 @@ export const ChatViewList: React.FC<IChatViewListProps> = (options: IChatViewLis
       return () => clearTimeout(timer);
     }
 
-    return () => {};
+    return () => {
+      // add comment
+    };
   }, [chatAcceptStream, participantJoinStream]);
 
   // Change listtype to 'UINITIALIZED' and hidden to true when participantRemoveStream or participantLeaveStream is received
   useEffect(() => {
-    if (Object.keys(participantRemoveStream || {}).length > 0 && participantRemoveStream.constructor === Object) {
+    if (
+      (Object.keys(participantRemoveStream || {}).length > 0 && participantRemoveStream.constructor === Object) ||
+      (Object.keys(participantLeaveStream || {}).length > 0 && participantLeaveStream.constructor === Object)
+    ) {
       // If not encrypted, then set hidden to false
       const updatedChatInfo = { ...(initialized.chatInfo as IChatInfoResponse) };
-      if (updatedChatInfo) updatedChatInfo.list = 'UNINITIALIZED';
+      if (updatedChatInfo) {
+        updatedChatInfo.list = 'UNINITIALIZED';
+        if (updatedChatInfo?.meta) updatedChatInfo.meta.visibility = false;
+      }
 
       setInitialized({ ...initialized, chatInfo: updatedChatInfo, isHidden: true });
     }
@@ -514,7 +528,7 @@ export const ChatViewList: React.FC<IChatViewListProps> = (options: IChatViewLis
               justifyContent="start"
               width="100%"
               ref={chatContainerRef}
-              blur={initialized.isHidden}
+              blur={initialized.isHidden && initialized?.chatInfo?.list !== 'REQUESTS'}
             >
               {messages &&
                 messages?.map((chat: IMessageIPFS, index: number) => {
@@ -585,5 +599,5 @@ const ChatViewListCard = styled(Section)<IThemeProps>`
 `;
 
 const ChatViewListCardInner = styled(Section)<IThemeProps>`
-  filter: ${(props) => (props.blur ? 'blur(6px)' : 'none')};
+  filter: ${(props) => (props.blur ? 'blur(12px)' : 'none')};
 `;
diff --git a/packages/uiweb/src/lib/components/chat/ChatViewList/MessageEncryption.tsx b/packages/uiweb/src/lib/components/chat/ChatViewList/MessageEncryption.tsx
@@ -68,6 +68,7 @@ export const EncryptionMessage = ({ id, className }: { id: EncryptionKeys; class
           fontWeight="400"
           textAlign="left"
           className={className}
+          animation={theme.skeletonBG}
         >
           {EncryptionMessageContent[id].text}
         </Span>

diff --git a/packages/uiweb/src/lib/components/chat/UserProfile/UserProfile.tsx b/packages/uiweb/src/lib/components/chat/UserProfile/UserProfile.tsx
@@ -1,7 +1,7 @@
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 
-import { IUser } from '@pushprotocol/restapi';
+import { IUser, CONSTANTS } from '@pushprotocol/restapi';
 import { ethers } from 'ethers';
 import styled from 'styled-components';
 
@@ -15,7 +15,7 @@ import { ProfileContainer } from '../reusables';
 import { ThemeContext } from '../theme/ThemeProvider';
 import { UpdateUserProfileModal } from './UpdateUserProfileModal';
 
-import { CoreContractChainId, InfuraAPIKey, ProfilePicture, device } from '../../../config';
+import { Constants, CoreContractChainId, InfuraAPIKey, ProfilePicture, device } from '../../../config';
 import VerticalEllipsisIcon from '../../../icons/VerticalEllipsis.svg';
 import UserProfileIcon from '../../../icons/userCircleGear.svg';
 import { MODAL_BACKGROUND_TYPE, MODAL_POSITION_TYPE } from '../../../types';
@@ -50,7 +50,7 @@ export const UserProfile: React.FC<UserProfileProps> = ({
     (async () => {
       const fetchedUser = await fetchChatProfile({ user });
       if (fetchedUser) {
-        const result = await resolveWeb3Name(fetchedUser?.wallets, user);
+        const result = await resolveWeb3Name(fetchedUser?.wallets, user?.env);
         setWeb3Name(result);
         setUserProfile(fetchedUser);
       }

diff --git a/packages/uiweb/src/lib/components/chat/reusables/AddWallets.tsx b/packages/uiweb/src/lib/components/chat/reusables/AddWallets.tsx
@@ -62,7 +62,6 @@ export const AddWallets = ({
   };
 
   const handleSearch = async ({ searchedText }: { searchedText: string }): Promise<void> => {
-    //fix ens search
     const newChatUser = await getNewChatUser({
       searchText: searchedText,
       fetchChatProfile: fetchUserProfile,

diff --git a/packages/uiweb/src/lib/components/chat/reusables/ProfileContainer.tsx b/packages/uiweb/src/lib/components/chat/reusables/ProfileContainer.tsx
@@ -73,6 +73,7 @@ export const ProfileContainer = ({ theme, member, copy, customStyle, loading }:
         borderRadius="100%"
         overflow="hidden"
         className={loading ? 'skeleton' : ''}
+        animation={theme.skeletonBG}
       >
         {member?.icon && (
           <Image
@@ -131,6 +132,7 @@ export const ProfileContainer = ({ theme, member, copy, customStyle, loading }:
                 setCopyText('Copied');
               }}
               className={loading ? 'skeleton' : ''}
+              animation={theme.skeletonBG}
             >
               <RecipientSpan
                 fontSize={member?.name || member?.web3Name ? '14px' : customStyle?.fontSize ?? '18px'}

diff --git a/packages/uiweb/src/lib/components/chat/theme/index.ts b/packages/uiweb/src/lib/components/chat/theme/index.ts
@@ -2,6 +2,7 @@
  * @file theme file: all the predefined themes are defined here
  */
 import { CHAT_THEME_OPTIONS } from '../exportedTypes';
+import styled, { keyframes, css } from 'styled-components';
 // bgColorPrimary: "#fff",
 //   bgColorSecondary: "#D53A94",
 //   textColorPrimary: "#1e1e1e",
@@ -191,10 +192,38 @@ export interface IChatTheme {
   textColor?: ITextColor;
   backdropFilter?: string;
   scrollbarColor?: string;
-
+  skeletonBG?: any;
   spinnerColor?: string;
 }
 
+const lightSkeletonLoading = keyframes`
+  0% {
+    background-color: hsl(200, 20%, 80%);
+  }
+  100% {
+    background-color: hsl(200, 20%, 95%);
+  }
+`;
+
+const darkSkeletonLoading = keyframes`
+  0% {
+    background-color: #575D73;
+  }
+  100% {
+    background-color: #6E748B;
+  }
+`;
+
+const animation = () =>
+  css`
+    ${lightSkeletonLoading} 1s linear infinite alternate;
+`;
+
+const darkAnimation = () =>
+  css`
+    ${darkSkeletonLoading} 1s linear infinite alternate;
+`;
+
 //dark theme object
 export const lightChatTheme: IChatTheme = {
   borderRadius: {
@@ -368,6 +397,7 @@ export const lightChatTheme: IChatTheme = {
   backdropFilter: 'none',
   spinnerColor: 'rgb(202, 89, 155)',
   scrollbarColor: 'rgb(202, 89, 155)',
+  skeletonBG: animation
 };
 
 export const darkChatTheme: IChatTheme = {
@@ -541,4 +571,5 @@ export const darkChatTheme: IChatTheme = {
   backdropFilter: 'none',
   spinnerColor: 'rgb(202, 89, 155)',
   scrollbarColor: 'rgb(202, 89, 155)',
+  skeletonBG: darkAnimation
 };
diff --git a/packages/uiweb/src/lib/components/reusables/sharedStyling.tsx b/packages/uiweb/src/lib/components/reusables/sharedStyling.tsx
@@ -1,14 +1,4 @@
-import styled, { keyframes } from 'styled-components';
-
-// Define keyframes
-const skeletonLoading = keyframes`
-  0% {
-    background-color: hsl(200, 20%, 80%);
-  }
-  100% {
-    background-color: hsl(200, 20%, 95%);
-  }
-`;
+import styled from 'styled-components';
 
 // Define types and export components
 type SectionStyleProps = {
@@ -45,6 +35,7 @@ type SectionStyleProps = {
   visibility?: string;
   zIndex?: string;
   fontSize?: string;
+  animation?: string;
 };
 
 export const Section = styled.div<SectionStyleProps>`
@@ -84,7 +75,7 @@ export const Section = styled.div<SectionStyleProps>`
 
   &.skeleton {
     > * {
-      visibility: ${(props) => (props.visibility || skeletonLoading ? 'hidden' : 'visible')};
+      visibility: ${(props) => (props.visibility || props.animation ? 'hidden' : 'visible')};
     }
 
     &:after {
@@ -95,7 +86,7 @@ export const Section = styled.div<SectionStyleProps>`
       left: 0;
       right: 0;
       z-index: 1;
-      animation: ${skeletonLoading} 1s linear infinite alternate;
+      animation: ${(props) => props.animation};
       border-radius: 8px;
     }
   }
@@ -112,6 +103,7 @@ type DivStyleProps = {
   borderRadius?: string;
   textAlign?: string;
   visibility?: string;
+  animation?: string;
 };
 export const Div = styled.div<DivStyleProps>`
   height: ${(props) => props.height || 'auto'};
@@ -126,7 +118,7 @@ export const Div = styled.div<DivStyleProps>`
 
   &.skeleton {
     > * {
-      visibility: ${(props) => (props.visibility || skeletonLoading ? 'hidden' : 'visible')};
+      visibility: ${(props) => (props.visibility || props.animation ? 'hidden' : 'visible')};
     }
 
     &:after {
@@ -138,7 +130,7 @@ export const Div = styled.div<DivStyleProps>`
       right: 0;
       opacity: 1;
       z-index: 1;
-      animation: ${skeletonLoading} 1s linear infinite alternate;
+      animation: ${(props) => props.animation};
       border-radius: 8px;
     }
   }
@@ -170,6 +162,7 @@ type SpanStyleProps = {
   whiteSpace?: string;
   visibility?: string;
   textWrap?: string;
+  animation?: string;
 };
 
 export const Span = styled.span<SpanStyleProps>`
@@ -201,7 +194,7 @@ export const Span = styled.span<SpanStyleProps>`
 
   &.skeleton {
     > * {
-      visibility: ${(props) => (props.visibility || skeletonLoading ? 'hidden' : 'visible')};
+      visibility: ${(props) => (props.visibility || props.animation ? 'hidden' : 'visible')};
     }
 
     &:after {
@@ -213,7 +206,7 @@ export const Span = styled.span<SpanStyleProps>`
       right: 0;
       opacity: 1;
       z-index: 1;
-      animation: ${skeletonLoading} 1s linear infinite alternate;
+      animation: ${(props) => props.animation};
       border-radius: 8px;
     }
   }