From 8821fe153d2c9621331544bbce1eaf9ddcb5aed8 Mon Sep 17 00:00:00 2001
From: Leandro Boscariol <alfetopito@users.noreply.github.com>
Date: Fri, 26 Jun 2020 09:17:11 -0700
Subject: [PATCH] Using transaction time instead of batch time for trades date
 (#1156)

Co-authored-by: Leandro Boscariol <leandro.boscariol@gnosis.io>
---
 src/components/TradesWidget/TradeRow.tsx | 9 ++++++---
 src/const.ts                             | 1 +
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/TradesWidget/TradeRow.tsx b/src/components/TradesWidget/TradeRow.tsx
index 806368031..fa49afb79 100644
--- a/src/components/TradesWidget/TradeRow.tsx
+++ b/src/components/TradesWidget/TradeRow.tsx
@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react'
 import styled from 'styled-components'
 import BigNumber from 'bignumber.js'
+import { formatDistanceStrict } from 'date-fns'
 
 import { formatPrice, formatSmart, formatAmountFull, invertPrice, DEFAULT_PRECISION } from '@gnosis.pm/dex-js'
 
@@ -8,7 +9,7 @@ import { Trade, TradeType } from 'api/exchange/ExchangeApi'
 
 import { EtherscanLink } from 'components/EtherscanLink'
 
-import { isTradeSettled, formatDateFromBatchId } from 'utils'
+import { isTradeSettled } from 'utils'
 import { displayTokenSymbolOrLink } from 'utils/display'
 import { ONE_HUNDRED_BIG_NUMBER } from 'const'
 
@@ -89,6 +90,8 @@ export const TradeRow: React.FC<TradeRowProps> = params => {
   const invertedLimitPrice = limitPrice && !limitPrice.isZero() && invertPrice(limitPrice)
   const invertedFillPrice = invertPrice(fillPrice)
 
+  const date = new Date(timestamp)
+
   const typeColumnTitle = useMemo(() => {
     switch (type) {
       case 'full':
@@ -114,8 +117,8 @@ export const TradeRow: React.FC<TradeRowProps> = params => {
   // Do not display trades that are not settled
   return !isTradeSettled(trade) ? null : (
     <tr data-order-id={orderId} data-batch-id={batchId}>
-      <td data-label="Date" title={new Date(timestamp).toLocaleString()}>
-        {formatDateFromBatchId(batchId, { strict: true })}
+      <td data-label="Date" title={date.toLocaleString()}>
+        {formatDistanceStrict(date, new Date(), { addSuffix: true })}
       </td>
       <td data-label="Trade">
         {displayTokenSymbolOrLink(buyToken)}/{displayTokenSymbolOrLink(sellToken)}
diff --git a/src/const.ts b/src/const.ts
index 784717028..81b02f9e7 100644
--- a/src/const.ts
+++ b/src/const.ts
@@ -32,6 +32,7 @@ export const ONE_HUNDRED_BIG_NUMBER = new BigNumber(100)
 export const ORDER_FILLED_FACTOR = new BN(10000) // 0.01%
 
 export const BATCH_SUBMISSION_CLOSE_TIME = 4 // in minutes
+
 export const MINIMUM_ALLOWANCE_DECIMALS = 12
 
 export const APP_NAME = 'fuse'