From f4706392313ebbf6e09b35ad7f2aecc9f9f57ed9 Mon Sep 17 00:00:00 2001
From: 0xmegalodon <stephen@newbitcoincity.com>
Date: Mon, 29 Jan 2024 19:08:21 +0700
Subject: [PATCH] update css

---
 src/interfaces/leader-board-point.ts          |  1 +
 .../leaderBoardVisual/AvatarItem/index.tsx    | 47 ++++++++++---------
 .../AvatarItem/styles.module.scss             |  3 ++
 .../PublicSale/leaderBoardVisual/index.tsx    | 11 +++--
 4 files changed, 37 insertions(+), 25 deletions(-)

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<boolean>(false);
@@ -79,7 +85,6 @@ const AvatarItem = forwardRef((props: IProps, ref: any) => {
       src={'/images/mk-user.jpg'} alt={'user'} style={{ cursor: 'pointer' }} />;
   };
 
-
   return (
     <div
       className={`${s.avatarItem} ${isYou && s.isYou} ${data.levelRender !== undefined && 'level-' + data.levelRender} js-avatarItem`}
@@ -116,7 +121,7 @@ const AvatarItem = forwardRef((props: IProps, ref: any) => {
         </div>
       </div>
       {
-        <div className={`${s.lt} ${!isLoopDone && s.isRun}`}>
+        <div className={`${s.lt} ${!isLoopDone ? s.isRun : ''}`}>
           <DotLottiePlayer
             className={s.lottie}
             lottieRef={lottieRef}
diff --git a/src/modules/PublicSale/leaderBoardVisual/AvatarItem/styles.module.scss b/src/modules/PublicSale/leaderBoardVisual/AvatarItem/styles.module.scss
index 9bbe19b0d..993d25a54 100644
--- a/src/modules/PublicSale/leaderBoardVisual/AvatarItem/styles.module.scss
+++ b/src/modules/PublicSale/leaderBoardVisual/AvatarItem/styles.module.scss
@@ -14,6 +14,9 @@
     top: 0;
     bottom: 0;
     opacity: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
 
     &.isRun {
       opacity: 1;
diff --git a/src/modules/PublicSale/leaderBoardVisual/index.tsx b/src/modules/PublicSale/leaderBoardVisual/index.tsx
index 3808af547..ac812a278 100644
--- a/src/modules/PublicSale/leaderBoardVisual/index.tsx
+++ b/src/modules/PublicSale/leaderBoardVisual/index.tsx
@@ -42,9 +42,12 @@ const LeaderBoardVisual = (props: IProps) => {
     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(() => {