Remove LUKSO and show address instead of name

lukso-network · Nov 30, 2023 · 87756b2 · 87756b2
1 parent 9bc3da4
commit 87756b2
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 43 deletions.
diff --git a/mocks/search/index.ts b/mocks/search/index.ts
@@ -1,4 +1,11 @@
-import type { SearchResultToken, SearchResultBlock, SearchResultAddressOrContract, SearchResultTx, SearchResultLabel, SearchResult } from 'types/api/search';
+import type {
+  SearchResultToken,
+  SearchResultBlock,
+  SearchResultAddressOrContractOrUniversalProfile,
+  SearchResultTx,
+  SearchResultLabel,
+  SearchResult,
+} from 'types/api/search';
 
 export const token1: SearchResultToken = {
   address: '0x377c5F2B300B25a534d4639177873b7fEAA56d4B',
@@ -47,15 +54,15 @@ export const block2: SearchResultBlock = {
   url: '/block/0x1af31d7535dded06bab9a88eb40ee2f8d0529a60ab3b8a7be2ba69b008cacbd2',
 };
 
-export const address1: SearchResultAddressOrContract = {
+export const address1: SearchResultAddressOrContractOrUniversalProfile = {
   address: '0xb64a30399f7F6b0C154c2E7Af0a3ec7B0A5b131a',
   name: null,
   type: 'address' as const,
   is_smart_contract_verified: false,
   url: '/address/0xb64a30399f7F6b0C154c2E7Af0a3ec7B0A5b131a',
 };
 
-export const contract1: SearchResultAddressOrContract = {
+export const contract1: SearchResultAddressOrContractOrUniversalProfile = {
   address: '0xb64a30399f7F6b0C154c2E7Af0a3ec7B0A5b131a',
   name: 'Unknown contract in this network',
   type: 'contract' as const,

diff --git a/types/api/search.ts b/types/api/search.ts
@@ -17,14 +17,6 @@ export interface SearchResultToken {
   is_smart_contract_verified: boolean;
 }
 
-export interface SearchResultAddressOrContract {
-  type: 'address' | 'contract';
-  name: string | null;
-  address: string;
-  is_smart_contract_verified: boolean;
-  url?: string; // not used by the frontend, we build the url ourselves
-}
-
 export interface SearchResultAddressOrContractOrUniversalProfile {
   type: 'address' | 'contract' | 'universal_profile';
   name: string | null;
@@ -65,7 +57,6 @@ export interface SearchResultUniversalProfile {
 
 export type SearchResultItem =
     SearchResultToken |
-    SearchResultAddressOrContract |
     SearchResultAddressOrContractOrUniversalProfile |
     SearchResultBlock |
     SearchResultTx |

diff --git a/ui/shared/HashStringShortenDynamic.tsx b/ui/shared/HashStringShortenDynamic.tsx
@@ -76,10 +76,9 @@ const HashStringShortenDynamic = ({ hash, fontWeight = '400', isTooltipDisabled,
         const slicedName = name.slice(0, rightI - 3);
         const displayed = rightI - 3 > name.length ? name + hashHead : slicedName + '...' + hashHead;
         setDisplayedString(displayed);
-
-        return;
+      } else {
+        setDisplayedString(hash.slice(0, rightI - 1) + '...' + tail);
       }
-      setDisplayedString(hash.slice(0, rightI - 1) + '...' + tail);
     } else {
       setDisplayedString(hash);
     }

diff --git a/ui/shared/entities/address/IdenticonUniversalProfileQuery.tsx b/ui/shared/entities/address/IdenticonUniversalProfileQuery.tsx
@@ -13,7 +13,7 @@ interface Props {
   fallbackIcon: JSX.Element;
 }
 
-export const formattedLuksoName = (hash: string, name: string) => {
+export const formattedLuksoName = (hash: string, name: string | null) => {
   return `@${ name } (${ hash })`;
 };
 

diff --git a/ui/shared/search/utils.ts b/ui/shared/search/utils.ts
@@ -21,7 +21,7 @@ export const searchCategories: Array<{id: Category; title: string }> = [
   { id: 'public_tag', title: 'Public tags' },
   { id: 'transaction', title: 'Transactions' },
   { id: 'block', title: 'Blocks' },
-  { id: 'universal_profile', title: 'LUKSO Universal Profiles' },
+  { id: 'universal_profile', title: 'Universal Profiles' },
 ];
 
 export const searchItemTitles: Record<Category, { itemTitle: string; itemTitleShort: string }> = {

diff --git a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestAddress.tsx b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestAddress.tsx
@@ -1,14 +1,13 @@
 import { Box, Text, Flex } from '@chakra-ui/react';
-import { useQueryClient } from '@tanstack/react-query';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 
 import type { SearchResultAddressOrContractOrUniversalProfile } 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 { formattedLuksoName, getUniversalProfile } from '../../../shared/entities/address/IdenticonUniversalProfileQuery';
+import { formattedLuksoName } from '../../../shared/entities/address/IdenticonUniversalProfileQuery';
 
 interface Props {
   data: SearchResultAddressOrContractOrUniversalProfile;
@@ -17,29 +16,15 @@ interface Props {
 }
 
 const SearchBarSuggestAddress = ({ data, isMobile, searchTerm }: Props) => {
-  const queryClient = useQueryClient();
-  const [ type, setType ] = useState(data.type);
-  const [ displayedName, setDisplayedName ] = useState(data.address);
-
-  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
-        if (upData.hasProfileName) {
-          setDisplayedName(formattedLuksoName(data.address, upData.LSP3Profile.name));
-        }
-      }
-    })();
-  }, [ data, queryClient, setType, setDisplayedName ]);
-
   const icon = (
     <AddressEntity.Icon
-      address={{ hash: data.address, is_contract: type === 'contract', name: '', is_verified: data.is_smart_contract_verified, implementation_name: null }}
+      address={{
+        hash: data.address,
+        is_contract: data.type === 'contract' || data.type === 'universal_profile',
+        name: '',
+        is_verified: data.is_smart_contract_verified,
+        implementation_name: null,
+      }}
     />
   );
   const name = data.name && (
@@ -49,11 +34,12 @@ const SearchBarSuggestAddress = ({ data, isMobile, searchTerm }: Props) => {
       whiteSpace="nowrap"
       textOverflow="ellipsis"
     >
-      <span dangerouslySetInnerHTML={{ __html: highlightText(data.name, searchTerm) }}/>
+      <span dangerouslySetInnerHTML={{ __html: highlightText(data.type === 'universal_profile' ? data.address : data.name, searchTerm) }}/>
     </Text>
   );
 
-  const address = <HashStringShortenDynamic hash={ displayedName } isTooltipDisabled/>;
+  const dynamicTitle = data.type === 'universal_profile' ? formattedLuksoName(data.address, data.name) : data.address;
+  const address = <HashStringShortenDynamic hash={ dynamicTitle } isTooltipDisabled/>;
 
   if (isMobile) {
     return (