countdown component

packages/page-coretime/src/Overview/Summary.tsx

@@ -12,6 +12,7 @@ import { BN } from '@polkadot/util';
 import { useCoretimeContext } from '../CoretimeContext.js';
 import { useTranslation } from '../translate.js';
 import { estimateTime, FirstCycleStart } from '../utils/index.js';
+import Countdown from '@polkadot/react-components/Countdown';
 
 interface Props {
   coreDscriptors?: CoreDescription[];
@@ -24,12 +25,20 @@ interface Props {
   constants: ChainConstants
 }
 
-function Summary ({ chainName, config, constants, parachainCount, saleInfo, status }: Props): React.ReactElement<Props> {
+function Summary({ chainName, config, constants, parachainCount, saleInfo, status }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const currentRegionEnd = saleInfo.regionEnd - config.regionLength;
   const currentRegionStart = saleInfo.regionEnd - config.regionLength * 2;
   const { get } = useCoretimeContext();
 
+  const saleStartDate = useMemo(() => {
+    return get && estimateTime(currentRegionStart, get.blocks.relay(status?.lastTimeslice), constants.relay);
+  }, [currentRegionStart, status?.lastTimeslice, constants.relay, get]);
+
+  const saleEndDate = useMemo(() => {
+    return get && estimateTime(currentRegionEnd, get.blocks.relay(status?.lastTimeslice), constants.relay);
+  }, [currentRegionEnd, status?.lastTimeslice, constants.relay, get]);
+
   const saleNumber = useMemo(() => {
     if (chainName && currentRegionEnd) {
       return Math.floor(
@@ -57,24 +66,42 @@ function Summary ({ chainName, config, constants, parachainCount, saleInfo, stat
           {parachainCount && parachainCount}
         </CardSummary>
         {config && status &&
-          <CardSummary
-            className='media--800'
-            label={t('cycle progress')}
-            progress={{
-              isBlurred: false,
-              total: new BN(config?.regionLength),
-              value: new BN(config?.regionLength - (currentRegionEnd - status.lastTimeslice)),
-              withTime: false
-            }}
-          />
+          <>
+            <CardSummary
+              className='media--800'
+              label={t('cycle time progress')}
+              progress={{
+                isBlurred: false,
+                total: new BN(config?.regionLength),
+                value: new BN(config?.regionLength - (currentRegionEnd - status.lastTimeslice)),
+                withTime: false,
+                hideValue: true
+              }}
+            >
+              <Countdown start={new Date(saleStartDate)} current={new Date()} end={new Date(saleEndDate)} />
+            </CardSummary>
+            <CardSummary
+              className='media--800'
+              label={t('timeslice progress')}
+              progress={{
+                isBlurred: false,
+                total: new BN(config?.regionLength),
+                value: new BN(config?.regionLength - (currentRegionEnd - status.lastTimeslice)),
+                withTime: false,
+                hideValue: false,
+                hideGraph: true
+              }}
+            />
+          </>
+
         }
       </section>
       <section className='media--1200'>
         {status &&
           (<CardSummary label={t('sale dates')}>
             <div>
-              <div style={{ fontSize: '14px' }}>{get && estimateTime(currentRegionStart, get.blocks.relay(status?.lastTimeslice), constants.relay)}</div>
-              <div style={{ fontSize: '14px' }}>{get && estimateTime(currentRegionEnd, get.blocks.relay(status?.lastTimeslice), constants.relay)}</div>
+              <div style={{ fontSize: '14px' }}>{saleStartDate}</div>
+              <div style={{ fontSize: '14px' }}>{saleEndDate}</div>
             </div>
           </CardSummary>)
         }

packages/page-coretime/src/ParachainsTable.tsx

@@ -14,15 +14,15 @@ interface Props {
   coretimeInfo: CoretimeInformation
 }
 
-function ParachainsTable ({ coretimeInfo }: Props): React.ReactElement<Props> {
+function ParachainsTable({ coretimeInfo }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const headerRef = useRef<([React.ReactNode?, string?, number?] | false)[]>([
     [t('parachains'), 'start'],
     [t('name'), 'start media--800'],
     [t('core number'), 'start'],
     [t('type'), 'start'],
     [t('last block'), 'start media--800'],
-    [t('end'), 'start media--1000'],
+    [t('end date'), 'start media--1000'],
     [t('renewal'), 'start media--1200'],
     [t('renewal price'), 'start media--1200'],
     [t('links'), 'start media--800'],

packages/react-components/src/Countdown.tsx

@@ -0,0 +1,61 @@
+import React, { useState, useEffect } from 'react';
+
+interface CountdownProps {
+    start: Date;
+    current: Date;
+    end: Date;
+}
+
+const SECONDS_IN_MINUTE = 60;
+const SECONDS_IN_HOUR = 60 * SECONDS_IN_MINUTE;
+const SECONDS_IN_DAY = 24 * SECONDS_IN_HOUR;
+
+const formatTime = (seconds: number) => {
+    const days = Math.floor(seconds / SECONDS_IN_DAY);
+    const hours = Math.floor((seconds % SECONDS_IN_DAY) / SECONDS_IN_HOUR);
+    const minutes = Math.floor((seconds % SECONDS_IN_HOUR) / SECONDS_IN_MINUTE);
+    return `${String(days).padStart(2, '0')}d ${String(hours).padStart(2, '0')}h ${String(minutes).padStart(2, '0')}m`;
+};
+
+const Countdown: React.FC<CountdownProps> = ({ start, current, end }) => {
+    if (end < start) {
+        console.error('End date must be after start date');
+        return null;
+    }
+
+    if (current < start || current > end) {
+        console.error('Current date must be between start and end dates');
+        return null;
+    }
+
+    const totalDuration = end.getTime() - start.getTime();
+    const timeElapsed = current.getTime() - start.getTime();
+    const initialRemainingTime = Math.max(totalDuration - timeElapsed, 0) / 1000;
+
+    const [remainingTime, setRemainingTime] = useState<number>(initialRemainingTime);
+
+    useEffect(() => {
+        const timer = setInterval(() => {
+            setRemainingTime((prev) => Math.max(prev - 1, 0));
+        }, 1000);
+
+        return () => {
+            if (timer) {
+                clearInterval(timer);
+            }
+        };
+    }, []);
+
+    return (
+        <div className="text-center text-xl">
+            {remainingTime > 0 ? (
+                <span>{formatTime(remainingTime)}</span>
+            )
+                : (
+                    <span>0d 0h 0m</span>
+                )}
+        </div>
+    );
+};
+
+export default Countdown;