Skip to content

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

latest txs redesign

parent 28f21c4a
Hide whitespace changes
Inline Side-by-side
Showing with 190 additions and 84 deletions
ui/home/LatestTxsItem.tsx
View file @ d62e8503
...@@ -4,6 +4,7 @@ import { ...@@ -4,6 +4,7 @@ import {
HStack, HStack,
Icon, Icon,
Text, Text,
Grid,
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
...@@ -32,54 +33,141 @@ const LatestTxsItem = ({ tx }: Props) => { ...@@ -32,54 +33,141 @@ const LatestTxsItem = ({ tx }: Props) => {
const isMobile = useIsMobile(); const isMobile = useIsMobile();
if (isMobile) {
return (
<Box
width="100%"
borderTop="1px solid"
borderColor="divider"
py={ 4 }
_last={{ borderBottom: '1px solid', borderColor: 'divider' }}
>
<Flex justifyContent="space-between">
<HStack>
<TxType types={ tx.tx_types }/>
<TxStatus status={ tx.status } errorText={ tx.status === 'error' ? tx.result : undefined }/>
</HStack>
<TxAdditionalInfo tx={ tx } isMobile/>
</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"
/>
<Address width="100%">
<AddressLink
hash={ tx.hash }
type="transaction"
fontWeight="700"
truncation="constant"
/>
</Address>
</Flex>
{ tx.timestamp && <Text variant="secondary" fontWeight="400" fontSize="sm">{ timeAgo }</Text> }
</Flex>
<Flex alignItems="center" mb={ 3 }>
<Address>
<AddressIcon address={ tx.from }/>
<AddressLink
type="address"
hash={ tx.from.hash }
alias={ tx.from.name }
fontWeight="500"
ml={ 2 }
truncation="constant"
fontSize="sm"
/>
</Address>
<Icon
as={ rightArrowIcon }
boxSize={ 6 }
mx={ 2 }
color="gray.500"
/>
{ dataTo && (
<Address>
<AddressIcon address={ dataTo }/>
<AddressLink
type="address"
hash={ dataTo.hash }
alias={ dataTo.name }
fontWeight="500"
ml={ 2 }
truncation="constant"
fontSize="sm"
/>
</Address>
) }
</Flex>
<Box mb={ 2 } fontSize="sm">
<Text as="span">Value { appConfig.network.currency.symbol } </Text>
<Text as="span" variant="secondary">{ getValueWithUnit(tx.value).dp(5).toFormat() }</Text>
</Box>
<Box fontSize="sm">
<Text as="span">Fee { appConfig.network.currency.symbol } </Text>
<Text as="span" variant="secondary">{ getValueWithUnit(tx.fee.value).dp(5).toFormat() }</Text>
</Box>
</Box>
);
}
return ( return (
<Box <Box
width="100%" width="100%"
minW="700px"
borderTop="1px solid" borderTop="1px solid"
borderColor="divider" borderColor="divider"
py={ 4 } p={ 4 }
px={{ base: 0, lg: 4 }}
_last={{ borderBottom: '1px solid', borderColor: 'divider' }} _last={{ borderBottom: '1px solid', borderColor: 'divider' }}
> >
<Flex justifyContent="space-between" width="100%" alignItems="start" flexDirection={{ base: 'column', lg: 'row' }}> <Grid width="100%" gridTemplateColumns="3fr 2fr 150px" gridGap={ 8 }>
{ !isMobile && <Flex mr={ 3 }><TxAdditionalInfo tx={ tx }/></Flex> } <Flex overflow="hidden" w="100%">
<Box width={{ base: '100%', lg: 'calc(50% - 32px)' }}> <TxAdditionalInfo tx={ tx }/>
<Flex justifyContent="space-between"> <Box ml={ 3 } w="calc(100% - 40px)">
<HStack> <HStack>
<TxType types={ tx.tx_types }/> <TxType types={ tx.tx_types }/>
<TxStatus status={ tx.status } errorText={ tx.status === 'error' ? tx.result : undefined }/> <TxStatus status={ tx.status } errorText={ tx.status === 'error' ? tx.result : undefined }/>
</HStack> </HStack>
{ isMobile && <TxAdditionalInfo tx={ tx } isMobile/> } <Flex
</Flex> mt={ 2 }
<Flex alignItems="center"
mt={ 2 } >
alignItems="center"
width="100%"
justifyContent={{ base: 'space-between', lg: 'start' }}
mb={{ base: 6, lg: 0 }}
>
<Flex mr={ 3 }>
<Icon <Icon
as={ transactionIcon } as={ transactionIcon }
boxSize="30px" boxSize="30px"
mr={ 2 }
color="link" color="link"
display="inline"
mr={ 2 }
/> />
<Address width="100%"> <Address overflow="hidden" w="calc(100% - 130px)" maxW="calc(100% - 130px)" mr={ 2 }>
<AddressLink <AddressLink
hash={ tx.hash } hash={ tx.hash }
type="transaction" type="transaction"
fontWeight="700" fontWeight="700"
truncation="constant"
/> />
</Address> </Address>
{ tx.timestamp && <Text variant="secondary" fontWeight="400" fontSize="sm">{ timeAgo }</Text> }
</Flex> </Flex>
{ tx.timestamp && <Text variant="secondary" fontWeight="400" fontSize="sm">{ timeAgo }</Text> } </Box>
</Flex> </Flex>
</Box> <Grid alignItems="center" templateColumns="24px auto">
<Box width={{ base: '100%', lg: '50%' }}> <Icon
<Flex alignItems="center" mb={ 3 } justifyContent={{ base: 'start', lg: 'end' }}> as={ rightArrowIcon }
<Address> boxSize={ 6 }
color="gray.500"
transform="rotate(90deg)"
/>
<Box overflow="hidden" ml={ 1 }>
<Address mb={ 2 }>
<AddressIcon address={ tx.from }/> <AddressIcon address={ tx.from }/>
<AddressLink <AddressLink
type="address" type="address"
...@@ -87,16 +175,9 @@ const LatestTxsItem = ({ tx }: Props) => { ...@@ -87,16 +175,9 @@ const LatestTxsItem = ({ tx }: Props) => {
alias={ tx.from.name } alias={ tx.from.name }
fontWeight="500" fontWeight="500"
ml={ 2 } ml={ 2 }
truncation="constant"
fontSize="sm" fontSize="sm"
/> />
</Address> </Address>
<Icon
as={ rightArrowIcon }
boxSize={ 6 }
mx={ 2 }
color="gray.500"
/>
{ dataTo && ( { dataTo && (
<Address> <Address>
<AddressIcon address={ dataTo }/> <AddressIcon address={ dataTo }/>
...@@ -106,24 +187,23 @@ const LatestTxsItem = ({ tx }: Props) => { ...@@ -106,24 +187,23 @@ const LatestTxsItem = ({ tx }: Props) => {
alias={ dataTo.name } alias={ dataTo.name }
fontWeight="500" fontWeight="500"
ml={ 2 } ml={ 2 }
truncation="constant"
fontSize="sm" fontSize="sm"
/> />
</Address> </Address>
) } ) }
</Flex> </Box>
<Flex fontSize="sm" justifyContent="end" flexDirection={{ base: 'column', lg: 'row' }}> </Grid>
<Box mr={{ base: 0, lg: 3 }} mb={{ base: 2, lg: 0 }}> <Box>
<Text as="span">Value { appConfig.network.currency.symbol } </Text> <Box mb={ 2 }>
<Text as="span" variant="secondary">{ getValueWithUnit(tx.value).dp(5).toFormat() }</Text> <Text as="span" whiteSpace="pre">{ appConfig.network.currency.symbol } </Text>
</Box> <Text as="span" variant="secondary">{ getValueWithUnit(tx.value).dp(5).toFormat() }</Text>
<Box> </Box>
<Text as="span">Fee { appConfig.network.currency.symbol } </Text> <Box>
<Text as="span" variant="secondary">{ getValueWithUnit(tx.fee.value).dp(5).toFormat() }</Text> <Text as="span">Fee </Text>
</Box> <Text as="span" variant="secondary">{ getValueWithUnit(tx.fee.value).dp(5).toFormat() }</Text>
</Flex> </Box>
</Box> </Box>
</Flex> </Grid>
</Box> </Box>
); );
}; };
......
ui/home/LatestTxsItemSkeleton.tsx
View file @ d62e8503
...@@ -17,39 +17,63 @@ const LatestTxsItemSkeleton = () => { ...@@ -17,39 +17,63 @@ const LatestTxsItemSkeleton = () => {
px={{ base: 0, lg: 4 }} px={{ base: 0, lg: 4 }}
_last={{ borderBottom: '1px solid', borderColor: 'divider' }} _last={{ borderBottom: '1px solid', borderColor: 'divider' }}
> >
<Flex justifyContent="space-between" width="100%" alignItems="start" flexDirection={{ base: 'column', lg: 'row' }}> <Box width="100%" display={{ base: 'block', lg: 'none' }}>
<Box width="100%"> <HStack spacing={ 2 }>
<HStack spacing={ 2 }> <Skeleton w="101px" h="24px"/>
<Skeleton w="101px" h="24px"/> <Skeleton w="101px" h="24px"/>
<Skeleton w="101px" h="24px"/> </HStack>
</HStack> <Flex
<Flex mt={ 2 }
mt={ 2 } alignItems="center"
alignItems="center" width="100%"
width="100%" justifyContent="space-between"
justifyContent={{ base: 'space-between', lg: 'start' }} mb={ 6 }
mb={{ base: 6, lg: 0 }} >
> <Flex mr={ 3 } alignItems="center">
<Flex mr={ 3 } alignItems="center"> <Skeleton w="30px" h="30px" mr={ 2 }/>
<Skeleton w="101px" h="12px"/>
</Flex>
<Skeleton w="40px" h="12px"/>
</Flex>
<Flex alignItems="center" mb={ 3 }>
<SkeletonCircle w="30px" h="30px" mr={ 2 }/>
<Skeleton w="101px" h="12px" mr={ 5 }/>
<SkeletonCircle w="30px" h="30px" mr={ 2 }/>
<Skeleton w="101px" h="12px"/>
</Flex>
<Skeleton w="123px" h="12px" mb={ 2 } mt={ 3 }/>
<Skeleton w="123px" h="12px"/>
</Box>
<Box display={{ base: 'none', lg: 'grid' }} width="100%" gridTemplateColumns="3fr 2fr 150px" gridGap={ 8 }>
<Flex w="100%">
<Skeleton w={ 5 } h={ 5 } mr={ 3 }/>
<Box w="100%">
<HStack>
<Skeleton w="101px" h="24px"/>
<Skeleton w="101px" h="24px"/>
</HStack>
<Flex alignItems="center" mt={ 2 }>
<Skeleton w="30px" h="30px" mr={ 2 }/> <Skeleton w="30px" h="30px" mr={ 2 }/>
<Skeleton w="101px" h="12px"/> <Skeleton w="calc(100% - 100px)" h="20px" mr={ 5 }/>
<Skeleton w="40px" h="16px"/>
</Flex> </Flex>
<Skeleton w="40px" h="12px"/> </Box>
</Flex> </Flex>
</Box>
<Box> <Box>
<Flex alignItems="center" mb={ 3 }> <Flex alignItems="center" mb={ 2 } mt={ 1 }>
<SkeletonCircle w="30px" h="30px" mr={ 2 }/> <SkeletonCircle w="24px" h="24px" mr={ 2 }/>
<Skeleton w="101px" h="12px" mr={ 5 }/> <Skeleton w="100%" h="16px"/>
<SkeletonCircle w="30px" h="30px" mr={ 2 }/>
<Skeleton w="101px" h="12px"/>
</Flex> </Flex>
<Flex fontSize="sm" mt={ 3 } justifyContent="end" flexDirection={{ base: 'column', lg: 'row' }}> <Flex alignItems="center">
<Skeleton w="123px" h="12px" mr={{ base: 0, lg: 9 }} mb={{ base: 2, lg: 0 }}/> <SkeletonCircle w="24px" h="24px" mr={ 2 }/>
<Skeleton w="123px" h="12px"/> <Skeleton w="100%" h="16px"/>
</Flex> </Flex>
</Box> </Box>
</Flex> <Box>
<Skeleton w="123px" h="16px" mb={ 4 } mt={ 2 }/>
<Skeleton w="123px" h="16px"/>
</Box>
</Box>
</Box> </Box>
); );
}; };
......
ui/txs/TxsTable.tsx
View file @ d62e8503
...@@ -47,7 +47,7 @@ const TxsTable = ({ ...@@ -47,7 +47,7 @@ const TxsTable = ({
<Th width="20%">Method</Th> <Th width="20%">Method</Th>
{ showBlockInfo && <Th width="18%">Block</Th> } { showBlockInfo && <Th width="18%">Block</Th> }
<Th width={{ xl: '132px', base: '66px' }}>From</Th> <Th width={{ xl: '132px', base: '66px' }}>From</Th>
<Th width={{ xl: currentAddress ? '48px' : '36px', base: '0' }}></Th> <Th width={{ xl: currentAddress ? '48px' : '36px', base: currentAddress ? '52px' : '28px' }}></Th>
<Th width={{ xl: '132px', base: '66px' }}>To</Th> <Th width={{ xl: '132px', base: '66px' }}>To</Th>
<Th width="20%" isNumeric> <Th width="20%" isNumeric>
<Link onClick={ sort('val') } display="flex" justifyContent="end"> <Link onClick={ sort('val') } display="flex" justifyContent="end">
......
ui/txs/TxsTableItem.tsx
View file @ d62e8503
import { import {
Box,
Tr, Tr,
Td, Td,
Tag, Tag,
...@@ -8,6 +7,7 @@ import { ...@@ -8,6 +7,7 @@ import {
Text, Text,
Show, Show,
Hide, Hide,
Flex,
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import { motion } from 'framer-motion'; import { motion } from 'framer-motion';
import { route } from 'nextjs-routes'; import { route } from 'nextjs-routes';
...@@ -44,14 +44,14 @@ const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement } ...@@ -44,14 +44,14 @@ const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement }
const timeAgo = useTimeAgoIncrement(tx.timestamp, enableTimeIncrement); const timeAgo = useTimeAgoIncrement(tx.timestamp, enableTimeIncrement);
const addressFrom = ( const addressFrom = (
<Address> <Address w="100%">
<AddressIcon address={ tx.from }/> <AddressIcon address={ tx.from }/>
<AddressLink type="address" hash={ tx.from.hash } alias={ tx.from.name } fontWeight="500" ml={ 2 } truncation="constant" isDisabled={ isOut }/> <AddressLink type="address" hash={ tx.from.hash } alias={ tx.from.name } fontWeight="500" ml={ 2 } truncation="constant" isDisabled={ isOut }/>
</Address> </Address>
); );
const addressTo = dataTo ? ( const addressTo = dataTo ? (
<Address> <Address w="100%">
<AddressIcon address={ dataTo }/> <AddressIcon address={ dataTo }/>
<AddressLink type="address" hash={ dataTo.hash } alias={ dataTo.name } fontWeight="500" ml={ 2 } truncation="constant" isDisabled={ isIn }/> <AddressLink type="address" hash={ dataTo.hash } alias={ dataTo.name } fontWeight="500" ml={ 2 } truncation="constant" isDisabled={ isIn }/>
</Address> </Address>
...@@ -117,21 +117,23 @@ const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement } ...@@ -117,21 +117,23 @@ const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement }
</Show> </Show>
<Hide above="xl" ssr={ false }> <Hide above="xl" ssr={ false }>
<Td colSpan={ 3 }> <Td colSpan={ 3 }>
<Box> <Flex alignItems="center">
{ addressFrom }
{ (isIn || isOut) ? { (isIn || isOut) ?
<InOutTag isIn={ isIn } isOut={ isOut } width="48px" my={ 2 }/> : ( <InOutTag isIn={ isIn } isOut={ isOut } width="48px"/> :
(
<Icon <Icon
as={ rightArrowIcon } as={ rightArrowIcon }
boxSize={ 6 } boxSize={ 6 }
mt={ 2 }
mb={ 1 }
color="gray.500" color="gray.500"
transform="rotate(90deg)" transform="rotate(90deg)"
/> />
) } )
{ addressTo } }
</Box> <VStack alignItems="start" overflow="hidden" ml={ 1 }>
{ addressFrom }
{ addressTo }
</VStack>
</Flex>
</Td> </Td>
</Hide> </Hide>
<Td isNumeric> <Td isNumeric>
......
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