feat: show date next to milestone index (#963)

* feat: show date next to milestone index * fix: rmeove unused import * chore: rename milestone timestamp state * chore: add hypen before milestone timestamp --------- Co-authored-by: Mario <[email protected]> Co-authored-by: Begoña Álvarez de la Cruz <[email protected]>
iotaledger · Jan 22, 2024 · 53cc883 · 53cc883
1 parent fc75b8f
commit 53cc883
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git a/client/src/app/components/stardust/block/BlockTangleState.scss b/client/src/app/components/stardust/block/BlockTangleState.scss
@@ -22,7 +22,7 @@
         font-weight: 500;
         letter-spacing: 0.5px;
 
-        @include phone-down {
+        @include tablet-down {
             margin-left: 8px;
             flex-direction: column;
             white-space: normal;

diff --git a/client/src/app/components/stardust/block/BlockTangleState.tsx b/client/src/app/components/stardust/block/BlockTangleState.tsx
@@ -1,19 +1,20 @@
 import classNames from "classnames";
-import moment from "moment";
 import React, { useEffect, useState } from "react";
 import { BlockTangleStateProps } from "./BlockTangleStateProps";
 import { useMilestoneDetails } from "~helpers/hooks/useMilestoneDetails";
 import Tooltip from "../../Tooltip";
 import "./BlockTangleState.scss";
+import { DateHelper } from "~/helpers/dateHelper";
 
 const BlockTangleState: React.FC<BlockTangleStateProps> = ({ network, status, milestoneIndex, hasConflicts, conflictReason, onClick }) => {
-    const [ago, setAgo] = useState<string | undefined>();
+    const [milestoneTimestamp, setMilestoneTimestamp] = useState<string | undefined>();
     const [blockId, setBlockId] = useState<string | undefined>();
     const [milestoneDetails] = useMilestoneDetails(network, milestoneIndex ?? null);
 
     useEffect(() => {
         if (milestoneDetails?.milestone?.timestamp) {
-            setAgo(moment(milestoneDetails.milestone?.timestamp * 1000).fromNow());
+            const readableTimestamp = DateHelper.format(DateHelper.milliseconds(milestoneDetails.milestone.timestamp));
+            setMilestoneTimestamp(readableTimestamp);
         }
         setBlockId(milestoneDetails?.blockId);
     }, [milestoneDetails]);
@@ -34,7 +35,7 @@ const BlockTangleState: React.FC<BlockTangleStateProps> = ({ network, status, mi
                             {milestoneIndex && "Confirmed"}
                             {!milestoneIndex && "Pending"}
                         </div>
-                        {milestoneIndex && <span className="row middle">Created {ago}</span>}
+                        {milestoneIndex && <span className="row middle">Created {milestoneTimestamp}</span>}
                     </div>
                 </div>
             )}
@@ -77,7 +78,7 @@ const BlockTangleState: React.FC<BlockTangleStateProps> = ({ network, status, mi
                             >
                                 Milestone {milestoneIndex}
                             </span>
-                            <span> {ago}</span>
+                            <span> - {milestoneTimestamp}</span>
                         </div>
                     ) : (
                         ""