diff --git a/ui/shared/entities/address/AddressEntityContentProxy.tsx b/ui/shared/entities/address/AddressEntityContentProxy.tsx index 5941a2782d..f9e555bb26 100644 --- a/ui/shared/entities/address/AddressEntityContentProxy.tsx +++ b/ui/shared/entities/address/AddressEntityContentProxy.tsx @@ -6,12 +6,16 @@ import * as EntityBase from 'ui/shared/entities/base/components'; import type { ContentProps } from './AddressEntity'; import AddressEntity from './AddressEntity'; +import { formattedLuksoName, useUniversalProfile } from './IdenticonUniversalProfileQuery'; const AddressEntityContentProxy = (props: ContentProps) => { const bgColor = useColorModeValue('gray.700', 'gray.900'); const implementations = props.address.implementations; + const { data: upData, isLoading: upIsLoading } = useUniversalProfile(props.address.hash); + const upName = upIsLoading ? '' : upData?.name ?? ''; + const handleClick = React.useCallback((event: React.MouseEvent) => { event.stopPropagation(); }, []); @@ -25,14 +29,19 @@ const AddressEntityContentProxy = (props: ContentProps) => { const implementationName = implementations.length === 1 && implementations[0].name ? implementations[0].name : undefined; + const fallback = nameTag || implementationName || props.address.name || props.altHash || props.address.hash; + const displayedText = upName !== '' ? formattedLuksoName(props.address.hash, upName) : fallback; + const truncation = nameTag || implementationName || props.address.name ? 'tail' : props.truncation; + const upTruncation = upName !== '' ? 'dynamic' : truncation; + return ( diff --git a/ui/shared/entities/address/IdenticonUniversalProfileQuery.tsx b/ui/shared/entities/address/IdenticonUniversalProfileQuery.tsx index 1561b82819..f9fec3ad05 100644 --- a/ui/shared/entities/address/IdenticonUniversalProfileQuery.tsx +++ b/ui/shared/entities/address/IdenticonUniversalProfileQuery.tsx @@ -6,6 +6,7 @@ import React from 'react'; import { graphClient } from 'lib/api/graphClient'; import type { SearchProfileQueryResponse } from 'lib/api/graphTypes'; +import { isUniversalProfileEnabled } from 'lib/api/isUniversalProfileEnabled'; import Skeleton from 'ui/shared/chakra/Skeleton'; interface Props { @@ -15,6 +16,10 @@ interface Props { const profiles = create({ fetcher: async(addresses: Array) => { + if (!isUniversalProfileEnabled()) { + return [] as Array; + } + const resp = await graphClient.getProfiles(JSON.stringify(addresses)); if (resp === null) { return [] as Array; diff --git a/ui/shared/entities/base/components.tsx b/ui/shared/entities/base/components.tsx index f53b56b67a..a659dbfe34 100644 --- a/ui/shared/entities/base/components.tsx +++ b/ui/shared/entities/base/components.tsx @@ -117,7 +117,6 @@ export interface ContentBaseProps extends Pick { - const children = (() => { switch (truncation) { case 'constant_long': @@ -139,7 +138,7 @@ const Content = chakra(({ className, isLoading, asProp, text, truncation = 'dyna ); case 'dynamic': return ( - // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore