chore: update code

src/modules/Whitelist/ArcadeBanner/index.tsx

@@ -0,0 +1,27 @@
+import React, { useEffect, useState } from 'react';
+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 { Flex, Tooltip } from '@chakra-ui/react';
+import { CDN_URL_ICONS } from '@/config';
+import { getRaffleJoin } from '@/services/player-share';
+import AuthenStorage from '@/utils/storage/authen.storage';
+import { useAppSelector } from '@/stores/hooks';
+import { commonSelector } from '@/stores/states/common/selector';
+
+interface IProps {
+  setTabIndex: (_: number) => void;
+}
+
+const ArcadeBanner = React.memo(({ setTabIndex }: IProps) => {
+  return (
+    <div className={styles.container} onClick={() => setTabIndex(1)}>
+      <img src={`${CDN_URL_ICONS}/banner-arcade.png`} />
+    </div>
+  )
+});
+
+ArcadeBanner.displayName = 'ArcadeBanner';
+
+export default ArcadeBanner;

src/modules/Whitelist/ArcadeBanner/styles.module.scss

@@ -0,0 +1,13 @@
+.container {
+  z-index: 20;
+  img {
+    max-width: 560px !important;
+    width: 100%;
+    -webkit-user-drag: none;
+    -khtml-user-drag: none;
+    -moz-user-drag: none;
+    -o-user-drag: none;
+    user-drag: none;
+    cursor: pointer;
+  }
+}

src/modules/Whitelist/index.tsx

@@ -17,10 +17,9 @@ import StepsAirdrop, { TIME_CHAIN_EXPIRED_TIME } from '@/modules/Whitelist/stepA
 import useAllowBTC from '@/modules/Whitelist/AllowBTCMessage/useAllowBTC';
 import useAllowCelestia from '@/modules/Whitelist/AllowCelestiaMessage/useAllowCelestia';
 import useAllowEVM from '@/modules/Whitelist/AllowEVMMessage/useAllowEVM';
-import TimechainBanner from '@/modules/Whitelist/TimechainBanner';
-import styles from '@/modules/Whitelist/TimechainBanner/styles.module.scss';
 import dayjs from 'dayjs';
 import Countdown from '@/modules/Whitelist/stepAirdrop/Countdown';
+import ArcadeBanner from '@/modules/Whitelist/ArcadeBanner';
 
 const CONTAINER_ID = 'WHITE_LIST_CONTAINER_ID';
 
@@ -93,7 +92,7 @@ const Whitelist = () => {
               />
             </Flex>
           )}
-        <TimechainBanner setTabIndex={setIndex} />
+        <ArcadeBanner setTabIndex={setIndex} />
       </Flex>
       <div className={s.tokenSection}>
         <Box w="100%" overflow="hidden">
@@ -106,18 +105,18 @@ const Whitelist = () => {
           <Tabs variant="unstyled" index={index} onChange={(tabIndex) => setIndex(tabIndex)}>
             <TabList mb="32px" overflow="hidden">
               <Tab>Start here</Tab>
-              <Tab>Airdrop 1</Tab>
-              <Tab>Explore the ecosystem</Tab>
+              <Tab>Experience BVM</Tab>
+              <Tab>Airdrop</Tab>
             </TabList>
             <TabPanels w="100%">
               <TabPanel>
                 <Steps />
               </TabPanel>
               <TabPanel>
-                <StepsAirdrop setIndex={setIndex}/>
+                <StepsEco />
               </TabPanel>
               <TabPanel>
-                <StepsEco />
+                <StepsAirdrop setIndex={setIndex}/>
               </TabPanel>
             </TabPanels>
           </Tabs>