Merge pull request #760 from iotaledger/fix/landing-page-timestamp

Fix: Display formatted milestone timestamp on Landing page feed
iotaledger · May 2, 2023 · efbc113 · efbc113
2 parents 3f7ff9f + 1c60702
commit efbc113
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 55 deletions.
diff --git a/client/src/app/routes/stardust/landing/Landing.scss b/client/src/app/routes/stardust/landing/Landing.scss
@@ -120,6 +120,10 @@
             flex-direction: column;
             max-width: 960px;
 
+            @include phone-down {
+                margin: 0px;
+            }
+
             .feeds-section {
                 display: flex;
                 flex-direction: column;
@@ -189,23 +193,16 @@
             }
 
             .faucet {
+                @include font-size(14px);
+
                 display: flex;
                 justify-content: center;
                 padding: 20px;
-                @include font-size(14px);
                 color: $gray;
                 font-family: $metropolis;
 
                 .data-link {
-                    @include phone-down {
-                        margin-left: 0px;
-                        margin-top: 10px;
-                    }
-                }
-
-                @include phone-down {
-                    padding: 10px;
-                    flex-direction: column;
+                    color: var(--link-color);
                 }
             }
 

diff --git a/client/src/app/routes/stardust/landing/Landing.tsx b/client/src/app/routes/stardust/landing/Landing.tsx
@@ -66,15 +66,18 @@ export const Landing: React.FC<RouteComponentProps<LandingRouteProps>> = (
                             <div className="card--content description">{networkConfig.description}</div>
                             {networkConfig.faucet && (
                                 <div className="card--content faucet">
-                                    <span>Get tokens from the Faucet:</span>
-                                    <a
-                                        className="data-link margin-l-t"
-                                        href={networkConfig.faucet}
-                                        target="_blank"
-                                        rel="noopener noreferrer"
-                                    >
-                                        {networkConfig.faucet}
-                                    </a>
+                                    <span>Get tokens from the
+                                        {" "}
+                                        <a
+                                            className="data-link link"
+                                            href={networkConfig.faucet}
+                                            target="_blank"
+                                            rel="noopener noreferrer"
+                                        >
+                                            Faucet
+                                        </a>
+                                    </span>
+
                                 </div>
                             )}
                         </div>

diff --git a/client/src/app/routes/stardust/landing/MilestoneFeed.scss b/client/src/app/routes/stardust/landing/MilestoneFeed.scss
@@ -170,31 +170,16 @@
                 min-width: 120px;
                 display: flex;
                 justify-content: left;
+                color: var(--link-color);
 
-                .tooltip .children {
-                    font-weight: inherit;
-                }
-
-                &.desktop-only {
-                    @include tablet-down {
-                        display: none;
-                    }
-                }
-
-                &.mobile {
-                    display: none;
-                    font-weight: 400;
-
-                    @include tablet-down {
-                        @include font-size(14px, 20px);
-                        color: var(--link-color);
-                        font-family: $ibm-plex-mono;
-                        display: inline-block;
-                        word-break: break-word;
-                    }
-                }
                 @include tablet-down {
+                    @include font-size(14px, 20px);
+
                     padding-left: 8px;
+                    font-weight: 400;
+                    font-family: $ibm-plex-mono;
+                    display: inline-block;
+                    word-break: break-word;
                 }
             }
 

diff --git a/client/src/app/routes/stardust/landing/MilestoneFeed.tsx b/client/src/app/routes/stardust/landing/MilestoneFeed.tsx
@@ -1,13 +1,11 @@
 import { HexHelper } from "@iota/util.js-stardust";
-import moment from "moment";
 import React from "react";
 import { Link } from "react-router-dom";
 import { DateHelper } from "../../../../helpers/dateHelper";
 import { useMilestoneInterval } from "../../../../helpers/hooks/useMilestoneInterval";
 import { INetwork } from "../../../../models/config/INetwork";
 import { IMilestoneFeedItem } from "../../../../models/IMilestoneFeedItem";
 import TruncatedId from "../../../components/stardust/TruncatedId";
-import Tooltip from "../../../components/Tooltip";
 import MilestoneFeedAnalyics from "./MilestoneFeedAnalytics";
 import "./MilestoneFeed.scss";
 
@@ -59,8 +57,7 @@ const MilestoneFeed: React.FC<MilestoneFeedProps> = ({ networkConfig, milestones
                     const blockId = HexHelper.addPrefix(milestone.blockId);
                     const milestoneId = milestone.milestoneId;
                     const timestamp = milestone.timestamp * 1000;
-                    const ago = moment(timestamp).fromNow();
-                    const tooltipContent = DateHelper.formatShort(timestamp);
+                    const date = DateHelper.formatShort(timestamp);
 
                     return (
                         <div className="feed-item ms-feed" key={milestoneId}>
@@ -90,15 +87,8 @@ const MilestoneFeed: React.FC<MilestoneFeedProps> = ({ networkConfig, milestones
                             />
                             <div className="feed-item__content">
                                 <span className="feed-item--label">Timestamp</span>
-                                <span className="feed-item--value ms-timestamp desktop-only">
-                                    <Tooltip
-                                        tooltipContent={tooltipContent}
-                                    >
-                                        {milestone.index === highestIndex ? secondsSinceLastView : ago}
-                                    </Tooltip>
-                                </span>
-                                <span className="feed-item--value ms-timestamp mobile">
-                                    {milestone.index === highestIndex ? secondsSinceLastView : ago}
+                                <span className="feed-item--value ms-timestamp">
+                                    {milestone.index === highestIndex ? secondsSinceLastView : date}
                                 </span>
                             </div>
                         </div>

diff --git a/client/src/helpers/hooks/useBlockFeed.ts b/client/src/helpers/hooks/useBlockFeed.ts
@@ -9,7 +9,7 @@ import { StardustFeedClient } from "../../services/stardust/stardustFeedClient";
 import { useIsMounted } from "./useIsMounted";
 
 const MAX_MILESTONE_ITEMS = 20;
-const FEED_PROBE_THRESHOLD: number = 6000;
+const FEED_PROBE_THRESHOLD: number = 10000;
 
 /**
  * Hook into feed service for data