Merge pull request #143 from TrustlessComputer/feat/whitelist_munual

Feat/whitelist munual
TrustlessComputer · Jan 30, 2024 · 0bb7beb · 0bb7beb
2 parents 22c7b6b + 1b5cc83
commit 0bb7beb
Show file tree

Hide file tree

Showing 7 changed files with 117 additions and 90 deletions.
diff --git a/src/modules/PublicSale/BuyForm/index.tsx b/src/modules/PublicSale/BuyForm/index.tsx
@@ -136,7 +136,8 @@ const PrivateSaleForm = ({ vcInfo }: { vcInfo?: VCInfo }) => {
     const { className, ...rest } = props;
     return (
       <div>
-        <Flex className={s.tValue} gap={'5px'} alignItems={'center'} ref={ref} {...rest} cursor={token ? "pointer" : 'auto'}>
+        <Flex className={s.tValue} gap={'5px'} alignItems={'center'} ref={ref} {...rest}
+              cursor={token ? 'pointer' : 'auto'}>
           <Text fontSize={20} lineHeight={1} fontWeight={400} color={'#000'}>
             {token
               ? `$${formatCurrency(
@@ -146,7 +147,7 @@ const PrivateSaleForm = ({ vcInfo }: { vcInfo?: VCInfo }) => {
                 'BTC',
                 true,
               )}`
-              : '-'}
+              : '$0'}
           </Text>
           {/*<Text color={'rgba(255, 255, 255, 0.7)'} fontSize={'12px'} fontWeight={'500'}>*/}
           {/*  {token*/}
@@ -174,42 +175,50 @@ const PrivateSaleForm = ({ vcInfo }: { vcInfo?: VCInfo }) => {
           {/*    : '-'}{' '}*/}
           {/*  BVM*/}
           {/*</Text>*/}
-          <Flex
-            gap={'2px'}
-            alignItems={'center'}
-            bg={'linear-gradient(90deg, rgba(0, 245, 160, 0.15) 0%, rgba(0, 217, 245, 0.15) 100%)'}
-            borderRadius={'100px'}
-            p={'4px 8px'}
-          >
-            {/* <svg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'>
-              <path d='M13.3334 7.04474H8.96978L9.93947 1.22656L2.66675 9.95383H7.03038L6.06069 15.772L13.3334 7.04474Z'
+
+          {
+            Boolean(userContributeInfo?.view_boost) &&
+            (
+              <Flex
+                gap={'2px'}
+                alignItems={'center'}
+                bg={'linear-gradient(90deg, rgba(0, 245, 160, 0.15) 0%, rgba(0, 217, 245, 0.15) 100%)'}
+                borderRadius={'100px'}
+                p={'4px 8px'}
+              >
+                <svg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'>
+                  <path
+                    d='M13.3334 7.04474H8.96978L9.93947 1.22656L2.66675 9.95383H7.03038L6.06069 15.772L13.3334 7.04474Z'
                     fill='url(#paint0_linear_30263_14863)' />
-              <defs>
-                <linearGradient id='paint0_linear_30263_14863' x1='2.66675' y1='8.49929' x2='13.3334' y2='8.49929'
-                                gradientUnits='userSpaceOnUse'>
-                  <stop stop-color='#007659' />
-                  <stop offset='1' stop-color='#35CCA6' />
-                </linearGradient>
-              </defs>
-            </svg> */}
+                  <defs>
+                    <linearGradient id='paint0_linear_30263_14863' x1='2.66675' y1='8.49929' x2='13.3334' y2='8.49929'
+                                    gradientUnits='userSpaceOnUse'>
+                      <stop stop-color='#007659' />
+                      <stop offset='1' stop-color='#35CCA6' />
+                    </linearGradient>
+                  </defs>
+                </svg>
+
+                <Text
+                  fontSize={'14'}
+                  fontWeight={'500'}
+                  className={s.boost}
+                  color={'#000'}
+                >
+                  {token
+                    ? `${formatCurrency(
+                      userContributeInfo?.view_boost,
+                      MIN_DECIMAL,
+                      MIN_DECIMAL,
+                      'BTC',
+                      true,
+                    )}%`
+                    : '-'}
+                </Text>
+              </Flex>
+            )
+          }
 
