Merge branch 'alpha' into SDK-1310-space-id

push-protocol · May 29, 2024 · a7a49ff · a7a49ff
2 parents b37d3bc + 06254e6
commit a7a49ff
Show file tree

Hide file tree

Showing 8 changed files with 59 additions and 22 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/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
@@ -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/ChatViewList/ChatViewList.tsx b/packages/uiweb/src/lib/components/chat/ChatViewList/ChatViewList.tsx
@@ -294,7 +294,7 @@ export const ChatViewList: React.FC<IChatViewListProps> = (options: IChatViewLis
     }
 
     return () => {
-      //empty return
+      // add comment
     };
   }, [chatAcceptStream, participantJoinStream]);
 
@@ -587,5 +587,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/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,5 @@
-import styled, { keyframes } from 'styled-components';
+import styled from 'styled-components';
 
-// Define keyframes
-const skeletonLoading = keyframes`
-  0% {
-    background-color: hsl(200, 20%, 80%);
-  }
-  100% {
-    background-color: hsl(200, 20%, 95%);
-  }
-`;
 
 // Define types and export components
 type SectionStyleProps = {
@@ -45,6 +36,7 @@ type SectionStyleProps = {
   visibility?: string;
   zIndex?: string;
   fontSize?: string;
+  animation?: string;
 };
 
 export const Section = styled.div<SectionStyleProps>`
@@ -84,7 +76,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 +87,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 +104,7 @@ type DivStyleProps = {
   borderRadius?: string;
   textAlign?: string;
   visibility?: string;
+  animation?: string;
 };
 export const Div = styled.div<DivStyleProps>`
   height: ${(props) => props.height || 'auto'};
@@ -126,7 +119,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 +131,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 +163,7 @@ type SpanStyleProps = {
   whiteSpace?: string;
   visibility?: string;
   textWrap?: string;
+  animation?: string;
 };
 
 export const Span = styled.span<SpanStyleProps>`
@@ -201,7 +195,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 +207,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;
     }
   }

diff --git a/packages/uiweb/src/lib/config/constants.ts b/packages/uiweb/src/lib/config/constants.ts
@@ -155,3 +155,5 @@ export const LIVEKIT_SERVER_URL = 'https://spacev2-demo-17wvllxz.livekit.cloud';
 export const LIVEKIT_SERVER_WEBSOCKET_URL = 'wss://spacev2-demo-17wvllxz.livekit.cloud';
 export const LIVEKIT_TOKEN_GENERATOR_SERVER_URL = 'https://ms-lk-server.onrender.com';
 export const GUEST_MODE_ACCOUNT = '0x0000000000000000000000000000000000000001';
+
+export const pushBotAddress = "eip155:0x99A08ac6254dcf7ccc37CeC662aeba8eFA666666";