Merge pull request #454 from blockscout/address-txs-timestamsp

add time age increment

lib/hooks/useTimeAgoIncrement.tsx

@@ -41,46 +41,48 @@ function getUpdateParams(ts: string) {
   };
 }
 
-export default function useTimeAgoIncrement(ts: string, isEnabled?: boolean) {
-  const [ value, setValue ] = React.useState(dayjs(ts).fromNow());
+export default function useTimeAgoIncrement(ts: string | null, isEnabled?: boolean) {
+  const [ value, setValue ] = React.useState(ts ? dayjs(ts).fromNow() : null);
 
   React.useEffect(() => {
-    const timeouts: Array<number> = [];
-    const intervals: Array<number> = [];
+    if (ts !== null) {
+      const timeouts: Array<number> = [];
+      const intervals: Array<number> = [];
 
-    const startIncrement = () => {
-      const { startTimeout, interval, endTimeout } = getUpdateParams(ts);
-      if (!startTimeout && !endTimeout) {
-        return;
-      }
+      const startIncrement = () => {
+        const { startTimeout, interval, endTimeout } = getUpdateParams(ts);
+        if (!startTimeout && !endTimeout) {
+          return;
+        }
 
-      let intervalId: number;
+        let intervalId: number;
 
-      const startTimeoutId = window.setTimeout(() => {
-        setValue(dayjs(ts).fromNow());
-
-        intervalId = window.setInterval(() => {
+        const startTimeoutId = window.setTimeout(() => {
           setValue(dayjs(ts).fromNow());
-        }, interval);
 
-        intervals.push(intervalId);
-      }, startTimeout);
+          intervalId = window.setInterval(() => {
+            setValue(dayjs(ts).fromNow());
+          }, interval);
+
+          intervals.push(intervalId);
+        }, startTimeout);
 
-      const endTimeoutId = window.setTimeout(() => {
-        window.clearInterval(intervalId);
-        startIncrement();
-      }, endTimeout);
+        const endTimeoutId = window.setTimeout(() => {
+          window.clearInterval(intervalId);
+          startIncrement();
+        }, endTimeout);
 
-      timeouts.push(startTimeoutId);
-      timeouts.push(endTimeoutId);
-    };
+        timeouts.push(startTimeoutId);
+        timeouts.push(endTimeoutId);
+      };
 
-    isEnabled && startIncrement();
+      isEnabled && startIncrement();
 
-    return () => {
-      timeouts.forEach(window.clearTimeout);
-      intervals.forEach(window.clearInterval);
-    };
+      return () => {
+        timeouts.forEach(window.clearTimeout);
+        intervals.forEach(window.clearInterval);
+      };
+    }
   }, [ isEnabled, ts ]);
 
   return value;

mocks/tokens/tokenTransfer.ts

@@ -37,6 +37,7 @@ export const erc20: TokenTransfer = {
   },
   tx_hash: '0x62d597ebcf3e8d60096dd0363bc2f0f5e2df27ba1dacd696c51aa7c9409f3193',
   type: 'token_transfer',
+  timestamp: '2022-10-10T14:34:30.000000Z',
 };
 
 export const erc721: TokenTransfer = {
@@ -75,6 +76,7 @@ export const erc721: TokenTransfer = {
   },
   tx_hash: '0xf13bc7afe5e02b494dd2f22078381d36a4800ef94a0ccc147431db56c301e6cc',
   type: 'token_transfer',
+  timestamp: '2022-10-10T14:34:30.000000Z',
 };
 
 export const erc1155: TokenTransfer = {
@@ -115,6 +117,7 @@ export const erc1155: TokenTransfer = {
   },
   tx_hash: '0x05d6589367633c032d757a69c5fb16c0e33e3994b0d9d1483f82aeee1f05d746',
   type: 'token_minting',
+  timestamp: '2022-10-10T14:34:30.000000Z',
 };
 
 export const erc1155multiple: TokenTransfer = {

types/api/tokenTransfer.ts

@@ -36,6 +36,7 @@ interface TokenTransferBase {
   tx_hash: string;
   from: AddressParam;
   to: AddressParam;
+  timestamp: string;
 }
 
 export type TokenTransferPagination = {

ui/address/AddressTokenTransfers.tsx

@@ -16,6 +16,7 @@ const AddressTokenTransfers = () => {
       queryName={ QueryKeys.addressTokenTransfers }
       queryIds={ castArray(router.query.id) }
       baseAddress={ typeof hash === 'string' ? hash : undefined }
+      enableTimeIncrement
     />
   );
 };

ui/address/AddressTxs.tsx

@@ -70,6 +70,7 @@ const AddressTxs = () => {
         query={ addressTxsQuery }
         showSocketInfo={ false }
         currentAddress={ typeof router.query.id === 'string' ? router.query.id : undefined }
+        enableTimeIncrement
       />
     </Element>
   );

ui/address/internals/AddressIntTxsTableItem.tsx

@@ -6,7 +6,7 @@ import type { InternalTransaction } from 'types/api/internalTransaction';
 
 import appConfig from 'configs/app/config';
 import rightArrowIcon from 'icons/arrows/east.svg';
-import dayjs from 'lib/date/dayjs';
+import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
 import link from 'lib/link/link';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
@@ -36,12 +36,14 @@ const AddressIntTxsTableItem = ({
   const isOut = Boolean(currentAddress && currentAddress === from.hash);
   const isIn = Boolean(currentAddress && currentAddress === to?.hash);
 
+  const timeAgo = useTimeAgoIncrement(timestamp, true);
+
   return (
     <Tr alignItems="top">
       <Td verticalAlign="middle">
         <Flex rowGap={ 3 } flexWrap="wrap">
           <AddressLink fontWeight="700" hash={ txnHash } type="transaction"/>
-          <Text variant="secondary" fontWeight="400" fontSize="sm">{ dayjs(timestamp).fromNow() }</Text>
+          { timestamp && <Text variant="secondary" fontWeight="400" fontSize="sm">{ timeAgo }</Text> }
         </Flex>
       </Td>
       <Td verticalAlign="middle">

ui/shared/TokenTransfer/TokenTransfer.pw.tsx

@@ -32,3 +32,25 @@ test('without tx info +@mobile', async({ mount, page }) => {
 
   await expect(component).toHaveScreenshot();
 });
+
+test('with tx info +@mobile', async({ mount, page }) => {
+  await page.route(API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(tokenTransferMock.mixTokens),
+  }));
+
+  const component = await mount(
+    <TestApp>
+      <Box h={{ base: '134px', lg: 6 }}/>
+      <TokenTransfer
+        path={ API_URL }
+        queryName={ QueryKeys.txTokenTransfers }
+        showTxInfo={ true }
+      />
+    </TestApp>,
+  );
+
+  await page.waitForResponse(API_URL),
+
+  await expect(component).toHaveScreenshot();
+});

ui/shared/TokenTransfer/TokenTransfer.tsx

@@ -43,9 +43,19 @@ interface Props {
   baseAddress?: string;
   showTxInfo?: boolean;
   txHash?: string;
+  enableTimeIncrement?: boolean;
 }
 
-const TokenTransfer = ({ isLoading: isLoadingProp, isDisabled, queryName, queryIds, path, baseAddress, showTxInfo = true }: Props) => {
+const TokenTransfer = ({
+  isLoading: isLoadingProp,
+  isDisabled,
+  queryName,
+  queryIds,
+  path,
+  baseAddress,
+  showTxInfo = true,
+  enableTimeIncrement,
+}: Props) => {
   const router = useRouter();
   const [ filters, setFilters ] = React.useState<AddressTokenTransferFilters & TokenTransferFilters>(
     { type: getTokenFilterValue(router.query.type), filter: getAddressFilterValue(router.query.filter) },
@@ -107,10 +117,10 @@ const TokenTransfer = ({ isLoading: isLoadingProp, isDisabled, queryName, queryI
     return (
       <>
         <Hide below="lg">
-          <TokenTransferTable data={ items } baseAddress={ baseAddress } showTxInfo={ showTxInfo } top={ 80 }/>
+          <TokenTransferTable data={ items } baseAddress={ baseAddress } showTxInfo={ showTxInfo } top={ 80 } enableTimeIncrement={ enableTimeIncrement }/>
         </Hide>
         <Show below="lg">
-          <TokenTransferList data={ items } baseAddress={ baseAddress } showTxInfo={ showTxInfo }/>
+          <TokenTransferList data={ items } baseAddress={ baseAddress } showTxInfo={ showTxInfo } enableTimeIncrement={ enableTimeIncrement }/>
         </Show>
       </>
     );

ui/shared/TokenTransfer/TokenTransferList.tsx

@@ -9,12 +9,21 @@ interface Props {
   data: Array<TokenTransfer>;
   baseAddress?: string;
   showTxInfo?: boolean;
+  enableTimeIncrement?: boolean;
 }
 
-const TokenTransferList = ({ data, baseAddress, showTxInfo }: Props) => {
+const TokenTransferList = ({ data, baseAddress, showTxInfo, enableTimeIncrement }: Props) => {
   return (
     <Box>
-      { data.map((item, index) => <TokenTransferListItem key={ index } { ...item } baseAddress={ baseAddress } showTxInfo={ showTxInfo }/>) }
+      { data.map((item, index) => (
+        <TokenTransferListItem
+          key={ index }
+          { ...item }
+          baseAddress={ baseAddress }
+          showTxInfo={ showTxInfo }
+          enableTimeIncrement={ enableTimeIncrement }
+        />
+      )) }
     </Box>
   );
 };

ui/shared/TokenTransfer/TokenTransferListItem.tsx

-import { Text, Flex, Tag, Icon } from '@chakra-ui/react';
+import { Text, Flex, Tag, Icon, useColorModeValue } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 
 import type { TokenTransfer } from 'types/api/tokenTransfer';
 
 import eastArrowIcon from 'icons/arrows/east.svg';
+import transactionIcon from 'icons/transactions.svg';
+import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
 import AccountListItemMobile from 'ui/shared/AccountListItemMobile';
 import AdditionalInfoButton from 'ui/shared/AdditionalInfoButton';
 import Address from 'ui/shared/address/Address';
@@ -18,9 +20,21 @@ import TokenTransferNft from 'ui/shared/TokenTransfer/TokenTransferNft';
 type Props = TokenTransfer & {
   baseAddress?: string;
   showTxInfo?: boolean;
+  enableTimeIncrement?: boolean;
 }
 
-const TokenTransferListItem = ({ token, total, tx_hash: txHash, from, to, baseAddress, showTxInfo, type }: Props) => {
+const TokenTransferListItem = ({
+  token,
+  total,
+  tx_hash: txHash,
+  from,
+  to,
+  baseAddress,
+  showTxInfo,
+  type,
+  timestamp,
+  enableTimeIncrement,
+}: Props) => {
   const value = (() => {
     if (!('value' in total)) {
       return null;
@@ -29,6 +43,10 @@ const TokenTransferListItem = ({ token, total, tx_hash: txHash, from, to, baseAd
     return BigNumber(total.value).div(BigNumber(10 ** Number(total.decimals))).dp(8).toFormat();
   })();
 
+  const iconColor = useColorModeValue('blue.600', 'blue.300');
+
+  const timeAgo = useTimeAgoIncrement(timestamp, enableTimeIncrement);
+
   const addressWidth = `calc((100% - ${ baseAddress ? '50px' : '0px' }) / 2)`;
   return (
     <AccountListItemMobile rowGap={ 3 }>
@@ -40,11 +58,24 @@ const TokenTransferListItem = ({ token, total, tx_hash: txHash, from, to, baseAd
       </Flex>
       { 'token_id' in total && <TokenTransferNft hash={ token.address } id={ total.token_id }/> }
       { showTxInfo && (
-        <Flex columnGap={ 2 } w="100%">
-          <Text fontWeight={ 500 } flexShrink={ 0 }>Txn hash</Text>
-          <Address display="inline-flex" maxW="100%">
-            <AddressLink type="transaction" hash={ txHash }/>
-          </Address>
+        <Flex justifyContent="space-between" alignItems="center" lineHeight="24px" width="100%">
+          <Flex>
+            <Icon
+              as={ transactionIcon }
+              boxSize="30px"
+              mr={ 2 }
+              color={ iconColor }
+            />
+            <Address width="100%">
+              <AddressLink
+                hash={ txHash }
+                type="transaction"
+                fontWeight="700"
+                truncation="constant"
+              />
+            </Address>
+          </Flex>
+          { timestamp && <Text variant="secondary" fontWeight="400" fontSize="sm">{ timeAgo }</Text> }
         </Flex>
       ) }
       <Flex w="100%" columnGap={ 3 }>

ui/shared/TokenTransfer/TokenTransferTable.tsx

@@ -11,9 +11,10 @@ interface Props {
   baseAddress?: string;
   showTxInfo?: boolean;
   top: number;
+  enableTimeIncrement?: boolean;
 }
 
-const TokenTransferTable = ({ data, baseAddress, showTxInfo, top }: Props) => {
+const TokenTransferTable = ({ data, baseAddress, showTxInfo, top, enableTimeIncrement }: Props) => {
 
   return (
     <Table variant="simple" size="sm">
@@ -31,7 +32,7 @@ const TokenTransferTable = ({ data, baseAddress, showTxInfo, top }: Props) => {
       </Thead>
       <Tbody>
         { data.map((item, index) => (
-          <TokenTransferTableItem key={ index } { ...item } baseAddress={ baseAddress } showTxInfo={ showTxInfo }/>
+          <TokenTransferTableItem key={ index } { ...item } baseAddress={ baseAddress } showTxInfo={ showTxInfo } enableTimeIncrement={ enableTimeIncrement }/>
         )) }
       </Tbody>
     </Table>

ui/shared/TokenTransfer/TokenTransferTableItem.tsx

-import { Tr, Td, Tag, Flex } from '@chakra-ui/react';
+import { Tr, Td, Tag, Flex, Text } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 
 import type { TokenTransfer } from 'types/api/tokenTransfer';
 
+import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
 import AdditionalInfoButton from 'ui/shared/AdditionalInfoButton';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
@@ -16,9 +17,21 @@ import TokenTransferNft from 'ui/shared/TokenTransfer/TokenTransferNft';
 type Props = TokenTransfer & {
   baseAddress?: string;
   showTxInfo?: boolean;
+  enableTimeIncrement?: boolean;
 }
 
-const TokenTransferTableItem = ({ token, total, tx_hash: txHash, from, to, baseAddress, showTxInfo, type }: Props) => {
+const TokenTransferTableItem = ({
+  token,
+  total,
+  tx_hash: txHash,
+  from,
+  to,
+  baseAddress,
+  showTxInfo,
+  type,
+  timestamp,
+  enableTimeIncrement,
+}: Props) => {
   const value = (() => {
     if (!('value' in total)) {
       return '-';
@@ -27,6 +40,8 @@ const TokenTransferTableItem = ({ token, total, tx_hash: txHash, from, to, baseA
     return BigNumber(total.value).div(BigNumber(10 ** Number(total.decimals))).dp(8).toFormat();
   })();
 
+  const timeAgo = useTimeAgoIncrement(timestamp, enableTimeIncrement);
+
   return (
     <Tr alignItems="top">
       { showTxInfo && (
@@ -49,6 +64,7 @@ const TokenTransferTableItem = ({ token, total, tx_hash: txHash, from, to, baseA
           <Address display="inline-flex" maxW="100%" fontWeight={ 600 } lineHeight="30px">
             <AddressLink type="transaction" hash={ txHash }/>
           </Address>
+          { timestamp && <Text color="gray.500" fontWeight="400" mt="10px">{ timeAgo }</Text> }
         </Td>
       ) }
       <Td>

ui/txs/TxsContent.tsx

@@ -26,9 +26,10 @@ type Props = {
   showSocketInfo?: boolean;
   currentAddress?: string;
   filter?: React.ReactNode;
+  enableTimeIncrement?: boolean;
 }
 
-const TxsContent = ({ filter, query, showBlockInfo = true, showSocketInfo = true, currentAddress }: Props) => {
+const TxsContent = ({ filter, query, showBlockInfo = true, showSocketInfo = true, currentAddress, enableTimeIncrement }: Props) => {
   const { data, isLoading, isError, setSortByField, setSortByValue, sorting } = useTxsSort(query);
   const isPaginatorHidden = !isLoading && !isError && query.pagination.page === 1 && !query.pagination.hasNextPage;
   const isMobile = useIsMobile();
@@ -62,7 +63,15 @@ const TxsContent = ({ filter, query, showBlockInfo = true, showSocketInfo = true
                 { ({ content }) => <Box>{ content }</Box> }
               </TxsNewItemNotice>
             ) }
-            { txs.map(tx => <TxsListItem tx={ tx } key={ tx.hash } showBlockInfo={ showBlockInfo } currentAddress={ currentAddress }/>) }
+            { txs.map(tx => (
+              <TxsListItem
+                tx={ tx }
+                key={ tx.hash }
+                showBlockInfo={ showBlockInfo }
+                currentAddress={ currentAddress }
+                enableTimeIncrement={ enableTimeIncrement }
+              />
+            )) }
           </Box>
         </Show>
         <Hide below="lg" ssr={ false }>
@@ -74,6 +83,7 @@ const TxsContent = ({ filter, query, showBlockInfo = true, showSocketInfo = true
             showSocketInfo={ showSocketInfo }
             top={ isPaginatorHidden ? 0 : 80 }
             currentAddress={ currentAddress }
+            enableTimeIncrement={ enableTimeIncrement }
           />
         </Hide>
       </>

ui/txs/TxsListItem.tsx

@@ -17,8 +17,8 @@ import type { Transaction } from 'types/api/transaction';
 import appConfig from 'configs/app/config';
 import rightArrowIcon from 'icons/arrows/east.svg';
 import transactionIcon from 'icons/transactions.svg';
-import dayjs from 'lib/date/dayjs';
 import getValueWithUnit from 'lib/getValueWithUnit';
+import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
 import link from 'lib/link/link';
 import AdditionalInfoButton from 'ui/shared/AdditionalInfoButton';
 import Address from 'ui/shared/address/Address';
@@ -33,12 +33,13 @@ type Props = {
   tx: Transaction;
   showBlockInfo: boolean;
   currentAddress?: string;
+  enableTimeIncrement?: boolean;
 }
 
 const TAG_WIDTH = 48;
 const ARROW_WIDTH = 24;
 
-const TxsListItem = ({ tx, showBlockInfo, currentAddress }: Props) => {
+const TxsListItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement }: Props) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
 
   const iconColor = useColorModeValue('blue.600', 'blue.300');
@@ -48,6 +49,8 @@ const TxsListItem = ({ tx, showBlockInfo, currentAddress }: Props) => {
   const isOut = Boolean(currentAddress && currentAddress === tx.from.hash);
   const isIn = Boolean(currentAddress && currentAddress === tx.to?.hash);
 
+  const timeAgo = useTimeAgoIncrement(tx.timestamp, enableTimeIncrement);
+
   return (
     <>
       <Box width="100%" borderBottom="1px solid" borderColor={ borderColor } _first={{ borderTop: '1px solid', borderColor }}>
@@ -58,7 +61,7 @@ const TxsListItem = ({ tx, showBlockInfo, currentAddress }: Props) => {
           </HStack>
           <AdditionalInfoButton onClick={ onOpen }/>
         </Flex>
-        <Flex justifyContent="space-between" lineHeight="24px" mt={ 3 }>
+        <Flex justifyContent="space-between" lineHeight="24px" mt={ 3 } alignItems="center">
           <Flex>
             <Icon
               as={ transactionIcon }
@@ -75,7 +78,7 @@ const TxsListItem = ({ tx, showBlockInfo, currentAddress }: Props) => {
               />
             </Address>
           </Flex>
-          <Text variant="secondary" fontWeight="400" fontSize="sm">{ dayjs(tx.timestamp).fromNow() }</Text>
+          { tx.timestamp && <Text variant="secondary" fontWeight="400" fontSize="sm">{ timeAgo }</Text> }
         </Flex>
         <Flex mt={ 3 }>
           <Text as="span" whiteSpace="pre">Method </Text>

ui/txs/TxsTable.tsx

@@ -19,9 +19,10 @@ type Props = {
   showBlockInfo: boolean;
   showSocketInfo: boolean;
   currentAddress?: string;
+  enableTimeIncrement?: boolean;
 }
 
-const TxsTable = ({ txs, sort, sorting, top, showBlockInfo, showSocketInfo, currentAddress }: Props) => {
+const TxsTable = ({ txs, sort, sorting, top, showBlockInfo, showSocketInfo, currentAddress, enableTimeIncrement }: Props) => {
   return (
     <Table variant="simple" minWidth="950px" size="xs">
       <TheadSticky top={ top }>
@@ -62,6 +63,7 @@ const TxsTable = ({ txs, sort, sorting, top, showBlockInfo, showSocketInfo, curr
             tx={ item }
             showBlockInfo={ showBlockInfo }
             currentAddress={ currentAddress }
+            enableTimeIncrement={ enableTimeIncrement }
           />
         )) }
       </Tbody>

ui/txs/TxsTableItem.tsx

@@ -21,7 +21,7 @@ import React from 'react';
 import type { Transaction } from 'types/api/transaction';
 
 import rightArrowIcon from 'icons/arrows/east.svg';
-import dayjs from 'lib/date/dayjs';
+import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
 import link from 'lib/link/link';
 import AdditionalInfoButton from 'ui/shared/AdditionalInfoButton';
 import Address from 'ui/shared/address/Address';
@@ -39,12 +39,15 @@ type Props = {
   tx: Transaction;
   showBlockInfo: boolean;
   currentAddress?: string;
+  enableTimeIncrement?: boolean;
 }
 
-const TxsTableItem = ({ tx, showBlockInfo, currentAddress }: Props) => {
+const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement }: Props) => {
   const isOut = Boolean(currentAddress && currentAddress === tx.from.hash);
   const isIn = Boolean(currentAddress && currentAddress === tx.to?.hash);
 
+  const timeAgo = useTimeAgoIncrement(tx.timestamp, enableTimeIncrement);
+
   const addressFrom = (
     <Address>
       <Tooltip label={ tx.from.implementation_name }>
@@ -93,7 +96,7 @@ const TxsTableItem = ({ tx, showBlockInfo, currentAddress }: Props) => {
               fontWeight="700"
             />
           </Address>
-          <Text color="gray.500" fontWeight="400">{ dayjs(tx.timestamp).fromNow() }</Text>
+          { tx.timestamp && <Text color="gray.500" fontWeight="400">{ timeAgo }</Text> }
         </VStack>
       </Td>
       <Td>