Merge branch 'develop' of github.com:TrustlessComputer/bvm-website in…

…to develop
TrustlessComputer · Jan 29, 2024 · fb6c4b4 · fb6c4b4
2 parents 17c560e + f2f811c
commit fb6c4b4
Show file tree

Hide file tree

Showing 8 changed files with 106 additions and 33 deletions.
diff --git a/src/modules/PublicSale/AuthForBuy/btnCreateGuest.tsx b/src/modules/PublicSale/AuthForBuy/btnCreateGuest.tsx
@@ -8,6 +8,7 @@ import { generateTOkenWithSecretCode } from '@/services/public-sale';
 import AuthenStorage from '@/utils/storage/authen.storage';
 import { setGuestSecretCode } from '@/stores/states/user/reducer';
 import { useDispatch } from 'react-redux';
+import cs from 'classnames';
 
 const BtnCreateGuest = () => {
   const dispatch = useDispatch();
@@ -47,14 +48,18 @@ const BtnCreateGuest = () => {
     <Button
       loadingText={'Processing'}
       type="button"
-      className={s.btnTweetToSign}
+      className={cs(s.btnTweetToSign, s.btnPrimary)}
       onClick={createNewSecretCode}
     >
-      <Center className={s.boxIcon}>
+      <Center className={cs(s.boxIcon, s.boxIconWhite)}>
         {loading ? (
           <Spinner color="#fa4e0e" width={'16px'} height={'16px'} />
         ) : (
-          <SvgInset svgUrl="/icons/ic_guest.svg" size={16} />
+          <SvgInset
+            className={s.iconBlack}
+            svgUrl="/icons/ic_guest.svg"
+            size={16}
+          />
         )}
       </Center>
       <Text>Buy as guest</Text>

diff --git a/src/modules/PublicSale/AuthForBuy/index.tsx b/src/modules/PublicSale/AuthForBuy/index.tsx
@@ -188,13 +188,13 @@ const AuthForBuy: React.FC<IAuthForBuy> = ({ children }) => {
           className={s.btnContainer}
         >
           <SvgInset svgUrl="/icons/ic_twitter.svg" />
-          Buy $BVM
+          Back $BVM
         </Button>
       </Flex>
       <BaseModal
         isShow={isOpen}
         onHide={onClose}
-        title={isSigned ? 'Buy $BVM' : 'Sign to Buy $BVM'}
+        title={isSigned ? 'Back $BVM' : 'Back $BVM'}
         headerClassName={s.modalHeader}
         className={cs(s.modalContent, isSigned ? s.deposit : s.notSignModal)}
         // size={modalSize}
@@ -215,7 +215,35 @@ const AuthForBuy: React.FC<IAuthForBuy> = ({ children }) => {
                   alignItems={'center'}
                   gap={'16px'}
                 >
-                  <Button
+                  <GoogleReCaptchaProvider
+                    reCaptchaKey="6LdrclkpAAAAAD1Xu6EVj_QB3e7SFtMVCKBuHb24"
+                    scriptProps={{
+                      async: false,
+                      defer: false,
+                      appendTo: 'head',
+                      nonce: undefined,
+                    }}
+                  >
+                    <BtnCreateGuest />
+                  </GoogleReCaptchaProvider>
+                  <Flex
+                    alignItems={'center'}
+                    gap={'12px'}
+                    justifyContent={'center'}
+                    width={'100%'}
+                    mt={'5px'}
+                  >
+                    <Text onClick={handleShareTw} className={s.link}>
+                      Post to sign-in
+                    </Text>
+                    <Text fontSize={'12px'} opacity={0.7}>
+                      Or
+                    </Text>
+                    <Text onClick={getTwitterOauthUrl} className={s.link}>
+                      Authorize to sign-in
+                    </Text>
+                  </Flex>
+                  {/* <Button
                     isDisabled={submitting && !isCopy}
                     loadingText={'Processing'}
                     type="button"
@@ -249,18 +277,7 @@ const AuthForBuy: React.FC<IAuthForBuy> = ({ children }) => {
                       />
                     </Center>
                     <Text>Auth to sign</Text>
-                  </Button>
-                  <GoogleReCaptchaProvider
-                    reCaptchaKey="6LdrclkpAAAAAD1Xu6EVj_QB3e7SFtMVCKBuHb24"
-                    scriptProps={{
-                      async: false,
-                      defer: false,
-                      appendTo: 'head',
-                      nonce: undefined,
-                    }}
-                  >
-                    <BtnCreateGuest />
-                  </GoogleReCaptchaProvider>
+                  </Button> */}
 
                   <Box />
                 </Flex>

diff --git a/src/modules/PublicSale/AuthForBuy/styles.module.scss b/src/modules/PublicSale/AuthForBuy/styles.module.scss
@@ -79,9 +79,26 @@
         fill: #fff;
       }
     }
+    .iconBlack {
+      color: #000000;
+      path {
+        fill: #000000;
+      }
+    }
   }
 }
 
 .btnImport {
   background: #fa4e0e !important;
 }
