diff --git a/ui/address/accountHistory/AddressAccountHistoryListItem.tsx b/ui/address/accountHistory/AddressAccountHistoryListItem.tsx index 3ea85cd994..01bec19066 100644 --- a/ui/address/accountHistory/AddressAccountHistoryListItem.tsx +++ b/ui/address/accountHistory/AddressAccountHistoryListItem.tsx @@ -3,11 +3,11 @@ import React, { useMemo } from 'react'; import type { NovesResponseData } from 'types/api/noves'; -import dayjs from 'lib/date/dayjs'; import IconSvg from 'ui/shared/IconSvg'; import LinkInternal from 'ui/shared/links/LinkInternal'; import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile'; import NovesFromTo from 'ui/shared/Noves/NovesFromTo'; +import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip'; type Props = { isPlaceholderData: boolean; @@ -40,9 +40,12 @@ const AddressAccountHistoryListItem = (props: Props) => { Action - - { dayjs(props.tx.rawTransactionData.timestamp * 1000).fromNow() } - + diff --git a/ui/address/accountHistory/AddressAccountHistoryTableItem.tsx b/ui/address/accountHistory/AddressAccountHistoryTableItem.tsx index 1c47862bd2..6e5ee2505a 100644 --- a/ui/address/accountHistory/AddressAccountHistoryTableItem.tsx +++ b/ui/address/accountHistory/AddressAccountHistoryTableItem.tsx @@ -1,12 +1,12 @@ -import { Td, Tr, Skeleton, Text, Box } from '@chakra-ui/react'; +import { Td, Tr, Skeleton, Box } from '@chakra-ui/react'; import React, { useMemo } from 'react'; import type { NovesResponseData } from 'types/api/noves'; -import dayjs from 'lib/date/dayjs'; import IconSvg from 'ui/shared/IconSvg'; import LinkInternal from 'ui/shared/links/LinkInternal'; import NovesFromTo from 'ui/shared/Noves/NovesFromTo'; +import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip'; type Props = { isPlaceholderData: boolean; @@ -25,11 +25,13 @@ const AddressAccountHistoryTableItem = (props: Props) => { return ( - - - { dayjs(props.tx.rawTransactionData.timestamp * 1000).fromNow() } - - + diff --git a/ui/address/blocksValidated/AddressBlocksValidatedListItem.tsx b/ui/address/blocksValidated/AddressBlocksValidatedListItem.tsx index a8049f92e2..81065d7f27 100644 --- a/ui/address/blocksValidated/AddressBlocksValidatedListItem.tsx +++ b/ui/address/blocksValidated/AddressBlocksValidatedListItem.tsx @@ -6,11 +6,11 @@ import type { Block } from 'types/api/block'; import config from 'configs/app'; import getBlockTotalReward from 'lib/block/getBlockTotalReward'; -import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement'; import { currencyUnits } from 'lib/units'; import BlockGasUsed from 'ui/shared/block/BlockGasUsed'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile'; +import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip'; type Props = Block & { page: number; @@ -18,7 +18,6 @@ type Props = Block & { }; const AddressBlocksValidatedListItem = (props: Props) => { - const timeAgo = useTimeAgoIncrement(props.timestamp, props.page === 1); const totalReward = getBlockTotalReward(props); return ( @@ -30,9 +29,13 @@ const AddressBlocksValidatedListItem = (props: Props) => { noIcon fontWeight={ 700 } /> - - { timeAgo } - + Txn diff --git a/ui/address/blocksValidated/AddressBlocksValidatedTableItem.tsx b/ui/address/blocksValidated/AddressBlocksValidatedTableItem.tsx index b02843164f..e08dbc7db7 100644 --- a/ui/address/blocksValidated/AddressBlocksValidatedTableItem.tsx +++ b/ui/address/blocksValidated/AddressBlocksValidatedTableItem.tsx @@ -6,9 +6,9 @@ import type { Block } from 'types/api/block'; import config from 'configs/app'; import getBlockTotalReward from 'lib/block/getBlockTotalReward'; -import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement'; import BlockGasUsed from 'ui/shared/block/BlockGasUsed'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; +import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip'; type Props = Block & { page: number; @@ -16,7 +16,6 @@ type Props = Block & { }; const AddressBlocksValidatedTableItem = (props: Props) => { - const timeAgo = useTimeAgoIncrement(props.timestamp, props.page === 1); const totalReward = getBlockTotalReward(props); return ( @@ -32,9 +31,13 @@ const AddressBlocksValidatedTableItem = (props: Props) => { /> - - { timeAgo } - + diff --git a/ui/address/coinBalance/AddressCoinBalanceListItem.tsx b/ui/address/coinBalance/AddressCoinBalanceListItem.tsx index 19ebf6f420..4f9a21dc74 100644 --- a/ui/address/coinBalance/AddressCoinBalanceListItem.tsx +++ b/ui/address/coinBalance/AddressCoinBalanceListItem.tsx @@ -5,11 +5,11 @@ import React from 'react'; import type { AddressCoinBalanceHistoryItem } from 'types/api/address'; import { WEI, ZERO } from 'lib/consts'; -import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement'; import { currencyUnits } from 'lib/units'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile'; +import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip'; type Props = AddressCoinBalanceHistoryItem & { page: number; @@ -19,7 +19,6 @@ type Props = AddressCoinBalanceHistoryItem & { const AddressCoinBalanceListItem = (props: Props) => { const deltaBn = BigNumber(props.delta).div(WEI); const isPositiveDelta = deltaBn.gte(ZERO); - const timeAgo = useTimeAgoIncrement(props.block_timestamp, props.page === 1); return ( @@ -61,7 +60,12 @@ const AddressCoinBalanceListItem = (props: Props) => { ) } Age - { timeAgo } + ); diff --git a/ui/address/coinBalance/AddressCoinBalanceTableItem.tsx b/ui/address/coinBalance/AddressCoinBalanceTableItem.tsx index 0e87a4d7fa..eff93d79a2 100644 --- a/ui/address/coinBalance/AddressCoinBalanceTableItem.tsx +++ b/ui/address/coinBalance/AddressCoinBalanceTableItem.tsx @@ -5,9 +5,9 @@ import React from 'react'; import type { AddressCoinBalanceHistoryItem } from 'types/api/address'; import { WEI, ZERO } from 'lib/consts'; -import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; +import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip'; type Props = AddressCoinBalanceHistoryItem & { page: number; @@ -17,7 +17,6 @@ type Props = AddressCoinBalanceHistoryItem & { const AddressCoinBalanceTableItem = (props: Props) => { const deltaBn = BigNumber(props.delta).div(WEI); const isPositiveDelta = deltaBn.gte(ZERO); - const timeAgo = useTimeAgoIncrement(props.block_timestamp, props.page === 1); return ( @@ -43,9 +42,13 @@ const AddressCoinBalanceTableItem = (props: Props) => { ) } - - { timeAgo } - + diff --git a/ui/address/internals/AddressIntTxsListItem.tsx b/ui/address/internals/AddressIntTxsListItem.tsx index 4b0861e706..2e38defecb 100644 --- a/ui/address/internals/AddressIntTxsListItem.tsx +++ b/ui/address/internals/AddressIntTxsListItem.tsx @@ -5,7 +5,6 @@ import React from 'react'; import type { InternalTransaction } from 'types/api/internalTransaction'; import config from 'configs/app'; -import dayjs from 'lib/date/dayjs'; import { currencyUnits } from 'lib/units'; import AddressFromTo from 'ui/shared/address/AddressFromTo'; import Tag from 'ui/shared/chakra/Tag'; @@ -13,6 +12,7 @@ import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile'; import TxStatus from 'ui/shared/statusTag/TxStatus'; +import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip'; import { TX_INTERNALS_ITEMS } from 'ui/tx/internals/utils'; type Props = InternalTransaction & { currentAddress: string; isLoading?: boolean }; @@ -47,9 +47,13 @@ const TxInternalsListItem = ({ fontWeight={ 700 } truncation="constant_long" /> - - { dayjs(timestamp).fromNow() } - + Block diff --git a/ui/address/internals/AddressIntTxsTableItem.tsx b/ui/address/internals/AddressIntTxsTableItem.tsx index 49f83d5100..d19730773d 100644 --- a/ui/address/internals/AddressIntTxsTableItem.tsx +++ b/ui/address/internals/AddressIntTxsTableItem.tsx @@ -5,12 +5,12 @@ import React from 'react'; import type { InternalTransaction } from 'types/api/internalTransaction'; import config from 'configs/app'; -import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement'; import AddressFromTo from 'ui/shared/address/AddressFromTo'; import Tag from 'ui/shared/chakra/Tag'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import TxStatus from 'ui/shared/statusTag/TxStatus'; +import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip'; import { TX_INTERNALS_ITEMS } from 'ui/tx/internals/utils'; type Props = InternalTransaction & { currentAddress: string; isLoading?: boolean } @@ -32,8 +32,6 @@ const AddressIntTxsTableItem = ({ const typeTitle = TX_INTERNALS_ITEMS.find(({ id }) => id === type)?.title; const toData = to ? to : createdContract; - const timeAgo = useTimeAgoIncrement(timestamp, true); - return ( @@ -45,11 +43,14 @@ const AddressIntTxsTableItem = ({ noIcon truncation="constant_long" /> - { timestamp && ( - - { timeAgo } - - ) } + diff --git a/ui/blocks/BlockTimestamp.tsx b/ui/blocks/BlockTimestamp.tsx deleted file mode 100644 index 1f7b7f4325..0000000000 --- a/ui/blocks/BlockTimestamp.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { Skeleton, chakra } from '@chakra-ui/react'; -import React from 'react'; - -import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement'; - -interface Props { - ts: string; - isEnabled?: boolean; - isLoading?: boolean; - className?: string; -} - -const BlockTimestamp = ({ ts, isEnabled, isLoading, className }: Props) => { - const timeAgo = useTimeAgoIncrement(ts, isEnabled); - - return ( - - { timeAgo } - - ); -}; - -export default React.memo(chakra(BlockTimestamp)); diff --git a/ui/blocks/BlocksListItem.tsx b/ui/blocks/BlocksListItem.tsx index ee8cd41273..0d6d8ce58f 100644 --- a/ui/blocks/BlocksListItem.tsx +++ b/ui/blocks/BlocksListItem.tsx @@ -12,13 +12,13 @@ import getBlockTotalReward from 'lib/block/getBlockTotalReward'; import { WEI } from 'lib/consts'; import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle'; import { currencyUnits } from 'lib/units'; -import BlockTimestamp from 'ui/blocks/BlockTimestamp'; import BlockGasUsed from 'ui/shared/block/BlockGasUsed'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import IconSvg from 'ui/shared/IconSvg'; import LinkInternal from 'ui/shared/links/LinkInternal'; import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile'; +import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip'; import Utilization from 'ui/shared/Utilization/Utilization'; interface Props { @@ -46,7 +46,14 @@ const BlocksListItem = ({ data, isLoading, enableTimeIncrement }: Props) => { fontWeight={ 600 } /> - + Size diff --git a/ui/blocks/BlocksTableItem.tsx b/ui/blocks/BlocksTableItem.tsx index 34cd219646..8ded36820f 100644 --- a/ui/blocks/BlocksTableItem.tsx +++ b/ui/blocks/BlocksTableItem.tsx @@ -10,12 +10,12 @@ import { route } from 'nextjs-routes'; import config from 'configs/app'; import getBlockTotalReward from 'lib/block/getBlockTotalReward'; import { WEI } from 'lib/consts'; -import BlockTimestamp from 'ui/blocks/BlockTimestamp'; import BlockGasUsed from 'ui/shared/block/BlockGasUsed'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import IconSvg from 'ui/shared/IconSvg'; import LinkInternal from 'ui/shared/links/LinkInternal'; +import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip'; import Utilization from 'ui/shared/Utilization/Utilization'; interface Props { @@ -56,7 +56,14 @@ const BlocksTableItem = ({ data, isLoading, enableTimeIncrement }: Props) => { /> - + diff --git a/ui/deposits/optimisticL2/OptimisticDepositsListItem.tsx b/ui/deposits/optimisticL2/OptimisticDepositsListItem.tsx index fe8abd7a0a..94cdd9e2f9 100644 --- a/ui/deposits/optimisticL2/OptimisticDepositsListItem.tsx +++ b/ui/deposits/optimisticL2/OptimisticDepositsListItem.tsx @@ -5,20 +5,18 @@ import React from 'react'; import type { OptimisticL2DepositsItem } from 'types/api/optimisticL2'; import config from 'configs/app'; -import dayjs from 'lib/date/dayjs'; import AddressEntityL1 from 'ui/shared/entities/address/AddressEntityL1'; import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid'; +import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip'; const rollupFeature = config.features.rollup; type Props = { item: OptimisticL2DepositsItem; isLoading?: boolean }; const OptimisticDepositsListItem = ({ item, isLoading }: Props) => { - const timeAgo = dayjs(item.l1_block_timestamp).fromNow(); - if (!rollupFeature.isEnabled || rollupFeature.type !== 'optimistic') { return null; } @@ -50,7 +48,11 @@ const OptimisticDepositsListItem = ({ item, isLoading }: Props) => { Age - { timeAgo } + L1 txn hash diff --git a/ui/deposits/optimisticL2/OptimisticDepositsTableItem.tsx b/ui/deposits/optimisticL2/OptimisticDepositsTableItem.tsx index af231b159f..2284839a18 100644 --- a/ui/deposits/optimisticL2/OptimisticDepositsTableItem.tsx +++ b/ui/deposits/optimisticL2/OptimisticDepositsTableItem.tsx @@ -5,18 +5,17 @@ import React from 'react'; import type { OptimisticL2DepositsItem } from 'types/api/optimisticL2'; import config from 'configs/app'; -import dayjs from 'lib/date/dayjs'; import AddressEntityL1 from 'ui/shared/entities/address/AddressEntityL1'; import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; +import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip'; const rollupFeature = config.features.rollup; type Props = { item: OptimisticL2DepositsItem; isLoading?: boolean }; const OptimisticDepositsTableItem = ({ item, isLoading }: Props) => { - const timeAgo = dayjs(item.l1_block_timestamp).fromNow(); if (!rollupFeature.isEnabled || rollupFeature.type !== 'optimistic') { return null; @@ -45,7 +44,12 @@ const OptimisticDepositsTableItem = ({ item, isLoading }: Props) => { /> - { timeAgo } + { - const timeAgo = dayjs(item.timestamp).fromNow(); - if (!(feature.isEnabled && feature.type === 'shibarium')) { return null; } @@ -70,7 +67,11 @@ const DepositsListItem = ({ item, isLoading }: Props) => { Age - { timeAgo } + diff --git a/ui/deposits/shibarium/DepositsTableItem.tsx b/ui/deposits/shibarium/DepositsTableItem.tsx index 7c38f52dd5..da23f68ecc 100644 --- a/ui/deposits/shibarium/DepositsTableItem.tsx +++ b/ui/deposits/shibarium/DepositsTableItem.tsx @@ -1,21 +1,20 @@ -import { Td, Tr, Skeleton } from '@chakra-ui/react'; +import { Td, Tr } from '@chakra-ui/react'; import React from 'react'; import type { ShibariumDepositsItem } from 'types/api/shibarium'; import config from 'configs/app'; -import dayjs from 'lib/date/dayjs'; import AddressStringOrParam from 'ui/shared/entities/address/AddressStringOrParam'; import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; +import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip'; const feature = config.features.rollup; type Props = { item: ShibariumDepositsItem; isLoading?: boolean }; const DepositsTableItem = ({ item, isLoading }: Props) => { - const timeAgo = dayjs(item.timestamp).fromNow(); if (!(feature.isEnabled && feature.type === 'shibarium')) { return null; @@ -59,7 +58,12 @@ const DepositsTableItem = ({ item, isLoading }: Props) => { /> - { timeAgo } + ); diff --git a/ui/deposits/zkEvmL2/ZkEvmL2DepositsListItem.tsx b/ui/deposits/zkEvmL2/ZkEvmL2DepositsListItem.tsx index 578d04a628..4ec6b525f2 100644 --- a/ui/deposits/zkEvmL2/ZkEvmL2DepositsListItem.tsx +++ b/ui/deposits/zkEvmL2/ZkEvmL2DepositsListItem.tsx @@ -5,11 +5,11 @@ import React from 'react'; import type { ZkEvmL2DepositsItem } from 'types/api/zkEvmL2'; import config from 'configs/app'; -import dayjs from 'lib/date/dayjs'; import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid'; +import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip'; const rollupFeature = config.features.rollup; @@ -20,8 +20,6 @@ const ZkEvmL2DepositsListItem = ({ item, isLoading }: Props) => { return null; } - const timeAgo = dayjs(item.timestamp).fromNow(); - return ( @@ -56,7 +54,11 @@ const ZkEvmL2DepositsListItem = ({ item, isLoading }: Props) => { Age - { timeAgo } + L2 txn hash diff --git a/ui/deposits/zkEvmL2/ZkEvmL2DepositsTableItem.tsx b/ui/deposits/zkEvmL2/ZkEvmL2DepositsTableItem.tsx index 37f57d9d66..962135741b 100644 --- a/ui/deposits/zkEvmL2/ZkEvmL2DepositsTableItem.tsx +++ b/ui/deposits/zkEvmL2/ZkEvmL2DepositsTableItem.tsx @@ -5,10 +5,10 @@ import React from 'react'; import type { ZkEvmL2DepositsItem } from 'types/api/zkEvmL2'; import config from 'configs/app'; -import dayjs from 'lib/date/dayjs'; import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; +import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip'; const rollupFeature = config.features.rollup; @@ -19,8 +19,6 @@ const ZkEvmL2DepositsTableItem = ({ item, isLoading }: Props) => { return null; } - const timeAgo = dayjs(item.timestamp).fromNow(); - return ( @@ -49,9 +47,11 @@ const ZkEvmL2DepositsTableItem = ({ item, isLoading }: Props) => { /> - - { timeAgo } - + { item.l2_transaction_hash ? ( diff --git a/ui/disputeGames/optimisticL2/OptimisticL2DisputeGamesListItem.tsx b/ui/disputeGames/optimisticL2/OptimisticL2DisputeGamesListItem.tsx index 3c6546de3b..27d83573c5 100644 --- a/ui/disputeGames/optimisticL2/OptimisticL2DisputeGamesListItem.tsx +++ b/ui/disputeGames/optimisticL2/OptimisticL2DisputeGamesListItem.tsx @@ -4,11 +4,11 @@ import React from 'react'; import type { OptimisticL2DisputeGamesItem } from 'types/api/optimisticL2'; import config from 'configs/app'; -import dayjs from 'lib/date/dayjs'; import CopyToClipboard from 'ui/shared/CopyToClipboard'; import BlockEntityL2 from 'ui/shared/entities/block/BlockEntityL2'; import HashStringShorten from 'ui/shared/HashStringShorten'; import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid'; +import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip'; const rollupFeature = config.features.rollup; @@ -53,7 +53,11 @@ const OptimisticL2DisputeGamesListItem = ({ item, isLoading }: Props) => { Age - { dayjs(item.created_at).fromNow() } + Status @@ -64,7 +68,11 @@ const OptimisticL2DisputeGamesListItem = ({ item, isLoading }: Props) => { { item.resolved_at && ( <> Resolution age - { dayjs(item.resolved_at).fromNow() } + ) } diff --git a/ui/disputeGames/optimisticL2/OptimisticL2DisputeGamesTableItem.tsx b/ui/disputeGames/optimisticL2/OptimisticL2DisputeGamesTableItem.tsx index 0de2ced695..dd55542b5d 100644 --- a/ui/disputeGames/optimisticL2/OptimisticL2DisputeGamesTableItem.tsx +++ b/ui/disputeGames/optimisticL2/OptimisticL2DisputeGamesTableItem.tsx @@ -4,10 +4,10 @@ import React from 'react'; import type { OptimisticL2DisputeGamesItem } from 'types/api/optimisticL2'; import config from 'configs/app'; -import dayjs from 'lib/date/dayjs'; import CopyToClipboard from 'ui/shared/CopyToClipboard'; import BlockEntityL2 from 'ui/shared/entities/block/BlockEntityL2'; import HashStringShorten from 'ui/shared/HashStringShorten'; +import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip'; const faultProofSystemFeature = config.features.faultProofSystem; @@ -44,15 +44,22 @@ const OptimisticL2DisputeGamesTableItem = ({ item, isLoading }: Props) => { /> - { dayjs(item.created_at).fromNow() } + { item.status } - - { item.resolved_at ? dayjs(item.resolved_at).fromNow() : 'N/A' } - + ); diff --git a/ui/home/LatestBlocksItem.tsx b/ui/home/LatestBlocksItem.tsx index 3f2a1fb31c..72b428d93c 100644 --- a/ui/home/LatestBlocksItem.tsx +++ b/ui/home/LatestBlocksItem.tsx @@ -12,9 +12,9 @@ import type { Block } from 'types/api/block'; import config from 'configs/app'; import getBlockTotalReward from 'lib/block/getBlockTotalReward'; import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle'; -import BlockTimestamp from 'ui/blocks/BlockTimestamp'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; +import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip'; type Props = { block: Block; @@ -46,10 +46,13 @@ const LatestBlocksItem = ({ block, isLoading }: Props) => { fontWeight={ 500 } mr="auto" /> - { - const timeAgo = dayjs(item.l1_block_timestamp).fromNow(); const isMobile = useIsMobile(); if (!feature.isEnabled || feature.type !== 'optimistic') { @@ -66,9 +65,11 @@ const LatestDepositsItem = ({ item, isLoading }: Props) => { <> { l1BlockLink } - - { timeAgo } - + @@ -91,9 +92,14 @@ const LatestDepositsItem = ({ item, isLoading }: Props) => { L1 txn { l1TxLink } - - { timeAgo } - + L2 txn diff --git a/ui/home/LatestTxsItem.tsx b/ui/home/LatestTxsItem.tsx index c556b24f22..7fcc367f8f 100644 --- a/ui/home/LatestTxsItem.tsx +++ b/ui/home/LatestTxsItem.tsx @@ -12,11 +12,11 @@ import type { Transaction } from 'types/api/transaction'; import config from 'configs/app'; import getValueWithUnit from 'lib/getValueWithUnit'; -import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement'; import { currencyUnits } from 'lib/units'; import AddressFromTo from 'ui/shared/address/AddressFromTo'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import TxStatus from 'ui/shared/statusTag/TxStatus'; +import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip'; import TxFee from 'ui/shared/tx/TxFee'; import TxWatchListTags from 'ui/shared/tx/TxWatchListTags'; import TxAdditionalInfo from 'ui/txs/TxAdditionalInfo'; @@ -29,7 +29,6 @@ type Props = { const LatestTxsItem = ({ tx, isLoading }: Props) => { const dataTo = tx.to ? tx.to : tx.created_contract; - const timeAgo = useTimeAgoIncrement(tx.timestamp || '0', true); const columnNum = config.UI.views.tx.hiddenFields?.value && config.UI.views.tx.hiddenFields?.tx_fee ? 2 : 3; return ( @@ -65,18 +64,16 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => { hash={ tx.hash } fontWeight="700" /> - { tx.timestamp && ( - - { timeAgo } - - ) } + diff --git a/ui/home/LatestTxsItemMobile.tsx b/ui/home/LatestTxsItemMobile.tsx index 323ccafa48..e3d88bd9d0 100644 --- a/ui/home/LatestTxsItemMobile.tsx +++ b/ui/home/LatestTxsItemMobile.tsx @@ -11,11 +11,11 @@ import type { Transaction } from 'types/api/transaction'; import config from 'configs/app'; import getValueWithUnit from 'lib/getValueWithUnit'; -import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement'; import { currencyUnits } from 'lib/units'; import AddressFromTo from 'ui/shared/address/AddressFromTo'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import TxStatus from 'ui/shared/statusTag/TxStatus'; +import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip'; import TxFee from 'ui/shared/tx/TxFee'; import TxWatchListTags from 'ui/shared/tx/TxWatchListTags'; import TxAdditionalInfo from 'ui/txs/TxAdditionalInfo'; @@ -28,7 +28,6 @@ type Props = { const LatestTxsItem = ({ tx, isLoading }: Props) => { const dataTo = tx.to ? tx.to : tx.created_contract; - const timeAgo = useTimeAgoIncrement(tx.timestamp || '0', true); return ( { fontWeight="700" truncation="constant_long" /> - { tx.timestamp && ( - - { timeAgo } - - ) } + { fontWeight={ 500 } mr="auto" /> - { return null; } - const timeAgo = dayjs(item.origination_timestamp).fromNow(); - const l1TxHash = direction === 'from-rollup' ? item.completion_transaction_hash : item.origination_transaction_hash; const l2TxHash = direction === 'from-rollup' ? item.origination_transaction_hash : item.completion_transaction_hash; @@ -88,7 +86,11 @@ const ArbitrumL2MessagesListItem = ({ item, isLoading, direction }: Props) => { Age - { timeAgo } + Status diff --git a/ui/messages/ArbitrumL2MessagesTableItem.tsx b/ui/messages/ArbitrumL2MessagesTableItem.tsx index ed46084461..fbd4f13ef9 100644 --- a/ui/messages/ArbitrumL2MessagesTableItem.tsx +++ b/ui/messages/ArbitrumL2MessagesTableItem.tsx @@ -4,12 +4,12 @@ import React from 'react'; import type { ArbitrumL2MessagesItem } from 'types/api/arbitrumL2'; import config from 'configs/app'; -import dayjs from 'lib/date/dayjs'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; import ArbitrumL2MessageStatus from 'ui/shared/statusTag/ArbitrumL2MessageStatus'; +import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip'; import type { MessagesDirection } from './ArbitrumL2Messages'; @@ -22,8 +22,6 @@ const ArbitrumL2MessagesTableItem = ({ item, direction, isLoading }: Props) => { return null; } - const timeAgo = dayjs(item.origination_timestamp).fromNow(); - const l1TxHash = direction === 'from-rollup' ? item.completion_transaction_hash : item.origination_transaction_hash; const l2TxHash = direction === 'from-rollup' ? item.origination_transaction_hash : item.completion_transaction_hash; @@ -75,9 +73,11 @@ const ArbitrumL2MessagesTableItem = ({ item, direction, isLoading }: Props) => { ) } - - { timeAgo } - + diff --git a/ui/nameDomain/history/NameDomainHistoryListItem.tsx b/ui/nameDomain/history/NameDomainHistoryListItem.tsx index b14a3b65a3..ebc43e607e 100644 --- a/ui/nameDomain/history/NameDomainHistoryListItem.tsx +++ b/ui/nameDomain/history/NameDomainHistoryListItem.tsx @@ -1,4 +1,3 @@ -import { Skeleton } from '@chakra-ui/react'; import React from 'react'; import type * as bens from '@blockscout/bens-types'; @@ -6,12 +5,12 @@ import type * as bens from '@blockscout/bens-types'; import { route } from 'nextjs-routes'; import config from 'configs/app'; -import dayjs from 'lib/date/dayjs'; import stripTrailingSlash from 'lib/stripTrailingSlash'; import Tag from 'ui/shared/chakra/Tag'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid'; +import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip'; interface Props { event: bens.DomainEvent; @@ -38,9 +37,12 @@ const NameDomainHistoryListItem = ({ isLoading, domain, event }: Props) => { Age - - { dayjs(event.timestamp).fromNow() } - + { event.from_address && ( diff --git a/ui/nameDomain/history/NameDomainHistoryTableItem.tsx b/ui/nameDomain/history/NameDomainHistoryTableItem.tsx index 41e2d76f16..cd287cc98d 100644 --- a/ui/nameDomain/history/NameDomainHistoryTableItem.tsx +++ b/ui/nameDomain/history/NameDomainHistoryTableItem.tsx @@ -1,4 +1,4 @@ -import { Tr, Td, Skeleton } from '@chakra-ui/react'; +import { Tr, Td } from '@chakra-ui/react'; import React from 'react'; import type * as bens from '@blockscout/bens-types'; @@ -6,11 +6,11 @@ import type * as bens from '@blockscout/bens-types'; import { route } from 'nextjs-routes'; import config from 'configs/app'; -import dayjs from 'lib/date/dayjs'; import stripTrailingSlash from 'lib/stripTrailingSlash'; import Tag from 'ui/shared/chakra/Tag'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; +import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip'; interface Props { event: bens.DomainEvent; @@ -41,9 +41,12 @@ const NameDomainHistoryTableItem = ({ isLoading, event, domain }: Props) => { /> - - { dayjs(event.timestamp).fromNow() } - + { event.from_address && } diff --git a/ui/outputRoots/optimisticL2/OptimisticL2OutputRootsListItem.tsx b/ui/outputRoots/optimisticL2/OptimisticL2OutputRootsListItem.tsx index 2e61672773..76140ce1f6 100644 --- a/ui/outputRoots/optimisticL2/OptimisticL2OutputRootsListItem.tsx +++ b/ui/outputRoots/optimisticL2/OptimisticL2OutputRootsListItem.tsx @@ -4,20 +4,18 @@ import React from 'react'; import type { OptimisticL2OutputRootsItem } from 'types/api/optimisticL2'; import config from 'configs/app'; -import dayjs from 'lib/date/dayjs'; import CopyToClipboard from 'ui/shared/CopyToClipboard'; import BlockEntityL2 from 'ui/shared/entities/block/BlockEntityL2'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; import HashStringShorten from 'ui/shared/HashStringShorten'; import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid'; +import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip'; const rollupFeature = config.features.rollup; type Props = { item: OptimisticL2OutputRootsItem; isLoading?: boolean }; const OptimisticL2OutputRootsListItem = ({ item, isLoading }: Props) => { - const timeAgo = dayjs(item.l1_timestamp).fromNow(); - if (!rollupFeature.isEnabled || rollupFeature.type !== 'optimistic') { return null; } @@ -32,9 +30,11 @@ const OptimisticL2OutputRootsListItem = ({ item, isLoading }: Props) => { Age - - { timeAgo } - + L2 block # diff --git a/ui/outputRoots/optimisticL2/OptimisticL2OutputRootsTableItem.tsx b/ui/outputRoots/optimisticL2/OptimisticL2OutputRootsTableItem.tsx index 6a2e6d9fb5..25fb2d7da8 100644 --- a/ui/outputRoots/optimisticL2/OptimisticL2OutputRootsTableItem.tsx +++ b/ui/outputRoots/optimisticL2/OptimisticL2OutputRootsTableItem.tsx @@ -4,19 +4,17 @@ import React from 'react'; import type { OptimisticL2OutputRootsItem } from 'types/api/optimisticL2'; import config from 'configs/app'; -import dayjs from 'lib/date/dayjs'; import CopyToClipboard from 'ui/shared/CopyToClipboard'; import BlockEntityL2 from 'ui/shared/entities/block/BlockEntityL2'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; import HashStringShorten from 'ui/shared/HashStringShorten'; +import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip'; const rollupFeature = config.features.rollup; type Props = { item: OptimisticL2OutputRootsItem; isLoading?: boolean }; const OptimisticL2OutputRootsTableItem = ({ item, isLoading }: Props) => { - const timeAgo = dayjs(item.l1_timestamp).fromNow(); - if (!rollupFeature.isEnabled || rollupFeature.type !== 'optimistic') { return null; } @@ -27,7 +25,12 @@ const OptimisticL2OutputRootsTableItem = ({ item, isLoading }: Props) => { { item.l2_output_index } - { timeAgo } + { + const timeAgo = useTimeAgoIncrement(timestamp || '', enableIncrement && !isLoading); + if (!timestamp && !fallbackText) { + return null; + } + + const content = timestamp ? + { timeAgo } : + { fallbackText }; + + return ( + + { content } + + ); +}; + +export default chakra(TimeAgoWithTooltip); diff --git a/ui/shared/TokenTransfer/TokenTransferListItem.tsx b/ui/shared/TokenTransfer/TokenTransferListItem.tsx index 1c0ba064a3..03977f0916 100644 --- a/ui/shared/TokenTransfer/TokenTransferListItem.tsx +++ b/ui/shared/TokenTransfer/TokenTransferListItem.tsx @@ -4,7 +4,6 @@ import React from 'react'; import type { TokenTransfer } from 'types/api/tokenTransfer'; import getCurrencyValue from 'lib/getCurrencyValue'; -import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement'; import { getTokenTypeName } from 'lib/token/tokenTypes'; import AddressFromTo from 'ui/shared/address/AddressFromTo'; import Tag from 'ui/shared/chakra/Tag'; @@ -15,6 +14,8 @@ import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile'; import { getTokenTransferTypeText } from 'ui/shared/TokenTransfer/helpers'; import TxAdditionalInfo from 'ui/txs/TxAdditionalInfo'; +import TimeAgoWithTooltip from '../TimeAgoWithTooltip'; + type Props = TokenTransfer & { baseAddress?: string; showTxInfo?: boolean; @@ -35,7 +36,6 @@ const TokenTransferListItem = ({ enableTimeIncrement, isLoading, }: Props) => { - const timeAgo = useTimeAgoIncrement(timestamp, enableTimeIncrement); const { usd, valueStr } = 'value' in total && total.value !== null ? getCurrencyValue({ value: total.value, exchangeRate: token.exchange_rate, @@ -71,11 +71,14 @@ const TokenTransferListItem = ({ truncation="constant_long" fontWeight="700" /> - { timestamp && ( - - { timeAgo } - - ) } + ) } { - const timeAgo = useTimeAgoIncrement(timestamp, enableTimeIncrement); const { usd, valueStr } = 'value' in total && total.value !== null ? getCurrencyValue({ value: total.value, exchangeRate: token.exchange_rate, @@ -78,11 +78,15 @@ const TokenTransferTableItem = ({ mt="7px" truncation="constant_long" /> - { timestamp && ( - - { timeAgo } - - ) } + ) } diff --git a/ui/token/TokenTransfer/TokenTransferListItem.tsx b/ui/token/TokenTransfer/TokenTransferListItem.tsx index f4c582e039..40c9b70cd2 100644 --- a/ui/token/TokenTransfer/TokenTransferListItem.tsx +++ b/ui/token/TokenTransfer/TokenTransferListItem.tsx @@ -4,13 +4,13 @@ import React from 'react'; import type { TokenTransfer } from 'types/api/tokenTransfer'; import getCurrencyValue from 'lib/getCurrencyValue'; -import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement'; import { NFT_TOKEN_TYPE_IDS } from 'lib/token/tokenTypes'; import AddressFromTo from 'ui/shared/address/AddressFromTo'; import Tag from 'ui/shared/chakra/Tag'; import NftEntity from 'ui/shared/entities/nft/NftEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile'; +import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip'; import TruncatedValue from 'ui/shared/TruncatedValue'; type Props = TokenTransfer & { tokenId?: string; isLoading?: boolean }; @@ -26,7 +26,6 @@ const TokenTransferListItem = ({ tokenId, isLoading, }: Props) => { - const timeAgo = useTimeAgoIncrement(timestamp, true); const { usd, valueStr } = 'value' in total && total.value !== null ? getCurrencyValue({ value: total.value, exchangeRate: token.exchange_rate, @@ -44,13 +43,15 @@ const TokenTransferListItem = ({ truncation="constant_long" fontWeight="700" /> - { timestamp && ( - - - { timeAgo } - - - ) } + { method && { method } } { - const timeAgo = useTimeAgoIncrement(timestamp, true); const { usd, valueStr } = 'value' in total && total.value !== null ? getCurrencyValue({ value: total.value, exchangeRate: token.exchange_rate, @@ -44,13 +43,15 @@ const TokenTransferTableItem = ({ noIcon truncation="constant_long" /> - { timestamp && ( - - - { timeAgo } - - - ) } + diff --git a/ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchesListItem.tsx b/ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchesListItem.tsx index 78d8356371..73fbfc78a0 100644 --- a/ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchesListItem.tsx +++ b/ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchesListItem.tsx @@ -6,21 +6,19 @@ import type { ArbitrumL2TxnBatchesItem } from 'types/api/arbitrumL2'; import { route } from 'nextjs-routes'; import config from 'configs/app'; -import dayjs from 'lib/date/dayjs'; import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2'; import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; import LinkInternal from 'ui/shared/links/LinkInternal'; import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid'; import ArbitrumL2TxnBatchStatus from 'ui/shared/statusTag/ArbitrumL2TxnBatchStatus'; +import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip'; const rollupFeature = config.features.rollup; type Props = { item: ArbitrumL2TxnBatchesItem; isLoading?: boolean }; const ArbitrumL2TxnBatchesListItem = ({ item, isLoading }: Props) => { - const timeAgo = item.commitment_transaction.timestamp ? dayjs(item.commitment_transaction.timestamp).fromNow() : 'Undefined'; - if (!rollupFeature.isEnabled || rollupFeature.type !== 'arbitrum') { return null; } @@ -76,7 +74,12 @@ const ArbitrumL2TxnBatchesListItem = ({ item, isLoading }: Props) => { Age - { timeAgo } + Txn count diff --git a/ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchesTableItem.tsx b/ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchesTableItem.tsx index 4c59836e7b..94f480b952 100644 --- a/ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchesTableItem.tsx +++ b/ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchesTableItem.tsx @@ -6,20 +6,18 @@ import type { ArbitrumL2TxnBatchesItem } from 'types/api/arbitrumL2'; import { route } from 'nextjs-routes'; import config from 'configs/app'; -import dayjs from 'lib/date/dayjs'; import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2'; import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; import LinkInternal from 'ui/shared/links/LinkInternal'; import ArbitrumL2TxnBatchStatus from 'ui/shared/statusTag/ArbitrumL2TxnBatchStatus'; +import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip'; const rollupFeature = config.features.rollup; type Props = { item: ArbitrumL2TxnBatchesItem; isLoading?: boolean }; const TxnBatchesTableItem = ({ item, isLoading }: Props) => { - const timeAgo = item.commitment_transaction.timestamp ? dayjs(item.commitment_transaction.timestamp).fromNow() : 'Undefined'; - if (!rollupFeature.isEnabled || rollupFeature.type !== 'arbitrum') { return null; } @@ -60,9 +58,12 @@ const TxnBatchesTableItem = ({ item, isLoading }: Props) => { /> - - { timeAgo } - + { - const timeAgo = dayjs(item.l1_timestamp).fromNow(); - if (!rollupFeature.isEnabled || rollupFeature.type !== 'optimistic') { return null; } @@ -67,7 +65,11 @@ const OptimisticL2TxnBatchesListItem = ({ item, isLoading }: Props) => { Age - { timeAgo } + diff --git a/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchesTableItem.tsx b/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchesTableItem.tsx index fff8a75b38..02d0964073 100644 --- a/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchesTableItem.tsx +++ b/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchesTableItem.tsx @@ -6,18 +6,16 @@ import type { OptimisticL2TxnBatchesItem } from 'types/api/optimisticL2'; import { route } from 'nextjs-routes'; import config from 'configs/app'; -import dayjs from 'lib/date/dayjs'; import BlockEntityL2 from 'ui/shared/entities/block/BlockEntityL2'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; import LinkInternal from 'ui/shared/links/LinkInternal'; +import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip'; const rollupFeature = config.features.rollup; type Props = { item: OptimisticL2TxnBatchesItem; isLoading?: boolean }; const OptimisticL2TxnBatchesTableItem = ({ item, isLoading }: Props) => { - const timeAgo = dayjs(item.l1_timestamp).fromNow(); - if (!rollupFeature.isEnabled || rollupFeature.type !== 'optimistic') { return null; } @@ -60,9 +58,13 @@ const OptimisticL2TxnBatchesTableItem = ({ item, isLoading }: Props) => { - - { timeAgo } - + ); diff --git a/ui/txnBatches/zkEvmL2/ZkEvmTxnBatchesListItem.tsx b/ui/txnBatches/zkEvmL2/ZkEvmTxnBatchesListItem.tsx index 454c4e887c..43be4e0fd7 100644 --- a/ui/txnBatches/zkEvmL2/ZkEvmTxnBatchesListItem.tsx +++ b/ui/txnBatches/zkEvmL2/ZkEvmTxnBatchesListItem.tsx @@ -6,20 +6,18 @@ import type { ZkEvmL2TxnBatchesItem } from 'types/api/zkEvmL2'; import { route } from 'nextjs-routes'; import config from 'configs/app'; -import dayjs from 'lib/date/dayjs'; import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; import LinkInternal from 'ui/shared/links/LinkInternal'; import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid'; import ZkEvmL2TxnBatchStatus from 'ui/shared/statusTag/ZkEvmL2TxnBatchStatus'; +import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip'; const rollupFeature = config.features.rollup; type Props = { item: ZkEvmL2TxnBatchesItem; isLoading?: boolean }; const ZkEvmTxnBatchesListItem = ({ item, isLoading }: Props) => { - const timeAgo = item.timestamp ? dayjs(item.timestamp).fromNow() : 'Undefined'; - if (!rollupFeature.isEnabled || rollupFeature.type !== 'zkEvm') { return null; } @@ -45,7 +43,12 @@ const ZkEvmTxnBatchesListItem = ({ item, isLoading }: Props) => { Age - { timeAgo } + Txn count diff --git a/ui/txnBatches/zkEvmL2/ZkEvmTxnBatchesTableItem.tsx b/ui/txnBatches/zkEvmL2/ZkEvmTxnBatchesTableItem.tsx index f3742611f3..85bfabb461 100644 --- a/ui/txnBatches/zkEvmL2/ZkEvmTxnBatchesTableItem.tsx +++ b/ui/txnBatches/zkEvmL2/ZkEvmTxnBatchesTableItem.tsx @@ -6,19 +6,17 @@ import type { ZkEvmL2TxnBatchesItem } from 'types/api/zkEvmL2'; import { route } from 'nextjs-routes'; import config from 'configs/app'; -import dayjs from 'lib/date/dayjs'; import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; import LinkInternal from 'ui/shared/links/LinkInternal'; import ZkEvmL2TxnBatchStatus from 'ui/shared/statusTag/ZkEvmL2TxnBatchStatus'; +import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip'; const rollupFeature = config.features.rollup; type Props = { item: ZkEvmL2TxnBatchesItem; isLoading?: boolean }; const TxnBatchesTableItem = ({ item, isLoading }: Props) => { - const timeAgo = item.timestamp ? dayjs(item.timestamp).fromNow() : 'Undefined'; - if (!rollupFeature.isEnabled || rollupFeature.type !== 'zkEvm') { return null; } @@ -39,9 +37,12 @@ const TxnBatchesTableItem = ({ item, isLoading }: Props) => { - - { timeAgo } - + { - const timeAgo = item.timestamp ? dayjs(item.timestamp).fromNow() : 'Undefined'; - if (!rollupFeature.isEnabled || rollupFeature.type !== 'zkSync') { return null; } @@ -45,7 +43,12 @@ const ZkSyncTxnBatchesListItem = ({ item, isLoading }: Props) => { Age - { timeAgo } + Txn count diff --git a/ui/txnBatches/zkSyncL2/ZkSyncTxnBatchesTableItem.tsx b/ui/txnBatches/zkSyncL2/ZkSyncTxnBatchesTableItem.tsx index 674d53d41a..282dd598c7 100644 --- a/ui/txnBatches/zkSyncL2/ZkSyncTxnBatchesTableItem.tsx +++ b/ui/txnBatches/zkSyncL2/ZkSyncTxnBatchesTableItem.tsx @@ -6,19 +6,17 @@ import type { ZkSyncBatchesItem } from 'types/api/zkSyncL2'; import { route } from 'nextjs-routes'; import config from 'configs/app'; -import dayjs from 'lib/date/dayjs'; import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; import LinkInternal from 'ui/shared/links/LinkInternal'; import ZkSyncL2TxnBatchStatus from 'ui/shared/statusTag/ZkSyncL2TxnBatchStatus'; +import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip'; const rollupFeature = config.features.rollup; type Props = { item: ZkSyncBatchesItem; isLoading?: boolean }; const ZkSyncTxnBatchesTableItem = ({ item, isLoading }: Props) => { - const timeAgo = item.timestamp ? dayjs(item.timestamp).fromNow() : 'Undefined'; - if (!rollupFeature.isEnabled || rollupFeature.type !== 'zkSync') { return null; } @@ -39,9 +37,12 @@ const ZkSyncTxnBatchesTableItem = ({ item, isLoading }: Props) => { - - { timeAgo } - + { const dataTo = tx.to ? tx.to : tx.created_contract; - const timeAgo = useTimeAgoIncrement(tx.timestamp, enableTimeIncrement); - return ( @@ -58,11 +56,14 @@ const TxsListItem = ({ tx, isLoading, showBlockInfo, currentAddress, enableTimeI fontWeight="700" iconName={ tx.tx_types.includes('blob_transaction') ? 'blob' : undefined } /> - { tx.timestamp && ( - - { timeAgo } - - ) } + { tx.method && ( diff --git a/ui/txs/TxsTableItem.tsx b/ui/txs/TxsTableItem.tsx index 6b75d88f09..c47d7a2395 100644 --- a/ui/txs/TxsTableItem.tsx +++ b/ui/txs/TxsTableItem.tsx @@ -2,7 +2,6 @@ import { Tr, Td, VStack, - Skeleton, } from '@chakra-ui/react'; import { motion } from 'framer-motion'; import React from 'react'; @@ -10,13 +9,13 @@ import React from 'react'; import type { Transaction } from 'types/api/transaction'; import config from 'configs/app'; -import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement'; import AddressFromTo from 'ui/shared/address/AddressFromTo'; import Tag from 'ui/shared/chakra/Tag'; import CurrencyValue from 'ui/shared/CurrencyValue'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import TxStatus from 'ui/shared/statusTag/TxStatus'; +import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip'; import TxFee from 'ui/shared/tx/TxFee'; import TxWatchListTags from 'ui/shared/tx/TxWatchListTags'; import TxAdditionalInfo from 'ui/txs/TxAdditionalInfo'; @@ -34,7 +33,6 @@ type Props = { const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement, isLoading }: Props) => { const dataTo = tx.to ? tx.to : tx.created_contract; - const timeAgo = useTimeAgoIncrement(tx.timestamp, enableTimeIncrement); return ( - { tx.timestamp && { timeAgo } } + diff --git a/ui/userOps/UserOpsListItem.tsx b/ui/userOps/UserOpsListItem.tsx index e43fcbea7a..40139b1de7 100644 --- a/ui/userOps/UserOpsListItem.tsx +++ b/ui/userOps/UserOpsListItem.tsx @@ -4,13 +4,13 @@ import React from 'react'; import type { UserOpsItem } from 'types/api/userOps'; import config from 'configs/app'; -import dayjs from 'lib/date/dayjs'; import CurrencyValue from 'ui/shared/CurrencyValue'; import AddressStringOrParam from 'ui/shared/entities/address/AddressStringOrParam'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import UserOpEntity from 'ui/shared/entities/userOp/UserOpEntity'; import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid'; +import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip'; import UserOpStatus from 'ui/shared/userOps/UserOpStatus'; type Props = { @@ -21,8 +21,6 @@ type Props = { }; const UserOpsListItem = ({ item, isLoading, showTx, showSender }: Props) => { - const timeAgo = dayjs(item.timestamp).fromNow(); - return ( @@ -33,7 +31,12 @@ const UserOpsListItem = ({ item, isLoading, showTx, showSender }: Props) => { Age - { timeAgo } + Status diff --git a/ui/userOps/UserOpsTableItem.tsx b/ui/userOps/UserOpsTableItem.tsx index 476e931fc2..7c57b7d84b 100644 --- a/ui/userOps/UserOpsTableItem.tsx +++ b/ui/userOps/UserOpsTableItem.tsx @@ -1,15 +1,15 @@ -import { Td, Tr, Skeleton } from '@chakra-ui/react'; +import { Td, Tr } from '@chakra-ui/react'; import React from 'react'; import type { UserOpsItem } from 'types/api/userOps'; import config from 'configs/app'; -import dayjs from 'lib/date/dayjs'; import CurrencyValue from 'ui/shared/CurrencyValue'; import AddressStringOrParam from 'ui/shared/entities/address/AddressStringOrParam'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import UserOpEntity from 'ui/shared/entities/userOp/UserOpEntity'; +import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip'; import UserOpStatus from 'ui/shared/userOps/UserOpStatus'; type Props = { @@ -20,15 +20,18 @@ import UserOpStatus from 'ui/shared/userOps/UserOpStatus'; }; const UserOpsTableItem = ({ item, isLoading, showTx, showSender }: Props) => { - const timeAgo = dayjs(item.timestamp).fromNow(); - return ( - { timeAgo } + diff --git a/ui/verifiedContracts/VerifiedContractsListItem.tsx b/ui/verifiedContracts/VerifiedContractsListItem.tsx index c0830fd8db..6cb4284b96 100644 --- a/ui/verifiedContracts/VerifiedContractsListItem.tsx +++ b/ui/verifiedContracts/VerifiedContractsListItem.tsx @@ -6,7 +6,6 @@ import type { VerifiedContract } from 'types/api/contracts'; import config from 'configs/app'; import { CONTRACT_LICENSES } from 'lib/contracts/licenses'; -import dayjs from 'lib/date/dayjs'; import { currencyUnits } from 'lib/units'; import ContractCertifiedLabel from 'ui/shared/ContractCertifiedLabel'; import CopyToClipboard from 'ui/shared/CopyToClipboard'; @@ -14,6 +13,7 @@ import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import HashStringShorten from 'ui/shared/HashStringShorten'; import IconSvg from 'ui/shared/IconSvg'; import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile'; +import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip'; interface Props { data: VerifiedContract; @@ -86,9 +86,11 @@ const VerifiedContractsListItem = ({ data, isLoading }: Props) => { Verified - - { dayjs(data.verified_at).fromNow() } - + diff --git a/ui/verifiedContracts/VerifiedContractsTableItem.tsx b/ui/verifiedContracts/VerifiedContractsTableItem.tsx index 5ba5053b5a..37932f80f0 100644 --- a/ui/verifiedContracts/VerifiedContractsTableItem.tsx +++ b/ui/verifiedContracts/VerifiedContractsTableItem.tsx @@ -6,12 +6,12 @@ import type { VerifiedContract } from 'types/api/contracts'; import config from 'configs/app'; import { CONTRACT_LICENSES } from 'lib/contracts/licenses'; -import dayjs from 'lib/date/dayjs'; import ContractCertifiedLabel from 'ui/shared/ContractCertifiedLabel'; import CopyToClipboard from 'ui/shared/CopyToClipboard'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import HashStringShorten from 'ui/shared/HashStringShorten'; import IconSvg from 'ui/shared/IconSvg'; +import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip'; interface Props { data: VerifiedContract; @@ -90,9 +90,11 @@ const VerifiedContractsTableItem = ({ data, isLoading }: Props) => { - - { dayjs(data.verified_at).fromNow() } - + diff --git a/ui/withdrawals/beaconChain/BeaconChainWithdrawalsListItem.tsx b/ui/withdrawals/beaconChain/BeaconChainWithdrawalsListItem.tsx index 9b97b53e75..0d1c362b97 100644 --- a/ui/withdrawals/beaconChain/BeaconChainWithdrawalsListItem.tsx +++ b/ui/withdrawals/beaconChain/BeaconChainWithdrawalsListItem.tsx @@ -6,12 +6,12 @@ import type { BlockWithdrawalsItem } from 'types/api/block'; import type { WithdrawalsItem } from 'types/api/withdrawals'; import config from 'configs/app'; -import dayjs from 'lib/date/dayjs'; import { currencyUnits } from 'lib/units'; import CurrencyValue from 'ui/shared/CurrencyValue'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid'; +import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip'; const feature = config.features.beaconChain; @@ -74,7 +74,11 @@ const BeaconChainWithdrawalsListItem = ({ item, isLoading, view }: Props) => { <> Age - { dayjs(item.timestamp).fromNow() } + Value diff --git a/ui/withdrawals/beaconChain/BeaconChainWithdrawalsTableItem.tsx b/ui/withdrawals/beaconChain/BeaconChainWithdrawalsTableItem.tsx index f7c509e555..a4e4b37a82 100644 --- a/ui/withdrawals/beaconChain/BeaconChainWithdrawalsTableItem.tsx +++ b/ui/withdrawals/beaconChain/BeaconChainWithdrawalsTableItem.tsx @@ -5,10 +5,10 @@ import type { AddressWithdrawalsItem } from 'types/api/address'; import type { BlockWithdrawalsItem } from 'types/api/block'; import type { WithdrawalsItem } from 'types/api/withdrawals'; -import dayjs from 'lib/date/dayjs'; import CurrencyValue from 'ui/shared/CurrencyValue'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; +import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip'; type Props = ({ item: WithdrawalsItem; @@ -52,9 +52,12 @@ const BeaconChainWithdrawalsTableItem = ({ item, view, isLoading }: Props) => { ) } { view !== 'block' && ( - - { dayjs(item.timestamp).fromNow() } - + ) } diff --git a/ui/withdrawals/optimisticL2/OptimisticL2WithdrawalsListItem.tsx b/ui/withdrawals/optimisticL2/OptimisticL2WithdrawalsListItem.tsx index 4aa040f0f2..098d0ef848 100644 --- a/ui/withdrawals/optimisticL2/OptimisticL2WithdrawalsListItem.tsx +++ b/ui/withdrawals/optimisticL2/OptimisticL2WithdrawalsListItem.tsx @@ -10,13 +10,13 @@ import TxEntity from 'ui/shared/entities/tx/TxEntity'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; import LinkExternal from 'ui/shared/links/LinkExternal'; import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid'; +import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip'; const rollupFeature = config.features.rollup; type Props = { item: OptimisticL2WithdrawalsItem; isLoading?: boolean }; const OptimisticL2WithdrawalsListItem = ({ item, isLoading }: Props) => { - 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; if (!rollupFeature.isEnabled || rollupFeature.type !== 'optimistic') { @@ -57,13 +57,15 @@ const OptimisticL2WithdrawalsListItem = ({ item, isLoading }: Props) => { /> - { timeAgo && ( + { item.l2_timestamp && ( <> Age - - { timeAgo } - + ) } diff --git a/ui/withdrawals/optimisticL2/OptimisticL2WithdrawalsTableItem.tsx b/ui/withdrawals/optimisticL2/OptimisticL2WithdrawalsTableItem.tsx index 8f8d4ee583..569729902d 100644 --- a/ui/withdrawals/optimisticL2/OptimisticL2WithdrawalsTableItem.tsx +++ b/ui/withdrawals/optimisticL2/OptimisticL2WithdrawalsTableItem.tsx @@ -9,13 +9,13 @@ import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; import LinkExternal from 'ui/shared/links/LinkExternal'; +import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip'; const rollupFeature = config.features.rollup; type Props = { item: OptimisticL2WithdrawalsItem; isLoading?: boolean }; const OptimisticL2WithdrawalsTableItem = ({ item, isLoading }: Props) => { - 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' : ''; if (!rollupFeature.isEnabled || rollupFeature.type !== 'optimistic') { @@ -47,9 +47,13 @@ const OptimisticL2WithdrawalsTableItem = ({ item, isLoading }: Props) => { /> - - { timeAgo } - + { item.status === 'Ready for relay' && rollupFeature.L2WithdrawalUrl ? diff --git a/ui/withdrawals/shibarium/WithdrawalsListItem.tsx b/ui/withdrawals/shibarium/WithdrawalsListItem.tsx index bf34e0365c..fe1f456e56 100644 --- a/ui/withdrawals/shibarium/WithdrawalsListItem.tsx +++ b/ui/withdrawals/shibarium/WithdrawalsListItem.tsx @@ -1,23 +1,20 @@ -import { Skeleton } from '@chakra-ui/react'; import React from 'react'; import type { ShibariumWithdrawalsItem } from 'types/api/shibarium'; import config from 'configs/app'; -import dayjs from 'lib/date/dayjs'; import AddressStringOrParam from 'ui/shared/entities/address/AddressStringOrParam'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid'; +import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip'; const feature = config.features.rollup; type Props = { item: ShibariumWithdrawalsItem; isLoading?: boolean }; const WithdrawalsListItem = ({ item, isLoading }: Props) => { - const timeAgo = item.timestamp ? dayjs(item.timestamp).fromNow() : null; - if (!(feature.isEnabled && feature.type === 'shibarium')) { return null; } @@ -69,7 +66,11 @@ const WithdrawalsListItem = ({ item, isLoading }: Props) => { Age - { timeAgo } + diff --git a/ui/withdrawals/shibarium/WithdrawalsTableItem.tsx b/ui/withdrawals/shibarium/WithdrawalsTableItem.tsx index 13d564b061..479dcfec05 100644 --- a/ui/withdrawals/shibarium/WithdrawalsTableItem.tsx +++ b/ui/withdrawals/shibarium/WithdrawalsTableItem.tsx @@ -1,22 +1,20 @@ -import { Td, Tr, Skeleton } from '@chakra-ui/react'; +import { Td, Tr } from '@chakra-ui/react'; import React from 'react'; import type { ShibariumWithdrawalsItem } from 'types/api/shibarium'; import config from 'configs/app'; -import dayjs from 'lib/date/dayjs'; import AddressStringOrParam from 'ui/shared/entities/address/AddressStringOrParam'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; +import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip'; const feature = config.features.rollup; type Props = { item: ShibariumWithdrawalsItem; isLoading?: boolean }; const WithdrawalsTableItem = ({ item, isLoading }: Props) => { - const timeAgo = dayjs(item.timestamp).fromNow(); - if (!(feature.isEnabled && feature.type === 'shibarium')) { return null; } @@ -59,7 +57,12 @@ const WithdrawalsTableItem = ({ item, isLoading }: Props) => { /> - { timeAgo } + ); diff --git a/ui/withdrawals/zkEvmL2/ZkEvmL2WithdrawalsListItem.tsx b/ui/withdrawals/zkEvmL2/ZkEvmL2WithdrawalsListItem.tsx index ffa9253b1f..7ff895f10e 100644 --- a/ui/withdrawals/zkEvmL2/ZkEvmL2WithdrawalsListItem.tsx +++ b/ui/withdrawals/zkEvmL2/ZkEvmL2WithdrawalsListItem.tsx @@ -5,11 +5,11 @@ import React from 'react'; import type { ZkEvmL2WithdrawalsItem } from 'types/api/zkEvmL2'; import config from 'configs/app'; -import dayjs from 'lib/date/dayjs'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid'; +import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip'; const rollupFeature = config.features.rollup; @@ -20,8 +20,6 @@ const ZkEvmL2WithdrawalsListItem = ({ item, isLoading }: Props) => { return null; } - const timeAgo = dayjs(item.timestamp).fromNow(); - return ( @@ -56,7 +54,11 @@ const ZkEvmL2WithdrawalsListItem = ({ item, isLoading }: Props) => { Age - { timeAgo } + L1 txn hash diff --git a/ui/withdrawals/zkEvmL2/ZkEvmL2WithdrawalsTableItem.tsx b/ui/withdrawals/zkEvmL2/ZkEvmL2WithdrawalsTableItem.tsx index 97e4405432..698d54be1b 100644 --- a/ui/withdrawals/zkEvmL2/ZkEvmL2WithdrawalsTableItem.tsx +++ b/ui/withdrawals/zkEvmL2/ZkEvmL2WithdrawalsTableItem.tsx @@ -5,10 +5,10 @@ import React from 'react'; import type { ZkEvmL2WithdrawalsItem } from 'types/api/zkEvmL2'; import config from 'configs/app'; -import dayjs from 'lib/date/dayjs'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; +import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip'; const rollupFeature = config.features.rollup; @@ -19,8 +19,6 @@ const ZkEvmL2WithdrawalsTableItem = ({ item, isLoading }: Props) => { return null; } - const timeAgo = dayjs(item.timestamp).fromNow(); - return ( @@ -49,9 +47,11 @@ const ZkEvmL2WithdrawalsTableItem = ({ item, isLoading }: Props) => { /> - - { timeAgo } - + { item.l1_transaction_hash ? (