-            <Text
-              fontSize={'14'}
-              fontWeight={'500'}
-              className={s.boost}
-              color={'#000'}
-            >
-              {token
-                ? `+${formatCurrency(
-                  userContributeInfo?.view_boost,
-                  MIN_DECIMAL,
-                  MIN_DECIMAL,
-                  'BTC',
-                  true,
-                )}% boost`
-                : '-'}
-            </Text>
-          </Flex>
         </Flex>
         <Text
           className={s.tLabel}
@@ -228,25 +237,21 @@ const PrivateSaleForm = ({ vcInfo }: { vcInfo?: VCInfo }) => {
             Total
           </Text>
           <Text className={s.fundValue}>
-            <NumberScale label={'$'} couters={Number(contributeInfo?.total_usdt_value)} maximumFractionDigits={0} minimumFractionDigits={0} />
+            <NumberScale label={'$'} couters={Number(contributeInfo?.total_usdt_value)} maximumFractionDigits={0}
+                         minimumFractionDigits={0} />
           </Text>
           <Box mt={'24px'} />
           <div className={s.grid}>
-            <div>
-              <div className={s.backer}  onClick={() => setShowContributorModal(true)}>
+            <div className={s.grid_item}>
+              <div className={s.backer} onClick={() => setShowContributorModal(true)}>
                 <Text className={s.tValue} fontSize={20} lineHeight={1} fontWeight={400} color={'#000'}
                       _hover={{
-                        color: "#FA4E0E",
+                        color: '#FA4E0E',
                       }}>
 
-                  <NumberScale label={''} couters={Number(contributeInfo?.total_user)} maximumFractionDigits={0} minimumFractionDigits={0} />
-                  {/*{formatCurrency(*/}
-                  {/*  contributeInfo?.total_user,*/}
-                  {/*  0,*/}
-                  {/*  0,*/}
-                  {/*  'BTC',*/}
-                  {/*  true,*/}
-                  {/*)}*/}
+                  <NumberScale label={''} couters={Number(contributeInfo?.total_user)} maximumFractionDigits={0}
+                               minimumFractionDigits={0} />
+
                 </Text>
                 <Text
                   className={s.tLabel}
@@ -255,7 +260,7 @@ const PrivateSaleForm = ({ vcInfo }: { vcInfo?: VCInfo }) => {
                 </Text>
               </div>
             </div>
-            <div>
+            <div className={s.grid_item}>
               {
                 remainDay === 0 ? (
                   <Countdown
@@ -268,31 +273,34 @@ const PrivateSaleForm = ({ vcInfo }: { vcInfo?: VCInfo }) => {
                   />
                 ) : (
                   <div>
-                    <Text className={s.tValue} fontSize={20} lineHeight={1} fontWeight={400} color={'rgba(0,0,0,1)'}> {remainDay} </Text> <Text
+                    <Text className={s.tValue} fontSize={20} lineHeight={1} fontWeight={400}
+                          color={'rgba(0,0,0,1)'}> {remainDay} </Text> <Text
                     fontSize={20} lineHeight={1} fontWeight={400}
                     className={s.tLabel}
                     color={'rgba(0,0,0,0.7)'}> Day{remainDay !== 1 && 's'} to go</Text>
                   </div>
                 )
               }
             </div>
-            {token ? (
-              <Tooltip
-                minW='220px'
-                bg='white'
-                boxShadow='0px 0px 24px -6px #0000001F'
-                borderRadius='4px'
-                padding='16px'
-                hasArrow
-                label={<ContributorInfo data={userContributeInfo} />}
-              >
-                <ContributorBlock
-                  className={cx(s.contributorBlock, s.blockItem)}
-                />
-              </Tooltip>
-            ) : (
-              <ContributorBlock className={s.blockItem} />
-            )}
+            <div className={s.grid_item}>
+              {token ? (
+                <Tooltip
+                  minW='220px'
+                  bg='white'
+                  boxShadow='0px 0px 24px -6px #0000001F'
+                  borderRadius='4px'
+                  padding='16px'
+                  hasArrow
+                  label={<ContributorInfo data={userContributeInfo} />}
+                >
+                  <ContributorBlock
+                    className={cx(s.contributorBlock, s.blockItem)}
+                  />
+                </Tooltip>
+              ) : (
+                <ContributorBlock className={s.blockItem} />
+              )}
+            </div>
           </div>
 
           <Box mt={'32px'} />

diff --git a/src/modules/PublicSale/BuyForm/styles.module.scss b/src/modules/PublicSale/BuyForm/styles.module.scss
@@ -11,7 +11,7 @@
   margin-bottom: 24px;
 
   @include is-mobile {
-    padding: 16px;
+    padding: 14px;
   }
 
   .title {
@@ -205,6 +205,18 @@
 .grid {
   display: flex;
   gap: 68px;
+
+  @include is-mobile {
+    flex-wrap: wrap;
+    gap: 24px;
+  }
+
+  &_item {
+    @include is-mobile {
+      flex: 0 0 auto;
+      width: 100%;
+    }
+  }
 }
 
 .tValue {
@@ -216,7 +228,7 @@
   text-align: left;
 }
 
-.tLabel{
+.tLabel {
   font-size: 14px !important;
   font-weight: 400 !important;
   line-height: 14px !important;

diff --git a/src/modules/PublicSale/aboveTheFold/index.tsx b/src/modules/PublicSale/aboveTheFold/index.tsx
@@ -13,11 +13,13 @@ import Activities from '@/modules/PublicSale/activities';
 import LeaderBoardSwitch from '@/modules/PublicSale/leaderBoardSwitch';
 import RewardButton from '../rewardButton';
 import cs from 'classnames'
+import useWindowSize from '@/hooks/useWindowSize';
 
 const AboveTheFold = () => {
   const { setPlay } = useAnimationStore();
   const vcType = LocalStorageUtil.get(KEY_VC_TYPE);
   const [vcInfo, setVCInfo] = useState<VCInfo>();
+  const {mobileScreen} = useWindowSize();
 
   useEffect(() => {
     setTimeout(setPlay, 400);
@@ -43,12 +45,13 @@ const AboveTheFold = () => {
           <RaffleButton className={s.raffleButton}/>
           <RewardButton className={cs(s.raffleButton, s.rewardButton)}/>
           <LeaderBoardSwitch classNames={s.boardSwitch} />
+          {mobileScreen && <Activities />}
         </Flex>
         <Flex className={s.rightSection} direction={"column"}>
           <BuyForm vcInfo={vcInfo}/>
           {/*<Welcome />*/}
           {/*<Playgame />*/}
-          <Activities />
+          {!mobileScreen && <Activities />}
         </Flex>
       </SimpleGrid>
     </Flex>

diff --git a/src/modules/PublicSale/aboveTheFold/styles.module.scss b/src/modules/PublicSale/aboveTheFold/styles.module.scss
@@ -10,6 +10,10 @@
 
   .content {
     width: 100%;
+    @include is-mobile {
+      display: flex;
+      flex-direction: column-reverse;
+    }
   }
 
   .leftSection {
@@ -84,7 +88,7 @@
     }
 
     @include is-mobile {
-      top: 280px;
+      left: 16px;
     }
   }
 
@@ -93,9 +97,8 @@
     top: 24px;
     right: 24px;
     width: fit-content;
-
     @include is-mobile {
-      top: 280px;
+      right: 16px;
     }
   }
 }
diff --git a/src/modules/PublicSale/activities/styles.module.scss b/src/modules/PublicSale/activities/styles.module.scss
@@ -2,7 +2,10 @@
   overflow-y: auto;
   -ms-overflow-style: none; /* Internet Explorer 10+ */
   scrollbar-width: none; /* Firefox */
-  height: 520px;
+
+  @include is-pc{
+    height: 520px;
+  }
 
   &::-webkit-scrollbar {
     display: none; /* Safari and Chrome */

diff --git a/src/modules/PublicSale/raffleButton/index.tsx b/src/modules/PublicSale/raffleButton/index.tsx
@@ -35,12 +35,7 @@ const RaffleButton = ({className}: any) => {
 
   const handleShareTw = () => {
     if(token) {
-      const shareUrl = getLink(user?.referral_code || '');
-
-      const content = `Welcome to the future of Bitcoin with @BVMnetwork\n\nBitcoin Virtual Machine is the first modular blockchain metaprotocol that lets you launch your Bitcoin L2 blockchain protocol in a few clicks\n\n$BVM public sale starting soon\n\nJoin the allowlist`;
-      const url = `https://twitter.com/intent/tweet?url=${shareUrl}&text=${encodeURIComponent(
-        content,
-      )}`;
+      const url = `https://twitter.com/BVMnetwork/status/1752174033100226567`;
 
       window.open(url, '_blank');
       joinRafflePrograme(programeInfo?.id as number);
@@ -110,7 +105,7 @@ const RaffleButton = ({className}: any) => {
                     </Flex>
                   ) : (
                     <Flex className={cx(s.learnMoreWrapper, !token ? s.isDisable : '')} gap={3} onClick={handleShareTw} cursor="pointer">
-                      <Text>Get raffle code</Text>
+                      <Text>Like and repost to join</Text>
                       <Center w={"28px"} height={"28px"} bgColor={"#FA4E0E"}>
                         <svg width="30" height="29" viewBox="0 0 30 29" fill="none" xmlns="http://www.w3.org/2000/svg">
                           <path d="M13.1144 12.1642C13.0305 12.1672 12.9469 12.1532 12.8685 12.1232C12.7901 12.0931 12.7186 12.0476 12.6582 11.9893C12.5978 11.931 12.5498 11.8611 12.517 11.7839C12.4842 11.7066 12.4673 11.6236 12.4673 11.5396C12.4673 11.4557 12.4842 11.3726 12.517 11.2954C12.5498 11.2181 12.5978 11.1483 12.6582 11.09C12.7186 11.0317 12.7901 10.9861 12.8685 10.9561C12.9469 10.926 13.0305 10.9121 13.1144 10.915L17.8284 10.915C17.994 10.9151 18.1528 10.981 18.2699 11.0981C18.3871 11.2152 18.4529 11.374 18.453 11.5396L18.453 16.2537C18.456 16.3376 18.442 16.4212 18.4119 16.4995C18.3819 16.5779 18.3364 16.6494 18.2781 16.7098C18.2198 16.7702 18.1499 16.8182 18.0727 16.851C17.9954 16.8838 17.9123 16.9007 17.8284 16.9007C17.7445 16.9007 17.6614 16.8838 17.5841 16.851C17.5069 16.8182 17.437 16.7702 17.3787 16.7098C17.3204 16.6494 17.2749 16.5779 17.2448 16.4995C17.2148 16.4212 17.2008 16.3376 17.2038 16.2537L17.2038 13.0481L11.4939 18.758C11.3767 18.8752 11.2177 18.9411 11.052 18.9411C10.8862 18.9411 10.7272 18.8752 10.61 18.758C10.4928 18.6408 10.427 18.4818 10.427 18.3161C10.427 18.1503 10.4928 17.9913 10.61 17.8741L16.3199 12.1642L13.1144 12.1642Z" fill="white"/>

diff --git a/src/modules/PublicSale/topContent/styles.module.scss b/src/modules/PublicSale/topContent/styles.module.scss
@@ -1,11 +1,15 @@
 .container {
   text-align: center;
-  padding-top: calc(76px + 48px);
-  // background-color: #0E0E0E;
+
   margin-bottom: 32px;
+  padding-top: 120px;
+
+  @include is-min-table {
+    padding-top: calc(76px + 48px);
+  }
 
   .content {
-    width: 810px;
+    max-width: 810px;
     margin-right: auto;
     margin-left: auto;
   }
@@ -79,15 +83,14 @@
     }
   }
 
-  @include is-mobile {
-    padding: 16px 16px;
 
-    .title {
-      font-size: 20px;
+  @include is-mobile {
+    .title{
+      font-size: 32px;
     }
-
     .desc {
-      font-size: 14px;
+      font-size: 13px;
+      line-height: 1.4;
     }
   }
 }