Skip to content

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

fix

parent 46b0eaad
Hide whitespace changes
Inline Side-by-side
Showing with 207 additions and 161 deletions
ui/home/LatestTxs.tsx
View file @ fcbb46d0
...@@ -10,6 +10,7 @@ import LinkInternal from 'ui/shared/LinkInternal'; ...@@ -10,6 +10,7 @@ import LinkInternal from 'ui/shared/LinkInternal';
import SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice'; import SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice';
import LatestTxsItem from './LatestTxsItem'; import LatestTxsItem from './LatestTxsItem';
import LatestTxsItemMobile from './LatestTxsItemMobile';
const LatestTransactions = () => { const LatestTransactions = () => {
const isMobile = useIsMobile(); const isMobile = useIsMobile();
...@@ -31,7 +32,16 @@ const LatestTransactions = () => { ...@@ -31,7 +32,16 @@ const LatestTransactions = () => {
return ( return (
<> <>
<SocketNewItemsNotice borderBottomRadius={ 0 } url={ txsUrl } num={ num } alert={ socketAlert } isLoading={ isPlaceholderData }/> <SocketNewItemsNotice borderBottomRadius={ 0 } url={ txsUrl } num={ num } alert={ socketAlert } isLoading={ isPlaceholderData }/>
<Box mb={{ base: 3, lg: 4 }}> <Box mb={ 3 } display={{ base: 'block', lg: 'none' }}>
{ data.slice(0, txsCount).map(((tx, index) => (
<LatestTxsItemMobile
key={ tx.hash + (isPlaceholderData ? index : '') }
tx={ tx }
isLoading={ isPlaceholderData }
/>
))) }
</Box>
<Box mb={ 4 } display={{ base: 'none', lg: 'block' }}>
{ data.slice(0, txsCount).map(((tx, index) => ( { data.slice(0, txsCount).map(((tx, index) => (
<LatestTxsItem <LatestTxsItem
key={ tx.hash + (isPlaceholderData ? index : '') } key={ tx.hash + (isPlaceholderData ? index : '') }
......
ui/home/LatestTxsItem.tsx
View file @ fcbb46d0
...@@ -33,193 +33,100 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => { ...@@ -33,193 +33,100 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => {
const timeAgo = useTimeAgoIncrement(tx.timestamp || '0', true); const timeAgo = useTimeAgoIncrement(tx.timestamp || '0', true);
return ( return (
<> <Box
<Box width="100%"
width="100%" minW="700px"
borderTop="1px solid" borderTop="1px solid"
borderColor="divider" borderColor="divider"
py={ 4 } p={ 4 }
_last={{ borderBottom: '1px solid', borderColor: 'divider' }} _last={{ borderBottom: '1px solid', borderColor: 'divider' }}
display={{ base: 'block', lg: 'none' }} display={{ base: 'none', lg: 'block' }}
> >
<Flex justifyContent="space-between"> <Grid width="100%" gridTemplateColumns="3fr 2fr 150px" gridGap={ 8 }>
<HStack> <Flex overflow="hidden" w="100%">
<TxType types={ tx.tx_types } isLoading={ isLoading }/> <TxAdditionalInfo tx={ tx } isLoading={ isLoading }/>
<TxStatus status={ tx.status } errorText={ tx.status === 'error' ? tx.result : undefined } isLoading={ isLoading }/> <Box ml={ 3 } w="calc(100% - 40px)">
</HStack> <HStack>
<TxAdditionalInfo tx={ tx } isMobile isLoading={ isLoading }/> <TxType types={ tx.tx_types } isLoading={ isLoading }/>
</Flex> <TxStatus status={ tx.status } errorText={ tx.status === 'error' ? tx.result : undefined } isLoading={ isLoading }/>
<Flex </HStack>
mt={ 2 } <Flex
alignItems="center" mt={ 2 }
width="100%" alignItems="center"
justifyContent="space-between" >
mb={ 6 } <Icon
> as={ transactionIcon }
<Flex mr={ 3 }> boxSize="30px"
<Icon color="link"
as={ transactionIcon } display="inline"
boxSize="30px"
mr={ 2 }
color="link"
isLoading={ isLoading }
/>
<Address width="100%">
<AddressLink
hash={ tx.hash }
type="transaction"
fontWeight="700"
truncation="constant"
isLoading={ isLoading } isLoading={ isLoading }
borderRadius="base"
/> />
</Address> <Address overflow="hidden" w="calc(100% - 130px)" maxW="calc(100% - 130px)" ml={ 2 } mr={ 2 }>
</Flex> <AddressLink
{ tx.timestamp && ( hash={ tx.hash }
<Skeleton isLoaded={ !isLoading } color="text_secondary" fontWeight="400" fontSize="sm"> type="transaction"
<span>{ timeAgo }</span> fontWeight="700"
</Skeleton> isLoading={ isLoading }
) } />
</Address>
{ tx.timestamp && (
<Skeleton isLoaded={ !isLoading } color="text_secondary" fontWeight="400" fontSize="sm">
<span>{ timeAgo }</span>
</Skeleton>
) }
</Flex>
</Box>
</Flex> </Flex>
<Flex alignItems="center" mb={ 3 }> <Grid alignItems="center" templateColumns="24px auto">
<Address mr={ 2 }>
<AddressIcon address={ tx.from } isLoading={ isLoading }/>
<AddressLink
type="address"
hash={ tx.from.hash }
alias={ tx.from.name }
fontWeight="500"
ml={ 2 }
truncation="constant"
fontSize="sm"
isLoading={ isLoading }
/>
</Address>
<Icon <Icon
as={ rightArrowIcon } as={ rightArrowIcon }
boxSize={ 6 } boxSize={ 6 }
color="gray.500" color="gray.500"
transform="rotate(90deg)"
isLoading={ isLoading } isLoading={ isLoading }
/> />
{ dataTo && ( <Box overflow="hidden" ml={ 1 }>
<Address ml={ 2 }> <Address mb={ 2 }>
<AddressIcon address={ dataTo } isLoading={ isLoading }/> <AddressIcon address={ tx.from } 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 }
truncation="constant"
fontSize="sm" fontSize="sm"
isLoading={ isLoading } isLoading={ isLoading }
/> />
</Address> </Address>
) } { dataTo && (
</Flex> <Address>
<Skeleton isLoaded={ !isLoading } mb={ 2 } fontSize="sm" w="fit-content"> <AddressIcon address={ dataTo } isLoading={ isLoading }/>
<Text as="span">Value { appConfig.network.currency.symbol } </Text>
<Text as="span" variant="secondary">{ getValueWithUnit(tx.value).dp(5).toFormat() }</Text>
</Skeleton>
<Skeleton isLoaded={ !isLoading } fontSize="sm" w="fit-content">
<Text as="span">Fee { appConfig.network.currency.symbol } </Text>
<Text as="span" variant="secondary">{ getValueWithUnit(tx.fee.value).dp(5).toFormat() }</Text>
</Skeleton>
</Box>
<Box
width="100%"
minW="700px"
borderTop="1px solid"
borderColor="divider"
p={ 4 }
_last={{ borderBottom: '1px solid', borderColor: 'divider' }}
display={{ base: 'none', lg: 'block' }}
>
<Grid width="100%" gridTemplateColumns="3fr 2fr 150px" gridGap={ 8 }>
<Flex overflow="hidden" w="100%">
<TxAdditionalInfo tx={ tx } isLoading={ isLoading }/>
<Box ml={ 3 } w="calc(100% - 40px)">
<HStack>
<TxType types={ tx.tx_types } isLoading={ isLoading }/>
<TxStatus status={ tx.status } errorText={ tx.status === 'error' ? tx.result : undefined } isLoading={ isLoading }/>
</HStack>
<Flex
mt={ 2 }
alignItems="center"
>
<Icon
as={ transactionIcon }
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 }
/>
</Address>
{ tx.timestamp && (
<Skeleton isLoaded={ !isLoading } color="text_secondary" fontWeight="400" fontSize="sm">
<span>{ timeAgo }</span>
</Skeleton>
) }
</Flex>
</Box>
</Flex>
<Grid alignItems="center" templateColumns="24px auto">
<Icon
as={ rightArrowIcon }
boxSize={ 6 }
color="gray.500"
transform="rotate(90deg)"
isLoading={ isLoading }
/>
<Box overflow="hidden" ml={ 1 }>
<Address mb={ 2 }>
<AddressIcon address={ tx.from } isLoading={ isLoading }/>
<AddressLink <AddressLink
type="address" type="address"
hash={ tx.from.hash } hash={ dataTo.hash }
alias={ tx.from.name } alias={ dataTo.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>
); );
}; };
......
ui/home/LatestTxsItemMobile.tsx 0 → 100644
View file @ fcbb46d0
import {
Box,
Flex,
HStack,
Text,
Skeleton,
} from '@chakra-ui/react';
import React from 'react';
import type { Transaction } from 'types/api/transaction';
import appConfig from 'configs/app/config';
import rightArrowIcon from 'icons/arrows/east.svg';
import transactionIcon from 'icons/transactions.svg';
import getValueWithUnit from 'lib/getValueWithUnit';
import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
import Address from 'ui/shared/address/Address';
import AddressIcon from 'ui/shared/address/AddressIcon';
import AddressLink from 'ui/shared/address/AddressLink';
import Icon from 'ui/shared/chakra/Icon';
import TxStatus from 'ui/shared/TxStatus';
import TxAdditionalInfo from 'ui/txs/TxAdditionalInfo';
import TxType from 'ui/txs/TxType';
type Props = {
tx: Transaction;
isLoading?: boolean;
}
const LatestTxsItem = ({ tx, isLoading }: Props) => {
const dataTo = tx.to ? tx.to : tx.created_contract;
const timeAgo = useTimeAgoIncrement(tx.timestamp || '0', true);
return (
<Box
width="100%"
borderTop="1px solid"
borderColor="divider"
py={ 4 }
_last={{ borderBottom: '1px solid', borderColor: 'divider' }}
display={{ base: 'block', lg: 'none' }}
>
<Flex justifyContent="space-between">
<HStack>
<TxType types={ tx.tx_types } isLoading={ isLoading }/>
<TxStatus status={ tx.status } errorText={ tx.status === 'error' ? tx.result : undefined } isLoading={ isLoading }/>
</HStack>
<TxAdditionalInfo tx={ tx } isMobile isLoading={ isLoading }/>
</Flex>
<Flex
mt={ 2 }
alignItems="center"
width="100%"
justifyContent="space-between"
mb={ 6 }
>
<Flex mr={ 3 }>
<Icon
as={ transactionIcon }
boxSize="30px"
mr={ 2 }
color="link"
isLoading={ isLoading }
/>
<Address width="100%">
<AddressLink
hash={ tx.hash }
type="transaction"
fontWeight="700"
truncation="constant"
isLoading={ isLoading }
/>
</Address>
</Flex>
{ tx.timestamp && (
<Skeleton isLoaded={ !isLoading } color="text_secondary" fontWeight="400" fontSize="sm">
<span>{ timeAgo }</span>
</Skeleton>
) }
</Flex>
<Flex alignItems="center" mb={ 3 }>
<Address mr={ 2 }>
<AddressIcon address={ tx.from } isLoading={ isLoading }/>
<AddressLink
type="address"
hash={ tx.from.hash }
alias={ tx.from.name }
fontWeight="500"
ml={ 2 }
truncation="constant"
fontSize="sm"
isLoading={ isLoading }
/>
</Address>
<Icon
as={ rightArrowIcon }
boxSize={ 6 }
color="gray.500"
isLoading={ isLoading }
/>
{ dataTo && (
<Address ml={ 2 }>
<AddressIcon address={ dataTo } isLoading={ isLoading }/>
<AddressLink
type="address"
hash={ dataTo.hash }
alias={ dataTo.name }
fontWeight="500"
ml={ 2 }
truncation="constant"
fontSize="sm"
isLoading={ isLoading }
/>
</Address>
) }
</Flex>
<Skeleton isLoaded={ !isLoading } mb={ 2 } fontSize="sm" w="fit-content">
<Text as="span">Value { appConfig.network.currency.symbol } </Text>
<Text as="span" variant="secondary">{ getValueWithUnit(tx.value).dp(5).toFormat() }</Text>
</Skeleton>
<Skeleton isLoaded={ !isLoading } fontSize="sm" w="fit-content">
<Text as="span">Fee { appConfig.network.currency.symbol } </Text>
<Text as="span" variant="secondary">{ getValueWithUnit(tx.fee.value).dp(5).toFormat() }</Text>
</Skeleton>
</Box>
);
};
export default React.memo(LatestTxsItem);
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