Merge branch 'feat/allowlist' into develop

TrustlessComputer · Jan 16, 2024 · 9adbcd1 · 9adbcd1
2 parents 4c7f9c6 + cccccba
commit 9adbcd1
Show file tree

Hide file tree

Showing 7 changed files with 131 additions and 34 deletions.
diff --git a/src/interfaces/leader-board-point.ts b/src/interfaces/leader-board-point.ts
@@ -19,4 +19,5 @@ export interface ILeaderBoardPoint {
   num_like:         string;
   num_quote:        string;
   num_post:         string;
+  refer_point:      string;
 }
diff --git a/src/modules/Whitelist/leaderBoard/index.tsx b/src/modules/Whitelist/leaderBoard/index.tsx
@@ -17,6 +17,7 @@ import cs from 'clsx';
 import { useAppSelector } from '@/stores/hooks';
 import { commonSelector } from '@/stores/states/common/selector';
 import BigNumber from 'bignumber.js';
+import SvgInset from '@/components/SvgInset';
 
 const valueToClassName: any = {
   '10': 'boost_10',
@@ -286,7 +287,7 @@ const LeaderBoard = () => {
                 </Text>
                 {data.need_active ?
                   <Tooltip
-                    minW="220px"
+                    minW="180px"
                     bg="white"
                     boxShadow="rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;"
                     borderRadius="4px"
@@ -301,7 +302,9 @@ const LeaderBoard = () => {
                       </Flex>
                     }
                   >
-                    <img className={styles.tooltipIcon} src={`${CDN_URL_ICONS}/info-circle.svg`}/>
+                    <div>
+                      <SvgInset size={18} className={styles.tooltipIconActive} svgUrl={`${CDN_URL_ICONS}/info-circle.svg`}/>
+                    </div>
                   </Tooltip>
                 : <Box w="16px" />}
               </Flex>
@@ -396,6 +399,60 @@ const LeaderBoard = () => {
           );
         },
       },
