From dfe1eb1f32f7b396bee9750caeeddea1d1b8698c Mon Sep 17 00:00:00 2001 From: sett Date: Tue, 30 Jan 2024 08:56:53 +0700 Subject: [PATCH 1/3] tune ui --- public/public-sale/oval-1.svg | 15 +++ public/public-sale/oval-2.svg | 15 +++ public/public-sale/oval-3.svg | 15 +++ public/public-sale/oval-4.svg | 15 +++ public/public-sale/oval-5.svg | 15 +++ .../leaderBoardVisual/AvatarItem/index.tsx | 5 +- .../AvatarItem/styles.module.scss | 92 ++++++++++++------- .../PublicSale/leaderBoardVisual/index.tsx | 9 +- .../leaderBoardVisual/styles.module.scss | 77 +++++++++++++++- src/modules/PublicSale/styles.module.scss | 4 +- 10 files changed, 223 insertions(+), 39 deletions(-) create mode 100644 public/public-sale/oval-1.svg create mode 100644 public/public-sale/oval-2.svg create mode 100644 public/public-sale/oval-3.svg create mode 100644 public/public-sale/oval-4.svg create mode 100644 public/public-sale/oval-5.svg diff --git a/public/public-sale/oval-1.svg b/public/public-sale/oval-1.svg new file mode 100644 index 000000000..f8ad05630 --- /dev/null +++ b/public/public-sale/oval-1.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/public/public-sale/oval-2.svg b/public/public-sale/oval-2.svg new file mode 100644 index 000000000..7272b705a --- /dev/null +++ b/public/public-sale/oval-2.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/public/public-sale/oval-3.svg b/public/public-sale/oval-3.svg new file mode 100644 index 000000000..4f1e2c79a --- /dev/null +++ b/public/public-sale/oval-3.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/public/public-sale/oval-4.svg b/public/public-sale/oval-4.svg new file mode 100644 index 000000000..e1e1664cc --- /dev/null +++ b/public/public-sale/oval-4.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/public/public-sale/oval-5.svg b/public/public-sale/oval-5.svg new file mode 100644 index 000000000..62aed38bf --- /dev/null +++ b/public/public-sale/oval-5.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/modules/PublicSale/leaderBoardVisual/AvatarItem/index.tsx b/src/modules/PublicSale/leaderBoardVisual/AvatarItem/index.tsx index d1fe4122e..a3e17497f 100644 --- a/src/modules/PublicSale/leaderBoardVisual/AvatarItem/index.tsx +++ b/src/modules/PublicSale/leaderBoardVisual/AvatarItem/index.tsx @@ -16,10 +16,11 @@ interface IProps { isShowName?: boolean isYou?: boolean onCompleted?: ()=>void + idx: number } 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(); const refMoney = useRef<{ value: number }>({ value: Number(data?.usdt_value) || 0 }); const refInertMoney = useRef(null); @@ -129,7 +130,7 @@ const AvatarItem = forwardRef((props: IProps, ref: any) => { return (
{ data.levelRender === 0 ? ( diff --git a/src/modules/PublicSale/leaderBoardVisual/AvatarItem/styles.module.scss b/src/modules/PublicSale/leaderBoardVisual/AvatarItem/styles.module.scss index d2514dc47..7cbdb4b3c 100644 --- a/src/modules/PublicSale/leaderBoardVisual/AvatarItem/styles.module.scss +++ b/src/modules/PublicSale/leaderBoardVisual/AvatarItem/styles.module.scss @@ -46,6 +46,8 @@ top: -10px; right: 0; z-index: 1; + width: 40px; + height: 40px; } } @@ -57,7 +59,7 @@ } .name { - font-size: clamp(12px, #{vw(160px)}, 16px); + font-size: 14px; font-weight: 500; line-height: 24px; text-align: center; @@ -65,16 +67,16 @@ 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,21 +123,21 @@ 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; } } } @@ -143,36 +145,36 @@ &: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; } } } @@ -180,17 +182,17 @@ &: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); + } } diff --git a/src/modules/PublicSale/leaderBoardVisual/index.tsx b/src/modules/PublicSale/leaderBoardVisual/index.tsx index ac812a278..ac02e6405 100644 --- a/src/modules/PublicSale/leaderBoardVisual/index.tsx +++ b/src/modules/PublicSale/leaderBoardVisual/index.tsx @@ -109,11 +109,11 @@ const LeaderBoardVisual = (props: IProps) => { let res = await getPublicSaleContributionLatest(); const oldContributors = latestContributors?.current; - const newRes = res.filter( function( el ) { + const newRes = res.filter(function(el) { return oldContributors?.findIndex(a => a.deposit_id === el.deposit_id) < 0; }); - if(newRes?.length > 0) { + if (newRes?.length > 0) { latestContributors.current = [...newRes].concat(latestContributors.current); } animatedLatestContributors.current = newRes || []; @@ -158,9 +158,10 @@ const LeaderBoardVisual = (props: IProps) => { { listRender.map((item, index) => { return <> - + { - item.lastRender && + item.lastRender && + } ; }) diff --git a/src/modules/PublicSale/leaderBoardVisual/styles.module.scss b/src/modules/PublicSale/leaderBoardVisual/styles.module.scss index 736c053f8..9095e6814 100644 --- a/src/modules/PublicSale/leaderBoardVisual/styles.module.scss +++ b/src/modules/PublicSale/leaderBoardVisual/styles.module.scss @@ -44,7 +44,7 @@ justify-content: center; flex-wrap: wrap; align-content: flex-start; - padding-top: 30px; + padding-top: vh(60px); } table { @@ -348,6 +348,81 @@ table { .lastRender { display: block; flex: 0 0 100%; + position: relative; + pointer-events: none; + + &.lastRender__0 { + + &:after { + content: ''; + display: block; + height: 78px; + width: 321px; + left: 50%; + bottom: 78px; + transform: translateX(-50%); + position: absolute; + background: url("/public-sale/oval-1.svg"); + } + } + &.lastRender__1 { + + + &:after { + content: ''; + display: block; + height: 107px; + width: 510px; + left: 50%; + bottom: 70px; + transform: translateX(-50%); + position: absolute; + background: url("/public-sale/oval-2.svg"); + } + } + &.lastRender__2 { + + &:after { + content: ''; + display: block; + height: 107px; + width: 672px; + left: 50%; + bottom: 56px; + transform: translateX(-50%); + position: absolute; + background: url("/public-sale/oval-3.svg"); + } + } + + &.lastRender__3 { + + &:after { + content: ''; + display: block; + height: 138px; + width: 812px; + left: 50%; + bottom: 78px; + transform: translateX(-50%); + position: absolute; + background: url("/public-sale/oval-4.svg"); + } + } + &.lastRender__4 { + + &:after { + content: ''; + display: block; + height: 157px; + width: 976px; + left: 50%; + bottom: 60px; + transform: translateX(-50%); + position: absolute; + background: url("/public-sale/oval-5.svg"); + } + } } .emptyArray { diff --git a/src/modules/PublicSale/styles.module.scss b/src/modules/PublicSale/styles.module.scss index 0e7bff348..66d2b2458 100644 --- a/src/modules/PublicSale/styles.module.scss +++ b/src/modules/PublicSale/styles.module.scss @@ -11,5 +11,7 @@ .contentTop{ background-color: #000000; - padding-bottom: 50px; + padding-bottom: 80px; + padding-top: vh(10px); + min-height: 100vh; } From 8aae344a591acd89afde635f94e02db301650685 Mon Sep 17 00:00:00 2001 From: 0xmegalodon Date: Tue, 30 Jan 2024 08:58:49 +0700 Subject: [PATCH 2/3] update css --- .../leaderBoardVisual/AvatarItem/index.tsx | 23 +- .../AvatarItemTemp/index.tsx | 45 ++++ .../AvatarItemTemp/styles.module.scss | 229 ++++++++++++++++++ .../PublicSale/leaderBoardVisual/index.tsx | 14 +- 4 files changed, 298 insertions(+), 13 deletions(-) create mode 100644 src/modules/PublicSale/leaderBoardVisual/AvatarItemTemp/index.tsx create mode 100644 src/modules/PublicSale/leaderBoardVisual/AvatarItemTemp/styles.module.scss diff --git a/src/modules/PublicSale/leaderBoardVisual/AvatarItem/index.tsx b/src/modules/PublicSale/leaderBoardVisual/AvatarItem/index.tsx index d1fe4122e..1ebd77292 100644 --- a/src/modules/PublicSale/leaderBoardVisual/AvatarItem/index.tsx +++ b/src/modules/PublicSale/leaderBoardVisual/AvatarItem/index.tsx @@ -18,6 +18,13 @@ interface IProps { onCompleted?: ()=>void } +export const PlaceImage = (): ReactElement => { + return {'user'}; +}; + const AvatarItem = forwardRef((props: IProps, ref: any) => { const { data, isShowName, isYou, onCompleted, ...rest } = props; const lottieRef = useRef(); @@ -30,7 +37,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 +87,15 @@ const AvatarItem = forwardRef((props: IProps, ref: any) => { }, [newTotalMoney]); const [error, setError] = useState(false); - const PlaceImage = (): ReactElement => { - return {'user'}; - }; const renderContent = () => { return (
{ - data.levelRender === 0 && {'king'} + data?.levelRender === 0 && {'king'} } { - isShowName && data.levelRender === 0 && !isYou &&

{data.twitter_username}

+ isShowName && data?.levelRender === 0 && !isYou &&

{data?.twitter_username}

} { isYou &&

You

@@ -129,10 +130,10 @@ const AvatarItem = forwardRef((props: IProps, ref: any) => { return (
{ - data.levelRender === 0 ? ( + data?.levelRender === 0 ? ( void +} + +const AvatarItemTemp = forwardRef((props: IProps, ref: any) => { + const { data, isShowName, isYou, onCompleted, ...rest } = props; + const refInertMoney = useRef(null); + + const renderContent = () => { + return ( +
+
{ + // window.open(`https://twitter.com/${data?.twitter_username}`); + // }} + > + +
+
+

$0

+ +
+
+ ) + } + + return ( +
+ <>{renderContent()} +
+ ); +}); + +export default AvatarItemTemp; diff --git a/src/modules/PublicSale/leaderBoardVisual/AvatarItemTemp/styles.module.scss b/src/modules/PublicSale/leaderBoardVisual/AvatarItemTemp/styles.module.scss new file mode 100644 index 000000000..d2514dc47 --- /dev/null +++ b/src/modules/PublicSale/leaderBoardVisual/AvatarItemTemp/styles.module.scss @@ -0,0 +1,229 @@ +.avatarItem { + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 calc(100% / 13); + margin-bottom: 36px; + margin-left: 14px; + margin-right: 14px; + position: relative; + + .lt { + position: absolute; + top: 0; + bottom: 0; + opacity: 0; + transition: opacity .4s ease-out; + width: 100%; + height: 100%; + pointer-events: none; + + &.isRun { + opacity: 1; + } + } + + .lottie { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + aspect-ratio: 1/1; + + svg { + object-fit: contain; + width: 100%; + height: 100%; + } + } + + &_inner { + position: relative; + + .king { + position: absolute; + top: -10px; + right: 0; + z-index: 1; + } + } + + .meta { + position: absolute; + left: 50%; + bottom: -8px; + transform: translateX(-50%); + } + + .name { + font-size: clamp(12px, #{vw(160px)}, 16px); + font-weight: 500; + line-height: 24px; + text-align: center; + white-space: nowrap; + position: absolute; + bottom: calc(100% + 10px); + width: 100%; + @include fixTextLargeLen(150px); + } + + .price { + font-size: clamp(10px, #{vw(38px)}, 14px); + background: white; + border-radius: 100px; + font-weight: 500; + color: #000; + padding: 5px 15px; + line-height: 1.4; + text-align: center; + width: fit-content; + margin-left: auto; + margin-right: auto; + } + + .title { + display: none; + } + + &_avatar { + border-radius: 50%; + box-shadow: 0px 0px 40px -6px #0000001F; + border: 6px solid #fff; + width: fit-content; + height: fit-content; + aspect-ratio: 1/1; + overflow: hidden; + position: relative; + + &:after { + content: ''; + display: block; + width: 100%; + height: 100%; + background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 45.22%, rgba(0, 0, 0, 0.07) 51.83%, rgba(0, 0, 0, 0.56) 95.21%); + position: absolute; + top: 0; + left: 0; + } + + * { + width: 32px !important; + height: 32px !important; + max-width: none !important; + } + + } + + + &:global(.level-0) { + margin-bottom: 48px; + margin-top: 24px; + + .price { + font-size: clamp(14px, #{vw(140px)}, 16px); + background: linear-gradient(180deg, #FF9776 0%, #FF8139 32.81%, #E04300 100%); + color: white; + margin-bottom: 5px; + padding: 6px clamp(16px, #{vw(140px)}, 20px); + } + + .name { + font-size: clamp(14px, #{vw(140px)}, 16px); + } + + .avatarItem_avatar { + * { + width: 140px !important; + height: 140px !important; + } + } + } + + &:global(.level-1) { + margin-bottom: 48px; + + margin-left: clamp(14px, #{vw(88px)}, 19px); + margin-right: clamp(14px, #{vw(88px)}, 19px); + + .price { + font-size: clamp(12px, #{vw(88px)}, 14px); + background: linear-gradient(90deg, #00F5A0 0%, #00D9F5 100%); + } + + + .avatarItem_avatar { + * { + width: 88px !important; + height: 88px !important; + } + } + } + + &:global(.level-2) { + margin-bottom: 40px; + margin-left: clamp(14px, #{vw(60px)}, 20px); + margin-right: clamp(14px, #{vw(60px)}, 20px); + + .price { + font-size: clamp(12px, #{vw(60px)}, 14px); + } + + .avatarItem_avatar { + * { + width: 60px !important; + height: 60px !important; + } + } + } + + &:global(.level-3) { + + margin-bottom: 60px; + margin-left: clamp(14px, #{vw(60px)}, 20px); + margin-right: clamp(14px, #{vw(60px)}, 20px); + + .price { + font-size: clamp(12px, #{vw(60px)}, 14px); + } + + .avatarItem_avatar { + * { + width: 60px !important; + height: 60px !important; + } + } + + &.isYou { + .price { + background: linear-gradient(90deg, #00F5A0 0%, #00D9F5 100%); + } + } + } + + &:global(.level-4) { + margin-bottom: 48px; + margin-left: clamp(12px, #{vw(36px)}, 18px); + margin-right: clamp(12px, #{vw(36px)}, 18px); + + .price { + font-size: clamp(10px, #{vw(36px)}, 12px); + padding: 4px clamp(4px, #{vw(36px)}, 8px); + } + + .avatarItem_avatar { + * { + width: 36px !important; + height: 36px !important; + } + } + + &.isYou { + .price { + background: linear-gradient(90deg, #00F5A0 0%, #00D9F5 100%); + } + } + } +} + + diff --git a/src/modules/PublicSale/leaderBoardVisual/index.tsx b/src/modules/PublicSale/leaderBoardVisual/index.tsx index cbf60e4b3..f7e181dab 100644 --- a/src/modules/PublicSale/leaderBoardVisual/index.tsx +++ b/src/modules/PublicSale/leaderBoardVisual/index.tsx @@ -14,6 +14,7 @@ import AnimatedText from '@/modules/PublicSale/leaderBoardVisual/FloatTexts'; import { useSelector } from 'react-redux'; import { LEADER_BOARD_MODE } from '@/modules/PublicSale/leaderBoardSwitch'; import { setAnimatedLatestContributors, setNeedCheckDeposit } from '@/stores/states/common/reducer'; +import AvatarItemTemp from '@/modules/PublicSale/leaderBoardVisual/AvatarItemTemp'; export const LEADER_BOARD_ID = 'LEADER_BOARD_ID'; @@ -23,6 +24,7 @@ interface IProps { const LeaderBoardVisual = (props: IProps) => { const { list } = useAppSelector(publicSaleLeaderBoardVisualSelector); const [listRender, setListRender] = useState([]); + const [listMissingRender, setListMissingRender] = useState([]); const needReload = useAppSelector(commonSelector).needReload; const dispatch = useAppDispatch(); const leaderBoardMode = useSelector(commonSelector).leaderBoardMode; @@ -124,6 +126,8 @@ const LeaderBoardVisual = (props: IProps) => { let refLevel = 0; const levels = [1, 3, 5, 6, 8]; + const missingLength = 23 - list.length; + const missingArray = Array.from({ length: missingLength }).map((u, i) => ({})) as unknown as ILeaderBoardPoint[]; const tmsss = list.map((el, index) => { const tmp: ILeaderBoardPoint = { ...el, levelRender: refLevel, lastRender: false }; tmp.levelRender = refLevel; @@ -139,8 +143,9 @@ const LeaderBoardVisual = (props: IProps) => { }); setListRender(tmsss.slice(0, 23).sort((a, b) => { - return a.ranking - b.ranking; + return a?.ranking - b?.ranking; })); + setListMissingRender(missingArray); }, [list]); return ( @@ -158,13 +163,18 @@ const LeaderBoardVisual = (props: IProps) => { { listRender.map((item, index) => { return <> - + { item.lastRender && } ; }) } + { + listMissingRender?.map((item, index) => { + return + }) + }
From 7bf9a5febd02dc79e9b1a758c2b2ea8416ec457d Mon Sep 17 00:00:00 2001 From: camewell <130561684+camewell071@users.noreply.github.com> Date: Tue, 30 Jan 2024 09:13:13 +0700 Subject: [PATCH 3/3] chore: update ui --- src/modules/bvm_v2/Allocation/index.tsx | 47 ++++++++++++------------- src/modules/bvm_v2/index.tsx | 2 +- 2 files changed, 23 insertions(+), 26 deletions(-) diff --git a/src/modules/bvm_v2/Allocation/index.tsx b/src/modules/bvm_v2/Allocation/index.tsx index a49c01bb4..c6d518d6f 100644 --- a/src/modules/bvm_v2/Allocation/index.tsx +++ b/src/modules/bvm_v2/Allocation/index.tsx @@ -2,6 +2,7 @@ import React from 'react'; import s from './Allocation.module.scss'; import { Box, Flex, Image, Text } from '@chakra-ui/react'; import Vesting from '@/modules/bvm_v2/Vesting'; +import BoxContent from '@/layouts/BoxContent'; const ALLOCATION_DATA = [ @@ -37,31 +38,27 @@ const Allocation = () => { The total supply of BVM is permanently fixed at 100M tokens. - - - {'Allocation - - - {/**/} - - + + + + + {'Allocation + + + + + + diff --git a/src/modules/bvm_v2/index.tsx b/src/modules/bvm_v2/index.tsx index 445425842..42aea3378 100644 --- a/src/modules/bvm_v2/index.tsx +++ b/src/modules/bvm_v2/index.tsx @@ -19,10 +19,10 @@ const BVMModule = () => { - {/**/} {/**/} + ); };