From 4b089f349053bd7ed9b964494318c81cb42b2952 Mon Sep 17 00:00:00 2001 From: nicolas Date: Wed, 10 Feb 2021 16:39:18 -0300 Subject: [PATCH] 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 --- .../GatewayTransactions/HistoryTxList.tsx | 4 ++-- .../Transactions/GatewayTransactions/TxCollapsed.tsx | 9 ++++++--- .../GatewayTransactions/TxInfoCreation.tsx | 3 ++- .../Transactions/GatewayTransactions/TxSummary.tsx | 3 ++- .../Transactions/GatewayTransactions/styled.tsx | 2 +- .../Transactions/GatewayTransactions/utils.ts | 5 ----- src/utils/date.ts | 12 +++++++++++- 7 files changed, 24 insertions(+), 14 deletions(-) diff --git a/src/routes/safe/components/Transactions/GatewayTransactions/HistoryTxList.tsx b/src/routes/safe/components/Transactions/GatewayTransactions/HistoryTxList.tsx index 6151f96c..4b2ee88c 100644 --- a/src/routes/safe/components/Transactions/GatewayTransactions/HistoryTxList.tsx +++ b/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 => { {transactions?.map(([timestamp, txs]) => ( - {format(Number(timestamp), 'MMM d, yyyy')} + {formatWithSchema(Number(timestamp), 'MMM d, yyyy')} {txs.map((transaction) => ( diff --git a/src/routes/safe/components/Transactions/GatewayTransactions/TxCollapsed.tsx b/src/routes/safe/components/Transactions/GatewayTransactions/TxCollapsed.tsx index c9ce1b0c..6f8ea2ca 100644 --- a/src/routes/safe/components/Transactions/GatewayTransactions/TxCollapsed.tsx +++ b/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 = ({
- {formatTime(time)} + {txLocation === 'history' ? formatTime(time) : formatTimeInWords(time)}
diff --git a/src/routes/safe/components/Transactions/GatewayTransactions/TxInfoCreation.tsx b/src/routes/safe/components/Transactions/GatewayTransactions/TxInfoCreation.tsx index 68f4b0fd..85c066a9 100644 --- a/src/routes/safe/components/Transactions/GatewayTransactions/TxInfoCreation.tsx +++ b/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 => { diff --git a/src/routes/safe/components/Transactions/GatewayTransactions/TxSummary.tsx b/src/routes/safe/components/Transactions/GatewayTransactions/TxSummary.tsx index b0d81c82..84fb6cc7 100644 --- a/src/routes/safe/components/Transactions/GatewayTransactions/TxSummary.tsx +++ b/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 diff --git a/src/routes/safe/components/Transactions/GatewayTransactions/styled.tsx b/src/routes/safe/components/Transactions/GatewayTransactions/styled.tsx index 15767db3..a6ca9337 100644 --- a/src/routes/safe/components/Transactions/GatewayTransactions/styled.tsx +++ b/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', diff --git a/src/routes/safe/components/Transactions/GatewayTransactions/utils.ts b/src/routes/safe/components/Transactions/GatewayTransactions/utils.ts index ac3f4b2c..7bd9a5d9 100644 --- a/src/routes/safe/components/Transactions/GatewayTransactions/utils.ts +++ b/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 { diff --git a/src/utils/date.ts b/src/utils/date.ts index 4e531138..087b8752 100644 --- a/src/utils/date.ts +++ b/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 })