Merge branch 'feat/whitelist_munual' into develop

src/modules/PublicSale/leaderBoardVisual/AvatarItem/index.tsx

@@ -16,10 +16,18 @@ interface IProps {
   isShowName?: boolean
   isYou?: boolean
   onCompleted?: ()=>void
+  idx: number
 }
 
+export const PlaceImage = (): ReactElement => {
+  return <Image
+    width={120}
+    height={120}
+    src={'/none-avatar.jpeg'} alt={'user'} style={{ cursor: 'pointer' }} />;
+};
+
 const AvatarItem = forwardRef((props: IProps, ref: any) => {
-  const { data, isShowName, isYou, onCompleted, ...rest } = props;
+  const { data, idx, isShowName, isYou, onCompleted, ...rest } = props;
   const lottieRef = useRef<any>();
   const refMoney = useRef<{ value: number }>({ value: Number(data?.usdt_value) || 0 });
   const refInertMoney = useRef<HTMLParagraphElement>(null);
@@ -30,7 +38,7 @@ const AvatarItem = forwardRef((props: IProps, ref: any) => {
 
   const newTotalMoney = useMemo(():number => {
     if (needCheckDeposit) {
-      const add = animatedLatestContributors?.find(c => c.twitter_id === data.twitter_id);
+      const add = animatedLatestContributors?.find(c => c.twitter_id === data?.twitter_id);
 
       if(add) {
         return refMoney.current.value + Number(add.usdt_value);
@@ -80,21 +88,15 @@ const AvatarItem = forwardRef((props: IProps, ref: any) => {
   }, [newTotalMoney]);
 
   const [error, setError] = useState<boolean>(false);
-  const PlaceImage = (): ReactElement => {
-    return <Image
-      width={120}
-      height={120}
-      src={'/images/mk-user.jpg'} alt={'user'} style={{ cursor: 'pointer' }} />;
-  };
 
   const renderContent = () => {
     return (
       <div className={s.avatarItem_inner}>
         {
-          data.levelRender === 0 && <Image className={s.king} src={'/public-sale/icon-king.svg'} width={60} height={60} alt={'king'} />
+          data?.levelRender === 0 && <Image className={s.king} src={'/public-sale/icon-king.svg'} width={60} height={60} alt={'king'} />
         }
         {
-          isShowName && data.levelRender === 0 && !isYou && <p className={s.name}>{data.twitter_username}</p>
+          isShowName && data?.levelRender === 0 && !isYou && <p className={s.name}>{data?.twitter_username}</p>
         }
         {
           isYou && <p className={s.name}>You</p>
@@ -129,10 +131,10 @@ const AvatarItem = forwardRef((props: IProps, ref: any) => {
 
   return (
     <div
-      className={`${s.avatarItem} ${isYou && s.isYou} ${data.levelRender !== undefined && 'level-' + data.levelRender} js-avatarItem`}
+      className={`${s.avatarItem} ${s[`avatarItem__${idx}`]} ${isYou && s.isYou} ${data?.levelRender !== undefined && 'level-' + data?.levelRender} js-avatarItem`}
       ref={ref} {...rest}>
       {
-        data.levelRender === 0 ? (
+        data?.levelRender === 0 ? (
           <Tooltip
             minW="400px"
             bg="white"

src/modules/PublicSale/leaderBoardVisual/AvatarItem/styles.module.scss

@@ -46,6 +46,8 @@
       top: -10px;
       right: 0;
       z-index: 1;
+      width: 40px;
+      height: 40px;
     }
   }
 
@@ -57,24 +59,24 @@
   }
 
   .name {
-    font-size: clamp(12px, #{vw(160px)}, 16px);
+    font-size: 14px;
     font-weight: 500;
     line-height: 24px;
     text-align: center;
     white-space: nowrap;
     position: absolute;
     bottom: calc(100% + 10px);
     width: 100%;
-    @include fixTextLargeLen(150px);
+    @include fixTextLargeLen(160px);
   }
 
   .price {
-    font-size: clamp(10px, #{vw(38px)}, 14px);
+    font-size: 14px;
     background: white;
     border-radius: 100px;
     font-weight: 500;
     color: #000;
-    padding: 5px 15px;
+    padding: 4px 15px;
     line-height: 1.4;
     text-align: center;
     width: fit-content;
@@ -89,7 +91,7 @@
   &_avatar {
     border-radius: 50%;
     box-shadow: 0px 0px 40px -6px #0000001F;
-    border: 6px solid #fff;
+    border: 3px solid #fff;
     width: fit-content;
     height: fit-content;
     aspect-ratio: 1/1;
@@ -121,76 +123,76 @@
     margin-top: 24px;
 
     .price {
-      font-size: clamp(14px, #{vw(140px)}, 16px);
+      font-size: 14px;
       background: linear-gradient(180deg, #FF9776 0%, #FF8139 32.81%, #E04300 100%);
       color: white;
       margin-bottom: 5px;
-      padding: 6px clamp(16px, #{vw(140px)}, 20px);
+      padding: 5px 15px;
     }
 
     .name {
-      font-size: clamp(14px, #{vw(140px)}, 16px);
+      font-size: 14px;
     }
 
     .avatarItem_avatar {
       * {
-        width: 140px !important;
-        height: 140px !important;
+        width: 80px !important;
+        height: 80px !important;
       }
     }
   }
 
   &:global(.level-1) {
     margin-bottom: 48px;
 
-    margin-left: clamp(14px, #{vw(88px)}, 19px);
-    margin-right: clamp(14px, #{vw(88px)}, 19px);
+    margin-left: clamp(14px, #{vw(60px)}, 18px);
+    margin-right: clamp(14px, #{vw(60px)}, 18px);
 
     .price {
-      font-size: clamp(12px, #{vw(88px)}, 14px);
+      font-size: 12px;
       background: linear-gradient(90deg, #00F5A0 0%, #00D9F5 100%);
     }
 
 
     .avatarItem_avatar {
       * {
-        width: 88px !important;
-        height: 88px !important;
+        width: 60px !important;
+        height: 60px !important;
       }
     }
   }
 
   &:global(.level-2) {
     margin-bottom: 40px;
-    margin-left: clamp(14px, #{vw(60px)}, 20px);
-    margin-right: clamp(14px, #{vw(60px)}, 20px);
+    margin-left: clamp(14px, #{vw(48px)}, 20px);
+    margin-right: clamp(14px, #{vw(48px)}, 20px);
 
     .price {
-      font-size: clamp(12px, #{vw(60px)}, 14px);
+      font-size: 10px;
     }
 
     .avatarItem_avatar {
       * {
-        width: 60px !important;
-        height: 60px !important;
+        width: 48px !important;
+        height: 48px !important;
       }
     }
   }
 
   &:global(.level-3) {
 
     margin-bottom: 60px;
-    margin-left: clamp(14px, #{vw(60px)}, 20px);
-    margin-right: clamp(14px, #{vw(60px)}, 20px);
+    margin-left: clamp(14px, #{vw(48px)}, 20px);
+    margin-right: clamp(14px, #{vw(48px)}, 20px);
 
     .price {
-      font-size: clamp(12px, #{vw(60px)}, 14px);
+      font-size: 10px;
     }
 
     .avatarItem_avatar {
       * {
-        width: 60px !important;
-        height: 60px !important;
+        width: 48px !important;
+        height: 48px !important;
       }
     }
 
@@ -203,18 +205,18 @@
 
   &:global(.level-4) {
     margin-bottom: 48px;
-    margin-left: clamp(12px, #{vw(36px)}, 18px);
-    margin-right: clamp(12px, #{vw(36px)}, 18px);
+    margin-left: clamp(12px, #{vw(32px)}, 18px);
+    margin-right: clamp(12px, #{vw(32px)}, 18px);
 
     .price {
-      font-size: clamp(10px, #{vw(36px)}, 12px);
-      padding: 4px clamp(4px, #{vw(36px)}, 8px);
+      font-size: 10px;
+      padding: 4px clamp(4px, #{vw(32px)}, 8px);
     }
 
     .avatarItem_avatar {
       * {
-        width: 36px !important;
-        height: 36px !important;
+        width: 32px !important;
+        height: 32px !important;
       }
     }
 
@@ -224,6 +226,34 @@
       }
     }
   }
+
+  &__1, &__3 {
+    transform: translateY(-5px);
+  }
+
+  &__4, &__8 {
+    transform: translateY(-10px);
+  }
+
+  &__10, &__13 {
+    transform: translateY(-5px);
+  }
+
+  &__9, &__14 {
+    transform: translateY(-20px);
+  }
+
+  &__17, &__20 {
+    transform: translateY(-2px);
+  }
+
+  &__16, &__21 {
+    transform: translateY(-10px);
+  }
+
+  &__15, &__22 {
+    transform: translateY(-32px);
+  }
 }
 
 

src/modules/PublicSale/leaderBoardVisual/AvatarItemTemp/index.tsx

@@ -0,0 +1,45 @@
+import s from './styles.module.scss';
+import React, { forwardRef, useRef } from 'react';
+import { ILeaderBoardPoint } from '@/interfaces/leader-board-point';
+import { PlaceImage } from '@/modules/PublicSale/leaderBoardVisual/AvatarItem';
+
+interface IProps {
+  data: ILeaderBoardPoint,
+  isShowName?: boolean
+  isYou?: boolean
+  onCompleted?: ()=>void
+}
+
+const AvatarItemTemp = forwardRef((props: IProps, ref: any) => {
+  const { data, isShowName, isYou, onCompleted, ...rest } = props;
+  const refInertMoney = useRef<HTMLParagraphElement>(null);
+
+  const renderContent = () => {
+    return (
+      <div className={s.avatarItem_inner}>
+        <div
+          className={s.avatarItem_avatar}
+          // onClick={() => {
+          //   window.open(`https://twitter.com/${data?.twitter_username}`);
+          // }}
+        >
+          <PlaceImage />
+        </div>
+        <div className={s.meta}>
+          <p className={s.price} ref={refInertMoney}>$0</p>
+
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div
+      className={`${s.avatarItem} ${isYou && s.isYou} ${data?.levelRender !== undefined && 'level-' + data?.levelRender} js-avatarItem`}
+      ref={ref} {...rest}>
+      <>{renderContent()}</>
+    </div>
+  );
+});
+
+export default AvatarItemTemp;