lux/explore
2
0
Fork 0
mirror of https://github.com/luxfi/explore.git synced 2026-09-24 00:28:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix loading state for the address hash in address page subtitle (#2752)

Browse Source 
* fix loading state for the address hash in address page subtitle

* fix ts
This commit is contained in:
tom goriunov
2025-06-04 14:31:37 +02:00
committed by GitHub
parent 319b2bcb07
commit 65df67cc56
5 changed files with 29 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/address/AddressDetails.tsx
+18 -17
View File
@@ -31,9 +31,10 @@ import type { AddressQuery } from './utils/useAddressQuery';
interface Props {
addressQuery: AddressQuery;
isLoading?: boolean;
}
const AddressDetails = ({ addressQuery }: Props) => {
const AddressDetails = ({ addressQuery, isLoading }: Props) => {
const router = useRouter();
const addressHash = getQueryParamString(router.query.hash);
@@ -85,9 +86,9 @@ const AddressDetails = ({ addressQuery }: Props) => {
return (
<>
{ addressQuery.isDegradedData && <ServiceDegradationWarning isLoading={ addressQuery.isPlaceholderData } mb={ 6 }/> }
{ addressQuery.isDegradedData && <ServiceDegradationWarning isLoading={ isLoading } mb={ 6 }/> }
<DetailedInfo.Container templateColumns={{ base: 'minmax(0, 1fr)', lg: 'auto minmax(0, 1fr)' }} >
<AddressAlternativeFormat isLoading={ addressQuery.isPlaceholderData } addressHash={ addressHash }/>
<AddressAlternativeFormat isLoading={ isLoading } addressHash={ addressHash }/>
{ data.filecoin?.id && (
<>
@@ -133,13 +134,13 @@ const AddressDetails = ({ addressQuery }: Props) => {
</>
) }
<AddressNameInfo data={ data } isLoading={ addressQuery.isPlaceholderData }/>
<AddressNameInfo data={ data } isLoading={ isLoading }/>
{ data.is_contract && data.creation_transaction_hash && (creatorAddressHash) && (
<>
<DetailedInfo.ItemLabel
hint="Transaction and address of creation"
isLoading={ addressQuery.isPlaceholderData }
isLoading={ isLoading }
>
Creator
</DetailedInfo.ItemLabel>
@@ -154,15 +155,15 @@ const AddressDetails = ({ addressQuery }: Props) => {
</DetailedInfo.ItemValue>
</>
) }
{ !addressQuery.isPlaceholderData && data.is_contract && data.implementations && data.implementations?.length > 0 && (
{ !isLoading && data.is_contract && data.implementations && data.implementations?.length > 0 && (
<AddressImplementations
data={ data.implementations }
isLoading={ addressQuery.isPlaceholderData }
isLoading={ isLoading }
proxyType={ data.proxy_type }
/>
) }
<AddressBalance data={ data } isLoading={ addressQuery.isPlaceholderData }/>
<AddressBalance data={ data } isLoading={ isLoading }/>
{ data.has_tokens && (
<>
@@ -180,12 +181,12 @@ const AddressDetails = ({ addressQuery }: Props) => {
<>
<DetailedInfo.ItemLabel
hint="Total net worth in USD of all tokens for the address"
isLoading={ addressQuery.isPlaceholderData }
isLoading={ isLoading }
>
Net worth
</DetailedInfo.ItemLabel>
<DetailedInfo.ItemValue alignSelf="center" py={ 0 }>
<AddressNetWorth addressData={ addressQuery.data } addressHash={ addressHash } isLoading={ addressQuery.isPlaceholderData }/>
<AddressNetWorth addressData={ addressQuery.data } addressHash={ addressHash } isLoading={ isLoading }/>
</DetailedInfo.ItemValue>
</>
)
@@ -193,7 +194,7 @@ const AddressDetails = ({ addressQuery }: Props) => {
<DetailedInfo.ItemLabel
hint="Number of transactions related to this address"
isLoading={ addressQuery.isPlaceholderData || countersQuery.isPlaceholderData }
isLoading={ isLoading || countersQuery.isPlaceholderData }
>
Transactions
</DetailedInfo.ItemLabel>
@@ -214,7 +215,7 @@ const AddressDetails = ({ addressQuery }: Props) => {
<>
<DetailedInfo.ItemLabel
hint="Number of transfers to/from this address"
isLoading={ addressQuery.isPlaceholderData || countersQuery.isPlaceholderData }
isLoading={ isLoading || countersQuery.isPlaceholderData }
>
Transfers
</DetailedInfo.ItemLabel>
@@ -237,7 +238,7 @@ const AddressDetails = ({ addressQuery }: Props) => {
<>
<DetailedInfo.ItemLabel
hint="Gas used by the address"
isLoading={ addressQuery.isPlaceholderData || countersQuery.isPlaceholderData }
isLoading={ isLoading || countersQuery.isPlaceholderData }
>
Gas used
</DetailedInfo.ItemLabel>
@@ -266,7 +267,7 @@ const AddressDetails = ({ addressQuery }: Props) => {
<>
<DetailedInfo.ItemLabel
hint={ `Number of blocks ${ getNetworkValidationActionText() } by this ${ getNetworkValidatorTitle() }` }
isLoading={ addressQuery.isPlaceholderData || countersQuery.isPlaceholderData }
isLoading={ isLoading || countersQuery.isPlaceholderData }
>
{ `Blocks ${ getNetworkValidationActionText() }` }
</DetailedInfo.ItemLabel>
@@ -289,20 +290,20 @@ const AddressDetails = ({ addressQuery }: Props) => {
<>
<DetailedInfo.ItemLabel
hint="Block number in which the address was updated"
isLoading={ addressQuery.isPlaceholderData }
isLoading={ isLoading }
>
Last balance update
</DetailedInfo.ItemLabel>
<DetailedInfo.ItemValue>
<BlockEntity
number={ data.block_number_balance_updated_at }
isLoading={ addressQuery.isPlaceholderData }
isLoading={ isLoading }
/>
</DetailedInfo.ItemValue>
</>
) }
<DetailedInfoSponsoredItem isLoading={ addressQuery.isPlaceholderData }/>
<DetailedInfoSponsoredItem isLoading={ isLoading }/>
</DetailedInfo.Container>
</>
);
ui/address/details/AddressAlternativeFormat.tsx
+1 -1
View File
@@ -7,7 +7,7 @@ import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
interface Props {
isLoading: boolean;
isLoading?: boolean;
addressHash: string;
}
ui/address/details/AddressBalance.tsx
+1 -1
View File
@@ -15,7 +15,7 @@ import NativeTokenIcon from 'ui/shared/NativeTokenIcon';
interface Props {
data: Pick<Address, 'block_number_balance_updated_at' | 'coin_balance' | 'hash' | 'exchange_rate'>;
isLoading: boolean;
isLoading?: boolean;
}
const AddressBalance = ({ data, isLoading }: Props) => {
ui/address/details/AddressNameInfo.tsx
+1 -1
View File
@@ -8,7 +8,7 @@ import TokenEntity from 'ui/shared/entities/token/TokenEntity';
interface Props {
data: Pick<Address, 'name' | 'token' | 'is_contract'>;
isLoading: boolean;
isLoading?: boolean;
}
const AddressNameInfo = ({ data, isLoading }: Props) => {
ui/pages/Address.tsx
+8 -2
View File
@@ -155,7 +155,7 @@ const AddressPageContent = () => {
{
id: 'index',
title: 'Details',
component: <AddressDetails addressQuery={ addressQuery }/>,
component: <AddressDetails addressQuery={ addressQuery } isLoading={ isTabsLoading }/>,
},
addressQuery.data?.is_contract ? {
id: 'contract',
@@ -370,7 +370,13 @@ const AddressPageContent = () => {
// API always returns hash in check-summed format except for addresses that are not in the database
// In this case it returns 404 with empty payload, so we calculate check-summed hash on the client
const checkSummedHash = React.useMemo(() => addressQuery.data?.hash ?? getCheckedSummedAddress(hash), [ hash, addressQuery.data?.hash ]);
const checkSummedHash = React.useMemo(() => {
if (isLoading) {
return getCheckedSummedAddress(hash);
}
return addressQuery.data?.hash ?? getCheckedSummedAddress(hash);
}, [ hash, addressQuery.data?.hash, isLoading ]);
const titleSecondRow = (
<Flex alignItems="center" w="100%" columnGap={ 2 } rowGap={ 2 } flexWrap={{ base: 'wrap', lg: 'nowrap' }}>