Skip to content

F
frontend
Commit ddef9dd1 authored by tom's avatar tom
Browse files
Options

refactor ListItemMobileGrid

parent 9c9634fc
Hide whitespace changes
Inline Side-by-side
Showing with 224 additions and 168 deletions
theme/foundations/semanticTokens.ts
View file @ ddef9dd1
...@@ -4,6 +4,10 @@ const semanticTokens = { ...@@ -4,6 +4,10 @@ const semanticTokens = {
'default': 'blackAlpha.200', 'default': 'blackAlpha.200',
_dark: 'whiteAlpha.200', _dark: 'whiteAlpha.200',
}, },
text: {
'default': 'blackAlpha.800',
_dark: 'whiteAlpha.800',
},
text_secondary: { text_secondary: {
'default': 'gray.500', 'default': 'gray.500',
_dark: 'gray.400', _dark: 'gray.400',
......
ui/deposits/DepositsListItem.tsx
View file @ ddef9dd1
...@@ -20,10 +20,11 @@ type Props = { item: DepositsItem }; ...@@ -20,10 +20,11 @@ type Props = { item: DepositsItem };
const DepositsListItem = ({ item }: Props) => { const DepositsListItem = ({ item }: Props) => {
const timeAgo = dayjs(item.l1_block_timestamp).fromNow(); const timeAgo = dayjs(item.l1_block_timestamp).fromNow();
const items = [ return (
{ <ListItemMobileGrid.Container>
name: 'L1 block No',
value: ( <ListItemMobileGrid.Label>L1 block No</ListItemMobileGrid.Label>
<ListItemMobileGrid.Value>
<LinkExternal <LinkExternal
href={ appConfig.L2.L1BaseUrl + route({ pathname: '/block/[height]', query: { height: item.l1_block_number.toString() } }) } href={ appConfig.L2.L1BaseUrl + route({ pathname: '/block/[height]', query: { height: item.l1_block_number.toString() } }) }
fontWeight={ 600 } fontWeight={ 600 }
...@@ -32,11 +33,10 @@ const DepositsListItem = ({ item }: Props) => { ...@@ -32,11 +33,10 @@ const DepositsListItem = ({ item }: Props) => {
<Icon as={ blockIcon } boxSize={ 6 } mr={ 1 }/> <Icon as={ blockIcon } boxSize={ 6 } mr={ 1 }/>
{ item.l1_block_number } { item.l1_block_number }
</LinkExternal> </LinkExternal>
), </ListItemMobileGrid.Value>
},
{ <ListItemMobileGrid.Label>L2 txn hash</ListItemMobileGrid.Label>
name: 'L2 txn hash', <ListItemMobileGrid.Value>
value: (
<LinkInternal <LinkInternal
href={ route({ pathname: '/tx/[hash]', query: { hash: item.l2_tx_hash } }) } href={ route({ pathname: '/tx/[hash]', query: { hash: item.l2_tx_hash } }) }
display="flex" display="flex"
...@@ -48,15 +48,13 @@ const DepositsListItem = ({ item }: Props) => { ...@@ -48,15 +48,13 @@ const DepositsListItem = ({ item }: Props) => {
<Icon as={ txIcon } boxSize={ 6 } mr={ 1 }/> <Icon as={ txIcon } boxSize={ 6 } mr={ 1 }/>
<Box w="calc(100% - 36px)" overflow="hidden" whiteSpace="nowrap"><HashStringShortenDynamic hash={ item.l2_tx_hash }/></Box> <Box w="calc(100% - 36px)" overflow="hidden" whiteSpace="nowrap"><HashStringShortenDynamic hash={ item.l2_tx_hash }/></Box>
</LinkInternal> </LinkInternal>
), </ListItemMobileGrid.Value>
},
{ <ListItemMobileGrid.Label>Age</ListItemMobileGrid.Label>
name: 'Age', <ListItemMobileGrid.Value>{ timeAgo }</ListItemMobileGrid.Value>
value: timeAgo,
}, <ListItemMobileGrid.Label>L1 txn hash</ListItemMobileGrid.Label>
{ <ListItemMobileGrid.Value>
name: 'L1 txn hash',
value: (
<LinkExternal <LinkExternal
href={ appConfig.L2.L1BaseUrl + route({ pathname: '/tx/[hash]', query: { hash: item.l1_tx_hash } }) } href={ appConfig.L2.L1BaseUrl + route({ pathname: '/tx/[hash]', query: { hash: item.l1_tx_hash } }) }
maxW="100%" maxW="100%"
...@@ -66,11 +64,10 @@ const DepositsListItem = ({ item }: Props) => { ...@@ -66,11 +64,10 @@ const DepositsListItem = ({ item }: Props) => {
<Icon as={ txIcon } boxSize={ 6 } mr={ 1 }/> <Icon as={ txIcon } boxSize={ 6 } mr={ 1 }/>
<Box w="calc(100% - 44px)" overflow="hidden" whiteSpace="nowrap"><HashStringShortenDynamic hash={ item.l1_tx_hash }/></Box> <Box w="calc(100% - 44px)" overflow="hidden" whiteSpace="nowrap"><HashStringShortenDynamic hash={ item.l1_tx_hash }/></Box>
</LinkExternal> </LinkExternal>
), </ListItemMobileGrid.Value>
},
{ <ListItemMobileGrid.Label>L1 txn origin</ListItemMobileGrid.Label>
name: 'L1 txn origin', <ListItemMobileGrid.Value>
value: (
<LinkExternal <LinkExternal
href={ appConfig.L2.L1BaseUrl + route({ pathname: '/address/[hash]', query: { hash: item.l1_tx_origin } }) } href={ appConfig.L2.L1BaseUrl + route({ pathname: '/address/[hash]', query: { hash: item.l1_tx_origin } }) }
maxW="100%" maxW="100%"
...@@ -80,15 +77,13 @@ const DepositsListItem = ({ item }: Props) => { ...@@ -80,15 +77,13 @@ const DepositsListItem = ({ item }: Props) => {
<AddressIcon address={{ hash: item.l1_tx_origin, is_contract: false, implementation_name: '' }} mr={ 2 }/> <AddressIcon address={{ hash: item.l1_tx_origin, is_contract: false, implementation_name: '' }} mr={ 2 }/>
<Box w="calc(100% - 44px)" overflow="hidden" whiteSpace="nowrap"><HashStringShortenDynamic hash={ item.l1_tx_origin }/></Box> <Box w="calc(100% - 44px)" overflow="hidden" whiteSpace="nowrap"><HashStringShortenDynamic hash={ item.l1_tx_origin }/></Box>
</LinkExternal> </LinkExternal>
), </ListItemMobileGrid.Value>
},
{ <ListItemMobileGrid.Label>Gas limit</ListItemMobileGrid.Label>
name: 'Gas limit', <ListItemMobileGrid.Value>{ BigNumber(item.l2_tx_gas_limit).toFormat() }</ListItemMobileGrid.Value>
value: BigNumber(item.l2_tx_gas_limit).toFormat(),
},
];
return <ListItemMobileGrid items={ items } gridTemplateColumns="92px auto"/>; </ListItemMobileGrid.Container>
);
}; };
export default DepositsListItem; export default DepositsListItem;
ui/outputRoots/OutputRootsListItem.tsx
View file @ ddef9dd1
...@@ -18,18 +18,19 @@ type Props = { item: OutputRootsItem }; ...@@ -18,18 +18,19 @@ type Props = { item: OutputRootsItem };
const OutputRootsListItem = ({ item }: Props) => { const OutputRootsListItem = ({ item }: Props) => {
const timeAgo = dayjs(item.l1_timestamp).fromNow(); const timeAgo = dayjs(item.l1_timestamp).fromNow();
const items = [ return (
{ <ListItemMobileGrid.Container>
name: 'L2 output index',
value: item.l2_output_index, <ListItemMobileGrid.Label>L2 output index</ListItemMobileGrid.Label>
}, <ListItemMobileGrid.Value fontWeight={ 600 } color="text">
{ { item.l2_output_index }
name: 'Age', </ListItemMobileGrid.Value>
value: timeAgo,
}, <ListItemMobileGrid.Label>Age</ListItemMobileGrid.Label>
{ <ListItemMobileGrid.Value>{ timeAgo }</ListItemMobileGrid.Value>
name: 'L2 block #',
value: ( <ListItemMobileGrid.Label>L2 block #</ListItemMobileGrid.Label>
<ListItemMobileGrid.Value>
<LinkInternal <LinkInternal
display="flex" display="flex"
width="fit-content" width="fit-content"
...@@ -38,11 +39,10 @@ const OutputRootsListItem = ({ item }: Props) => { ...@@ -38,11 +39,10 @@ const OutputRootsListItem = ({ item }: Props) => {
> >
{ item.l2_block_number } { item.l2_block_number }
</LinkInternal> </LinkInternal>
), </ListItemMobileGrid.Value>
},
{ <ListItemMobileGrid.Label>L1 txn hash</ListItemMobileGrid.Label>
name: 'L1 txn hash', <ListItemMobileGrid.Value>
value: (
<LinkExternal <LinkExternal
maxW="100%" maxW="100%"
display="inline-flex" display="inline-flex"
...@@ -52,20 +52,18 @@ const OutputRootsListItem = ({ item }: Props) => { ...@@ -52,20 +52,18 @@ const OutputRootsListItem = ({ item }: Props) => {
<Icon as={ txIcon } boxSize={ 6 } mr={ 1 }/> <Icon as={ txIcon } boxSize={ 6 } mr={ 1 }/>
<Box w="calc(100% - 36px)" overflow="hidden" whiteSpace="nowrap"><HashStringShortenDynamic hash={ item.l1_tx_hash }/></Box> <Box w="calc(100% - 36px)" overflow="hidden" whiteSpace="nowrap"><HashStringShortenDynamic hash={ item.l1_tx_hash }/></Box>
</LinkExternal> </LinkExternal>
), </ListItemMobileGrid.Value>
},
{ <ListItemMobileGrid.Label>Output root</ListItemMobileGrid.Label>
name: 'Output root', <ListItemMobileGrid.Value>
value: (
<Flex overflow="hidden" whiteSpace="nowrap" alignItems="center" w="100%" justifyContent="space-between"> <Flex overflow="hidden" whiteSpace="nowrap" alignItems="center" w="100%" justifyContent="space-between">
<Text variant="secondary" w="calc(100% - 24px)"><HashStringShortenDynamic hash={ item.output_root }/></Text> <Text variant="secondary" w="calc(100% - 24px)"><HashStringShortenDynamic hash={ item.output_root }/></Text>
<CopyToClipboard text={ item.output_root }/> <CopyToClipboard text={ item.output_root }/>
</Flex> </Flex>
), </ListItemMobileGrid.Value>
},
];
return <ListItemMobileGrid items={ items } gridTemplateColumns="100px auto"/>; </ListItemMobileGrid.Container>
);
}; };
export default OutputRootsListItem; export default OutputRootsListItem;
ui/shared/ListItemMobile/ListItemMobileGrid.tsx
View file @ ddef9dd1
...@@ -2,18 +2,13 @@ import { Grid, chakra, GridItem } from '@chakra-ui/react'; ...@@ -2,18 +2,13 @@ import { Grid, chakra, GridItem } from '@chakra-ui/react';
import { motion } from 'framer-motion'; import { motion } from 'framer-motion';
import React from 'react'; import React from 'react';
type Item = { interface ContainerProps {
name: string;
value: string | React.ReactNode;
}
interface Props {
items: Array<Item>;
className?: string; className?: string;
isAnimated?: boolean; isAnimated?: boolean;
children: React.ReactNode;
} }
const ListItemMobileGrid = ({ isAnimated, items, className }: Props) => { const Container = chakra(({ isAnimated, children, className }: ContainerProps) => {
return ( return (
<Grid <Grid
as={ motion.div } as={ motion.div }
...@@ -35,16 +30,46 @@ const ListItemMobileGrid = ({ isAnimated, items, className }: Props) => { ...@@ -35,16 +30,46 @@ const ListItemMobileGrid = ({ isAnimated, items, className }: Props) => {
className={ className } className={ className }
fontSize="sm" fontSize="sm"
> >
{ items.map(item => Boolean(item.value) && ( { children }
<>
<GridItem fontWeight={ 500 } lineHeight="30px">{ item.name }</GridItem>
<GridItem alignSelf="center">
{ typeof item.value === 'string' ? <chakra.span color="text_secondary">{ item.value }</chakra.span> : item.value }
</GridItem>
</>
)) }
</Grid> </Grid>
); );
});
interface LabelProps {
className?: string;
children: React.ReactNode;
}
const Label = chakra(({ children, className }: LabelProps) => {
return (
<GridItem className={ className } fontWeight={ 500 } lineHeight="20px" py="5px">
{ children }
</GridItem>
);
});
interface ValueProps {
className?: string;
children: React.ReactNode;
}
const Value = chakra(({ children, className }: ValueProps) => {
return (
<GridItem
className={ className }
py="5px"
color="text_secondary"
overflow="hidden"
>
{ children }
</GridItem>
);
});
const ListItemMobileGrid = {
Container,
Label,
Value,
}; };
export default chakra(ListItemMobileGrid); export default ListItemMobileGrid;
ui/tx/state/TxStateListItem.tsx
View file @ ddef9dd1
...@@ -17,21 +17,44 @@ const TxStateListItem = ({ data }: Props) => { ...@@ -17,21 +17,44 @@ const TxStateListItem = ({ data }: Props) => {
const { before, after, change, hint, tokenId } = getStateElements(data); const { before, after, change, hint, tokenId } = getStateElements(data);
const items = [ return (
{ name: 'Address', value: ( <ListItemMobileGrid.Container>
<Address flexGrow={ 1 } w="100%">
<AddressIcon address={ data.address }/> <ListItemMobileGrid.Label>Address</ListItemMobileGrid.Label>
<AddressLink type="address" hash={ data.address.hash } ml={ 2 } truncation="constant" mr="auto"/> <ListItemMobileGrid.Value py="3px">
{ hint } <Address flexGrow={ 1 } w="100%" alignSelf="center">
</Address> <AddressIcon address={ data.address }/>
) }, <AddressLink type="address" hash={ data.address.hash } ml={ 2 } truncation="constant" mr="auto"/>
{ name: 'Before', value: before }, { hint }
{ name: 'After', value: after }, </Address>
{ name: 'Change', value: change }, </ListItemMobileGrid.Value>
{ name: 'Token ID', value: tokenId },
]; { before && (
<>
return <ListItemMobileGrid items={ items }/>; <ListItemMobileGrid.Label>Before</ListItemMobileGrid.Label>
<ListItemMobileGrid.Value>{ before }</ListItemMobileGrid.Value>
</>
) }
{ after && (
<>
<ListItemMobileGrid.Label>After</ListItemMobileGrid.Label>
<ListItemMobileGrid.Value>{ after }</ListItemMobileGrid.Value>
</>
) }
<ListItemMobileGrid.Label>Change</ListItemMobileGrid.Label>
<ListItemMobileGrid.Value>{ change }</ListItemMobileGrid.Value>
{ tokenId && (
<>
<ListItemMobileGrid.Label>Token ID</ListItemMobileGrid.Label>
<ListItemMobileGrid.Value py="0">{ tokenId }</ListItemMobileGrid.Value>
</>
) }
</ListItemMobileGrid.Container>
);
}; };
export default TxStateListItem; export default TxStateListItem;
ui/tx/state/TxStateTokenIdList.tsx
View file @ ddef9dd1
...@@ -30,8 +30,9 @@ const TxStateTokenIdList = ({ items, tokenAddress }: Props) => { ...@@ -30,8 +30,9 @@ const TxStateTokenIdList = ({ items, tokenAddress }: Props) => {
textDecoration="underline dashed" textDecoration="underline dashed"
_hover={{ textDecoration: 'underline dashed', color: 'link_hovered' }} _hover={{ textDecoration: 'underline dashed', color: 'link_hovered' }}
onClick={ setIsCut.toggle } onClick={ setIsCut.toggle }
pb={{ base: '5px', md: 0 }}
> >
View { isCut ? 'more' : 'less' } View { isCut ? 'more' : 'less' }
</Link> </Link>
) } ) }
</Flex> </Flex>
......
ui/txnBatches/TxnBatchesListItem.tsx
View file @ ddef9dd1
...@@ -18,10 +18,11 @@ type Props = { item: TxnBatchesItem }; ...@@ -18,10 +18,11 @@ type Props = { item: TxnBatchesItem };
const TxnBatchesListItem = ({ item }: Props) => { const TxnBatchesListItem = ({ item }: Props) => {
const timeAgo = dayjs(item.l1_timestamp).fromNow(); const timeAgo = dayjs(item.l1_timestamp).fromNow();
const items = [ return (
{ <ListItemMobileGrid.Container>
name: 'L2 block #',
value: ( <ListItemMobileGrid.Label>L2 block #</ListItemMobileGrid.Label>
<ListItemMobileGrid.Value>
<LinkInternal <LinkInternal
fontWeight={ 600 } fontWeight={ 600 }
display="flex" display="flex"
...@@ -32,19 +33,17 @@ const TxnBatchesListItem = ({ item }: Props) => { ...@@ -32,19 +33,17 @@ const TxnBatchesListItem = ({ item }: Props) => {
<Icon as={ txBatchIcon } boxSize={ 6 } mr={ 1 }/> <Icon as={ txBatchIcon } boxSize={ 6 } mr={ 1 }/>
{ item.l2_block_number } { item.l2_block_number }
</LinkInternal> </LinkInternal>
), </ListItemMobileGrid.Value>
},
{ <ListItemMobileGrid.Label>L2 block txn count</ListItemMobileGrid.Label>
name: 'L2 block txn count', <ListItemMobileGrid.Value>
value: (
<LinkInternal href={ route({ pathname: '/block/[height]', query: { height: item.l2_block_number.toString(), tab: 'txs' } }) }> <LinkInternal href={ route({ pathname: '/block/[height]', query: { height: item.l2_block_number.toString(), tab: 'txs' } }) }>
{ item.tx_count } { item.tx_count }
</LinkInternal> </LinkInternal>
), </ListItemMobileGrid.Value>
},
{ <ListItemMobileGrid.Label>Epoch number</ListItemMobileGrid.Label>
name: 'Epoch number', <ListItemMobileGrid.Value>
value: (
<LinkExternal <LinkExternal
fontWeight={ 600 } fontWeight={ 600 }
display="inline-flex" display="inline-flex"
...@@ -52,11 +51,10 @@ const TxnBatchesListItem = ({ item }: Props) => { ...@@ -52,11 +51,10 @@ const TxnBatchesListItem = ({ item }: Props) => {
> >
{ item.epoch_number } { item.epoch_number }
</LinkExternal> </LinkExternal>
), </ListItemMobileGrid.Value>
},
{ <ListItemMobileGrid.Label>L1 txn hash</ListItemMobileGrid.Label>
name: 'L1 txn hash', <ListItemMobileGrid.Value>
value: (
<VStack spacing={ 3 } w="100%" overflow="hidden"> <VStack spacing={ 3 } w="100%" overflow="hidden">
{ item.l1_tx_hashes.map(hash => ( { item.l1_tx_hashes.map(hash => (
<LinkExternal <LinkExternal
...@@ -70,15 +68,13 @@ const TxnBatchesListItem = ({ item }: Props) => { ...@@ -70,15 +68,13 @@ const TxnBatchesListItem = ({ item }: Props) => {
</LinkExternal> </LinkExternal>
)) } )) }
</VStack> </VStack>
), </ListItemMobileGrid.Value>
},
{ <ListItemMobileGrid.Label>Age</ListItemMobileGrid.Label>
name: 'Age', <ListItemMobileGrid.Value>{ timeAgo }</ListItemMobileGrid.Value>
value: timeAgo,
},
];
return <ListItemMobileGrid items={ items } gridTemplateColumns="100px auto"/>; </ListItemMobileGrid.Container>
);
}; };
export default TxnBatchesListItem; export default TxnBatchesListItem;
ui/withdrawals/WithdrawalsListItem.tsx
View file @ ddef9dd1
...@@ -18,26 +18,31 @@ import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid'; ...@@ -18,26 +18,31 @@ import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
type Props = { item: WithdrawalsItem }; type Props = { item: WithdrawalsItem };
const WithdrawalsListItem = ({ item }: Props) => { const WithdrawalsListItem = ({ item }: Props) => {
const timeAgo = item.l2_timestamp ? dayjs(item.l2_timestamp).fromNow() : ''; const timeAgo = item.l2_timestamp ? dayjs(item.l2_timestamp).fromNow() : null;
const timeToEnd = item.challenge_period_end ? dayjs(item.challenge_period_end).fromNow(true) + ' left' : ''; const timeToEnd = item.challenge_period_end ? dayjs(item.challenge_period_end).fromNow(true) + ' left' : null;
const items = [ return (
{ <ListItemMobileGrid.Container>
name: 'Msg nonce',
value: item.msg_nonce_version + '-' + item.msg_nonce, <ListItemMobileGrid.Label>Msg nonce</ListItemMobileGrid.Label>
}, <ListItemMobileGrid.Value>
{ { item.msg_nonce_version + '-' + item.msg_nonce }
name: 'From', </ListItemMobileGrid.Value>
value: item.from ? (
<Address> { item.from && (
<AddressIcon address={ item.from }/> <>
<AddressLink hash={ item.from?.hash } type="address" truncation="dynamic" ml={ 2 }/> <ListItemMobileGrid.Label>From</ListItemMobileGrid.Label>
</Address> <ListItemMobileGrid.Value>
) : null, <Address>
}, <AddressIcon address={ item.from }/>
{ <AddressLink hash={ item.from.hash } type="address" truncation="dynamic" ml={ 2 }/>
name: 'L2 txn hash', </Address>
value: ( </ListItemMobileGrid.Value>
</>
) }
<ListItemMobileGrid.Label>L2 txn hash</ListItemMobileGrid.Label>
<ListItemMobileGrid.Value>
<LinkInternal <LinkInternal
href={ route({ pathname: '/tx/[hash]', query: { hash: item.l2_tx_hash } }) } href={ route({ pathname: '/tx/[hash]', query: { hash: item.l2_tx_hash } }) }
display="flex" display="flex"
...@@ -49,39 +54,48 @@ const WithdrawalsListItem = ({ item }: Props) => { ...@@ -49,39 +54,48 @@ const WithdrawalsListItem = ({ item }: Props) => {
<Icon as={ txIcon } boxSize={ 6 } mr={ 1 }/> <Icon as={ txIcon } boxSize={ 6 } mr={ 1 }/>
<Box w="calc(100% - 36px)" overflow="hidden" whiteSpace="nowrap"><HashStringShortenDynamic hash={ item.l2_tx_hash }/></Box> <Box w="calc(100% - 36px)" overflow="hidden" whiteSpace="nowrap"><HashStringShortenDynamic hash={ item.l2_tx_hash }/></Box>
</LinkInternal> </LinkInternal>
), </ListItemMobileGrid.Value>
},
{ { timeAgo && (
name: 'Age', <>
value: timeAgo, <ListItemMobileGrid.Label>Age</ListItemMobileGrid.Label>
}, <ListItemMobileGrid.Value>{ timeAgo }</ListItemMobileGrid.Value>
{ </>
name: 'Status', ) }
value: item.status === 'Ready for relay' ?
<LinkExternal href={ appConfig.L2.withdrawalUrl }>{ item.status }</LinkExternal> : <ListItemMobileGrid.Label>Status</ListItemMobileGrid.Label>
item.status, <ListItemMobileGrid.Value>
}, { item.status === 'Ready for relay' ?
{ <LinkExternal href={ appConfig.L2.withdrawalUrl }>{ item.status }</LinkExternal> :
name: 'L1 txn hash', item.status }
value: item.l1_tx_hash ? ( </ListItemMobileGrid.Value>
<LinkExternal
href={ appConfig.L2.L1BaseUrl + route({ pathname: '/tx/[hash]', query: { hash: item.l1_tx_hash } }) } { item.l1_tx_hash && (
maxW="100%" <>
display="inline-flex" <ListItemMobileGrid.Label>L1 txn hash</ListItemMobileGrid.Label>
overflow="hidden" <ListItemMobileGrid.Value>
> <LinkExternal
<Icon as={ txIcon } boxSize={ 6 } mr={ 1 }/> href={ appConfig.L2.L1BaseUrl + route({ pathname: '/tx/[hash]', query: { hash: item.l1_tx_hash } }) }
<Box w="calc(100% - 44px)" overflow="hidden" whiteSpace="nowrap"><HashStringShortenDynamic hash={ item.l1_tx_hash }/></Box> maxW="100%"
</LinkExternal> display="inline-flex"
) : null, overflow="hidden"
}, >
{ <Icon as={ txIcon } boxSize={ 6 } mr={ 1 }/>
name: 'Time left', <Box w="calc(100% - 44px)" overflow="hidden" whiteSpace="nowrap"><HashStringShortenDynamic hash={ item.l1_tx_hash }/></Box>
value: timeToEnd, </LinkExternal>
}, </ListItemMobileGrid.Value>
]; </>
) }
{ timeToEnd && (
<>
<ListItemMobileGrid.Label>Time left</ListItemMobileGrid.Label>
<ListItemMobileGrid.Value>{ timeToEnd }</ListItemMobileGrid.Value>
</>
) }
return <ListItemMobileGrid items={ items } gridTemplateColumns="92px auto"/>; </ListItemMobileGrid.Container>
);
}; };
export default WithdrawalsListItem; export default WithdrawalsListItem;
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