Fixes Proposal Timeline (#1154)

tangle-network · Apr 28, 2023 · da52489 · da52489
1 parent f3d5a5e
commit da52489
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 12 deletions.
diff --git 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
@@ -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>