Merge branch 'feat/optimism' into develop

TrustlessComputer · Jan 22, 2024 · cb33731 · cb33731
2 parents 04a8b9e + fa4cdae
commit cb33731
Show file tree

Hide file tree

Showing 10 changed files with 82 additions and 41 deletions.
diff --git a/src/modules/Whitelist/AllowEVMMessage/useFormatAllowEVM.ts b/src/modules/Whitelist/AllowEVMMessage/useFormatAllowEVM.ts
@@ -29,6 +29,7 @@ const useFormatAllowEVM = ({ type }: IAllowEVMProps) => {
         point: new BigNumber(curr.gas_point || '0').plus(curr.blast_point || '0').plus(prev.point).toNumber(),
         unClaimedPoint: new BigNumber(prev.unClaimedPoint || '0')
           .plus(curr.status === 'unclaimed' ? curr.gas_point || '0' : '0')
+          .plus(curr.status === 'unclaimed' ? curr.blast_point || '0' : '0')
           .toNumber(),
       };
       value = {

diff --git a/src/modules/Whitelist/index.tsx b/src/modules/Whitelist/index.tsx
@@ -26,6 +26,7 @@ const Whitelist = () => {
   useAllowEVM({ type: "allowOptimism" });
   const { count } = useAppSelector(leaderBoardSelector);
   const { height } = useElementHeight({ elementID: HEADER_ID });
+  const [index, setIndex] = React.useState(0)
 
   React.useEffect(() => {
     const element = document.getElementById(CONTAINER_ID);
@@ -71,12 +72,12 @@ const Whitelist = () => {
       <div className={s.tokenSection}>
         <Box w="100%" overflow="hidden">
           <div className={s.countUpDesktop}>{renderCountUp()}</div>
-          <LeaderBoard />
+          <LeaderBoard setIndex={setIndex} />
         </Box>
 
         <div>
           <div className={s.countUpMobile}>{renderCountUp()}</div>
-          <Tabs variant="unstyled">
+          <Tabs variant="unstyled" index={index} onChange={(tabIndex) => setIndex(tabIndex)}>
             <TabList mb="32px" overflow="hidden">
               <Tab>Start here</Tab>
               <Tab>Airdrop 1</Tab>

diff --git a/src/modules/Whitelist/leaderBoard/index.tsx b/src/modules/Whitelist/leaderBoard/index.tsx
@@ -18,8 +18,10 @@ import { useAppDispatch, useAppSelector } from '@/stores/hooks';
 import { commonSelector } from '@/stores/states/common/selector';
 import BigNumber from 'bignumber.js';
 import SvgInset from '@/components/SvgInset';
-import { leaderBoardSelector } from '@/stores/states/user/selector';
+import { leaderBoardSelector, userSelector } from '@/stores/states/user/selector';
 import { setLeaderBoard } from '@/stores/states/user/reducer';
+import copy from 'copy-to-clipboard';
+import { shareReferralURL } from '@/utils/helpers';
 
 const valueToClassName: any = {
   '10': 'boost_10',
@@ -35,7 +37,11 @@ const valueToImage: any = {
 
 export const LEADER_BOARD_ID = 'LEADER_BOARD_ID';
 
-const LeaderBoard = () => {
+interface IProps {
+  setIndex: (_: number) => void
+}
+
+const LeaderBoard = (props: IProps) => {
   const { list } = useAppSelector(leaderBoardSelector);
   const [isFetching, setIsFetching] = useState(true);
   const [refreshing, setRefreshing] = useState(false);
@@ -123,6 +129,19 @@ const LeaderBoard = () => {
     }
   };
 
+  const user = useAppSelector(userSelector);
+  const handleShareRefferal = () => {
+    if (!user?.referral_code) return;
+    copy(shareReferralURL(user?.referral_code || ''));
+    const element = document.getElementById('copy-button');
+    if (element) {
+      element.textContent = 'COPIED';
+      setTimeout(() => {
+        element.textContent = 'GET';
+      }, 2000)
+    }
+  }
+
   const labelConfig = {
     color: 'rgba(1, 1, 0, 0.7)',
     fontSize: '11px',
@@ -352,6 +371,9 @@ const LeaderBoard = () => {
                 <Text className={styles.title}>
                   {formatCurrency(data?.refer_point, 0, 0)}
                 </Text>
+                {data.need_active && !Number(data?.refer_point || '0') && (
+                  <button onClick={handleShareRefferal} className={styles.button}>GET</button>
+                )}
               </Flex>
             </Flex>
           );
@@ -708,13 +730,16 @@ const LeaderBoard = () => {
                 <Text className={styles.title}>
                   {formatCurrency(data?.eco_point, 0, 0)}
                 </Text>
+                {data.need_active && !Number(data?.eco_point || '0') && (
+                  <button onClick={() => props.setIndex(2)} className={styles.button}>GET</button>
+                )}
               </Flex>
             </Flex>
           );
         },
       },
     ];
-  }, []);
+  }, [user?.referral_code]);
 
   // const remainingTime = () => {
   //   const now = dayjs();

diff --git a/src/modules/Whitelist/leaderBoard/styles.module.scss b/src/modules/Whitelist/leaderBoard/styles.module.scss
@@ -119,6 +119,23 @@ table {
       max-width: 85px;
     }
 
+    .button {
+      display: flex;
+      width: 48px !important;
+      height: 24px;
+      padding: 12px;
+      justify-content: center;
+      align-items: center;
+      gap: 8px;
+      border-radius: 4px;
+      background: #FA4E0E;
+      font-size: 10px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 120%;
+      margin-left: 4px;
+    }
+
     .subTitle {
       font-size: 14px;
     }

diff --git a/src/modules/Whitelist/steps/Step/index.tsx b/src/modules/Whitelist/steps/Step/index.tsx
@@ -39,10 +39,10 @@ export interface IItemCommunity {
 }
 
 export default function ItemCommunity({
-  index,
-  content,
-  isLoading,
-}: {
+                                        index,
+                                        content,
+                                        isLoading,
+                                      }: {
   index: number;
   content: IItemCommunity;
   isLoading?: boolean;

diff --git a/src/modules/Whitelist/steps/Step/styles.module.scss b/src/modules/Whitelist/steps/Step/styles.module.scss
@@ -40,6 +40,15 @@
     line-height: 26px;
     white-space: pre;
   }
+  &__pointNoTitle {
+    color: #000;
+    text-align: right;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 26px;
+    white-space: unset !important;
+  }
   &__pointNote {
     color: #000;
     text-align: right;
@@ -53,7 +62,7 @@
   &__btnCTA {
     display: flex;
     width: 100% !important;
-    max-width: 320px !important;
+    max-width: 350px !important;
     height: 48px !important;
     padding: 16px 40px !important;
     justify-content: center !important;

diff --git a/src/modules/Whitelist/steps/index.tsx b/src/modules/Whitelist/steps/index.tsx
@@ -92,13 +92,7 @@ const Steps = () => {
 
   const onShareOptimism = () => {
     const shareUrl = getLink(user?.referral_code || '');
-    const content = `
-    BUILD WHATEVER ON BITCOIN.\n\n
-    As a modular maxi (holding ${formatCurrency(new BigNumber(allowOptimism.amount.fee || '0').toFixed(2, BigNumber.ROUND_FLOOR), 0, 0)} TIA), 
-    I’m so excited to see Modular Blockchains arrive on Bitcoin.\n\n
-    Powered by @BVMnetwork, 
-    you can deploy your own Bitcoin L2 chain with @CelestiaOrg and @Optimism in a few clicks.\n\n
-    🤯🤯🤯\n`;
+    const content = `Two L2 rollups walk into a bar.\n\nBarman: “IDs, please?”\nZK Rollup: “I’m 18, no ID needed”\nOptimistic Rollup: “Wait a week, and I’ll be an adult”\nQ: What is the name of the bar?\nA: #Bitcoin\n\nWelcome to Bitcoin L2s with @BVMnetwork\n\nPS: Thanks @l2beat!`;
 
     window.open(
       `https://twitter.com/intent/tweet?url=${shareUrl}&text=${encodeURIComponent(
@@ -114,7 +108,7 @@ const Steps = () => {
 
   const onSignEVM = async (type: EVMFieldType) => {
     try {
-      const { message, signature, address } = await signEVMMessage('Are you a L2 OG?');
+      const { message, signature, address } = await signEVMMessage('Are you an L2 maxi?');
       await verifyEVMSignature({
         message,
         signature,
@@ -177,8 +171,8 @@ const Steps = () => {
   const DATA_COMMUNITY = useMemo<IItemCommunity[]>(() => {
     const isActiveRefer = !!token && !!user?.referral_code;
     const btcOGMessage = allowBTC.amount.txsCount ?
-        <p>You’re a true Bitcoiner. You’ve spent {<span>{formatCurrency(allowBTC.amount.fee, 0, 6, 'BTC')}</span>} BTC on transaction fees. Your total reward is {<span>{formatCurrency(allowBTC.amount.point, 0)}</span>} pts.</p>:
-        'The more sats you have spent on Bitcoin, the more points you’ll get. Connect your Unisat or Xverse wallet to prove the account ownership.';
+      <p>You’re a true Bitcoiner. You’ve spent {<span>{formatCurrency(allowBTC.amount.fee, 0, 6, 'BTC')}</span>} BTC on transaction fees. Your total reward is {<span>{formatCurrency(allowBTC.amount.point, 0)}</span>} pts.</p>:
+      'The more sats you have spent on Bitcoin, the more points you’ll get. Connect your Unisat or Xverse wallet to prove the account ownership.';
     const isNeedClaimBTCPoint = allowBTC.isUnclaimed;
     const isNeedClaimCelestiaPoint = allowCelestia.isUnclaimed;
     const isNeedClaimOptimismPoint = allowOptimism.isUnclaimed;
@@ -235,9 +229,9 @@ const Steps = () => {
         }
       },
       {
-        title: 'Are you a L2 OG?',
-        desc: 'The more Blast you staked or Optimism you hold, the more points you’ll get. Connect your Metamask wallet to prove the account ownership.',
-        actionText: isNeedClaimOptimismPoint ? `Tweet to claim ${formatCurrency(allowOptimism.amount.unClaimedPoint, 0, 0)} pts` : 'How L2 OG are you?',
+        title: 'Are you an L2 maxi?',
+        desc: 'The more ETH you staked on Blast or the more Optimism (OP) tokens you hold, the more points you’ll get. Connect your MetaMask wallet to prove the account ownership.',
+        actionText: isNeedClaimOptimismPoint ? `Tweet to claim ${formatCurrency(allowOptimism.amount.unClaimedPoint, 0, 0)} pts` : 'How L2 maxi are you?',
         actionHandle: isNeedClaimOptimismPoint ? async () => {
           onShareOptimism();
           await requestClaimEVMPoint({
@@ -256,16 +250,10 @@ const Steps = () => {
         isDone: !!token,
         step: MultiplierStep.evm,
         image: "blast_op.svg",
-        right: [
-          {
-            title: '+100 PTS',
-            desc: 'per 0.005 ETH'
-          },
-          {
-            title: '+25 PTS',
-            desc: 'per OPs'
-          }
-        ]
+        right: {
+          title: '+100 PTS',
+          desc: 'per Ξ 0.005 or 4 OP'
+        }
       },
       {
         title: 'Are you a Modular Blockchain Pioneer?',

diff --git a/src/modules/Whitelist/stepsEco/index.tsx b/src/modules/Whitelist/stepsEco/index.tsx
@@ -94,8 +94,8 @@ const StepsEco = () => {
         },
         isActive: !!token,
         right: {
-          title: '+1 PTS',
-          desc: 'per 25000 SAT',
+          title: '+1000 PTS',
+          desc: 'per 0.001 BTC',
         },
       },
       {

diff --git a/src/services/whitelist.ts b/src/services/whitelist.ts
@@ -127,7 +127,7 @@ const requestClaimEVMPoint = async ({ status, network }: { status: SignatureStat
     try {
       const item = status[i];
       if (item && item.status === 'unclaimed') {
-        await apiClient.post(`/bvm/claim/${item.id}/?network=${network}`);
+        await apiClient.post(`/bvm/verify/claim/${item.id}?network=${network}`);
       }
     } catch (error) {
       // TODO: handle error

diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts
@@ -15,11 +15,11 @@ export const getUuid = (): string => {
 
 export const getLink = (referralCode?: string) => {
   const referral = getReferralSearchURL(referralCode);
-
-  if (APP_ENV === 'production') {
-    return `https://bvm.network${referral}`;
-  }
-  return `${window.location.origin}${referral}`;
+  return `https://bvm.network${referral}`;
+  // if (APP_ENV === 'production') {
+  //   return `https://bvm.network${referral}`;
+  // }
+  // return `${window.location.origin}${referral}`;
 };
 
 const REFERRAL_TEXT = 'refer'