fix: fixed preview bugs (#1078)

push-protocol · Feb 1, 2024 · 9961ab7 · 9961ab7
1 parent 64b8d97
commit 9961ab7
Show file tree

Hide file tree

Showing 9 changed files with 133 additions and 74 deletions.
diff --git a/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatProfile.tsx b/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatProfile.tsx
@@ -6,7 +6,7 @@ export const ChatProfileTest = () => {
         <div>
             <ChatProfile 
                 chatProfileHelperComponent={<div>Some component</div>}
-                chatId='0x455E5AA18469bC6ccEF49594645666C587A3a71B'
+                chatId='eip155:0x455E5AA18469bC6ccEF49594645666C587A3a71B'
 // chatId='36baf37e441fdd94e23406c6c716fc4e91a93a9ee68e070cd5b054534dbe09a6'
             />
         </div>

diff --git a/packages/uiweb/src/lib/components/chat/ChatPreview/ChatPreview.tsx b/packages/uiweb/src/lib/components/chat/ChatPreview/ChatPreview.tsx
@@ -9,6 +9,9 @@ import { IChatPreviewProps } from '../exportedTypes';
 import { IChatTheme } from '../theme';
 import { ThemeContext } from '../theme/ThemeProvider';
 import { formatAddress, formatDate } from '../helpers';
+import { resolveNewEns, shortenText } from '../../../helpers';
+import { CoreContractChainId, InfuraAPIKey } from '../../../config';
+import { ethers } from 'ethers';
 
 /**
  * @interface IThemeProps
@@ -24,17 +27,33 @@ export const ChatPreview: React.FC<IChatPreviewProps> = (
 ) => {
   const theme = useContext(ThemeContext);
   const {env} = useChatData();
+  const provider = new ethers.providers.InfuraProvider(CoreContractChainId[env], InfuraAPIKey);
   const [formattedAddress,setFormattedAddress] = useState<string>('');
+  const [web3Name, setWeb3Name] = useState<string | null>(null);
 
   useEffect(()=>{
     (async()=>{
     const address = await formatAddress(options.chatPreviewPayload,env);
     setFormattedAddress(address);
+    if(!options.chatPreviewPayload?.chatGroup){
+      const result = await resolveNewEns(address, provider,env);
+      console.log(result)
+      setWeb3Name(result);
+    }
     })();
 
 
   },[])
 
+  const getProfileName = (formattedAddress:string) => {
+    return options.chatPreviewPayload?.chatGroup
+      ? formattedAddress
+      : web3Name
+      ? web3Name
+      : formattedAddress
+
+  };
+
 
   return (
     <ChatPreviewContainer>
@@ -93,7 +112,7 @@ export const ChatPreview: React.FC<IChatPreviewProps> = (
             overflow="hidden"
             flex="1"
           >
-            <Account theme={theme}>{ formattedAddress}</Account>
+            <Account theme={theme}>{ shortenText(getProfileName(formattedAddress),8,true) ||  formattedAddress}</Account>
             <Dated theme={theme}>{formatDate(options.chatPreviewPayload)}</Dated>
           </Section>
           <Section
@@ -142,10 +161,11 @@ const Account = styled.div<IThemeProps>`
   flex: 1;
   align-self: stretch;
   text-align: start;
-  text-overflow: ellipsis;
+  // text-overflow: ellipsis ellipsis;
   white-space: nowrap;
   overflow: hidden;
   margin-right: 10px;
+
 `;
 
 const Dated = styled.div<IThemeProps>`
@@ -162,7 +182,7 @@ const Message = styled.div<IThemeProps>`
   flex: 1;
   align-self: stretch;
   text-align: start;
-  text-overflow: ellipsis;
+  // text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
   margin-right: 10px;

diff --git a/packages/uiweb/src/lib/components/chat/ChatPreviewList/ChatPreviewList.tsx b/packages/uiweb/src/lib/components/chat/ChatPreviewList/ChatPreviewList.tsx
@@ -59,7 +59,7 @@ interface IChatPreviewListMeta {
 }
 
 // Define Constants
-const CHAT_PAGE_LIMIT = 20;
+const CHAT_PAGE_LIMIT = 10;
 const SCROLL_LIMIT = 25;
 
 export const ChatPreviewList: React.FC<IChatPreviewListProps> = (

diff --git a/packages/uiweb/src/lib/components/chat/ChatProfile/ChatProfile.tsx b/packages/uiweb/src/lib/components/chat/ChatProfile/ChatProfile.tsx
@@ -49,7 +49,7 @@ export const ChatProfile: React.FC<IChatProfile> = ({
   const [options, setOptions] = useState(false);
   const [chatInfo, setChatInfo] = useState<IUser | null>();
   const [groupInfo, setGroupInfo] = useState<Group | null>();
-  const [ensName, setEnsName] = useState<string | undefined>('');
+  const [web3Name, setWeb3Name] = useState<string | null>(null);
   const isMobile = useMediaQuery(device.tablet);
   const l1ChainId = allowedNetworks[env].includes(1) ? 1 : 5;
   const provider = new ethers.providers.InfuraProvider(l1ChainId, InfuraAPIKey);
@@ -67,8 +67,8 @@ export const ChatProfile: React.FC<IChatProfile> = ({
   const fetchProfileData = async () => {
     if (isValidETHAddress(chatId)) {
       const ChatProfile = await fetchChatProfile({ profileId: chatId ,env});
-      const result = await resolveNewEns(chatId, provider);
-      setEnsName(result);
+      const result = await resolveNewEns(chatId, provider,env);
+      setWeb3Name(result);
       setChatInfo(ChatProfile);
       setGroupInfo(null);
       // setIsGroup(false);
@@ -94,15 +94,15 @@ export const ChatProfile: React.FC<IChatProfile> = ({
   const getProfileName = () => {
     return (Object.keys(groupInfo||{}).length)
       ? groupInfo?.groupName
-      : ensName
-      ? `${ensName} (${
+      : web3Name
+      ? `${web3Name} (${
           isMobile
-            ? shortenText(chatInfo?.did?.split(':')[1] ?? '', 4, true)
+            ? shortenText((chatInfo?.did)?.split(':')[1] ?? '', 4, true)
             : chatId
         })`
       : chatInfo
       ? shortenText(chatInfo.did?.split(':')[1] ?? '', 6, true)
-      : shortenText(chatId, 6, true);
+      : shortenText(chatId?.split(':')[1], 6, true);
   };
 
   useEffect(() => {

diff --git a/packages/uiweb/src/lib/helpers/address.ts b/packages/uiweb/src/lib/helpers/address.ts
@@ -1,17 +1,18 @@
 import { ethers } from 'ethers';
 import type { Web3Provider, InfuraProvider } from '@ethersproject/providers';
-import { SignerType } from '@pushprotocol/restapi';
+import { Env, SignerType } from '@pushprotocol/restapi';
+import { getUdResolver } from './udResolver';
 
 /**
- * 
+ *
  * @param wallet nft:eip155:nftChainId:nftContractAddress:nftTokenId
- * @returns 
+ * @returns
  */
 export const isValidCAIP10NFTAddress = (wallet: string): boolean => {
   try {
     const walletComponent = wallet.split(':');
     return (
-      (walletComponent.length === 5 || walletComponent.length === 6)&&
+      (walletComponent.length === 5 || walletComponent.length === 6) &&
       walletComponent[0].toLowerCase() === 'nft' &&
       !isNaN(Number(walletComponent[4])) &&
       Number(walletComponent[4]) > 0 &&
@@ -25,20 +26,18 @@ export const isValidCAIP10NFTAddress = (wallet: string): boolean => {
   }
 };
 
-export const walletToPCAIP10 = (account:string): string => {
-  if(account){
-    if(isValidCAIP10NFTAddress(account) || account.includes('eip155:')){
-      return account
+export const walletToPCAIP10 = (account: string): string => {
+  if (account) {
+    if (isValidCAIP10NFTAddress(account) || account.includes('eip155:')) {
+      return account;
     }
-    return 'eip155:' + account
+    return 'eip155:' + account;
   }
   return account;
-
-}
+};
 
 export const pCAIP10ToWallet = (wallet: string): string => {
-  if(wallet)
-  wallet = wallet.replace('eip155:', '');
+  if (wallet) wallet = wallet.replace('eip155:', '');
   return wallet;
 };
 
@@ -59,7 +58,6 @@ export const resolveEns = (address: string, provider: Web3Provider) => {
   //   );
   // }
 
-
   provider.lookupAddress(checksumWallet).then((ens) => {
     if (ens) {
       return ens;
@@ -69,10 +67,14 @@ export const resolveEns = (address: string, provider: Web3Provider) => {
   });
 };
 
-export const resolveNewEns = async (address: string, provider: InfuraProvider) => {
+export const resolveNewEns = async (
+  address: string,
+  provider: InfuraProvider,
+  env:Env
+) => {
   const walletLowercase = pCAIP10ToWallet(address).toLowerCase();
   const checksumWallet = ethers.utils.getAddress(walletLowercase);
-  let result;
+
   // let provider = ethers.getDefaultProvider('mainnet');
   // if (
   //   window.location.hostname == 'app.push.org' ||
@@ -87,15 +89,34 @@ export const resolveNewEns = async (address: string, provider: InfuraProvider) =
   //   );
   // }
 
-  await provider.lookupAddress(checksumWallet).then((ens) => {
-    if (ens) {
-      result = ens;
-      return ens;
-    } else {
-      result = null;
-      return null;
-    }
-  });
+
+  let result: string | null = null;
+
+  try {
+   const ens =  await provider.lookupAddress(checksumWallet)
+      if (ens) {
+        result = ens;
+        // return ens;
+      } else {
+        try {
+          const udResolver = getUdResolver(env);
+
+          // attempt reverse resolution on provided address
+          const udName = await udResolver.reverse(checksumWallet);
+          if (udName) {
+            result = udName
+          } else {
+            result = null;
+          }
+        } catch (err) {
+          console.debug(err);
+        }
+      }
+
+  } catch (err) {
+    console.debug(err);
+  }
+
   return result;
 };
 
@@ -104,10 +125,12 @@ export const isPCAIP = (id: string) => {
   return id?.startsWith(prefix);
 };
 
-export const getAddressFromSigner = async (signer: SignerType): Promise<string> => {
+export const getAddressFromSigner = async (
+  signer: SignerType
+): Promise<string> => {
   if ('getAddress' in signer) {
     return await signer.getAddress();
   } else {
     return signer.account['address'] ?? '';
   }
-};
+};
diff --git a/packages/uiweb/src/lib/helpers/chat/search.ts b/packages/uiweb/src/lib/helpers/chat/search.ts
@@ -93,16 +93,15 @@ export const getAddress = async (searchText: string, env: Env) => {
   if (searchText.includes('.')) {
     try {
       address = await udResolver.owner(searchText);
-    } catch (err) {
-      console.log(err);
-    }
-    if (!address) {
+  } catch (err) {
       try {
         address = await provider.resolveName(searchText);
       } catch (err) {
         console.log(err);
       }
-    }
+
+    console.log(err);
+  }
 
     return address || null;
   } else if (await ethers.utils.isAddress(pCAIP10ToWallet(searchText))) {

diff --git a/packages/uiweb/src/lib/helpers/chat/user.ts b/packages/uiweb/src/lib/helpers/chat/user.ts
@@ -1,5 +1,11 @@
-import type { IUser } from '@pushprotocol/restapi';
-import { ProfilePicture } from '../../config';
+import type { Env, IUser } from '@pushprotocol/restapi';
+import {
+
+  ProfilePicture,
+} from '../../config';
+import { ethers } from 'ethers';
+import { getUdResolver } from '../udResolver';
+
 
 export const displayDefaultUser = ({ caip10 }: { caip10: string }): IUser => {
   const userCreated: IUser = {
@@ -25,9 +31,45 @@ export const displayDefaultUser = ({ caip10 }: { caip10: string }): IUser => {
       desc: null,
       picture: ProfilePicture,
       profileVerificationProof: null,
-      blockedUsersList:null,
+      blockedUsersList: null,
     },
     verificationProof: '',
   };
   return userCreated;
 };
+export const getEnsName = async (
+  provider: ethers.providers.BaseProvider | any,
+  checksumWallet: string,
+  setWeb3Name: (id: string, web3Name: string) => void
+) => {
+  let ensName: string | null = null;
+  provider.lookupAddress(checksumWallet).then(async (ens: string) => {
+    if (ens) {
+      ensName = ens;
+      setWeb3Name(checksumWallet.toLowerCase(), ensName);
+    } else {
+      ensName = null;
+    }
+  });
+  return ensName;
+};
+
+export const getUnstoppableName = async (
+  checksumWallet: string,
+  setWeb3Name: (id: string, web3Name: string) => void,
+  env: Env
+) => {
+  // Unstoppable Domains resolution library
+  const udResolver = getUdResolver(env);
+
+  // attempt reverse resolution on provided address
+  let udName = await udResolver.reverse(checksumWallet);
+  if (udName) {
+    setWeb3Name(checksumWallet.toLowerCase(), udName);
+  } else {
+    udName = null;
+  }
+  return udName;
+};
+
+
diff --git a/packages/uiweb/src/lib/hooks/chat/usePushChatStream.ts b/packages/uiweb/src/lib/hooks/chat/usePushChatStream.ts
@@ -68,7 +68,7 @@ export const usePushChatStream = () => {
          if (chatops.event === 'chat.group.update') {
           setGroupUpdateStream(chatops);
         }
-        else if (chatops.event === 'chat.group.update') {
+        else if (chatops.event === 'chat.group.create') {
           setGroupCreateStream(chatops);
         }
     });

diff --git a/packages/uiweb/src/lib/hooks/useResolveWeb3Name.ts b/packages/uiweb/src/lib/hooks/useResolveWeb3Name.ts
@@ -11,35 +11,10 @@ import type { ChatMainStateContextType } from '../context/chatAndNotification/ch
 
 
 // Internal Configs
-import { getUdResolver, pCAIP10ToWallet } from '../helpers';
+import { getEnsName, getUdResolver, getUnstoppableName, pCAIP10ToWallet } from '../helpers';
 import { Web3NameListType } from '../types';
 
-const getEnsName = async (provider: ethers.providers.BaseProvider | any, checksumWallet: string,setWeb3Name:(id:string,web3Name:string) => void) => {
-  let ensName: string | null= null;
-  provider.lookupAddress(checksumWallet).then(async (ens:string) => {
-    if (ens) {
-      ensName = ens;
-      setWeb3Name(checksumWallet.toLowerCase(),ensName)
-    } else {
-      ensName = null;
-    }
-  });
-  return ensName;
-};
 
-const getUnstoppableName = async (checksumWallet: string,setWeb3Name:(id:string,web3Name:string) => void,env:Env) => {
-  // Unstoppable Domains resolution library
-  const udResolver = getUdResolver(env);
-
-  // attempt reverse resolution on provided address
-  let udName = await udResolver.reverse(checksumWallet);
-  if (udName) {
-    setWeb3Name(checksumWallet.toLowerCase(),udName)
-  } else {
-    udName = null;
-  }
-  return udName;
-};
 
 export function useResolveWeb3Name(address: string,env:Env) {