add age increment

ui/address/coinBalance/AddressCoinBalanceHistory.tsx

@@ -59,14 +59,14 @@ const AddressCoinBalanceHistory = ({ query }: Props) => {
             </Thead>
             <Tbody>
               { query.data.items.map((item) => (
-                <AddressCoinBalanceTableItem key={ item.block_number } { ...item }/>
+                <AddressCoinBalanceTableItem key={ item.block_number } { ...item } page={ query.pagination.page }/>
               )) }
             </Tbody>
           </Table>
         </Hide>
         <Show below="lg">
           { query.data.items.map((item) => (
-            <AddressCoinBalanceListItem key={ item.block_number } { ...item }/>
+            <AddressCoinBalanceListItem key={ item.block_number } { ...item } page={ query.pagination.page }/>
           )) }
         </Show>
       </>

ui/address/coinBalance/AddressCoinBalanceListItem.tsx

@@ -6,18 +6,21 @@ import type { AddressCoinBalanceHistoryItem } from 'types/api/address';
 
 import appConfig from 'configs/app/config';
 import { WEI, ZERO } from 'lib/consts';
-import dayjs from 'lib/date/dayjs';
+import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
 import link from 'lib/link/link';
 import AccountListItemMobile from 'ui/shared/AccountListItemMobile';
 import Address from 'ui/shared/address/Address';
 import AddressLink from 'ui/shared/address/AddressLink';
 
-type Props = AddressCoinBalanceHistoryItem;
+type Props = AddressCoinBalanceHistoryItem & {
+  page: number;
+};
 
 const AddressCoinBalanceListItem = (props: Props) => {
   const blockUrl = link('block', { id: String(props.block_number) });
   const deltaBn = BigNumber(props.delta).div(WEI);
   const isPositiveDelta = deltaBn.gte(ZERO);
+  const timeAgo = useTimeAgoIncrement(props.block_timestamp, props.page === 1);
 
   return (
     <AccountListItemMobile fontSize="sm" rowGap={ 2 }>
@@ -46,7 +49,7 @@ const AddressCoinBalanceListItem = (props: Props) => {
       ) }
       <Flex columnGap={ 2 } w="100%">
         <Text fontWeight={ 500 } flexShrink={ 0 }>Age</Text>
-        <Text variant="secondary">{ dayjs(props.block_timestamp).fromNow() }</Text>
+        <Text variant="secondary">{ timeAgo }</Text>
       </Flex>
     </AccountListItemMobile>
   );

ui/address/coinBalance/AddressCoinBalanceTableItem.tsx

@@ -5,17 +5,20 @@ import React from 'react';
 import type { AddressCoinBalanceHistoryItem } from 'types/api/address';
 
 import { WEI, ZERO } from 'lib/consts';
-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 AddressLink from 'ui/shared/address/AddressLink';
 
-type Props = AddressCoinBalanceHistoryItem;
+type Props = AddressCoinBalanceHistoryItem & {
+  page: number;
+};
 
 const AddressCoinBalanceTableItem = (props: Props) => {
   const blockUrl = link('block', { id: String(props.block_number) });
   const deltaBn = BigNumber(props.delta).div(WEI);
   const isPositiveDelta = deltaBn.gte(ZERO);
+  const timeAgo = useTimeAgoIncrement(props.block_timestamp, props.page === 1);
 
   return (
     <Tr>
@@ -33,7 +36,7 @@ const AddressCoinBalanceTableItem = (props: Props) => {
         }
       </Td>
       <Td>
-        <Text variant="secondary">{ dayjs(props.block_timestamp).fromNow() }</Text>
+        <Text variant="secondary">{ timeAgo }</Text>
       </Td>
       <Td isNumeric pr={ 1 }>
         <Text>{ BigNumber(props.value).div(WEI).toFixed(8) }</Text>