From da52489d948954b42d820c560f681c917957995b Mon Sep 17 00:00:00 2001
From: Pavan Soratur <pavanvsoratur@gmail.com>
Date: Fri, 28 Apr 2023 14:14:04 -0700
Subject: [PATCH] Fixes Proposal Timeline (#1154)

---
 .../ProposalDetail/ProposalDetail.tsx         | 22 +++++++++++--------
 .../src/components/TimeLine/TimeLineItem.tsx  |  6 ++---
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/apps/stats-dapp/src/containers/ProposalDetail/ProposalDetail.tsx b/apps/stats-dapp/src/containers/ProposalDetail/ProposalDetail.tsx
index c538b5afee..c7cf36fdd3 100644
--- a/apps/stats-dapp/src/containers/ProposalDetail/ProposalDetail.tsx
+++ b/apps/stats-dapp/src/containers/ProposalDetail/ProposalDetail.tsx
@@ -210,15 +210,19 @@ export const ProposalDetail = () => {
             Timeline
           </Typography>
           <TimeLine className="translate-x-3">
-            {timeline.map((time, idx) => (
-              <TimeLineItem
-                key={`${time.at.toString()}-${idx}`}
-                title={time.status}
-                time={time.at}
-                txHash=""
-                externalUrl="#"
-              />
-            ))}
+            {timeline.map((time, idx) => {
+              const status = time.id.split('-')[1];
+
+              return (
+                <TimeLineItem
+                  key={`${time.at.toString()}-${idx}`}
+                  title={status === 'Open' ? 'Added' : status}
+                  time={time.at}
+                  txHash=""
+                  externalUrl="#"
+                />
+              );
+            })}
           </TimeLine>
           {/** Detail */}
           <Typography variant="h5" fw="bold">
diff --git a/libs/webb-ui-components/src/components/TimeLine/TimeLineItem.tsx b/libs/webb-ui-components/src/components/TimeLine/TimeLineItem.tsx
index 5995107d51..46360d9565 100644
--- a/libs/webb-ui-components/src/components/TimeLine/TimeLineItem.tsx
+++ b/libs/webb-ui-components/src/components/TimeLine/TimeLineItem.tsx
@@ -5,7 +5,7 @@ import {
 } from '@webb-tools/icons';
 import { Typography } from '../../typography';
 import { shortenHex } from '../../utils';
-import { formatDistanceToNow } from 'date-fns';
+import { formatRelative } from 'date-fns';
 import { forwardRef } from 'react';
 import { twMerge } from 'tailwind-merge';
 
@@ -107,8 +107,8 @@ export const TimeLineItem = forwardRef<HTMLDivElement, TimeLineItemProps>(
           >
             {title}
           </Typography>
-          <Typography variant="utility" className="inline-block uppercase">
-            {formatDistanceToNow(time, { addSuffix: true })}
+          <Typography variant="utility" className="inline-block capitalize">
+            {formatRelative(time, new Date()).replace('at', '-')}
           </Typography>
         </div>