Main Release 1.6.0

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

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>