From fbef138353e3f801623b7599bfd56992925ce6ab Mon Sep 17 00:00:00 2001 From: Branko Bosnic Date: Wed, 19 Apr 2023 10:59:32 +0200 Subject: [PATCH 1/4] fix: display milestone timestamp + improve faucet link section --- .../app/routes/stardust/landing/Landing.scss | 17 +++++------ .../app/routes/stardust/landing/Landing.tsx | 21 ++++++++------ .../stardust/landing/MilestoneFeed.scss | 29 +++++-------------- .../routes/stardust/landing/MilestoneFeed.tsx | 16 ++-------- 4 files changed, 29 insertions(+), 54 deletions(-) diff --git a/client/src/app/routes/stardust/landing/Landing.scss b/client/src/app/routes/stardust/landing/Landing.scss index e1bbb19bd..292ab9259 100644 --- 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 index 6072b453a..7cfa6dd77 100644 --- 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> = (
{networkConfig.description}
{networkConfig.faucet && (
- Get tokens from the Faucet: - - {networkConfig.faucet} - + Get tokens from the + {" "} + + Faucet + + +
)} diff --git a/client/src/app/routes/stardust/landing/MilestoneFeed.scss b/client/src/app/routes/stardust/landing/MilestoneFeed.scss index 07c9e706f..3e8874b82 100644 --- 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 index 6db95065a..e2a8a0495 100644 --- a/client/src/app/routes/stardust/landing/MilestoneFeed.tsx +++ b/client/src/app/routes/stardust/landing/MilestoneFeed.tsx @@ -1,5 +1,4 @@ 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"; @@ -7,7 +6,6 @@ import { useMilestoneInterval } from "../../../../helpers/hooks/useMilestoneInte 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 = ({ 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 (
@@ -90,15 +87,8 @@ const MilestoneFeed: React.FC = ({ networkConfig, milestones />
Timestamp - - - {milestone.index === highestIndex ? secondsSinceLastView : ago} - - - - {milestone.index === highestIndex ? secondsSinceLastView : ago} + + {milestone.index === highestIndex ? secondsSinceLastView : date}
From 3862121bf56aae4a24cbd4060eceaf050523135a Mon Sep 17 00:00:00 2001 From: Branko Bosnic Date: Thu, 27 Apr 2023 21:55:57 +0200 Subject: [PATCH 2/4] fix: add seconds in place of timestamps on landing page --- .../routes/stardust/landing/MilestoneFeed.tsx | 19 +++-------- .../landing/MilestoneFeedTimestamp.tsx | 33 +++++++++++++++++++ .../src/helpers/hooks/useMilestoneInterval.ts | 13 ++++++-- 3 files changed, 48 insertions(+), 17 deletions(-) create mode 100644 client/src/app/routes/stardust/landing/MilestoneFeedTimestamp.tsx diff --git a/client/src/app/routes/stardust/landing/MilestoneFeed.tsx b/client/src/app/routes/stardust/landing/MilestoneFeed.tsx index e2a8a0495..b1bbc7c42 100644 --- a/client/src/app/routes/stardust/landing/MilestoneFeed.tsx +++ b/client/src/app/routes/stardust/landing/MilestoneFeed.tsx @@ -1,13 +1,12 @@ import { HexHelper } from "@iota/util.js-stardust"; 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 MilestoneFeedAnalyics from "./MilestoneFeedAnalytics"; import "./MilestoneFeed.scss"; +import MilestoneFeedTimestamp from "./MilestoneFeedTimestamp"; const FEED_ITEMS_MAX = 10; @@ -19,10 +18,6 @@ interface MilestoneFeedProps { const MilestoneFeed: React.FC = ({ networkConfig, milestones, latestMilestoneIndex }) => { const network = networkConfig.network; - const secondsSinceLast = useMilestoneInterval(latestMilestoneIndex); - const secondsSinceLastView = secondsSinceLast ? ( - {secondsSinceLast.toFixed(2)}s ago - ) : ""; let highestIndex = 0; const milestonesToRender: IMilestoneFeedItem[] = []; @@ -57,8 +52,6 @@ const MilestoneFeed: React.FC = ({ networkConfig, milestones const blockId = HexHelper.addPrefix(milestone.blockId); const milestoneId = milestone.milestoneId; const timestamp = milestone.timestamp * 1000; - const date = DateHelper.formatShort(timestamp); - return (
@@ -85,12 +78,10 @@ const MilestoneFeed: React.FC = ({ networkConfig, milestones milestoneIndex={milestone.index} blockId={blockId} /> -
- Timestamp - - {milestone.index === highestIndex ? secondsSinceLastView : date} - -
+
); })} diff --git a/client/src/app/routes/stardust/landing/MilestoneFeedTimestamp.tsx b/client/src/app/routes/stardust/landing/MilestoneFeedTimestamp.tsx new file mode 100644 index 000000000..dbb30aa46 --- /dev/null +++ b/client/src/app/routes/stardust/landing/MilestoneFeedTimestamp.tsx @@ -0,0 +1,33 @@ +import React from "react"; +import { DateHelper } from "../../../../helpers/dateHelper"; +import { useMilestoneInterval } from "../../../../helpers/hooks/useMilestoneInterval"; +import Tooltip from "../../../components/Tooltip"; + +interface MilestoneFeedTimestampProps { + timestamp: number; + showMilliseconds: boolean; +} + +const MilestoneFeedTimestamp: React.FC = ({ timestamp, showMilliseconds }) => { + const secondsSinceLast = useMilestoneInterval(undefined, timestamp, showMilliseconds); + const secondsSinceLastView = secondsSinceLast ? ( + {secondsSinceLast}s ago + ) : ""; + const tooltipContent = DateHelper.formatShort(timestamp); + + return ( +
+ Timestamp + + + {secondsSinceLastView} + + +
+ ); +}; + +export default MilestoneFeedTimestamp; + diff --git a/client/src/helpers/hooks/useMilestoneInterval.ts b/client/src/helpers/hooks/useMilestoneInterval.ts index 61bf6e918..12604c0ac 100644 --- a/client/src/helpers/hooks/useMilestoneInterval.ts +++ b/client/src/helpers/hooks/useMilestoneInterval.ts @@ -2,11 +2,15 @@ import moment from "moment"; import { useEffect, useState } from "react"; import { useIsMounted } from "./useIsMounted"; -export const useMilestoneInterval = (milestoneIndex: number | undefined) => { +export const useMilestoneInterval = (milestoneIndex?: number, timestamp?: number, precise?: boolean) => { const isMounted = useIsMounted(); const [from, setFrom] = useState(); const [seconds, setSeconds] = useState(); + useEffect(() => { + setFrom(moment(timestamp).startOf("second")); + }, [timestamp]); + useEffect(() => { setFrom(moment()); }, [milestoneIndex]); @@ -14,7 +18,10 @@ export const useMilestoneInterval = (milestoneIndex: number | undefined) => { useEffect(() => { const interval = setInterval(() => { const to = moment(); - const updatedSeconds = to.diff(from, "seconds", true); + let updatedSeconds = to.diff(from, "seconds", precise ?? true); + if (precise) { + updatedSeconds = Number(updatedSeconds.toFixed(2)); + } if (isMounted) { setSeconds(updatedSeconds); } @@ -23,7 +30,7 @@ export const useMilestoneInterval = (milestoneIndex: number | undefined) => { return () => { clearInterval(interval); }; - }, [from]); + }, [from, precise]); return seconds; }; From d668bed0470a01fc667440e2b1266a5a3c49610b Mon Sep 17 00:00:00 2001 From: Branko Bosnic Date: Fri, 28 Apr 2023 17:15:07 +0200 Subject: [PATCH 3/4] fix: all milestones starting from same timestamp on inital load --- client/src/helpers/hooks/useBlockFeed.ts | 2 +- client/src/helpers/hooks/useMilestoneInterval.ts | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/client/src/helpers/hooks/useBlockFeed.ts b/client/src/helpers/hooks/useBlockFeed.ts index b0998b419..f0d89c03a 100644 --- 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 diff --git a/client/src/helpers/hooks/useMilestoneInterval.ts b/client/src/helpers/hooks/useMilestoneInterval.ts index 12604c0ac..d3f5172d5 100644 --- a/client/src/helpers/hooks/useMilestoneInterval.ts +++ b/client/src/helpers/hooks/useMilestoneInterval.ts @@ -12,7 +12,9 @@ export const useMilestoneInterval = (milestoneIndex?: number, timestamp?: number }, [timestamp]); useEffect(() => { - setFrom(moment()); + if (!timestamp) { + setFrom(moment()); + } }, [milestoneIndex]); useEffect(() => { From 1c60702fa3142edec50074871103099be9622f7c Mon Sep 17 00:00:00 2001 From: Branko Bosnic Date: Tue, 2 May 2023 09:15:32 +0200 Subject: [PATCH 4/4] Revert "fix: add seconds in place of timestamps on landing page" This reverts commit 3862121bf56aae4a24cbd4060eceaf050523135a. --- .../routes/stardust/landing/MilestoneFeed.tsx | 19 ++++++++--- .../landing/MilestoneFeedTimestamp.tsx | 33 ------------------- .../src/helpers/hooks/useMilestoneInterval.ts | 17 +++------- 3 files changed, 18 insertions(+), 51 deletions(-) delete mode 100644 client/src/app/routes/stardust/landing/MilestoneFeedTimestamp.tsx diff --git a/client/src/app/routes/stardust/landing/MilestoneFeed.tsx b/client/src/app/routes/stardust/landing/MilestoneFeed.tsx index b1bbc7c42..e2a8a0495 100644 --- a/client/src/app/routes/stardust/landing/MilestoneFeed.tsx +++ b/client/src/app/routes/stardust/landing/MilestoneFeed.tsx @@ -1,12 +1,13 @@ import { HexHelper } from "@iota/util.js-stardust"; 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 MilestoneFeedAnalyics from "./MilestoneFeedAnalytics"; import "./MilestoneFeed.scss"; -import MilestoneFeedTimestamp from "./MilestoneFeedTimestamp"; const FEED_ITEMS_MAX = 10; @@ -18,6 +19,10 @@ interface MilestoneFeedProps { const MilestoneFeed: React.FC = ({ networkConfig, milestones, latestMilestoneIndex }) => { const network = networkConfig.network; + const secondsSinceLast = useMilestoneInterval(latestMilestoneIndex); + const secondsSinceLastView = secondsSinceLast ? ( + {secondsSinceLast.toFixed(2)}s ago + ) : ""; let highestIndex = 0; const milestonesToRender: IMilestoneFeedItem[] = []; @@ -52,6 +57,8 @@ const MilestoneFeed: React.FC = ({ networkConfig, milestones const blockId = HexHelper.addPrefix(milestone.blockId); const milestoneId = milestone.milestoneId; const timestamp = milestone.timestamp * 1000; + const date = DateHelper.formatShort(timestamp); + return (
@@ -78,10 +85,12 @@ const MilestoneFeed: React.FC = ({ networkConfig, milestones milestoneIndex={milestone.index} blockId={blockId} /> - +
+ Timestamp + + {milestone.index === highestIndex ? secondsSinceLastView : date} + +
); })} diff --git a/client/src/app/routes/stardust/landing/MilestoneFeedTimestamp.tsx b/client/src/app/routes/stardust/landing/MilestoneFeedTimestamp.tsx deleted file mode 100644 index dbb30aa46..000000000 --- a/client/src/app/routes/stardust/landing/MilestoneFeedTimestamp.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import React from "react"; -import { DateHelper } from "../../../../helpers/dateHelper"; -import { useMilestoneInterval } from "../../../../helpers/hooks/useMilestoneInterval"; -import Tooltip from "../../../components/Tooltip"; - -interface MilestoneFeedTimestampProps { - timestamp: number; - showMilliseconds: boolean; -} - -const MilestoneFeedTimestamp: React.FC = ({ timestamp, showMilliseconds }) => { - const secondsSinceLast = useMilestoneInterval(undefined, timestamp, showMilliseconds); - const secondsSinceLastView = secondsSinceLast ? ( - {secondsSinceLast}s ago - ) : ""; - const tooltipContent = DateHelper.formatShort(timestamp); - - return ( -
- Timestamp - - - {secondsSinceLastView} - - -
- ); -}; - -export default MilestoneFeedTimestamp; - diff --git a/client/src/helpers/hooks/useMilestoneInterval.ts b/client/src/helpers/hooks/useMilestoneInterval.ts index d3f5172d5..61bf6e918 100644 --- a/client/src/helpers/hooks/useMilestoneInterval.ts +++ b/client/src/helpers/hooks/useMilestoneInterval.ts @@ -2,28 +2,19 @@ import moment from "moment"; import { useEffect, useState } from "react"; import { useIsMounted } from "./useIsMounted"; -export const useMilestoneInterval = (milestoneIndex?: number, timestamp?: number, precise?: boolean) => { +export const useMilestoneInterval = (milestoneIndex: number | undefined) => { const isMounted = useIsMounted(); const [from, setFrom] = useState(); const [seconds, setSeconds] = useState(); useEffect(() => { - setFrom(moment(timestamp).startOf("second")); - }, [timestamp]); - - useEffect(() => { - if (!timestamp) { - setFrom(moment()); - } + setFrom(moment()); }, [milestoneIndex]); useEffect(() => { const interval = setInterval(() => { const to = moment(); - let updatedSeconds = to.diff(from, "seconds", precise ?? true); - if (precise) { - updatedSeconds = Number(updatedSeconds.toFixed(2)); - } + const updatedSeconds = to.diff(from, "seconds", true); if (isMounted) { setSeconds(updatedSeconds); } @@ -32,7 +23,7 @@ export const useMilestoneInterval = (milestoneIndex?: number, timestamp?: number return () => { clearInterval(interval); }; - }, [from, precise]); + }, [from]); return seconds; };