diff --git a/src/interfaces/leader-board-point.ts b/src/interfaces/leader-board-point.ts index 017e1d9b5..d36fe443b 100644 --- a/src/interfaces/leader-board-point.ts +++ b/src/interfaces/leader-board-point.ts @@ -43,4 +43,5 @@ export interface ILeaderBoardPoint { usdt_value?:string; bvm_percent?:string; coin_balances?:IContributionCoin[]; + deposit_id:string; } diff --git a/src/modules/PublicSale/leaderBoardVisual/AvatarItem/index.tsx b/src/modules/PublicSale/leaderBoardVisual/AvatarItem/index.tsx index 42ad0670a..771af4ee8 100644 --- a/src/modules/PublicSale/leaderBoardVisual/AvatarItem/index.tsx +++ b/src/modules/PublicSale/leaderBoardVisual/AvatarItem/index.tsx @@ -31,44 +31,50 @@ const AvatarItem = forwardRef((props: IProps, ref: any) => { const add = animatedLatestContributors?.find(c => c.twitter_id === data.twitter_id); if(add) { - return Number(data.usdt_value) + Number(add.usdt_value); + return refMoney.current.value + Number(add.usdt_value); } else { - return Number(data.usdt_value); + return refMoney.current.value; } } else { - return Number(data.usdt_value); + return refMoney.current.value; } - }, [data, needCheckDeposit, animatedLatestContributors]); + }, [needCheckDeposit, JSON.stringify(animatedLatestContributors)]); useEffect(() => { if (!refInertMoney.current) return; if (newTotalMoney && refMoney.current.value !== newTotalMoney) { + const numberLoop = 5; + const duration = 19/24; gsap.to(refMoney.current, { - value: newTotalMoney, ease: 'power3.inOut', duration: 1, onUpdate: () => { + value: newTotalMoney, ease: 'power3.inOut', duration: numberLoop * duration, onUpdate: () => { if (refInertMoney.current) { refInertMoney.current.innerHTML = `$${formatCurrency(refMoney.current.value, 0, 0, '', true)}`; } }, }); + if (!lottieRef.current) return; + + lottieRef.current.setLoop(numberLoop); + lottieRef.current.play(); + + setIsLoopDone(false); + if(refTime.current) { + clearTimeout(refTime.current); + } + refTime.current = setTimeout(() => { + setIsLoopDone(true); + onCompleted && onCompleted(); + }, duration * numberLoop * 1000); } else { refInertMoney.current.innerHTML = `$${formatCurrency(refMoney.current.value, 0, 0, '', true)}`; } - - if (!lottieRef.current) return; - const numberLoop = 3; - - lottieRef.current.setLoop(3); - lottieRef.current.play(); - setIsLoopDone(false); - - const duration = lottieRef.current; - refTime.current = setTimeout(() => { - setIsLoopDone(true); - onCompleted && onCompleted(); - }, duration * numberLoop); - + return () => { + if(refTime.current) { + clearTimeout(refTime.current); + } + } }, [newTotalMoney]); const [error, setError] = useState(false); @@ -79,7 +85,6 @@ const AvatarItem = forwardRef((props: IProps, ref: any) => { src={'/images/mk-user.jpg'} alt={'user'} style={{ cursor: 'pointer' }} />; }; - return (
{
{ -
+
{ fetchLatestData(); const interval = setInterval(() => { fetchLatestData(); - dispatch(setNeedCheckDeposit(true)); }, 10000); + setTimeout(() => { + dispatch(setNeedCheckDeposit(true)); + }, 12000); + return () => { clearInterval(interval); }; @@ -107,14 +110,14 @@ const LeaderBoardVisual = (props: IProps) => { const oldContributors = latestContributors?.current; const newRes = res.filter( function( el ) { - return oldContributors?.findIndex(a => a.twitter_id === el.twitter_id) < 0; + return oldContributors?.findIndex(a => a.deposit_id === el.deposit_id) < 0; }); if(newRes?.length > 0) { latestContributors.current = [...newRes].concat(latestContributors.current); - animatedLatestContributors.current = newRes; - dispatch(setAnimatedLatestContributors(newRes)); } + animatedLatestContributors.current = newRes || []; + dispatch(setAnimatedLatestContributors(newRes || [])); }; useEffect(() => {