Add relative time in queue lists (#1878)

* Add relative time in queue lists

* Add all date-fns functions to src/utils/date

Co-authored-by: Daniel Sanchez <daniel.sanchez@gnosis.pm>

src/routes/safe/components/Transactions/GatewayTransactions/HistoryTxList.tsx

@@ -1,5 +1,4 @@
 import { Loader } from '@gnosis.pm/safe-react-components'
-import { format } from 'date-fns'
 import React, { ReactElement } from 'react'
 
 import { InfiniteScroll, SCROLLABLE_TARGET_ID } from 'src/components/InfiniteScroll'
@@ -13,6 +12,7 @@ import {
 } from './styled'
 import { TxHistoryRow } from './TxHistoryRow'
 import { TxLocationContext } from './TxLocationProvider'
+import { formatWithSchema } from 'src/utils/date'
 
 export const HistoryTxList = (): ReactElement => {
   const { count, hasMore, next, transactions } = usePagedHistoryTransactions()
@@ -31,7 +31,7 @@ export const HistoryTxList = (): ReactElement => {
         <InfiniteScroll dataLength={transactions.length} next={next} hasMore={hasMore}>
           {transactions?.map(([timestamp, txs]) => (
             <StyledTransactionsGroup key={timestamp}>
-              <SubTitle size="lg">{format(Number(timestamp), 'MMM d, yyyy')}</SubTitle>
+              <SubTitle size="lg">{formatWithSchema(Number(timestamp), 'MMM d, yyyy')}</SubTitle>
               <StyledTransactions>
                 {txs.map((transaction) => (
                   <TxHistoryRow key={transaction.id} transaction={transaction} />

src/routes/safe/components/Transactions/GatewayTransactions/TxCollapsed.tsx

@@ -3,7 +3,7 @@ import { ThemeColors } from '@gnosis.pm/safe-react-components/dist/theme'
 import { Tooltip } from '@material-ui/core'
 import CircularProgress from '@material-ui/core/CircularProgress'
 import { createStyles, makeStyles } from '@material-ui/core/styles'
-import React, { ReactElement, useRef } from 'react'
+import React, { ReactElement, useContext, useRef } from 'react'
 
 import CustomIconText from 'src/components/CustomIconText'
 import {
@@ -13,7 +13,7 @@ import {
   Transaction,
 } from 'src/logic/safe/store/models/types/gateway.d'
 import { TxCollapsedActions } from 'src/routes/safe/components/Transactions/GatewayTransactions/TxCollapsedActions'
-import { formatDateTime, formatTime } from 'src/routes/safe/components/Transactions/GatewayTransactions/utils'
+import { formatDateTime, formatTime, formatTimeInWords } from 'src/utils/date'
 import { KNOWN_MODULES } from 'src/utils/constants'
 import styled from 'styled-components'
 import { AssetInfo, isTokenTransferAsset } from './hooks/useAssetInfo'
@@ -22,6 +22,7 @@ import { TransactionStatusProps } from './hooks/useTransactionStatus'
 import { TxTypeProps } from './hooks/useTransactionType'
 import { StyledGroupedTransactions, StyledTransaction } from './styled'
 import { TokenTransferAmount } from './TokenTransferAmount'
+import { TxLocationContext } from './TxLocationProvider'
 import { CalculatedVotes } from './TxQueueCollapsed'
 
 const TxInfo = ({ info }: { info: AssetInfo }) => {
@@ -126,6 +127,8 @@ export const TxCollapsed = ({
   actions,
   status,
 }: TxCollapsedProps): ReactElement => {
+  const { txLocation } = useContext(TxLocationContext)
+
   const willBeReplaced = transaction?.txStatus === 'WILL_BE_REPLACED' ? ' will-be-replaced' : ''
 
   const txCollapsedNonce = (
@@ -149,7 +152,7 @@ export const TxCollapsed = ({
     <div className={'tx-time' + willBeReplaced}>
       <Tooltip classes={tooltipStyles} title={formatDateTime(time)} arrow>
         <TooltipContent ref={timestamp}>
-          <Text size="xl">{formatTime(time)}</Text>
+          <Text size="xl">{txLocation === 'history' ? formatTime(time) : formatTimeInWords(time)}</Text>
         </TooltipContent>
       </Tooltip>
     </div>

src/routes/safe/components/Transactions/GatewayTransactions/TxInfoCreation.tsx

@@ -2,8 +2,9 @@ import { Text } from '@gnosis.pm/safe-react-components'
 import React, { ReactElement } from 'react'
 
 import { getExplorerInfo } from 'src/config'
+import { formatDateTime } from 'src/utils/date'
 import { Creation, Transaction } from 'src/logic/safe/store/models/types/gateway.d'
-import { formatDateTime, NOT_AVAILABLE } from './utils'
+import { NOT_AVAILABLE } from './utils'
 import { InlineEthHashInfo, TxDetailsContainer } from './styled'
 
 export const TxInfoCreation = ({ transaction }: { transaction: Transaction }): ReactElement | null => {

src/routes/safe/components/Transactions/GatewayTransactions/TxSummary.tsx

@@ -2,9 +2,10 @@ import { Text } from '@gnosis.pm/safe-react-components'
 import React, { ReactElement } from 'react'
 
 import { getExplorerInfo } from 'src/config'
+import { formatDateTime } from 'src/utils/date'
 import { ExpandedTxDetails, isMultiSigExecutionDetails, Operation } from 'src/logic/safe/store/models/types/gateway.d'
 import { InlineEthHashInfo } from './styled'
-import { formatDateTime, NOT_AVAILABLE } from './utils'
+import { NOT_AVAILABLE } from './utils'
 
 export const TxSummary = ({ txDetails }: { txDetails: ExpandedTxDetails }): ReactElement => {
   const { txHash, detailedExecutionInfo, executedAt, txData } = txDetails

src/routes/safe/components/Transactions/GatewayTransactions/styled.tsx

@@ -142,7 +142,7 @@ const gridColumns = {
   nonce: '0.75fr',
   type: '3fr',
   info: '3fr',
-  time: '1.5fr',
+  time: '2fr',
   votes: '1.5fr',
   actions: '1fr',
   status: '3fr',

src/routes/safe/components/Transactions/GatewayTransactions/utils.ts

@@ -1,5 +1,4 @@
 import { BigNumber } from 'bignumber.js'
-import format from 'date-fns/format'
 
 import { getNetworkInfo } from 'src/config'
 import {
@@ -25,10 +24,6 @@ export const TX_TABLE_RAW_TX_ID = 'tx'
 export const TX_TABLE_RAW_CANCEL_TX_ID = 'cancelTx'
 export const TX_TABLE_EXPAND_ICON = 'expand'
 
-export const formatTime = (timestamp: number): string => format(timestamp, 'h:mm a')
-
-export const formatDateTime = (timestamp: number): string => format(timestamp, 'MMM d, yyyy - h:mm:ss a')
-
 export const NOT_AVAILABLE = 'n/a'
 
 interface AmountData {

src/utils/date.ts

@@ -1,4 +1,6 @@
-import { formatRelative } from 'date-fns'
+import format from 'date-fns/format'
+import formatRelative from 'date-fns/formatRelative'
+import formatDistanceToNow from 'date-fns/formatDistanceToNow'
 
 export const relativeTime = (baseTimeMin: string, resetTimeMin: string): string => {
   if (resetTimeMin === '0') {
@@ -17,3 +19,11 @@ export const getUTCStartOfDate = (timestamp: number): number => {
 
   return Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), 0, 0, 0, 0)
 }
+
+export const formatWithSchema = (timestamp: number, schema: string): string => format(timestamp, schema)
+
+export const formatTime = (timestamp: number): string => formatWithSchema(timestamp, 'h:mm a')
+
+export const formatDateTime = (timestamp: number): string => formatWithSchema(timestamp, 'MMM d, yyyy - h:mm:ss a')
+
+export const formatTimeInWords = (timestamp: number): string => formatDistanceToNow(timestamp, { addSuffix: true })