+
+.link {
+  font-size: 14px;
+  opacity: 0.7;
+  text-decoration: underline;
+  cursor: pointer;
+  &:hover {
+    color: white;
+    opacity: 1;
+  }
+}
diff --git a/src/modules/PublicSale/depositModal/deposit.content.tsx b/src/modules/PublicSale/depositModal/deposit.content.tsx
@@ -1,11 +1,12 @@
 import AppLoading from '@/components/AppLoading';
 import SvgInset from '@/components/SvgInset';
 import { PublicSaleWalletTokenDeposit } from '@/interfaces/vc';
-import { getPublicsaleWalletInfo } from '@/services/public-sale';
+import { getLocation, getPublicsaleWalletInfo } from '@/services/public-sale';
 import { useAppSelector } from '@/stores/hooks';
 import { commonSelector } from '@/stores/states/common/selector';
 import { userSelector } from '@/stores/states/user/selector';
 import { formatCurrency } from '@/utils/format';
+import AuthenStorage from '@/utils/storage/authen.storage';
 import { compareString } from '@/utils/string';
 import {
   Box,
@@ -26,32 +27,31 @@ import {
 import BigNumber from 'bignumber.js';
 import copy from 'copy-to-clipboard';
 import React, { useEffect, useMemo, useState } from 'react';
+import { isMobile } from 'react-device-detect';
+import { GoogleReCaptchaProvider } from 'react-google-recaptcha-v3';
 import toast from 'react-hot-toast';
 import QRCode from 'react-qr-code';
 import { useSelector } from 'react-redux';
+import ImportOrCreate from '../AuthForBuy/importOrCreate';
+import DepositCheck from './deposit.check';
 import DepositContentItem, {
   DepositContentItem2,
 } from './deposit.content.item';
 import s from './styles.module.scss';
-import { isMobile } from 'react-device-detect';
-import AuthenStorage from '@/utils/storage/authen.storage';
-import BaseModal from '@/components/BaseModal';
-import AuthForBuy from '../AuthForBuy';
-import BuyAsGuest from '../AuthForBuy/buyAsGuest';
-import ImportOrCreate from '../AuthForBuy/importOrCreate';
-import { GoogleReCaptchaProvider } from 'react-google-recaptcha-v3';
-import DepositCheck from './deposit.check';
-import { FormikProvider } from 'formik';
 
 interface IDepositContent {
   amount_usd?: string;
   onHide?: any;
 }
 
+const COUNTRY_BANNED: any[] = ['US'];
+
 const DepositContent: React.FC<IDepositContent> = ({ amount_usd, onHide }) => {
   const { onClose, onOpen, isOpen } = useDisclosure();
   const user = useAppSelector(userSelector);
   const [loading, setLoading] = useState(true);
+  const [checkingLocation, setCheckingLocation] = useState(true);
+  const [isBanned, setIsBanned] = useState(false);
   const [tokens, setTokens] = useState<PublicSaleWalletTokenDeposit[]>([]);
   const [selectToken, setSelectToken] = useState<
     PublicSaleWalletTokenDeposit | undefined
@@ -63,10 +63,25 @@ const DepositContent: React.FC<IDepositContent> = ({ amount_usd, onHide }) => {
 
   const coinPrices = useSelector(commonSelector).coinPrices;
 
+  useEffect(() => {
+    checkLocation();
+  }, []);
+
   useEffect(() => {
     getTokens();
   }, [user]);
 
+  const checkLocation = async () => {
+    try {
+      const rs = await getLocation();
+      const country_code = rs?.data?.country_code;
+      setIsBanned(COUNTRY_BANNED.includes(country_code));
+    } catch (error) {
+    } finally {
+      setCheckingLocation(false);
+    }
+  };
+
   const getTokens = async () => {
     try {
       const rs = await getPublicsaleWalletInfo();
@@ -103,20 +118,26 @@ const DepositContent: React.FC<IDepositContent> = ({ amount_usd, onHide }) => {
     return '0';
   }, [coinPrices, amount_usd, selectToken]);
 
-  if (loading) {
+  if (loading || checkingLocation) {
     return (
       <Center>
         <AppLoading />
       </Center>
     );
   }
 
+  if (isBanned) {
+    return <Center><Text>Not Available in Your Region</Text></Center>
+  }
+
   return (
     <Flex className={s.depositContent}>
       {secretCode && (
         <>
           <Flex className={s.wrapSecretKey}>
-            <Text>Your secret key. Backup now</Text>
+            <Text className={s.titleCopy}>
+              Use this code to claim. copy now
+            </Text>
             <Flex
               className={s.backupNow}
               onClick={() => {

diff --git a/src/modules/PublicSale/depositModal/styles.module.scss b/src/modules/PublicSale/depositModal/styles.module.scss
@@ -215,9 +215,16 @@
   align-items: center;
   justify-content: center;
   gap: 34px;
+  .titleCopy {
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 26px;
+    letter-spacing: 0em;
+    text-align: left;
+  }
   .backupNow {
     align-items: center;
-    gap: 50px;
+    gap: 40px;
     background: linear-gradient(
         0deg,
         rgba(250, 78, 14, 0.4),

diff --git a/src/modules/PublicSale/leaderBoard/index.tsx b/src/modules/PublicSale/leaderBoard/index.tsx
@@ -342,7 +342,7 @@ const LeaderBoard = (props: IProps) => {
           letterSpacing: '-0.5px',
         },
         render(data: ILeaderBoardPoint) {
-          return (
+          return data?.need_active && (
             <Flex justifyContent="flex-start" alignItems="center">
               <Flex
                 flexDirection="row"

diff --git a/src/modules/PublicSale/leaderBoardVisual/index.tsx b/src/modules/PublicSale/leaderBoardVisual/index.tsx
@@ -111,7 +111,7 @@ const LeaderBoardVisual = (props: IProps) => {
     });
 
     if(newRes?.length > 0) {
-      latestContributors.current = newRes.concat(latestContributors.current);
+      latestContributors.current = [...newRes].concat(latestContributors.current);
       animatedLatestContributors.current = newRes;
       dispatch(setAnimatedLatestContributors(newRes));
     }

diff --git a/src/services/public-sale.ts b/src/services/public-sale.ts
@@ -7,6 +7,7 @@ import {
 import createAxiosInstance from '@/services/http-client';
 import { PERP_API_URL } from '@/config';
 import { ILeaderBoardPoint } from '@/interfaces/leader-board-point';
+import axios from 'axios';
 
 const apiClient = createAxiosInstance({
   baseURL: `${PERP_API_URL}/api`,
@@ -75,6 +76,11 @@ export const saleManualCheck = async (recaptcha: string): Promise<any> => {
   return res;
 };
 
+export const getLocation = async (): Promise<any> => {
+  const res = (await axios.get(`https://geolocation-db.com/json/`)) as unknown as any;
+  return res;
+};
+
 export interface IPublicSalePrograme {
   id: number;
   title: string;