Main Release 1.3.7 - Build error fixed

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')}
       />

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>

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';

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",

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>

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`

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')};
 `;

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>

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);
       }

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,

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'}

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
 };

packages/uiweb/src/lib/components/notification/chainDetails.tsx

@@ -12,9 +12,7 @@ import { TheGraphSvg } from '../../icons/TheGraphSvg';
 import LineaSVG from '../../icons/LineaSVG';
 import { CyberConnectSVG } from '../../icons/CyberConnectSVG';
 const createSVGIcon = (element: any, chainName: string) => {
-  return (
-    <Tooltip tooltipContent={`Delivered by ${chainName}`}>{element}</Tooltip>
-  );
+  return <Tooltip tooltipContent={`Delivered by ${chainName}`}>{element}</Tooltip>;
 };
 
 export default {
@@ -84,21 +82,21 @@ export default {
   BERACHAIN_TESTNET: {
     label: 'BERACHAIN TESTNET',
     icon: createSVGIcon(<BerachainSVG />, 'Berachain Testnet'),
-  }, 
+  },
   CYBER_CONNECT_TESTNET: {
     label: 'CYBER CONNECT TESTNET',
-    icon: createSVGIcon(<CyberConnectSVG/>, 'CyberConnect Testnet'),
+    icon: createSVGIcon(<CyberConnectSVG />, 'CyberConnect Testnet'),
   },
-  LINEA_TESTNET : {
+  LINEA_TESTNET: {
     label: 'LINEA TESTNET',
-    icon: createSVGIcon(<LineaSVG/>, 'Linea Testnet'),
+    icon: createSVGIcon(<LineaSVG />, 'Linea Testnet'),
   },
-  LIENA_MAINNET : {
-    label: 'LIENA MAINNET',
-    icon: createSVGIcon(<LineaSVG/>, 'Linea Mainnet'),
+  LINEA_MAINNET: {
+    label: 'LINEA MAINNET',
+    icon: createSVGIcon(<LineaSVG />, 'Linea Mainnet'),
   },
   CYBER_CONNECT_MAINNET: {
     label: 'CYBER CONNECT MAINNET',
-    icon: createSVGIcon(<CyberConnectSVG/>, 'CyberConnect Mainnet'),
-  }
+    icon: createSVGIcon(<CyberConnectSVG />, 'CyberConnect Mainnet'),
+  },
 };