Merge pull request #14 from lukso-network/fix/thinking-aloud

Fix/thinking aloud
lukso-network · Jan 24, 2024 · 0fd0692 · 0fd0692
2 parents f94184d + 114d468
commit 0fd0692
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 64 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 (

diff --git a/ui/shared/entities/address/IdenticonUniversalProfileQuery.tsx b/ui/shared/entities/address/IdenticonUniversalProfileQuery.tsx
@@ -1,7 +1,7 @@
-import { Box } from '@chakra-ui/react';
-import type { QueryClient } from '@tanstack/react-query';
-import { useQueryClient } from '@tanstack/react-query';
-import React, { useEffect, useState } from 'react';
+import { Box, Skeleton } from '@chakra-ui/react';
+import type { UseQueryResult } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
+import React from 'react';
 
 import type { UniversalProfileProxyResponse } from '../../../../types/api/universalProfile';
 
@@ -17,19 +17,20 @@ export const formattedLuksoName = (hash: string, name: string | null) => {
   return `@${ name } (${ hash })`;
 };
 
-export const getUniversalProfile = async(address: string, queryClient: QueryClient) => {
-  if (!isUniversalProfileEnabled()) {
-    return undefined;
-  }
-  const query = queryClient.getQueryData<UniversalProfileProxyResponse>([ 'universalProfile', { address: address } ]);
-  if (query !== undefined) {
-    return query;
-  }
-
-  return await queryClient.fetchQuery({
-    queryKey: [ 'universalProfile', { address: address } ],
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const useUniversalProfile = (address: string): UseQueryResult<UniversalProfileProxyResponse | null> => {
+  return useQuery({
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
+    retryOnMount: false,
+    staleTime: 60 * 60 * 1000,
+    queryKey: [ 'universalProfile', { address } ],
     queryFn: async() => {
-      const upApiUrl = getEnvValue('NEXT_PUBLIC_UNIVERSAL_PROFILES_API_URL') || '';
+      if (!isUniversalProfileEnabled() || /0x0+$/i.test(address)) {
+        return null;
+      }
+      const upApiUrl =
+        getEnvValue('NEXT_PUBLIC_UNIVERSAL_PROFILES_API_URL') || '';
       const networkId = getEnvValue('NEXT_PUBLIC_NETWORK_ID') || '42';
 
       const url = `${ upApiUrl }/v1/${ networkId }/address/${ address }`;
@@ -38,46 +39,41 @@ export const getUniversalProfile = async(address: string, queryClient: QueryClie
         const json = await resp.json();
         return json as UniversalProfileProxyResponse;
       } catch (err) {
-        return undefined;
+        return null;
       }
     },
   });
 };
 
-export const IdenticonUniversalProfile: React.FC<Props> = ({ address, fallbackIcon }) => {
-  const [ up, setUp ] = useState({} as UniversalProfileProxyResponse);
-  const queryClient = useQueryClient();
-  useEffect(() => {
-    (async() => {
-      const upData = await getUniversalProfile(address, queryClient);
-      if (upData !== undefined) {
-        setUp(upData);
-
-        return;
-      }
-    })();
-  }, [ address, setUp, queryClient ]);
-
-  if (up === undefined || up.LSP3Profile === undefined) {
-    return fallbackIcon;
-  }
+export const IdenticonUniversalProfile: React.FC<Props> = ({
+  address,
+  fallbackIcon,
+}) => {
+  const { data: up, isLoading } = useUniversalProfile(address);
 
   let profileImageUrl = '';
-  if (up.LSP3Profile.profileImage !== null) {
-    const lastImageIndex = Object.values(up.LSP3Profile.profileImage).length - 1;
+  if (up?.LSP3Profile?.profileImage !== null && up?.hasProfileImage) {
+    const lastImageIndex =
+      Object.values(up?.LSP3Profile?.profileImage || {}).length - 1;
 
-    profileImageUrl = up.hasProfileImage ? up.LSP3Profile.profileImage[lastImageIndex].url : '';
+    profileImageUrl = up?.hasProfileImage ?
+      up?.LSP3Profile?.profileImage[lastImageIndex].url :
+      '';
   }
 
   return (
-    <Box mr={ 2 }>
-      <lukso-profile
-        size="x-small"
-        profile-url={ profileImageUrl }
-        profile-address={ address }
-        has-identicon={ true }
-      ></lukso-profile>
-    </Box>
+    <Skeleton isLoaded={ !isLoading }>
+      { profileImageUrl ? (
+        <Box mx={ 2 }>
+          <lukso-profile
+            size="x-small"
+            profile-url={ profileImageUrl }
+            profile-address={ address }
+            has-identicon={ true }
+          ></lukso-profile>
+        </Box>
+      ) : fallbackIcon }
+    </Skeleton>
   );
 };