Merge pull request #195 from TrustlessComputer/daily_reward

Daily reward

src/modules/PublicSale/AuthForBuy/index.tsx

@@ -10,9 +10,11 @@ import s from './styles.module.scss';
 import cx from 'clsx';
 import AuthForBuyV2 from '../AuthForBuyV2';
 
-interface IAuthForBuy extends PropsWithChildren {}
+interface IAuthForBuy extends PropsWithChildren {
+  hideBuyAndStake?: boolean;
+}
 
-const AuthForBuy: React.FC<IAuthForBuy> = () => {
+const AuthForBuy: React.FC<IAuthForBuy> = ({hideBuyAndStake}) => {
   const user = useAppSelector(userSelector);
   const { isOpen, onOpen, onClose } = useDisclosure();
   const [hasStaked, setHasStaked] = useState(false);
@@ -45,31 +47,35 @@ const AuthForBuy: React.FC<IAuthForBuy> = () => {
             Buy $BVM
           </Button>
         </AuthForBuyV2>
-        <AuthForBuyV2>
-          <Tooltip
-            minW="220px"
-            bg="#006149"
-            boxShadow="0px 0px 40px rgba(0, 0, 0, 0.12)"
-            borderRadius="4px"
-            padding="16px"
-            hasArrow
-            label={
-              'Buy and stake your $BVM to earn rewards from the BVM ecosystem and our collaborative Bitcoin L2s and dApps partners. Your $BVM will be automatically staked after the public sale, and you can choose to unstake at any time.'
-            }
-            color={'#FFFFFF'}
-          >
-            <Button
-              onClick={() => {
-                setHasStaked(true);
-                onOpen();
-              }}
-              type="button"
-              className={cx(s.btnContainer, s.btnBuyAndStake)}
-            >
-              Buy & Stake $BVM
-            </Button>
-          </Tooltip>
-        </AuthForBuyV2>
+        {
+          !hideBuyAndStake && (
+            <AuthForBuyV2>
+              <Tooltip
+                minW="220px"
+                bg="#006149"
+                boxShadow="0px 0px 40px rgba(0, 0, 0, 0.12)"
+                borderRadius="4px"
+                padding="16px"
+                hasArrow
+                label={
+                  'Buy and stake your $BVM to earn rewards from the BVM ecosystem and our collaborative Bitcoin L2s and dApps partners. Your $BVM will be automatically staked after the public sale, and you can choose to unstake at any time.'
+                }
+                color={'#FFFFFF'}
+              >
+                <Button
+                  onClick={() => {
+                    setHasStaked(true);
+                    onOpen();
+                  }}
+                  type="button"
+                  className={cx(s.btnContainer, s.btnBuyAndStake)}
+                >
+                  Buy & Stake $BVM
+                </Button>
+              </Tooltip>
+            </AuthForBuyV2>
+          )
+        }
       </Flex>
       <GoogleReCaptchaProvider
         reCaptchaKey="6LdrclkpAAAAAD1Xu6EVj_QB3e7SFtMVCKBuHb24"

src/modules/PublicSale/aboveTheFold/index.tsx

@@ -11,7 +11,6 @@ import LeaderBoardVisual from '@/modules/PublicSale/leaderBoardVisual';
 import Activities from '@/modules/PublicSale/activities';
 import useWindowSize from '@/hooks/useWindowSize';
 import DailyReward from '@/modules/PublicSale/dailyReward';
-import HourlyReward from '@/modules/PublicSale/hourlyReward';
 
 const AboveTheFold = () => {
   const { setPlay } = useAnimationStore();
@@ -53,7 +52,7 @@ const AboveTheFold = () => {
           <LeaderBoardVisual />
           {/*<AddMoreContribution />*/}
           <DailyReward />
-          <HourlyReward />
+          {/*<HourlyReward />*/}
           {/*<LeaderBoardSwitch classNames={s.boardSwitch} />*/}
           {mobileScreen && <Activities />}
         </Flex>

src/modules/PublicSale/dailyReward/index.tsx

@@ -1,11 +1,11 @@
 import s from './styles.module.scss';
-import { Divider, Flex, Text } from '@chakra-ui/react';
+import { Flex, Text } from '@chakra-ui/react';
 import Countdown from '@/modules/Whitelist/stepAirdrop/Countdown';
 import dayjs from 'dayjs';
 import RaffleButton from '@/modules/PublicSale/raffleButton';
-import RewardButton from '@/modules/PublicSale/rewardButton';
 import React, { useEffect, useState } from 'react';
 import { getPublicSaleProgram, IPublicSalePrograme } from '@/services/public-sale';
+import HourlyReward from '@/modules/PublicSale/hourlyReward';
 
 const DailyReward = () => {
   const [isLoading, setIsLoading] = useState(true);
@@ -27,24 +27,28 @@ const DailyReward = () => {
   };
 
   return (
-    <Flex className={s.container}>
-      <Flex justifyContent={"space-between"} alignItems={"center"}>
-        <Text fontSize={"11px"} fontWeight={400} color={"rgba(255, 255, 255, 0.7)"}>Daily Reward</Text>
-        <Flex gap={'6px'} className={s.timeWrapper}>
-          <Countdown
-            className={s.time}
-            expiredTime={dayjs
-              .utc(programeInfo?.end_date, 'YYYY-MM-DD HH:mm:ss')
-              .toString()}
-            hideIcon={true}
-            onRefreshEnd={() => setIsEnd(true)}
-          />
+    <Flex direction={"column"} className={s.wrapper}>
+      <HourlyReward />
+      <Flex className={s.container}>
+        <Flex justifyContent={"space-between"} alignItems={"center"}>
+          <Text fontSize={"11px"} fontWeight={400} color={"rgba(255, 255, 255, 0.7)"}>Daily Reward</Text>
+          <Flex gap={'6px'} className={s.timeWrapper}>
+            <Countdown
+              className={s.time}
+              expiredTime={dayjs
+                .utc(programeInfo?.end_date, 'YYYY-MM-DD HH:mm:ss')
+                .toString()}
+              hideIcon={true}
+              onRefreshEnd={() => setIsEnd(true)}
+            />
+          </Flex>
         </Flex>
+        <RaffleButton />
+        {/*<Divider />*/}
+        {/*<RewardButton />*/}
       </Flex>
-      <RaffleButton />
-      <Divider />
-      <RewardButton />
     </Flex>
+
   )
 }
 

src/modules/PublicSale/dailyReward/styles.module.scss

@@ -1,11 +1,18 @@
-.container {
+.wrapper {
   position: absolute;
   flex-direction: column;
   top: var(--top-spacing);
   left: 20px;
   gap: 16px;
-  min-width: 280px;
-  max-width: 280px;
+}
+.container {
+  //position: absolute;
+  flex-direction: column;
+  //top: var(--top-spacing);
+  //left: 20px;
+  gap: 16px;
+  //min-width: 280px;
+  //max-width: 280px;
   border: 1px solid #ffffff1a;
   background-color: #ffffff1a;
   padding: 12px;
@@ -29,6 +36,6 @@
 
   @include is-mobile {
     max-width: unset;
-    width: calc(100% - 50px);
+    //width: calc(100% - 50px);
   }
 }

src/modules/PublicSale/hourlyReward/index.tsx

@@ -57,13 +57,12 @@ const HourlyReward = () => {
     return (REWARDS[currentDay.diffDay] as number) / 24;
   }, [currentDay, REWARDS])
 
-  return null;
   return (
     <Flex className={s.container}>
-      <Flex justifyContent={"space-between"} alignItems={"center"}>
+      <Flex justifyContent={"space-between"} alignItems={"center"} gap={"6px"}>
         <Text className={s.title}>Hourly Reward</Text>
         <Flex className={s.timeWrapper}>
-          <Text className={s.time}>{formatCurrency(currentHourReward, MIN_DECIMAL, MIN_DECIMAL, 'BTC', false)} BVM</Text>
+          <Text className={s.time}>{formatCurrency(currentHourReward, 0, 0, 'BTC', false)} BVM</Text>
         </Flex>
       </Flex>
       <HourlyRewardButton />

src/modules/PublicSale/hourlyReward/styles.module.scss

@@ -1,9 +1,9 @@
 .container {
-  position: absolute;
+  //position: absolute;
   flex-direction: column;
-  top: var(--top-spacing);
-  right: 20px;
-  gap: 16px;
+  //top: var(--top-spacing);
+  //right: 20px;
+  gap: 10px;
   //min-width: 280px;
   //max-width: 280px;
   //border: 1px solid #ffffff1a;
@@ -43,6 +43,6 @@
 
   @include is-mobile {
     max-width: unset;
-    width: calc(100% - 50px);
+    //width: calc(100% - 50px);
   }
 }