diff --git a/src/components/DelegationCampaign/DelegationCampaign.tsx b/src/components/DelegationCampaign/DelegationCampaign.tsx index 78a7bdd..9a94330 100644 --- a/src/components/DelegationCampaign/DelegationCampaign.tsx +++ b/src/components/DelegationCampaign/DelegationCampaign.tsx @@ -1,5 +1,5 @@ /* eslint-disable jsx-a11y/click-events-have-key-events */ -import React, { CSSProperties, FC, useEffect, useMemo, useRef, useState } from 'react'; +import React, { CSSProperties, FC, forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'; import { FaChevronLeft, FaChevronRight } from 'react-icons/fa6'; import { IoMdCheckmark } from 'react-icons/io'; import { animated, AnimatedProps, useSpringRef, useTransition } from '@react-spring/web'; @@ -61,105 +61,117 @@ const rewardsAmountPoint = (amount: string, delegation: string) => { return Math.ceil(70 * Math.floor(+amount)).toFixed(0); }; -const LootboxItem = (props: { item: IMyLootboxItem; refresh: () => void }) => { - const { item, refresh } = props; - const { address: account } = useAccount(); - const [isOpen, setIsOpen] = useState(false); - const [animationOff, setAnimationOff] = useState(false); - const [opening, setOpening] = useState(false); - const { openLootbox } = useDelegationCampaignApi({ - alert: true - }); - - return ( -
- Lootbox {item.num} - {item.completed ? ( - +{formatNumberWithLocale(item.point, 0)} points! - ) : ( - - )} +interface LootboxItemRef { + open: () => void; +} - { - setIsOpen(false); - }} - okButtonProps={{ - style: { display: 'none' } - }} - cancelButtonProps={{ style: { display: 'none' } }} - closeIcon={<>} - destroyOnClose - className={styles.lootboxModal} - afterOpenChange={(val) => { - setAnimationOff(val); - }} - width={600} - > - {animationOff && ( -
{ - setIsOpen(false); - }} - role="button" - tabIndex={0} - > -
- -
+const LootboxItem = forwardRef void }>( + (props, ref) => { + const { item, customTitle, refresh } = props; + const { address: account } = useAccount(); + const [isOpen, setIsOpen] = useState(false); + const [animationOff, setAnimationOff] = useState(false); + const [opening, setOpening] = useState(false); + const { openLootbox } = useDelegationCampaignApi({ + alert: true + }); - Lootbox for Era {item.era} + const openLootboxFunc = async () => { + heartFireworks(); + setTimeout(() => { + setIsOpen(true); + }, 1500); + }; - - By staking more SQT, you get more opportunities to win with lootboxes. Check back at the end of each Era - for new lootboxes that you can open and win. - + useImperativeHandle(ref, () => ({ + open: openLootboxFunc + })); - + )} - setIsOpen(false); - } finally { - setOpening(false); - } + { + setIsOpen(false); + }} + okButtonProps={{ + style: { display: 'none' } + }} + cancelButtonProps={{ style: { display: 'none' } }} + closeIcon={<>} + destroyOnClose + className={styles.lootboxModal} + afterOpenChange={(val) => { + setAnimationOff(val); + }} + width={600} + > + {animationOff && ( +
{ + setIsOpen(false); }} - shape="round" - type="primary" - loading={opening} + role="button" + tabIndex={0} > - Collect the Points! - -
- )} - -
- ); -}; +
+ +
+ + {customTitle || `Lootbox for Era ${item.era}`} + + + By staking more SQT, you get more opportunities to win with lootboxes. Check back at the end of each Era + for new lootboxes that you can open and win. + + + +
+ )} + + + ); + } +); const SecondStep = (props: { userInfo?: IDelegationUserInfo['data'] }) => { const { userInfo } = props; @@ -750,6 +762,7 @@ interface RenderChallenge { render?: React.ReactNode; cta?: string; cta_url?: string; + key?: string; } const MainChallenges = (props: { userInfo?: IDelegationUserInfo['data'] }) => { @@ -762,49 +775,7 @@ const MainChallenges = (props: { userInfo?: IDelegationUserInfo['data'] }) => { alert: false }); - const renderChallenges = useMemo( - () => - userChallenges.map((challenge) => ({ - key: challenge.id, - label: ( -
-
- {challenge.success && } -
- {challenge.name} - - - - - {+(userInfo?.referral_count || 0) > 1 && challenge.id === 'referral' ? ( - {userInfo?.referral_count}x referral bonus - ) : ( - '' - )} - -
- -
-
- ), - children: challenge.render || ( -
- {`${challenge.description}`} - - {challenge.cta && ( - - - - )} -
- ) - })), - [userChallenges] - ); + const lootboxRef = useRef(null); const initChallenges = async () => { try { @@ -818,12 +789,13 @@ const MainChallenges = (props: { userInfo?: IDelegationUserInfo['data'] }) => { const challenges: RenderChallenge[] = res?.data?.data?.map((i) => ({ id: i.challenge.id, - reward: +i.challenge.point, + reward: +(i.userChallenge?.point || 0) || +i.challenge.point, success: !!i?.userChallenge?.completed, name: i.challenge.title, description: i.challenge.description, cta: i.challenge.cta, - cta_url: i.challenge.cta_url + cta_url: i.challenge.cta_url, + key: i.challenge.key })) || []; challenges.push({ id: 'referral', @@ -898,6 +870,94 @@ const MainChallenges = (props: { userInfo?: IDelegationUserInfo['data'] }) => { } }; + const renderChallenges = useMemo(() => { + const renderWelcome = (challenge: RenderChallenge) => { + if (challenge.key !== 'random.1') return null; + + return ( +
+ +
+ +
+
+ ); + }; + + return userChallenges.map((challenge) => ({ + key: challenge.key || challenge.id, + label: ( +
+
+ {challenge.success && } +
+ {challenge.name} + + + + + {+(userInfo?.referral_count || 0) > 1 && challenge.id === 'referral' ? ( + {userInfo?.referral_count}x referral bonus + ) : ( + '' + )} + + {challenge.reward ? ( +
+ +
+ ) : ( + '' + )} +
+ ), + children: challenge.render || ( +
+ {`${challenge.description}`} + {renderWelcome(challenge)} + {challenge.cta && ( + + + + )} +
+ ) + })); + }, [userChallenges, initChallenges]); + useEffect(() => { initChallenges(); }, []); @@ -1124,13 +1184,15 @@ const DelegationCampaign: FC = (props) => { }); setUserInfo(res.data.data); - } finally { - setFetchLoading(false); setTimeout(() => { setTransitionIndex(1); - const scrollY = localStorage.getItem('prevScrolled'); - window.scrollTo(0, scrollY ? +scrollY : 0); + if (res.data.data && res.data.data.email_verified) { + const scrollY = localStorage.getItem('prevScrolled'); + window.scrollTo(0, scrollY ? +scrollY : 0); + } }, 300); + } finally { + setFetchLoading(false); } }; diff --git a/src/hooks/useDelegationCampaignApi.ts b/src/hooks/useDelegationCampaignApi.ts index bbd1fa1..e760a93 100644 --- a/src/hooks/useDelegationCampaignApi.ts +++ b/src/hooks/useDelegationCampaignApi.ts @@ -50,9 +50,11 @@ export interface IOneoffChallenge { id: number; title: string; point: number; + key: string; }; userChallenge?: { completed: boolean; + point?: number; }; }[]; } diff --git a/stage.env b/stage.env index 0788646..4665b1b 100644 --- a/stage.env +++ b/stage.env @@ -6,6 +6,6 @@ REACT_APP_CLAIM_ENABLED=true REACT_APP_DEPLOYMENT_ID=QmUwTD5dqQRRFcMCihJ4HHnMPfEvRpKpcFvGcTJjBpGg9T REACT_APP_VESTING_SUBQL=https://api.subquery.network/sq/subquery/testnet-vesting REACT_APP_CHALLENGE_URL=http://icewk.local:3001/ -REACT_APP_DELEGATION_FRENZY_URL=https://challenge-api.wk.zohu.vip:8008/ +REACT_APP_DELEGATION_FRENZY_URL=http://192.168.1.32:3000 GENERATE_SOURCEMAP=false