Commit b5cb5982 authored by tom's avatar tom

fetch error and skeleton fix

parent b2b7616c
...@@ -19,6 +19,7 @@ import Address from 'ui/shared/address/Address'; ...@@ -19,6 +19,7 @@ import Address from 'ui/shared/address/Address';
import AddressIcon from 'ui/shared/address/AddressIcon'; import AddressIcon from 'ui/shared/address/AddressIcon';
import AddressLink from 'ui/shared/address/AddressLink'; import AddressLink from 'ui/shared/address/AddressLink';
import CopyToClipboard from 'ui/shared/CopyToClipboard'; import CopyToClipboard from 'ui/shared/CopyToClipboard';
import DataFetchAlert from 'ui/shared/DataFetchAlert';
import DetailsInfoItem from 'ui/shared/DetailsInfoItem'; import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic'; import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
import PrevNext from 'ui/shared/PrevNext'; import PrevNext from 'ui/shared/PrevNext';
...@@ -54,10 +55,14 @@ const TxDetails = () => { ...@@ -54,10 +55,14 @@ const TxDetails = () => {
}); });
}, []); }, []);
if (isLoading || isError) { if (isLoading) {
return <TxDetailsSkeleton/>; return <TxDetailsSkeleton/>;
} }
if (isError) {
return <DataFetchAlert/>;
}
return ( return (
<Grid columnGap={ 8 } rowGap={{ base: 3, lg: 3 }} templateColumns={{ base: 'minmax(0, 1fr)', lg: 'auto minmax(0, 1fr)' }}> <Grid columnGap={ 8 } rowGap={{ base: 3, lg: 3 }} templateColumns={{ base: 'minmax(0, 1fr)', lg: 'auto minmax(0, 1fr)' }}>
<DetailsInfoItem <DetailsInfoItem
...@@ -240,8 +245,7 @@ const TxDetails = () => { ...@@ -240,8 +245,7 @@ const TxDetails = () => {
<Box> <Box>
<Text as="span" fontWeight="500">Txn type: </Text> <Text as="span" fontWeight="500">Txn type: </Text>
<Text fontWeight="600" as="span">{ data.type }</Text> <Text fontWeight="600" as="span">{ data.type }</Text>
{ /* todo_tom waiting for Nikita's reply */ } { data.type === 2 && <Text fontWeight="400" as="span" ml={ 1 } variant="secondary">(EIP-1559)</Text> }
{ /* <Text fontWeight="400" as="span" ml={ 1 } variant="secondary">({ tx.type.eip })</Text> */ }
<TextSeparator/> <TextSeparator/>
</Box> </Box>
) } ) }
......
...@@ -14,6 +14,8 @@ const SkeletonRow = ({ w = '100%' }: { w?: string }) => ( ...@@ -14,6 +14,8 @@ const SkeletonRow = ({ w = '100%' }: { w?: string }) => (
); );
const TxDetailsSkeleton = () => { const TxDetailsSkeleton = () => {
const sectionGap = <GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 1, lg: 4 }}/>;
return ( return (
<Grid columnGap={ 8 } rowGap={{ base: 5, lg: 7 }} templateColumns={{ base: '1fr', lg: '210px 1fr' }} maxW="1000px"> <Grid columnGap={ 8 } rowGap={{ base: 5, lg: 7 }} templateColumns={{ base: '1fr', lg: '210px 1fr' }} maxW="1000px">
<SkeletonRow/> <SkeletonRow/>
...@@ -22,11 +24,13 @@ const TxDetailsSkeleton = () => { ...@@ -22,11 +24,13 @@ const TxDetailsSkeleton = () => {
<SkeletonRow/> <SkeletonRow/>
<SkeletonRow w="70%"/> <SkeletonRow w="70%"/>
<SkeletonRow w="70%"/> <SkeletonRow w="70%"/>
{ sectionGap }
<SkeletonRow w="40%"/> <SkeletonRow w="40%"/>
<SkeletonRow w="40%"/> <SkeletonRow w="40%"/>
<SkeletonRow w="40%"/> <SkeletonRow w="40%"/>
<SkeletonRow w="40%"/> <SkeletonRow w="40%"/>
<SkeletonRow w="40%"/> <SkeletonRow w="40%"/>
{ sectionGap }
<GridItem colSpan={{ base: undefined, lg: 2 }}> <GridItem colSpan={{ base: undefined, lg: 2 }}>
<Skeleton h={ 5 } borderRadius="full" w="100px"/> <Skeleton h={ 5 } borderRadius="full" w="100px"/>
</GridItem> </GridItem>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment