Remove days from countdown timeAgo (MystenLabs#12141)

## Description 
Removing days from the countdown `timeAgo` helper. The wallet `Staking
Rewards Redeemable` was the only place this is visible, and this should
be in hours, not days.

<img width="405" alt="Screenshot 2023-05-22 at 12 19 39 PM"
src="https://github.com/MystenLabs/sui/assets/126525197/9d07f282-5bde-49aa-a01e-1667dcb84e69">


Describe the changes or additions included in this PR.

## Test Plan 

How did you test the new or updated feature?

---
If your changes are not user-facing and not a breaking change, you can
skip the following section. Otherwise, please indicate what changed, and
then add to the Release Notes section as highlighted during the release
process.

### Type of Change (Check all that apply)

- [x] user-visible impact
- [ ] breaking change for a client SDKs
- [ ] breaking change for FNs (FN binary must upgrade)
- [ ] breaking change for validators or node operators (must upgrade
binaries)
- [ ] breaking change for on-chain data layout
- [ ] necessitate either a data wipe or data migration

### Release notes

apps/core/src/hooks/useTimeAgo.ts

@@ -30,37 +30,49 @@ const TIME_LABEL = {
     },
 };
 
-const ONE_SECOND = 1000;
-const ONE_MINUTE = ONE_SECOND * 60;
-const ONE_HOUR = ONE_MINUTE * 60;
-const ONE_DAY = ONE_HOUR * 24;
+export enum TimeUnit {
+    ONE_SECOND = 1000,
+    ONE_MINUTE = TimeUnit.ONE_SECOND * 60,
+    ONE_HOUR = TimeUnit.ONE_MINUTE * 60,
+    ONE_DAY = TimeUnit.ONE_HOUR * 24,
+}
 
 /**
  * Formats a timestamp using `timeAgo`, and automatically updates it when the value is small.
  */
-export function useTimeAgo(
-    timeFrom?: number | null,
-    shortedTimeLabel?: boolean,
-    shouldEnd?: boolean,
-    endLabel?: string
-) {
+
+type TimeAgoOptions = {
+    timeFrom: number | null;
+    shortedTimeLabel: boolean;
+    shouldEnd?: boolean;
+    endLabel?: string;
+    maxTimeUnit?: TimeUnit;
+};
+
+export function useTimeAgo(options: TimeAgoOptions) {
+    const { timeFrom, shortedTimeLabel, shouldEnd, endLabel, maxTimeUnit } =
+        options;
     const [now, setNow] = useState(() => Date.now());
 
     // end interval when the difference between now and timeFrom is less than or equal to 0
     const continueInterval = shouldEnd ? (timeFrom || now) - now >= 0 : true;
     const intervalEnabled =
         !!timeFrom &&
-        Math.abs(now - (timeFrom || now)) < ONE_HOUR &&
+        Math.abs(now - (timeFrom || now)) < TimeUnit.ONE_HOUR &&
         continueInterval;
 
     const formattedTime = useMemo(
-        () => timeAgo(timeFrom, now, shortedTimeLabel, endLabel),
-        [now, timeFrom, shortedTimeLabel, endLabel]
+        () => timeAgo(timeFrom, now, shortedTimeLabel, endLabel, maxTimeUnit),
+        [timeFrom, now, shortedTimeLabel, endLabel, maxTimeUnit]
     );
 
     useEffect(() => {
         if (!timeFrom || !intervalEnabled) return;
-        const timeout = setInterval(() => setNow(Date.now()), ONE_SECOND);
+        console.log('interval enabled');
+        const timeout = setInterval(
+            () => setNow(Date.now()),
+            TimeUnit.ONE_SECOND
+        );
         return () => clearTimeout(timeout);
     }, [intervalEnabled, timeFrom]);
 
@@ -72,7 +84,8 @@ export const timeAgo = (
     epochMilliSecs: number | null | undefined,
     timeNow?: number | null,
     shortenTimeLabel?: boolean,
-    endLabel = `< 1 sec`
+    endLabel = `< 1 sec`,
+    maxTimeUnit = TimeUnit.ONE_DAY
 ): string => {
     if (!epochMilliSecs) return '';
 
@@ -82,20 +95,20 @@ export const timeAgo = (
     let timeUnit: [string, number][];
     let timeCol = Math.abs(timeNow - epochMilliSecs);
 
-    if (timeCol >= ONE_DAY) {
+    if (timeCol >= maxTimeUnit && maxTimeUnit >= TimeUnit.ONE_DAY) {
         timeUnit = [
-            [TIME_LABEL.day[dateKeyType], ONE_DAY],
-            [TIME_LABEL.hour[dateKeyType], ONE_HOUR],
+            [TIME_LABEL.day[dateKeyType], TimeUnit.ONE_DAY],
+            [TIME_LABEL.hour[dateKeyType], TimeUnit.ONE_HOUR],
         ];
-    } else if (timeCol >= ONE_HOUR) {
+    } else if (timeCol >= TimeUnit.ONE_HOUR) {
         timeUnit = [
-            [TIME_LABEL.hour[dateKeyType], ONE_HOUR],
-            [TIME_LABEL.min[dateKeyType], ONE_MINUTE],
+            [TIME_LABEL.hour[dateKeyType], TimeUnit.ONE_HOUR],
+            [TIME_LABEL.min[dateKeyType], TimeUnit.ONE_MINUTE],
         ];
     } else {
         timeUnit = [
-            [TIME_LABEL.min[dateKeyType], ONE_MINUTE],
-            [TIME_LABEL.sec[dateKeyType], ONE_SECOND],
+            [TIME_LABEL.min[dateKeyType], TimeUnit.ONE_MINUTE],
+            [TIME_LABEL.sec[dateKeyType], TimeUnit.ONE_SECOND],
         ];
     }
 

apps/explorer/src/components/tx-time/TxTimeType.tsx

@@ -8,7 +8,10 @@ type Prop = {
 };
 
 export function TxTimeType({ timestamp }: Prop) {
-    const timeAgo = useTimeAgo(timestamp, true);
+    const timeAgo = useTimeAgo({
+        timeFrom: timestamp || null,
+        shortedTimeLabel: true,
+    });
 
     return (
         <section>

apps/explorer/src/pages/epochs/utils.ts

@@ -15,7 +15,11 @@ export function useEpochProgress(suffix: string = 'left') {
         start !== undefined && duration !== undefined
             ? start + duration
             : undefined;
-    const time = useTimeAgo(end, true, true);
+    const time = useTimeAgo({
+        timeFrom: end || null,
+        shortedTimeLabel: true,
+        shouldEnd: true,
+    });
 
     if (!start || !end) {
         return {};

apps/wallet/src/ui/app/shared/countdown-timer/index.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import { useTimeAgo } from '@mysten/core';
+import { useTimeAgo, TimeUnit } from '@mysten/core';
 import { cva, type VariantProps } from 'class-variance-authority';
 
 const timeStyle = cva([], {
@@ -38,7 +38,13 @@ export function CountDownTimer({
     endLabel = 'now',
     ...styles
 }: CountDownTimerProps) {
-    const timeAgo = useTimeAgo(timestamp, false, true, endLabel);
+    const timeAgo = useTimeAgo({
+        timeFrom: timestamp || null,
+        shortedTimeLabel: false,
+        shouldEnd: true,
+        endLabel: endLabel,
+        maxTimeUnit: TimeUnit.ONE_HOUR,
+    });
 
     return (
         <div className={timeStyle(styles)}>