Main Release 1.6.0 (#1405)

* fix: fixed font sizes and dark theme (#1376) * fix: fixed font sizes and dark theme * fix: fixed line height * Add erc1155 to token gating group conditions (#1382) * feat: add erc1155 to token gating group conditions * fix: add tokenId to fetchContractInfo function * lock file updated --------- Co-authored-by: rohitmalhotra1420 <[email protected]> * Replaced useResolveWeb3Name hook with resolveWeb3Name helper function (#1390) * fix: added common resolveweb3 for domain name * fix: fixed review comments * Notification Ui change (#1396) * feat: new notification ui * fix: fixed review comments * lock file changed * fix: fixed color and cta hover * fix: fixed the review comments * fix: fixed link icon --------- Co-authored-by: rohitmalhotra1420 <[email protected]> * Push Chat Reply Feature (#1399) * Functioning reply in ChatPreviewList, ChatList and Input * Reply cancel and replying to in UIWeb:MessageInput * Reply Feature with styles * fix: modified some parts in helper func * fix: added the replied to text and also fixed the emoji picker position added the replied to text in the chat bubble and fixed the emoji picker position also fixed the breaking of the chat due to the messagetype issue * fix: fixed the UI for the reply feature changed the replying to to reply and also fixed the image positioning * fix: fixed the issues moved the funcs to helpers and also removed the commented code * fix: fixed image in notification * fix: added the commented code that was removed --------- Co-authored-by: abhishek-01k <[email protected]> Co-authored-by: Monalisha Mishra <[email protected]> * uiweb lock file updated --------- Co-authored-by: Monalisha Mishra <[email protected]> Co-authored-by: Kalash Shah <[email protected]> Co-authored-by: Harsh | Push <[email protected]> Co-authored-by: abhishek-01k <[email protected]> Co-authored-by: Monalisha Mishra <[email protected]>
push-protocol · Oct 9, 2024 · dbb6fe1 · dbb6fe1
1 parent 0f54730
commit dbb6fe1
Show file tree

Hide file tree

Showing 35 changed files with 1,373 additions and 742 deletions.
diff --git a/packages/uiweb/package.json b/packages/uiweb/package.json
@@ -10,7 +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-name-sdk/core": "^0.2.0",
     "@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
@@ -3,21 +3,23 @@ import React, { useContext, useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 
 import { useChatData } from '../../../hooks';
-import { Div, Button, Image, Section } from '../../reusables';
+import { Button, Div, Image, Section } from '../../reusables';
 
 import { CONSTANTS } from '@pushprotocol/restapi';
 import { ethers } from 'ethers';
 import { CiImageOn } from 'react-icons/ci';
 import { FaFile } from 'react-icons/fa';
 import { CoreContractChainId, InfuraAPIKey } from '../../../config';
-import { resolveWeb3Name, shortenText } from '../../../helpers';
+import { pushBotAddress } from '../../../config/constants';
+import { pCAIP10ToWallet, resolveWeb3Name, shortenText } from '../../../helpers';
+import { createBlockie } from '../../../helpers/blockies';
 import { IChatPreviewProps } from '../exportedTypes';
 import { formatAddress, formatDate } from '../helpers';
-import { pCAIP10ToWallet } from '../../../helpers';
-import { createBlockie } from '../../../helpers/blockies';
 import { IChatTheme } from '../theme';
 import { ThemeContext } from '../theme/ThemeProvider';
-import { pushBotAddress } from '../../../config/constants';
+
+import { ReplyIcon } from '../../../icons/PushIcons';
+
 /**
  * @interface IThemeProps
  * this interface is used for defining the props for styled components
@@ -53,7 +55,9 @@ 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;
+  const isBot =
+    options?.chatPreviewPayload?.chatParticipant === 'PushBot' ||
+    options?.chatPreviewPayload?.chatParticipant === pushBotAddress;
 
   // For blockie if icon is missing
   const blockieContainerRef = useRef<HTMLDivElement>(null);
@@ -75,6 +79,49 @@ export const ChatPreview: React.FC<IChatPreviewProps> = (options: IChatPreviewPr
     return options.chatPreviewPayload?.chatGroup ? formattedAddress : web3Name ? web3Name : formattedAddress;
   };
 
+  // collate all message components
+  const msgComponents: React.ReactNode[] = [];
+  let includeText = false;
+
+  // If reply, check message meta to see
+  // Always check this first
+  if (options?.chatPreviewPayload?.chatMsg?.messageMeta === 'Reply') {
+    msgComponents.push(
+      <ReplyIcon
+        color={theme.iconColor?.emoji}
+        size={theme.fontSize?.chatPreviewMessageText}
+      />
+    );
+
+    // Include text in rendering as well
+    includeText = true;
+  }
+
+  // If image, gif, mediaembed
+  if (
+    options?.chatPreviewPayload?.chatMsg?.messageType === 'Image' ||
+    options?.chatPreviewPayload?.chatMsg?.messageType === 'GIF' ||
+    options?.chatPreviewPayload?.chatMsg?.messageType === 'MediaEmbed'
+  ) {
+    msgComponents.push(<CiImageOn />);
+    msgComponents.push(<Message theme={theme}>Media</Message>);
+  }
+
+  // If file
+  if (options?.chatPreviewPayload?.chatMsg?.messageType === 'File') {
+    msgComponents.push(<FaFile />);
+    msgComponents.push(<Message theme={theme}>File</Message>);
+  }
+
+  // Add content
+  if (
+    includeText ||
+    options?.chatPreviewPayload?.chatMsg?.messageType === 'Text' ||
+    options?.chatPreviewPayload?.chatMsg?.messageType === 'Reaction'
+  ) {
+    msgComponents.push(<Message theme={theme}>{options?.chatPreviewPayload?.chatMsg?.messageContent}</Message>);
+  }
+
   return (
     <ChatPreviewContainer
       margin={theme.margin?.chatPreviewMargin}
@@ -167,41 +214,23 @@ export const ChatPreview: React.FC<IChatPreviewProps> = (options: IChatPreviewPr
             animation={theme.skeletonBG}
           >
             <Message theme={theme}>
-              {options?.chatPreviewPayload?.chatMsg?.messageType === 'Image' ||
-              options?.chatPreviewPayload?.chatMsg?.messageType === 'GIF' ||
-              options?.chatPreviewPayload?.chatMsg?.messageType === 'MediaEmbed' ? (
-                <Section
-                  justifyContent="flex-start"
-                  flexDirection="row"
-                  alignItems="center"
-                  alignSelf="stretch"
-                  overflow="hidden"
-                  flex="1"
-                  gap="4px"
-                >
-                  <CiImageOn />
-                  Media
-                </Section>
-              ) : options?.chatPreviewPayload?.chatMsg?.messageType === 'File' ? (
-                <Section
-                  justifyContent="flex-start"
-                  flexDirection="row"
-                  alignItems="center"
-                  alignSelf="stretch"
-                  overflow="hidden"
-                  flex="1"
-                  gap="4px"
-                >
-                  <FaFile />
-                  File
-                </Section>
-              ) : (
-                options?.chatPreviewPayload?.chatMsg?.messageContent
-              )}
+              <Section
+                justifyContent="flex-start"
+                flexDirection="row"
+                alignItems="center"
+                alignSelf="stretch"
+                overflow="hidden"
+                flex="1"
+                gap="4px"
+              >
+                {msgComponents}
+              </Section>
             </Message>
-
-            {hasBadgeCount && !(isBot || (isSelected && hasBadgeCount)) && <Badge theme={theme}>{options.badge?.count}</Badge>}
-          </Section>                  
+
+            {hasBadgeCount && !(isBot || (isSelected && hasBadgeCount)) && (
+              <Badge theme={theme}>{options.badge?.count}</Badge>
+            )}
+          </Section>
         </Section>
       </Button>
     </ChatPreviewContainer>