From 87756b2b6d48505ecc13fdea7f232e93c3cf7109 Mon Sep 17 00:00:00 2001 From: Wolmin Date: Thu, 30 Nov 2023 11:26:15 +0100 Subject: [PATCH] Remove LUKSO and show address instead of name --- mocks/search/index.ts | 13 +++++-- types/api/search.ts | 9 ----- ui/shared/HashStringShortenDynamic.tsx | 5 +-- .../IdenticonUniversalProfileQuery.tsx | 2 +- ui/shared/search/utils.ts | 2 +- .../SearchBarSuggestAddress.tsx | 38 ++++++------------- 6 files changed, 26 insertions(+), 43 deletions(-) diff --git a/mocks/search/index.ts b/mocks/search/index.ts index 0fbdf9e946..9f8907fa71 100644 --- 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,7 +54,7 @@ export const block2: SearchResultBlock = { url: '/block/0x1af31d7535dded06bab9a88eb40ee2f8d0529a60ab3b8a7be2ba69b008cacbd2', }; -export const address1: SearchResultAddressOrContract = { +export const address1: SearchResultAddressOrContractOrUniversalProfile = { address: '0xb64a30399f7F6b0C154c2E7Af0a3ec7B0A5b131a', name: null, type: 'address' as const, @@ -55,7 +62,7 @@ export const address1: SearchResultAddressOrContract = { 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 index 808786951d..ac24172f03 100644 --- 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 index 160fc3537b..146891a5c6 100644 --- 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 index 849c69f4bc..bbe268b0d7 100644 --- 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 index 17db323657..9d83e4cb03 100644 --- 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 = { diff --git a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestAddress.tsx b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestAddress.tsx index 03985efc49..36627d12a6 100644 --- a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestAddress.tsx +++ b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestAddress.tsx @@ -1,6 +1,5 @@ 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'; @@ -8,7 +7,7 @@ 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 = ( ); const name = data.name && ( @@ -49,11 +34,12 @@ const SearchBarSuggestAddress = ({ data, isMobile, searchTerm }: Props) => { whiteSpace="nowrap" textOverflow="ellipsis" > - + ); - const address = ; + const dynamicTitle = data.type === 'universal_profile' ? formattedLuksoName(data.address, data.name) : data.address; + const address = ; if (isMobile) { return (