diff --git a/ui/shared/entities/address/AddressEntity.tsx b/ui/shared/entities/address/AddressEntity.tsx index 32e6e1fd13..6533caf71a 100644 --- 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 & Pick; const Content = chakra((props: ContentProps) => { - const queryClient = useQueryClient(); - const [ upName, setUpName ] = useState(''); if (props.address.name) { const label = ( @@ -123,20 +120,8 @@ const Content = chakra((props: ContentProps) => { ); } - 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 index bbe268b0d7..e4bbd075a7 100644 --- 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([ '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 => { + 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 = ({ 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 = ({ + 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 ( - - - + + { profileImageUrl ? ( + + + + ) : fallbackIcon } + ); };