design-fixes

ui/address/blocksValidated/AddressBlocksValidatedListItem.tsx

@@ -9,7 +9,7 @@ import appConfig from 'configs/app/config';
 import getBlockTotalReward from 'lib/block/getBlockTotalReward';
 import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
 import LinkInternal from 'ui/shared/LinkInternal';
-import ListItemMobile from 'ui/shared/ListItemMobile';
+import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 import Utilization from 'ui/shared/Utilization/Utilization';
 
 type Props = Block & {

ui/address/coinBalance/AddressCoinBalanceListItem.tsx

@@ -11,7 +11,7 @@ import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
 import Address from 'ui/shared/address/Address';
 import AddressLink from 'ui/shared/address/AddressLink';
 import LinkInternal from 'ui/shared/LinkInternal';
-import ListItemMobile from 'ui/shared/ListItemMobile';
+import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 
 type Props = AddressCoinBalanceHistoryItem & {
   page: number;

ui/address/internals/AddressIntTxsListItem.tsx

@@ -13,7 +13,7 @@ import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
 import InOutTag from 'ui/shared/InOutTag';
 import LinkInternal from 'ui/shared/LinkInternal';
-import ListItemMobile from 'ui/shared/ListItemMobile';
+import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 import TxStatus from 'ui/shared/TxStatus';
 import { TX_INTERNALS_ITEMS } from 'ui/tx/internals/utils';
 

ui/address/tokens/TokensListItem.tsx

@@ -6,7 +6,7 @@ import type { AddressTokenBalance } from 'types/api/address';
 import getCurrencyValue from 'lib/getCurrencyValue';
 import AddressLink from 'ui/shared/address/AddressLink';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
-import ListItemMobile from 'ui/shared/ListItemMobile';
+import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 import TokenLogo from 'ui/shared/TokenLogo';
 
 import AddressAddToMetaMask from '../details/AddressAddToMetaMask';

ui/addresses/AddressesListItem.tsx

@@ -8,7 +8,7 @@ import appConfig from 'configs/app/config';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
-import ListItemMobile from 'ui/shared/ListItemMobile';
+import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 
 type Props = {
   item: AddressesItem;

ui/apiKey/ApiKeyTable/ApiKeyListItem.tsx

@@ -3,7 +3,7 @@ import React, { useCallback } from 'react';
 import type { ApiKey } from 'types/api/account';
 
 import ApiKeySnippet from 'ui/shared/ApiKeySnippet';
-import ListItemMobile from 'ui/shared/ListItemMobile';
+import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 import TableItemActionButtons from 'ui/shared/TableItemActionButtons';
 
 interface Props {

ui/blocks/BlocksListItem.tsx

@@ -15,7 +15,7 @@ import BlockTimestamp from 'ui/blocks/BlockTimestamp';
 import AddressLink from 'ui/shared/address/AddressLink';
 import GasUsedToTargetRatio from 'ui/shared/GasUsedToTargetRatio';
 import LinkInternal from 'ui/shared/LinkInternal';
-import ListItemMobile from 'ui/shared/ListItemMobile';
+import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 import Utilization from 'ui/shared/Utilization/Utilization';
 
 interface Props {

ui/customAbi/CustomAbiTable/CustomAbiListItem.tsx

@@ -3,7 +3,7 @@ import React, { useCallback } from 'react';
 import type { CustomAbi } from 'types/api/account';
 
 import AddressSnippet from 'ui/shared/AddressSnippet';
-import ListItemMobile from 'ui/shared/ListItemMobile';
+import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 import TableItemActionButtons from 'ui/shared/TableItemActionButtons';
 
 interface Props {

ui/outputRoots/OutputRootsListItem.tsx

-import { Box, Flex, Text, HStack, Icon } from '@chakra-ui/react';
+import { Box, Flex, Text, Icon } from '@chakra-ui/react';
 import { route } from 'nextjs-routes';
 import React from 'react';
 
@@ -6,26 +6,30 @@ import type { OutputRootsItem } from 'types/api/outputRoots';
 
 import appConfig from 'configs/app/config';
 import txIcon from 'icons/transactions.svg';
-import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
+import dayjs from 'lib/date/dayjs';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 import LinkExternal from 'ui/shared/LinkExternal';
 import LinkInternal from 'ui/shared/LinkInternal';
-import ListItemMobile from 'ui/shared/ListItemMobile';
+import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
 
 type Props = { item: OutputRootsItem };
 
 const OutputRootsListItem = ({ item }: Props) => {
-  const timeAgo = useTimeAgoIncrement(item.l1_timestamp, false);
+  const timeAgo = dayjs(item.l1_timestamp).fromNow();
 
-  return (
-    <ListItemMobile rowGap={ 3 }>
-      <Flex alignItems="center" justifyContent="space-between" w="100%">
-        #{ item.l2_output_index }
-        { item.l1_timestamp && <Text variant="secondary" fontWeight="400" fontSize="sm">{ timeAgo }</Text> }
-      </Flex>
-      <HStack spacing={ 3 }>
-        <Text fontSize="sm" fontWeight={ 500 }>L2 block</Text>
+  const items = [
+    {
+      name: 'L2 output index',
+      value: item.l2_output_index,
+    },
+    {
+      name: 'Age',
+      value: timeAgo,
+    },
+    {
+      name: 'L2 block #',
+      value: (
         <LinkInternal
           display="flex"
           width="fit-content"
@@ -34,20 +38,33 @@ const OutputRootsListItem = ({ item }: Props) => {
         >
           { item.l2_block_number }
         </LinkInternal>
-      </HStack>
-      <HStack spacing={ 3 } width="100%">
-        <Text fontSize="sm" fontWeight={ 500 } whiteSpace="nowrap">Output root</Text>
-        <Flex overflow="hidden" whiteSpace="nowrap" alignItems="center" w="100%">
-          <Text variant="secondary" w="calc(100% - 36px)"><HashStringShortenDynamic hash={ item.output_root }/></Text>
-          <CopyToClipboard text={ item.output_root } ml={ 2 }/>
+      ),
+    },
+    {
+      name: 'L1 txn hash',
+      value: (
+        <LinkExternal
+          w="100%"
+          overflow="hidden"
+          href={ appConfig.L2.L1BaseUrl + route({ pathname: '/tx/[hash]', query: { hash: item.l1_tx_hash } }) }
+        >
+          <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: (
+        <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>
-      </HStack>
-      <LinkExternal w="100%" href={ appConfig.L2.L1BaseUrl + route({ pathname: '/tx/[hash]', query: { hash: item.l1_tx_hash } }) }>
-        <Icon as={ txIcon } boxSize={ 6 } mr={ 1 }/>
-        <Box w="calc(100% - 36px)" overflow="hidden" whiteSpace="nowrap"><HashStringShortenDynamic hash={ item.l1_tx_hash }/></Box>
-      </LinkExternal>
-    </ListItemMobile>
-  );
+      ),
+    },
+  ];
+
+  return <ListItemMobileGrid items={ items } gridTemplateColumns="100px auto"/>;
 };
 
 export default OutputRootsListItem;

ui/outputRoots/OutputRootsTableItem.tsx

@@ -7,7 +7,7 @@ import type { OutputRootsItem } from 'types/api/outputRoots';
 import appConfig from 'configs/app/config';
 import txIcon from 'icons/transactions.svg';
 import txBatchIcon from 'icons/txBatch.svg';
-import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
+import dayjs from 'lib/date/dayjs';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 import LinkExternal from 'ui/shared/LinkExternal';
@@ -16,7 +16,7 @@ import LinkInternal from 'ui/shared/LinkInternal';
 type Props = { item: OutputRootsItem };
 
 const OutputRootsTableItem = ({ item }: Props) => {
-  const timeAgo = useTimeAgoIncrement(item.l1_timestamp, false);
+  const timeAgo = dayjs(item.l1_timestamp).fromNow();
 
   return (
     <Tr>

ui/pages/OutputRoots.pw.tsx

@@ -9,7 +9,7 @@ import OutputRoots from './OutputRoots';
 
 const OUTPUT_ROOTS_API_URL = buildApiUrl('output_roots');
 
-test('base view +@dark-mode', async({ mount, page }) => {
+test('base view +@mobile', async({ mount, page }) => {
   await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
     status: 200,
     body: '',

ui/pages/Withdrawals.pw.tsx

@@ -9,7 +9,7 @@ import Withdrawals from './Withdrawals';
 
 const WITHDRAWALS_API_URL = buildApiUrl('withdrawals');
 
-test('base view +@dark-mode', async({ mount, page }) => {
+test('base view +@mobile', async({ mount, page }) => {
   await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
     status: 200,
     body: '',

ui/privateTags/AddressTagTable/AddressTagListItem.tsx

@@ -4,7 +4,7 @@ import React, { useCallback } from 'react';
 import type { AddressTag } from 'types/api/account';
 
 import AddressSnippet from 'ui/shared/AddressSnippet';
-import ListItemMobile from 'ui/shared/ListItemMobile';
+import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 import TableItemActionButtons from 'ui/shared/TableItemActionButtons';
 
 interface Props {

ui/privateTags/TransactionTagTable/TransactionTagListItem.tsx

@@ -3,7 +3,7 @@ import React, { useCallback } from 'react';
 
 import type { TransactionTag } from 'types/api/account';
 
-import ListItemMobile from 'ui/shared/ListItemMobile';
+import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 import TableItemActionButtons from 'ui/shared/TableItemActionButtons';
 import TransactionSnippet from 'ui/shared/TransactionSnippet';
 

ui/publicTags/PublicTagTable/PublicTagListItem.tsx

@@ -4,7 +4,7 @@ import React, { useCallback } from 'react';
 import type { PublicTag } from 'types/api/account';
 
 import AddressSnippet from 'ui/shared/AddressSnippet';
-import ListItemMobile from 'ui/shared/ListItemMobile';
+import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 import TableItemActionButtons from 'ui/shared/TableItemActionButtons';
 import TruncatedTextTooltip from 'ui/shared/TruncatedTextTooltip';
 

ui/searchResults/SearchResultListItem.tsx

@@ -13,7 +13,7 @@ import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 import LinkInternal from 'ui/shared/LinkInternal';
-import ListItemMobile from 'ui/shared/ListItemMobile';
+import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 import TokenLogo from 'ui/shared/TokenLogo';
 
 interface Props {

ui/shared/ListItemMobile/ListItemMobileGrid.tsx

+import { Grid, Text, chakra } 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>;
+  className?: string;
+  isAnimated?: boolean;
+}
+
+const ListItemMobileGrid = ({ isAnimated, items, className }: Props) => {
+  return (
+    <Grid
+      as={ motion.div }
+      w="100%"
+      initial={ isAnimated ? { opacity: 0, scale: 0.97 } : { opacity: 1, scale: 1 } }
+      animate={{ opacity: 1, scale: 1 }}
+      transitionDuration="normal"
+      transitionTimingFunction="linear"
+      rowGap={ 4 }
+      columnGap={ 2 }
+      gridTemplateColumns="max-content auto"
+      paddingY={ 6 }
+      borderColor="divider"
+      borderTopWidth="1px"
+      _last={{
+        borderBottomWidth: '1px',
+      }}
+      className={ className }
+      fontSize="sm"
+    >
+      { items.map(item => Boolean(item.value) && (
+        <>
+          <Text >{ item.name }</Text>
+          { typeof item.value === 'string' ? <Text variant="secondary">{ item.value }</Text> : item.value }
+        </>
+      )) }
+    </Grid>
+  );
+};
+
+export default chakra(ListItemMobileGrid);

ui/shared/TokenTransfer/TokenTransferListItem.tsx

@@ -11,7 +11,7 @@ import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
 import InOutTag from 'ui/shared/InOutTag';
-import ListItemMobile from 'ui/shared/ListItemMobile';
+import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 import TokenSnippet from 'ui/shared/TokenSnippet/TokenSnippet';
 import { getTokenTransferTypeText } from 'ui/shared/TokenTransfer/helpers';
 import TokenTransferNft from 'ui/shared/TokenTransfer/TokenTransferNft';

ui/token/TokenHolders/TokenHoldersListItem.tsx

@@ -7,7 +7,7 @@ import type { TokenHolder, TokenInfo } from 'types/api/token';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
-import ListItemMobile from 'ui/shared/ListItemMobile';
+import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 import Utilization from 'ui/shared/Utilization/Utilization';
 
 interface Props {

ui/token/TokenTransfer/TokenTransferListItem.tsx

@@ -11,7 +11,7 @@ import trimTokenSymbol from 'lib/token/trimTokenSymbol';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
-import ListItemMobile from 'ui/shared/ListItemMobile';
+import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 import TokenTransferNft from 'ui/shared/TokenTransfer/TokenTransferNft';
 
 type Props = TokenTransfer & {tokenId?: string};

ui/tokens/TokensListItem.tsx

@@ -7,7 +7,7 @@ import getCurrencyValue from 'lib/getCurrencyValue';
 import AddressAddToMetaMask from 'ui/address/details/AddressAddToMetaMask';
 import AddressLink from 'ui/shared/address/AddressLink';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
-import ListItemMobile from 'ui/shared/ListItemMobile';
+import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 import TokenLogo from 'ui/shared/TokenLogo';
 
 type Props = {

ui/tx/internals/TxInternalsListItem.tsx

@@ -9,7 +9,7 @@ import eastArrowIcon from 'icons/arrows/east.svg';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
-import ListItemMobile from 'ui/shared/ListItemMobile';
+import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 import TxStatus from 'ui/shared/TxStatus';
 import { TX_INTERNALS_ITEMS } from 'ui/tx/internals/utils';
 

ui/tx/state/TxStateListItem.tsx

@@ -11,7 +11,7 @@ import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle';
 import Address from 'ui/shared/address/Address';
 // import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
-import ListItemMobile from 'ui/shared/ListItemMobile';
+import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 
 import TxStateStorageItem from './TxStateStorageItem';
 

ui/txnBatches/TxnBatchesListItem.tsx

-import { Box, Flex, Text, HStack, Icon, VStack } from '@chakra-ui/react';
+import { Box, Icon, VStack } from '@chakra-ui/react';
 import { route } from 'nextjs-routes';
 import React from 'react';
 
@@ -7,20 +7,21 @@ import type { TxnBatchesItem } from 'types/api/txnBatches';
 import appConfig from 'configs/app/config';
 import txIcon from 'icons/transactions.svg';
 import txBatchIcon from 'icons/txBatch.svg';
-import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
+import dayjs from 'lib/date/dayjs';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 import LinkExternal from 'ui/shared/LinkExternal';
 import LinkInternal from 'ui/shared/LinkInternal';
-import ListItemMobile from 'ui/shared/ListItemMobile';
+import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
 
 type Props = { item: TxnBatchesItem };
 
 const TxnBatchesListItem = ({ item }: Props) => {
-  const timeAgo = useTimeAgoIncrement(item.l1_tx_timestamp, false);
+  const timeAgo = dayjs(item.l1_tx_timestamp).fromNow();
 
-  return (
-    <ListItemMobile rowGap={ 3 }>
-      <Flex alignItems="center" justifyContent="space-between" w="100%">
+  const items = [
+    {
+      name: 'L2 block #',
+      value: (
         <LinkInternal
           fontWeight={ 600 }
           display="flex"
@@ -31,34 +32,51 @@ const TxnBatchesListItem = ({ item }: Props) => {
           <Icon as={ txBatchIcon } boxSize={ 6 } mr={ 1 }/>
           { item.l2_block_number }
         </LinkInternal>
-        <Text variant="secondary" fontWeight="400" fontSize="sm">{ timeAgo }</Text>
-      </Flex>
-      <HStack spacing={ 3 } width="100%">
-        <Text fontSize="sm" fontWeight={ 500 } whiteSpace="nowrap">L2 block txn count</Text>
+      ),
+    },
+    {
+      name: 'L2 block txn count',
+      value: (
         <LinkInternal href={ route({ pathname: '/block/[height]', query: { height: item.l2_block_number.toString(), tab: 'txs' } }) }>
           { item.tx_count }
         </LinkInternal>
-      </HStack>
-      <HStack spacing={ 3 }>
-        <Text fontSize="sm" fontWeight={ 500 }>Epoch number</Text>
-        <LinkExternal href={ appConfig.L2.L1BaseUrl + route({ pathname: '/block/[height]', query: { height: item.epoch_number.toString() } }) }>
+      ),
+    },
+    {
+      name: 'Epoch number',
+      value: (
+        <LinkExternal
+          fontWeight={ 600 }
+          href={ appConfig.L2.L1BaseUrl + route({ pathname: '/block/[height]', query: { height: item.epoch_number.toString() } }) }
+        >
           { item.epoch_number }
         </LinkExternal>
-      </HStack>
-      <VStack spacing={ 3 } w="100%">
-        { item.l1_tx_hashes.map(hash => (
-          <LinkExternal
-            w="100%"
-            href={ appConfig.L2.L1BaseUrl + route({ pathname: '/tx/[hash]', query: { hash: hash } }) }
-            key={ hash }
-          >
-            <Icon as={ txIcon } boxSize={ 6 } mr={ 1 }/>
-            <Box w="calc(100% - 36px)" overflow="hidden" whiteSpace="nowrap"><HashStringShortenDynamic hash={ hash }/></Box>
-          </LinkExternal>
-        )) }
-      </VStack>
-    </ListItemMobile>
-  );
+      ),
+    },
+    {
+      name: 'L1 txn hash',
+      value: (
+        <VStack spacing={ 3 } w="100%" overflow="hidden">
+          { item.l1_tx_hashes.map(hash => (
+            <LinkExternal
+              w="100%"
+              href={ appConfig.L2.L1BaseUrl + route({ pathname: '/tx/[hash]', query: { hash: hash } }) }
+              key={ hash }
+            >
+              <Icon as={ txIcon } boxSize={ 6 } mr={ 1 }/>
+              <Box w="calc(100% - 36px)" overflow="hidden" whiteSpace="nowrap"><HashStringShortenDynamic hash={ hash }/></Box>
+            </LinkExternal>
+          )) }
+        </VStack>
+      ),
+    },
+    {
+      name: 'Age',
+      value: timeAgo,
+    },
+  ];
+
+  return <ListItemMobileGrid items={ items } gridTemplateColumns="100px auto"/>;
 };
 
 export default TxnBatchesListItem;

ui/txnBatches/TxnBatchesTableItem.tsx

@@ -7,7 +7,7 @@ import type { TxnBatchesItem } from 'types/api/txnBatches';
 import appConfig from 'configs/app/config';
 import txIcon from 'icons/transactions.svg';
 import txBatchIcon from 'icons/txBatch.svg';
-import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
+import dayjs from 'lib/date/dayjs';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 import LinkExternal from 'ui/shared/LinkExternal';
 import LinkInternal from 'ui/shared/LinkInternal';
@@ -15,7 +15,7 @@ import LinkInternal from 'ui/shared/LinkInternal';
 type Props = { item: TxnBatchesItem };
 
 const TxnBatchesTableItem = ({ item }: Props) => {
-  const timeAgo = useTimeAgoIncrement(item.l1_tx_timestamp, false);
+  const timeAgo = dayjs(item.l1_tx_timestamp).fromNow();
 
   return (
     <Tr>

ui/txs/TxsListItem.tsx

@@ -20,7 +20,7 @@ import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
 import InOutTag from 'ui/shared/InOutTag';
 import LinkInternal from 'ui/shared/LinkInternal';
-import ListItemMobile from 'ui/shared/ListItemMobile';
+import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 import TxStatus from 'ui/shared/TxStatus';
 import TxAdditionalInfo from 'ui/txs/TxAdditionalInfo';
 import TxType from 'ui/txs/TxType';

ui/watchlist/WatchlistTable/WatchListItem.tsx

@@ -6,7 +6,7 @@ import type { TWatchlistItem } from 'types/client/account';
 
 import useApiFetch from 'lib/api/useApiFetch';
 import useToast from 'lib/hooks/useToast';
-import ListItemMobile from 'ui/shared/ListItemMobile';
+import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 import TableItemActionButtons from 'ui/shared/TableItemActionButtons';
 
 import WatchListAddressItem from './WatchListAddressItem';

ui/withdrawals/WithdrawalsListItem.tsx

-import { Box, Flex, Text, HStack, Icon } from '@chakra-ui/react';
+import { Box, Icon } from '@chakra-ui/react';
 import { route } from 'nextjs-routes';
 import React from 'react';
 
@@ -7,73 +7,79 @@ import type { WithdrawalsItem } from 'types/api/withdrawals';
 import appConfig from 'configs/app/config';
 import txIcon from 'icons/transactions.svg';
 import dayjs from 'lib/date/dayjs';
-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 HashStringShorten from 'ui/shared/HashStringShorten';
+import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 import LinkExternal from 'ui/shared/LinkExternal';
 import LinkInternal from 'ui/shared/LinkInternal';
-import ListItemMobile from 'ui/shared/ListItemMobile';
+import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
 
 type Props = { item: WithdrawalsItem };
 
 const WithdrawalsListItem = ({ item }: Props) => {
-  const timeAgo = useTimeAgoIncrement(item.l2_timestamp, false);
+  const timeAgo = item.l2_timestamp ? dayjs(item.l2_timestamp).fromNow() : '';
   const timeToEnd = item.challenge_period_end ? dayjs(item.challenge_period_end).fromNow(true) + ' left' : '';
 
-  return (
-    <ListItemMobile rowGap={ 3 }>
-      <Flex alignItems="center" justifyContent="space-between" w="100%">
+  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: (
         <LinkInternal
           href={ route({ pathname: '/tx/[hash]', query: { hash: item.l2_tx_hash } }) }
           display="flex"
           width="fit-content"
           alignItems="center"
+          overflow="hidden"
+          w="100%"
         >
           <Icon as={ txIcon } boxSize={ 6 } mr={ 1 }/>
-          <Box w="calc(100% - 36px)" overflow="hidden" whiteSpace="nowrap"><HashStringShorten hash={ item.l2_tx_hash }/></Box>
+          <Box w="calc(100% - 36px)" overflow="hidden" whiteSpace="nowrap"><HashStringShortenDynamic hash={ item.l2_tx_hash }/></Box>
         </LinkInternal>
-        <Text variant="secondary">{ timeAgo }</Text>
-      </Flex>
-      <HStack spacing={ 3 } width="100%">
-        <Text fontSize="sm" fontWeight={ 500 } whiteSpace="nowrap">Msg nonce</Text>
-        <Text variant="secondary">{ item.msg_nonce_version + '-' + item.msg_nonce }</Text>
-      </HStack>
-      <HStack spacing={ 3 } width="100%">
-        <Text fontSize="sm" fontWeight={ 500 } whiteSpace="nowrap">Status</Text>
-        { item.status === 'Ready for relay' ?
-          <LinkExternal href={ appConfig.L2.withdrawalUrl }>{ item.status }</LinkExternal> :
-          <Text variant="secondary">{ item.status }</Text>
-        }
-      </HStack>
-      { item.from && (
-        <HStack spacing={ 3 } width="100%">
-          <Text fontSize="sm" fontWeight={ 500 } whiteSpace="nowrap">From</Text>
-          <Address>
-            <AddressIcon address={ item.from }/>
-            <AddressLink hash={ item.from.hash } type="address" truncation="constant" ml={ 2 }/>
-          </Address>
-        </HStack>
-      ) }
-      { item.l1_tx_hash && (
-        <HStack spacing={ 3 } width="100%">
-          <Text fontSize="sm" fontWeight={ 500 } whiteSpace="nowrap">L1 txn hash</Text>
-          <LinkExternal
-            href={ appConfig.L2.L1BaseUrl + route({ pathname: '/tx/[hash]', query: { hash: item.l1_tx_hash } }) }
-          >
-            <HashStringShorten hash={ item.l1_tx_hash }/>
-          </LinkExternal>
-        </HStack>
-      ) }
-      { item.challenge_period_end && (
-        <HStack spacing={ 3 } width="100%">
-          <Text fontSize="sm" fontWeight={ 500 } whiteSpace="nowrap">Time left</Text>
-          <Text variant="secondary">{ timeToEnd }</Text>
-        </HStack>
-      ) }
-    </ListItemMobile>
-  );
+      ),
+    },
+    {
+      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 } }) }
+          w="100%"
+          overflow="hidden"
+        >
+          <Box w="calc(100% - 16px)" overflow="hidden" whiteSpace="nowrap"><HashStringShortenDynamic hash={ item.l1_tx_hash }/></Box>
+        </LinkExternal>
+      ) : null,
+    },
+    {
+      name: 'Time left',
+      value: timeToEnd,
+    },
+  ];
+
+  return <ListItemMobileGrid items={ items } gridTemplateColumns="92px auto"/>;
 };
 
 export default WithdrawalsListItem;

ui/withdrawals/WithdrawalsTableItem.tsx

@@ -7,7 +7,6 @@ import type { WithdrawalsItem } from 'types/api/withdrawals';
 import appConfig from 'configs/app/config';
 import txIcon from 'icons/transactions.svg';
 import dayjs from 'lib/date/dayjs';
-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';
@@ -18,7 +17,7 @@ import LinkInternal from 'ui/shared/LinkInternal';
  type Props = { item: WithdrawalsItem };
 
 const WithdrawalsTableItem = ({ item }: Props) => {
-  const timeAgo = useTimeAgoIncrement(item.l2_timestamp, false) || 'N/A';
+  const timeAgo = item.l2_timestamp ? dayjs(item.l2_timestamp).fromNow() : 'N/A';
   const timeToEnd = item.challenge_period_end ? dayjs(item.challenge_period_end).fromNow(true) + ' left' : '-';
 
   return (
@@ -66,7 +65,7 @@ const WithdrawalsTableItem = ({ item }: Props) => {
         }
       </Td>
       <Td verticalAlign="middle">
-        { timeToEnd }
+        <Text variant="secondary">{ timeToEnd }</Text>
       </Td>
     </Tr>
   );