+      {
+        id: 'refer',
+        label: (
+          <Flex
+            style={{
+              justifyContent: 'center',
+              alignSelf: 'center',
+              width: '100%',
+              textTransform: 'uppercase',
+            }}
+            gap="3px"
+          >
+            <p style={{ textTransform:'uppercase' }}>REFER</p>
+            <Tooltip
+              minW="220px"
+              bg="white"
+              boxShadow="rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;"
+              borderRadius="4px"
+              padding="8px"
+              label={
+                <Flex direction="column" color="black" opacity={0.7}>
+                  <p>Gas spent is calculated from total gas fees paid on Bitcoin.</p>
+                </Flex>
+              }
+            >
+              <img className={styles.tooltipIcon} src={`${CDN_URL_ICONS}/info-circle.svg`}/>
+            </Tooltip>
+          </Flex>
+        ),
+        labelConfig,
+        config: {
+          borderBottom: 'none',
+          fontSize: '16px',
+          fontWeight: 500,
+          verticalAlign: 'middle',
+          letterSpacing: '-0.5px',
+        },
+        render(data: ILeaderBoardPoint) {
+          return (
+            <Flex
+              gap={3}
+              alignItems={'center'}
+              width={'100%'}
+              justifyContent={'center'}
+            >
+              <Flex alignItems={'center'} gap={2}>
+                <Text className={styles.title}>
+                  {formatCurrency(data?.refer_point, 0, 0)}
+                </Text>
+              </Flex>
+            </Flex>
+          );
+        },
+      },
       {
         id: 'point',
         label: (

diff --git a/src/modules/Whitelist/leaderBoard/styles.module.scss b/src/modules/Whitelist/leaderBoard/styles.module.scss
@@ -46,6 +46,10 @@ table {
         tr {
           height: 62px;
         }
+        th {
+          margin-right: 8px !important;
+          background-color: red !important;
+        }
       }
       .isActiveRow {
         background-color: #007659 !important;
@@ -94,8 +98,9 @@ table {
 
     tbody {
       tr {
-        td {
-          max-width: 90vw;
+        td, th {
+          //max-width: 90vw;
+          min-width: 120px;
         }
       }
     }
@@ -230,6 +235,15 @@ table {
   opacity: 0.7;
 }
 
+.tooltipIconActive {
+  cursor: pointer;
+  svg {
+    path {
+      fill: white;
+    }
+  }
+}
+
 .timeLine {
   display: flex;
   justify-content: center;

diff --git a/src/modules/Whitelist/steps/Step/index.tsx b/src/modules/Whitelist/steps/Step/index.tsx
@@ -18,6 +18,8 @@ export interface IItemCommunity {
   desc: string,
   actionText: string,
   actionHandle: any,
+  actionTextSecond?: string,
+  actionHandleSecond?: any,
   isActive?: boolean,
   isDone?: boolean,
   step: MultiplierStep,
@@ -56,7 +58,7 @@ export default function ItemCommunity({
   return (
     <>
       <div className={cx(s.itemCommunity, isRunning ? '' : s.isDone)}>
-        <Image width={48} height={48} src={`${CDN_URL_ICONS}/${image}`} alt="ic-section" />
+        <Image className={s.itemCommunity__logo} width={48} height={48} src={`${CDN_URL_ICONS}/${image}`} alt="ic-section" />
         <Flex direction="column" gap="8px" flex={1}>
           <Flex justifyContent="space-between" gap="8px">
             <Flex direction="column">
@@ -70,23 +72,41 @@ export default function ItemCommunity({
           </Flex>
           {!!content?.actionText && (
             <Flex direction={"column"}>
-              <Button
-                className={s.itemCommunity__btnCTA}
-                onClick={() => {
-                  if (content?.actionHandle && isRunning && !isLoading) {
-                    content?.actionHandle();
-
-                    if (step === MultiplierStep.authen) {
-                      setTimeout(() => {
-                        setShowManualCheck(true);
-                      }, 3000);
+              <Flex gap="8px" flexWrap="wrap">
+                <Button
+                  className={s.itemCommunity__btnCTA}
+                  onClick={() => {
+                    if (content?.actionHandle && isRunning && !isLoading) {
+                      content?.actionHandle();
+                      if (step === MultiplierStep.authen) {
+                        setTimeout(() => {
+                          setShowManualCheck(true);
+                        }, 3000);
+                      }
                     }
-                  }
-                }}
-                isLoading={isLoading}
-              >
-                {content?.actionText}
-              </Button>
+                  }}
+                  isLoading={isLoading}
+                >
+                  {content?.actionText}
+                </Button>
+                {!!content.actionHandleSecond && (
+                  <Button
+                    className={s.itemCommunity__btnCTA}
+                    onClick={() => {
+                      if (content?.actionHandleSecond && isRunning && !isLoading) {
+                        content?.actionHandleSecond();
+                        if (step === MultiplierStep.authen) {
+                          setTimeout(() => {
+                            setShowManualCheck(true);
+                          }, 3000);
+                        }
+                      }
+                    }}
+                  >
+                    {content?.actionTextSecond}
+                  </Button>
+                )}
+              </Flex>
               {
                 step === MultiplierStep.authen && showManualCheck && (
                   <Text

diff --git a/src/modules/Whitelist/steps/Step/styles.module.scss b/src/modules/Whitelist/steps/Step/styles.module.scss
@@ -55,6 +55,17 @@
     gap: 8px !important;
     background: #FA4E0E !important;
     border-radius: 0 !important;
+    &__logo {
+      @include is-mobile {
+        width: 100% !important;
+        flex: 1;
+      }
+    }
+  }
+  &__logo {
+    @include is-mobile {
+      display: none;
+    }
   }
 }
 

diff --git a/src/modules/Whitelist/steps/index.tsx b/src/modules/Whitelist/steps/index.tsx
@@ -53,10 +53,10 @@ const Steps = () => {
   }
 
   const handleShareTwMore = async () => {
-    const shareUrl = getLink('');
+    const shareUrl = getLink(user?.referral_code);
     let content = '';
 
-    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:`;
+    content = `Welcome to the future of Bitcoin with bvm.network\n\nLaunch your Bitcoin L2 blockchain easily with @bvmnetwork - first modular blockchain meta-protocol.\n\n$BVM public sale starting soon.\n\nJoin the allowlist:`;
 
     window.open(
       `https://twitter.com/intent/tweet?url=${shareUrl}&text=${encodeURIComponent(
@@ -134,6 +134,8 @@ const Steps = () => {
           desc: 'Help us spread the mission of building the future of Bitcoin. Help us spread the mission of building the future of Bitcoin.',
           actionText: 'Copy link',
           actionHandle: handleShareRefferal,
+          actionTextSecond: 'Post',
+          actionHandleSecond: handleShareTwMore,
           isActive: !!token && !!user?.referral_code,
           step: MultiplierStep.post,
           image: "ic-x.svg",
@@ -184,14 +186,6 @@ const Steps = () => {
         secretCode={authenCode?.secret_code}
         onSuccess={onVerifyTwSuccess}
       />
-      <VerifyTwModal
-        isShow={showManualCheck}
-        onHide={() => {
-          setShowManualCheck(false);
-        }}
-        secretCode={authenCode?.secret_code}
-        onSuccess={onVerifyTwSuccess}
-      />
     </Flex>
   );
 };

diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts
@@ -20,7 +20,7 @@ export const getLink = (referralCode?: string) => {
   return `${window.location.origin}${referral}`;
 };
 
-const REFERRAL_TEXT = 'referral'
+const REFERRAL_TEXT = 'refer'
 
 export const shareReferralURL = (code: string) => {
   if (APP_ENV === 'production') {
@@ -63,11 +63,11 @@ export const getReferralSearchURL = (referralCode?: string) => {
   if (!game_url && !referralCode) {
     return '';
   } else if (game_url && referralCode) {
-    return `?referral=${referralCode}&${game_url}`;
+    return `?${REFERRAL_TEXT}=${referralCode}&${game_url}`;
   } else if (game_url && !referralCode) {
     return `?${game_url}`;
   } else if (referralCode && !game_url) {
-    return `?referral=${referralCode}`;
+    return `?${REFERRAL_TEXT}=${referralCode}`;
   } else {
     return '';
   }