Merge pull request #121 from TrustlessComputer/feat/whitelist_munual

Feat/whitelist munual
TrustlessComputer · Jan 29, 2024 · 35063f6 · 35063f6
2 parents dac8347 + b6bcfb4
commit 35063f6
Show file tree

Hide file tree

Showing 7 changed files with 138 additions and 55 deletions.
diff --git a/public/icons/flash.svg b/public/icons/flash.svg
diff --git a/public/presale-up-2.lottie b/public/presale-up-2.lottie
diff --git a/src/modules/PublicSale/addMoreContribution/index.tsx b/src/modules/PublicSale/addMoreContribution/index.tsx
@@ -5,6 +5,7 @@ import DepositModal from '@/modules/PublicSale/depositModal';
 import React, { useState } from 'react';
 import { getLink } from '@/utils/helpers';
 import { useAppSelector } from '@/stores/hooks';
+import Image from 'next/image';
 import { userSelector } from '@/stores/states/user/selector';
 
 const AMOUNTS = [
@@ -20,6 +21,7 @@ const AddMoreContribution = () => {
   const [selectedAmount, setSelectedAmount] = useState<any>();
   const user = useAppSelector(userSelector);
 
+
   const handleShareTw = () => {
     const shareUrl = getLink(user?.referral_code || '');
 
@@ -29,55 +31,72 @@ const AddMoreContribution = () => {
     )}`;
 
     window.open(url, '_blank');
-  }
+  };
 
   return (
-    <Flex className={s.container} direction={["column", "row"]}>
+    <Flex className={s.container} direction={['column', 'row']}>
       <Flex
         p={[4, 5]}
-        alignItems={"center"}
-        w={"100%"}
-        justifyContent={"space-between"}
-        direction={["column", "row"]}
+        alignItems={'center'}
+        w={'100%'}
+        justifyContent={'space-between'}
+        direction={['column', 'row']}
         gap={6}
       >
-        <Text fontSize={'14px'} casing={'uppercase'} fontWeight={500} color={'#FFFFFF'}>
-          Add more contributors
-        </Text>
-        <Flex gap={2} justifyContent={"space-between"} flexWrap={["wrap", "nowrap"]}>
+        <div>
+          <Text fontSize={'14px'} casing={'uppercase'} fontWeight={500} color={'#FFFFFF'}>
+            Add more contributors
+          </Text>
+          <p>
+            <span className={s.yourBoots}>
+            Your boots <span>
+              <Image src={'/icons/flash.svg'} width={12} height={12} alt={'flash.svg'} />
+          </span>
+            <span className={s.yourBoots_percent}>
+                 20%
+              {/*//todo step*/}
+            </span>
+          </span>
+          </p>
+        </div>
+
+
+        <Flex gap={2} justifyContent={'space-between'} flexWrap={['wrap', 'nowrap']}>
           {
             AMOUNTS.map(d => {
               return (
                 <Flex
                   flex={1}
                   justifyContent={'center'}
-                  alignItems={"center"}
+                  alignItems={'center'}
                   className={cx(s.item)}
                   onClick={() => {
                     setSelectedAmount(d);
                     setShowQrCode(true);
                   }}
-                  cursor={"pointer"}
+                  cursor={'pointer'}
                 >
                   {d?.title}
                 </Flex>
-              )
+              );
             })
           }
         </Flex>
       </Flex>
-      <Divider orientation={'vertical'} borderColor={'rgba(255, 255, 255, .3)'}/>
-      <Flex p={[4, 5]} alignItems={'center'} justifyContent={"center"}>
+      <Divider orientation={'vertical'} borderColor={'rgba(255, 255, 255, .3)'} />
+      <Flex p={[4, 5]} alignItems={'center'} justifyContent={'center'}>
         <Flex className={s.learnMoreWrapper} gap={3} onClick={handleShareTw}>
-          <Text whiteSpace={"nowrap"} lineHeight={"100%"}>Share on</Text>
+          <Text whiteSpace={'nowrap'} lineHeight={'100%'}>Share on</Text>
           <span>
-              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <g clip-path="url(#clip0_29786_7178)">
-                <path d="M12.6007 0.769531H15.054L9.694 6.8962L16 15.2315H11.0627L7.196 10.1755L2.77067 15.2315H0.316L6.04933 8.6782L0 0.770198H5.06267L8.558 5.39153L12.6007 0.769531ZM11.74 13.7635H13.0993L4.324 2.16086H2.86533L11.74 13.7635Z" fill="white"/>
+              <svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
+              <g clip-path='url(#clip0_29786_7178)'>
+                <path
+                  d='M12.6007 0.769531H15.054L9.694 6.8962L16 15.2315H11.0627L7.196 10.1755L2.77067 15.2315H0.316L6.04933 8.6782L0 0.770198H5.06267L8.558 5.39153L12.6007 0.769531ZM11.74 13.7635H13.0993L4.324 2.16086H2.86533L11.74 13.7635Z'
+                  fill='white' />
               </g>
               <defs>
-                <clipPath id="clip0_29786_7178">
-                  <rect width="16" height="16" fill="white"/>
+                <clipPath id='clip0_29786_7178'>
+                  <rect width='16' height='16' fill='white' />
                 </clipPath>
               </defs>
             </svg>
@@ -90,7 +109,7 @@ const AddMoreContribution = () => {
         payAmountUsd={selectedAmount?.value}
       />
     </Flex>
-  )
+  );
 };
 
 export default AddMoreContribution;
diff --git a/src/modules/PublicSale/addMoreContribution/styles.module.scss b/src/modules/PublicSale/addMoreContribution/styles.module.scss
@@ -46,3 +46,25 @@
     }
   }
 }
+
+.yourBoots {
+  display: flex;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 14px;
+  letter-spacing: 0em;
+  text-align: left;
+  padding: 4px 10px;
+  gap: 4px;
+  border-radius: 100px;
+  background: rgba(#fff, .2);
+  width: fit-content;
+  margin-top: 6px;
+  color: rgba(#fff, .7);
+
+  &_percent{
+    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;
+  }
+}
diff --git a/src/modules/PublicSale/leaderBoardVisual/AvatarItem/index.tsx b/src/modules/PublicSale/leaderBoardVisual/AvatarItem/index.tsx
@@ -5,19 +5,56 @@ import Image from 'next/image';
 import { ILeaderBoardPoint } from '@/interfaces/leader-board-point';
 import { formatCurrency } from '@/utils/format';
 import { DotLottiePlayer } from '@dotlottie/react-player';
+import { gsap } from 'gsap';
 
 interface IProps {
   data: ILeaderBoardPoint,
   isShowName?: boolean
   isYou?: boolean
-  isUpMoney?: boolean
+  newTotalMoney?: number
+  onCompleted?: ()=>void
 }
 
-const AvatarItem = forwardRef((props: IProps, ref: any) => {
-  const { data, isUpMoney, isShowName, isYou, ...rest } = props;
+const AvatarItem = forwardRef((props: IProps, ref: any, onCompleted) => {
+  const { data, newTotalMoney, isShowName, isYou, ...rest } = props;
   const lottieRef = useRef<any>();
+  const refMoney = useRef<{ value: number }>({ value: data?.usdt_value || 0 });
+  const refInertMoney = useRef<HTMLParagraphElement>(null);
+  const [isLoopDone, setIsLoopDone] = useState(true);
   const refTime = useRef<NodeJS.Timeout>();
 
+
+  useEffect(() => {
+
+    if (!refInertMoney.current) return;
+    if (newTotalMoney && refMoney.current.value !== newTotalMoney) {
+      gsap.to(refMoney.current, {
+        value: newTotalMoney, ease: 'power3.inOut', duration: 1, onUpdate: () => {
+          if (refInertMoney.current) {
+            refInertMoney.current.innerHTML = `$${formatCurrency(refMoney.current.value, 0, 0, '', true)}`;
+          }
+        },
+      });
+    } 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();
+    }, duration * numberLoop);
+
+  }, [newTotalMoney]);
+
   const [error, setError] = useState<boolean>(false);
   const PlaceImage = (): ReactElement => {
     return <Image
@@ -26,14 +63,6 @@ const AvatarItem = forwardRef((props: IProps, ref: any) => {
       src={'/images/mk-user.jpg'} alt={'user'} style={{ cursor: 'pointer' }} />;
   };
 
-  useEffect(() => {
-    if (isUpMoney) {
-      lottieRef.current.setLoop(true);
-      lottieRef.current.play();
-    } else {
-      lottieRef.current.stop();
-    }
-  }, [isUpMoney]);
 
   return (
     <div
@@ -67,14 +96,18 @@ const AvatarItem = forwardRef((props: IProps, ref: any) => {
           {
             isYou && <p className={s.name}>You</p>
           }
-          <p className={s.price}>${formatCurrency(data?.usdt_value, 0, 0, 'BTC', true)}</p>
+          <p className={s.price} ref={refInertMoney}></p>
         </div>
       </div>
-      <DotLottiePlayer
-        className={s.lottie}
-        lottieRef={lottieRef}
-        src='/presale-up.lottie'
-      />
+      {
+        <div className={`${s.lt} ${!isLoopDone && s.isRun}`}>
+          <DotLottiePlayer
+            className={s.lottie}
+            lottieRef={lottieRef}
+            src='/presale-up-2.lottie'
+          />
+        </div>
+      }
     </div>
   );
 });

diff --git a/src/modules/PublicSale/leaderBoardVisual/AvatarItem/styles.module.scss b/src/modules/PublicSale/leaderBoardVisual/AvatarItem/styles.module.scss
@@ -9,6 +9,17 @@
   margin-right: 14px;
   position: relative;
 
+  .lt {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    opacity: 0;
+
+    &.isRun {
+      opacity: 1;
+    }
+  }
+
   .lottie {
     position: absolute;
     bottom: 0;

diff --git a/src/modules/PublicSale/leaderBoardVisual/index.tsx b/src/modules/PublicSale/leaderBoardVisual/index.tsx
@@ -11,8 +11,6 @@ import { setPublicSaleLeaderBoardVisual } from '@/stores/states/user/reducer';
 import { getPublicSaleContributionLatest, getPublicSaleLeaderBoards, getPublicSaleTop } from '@/services/public-sale';
 import AvatarItem from '@/modules/PublicSale/leaderBoardVisual/AvatarItem';
 import AnimatedText from '@/modules/PublicSale/leaderBoardVisual/FloatTexts';
-import { Tooltip } from '@chakra-ui/react';
-import ContributorInfo from '@/modules/PublicSale/components/contributorInfo';
 import { useSelector } from 'react-redux';
 import { LEADER_BOARD_MODE } from '@/modules/PublicSale/leaderBoardSwitch';
 
@@ -28,6 +26,7 @@ const LeaderBoardVisual = (props: IProps) => {
   const dispatch = useAppDispatch();
   const leaderBoardMode = useSelector(commonSelector).leaderBoardMode;
   const latestContributors = useRef<ILeaderBoardPoint[]>([]);
+  const animatedLatestContributors = useRef<ILeaderBoardPoint[]>([]);
   const user = useAppSelector(userSelector);
 
   const hasIncrementedPageRef = useRef(false);
@@ -109,7 +108,8 @@ const LeaderBoardVisual = (props: IProps) => {
     });
 
     if(newRes?.length > 0) {
-      latestContributors.current = newRes;
+      latestContributors.current = newRes.concat(latestContributors.current);
+      animatedLatestContributors.current = newRes;
     }
   };
 
@@ -151,26 +151,15 @@ const LeaderBoardVisual = (props: IProps) => {
         {
           listRender.map((item, index) => {
             return <>
-              <Tooltip minW='220px'
-                       bg='white'
-                       boxShadow='rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;'
-                       borderRadius='4px'
-                       padding='16px'
-                       hasArrow
-                       label={
-                         <ContributorInfo data={item} />
-                       }
-              >
-                <AvatarItem data={item} isShowName={index < 4} isUpMoney={true} isYou={user?.twitter_id === item.twitter_id} />
-              </Tooltip>
+                <AvatarItem data={item} isShowName={index < 4} isYou={user?.twitter_id === item.twitter_id} />
               {
                 item.lastRender && <span className={styles.lastRender}></span>
               }
             </>;
           })
         }
       </ScrollWrapper>
-      <AnimatedText latestContributors={latestContributors?.current} />
+      <AnimatedText latestContributors={animatedLatestContributors?.current} />
     </div>
   );
 };