fixes ui representation for domain resolution

packages/uiweb/src/lib/components/chat/ChatPreviewList/ChatPreviewList.tsx

@@ -7,7 +7,14 @@ import { CONSTANTS, IFeeds, IUser } from '@pushprotocol/restapi';
 import styled from 'styled-components';
 
 // Internal Compoonents
-import { getAddress, getNewChatUser, pCAIP10ToWallet, traceStackCalls, walletToPCAIP10 } from '../../../helpers';
+import {
+  getAddress,
+  getDomainIfExists,
+  getNewChatUser,
+  pCAIP10ToWallet,
+  traceStackCalls,
+  walletToPCAIP10,
+} from '../../../helpers';
 import { useChatData, usePushChatStream } from '../../../hooks';
 import useFetchChat from '../../../hooks/chat/useFetchChat';
 import useFetchMessageUtilities from '../../../hooks/chat/useFetchMessageUtilities';
@@ -609,7 +616,7 @@ export const ChatPreviewList: React.FC<IChatPreviewListProps> = (options: IChatP
           let userProfile: IUser | undefined = undefined;
           let groupProfile: Group;
 
-          if (formattedChatId.includes('.')) {
+          if (getDomainIfExists(formattedChatId)) {
             const address = await getAddress(formattedChatId, user ? user.env : CONSTANTS.ENV.PROD);
             if (address) formattedChatId = pCAIP10ToWallet(address);
             else {

packages/uiweb/src/lib/components/chat/ChatPreviewSearchList/ChatPreviewSearchList.tsx

@@ -1,33 +1,17 @@
 // React + Web3 Essentials
-import { ethers } from 'ethers';
 import React, { useContext, useEffect, useRef, useState } from 'react';
 
 // External Packages
-import { CONSTANTS, IFeeds, IUser } from '@pushprotocol/restapi';
 import styled from 'styled-components';
 
 // Internal Compoonents
-import {
-  deriveChatId,
-  getAddress,
-  getNewChatUser,
-  pCAIP10ToWallet,
-  traceStackCalls,
-  walletToPCAIP10,
-} from '../../../helpers';
-import { useChatData, usePushChatStream } from '../../../hooks';
+import { deriveChatId, getDomainIfExists, pCAIP10ToWallet } from '../../../helpers';
+import { useChatData } from '../../../hooks';
 import useFetchChat from '../../../hooks/chat/useFetchChat';
-import useFetchMessageUtilities from '../../../hooks/chat/useFetchMessageUtilities';
 import useGetGroupByIDnew from '../../../hooks/chat/useGetGroupByIDnew';
-import usePushUser from '../../../hooks/usePushUser';
 import { Button, Section, Span, Spinner } from '../../reusables';
 import { ChatPreview } from '../ChatPreview';
-import {
-  displayDefaultUser,
-  generateRandomNonce,
-  transformChatItems,
-  transformStreamToIChatPreviewPayload,
-} from '../helpers';
+import { generateRandomNonce, getChatParticipantDisplayName, transformStreamToIChatPreviewPayload } from '../helpers';
 
 // Internal Configs
 import { ThemeContext } from '../theme/ThemeProvider';
@@ -37,7 +21,6 @@ import { ThemeContext } from '../theme/ThemeProvider';
 // Interfaces & Types
 import {
   ChatPreviewSearchListErrorCodes,
-  Group,
   IChatPreviewSearchListError,
   IChatPreviewSearchListProps,
   IChatPreviewPayload,
@@ -73,7 +56,6 @@ interface IChatPreviewListMeta {
 }
 
 // Constants
-const CHAT_PAGE_LIMIT = 10;
 const SCROLL_LIMIT = 25;
 
 // Exported Interfaces & Types
@@ -82,9 +64,7 @@ const SCROLL_LIMIT = 25;
 export const ChatPreviewSearchList: React.FC<IChatPreviewSearchListProps> = (options: IChatPreviewSearchListProps) => {
   // get hooks
   const { user } = useChatData();
-  const { fetchUserProfile } = usePushUser();
   const { getGroupByIDnew } = useGetGroupByIDnew();
-  const { fetchLatestMessage, fetchChatList } = useFetchMessageUtilities();
 
   // set chat preview list
   const [chatPreviewList, setChatPreviewList] = useState<IChatPreviewList>({
@@ -192,7 +172,7 @@ export const ChatPreviewSearchList: React.FC<IChatPreviewSearchListProps> = (opt
       let derivedChatId = formattedChatId;
 
       // Check if the chatId is ENS / Web3 Name
-      if (formattedChatId.includes('.')) {
+      if (getDomainIfExists(formattedChatId)) {
         // resolve web3 name
         derivedChatId = await deriveChatId(formattedChatId, user);
       }
@@ -211,7 +191,6 @@ export const ChatPreviewSearchList: React.FC<IChatPreviewSearchListProps> = (opt
             const groupInfo = await getGroupByIDnew({
               groupId: derivedChatId,
             });
-
             if (groupInfo) {
               searchedChat = {
                 ...searchedChat,
@@ -230,19 +209,17 @@ export const ChatPreviewSearchList: React.FC<IChatPreviewSearchListProps> = (opt
           } else {
             const userProfile = await user?.info({ overrideAccount: chatInfo.recipient });
             console.debug('UIWeb::components::ChatPreviewSearchList::loadMoreChats::userProfile', userProfile);
-
             searchedChat = {
               ...searchedChat,
               chatId: derivedChatId,
-              chatParticipant: derivedChatId,
+              chatParticipant: getChatParticipantDisplayName(derivedChatId, formattedChatId),
               chatGroup: false,
               chatPic: userProfile?.profile?.picture || null,
               chatMsg: {
                 messageType: 'Text',
                 messageContent: chatInfo?.list === 'CHATS' ? 'Resume Chat!' : 'Start Chat!',
               },
             };
-
             resolved = true;
           }
         } else {
@@ -349,22 +326,6 @@ export const ChatPreviewSearchList: React.FC<IChatPreviewSearchListProps> = (opt
     });
   };
 
-  //Transform group creation stream
-  const transformGroupCreationStream: (item: any) => void = async (item: any) => {
-    const transformedItem: IChatPreviewPayload = {
-      chatId: item?.chatId,
-      chatPic: item?.meta.image,
-      chatParticipant: item?.meta.name,
-      chatGroup: true,
-      chatTimestamp: undefined,
-      chatMsg: {
-        messageType: '',
-        messageContent: '',
-      },
-    };
-    addChatItems([transformedItem], false);
-  };
-
   // Transform stream message
   const transformStreamMessage: (item: any) => void = async (item: any) => {
     if (!user) {

packages/uiweb/src/lib/components/chat/ChatProfile/ChatProfile.tsx

@@ -12,6 +12,7 @@ import styled from 'styled-components';
 import {
   deriveChatId,
   getAddress,
+  getDomainIfExists,
   pCAIP10ToWallet,
   resolveWeb3Name,
   shortenText,
@@ -166,6 +167,7 @@ export const ChatProfile: React.FC<IChatProfile> = ({
                 profile.abbrRecipient = getAbbreiatedRecipient(recipient);
                 profile.desc = profileInfo.profile?.desc;
                 profile.isGroup = false;
+                profile.web3Name = getDomainIfExists(chatId);
               } else {
                 throw new Error(
                   'UIWeb::ChatProfile::user.profile.info fetch error, possible push user does not exist.'
@@ -180,13 +182,14 @@ export const ChatProfile: React.FC<IChatProfile> = ({
               profile.icon = null;
               profile.chatId = derivedChatId;
               profile.recipient = recipient;
+              profile.web3Name = getDomainIfExists(chatId);
               profile.abbrRecipient = getAbbreiatedRecipient(recipient);
               profile.desc = '';
               profile.isGroup = false;
             }
 
             // get and set web3 name asynchrounously
-            if (profile.recipient) {
+            if (profile.recipient && !profile.web3Name) {
               setupWeb3Name(profile.recipient);
             }
           }

packages/uiweb/src/lib/components/chat/MessageInput/MessageInput.tsx

@@ -6,7 +6,7 @@ import { createPortal } from 'react-dom';
 import { MdCheckCircle, MdError } from 'react-icons/md';
 import styled from 'styled-components';
 
-import { deriveChatId, pCAIP10ToWallet, setAccessControl, walletToPCAIP10 } from '../../../helpers';
+import { deriveChatId, getDomainIfExists, pCAIP10ToWallet, setAccessControl, walletToPCAIP10 } from '../../../helpers';
 import { useChatData, useClickAway, useDeviceWidthCheck, usePushChatStream } from '../../../hooks';
 import useFetchChat from '../../../hooks/chat/useFetchChat';
 import useGetGroupByIDnew from '../../../hooks/chat/useGetGroupByIDnew';
@@ -163,7 +163,7 @@ export const MessageInput: React.FC<MessageInputProps> = ({
       if (!user) return;
       if (chatId) {
         let derivedChatId = chatId;
-        if (derivedChatId.includes('.')) {
+        if (getDomainIfExists(derivedChatId)) {
           derivedChatId = (await deriveChatId(chatId, user))!;
         }
 

packages/uiweb/src/lib/components/chat/helpers/helper.ts

@@ -2,7 +2,7 @@ import { Env, IFeeds, IMessageIPFSWithCID, IUser, ParticipantStatus } from '@pus
 import { ethers } from 'ethers';
 import moment from 'moment';
 import { ProfilePicture } from '../../../config';
-import { getAddress, walletToPCAIP10 } from '../../../helpers';
+import { getAddress, getDomainIfExists, walletToPCAIP10 } from '../../../helpers';
 import { Group, IChatPreviewPayload, IMessagePayload, User } from '../exportedTypes';
 
 export const profilePicture = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAvklEQVR4AcXBsW2FMBiF0Y8r3GQb6jeBxRauYRpo4yGQkMd4A7kg7Z/GUfSKe8703fKDkTATZsJsrr0RlZSJ9r4RLayMvLmJjnQS1d6IhJkwE2bT13U/DBzp5BN73xgRZsJMmM1HOolqb/yWiWpvjJSUiRZWopIykTATZsJs5g+1N6KSMiO1N/5DmAkzYTa9Lh6MhJkwE2ZzSZlo7xvRwson3txERzqJhJkwE2bT6+JhoKTMJ2pvjAgzYSbMfgDlXixqjH6gRgAAAABJRU5ErkJggg==`;
@@ -108,8 +108,6 @@ export const formatAddress = async (chatPreviewPayload: IChatPreviewPayload, env
     // check and remove eip155:
     if (formattedAddress.includes('eip155:')) {
       formattedAddress = formattedAddress.replace('eip155:', '');
-    } else if (formattedAddress.includes('.')) {
-      formattedAddress = (await getAddress(formattedAddress, env))!;
     }
   }
 
@@ -228,3 +226,7 @@ export const transformStreamToIMessageIPFSWithCID: (item: any) => IMessageIPFSWi
   };
   return transformedItem;
 };
+
+export const getChatParticipantDisplayName = (derivedChatId: string, chatId: string) => {
+  return derivedChatId ? getDomainIfExists(chatId) ?? derivedChatId : derivedChatId;
+};

packages/uiweb/src/lib/helpers/chat/search.ts

@@ -5,6 +5,7 @@ import { pCAIP10ToWallet, walletToPCAIP10 } from '../address';
 import { getUdResolverClient } from '../udResolver';
 import { displayDefaultUser } from './user';
 import { createWeb3Name } from '@web3-name-sdk/core';
+import { getDomainIfExists } from '../utils';
 
 export const getObjectsWithMatchingKeys = (
   obj: ChatFeedsType,
@@ -61,7 +62,7 @@ export const getAddress = async (searchText: string, env: Env) => {
   const udResolverClient = getUdResolverClient(env);
   const web3NameClient = createWeb3Name();
   let address: string | null = null;
-  if (searchText.includes('.')) {
+  if (getDomainIfExists(searchText)) {
     try {
       address = await web3NameClient.getAddress(searchText);
       if (!address) {

packages/uiweb/src/lib/helpers/utils.ts

@@ -28,7 +28,7 @@ export const deriveChatId = async (chatId: string, user: PushAPI | undefined): P
   } else if (chatId.includes('eip155:')) {
     // remove eip155:
     chatId = chatId.replace('eip155:', '');
-  } else if (chatId.includes('.')) {
+  } else if (getDomainIfExists(chatId)) {
     chatId = (await getAddress(chatId, user ? user.env : CONSTANTS.ENV.PROD))!;
   }
 
@@ -40,3 +40,5 @@ export const isMessageEncrypted = (message: string) => {
 
   return message.startsWith('U2FsdGVkX1');
 };
+
+export const getDomainIfExists = (chatId: string) => (chatId.includes('.') ? chatId : null);