From 07f98ab2bf16449d880c8ee2c21995086bfa5a10 Mon Sep 17 00:00:00 2001 From: 0xmegalodon Date: Thu, 1 Feb 2024 10:14:05 +0700 Subject: [PATCH 1/9] update get configs --- src/Providers/user-context.tsx | 14 +++++++++++--- src/modules/PublicSale/rewardButton/index.tsx | 18 +++++++----------- src/services/common.ts | 12 +++++++++++- src/stores/states/common/reducer.ts | 5 +++++ src/stores/states/common/types.ts | 1 + 5 files changed, 35 insertions(+), 15 deletions(-) diff --git a/src/Providers/user-context.tsx b/src/Providers/user-context.tsx index 02e2d234e..fecb79c39 100644 --- a/src/Providers/user-context.tsx +++ b/src/Providers/user-context.tsx @@ -9,9 +9,9 @@ import { User } from '@/stores/states/user/types'; import { getReferralByURL } from '@/utils/helpers'; import userServices from '@/services/user'; import ReferralStorage from '@/utils/storage/referral.storage'; -import { getCoinPrices } from '@/services/common'; -import { setCoinPrices } from '@/stores/states/common/reducer'; -import { redirect, useRouter } from 'next/navigation'; +import { getCoinPrices, getConfigs } from '@/services/common'; +import { setCoinPrices, setConfigs } from '@/stores/states/common/reducer'; +import { useRouter } from 'next/navigation'; export interface IUserContext {} @@ -50,6 +50,12 @@ export const UserProvider: React.FC = ({ dispatch(setCoinPrices(coinPrices)); }; + const fetchConfigs = async () => { + const configs = await getConfigs(); + if (!configs) return; + dispatch(setConfigs(configs)); + }; + const contextValues = useMemo((): IUserContext => { return {}; }, []); @@ -70,8 +76,10 @@ export const UserProvider: React.FC = ({ React.useEffect(() => { fetchCoinPrices(); + fetchConfigs(); setInterval(() => { fetchCoinPrices(); + fetchConfigs(); }, 60 * 1000); }, []); diff --git a/src/modules/PublicSale/rewardButton/index.tsx b/src/modules/PublicSale/rewardButton/index.tsx index 84525abec..5169eb92b 100644 --- a/src/modules/PublicSale/rewardButton/index.tsx +++ b/src/modules/PublicSale/rewardButton/index.tsx @@ -36,8 +36,6 @@ import { PUBLIC_SALE_START } from '@/modules/Whitelist'; import { commonSelector } from '@/stores/states/common/selector'; import useWindowSize from '@/hooks/useWindowSize'; -const REWARD_DAILY = JSON.parse("{\"2024-01-30\":100000,\"2024-01-31\":50000,\"2024-02-01\":50000,\"2024-02-02\":50000,\"2024-02-03\":50000,\"2024-02-04\":50000,\"2024-02-05\":50000}"); - const RaffleButton = ({ className }: any) => { const { isOpen, onOpen, onClose } = useDisclosure(); const [isEnd, setIsEnd] = React.useState(false); @@ -52,6 +50,7 @@ const RaffleButton = ({ className }: any) => { const [authenCode, setAuthenCode] = useState(); const [showManualCheck, setShowManualCheck] = useState(false); const needReload = useAppSelector(commonSelector).needReload; + const configs = useAppSelector(commonSelector).configs; const { mobileScreen } = useWindowSize(); const currentDay = React.useMemo(() => { @@ -67,20 +66,17 @@ const RaffleButton = ({ className }: any) => { }, []); const REWARDS = useMemo(() => { - return Object.values(REWARD_DAILY); - }, [REWARD_DAILY]); + if(configs) { + const res = JSON.parse(configs['naka']?.bvm_halvings); + return Object.values(res); + } + return []; + }, [configs]); const currentDayReward = useMemo(() => { return REWARDS[currentDay.diffDay]; }, [currentDay, REWARDS]) - console.log('dailyReward', dailyReward); - console.log('user', user); - console.log('currentDay', currentDay); - console.log('REWARDS', REWARDS); - console.log('currentDayReward', currentDayReward); - console.log('=====') - useEffect(() => { getProgramInfo(); diff --git a/src/services/common.ts b/src/services/common.ts index 89b0f564c..8a7721e18 100644 --- a/src/services/common.ts +++ b/src/services/common.ts @@ -15,6 +15,16 @@ const getCoinPrices = async (): Promise => { } }; +const getConfigs = async (): Promise => { + try { + const res = (await apiClient.get('/configs')) as any; + return res; + } catch (error) { + return undefined; + } +}; + export { - getCoinPrices + getCoinPrices, + getConfigs } diff --git a/src/stores/states/common/reducer.ts b/src/stores/states/common/reducer.ts index 5aa5f2a9a..d16f64c06 100644 --- a/src/stores/states/common/reducer.ts +++ b/src/stores/states/common/reducer.ts @@ -8,6 +8,7 @@ const initialState: CommonState = { [Coin.ETH]: '0', [Coin.TIA]: '0', } as any, + configs: null, leaderBoardMode: 1, needCheckDeposit: false, animatedLatestContributors: [], @@ -23,6 +24,9 @@ const slice = createSlice({ setCoinPrices: (state, action) => { state.coinPrices = action.payload; }, + setConfigs: (state, action) => { + state.configs = action.payload; + }, setLeaderBoardMode: (state, action) => { state.leaderBoardMode = action.payload; }, @@ -38,6 +42,7 @@ const slice = createSlice({ export const { requestReload, setCoinPrices, + setConfigs, setLeaderBoardMode, setNeedCheckDeposit, setAnimatedLatestContributors diff --git a/src/stores/states/common/types.ts b/src/stores/states/common/types.ts index 3ef527a0e..2e6c696e8 100644 --- a/src/stores/states/common/types.ts +++ b/src/stores/states/common/types.ts @@ -13,6 +13,7 @@ export enum Coin { export interface CommonState { needReload: number; coinPrices: CoinPrices, + configs: any, leaderBoardMode: 0 | 1; needCheckDeposit: boolean; animatedLatestContributors: ILeaderBoardPoint[]; From d8c83ae6ab0e596af5f71f97471cb7249da7f30b Mon Sep 17 00:00:00 2001 From: 0xmegalodon Date: Thu, 1 Feb 2024 10:49:51 +0700 Subject: [PATCH 2/9] update get configs --- .../rewardButton/VerifyRewardDailyModal/index.tsx | 2 +- src/modules/PublicSale/rewardButton/index.tsx | 6 ++++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/modules/PublicSale/rewardButton/VerifyRewardDailyModal/index.tsx b/src/modules/PublicSale/rewardButton/VerifyRewardDailyModal/index.tsx index 8d2e722d6..5637ba9b7 100644 --- a/src/modules/PublicSale/rewardButton/VerifyRewardDailyModal/index.tsx +++ b/src/modules/PublicSale/rewardButton/VerifyRewardDailyModal/index.tsx @@ -68,7 +68,7 @@ const VerifyRewardDailyModal = ({ diff --git a/src/modules/PublicSale/rewardButton/index.tsx b/src/modules/PublicSale/rewardButton/index.tsx index 5169eb92b..77b07bb35 100644 --- a/src/modules/PublicSale/rewardButton/index.tsx +++ b/src/modules/PublicSale/rewardButton/index.tsx @@ -67,8 +67,10 @@ const RaffleButton = ({ className }: any) => { const REWARDS = useMemo(() => { if(configs) { - const res = JSON.parse(configs['naka']?.bvm_halvings); - return Object.values(res); + if(configs['naka']?.bvm_halvings) { + const res = JSON.parse(configs['naka']?.bvm_halvings); + return Object.values(res); + } } return []; }, [configs]); From 5b77799e4c0b306a093573a7a7dcec51ce201fde Mon Sep 17 00:00:00 2001 From: camewell <130561684+camewell071@users.noreply.github.com> Date: Thu, 1 Feb 2024 10:55:47 +0700 Subject: [PATCH 3/9] chore: update ui --- src/modules/PublicSale/activities/index.tsx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/modules/PublicSale/activities/index.tsx b/src/modules/PublicSale/activities/index.tsx index 3256acf65..1784c5bce 100644 --- a/src/modules/PublicSale/activities/index.tsx +++ b/src/modules/PublicSale/activities/index.tsx @@ -44,6 +44,8 @@ export interface GameItemProps { src: string; ctas?: ICTA[]; type: ActivityType; + startTime?: string; + endTime?: string; } const Activities = React.memo(() => { @@ -92,8 +94,8 @@ Good luck and have fun! ], desc: 'NakaChain is a low-cost and lightning-fast Bitcoin Layer 2 blockchain designed for DeFi apps, enabling the payment of gas fees in Bitcoin. It’s powered by BVM with these modules: Bitcoin for security, Polygon for data availability, and Optimism for execution.' + - "

On the second day of awesomeness, challenge yourself to dominate the market by trading futures on BRC-20 tokens' prices. Every two hours, the top gainer will earn $50 in Bitcoin.\n" + - '

Total rewards: $1,000', + "

On the second day of awesomeness, challenge yourself to dominate the market by trading futures on BRC-20 tokens' prices. Every four hours, the top gainer will earn $50 in Bitcoin.\n" + // '

Total rewards: $1,000', }, { key: 2, @@ -243,6 +245,8 @@ Good luck and have fun! const isDisable = item.key > currentDay.diffDay; const title = isDisable ? item.title : item.title; + const isRunningNaka = expandIndex === item.key && item.key === ActivityType.Day2 + return ( {({ isExpanded }) => ( @@ -263,7 +267,7 @@ Good luck and have fun! > - {item.key === currentDay.diffDay && ( + {item.key < currentDay.diffDay && ( Happening Now )} @@ -297,9 +301,7 @@ Good luck and have fun! className={styles.itemWrapper_desc} dangerouslySetInnerHTML={{ __html: item.desc }} /> - {currentDay.diffDay === expandIndex && - expandIndex === item.key && - item.key === 1 && } + {isRunningNaka && } {item.ctas?.map(renderCta)} From 5a00b61debc88c7a3519a1913bb3991d5d0266c0 Mon Sep 17 00:00:00 2001 From: camewell <130561684+camewell071@users.noreply.github.com> Date: Thu, 1 Feb 2024 11:01:04 +0700 Subject: [PATCH 4/9] chore: update ui --- src/modules/PublicSale/activities/index.tsx | 5 ++- .../PublicSale/activities/styles.module.scss | 31 ++++++++++++------- 2 files changed, 24 insertions(+), 12 deletions(-) diff --git a/src/modules/PublicSale/activities/index.tsx b/src/modules/PublicSale/activities/index.tsx index 1784c5bce..fa9aa3e68 100644 --- a/src/modules/PublicSale/activities/index.tsx +++ b/src/modules/PublicSale/activities/index.tsx @@ -268,7 +268,10 @@ Good luck and have fun! {item.key < currentDay.diffDay && ( - Happening Now + Happening Now + )} + {item.key === currentDay.diffDay && ( + New unlocked )} diff --git a/src/modules/PublicSale/activities/styles.module.scss b/src/modules/PublicSale/activities/styles.module.scss index 88efb6ba2..884b18dd2 100644 --- a/src/modules/PublicSale/activities/styles.module.scss +++ b/src/modules/PublicSale/activities/styles.module.scss @@ -47,6 +47,26 @@ padding-bottom: 0 !important; } + &_happening { + color: black; + padding: 4px 12px; + font-size: 10px; + font-weight: 400; + border-radius: 100px; + margin-right: 4px; + background: linear-gradient(90deg, #00F5A0 0%, #00D9F5 100%); + } + + &_unlocked { + color: black; + padding: 4px 12px; + font-size: 10px; + font-weight: 400; + border-radius: 100px; + margin-right: 4px; + background: linear-gradient(90deg, #FFE259 0%, #FFA751 100%); + } + &_title { color: #ffffff; font-size: 14px; @@ -59,17 +79,6 @@ max-width: 214px; } - span { - color: black; - padding: 4px 12px; - font-size: 10px; - font-weight: 400; - border-radius: 100px; - background: #fa4e0e; - margin-right: 4px; - background: linear-gradient(90deg, #00F5A0 0%, #00D9F5 100%); - } - @include is-mobile { font-size: 14px; } From 26c47d14037aad2c64d5bf282617888b2046d308 Mon Sep 17 00:00:00 2001 From: 0xmegalodon Date: Thu, 1 Feb 2024 12:54:41 +0700 Subject: [PATCH 5/9] update hourly reward --- public/public-sale/hourly_bg.svg | 24 +++ src/modules/PublicSale/aboveTheFold/index.tsx | 3 +- .../aboveTheFold/styles.module.scss | 2 +- .../PublicSale/dailyReward/styles.module.scss | 2 +- src/modules/PublicSale/hourlyReward/index.tsx | 73 +++++++ .../hourlyReward/styles.module.scss | 48 +++++ .../PublicSale/hourlyRewardButton/index.tsx | 121 ++++++++++++ .../hourlyRewardButton/styles.module.scss | 186 ++++++++++++++++++ .../Whitelist/stepAirdrop/Countdown/index.tsx | 47 +++-- src/styles/_global.scss | 77 ++++++++ 10 files changed, 567 insertions(+), 16 deletions(-) create mode 100644 public/public-sale/hourly_bg.svg create mode 100644 src/modules/PublicSale/hourlyReward/index.tsx create mode 100644 src/modules/PublicSale/hourlyReward/styles.module.scss create mode 100644 src/modules/PublicSale/hourlyRewardButton/index.tsx create mode 100644 src/modules/PublicSale/hourlyRewardButton/styles.module.scss diff --git a/public/public-sale/hourly_bg.svg b/public/public-sale/hourly_bg.svg new file mode 100644 index 000000000..cc5a32aa9 --- /dev/null +++ b/public/public-sale/hourly_bg.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/modules/PublicSale/aboveTheFold/index.tsx b/src/modules/PublicSale/aboveTheFold/index.tsx index 4d2beecb7..556b7e36f 100644 --- a/src/modules/PublicSale/aboveTheFold/index.tsx +++ b/src/modules/PublicSale/aboveTheFold/index.tsx @@ -9,9 +9,9 @@ import { getVCInformation } from '@/services/player-share'; import { VCInfo } from '@/interfaces/vc'; import LeaderBoardVisual from '@/modules/PublicSale/leaderBoardVisual'; import Activities from '@/modules/PublicSale/activities'; -import LeaderBoardSwitch from '@/modules/PublicSale/leaderBoardSwitch'; import useWindowSize from '@/hooks/useWindowSize'; import DailyReward from '@/modules/PublicSale/dailyReward'; +import HourlyReward from '@/modules/PublicSale/hourlyReward'; const AboveTheFold = () => { const { setPlay } = useAnimationStore(); @@ -53,6 +53,7 @@ const AboveTheFold = () => { {/**/} + {/**/} {mobileScreen && } diff --git a/src/modules/PublicSale/aboveTheFold/styles.module.scss b/src/modules/PublicSale/aboveTheFold/styles.module.scss index 6c8a944f9..5e9e5616d 100644 --- a/src/modules/PublicSale/aboveTheFold/styles.module.scss +++ b/src/modules/PublicSale/aboveTheFold/styles.module.scss @@ -5,7 +5,7 @@ width: 100%; :global { - --top-spacing: 24px; + --top-spacing: 20px; --item-spacing: 12px; } diff --git a/src/modules/PublicSale/dailyReward/styles.module.scss b/src/modules/PublicSale/dailyReward/styles.module.scss index cf0aafa6d..4517ccc36 100644 --- a/src/modules/PublicSale/dailyReward/styles.module.scss +++ b/src/modules/PublicSale/dailyReward/styles.module.scss @@ -2,7 +2,7 @@ position: absolute; flex-direction: column; top: var(--top-spacing); - left: 24px; + left: 20px; gap: 16px; min-width: 280px; max-width: 280px; diff --git a/src/modules/PublicSale/hourlyReward/index.tsx b/src/modules/PublicSale/hourlyReward/index.tsx new file mode 100644 index 000000000..41d7a04af --- /dev/null +++ b/src/modules/PublicSale/hourlyReward/index.tsx @@ -0,0 +1,73 @@ +import s from './styles.module.scss'; +import { Flex, Text } from '@chakra-ui/react'; +import dayjs from 'dayjs'; +import React, { useEffect, useMemo, useState } from 'react'; +import { getPublicSaleProgram, IPublicSalePrograme } from '@/services/public-sale'; +import HourlyRewardButton from '@/modules/PublicSale/hourlyRewardButton'; +import { useAppSelector } from '@/stores/hooks'; +import { commonSelector } from '@/stores/states/common/selector'; +import BigNumber from 'bignumber.js'; +import { PUBLIC_SALE_START } from '@/modules/Whitelist'; +import { formatCurrency } from '@/utils/format'; +import { MIN_DECIMAL } from '@/constants/constants'; + +const HourlyReward = () => { + const [isLoading, setIsLoading] = useState(true); + const [isEnd, setIsEnd] = React.useState(false); + const [programeInfo, setProgrameInfo] = useState(); + const configs = useAppSelector(commonSelector).configs; + + useEffect(() => { + getProgramInfo(); + }, []); + + const getProgramInfo = async () => { + try { + const res = await getPublicSaleProgram(); + setProgrameInfo(res); + } catch (e) { + } finally { + setIsLoading(false); + } + }; + + const currentDay = React.useMemo(() => { + const diffDay = new BigNumber( + dayjs.utc(PUBLIC_SALE_START).diff(dayjs.utc(), 'days'), + ) + .absoluteValue() + .toNumber(); + return { + // step: DAYS.length > diffDay ? DAYS[diffDay] : DAYS[DAYS.length - 1], + diffDay, + }; + }, []); + + const REWARDS = useMemo(() => { + if(configs) { + if(configs['naka']?.bvm_halvings) { + const res = JSON.parse(configs['naka']?.bvm_halvings); + return Object.values(res); + } + } + return []; + }, [configs]); + + const currentHourReward: number = useMemo(() => { + return (REWARDS[currentDay.diffDay] as number) / 24; + }, [currentDay, REWARDS]) + + return ( + + + Hourly Reward + + {formatCurrency(currentHourReward, MIN_DECIMAL, MIN_DECIMAL, 'BTC', false)} BVM + + + + + ) +} + +export default HourlyReward; diff --git a/src/modules/PublicSale/hourlyReward/styles.module.scss b/src/modules/PublicSale/hourlyReward/styles.module.scss new file mode 100644 index 000000000..030070465 --- /dev/null +++ b/src/modules/PublicSale/hourlyReward/styles.module.scss @@ -0,0 +1,48 @@ +.container { + position: absolute; + flex-direction: column; + top: var(--top-spacing); + right: 20px; + gap: 16px; + //min-width: 280px; + //max-width: 280px; + //border: 1px solid #ffffff1a; + background: linear-gradient(180deg, #FDF6EA 0%, #FCF2DC 27%, #FBECC9 72.17%, #FBECC9 100%); + padding: 12px; + width: fit-content; + + .title { + font-size: 12px; + line-height: 100%; + font-weight: 400; + color: #894D1C; + padding-top: 1px; + } + + .time { + //margin-top: 10px; + font-size: 14px; + line-height: 100%; + font-weight: 500; + text-transform: uppercase; + background: linear-gradient(180deg, #DF7E2E -12.5%, #894D1C 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + + p { + font-size: inherit !important; + font-weight: inherit !important; + white-space: pre; + } + + @include is-mobile { + font-size: 14px; + } + } + + @include is-mobile { + max-width: unset; + width: calc(100% - 50px); + } +} diff --git a/src/modules/PublicSale/hourlyRewardButton/index.tsx b/src/modules/PublicSale/hourlyRewardButton/index.tsx new file mode 100644 index 000000000..bacf923b1 --- /dev/null +++ b/src/modules/PublicSale/hourlyRewardButton/index.tsx @@ -0,0 +1,121 @@ +import { Center, Flex, Text, useDisclosure } from '@chakra-ui/react'; +import s from './styles.module.scss'; +import React, { useEffect, useMemo, useRef, useState } from 'react'; +import cx from 'clsx'; +import { useAppSelector } from '@/stores/hooks'; +import { userSelector } from '@/stores/states/user/selector'; +import { getPublicSaleDailyReward, IPublicSaleDailyReward } from '@/services/public-sale'; +import AuthenStorage from '@/utils/storage/authen.storage'; +import { useDispatch } from 'react-redux'; +import { IAuthenCode } from '@/modules/Whitelist/steps'; +import BigNumber from 'bignumber.js'; +import dayjs from 'dayjs'; +import { PUBLIC_SALE_END, PUBLIC_SALE_START } from '@/modules/Whitelist'; +import { commonSelector } from '@/stores/states/common/selector'; +import useWindowSize from '@/hooks/useWindowSize'; +import Countdown from '@/modules/Whitelist/stepAirdrop/Countdown'; + +const HourlyRewardButton = ({ className }: any) => { + const { isOpen, onOpen, onClose } = useDisclosure(); + const [isEnd, setIsEnd] = React.useState(false); + const user = useAppSelector(userSelector); + const [dailyReward + , setDailyReward] = useState(); + const [isLoading, setIsLoading] = useState(true); + const token = + AuthenStorage.getAuthenKey() || AuthenStorage.getGuestAuthenKey(); + const refInterval = useRef(undefined); + const dispatch = useDispatch(); + const [authenCode, setAuthenCode] = useState(); + const [showManualCheck, setShowManualCheck] = useState(false); + const needReload = useAppSelector(commonSelector).needReload; + const configs = useAppSelector(commonSelector).configs; + const { mobileScreen } = useWindowSize(); + + const currentDay = React.useMemo(() => { + const diffDay = new BigNumber( + dayjs.utc(PUBLIC_SALE_START).diff(dayjs.utc(), 'days'), + ) + .absoluteValue() + .toNumber(); + return { + // step: DAYS.length > diffDay ? DAYS[diffDay] : DAYS[DAYS.length - 1], + diffDay, + }; + }, []); + + const REWARDS = useMemo(() => { + if(configs) { + if(configs['naka']?.bvm_halvings) { + const res = JSON.parse(configs['naka']?.bvm_halvings); + return Object.values(res); + } + } + return []; + }, [configs]); + + const currentDayReward = useMemo(() => { + return REWARDS[currentDay.diffDay]; + }, [currentDay, REWARDS]) + + useEffect(() => { + getProgramInfo(); + + if(refInterval?.current) { + clearInterval(refInterval.current); + } + + refInterval.current = setInterval(() => { + getProgramInfo(); + }, 300000); + + return () => { + if(refInterval?.current) { + clearInterval(refInterval.current); + } + } + }, [needReload]); + + const getProgramInfo = async () => { + try { + const res = await getPublicSaleDailyReward(); + setDailyReward(res); + } catch (e) { + } finally { + setIsLoading(false); + } + }; + + return ( + !isLoading && ( + <> + + +
+
+
+
+
+
+ + + End in + setIsEnd(true)} + type={"column"} + showColon={true} + /> + + + + + ) + ); +}; + +export default HourlyRewardButton; diff --git a/src/modules/PublicSale/hourlyRewardButton/styles.module.scss b/src/modules/PublicSale/hourlyRewardButton/styles.module.scss new file mode 100644 index 000000000..16cf005af --- /dev/null +++ b/src/modules/PublicSale/hourlyRewardButton/styles.module.scss @@ -0,0 +1,186 @@ +$time:10s; // including 1 flip + +.container { + display: flex; + flex-direction: column; + gap: 8px; + transition: all 0.3s; + position: relative; + background: url('/public-sale/hourly_bg.svg'); + background-size: cover; + background-repeat: no-repeat; + //cursor: pointer; + width: 165px; + height: 99px; + padding: 6px; + + .title { + font-size: 12px; + line-height: 100%; + font-weight: 400; + color: #894D1C; + padding-top: 1px; + } + + .icon { + width: 40px; + height: 40px; + background: url('/public-sale/rwbn_2.png'); + background-size: cover; + background-repeat: no-repeat; + cursor: pointer; + align-items: flex-end; + } + + .text_text { + display: block; + margin-bottom: 4px; + } + + .timeWrapper { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + //left: 0; + //right: 0; + //margin-left: auto; + //margin-right: auto; + width: 100%; + //margin-bottom: 8px; + } + + .time { + //margin-top: 10px; + font-size: 12px; + line-height: 100%; + font-weight: 400; + text-transform: uppercase; + width: fit-content; + color: #894D1C; + + p { + font-size: inherit !important; + font-weight: inherit !important; + white-space: pre; + color: inherit; + background: #FBECC9; + padding: 4px; + min-width: unset; + width: 24px; + height: 24px; + display: flex; + justify-content: center; + align-items: center; + padding-top: 5px; + //> span { + // background: #FBECC9; + // padding: 4px; + //} + } + + > div { + gap: 4px; + align-items: center; + > div { + span { + display: none; + } + } + } + + @include is-mobile { + font-size: 14px; + } + + &.claimable { + background: linear-gradient(90deg, #00F5A0 0%, #00D9F5 100%); + -webkit-background-clip: text; /* clip the background to the text inside the tag*/ + -webkit-text-fill-color: transparent; + } + } + + .hourglassWrapper { + transform: scale(0.2); + margin-top: 25px; + } + + :global { + .hourglass { + animation:flip $time ease-in-out infinite; + border-bottom:solid 1vmin #630; + border-top:solid 1vmin #630; + left:50%; + margin-left:-6vmin; + margin-top:-11vmin; + padding:0 1vmin; + position:fixed; + top:50%; + .top, .bottom { + background-color:#def; + box-shadow:0 0 1vmin 1vmin #bcd inset; + height:10vmin; + overflow:hidden; + position:relative; + width:10vmin; + } + .top { + border-radius:0 0 50% 50%; + &:before { + animation:top $time linear infinite; + background-color:#fc6; + border-radius:50%; + content:""; + display:block; + height:10vmin; + left:0; + position:absolute; + top:0; + transform:translateY(50%); + width:10vmin; + } + &:after { + animation:top-drip $time linear infinite; + background-color:#fc6; + content:""; + display:block; + height:100%; + left:45%; + position:absolute; + top:0; + transform:translateY(100%); + width:10%; + } + } + .bottom { + border-radius:50% 50% 0 0; + &:before { + animation:bottom $time linear infinite; + background-color:#fc6; + border-radius:50%; + content:""; + display:block; + height:10vmin; + left:0; + position:absolute; + top:0; + transform:translateY(100%); + width:10vmin; + } + &:after { + animation:bottom-drip $time linear infinite; + background-color:#fc6; + content:""; + display:block; + height:100%; + left:45%; + position:absolute; + top:0; + width:10%; + } + } + } + + + } +} diff --git a/src/modules/Whitelist/stepAirdrop/Countdown/index.tsx b/src/modules/Whitelist/stepAirdrop/Countdown/index.tsx index c880a9e9d..73c39033c 100644 --- a/src/modules/Whitelist/stepAirdrop/Countdown/index.tsx +++ b/src/modules/Whitelist/stepAirdrop/Countdown/index.tsx @@ -12,6 +12,7 @@ interface IProps { onRefreshEnd?: () => void; type?: 'row' | 'column', hideZeroHour?: boolean + showColon?: boolean } const Countdown: React.FC = ({ @@ -21,7 +22,8 @@ const Countdown: React.FC = ({ onRefreshEnd, type = 'row', isHideSecond, - hideZeroHour = false + hideZeroHour = false, + showColon = false }: IProps): React.ReactElement => { const refCallEnd = useRef(false); const { @@ -78,25 +80,44 @@ const Countdown: React.FC = ({ ( {showDay && ( - - {days} - DAYS - + <> + + {days} + DAYS + + { + showColon && ':' + } + )} {!!hideZeroHour && !hours && ( - - {hours} - HOURS - + <> + + {hours} + HOURS + + { + showColon && ':' + } + + )} {minutes} MINS - {!isHideSecond && - {seconds} - SECONDS - } + {!isHideSecond && ( + <> + { + showColon && ':' + } + + {seconds} + SECONDS + + + ) + } ) ) diff --git a/src/styles/_global.scss b/src/styles/_global.scss index 2859eced2..e9a203d34 100644 --- a/src/styles/_global.scss +++ b/src/styles/_global.scss @@ -38,3 +38,80 @@ input[type='number'] { .anim-scale { width: 100%; } + + +@keyframes flip { + 0%, 45% { + transform:rotate(0); + } + 50%, 95% { + transform:rotate(180deg); + } + 100% { + transform:rotate(360deg); + } +} + +@keyframes bottom { + 0% { + transform:translateY(100%); + } + 50% { + transform:translateY(50%); + } + 51% { + transform:translateY(-50%); + } + 100% { + transform:translateY(-100%); + } +} + +@keyframes top { + 0% { + transform:translateY(50%); + } + 50% { + transform:translateY(100%); + } + 51% { + transform:translateY(-100%); + } + 100% { + transform:translateY(-50%); + } +} + +@keyframes bottom-drip { + 0% { + left:45%; + transform:translateY(-100%); + width:10%; + } + 5% { + transform:translateY(0); + } + 45%, 100% { + left:50%; + transform:translateY(0); + width:0; + } +} + +@keyframes top-drip { + 0%, 50% { + left:45%; + transform:translateY(100%); + width:10%; + } + 55% { + left:45%; + transform:translateY(0); + width:10%; + } + 100% { + left:50%; + transform:translateY(0); + width:0; + } +} From 947a2fa20fb2f2aab5192db5d5d7edba6e0e1ef6 Mon Sep 17 00:00:00 2001 From: 0xmegalodon Date: Thu, 1 Feb 2024 13:05:19 +0700 Subject: [PATCH 6/9] update hourly reward --- .../PublicSale/hourlyRewardButton/index.tsx | 28 ++++++++----------- 1 file changed, 11 insertions(+), 17 deletions(-) diff --git a/src/modules/PublicSale/hourlyRewardButton/index.tsx b/src/modules/PublicSale/hourlyRewardButton/index.tsx index bacf923b1..9f89b71bc 100644 --- a/src/modules/PublicSale/hourlyRewardButton/index.tsx +++ b/src/modules/PublicSale/hourlyRewardButton/index.tsx @@ -1,36 +1,26 @@ -import { Center, Flex, Text, useDisclosure } from '@chakra-ui/react'; +import { Center, Flex, Text } from '@chakra-ui/react'; import s from './styles.module.scss'; import React, { useEffect, useMemo, useRef, useState } from 'react'; import cx from 'clsx'; import { useAppSelector } from '@/stores/hooks'; -import { userSelector } from '@/stores/states/user/selector'; import { getPublicSaleDailyReward, IPublicSaleDailyReward } from '@/services/public-sale'; import AuthenStorage from '@/utils/storage/authen.storage'; -import { useDispatch } from 'react-redux'; -import { IAuthenCode } from '@/modules/Whitelist/steps'; import BigNumber from 'bignumber.js'; import dayjs from 'dayjs'; -import { PUBLIC_SALE_END, PUBLIC_SALE_START } from '@/modules/Whitelist'; +import { PUBLIC_SALE_START } from '@/modules/Whitelist'; import { commonSelector } from '@/stores/states/common/selector'; -import useWindowSize from '@/hooks/useWindowSize'; import Countdown from '@/modules/Whitelist/stepAirdrop/Countdown'; const HourlyRewardButton = ({ className }: any) => { - const { isOpen, onOpen, onClose } = useDisclosure(); const [isEnd, setIsEnd] = React.useState(false); - const user = useAppSelector(userSelector); const [dailyReward , setDailyReward] = useState(); const [isLoading, setIsLoading] = useState(true); const token = AuthenStorage.getAuthenKey() || AuthenStorage.getGuestAuthenKey(); const refInterval = useRef(undefined); - const dispatch = useDispatch(); - const [authenCode, setAuthenCode] = useState(); - const [showManualCheck, setShowManualCheck] = useState(false); const needReload = useAppSelector(commonSelector).needReload; const configs = useAppSelector(commonSelector).configs; - const { mobileScreen } = useWindowSize(); const currentDay = React.useMemo(() => { const diffDay = new BigNumber( @@ -54,10 +44,6 @@ const HourlyRewardButton = ({ className }: any) => { return []; }, [configs]); - const currentDayReward = useMemo(() => { - return REWARDS[currentDay.diffDay]; - }, [currentDay, REWARDS]) - useEffect(() => { getProgramInfo(); @@ -86,6 +72,14 @@ const HourlyRewardButton = ({ className }: any) => { } }; + const currentTime = useMemo(() => { + const res = dayjs.utc().set('minute', 30); + if (dayjs().utc().isAfter(res)) { + res.set('hour', res.get('hour') + 1); + } + return res.toString(); + }, [isEnd]); + return ( !isLoading && ( <> @@ -103,7 +97,7 @@ const HourlyRewardButton = ({ className }: any) => { setIsEnd(true)} From 10ddf4511faf02211980b2bc533fa3a3dbdcf8a3 Mon Sep 17 00:00:00 2001 From: 0xmegalodon Date: Thu, 1 Feb 2024 13:07:45 +0700 Subject: [PATCH 7/9] update hourly reward --- .../PublicSale/hourlyRewardButton/index.tsx | 122 +++++------------- 1 file changed, 29 insertions(+), 93 deletions(-) diff --git a/src/modules/PublicSale/hourlyRewardButton/index.tsx b/src/modules/PublicSale/hourlyRewardButton/index.tsx index 9f89b71bc..a7e7b80e1 100644 --- a/src/modules/PublicSale/hourlyRewardButton/index.tsx +++ b/src/modules/PublicSale/hourlyRewardButton/index.tsx @@ -1,114 +1,50 @@ import { Center, Flex, Text } from '@chakra-ui/react'; import s from './styles.module.scss'; -import React, { useEffect, useMemo, useRef, useState } from 'react'; +import React, { useMemo } from 'react'; import cx from 'clsx'; -import { useAppSelector } from '@/stores/hooks'; -import { getPublicSaleDailyReward, IPublicSaleDailyReward } from '@/services/public-sale'; -import AuthenStorage from '@/utils/storage/authen.storage'; -import BigNumber from 'bignumber.js'; import dayjs from 'dayjs'; -import { PUBLIC_SALE_START } from '@/modules/Whitelist'; -import { commonSelector } from '@/stores/states/common/selector'; import Countdown from '@/modules/Whitelist/stepAirdrop/Countdown'; const HourlyRewardButton = ({ className }: any) => { const [isEnd, setIsEnd] = React.useState(false); - const [dailyReward - , setDailyReward] = useState(); - const [isLoading, setIsLoading] = useState(true); - const token = - AuthenStorage.getAuthenKey() || AuthenStorage.getGuestAuthenKey(); - const refInterval = useRef(undefined); - const needReload = useAppSelector(commonSelector).needReload; - const configs = useAppSelector(commonSelector).configs; - const currentDay = React.useMemo(() => { - const diffDay = new BigNumber( - dayjs.utc(PUBLIC_SALE_START).diff(dayjs.utc(), 'days'), - ) - .absoluteValue() - .toNumber(); - return { - // step: DAYS.length > diffDay ? DAYS[diffDay] : DAYS[DAYS.length - 1], - diffDay, - }; - }, []); - - const REWARDS = useMemo(() => { - if(configs) { - if(configs['naka']?.bvm_halvings) { - const res = JSON.parse(configs['naka']?.bvm_halvings); - return Object.values(res); - } - } - return []; - }, [configs]); - - useEffect(() => { - getProgramInfo(); - - if(refInterval?.current) { - clearInterval(refInterval.current); - } - - refInterval.current = setInterval(() => { - getProgramInfo(); - }, 300000); - - return () => { - if(refInterval?.current) { - clearInterval(refInterval.current); - } - } - }, [needReload]); - - const getProgramInfo = async () => { - try { - const res = await getPublicSaleDailyReward(); - setDailyReward(res); - } catch (e) { - } finally { - setIsLoading(false); - } - }; - - const currentTime = useMemo(() => { + const hourlyEndTime = useMemo(() => { const res = dayjs.utc().set('minute', 30); if (dayjs().utc().isAfter(res)) { res.set('hour', res.get('hour') + 1); } + if(isEnd) { + setIsEnd(false); + } + return res.toString(); }, [isEnd]); return ( - !isLoading && ( - <> - - -
-
-
-
-
-
- - - End in - setIsEnd(true)} - type={"column"} - showColon={true} - /> - - + + +
+
+
+
+
+
+ + + End in + setIsEnd(true)} + type={"column"} + showColon={true} + /> - - ) + + ); }; From ac1bb58ae9a2f3ff1529334179c1897b84176669 Mon Sep 17 00:00:00 2001 From: 0xmegalodon Date: Thu, 1 Feb 2024 13:37:30 +0700 Subject: [PATCH 8/9] update hourly reward --- src/modules/PublicSale/hourlyReward/index.tsx | 1 + src/modules/PublicSale/hourlyRewardButton/index.tsx | 6 +++++- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/modules/PublicSale/hourlyReward/index.tsx b/src/modules/PublicSale/hourlyReward/index.tsx index 41d7a04af..5a155ca7b 100644 --- a/src/modules/PublicSale/hourlyReward/index.tsx +++ b/src/modules/PublicSale/hourlyReward/index.tsx @@ -57,6 +57,7 @@ const HourlyReward = () => { return (REWARDS[currentDay.diffDay] as number) / 24; }, [currentDay, REWARDS]) + return null; return ( diff --git a/src/modules/PublicSale/hourlyRewardButton/index.tsx b/src/modules/PublicSale/hourlyRewardButton/index.tsx index a7e7b80e1..fd3e43d0a 100644 --- a/src/modules/PublicSale/hourlyRewardButton/index.tsx +++ b/src/modules/PublicSale/hourlyRewardButton/index.tsx @@ -10,7 +10,8 @@ const HourlyRewardButton = ({ className }: any) => { const hourlyEndTime = useMemo(() => { const res = dayjs.utc().set('minute', 30); - if (dayjs().utc().isAfter(res)) { + if (dayjs().utc().isBefore(res)) { + console.log('fadfa', res.get('hour')); res.set('hour', res.get('hour') + 1); } if(isEnd) { @@ -20,6 +21,9 @@ const HourlyRewardButton = ({ className }: any) => { return res.toString(); }, [isEnd]); + console.log('dayjs.utc()', dayjs.utc().toString()); + console.log('hourlyEndTime', hourlyEndTime); + return ( From 1fdcf5ba89ca91781ac8de9790ff392672c7401f Mon Sep 17 00:00:00 2001 From: 0xmegalodon Date: Thu, 1 Feb 2024 13:44:52 +0700 Subject: [PATCH 9/9] update hourly reward --- src/modules/PublicSale/hourlyReward/index.tsx | 5 ++--- src/modules/PublicSale/hourlyRewardButton/index.tsx | 12 ++++++------ 2 files changed, 8 insertions(+), 9 deletions(-) diff --git a/src/modules/PublicSale/hourlyReward/index.tsx b/src/modules/PublicSale/hourlyReward/index.tsx index 5a155ca7b..d9970a3af 100644 --- a/src/modules/PublicSale/hourlyReward/index.tsx +++ b/src/modules/PublicSale/hourlyReward/index.tsx @@ -57,13 +57,12 @@ const HourlyReward = () => { return (REWARDS[currentDay.diffDay] as number) / 24; }, [currentDay, REWARDS]) - return null; return ( - + Hourly Reward - {formatCurrency(currentHourReward, MIN_DECIMAL, MIN_DECIMAL, 'BTC', false)} BVM + {formatCurrency(currentHourReward, 0, 0, 'BTC', false)} BVM diff --git a/src/modules/PublicSale/hourlyRewardButton/index.tsx b/src/modules/PublicSale/hourlyRewardButton/index.tsx index fd3e43d0a..9a768265a 100644 --- a/src/modules/PublicSale/hourlyRewardButton/index.tsx +++ b/src/modules/PublicSale/hourlyRewardButton/index.tsx @@ -9,10 +9,10 @@ const HourlyRewardButton = ({ className }: any) => { const [isEnd, setIsEnd] = React.useState(false); const hourlyEndTime = useMemo(() => { - const res = dayjs.utc().set('minute', 30); - if (dayjs().utc().isBefore(res)) { - console.log('fadfa', res.get('hour')); - res.set('hour', res.get('hour') + 1); + let res = dayjs.utc().set('minute', 30); + res = res.set('second', 0); + if (dayjs().utc().isAfter(res)) { + res = res.set('hour', res.get('hour') + 1); } if(isEnd) { setIsEnd(false); @@ -21,8 +21,8 @@ const HourlyRewardButton = ({ className }: any) => { return res.toString(); }, [isEnd]); - console.log('dayjs.utc()', dayjs.utc().toString()); - console.log('hourlyEndTime', hourlyEndTime); + // console.log('dayjs.utc()', dayjs.utc().toString()); + // console.log('hourlyEndTime', hourlyEndTime); return (