Show the profile image in search suggestion

lukso-network · Oct 31, 2023 · 6937ab0 · 6937ab0
1 parent f4efb0e
commit 6937ab0
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 66 deletions.
diff --git a/ui/shared/entities/address/AddressEntity.tsx b/ui/shared/entities/address/AddressEntity.tsx
@@ -91,11 +91,7 @@ const Icon = (props: IconProps) => {
       </Tooltip>
     );
 
-    if (process.env.NEXT_PUBLIC_VIEWS_ADDRESS_IDENTICON_TYPE === 'universal_profile') {
-      return <IdenticonUniversalProfile address={ props.address.hash } fallbackIcon={ contractIcon }/>;
-    }
-
-    return contractIcon;
+    return <IdenticonUniversalProfile address={ props.address.hash } fallbackIcon={ contractIcon }/>;
   }
 
   return (
@@ -131,7 +127,7 @@ const Content = chakra((props: ContentProps) => {
       </Tooltip>
     );
   }
-  useEffect(() => {
+  useEffect(() => { // this causes a sort of loading state where the address suddenly switches to up name - needs fix?
     (async() => {
       const upData = await getUniversalProfile(props.address.hash, queryClient);
       if (upData === undefined) {
@@ -143,22 +139,11 @@ const Content = chakra((props: ContentProps) => {
     })();
   }, [ props.address.hash, queryClient ]);
 
-  if (upName !== '') {
-    return (
-      <lukso-username
-        name={ upName }
-        address={ props.address.hash }
-        hide-prefix={ true }
-        size="medium"
-        slice-by=""
-      ></lukso-username>
-    );
-  }
-
+  const displayedName = upName !== '' ? `@${ upName } (${ props.address.hash })` : props.address.hash;
   return (
     <EntityBase.Content
       { ...props }
-      text={ props.address.hash }
+      text={ displayedName }
     />
   );
 });

diff --git a/ui/shared/entities/address/IdenticonUniversalProfile.tsx b/ui/shared/entities/address/IdenticonUniversalProfile.tsx
diff --git a/ui/shared/entities/address/IdenticonUniversalProfileQuery.tsx b/ui/shared/entities/address/IdenticonUniversalProfileQuery.tsx
@@ -5,6 +5,7 @@ import React, { useEffect, useState } from 'react';
 
 import type { UPResponse } from '../../../../types/api/universalProfile';
 
+import config from '../../../../configs/app';
 import { getEnvValue } from '../../../../configs/app/utils';
 
 interface Props {
@@ -13,6 +14,9 @@ interface Props {
 }
 
 export const getUniversalProfile = async(address: string, queryClient: QueryClient) => {
+  if (config.UI.views.address.identiconType !== 'universal_profile') {
+    return undefined;
+  }
   const query = queryClient.getQueryData<UPResponse>([ 'universalProfile', { address: address } ]);
   if (query !== undefined) {
     return query;

diff --git a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestAddress.tsx b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestAddress.tsx
@@ -1,23 +1,40 @@
 import { Box, Text, Flex } from '@chakra-ui/react';
-import React from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import React, { useEffect, useState } from 'react';
 
 import type { SearchResultAddressOrContract } from 'types/api/search';
 
 import highlightText from 'lib/highlightText';
 import * as AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 
+import { getUniversalProfile } from '../../../shared/entities/address/IdenticonUniversalProfileQuery';
+
 interface Props {
   data: SearchResultAddressOrContract;
   isMobile: boolean | undefined;
   searchTerm: string;
 }
 
 const SearchBarSuggestAddress = ({ data, isMobile, searchTerm }: Props) => {
+  const queryClient = useQueryClient();
+  const [ type, setType ] = useState(data.type);
+  useEffect(() => { // this causes a sort of loading state where the address suddenly switches to up name - needs fix?
+    (async() => {
+      const upData = await getUniversalProfile(data.address, queryClient);
+      if (upData === undefined) {
+        return;
+      }
+      if (upData.LSP3Profile !== undefined) {
+        setType('contract'); // when the type is contract the icon will know that it needs to get UP profile picture
+      }
+    })();
+  }, [ data, queryClient, setType ]);
+
   const shouldHighlightHash = data.address.toLowerCase() === searchTerm.toLowerCase();
   const icon = (
     <AddressEntity.Icon
-      address={{ hash: data.address, is_contract: data.type === 'contract', name: '', is_verified: data.is_smart_contract_verified, implementation_name: null }}
+      address={{ hash: data.address, is_contract: type === 'contract', name: '', is_verified: data.is_smart_contract_verified, implementation_name: null }}
     />
   );
   const name = data.name && (