fix: Also adjust code which is getting the name

lukso-network · Jan 21, 2024 · 842acf0 · 842acf0
1 parent 0b70a30
commit 842acf0
Showing 1 changed file with 4 additions and 19 deletions.
diff --git a/ui/shared/entities/address/AddressEntity.tsx b/ui/shared/entities/address/AddressEntity.tsx
@@ -1,8 +1,7 @@
 import type { As } from '@chakra-ui/react';
 import { Box, Flex, Skeleton, Tooltip, chakra, VStack } from '@chakra-ui/react';
-import { useQueryClient } from '@tanstack/react-query';
 import _omit from 'lodash/omit';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 
 import type { AddressParam } from 'types/api/addressParams';
 
@@ -12,7 +11,7 @@ import * as EntityBase from 'ui/shared/entities/base/components';
 
 import { getIconProps } from '../base/utils';
 import AddressIdenticon from './AddressIdenticon';
-import { formattedLuksoName, getUniversalProfile, IdenticonUniversalProfile } from './IdenticonUniversalProfileQuery';
+import { formattedLuksoName, useUniversalProfile, IdenticonUniversalProfile } from './IdenticonUniversalProfileQuery';
 if (process.browser) {
   import('@lukso/web-components/dist/components/lukso-profile');
 }
@@ -105,8 +104,6 @@ const Icon = (props: IconProps) => {
 type ContentProps = Omit<EntityBase.ContentBaseProps, 'text'> & Pick<EntityProps, 'address'>;
 
 const Content = chakra((props: ContentProps) => {
-  const queryClient = useQueryClient();
-  const [ upName, setUpName ] = useState('');
   if (props.address.name) {
     const label = (
       <VStack gap={ 0 } py={ 1 } color="inherit">
@@ -123,20 +120,8 @@ const Content = chakra((props: ContentProps) => {
       </Tooltip>
     );
   }
-  useEffect(() => { // this causes a sort of loading state where the address suddenly switches to up name - needs fix?
-    (async() => {
-      if (!props.address.is_contract) {
-        return;
-      }
-      const upData = await getUniversalProfile(props.address.hash, queryClient);
-      if (upData === undefined) {
-        return;
-      }
-      if (upData.LSP3Profile !== undefined) {
-        setUpName(upData.LSP3Profile.name);
-      }
-    })();
-  }, [ props, queryClient ]);
+  const { data: upData, isLoading: upIsLoading } = useUniversalProfile(props.address.hash);
+  const upName = upIsLoading ? '' : upData?.LSP3Profile?.name ?? '';
 
   const displayedName = upName !== '' ? formattedLuksoName(props.address.hash, upName) : props.address.hash;
   return (