chore: update code

src/modules/Whitelist/TimechainBanner/index.tsx

@@ -3,8 +3,6 @@ import styles from './styles.module.scss';
 import Countdown from '@/modules/Whitelist/stepAirdrop/Countdown';
 import dayjs from 'dayjs';
 import { TIME_CHAIN_EXPIRED_TIME } from '@/modules/Whitelist/stepAirdrop';
-import useElementSize from '@/hooks/useElementSize';
-import TimeChainStorage from '@/utils/storage/timechain.storage';
 import { Flex, Tooltip } from '@chakra-ui/react';
 import { CDN_URL_ICONS } from '@/config';
 import { getRaffleJoin } from '@/services/player-share';
@@ -43,16 +41,6 @@ const TimechainBanner = React.memo(({ setTabIndex }: IProps) => {
     }
   }, [token, needReload]);
 
-  const { width } = useElementSize({ elementID: 'ALLOW_TASKS_LIST' });
-
-  React.useEffect(() => {
-    // const element = document.getElementById('TIME_CHAIN_BANNER');
-    // if (element) {
-    //   element.style.maxWidth = `${width}px`;
-    //   element.style.width = "100%"
-    // }
-  }, [width])
-
   if (isEnd || raffleCode || !show) return;
   return (
     <div className={styles.container} id="TIME_CHAIN_BANNER">
@@ -78,7 +66,6 @@ const TimechainBanner = React.memo(({ setTabIndex }: IProps) => {
                 expiredTime={dayjs.utc(TIME_CHAIN_EXPIRED_TIME, 'YYYY-MM-DD HH:mm:ss').toString()}
                 hideIcon={true}
                 onRefreshEnd={() => setIsEnd(true)}
-                showDay={false}
               />
             </Flex>
           </Flex>

src/modules/Whitelist/index.tsx

@@ -41,6 +41,12 @@ const Whitelist = () => {
     }
   }, [height]);
 
+  const isCountDown = React.useMemo(() => {
+    return dayjs
+      .utc(PUBLIC_SALE_START, 'YYYY-MM-DD HH:mm:ss')
+      .isAfter(dayjs().utc().format())
+  }, [])
+
   const renderCountUp = () => {
     return (
       <>
@@ -76,14 +82,17 @@ const Whitelist = () => {
   return (
     <BoxContent className={s.container} id={CONTAINER_ID}>
       <Flex className={s.header} w="100%">
-        <Flex flexDirection="column" gap="8px">
-          <p className={s.countDown_title}>Public sale starting in</p>
-          <Countdown
-            className={s.countDown_time}
-            expiredTime={dayjs.utc(PUBLIC_SALE_START, 'YYYY-MM-DD HH:mm:ss').toString()}
-            hideIcon={true}
-          />
-        </Flex>
+          {isCountDown && (
+            <Flex flexDirection="column" gap="8px">
+              <p className={s.countDown_title}>Public sale starting in</p>
+              <Countdown
+                className={s.countDown_time}
+                expiredTime={dayjs.utc(PUBLIC_SALE_START, 'YYYY-MM-DD HH:mm:ss').toString()}
+                hideIcon={true}
+                type="column"
+              />
+            </Flex>
+          )}
         <TimechainBanner setTabIndex={setIndex} />
       </Flex>
       <div className={s.tokenSection}>

src/modules/Whitelist/stepAirdrop/Countdown/index.tsx

@@ -1,23 +1,23 @@
 import React, { useEffect, useRef } from 'react';
 import s from './styles.module.scss';
 import useCountdown from '@/hooks/useCountdown';
-import { Text } from '@chakra-ui/react';
+import { Flex, Grid, Text } from '@chakra-ui/react';
 import clsx from 'classnames';
 
 interface IProps {
   expiredTime: string;
   hideIcon?: boolean;
   className?: string;
   onRefreshEnd?: () => void;
-  showDay?: boolean;
+  type?: 'row' | 'column',
 }
 
 const Countdown: React.FC<IProps> = ({
   expiredTime,
   hideIcon,
   className,
   onRefreshEnd,
-  showDay = true
+  type = 'row'
 }: IProps): React.ReactElement => {
   const refCallEnd = useRef(false);
   const {
@@ -35,6 +35,10 @@ const Countdown: React.FC<IProps> = ({
     }
   }, [ended, expiredTime, onRefreshEnd]);
 
+  const showDay = React.useMemo(() => {
+    return !!days && days !== '0';
+  }, [days])
+
   return (
     <div className={clsx(s.countdown, className)}>
       {!hideIcon && (
@@ -55,7 +59,32 @@ const Countdown: React.FC<IProps> = ({
 
       {ended && <Text className={s.text}>Ended</Text>}
       {!ended && (
-        <Text className={s.text}>{`${showDay ? `${days}d : ` : ''}${hours}h : ${minutes}m : ${seconds}s`}</Text>
+        type === 'row' ? (
+          <Text className={s.text}>{`${showDay ? `${days}d : ` : ''}${hours}h : ${minutes}m : ${seconds}s`}</Text>
+        ) : (
+          (
+            <Flex gap="76px">
+              {showDay && (
+                <Flex flexDirection="column" alignItems="center">
+                  <Text className={s.text}>{days}</Text>
+                  <span>DAYS</span>
+                </Flex>
+              )}
+              <Flex flexDirection="column" alignItems="center">
+                <Text className={s.text}>{hours}</Text>
+                <span>HOURS</span>
+              </Flex>
+              <Flex flexDirection="column" alignItems="center">
+                <Text className={s.text}>{minutes}</Text>
+                <span>MINS</span>
+              </Flex>
+              <Flex flexDirection="column" alignItems="center">
+                <Text className={s.text}>{seconds}</Text>
+                <span>SECONDS</span>
+              </Flex>
+            </Flex>
+          )
+        )
       )}
     </div>
   );

src/modules/Whitelist/stepAirdrop/Countdown/styles.module.scss

@@ -9,6 +9,16 @@
   path {
     fill: #fff !important;
   }
+
+  span {
+    color: black !important;
+    opacity: 0.7;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    text-transform: uppercase;
+  }
 }
 
 .text {

src/modules/Whitelist/steps/Step/styles.module.scss

@@ -21,7 +21,7 @@
 
     &.new {
       color: #FFFFFF;
-      background: linear-gradient(90deg, #FFE259 0%, #FFA751 100%);
+      background: linear-gradient(90deg, #F4603F 0%, #FFA751 100%);
     }
   }