Skip to content

F
frontend
Commit 46b0eaad authored by isstuev's avatar isstuev
Browse files
Options

fix home skeleton

parent 6015bb72
Hide whitespace changes
Inline Side-by-side
Showing with 86 additions and 90 deletions
ui/home/LatestTxsItem.tsx
View file @ 46b0eaad
...@@ -14,7 +14,6 @@ import appConfig from 'configs/app/config'; ...@@ -14,7 +14,6 @@ import appConfig from 'configs/app/config';
import rightArrowIcon from 'icons/arrows/east.svg'; import rightArrowIcon from 'icons/arrows/east.svg';
import transactionIcon from 'icons/transactions.svg'; import transactionIcon from 'icons/transactions.svg';
import getValueWithUnit from 'lib/getValueWithUnit'; import getValueWithUnit from 'lib/getValueWithUnit';
import useIsMobile from 'lib/hooks/useIsMobile';
import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement'; import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
import Address from 'ui/shared/address/Address'; import Address from 'ui/shared/address/Address';
import AddressIcon from 'ui/shared/address/AddressIcon'; import AddressIcon from 'ui/shared/address/AddressIcon';
...@@ -33,16 +32,15 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => { ...@@ -33,16 +32,15 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => {
const dataTo = tx.to ? tx.to : tx.created_contract; const dataTo = tx.to ? tx.to : tx.created_contract;
const timeAgo = useTimeAgoIncrement(tx.timestamp || '0', true); const timeAgo = useTimeAgoIncrement(tx.timestamp || '0', true);
const isMobile = useIsMobile(); return (
<>
if (isMobile) {
return (
<Box <Box
width="100%" width="100%"
borderTop="1px solid" borderTop="1px solid"
borderColor="divider" borderColor="divider"
py={ 4 } py={ 4 }
_last={{ borderBottom: '1px solid', borderColor: 'divider' }} _last={{ borderBottom: '1px solid', borderColor: 'divider' }}
display={{ base: 'block', lg: 'none' }}
> >
<Flex justifyContent="space-between"> <Flex justifyContent="space-between">
<HStack> <HStack>
...@@ -127,103 +125,101 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => { ...@@ -127,103 +125,101 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => {
<Text as="span" variant="secondary">{ getValueWithUnit(tx.fee.value).dp(5).toFormat() }</Text> <Text as="span" variant="secondary">{ getValueWithUnit(tx.fee.value).dp(5).toFormat() }</Text>
</Skeleton> </Skeleton>
</Box> </Box>
); <Box
} width="100%"
minW="700px"
return ( borderTop="1px solid"
<Box borderColor="divider"
width="100%" p={ 4 }
minW="700px" _last={{ borderBottom: '1px solid', borderColor: 'divider' }}
borderTop="1px solid" display={{ base: 'none', lg: 'block' }}
borderColor="divider" >
p={ 4 } <Grid width="100%" gridTemplateColumns="3fr 2fr 150px" gridGap={ 8 }>
_last={{ borderBottom: '1px solid', borderColor: 'divider' }} <Flex overflow="hidden" w="100%">
> <TxAdditionalInfo tx={ tx } isLoading={ isLoading }/>
<Grid width="100%" gridTemplateColumns="3fr 2fr 150px" gridGap={ 8 }> <Box ml={ 3 } w="calc(100% - 40px)">
<Flex overflow="hidden" w="100%"> <HStack>
<TxAdditionalInfo tx={ tx } isLoading={ isLoading }/> <TxType types={ tx.tx_types } isLoading={ isLoading }/>
<Box ml={ 3 } w="calc(100% - 40px)"> <TxStatus status={ tx.status } errorText={ tx.status === 'error' ? tx.result : undefined } isLoading={ isLoading }/>
<HStack> </HStack>
<TxType types={ tx.tx_types } isLoading={ isLoading }/> <Flex
<TxStatus status={ tx.status } errorText={ tx.status === 'error' ? tx.result : undefined } isLoading={ isLoading }/> mt={ 2 }
</HStack> alignItems="center"
<Flex >
mt={ 2 } <Icon
alignItems="center" as={ transactionIcon }
> boxSize="30px"
<Icon color="link"
as={ transactionIcon } display="inline"
boxSize="30px"
color="link"
display="inline"
isLoading={ isLoading }
borderRadius="base"
/>
<Address overflow="hidden" w="calc(100% - 130px)" maxW="calc(100% - 130px)" ml={ 2 } mr={ 2 }>
<AddressLink
hash={ tx.hash }
type="transaction"
fontWeight="700"
isLoading={ isLoading } isLoading={ isLoading }
borderRadius="base"
/> />
</Address> <Address overflow="hidden" w="calc(100% - 130px)" maxW="calc(100% - 130px)" ml={ 2 } mr={ 2 }>
{ tx.timestamp && ( <AddressLink
<Skeleton isLoaded={ !isLoading } color="text_secondary" fontWeight="400" fontSize="sm"> hash={ tx.hash }
<span>{ timeAgo }</span> type="transaction"
</Skeleton> fontWeight="700"
) } isLoading={ isLoading }
</Flex> />
</Box> </Address>
</Flex> { tx.timestamp && (
<Grid alignItems="center" templateColumns="24px auto"> <Skeleton isLoaded={ !isLoading } color="text_secondary" fontWeight="400" fontSize="sm">
<Icon <span>{ timeAgo }</span>
as={ rightArrowIcon } </Skeleton>
boxSize={ 6 } ) }
color="gray.500" </Flex>
transform="rotate(90deg)" </Box>
isLoading={ isLoading } </Flex>
/> <Grid alignItems="center" templateColumns="24px auto">
<Box overflow="hidden" ml={ 1 }> <Icon
<Address mb={ 2 }> as={ rightArrowIcon }
<AddressIcon address={ tx.from } isLoading={ isLoading }/> boxSize={ 6 }
<AddressLink color="gray.500"
type="address" transform="rotate(90deg)"
hash={ tx.from.hash } isLoading={ isLoading }
alias={ tx.from.name } />
fontWeight="500" <Box overflow="hidden" ml={ 1 }>
ml={ 2 } <Address mb={ 2 }>
fontSize="sm" <AddressIcon address={ tx.from } isLoading={ isLoading }/>
isLoading={ isLoading }
/>
</Address>
{ dataTo && (
<Address>
<AddressIcon address={ dataTo } isLoading={ isLoading }/>
<AddressLink <AddressLink
type="address" type="address"
hash={ dataTo.hash } hash={ tx.from.hash }
alias={ dataTo.name } alias={ tx.from.name }
fontWeight="500" fontWeight="500"
ml={ 2 } ml={ 2 }
fontSize="sm" fontSize="sm"
isLoading={ isLoading } isLoading={ isLoading }
/> />
</Address> </Address>
) } { dataTo && (
<Address>
<AddressIcon address={ dataTo } isLoading={ isLoading }/>
<AddressLink
type="address"
hash={ dataTo.hash }
alias={ dataTo.name }
fontWeight="500"
ml={ 2 }
fontSize="sm"
isLoading={ isLoading }
/>
</Address>
) }
</Box>
</Grid>
<Box>
<Skeleton isLoaded={ !isLoading } mb={ 2 }>
<Text as="span" whiteSpace="pre">{ appConfig.network.currency.symbol } </Text>
<Text as="span" variant="secondary">{ getValueWithUnit(tx.value).dp(5).toFormat() }</Text>
</Skeleton>
<Skeleton isLoaded={ !isLoading }>
<Text as="span">Fee </Text>
<Text as="span" variant="secondary">{ getValueWithUnit(tx.fee.value).dp(5).toFormat() }</Text>
</Skeleton>
</Box> </Box>
</Grid> </Grid>
<Box> </Box>
<Skeleton isLoaded={ !isLoading } mb={ 2 }> </>
<Text as="span" whiteSpace="pre">{ appConfig.network.currency.symbol } </Text>
<Text as="span" variant="secondary">{ getValueWithUnit(tx.value).dp(5).toFormat() }</Text>
</Skeleton>
<Skeleton isLoaded={ !isLoading }>
<Text as="span">Fee </Text>
<Text as="span" variant="secondary">{ getValueWithUnit(tx.fee.value).dp(5).toFormat() }</Text>
</Skeleton>
</Box>
</Grid>
</Box>
); );
}; };
......
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