[explorer] - epoch end time label fix (MystenLabs#10150)

## Description 

Prevents timer from continuing to count up at the end of an epoch

## 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)

- [ ] 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/explorer/src/pages/epochs/useEpochProgress.ts

@@ -6,18 +6,14 @@ import { useQuery } from '@tanstack/react-query';
 
 export function useEpochProgress(suffix: string = 'left') {
     const rpc = useRpcClient();
-    const { data } = useQuery(
-        ['system', 'state'],
-        () => rpc.getLatestSuiSystemState(),
-        {
-            refetchInterval: 5000,
-        }
+    const { data } = useQuery(['system', 'state'], () =>
+        rpc.getLatestSuiSystemState()
     );
 
     const start = data?.epochStartTimestampMs ?? 0;
     const duration = data?.epochDurationMs ?? 0;
     const end = start + duration;
-    const time = useTimeAgo(end, true);
+    const time = useTimeAgo(end, true, true);
     const progress =
         start && duration
             ? Math.min(((Date.now() - start) / (end - start)) * 100, 100)
@@ -26,6 +22,6 @@ export function useEpochProgress(suffix: string = 'left') {
     return {
         epoch: data?.epoch,
         progress,
-        label: `${time} ${suffix}`,
+        label: end <= Date.now() ? 'Ending soon' : `${time} ${suffix}`,
     };
 }

apps/explorer/src/ui/ProgressBar.tsx

@@ -16,7 +16,7 @@ export function ProgressBar({ progress }: ProgressBarProps) {
                 animate={{
                     width: `${progress}%`,
                     type: 'spring',
-                    transition: { delay: 0.25, duration: 2 },
+                    transition: { delay: 0.25, duration: 0.5 },
                 }}
             />
         </div>

sdk/typescript/src/types/epochs.ts

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import { array, boolean, Infer, nullable, number, object } from 'superstruct';
 import { SuiValidatorSummary } from './validator';
+
 export const EndOfEpochInfo = object({
   lastCheckpointId: number(),
   epochEndTimestamp: number(),
@@ -17,7 +18,9 @@ export const EndOfEpochInfo = object({
   totalStakeRewardsDistributed: number(),
   leftoverStorageFundInflow: number(),
 });
+
 export type EndOfEpochInfo = Infer<typeof EndOfEpochInfo>;
+
 export const EpochInfo = object({
   epoch: number(),
   validators: array(SuiValidatorSummary),
@@ -26,10 +29,13 @@ export const EpochInfo = object({
   epochStartTimestamp: number(),
   endOfEpochInfo: nullable(EndOfEpochInfo),
 });
+
 export type EpochInfo = Infer<typeof EpochInfo>;
+
 export const EpochPage = object({
   data: array(EpochInfo),
   nextCursor: nullable(number()),
   hasNextPage: boolean(),
 });
+
 export type EpochPage = Infer<typeof EpochPage>;