fix: Truncate proxy entries (#27)

Signed-off-by: Wolmin <[email protected]>
lukso-network · Jan 15, 2025 · a424654 · a424654
1 parent f635b83
commit a424654
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 4 deletions.
diff --git 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 (
     <Popover trigger="hover" isLazy gutter={ 8 }>
       <PopoverTrigger>
         <Box display="inline-flex" w="100%">
           <EntityBase.Content
             { ...props }
-            truncation={ nameTag || implementationName || props.address.name ? 'tail' : props.truncation }
-            text={ nameTag || implementationName || props.address.name || props.altHash || props.address.hash }
+            truncation={ upTruncation }
+            text={ displayedText }
             isTooltipDisabled
           />
         </Box>

diff --git 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<string>) => {
+    if (!isUniversalProfileEnabled()) {
+      return [] as Array<SearchProfileQueryResponse>;
+    }
+
     const resp = await graphClient.getProfiles(JSON.stringify(addresses));
     if (resp === null) {
       return [] as Array<SearchProfileQueryResponse>;

diff --git a/ui/shared/entities/base/components.tsx b/ui/shared/entities/base/components.tsx
@@ -117,7 +117,6 @@ export interface ContentBaseProps extends Pick<EntityBaseProps, 'className' | 'i
 }
 
 const Content = chakra(({ className, isLoading, asProp, text, truncation = 'dynamic', tailLength, isTooltipDisabled }: ContentBaseProps) => {
-
   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
           <HashStringShortenDynamic
             hash={ text }