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