Merge branch 'upgrade/login-v3' into develop

TrustlessComputer · Jan 31, 2024 · 0dca01c · 0dca01c
2 parents d675631 + 493d7ba
commit 0dca01c
Show file tree

Hide file tree

Showing 48 changed files with 1,436 additions and 582 deletions.
diff --git a/package.json b/package.json
@@ -58,6 +58,7 @@
     "react-final-form": "^6.5.9",
     "react-google-recaptcha-v3": "^1.10.1",
     "react-hot-toast": "^2.4.1",
+    "react-jazzicon": "^1.0.4",
     "react-modal-video": "^2.0.1",
     "react-player": "^2.14.1",
     "react-qr-code": "^2.0.12",

diff --git a/public/icons/ic-tooltip.svg b/public/icons/ic-tooltip.svg
diff --git a/src/Providers/StoreProvider/index.tsx b/src/Providers/StoreProvider/index.tsx
@@ -1,8 +1,11 @@
 'use client';
 
-import { AppStore, store } from '@/stores';
+import AppLoading from '@/components/AppLoading';
+import { AppStore, persistor, store } from '@/stores';
+import { Center } from '@chakra-ui/react';
 import React, { useRef } from 'react';
 import { Provider } from 'react-redux';
+import { PersistGate } from 'redux-persist/integration/react';
 
 // import useBootstrapApp from '@/hooks/useBootstrapApp';
 
@@ -18,5 +21,11 @@ export default function StoreProvider({
     storeRef.current = store;
   }
 
-  return <Provider store={storeRef.current as any}>{children}</Provider>;
+  return (
+    <Provider store={storeRef.current as any}>
+      <PersistGate loading={<></>} persistor={persistor}>
+        {children}
+      </PersistGate>
+    </Provider>
+  );
 }
diff --git a/src/components/BaseModal/styles.module.scss b/src/components/BaseModal/styles.module.scss
@@ -38,7 +38,7 @@
     background-color: transparent !important;
     position: absolute;
     right: 0;
-    top: 0;
+    top: -2px;
     &:focus-visible {
       outline: none;
     }

diff --git a/src/components/InfoTooltip/IcHelp.tsx b/src/components/InfoTooltip/IcHelp.tsx
@@ -0,0 +1,9 @@
+/* eslint-disable jsx-a11y/alt-text */
+import { Image } from '@chakra-ui/react';
+import React from 'react';
+
+const IcHelp = () => {
+  return <Image src={`/icons/ic-tooltip.svg`} />;
+};
+
+export default IcHelp;
diff --git a/src/components/InfoTooltip/index.tsx b/src/components/InfoTooltip/index.tsx
@@ -0,0 +1,108 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import {
+  Box,
+  Flex,
+  PlacementWithLogical,
+  Popover,
+  PopoverArrow,
+  PopoverBody,
+  PopoverContent,
+  PopoverTrigger,
+  Text,
+  useDisclosure,
+} from '@chakra-ui/react';
+import { ReactNode, useEffect, useRef } from 'react';
+import IcHelp from './IcHelp';
+
+interface InfoTooltipProps {
+  label: ReactNode;
+  children?: ReactNode;
+  placement?: PlacementWithLogical;
+  iconSize?: string;
+  fontSize?: string;
+  iconColor?: string;
+  showIcon?: boolean;
+  iconName?: any;
+  setIsOpen?: (b: boolean) => void;
+  isStyleConfig?: boolean;
+  bodyClassName?: any;
+  className?: any;
+}
+
+const InfoTooltip = (props: InfoTooltipProps) => {
+  const {
+    label,
+    children,
+    showIcon = false,
+    setIsOpen,
+    isStyleConfig = true,
+    bodyClassName,
+    className
+  } = props;
+  const { isOpen, onToggle, onClose } = useDisclosure();
+
+  useEffect(() => {
+    setIsOpen && setIsOpen(isOpen);
+  }, [isOpen]);
+
+  const initRef = useRef<any>();
+
+  const renderChild = () => {
+    if (children && showIcon) {
+      return (
+        <Flex gap={1} alignItems={'center'}>
+          {children}
+          <IcHelp />
+        </Flex>
+      );
+    }
+    if (children) {
+      return children;
+    }
+    return <IcHelp />;
+  };
+
+  return (
+    <Popover
+      closeOnBlur={true}
+      placement="auto"
+      initialFocusRef={initRef}
+      isOpen={isOpen}
+      onClose={onClose}
+      styleConfig={
+        isStyleConfig
+          ? {
+              zIndex: 999999999,
+            }
+          : undefined
+      }
+    >
+      <PopoverTrigger>
+        <Box
+          cursor={"pointer"}
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            onToggle();
+          }}
+          className={className}
+        >
+          {renderChild()}
+        </Box>
+      </PopoverTrigger>
+      <PopoverContent>
+        <PopoverArrow bg="white" />
+        <PopoverBody
+          style={{
+            padding: 5,
+          }}
+          className={bodyClassName}
+        >
+          <Text fontSize={'12px'}>{label}</Text>
+        </PopoverBody>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export default InfoTooltip;
diff --git a/src/components/InfoTooltip/style.module.scss b/src/components/InfoTooltip/style.module.scss
@@ -0,0 +1,3 @@
+.popover {
+  color: red;
+}
diff --git a/src/modules/PublicSale/AuthForBuy/btnCreateGuest.tsx b/src/modules/PublicSale/AuthForBuy/btnCreateGuest.tsx
@@ -1,6 +1,6 @@
 import SvgInset from '@/components/SvgInset';
 import { Button, Center, Spinner, Text } from '@chakra-ui/react';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import s from './styles.module.scss';
 import { useGoogleReCaptcha } from 'react-google-recaptcha-v3';
 import { generateRandomString } from '@/utils/encryption';
@@ -9,28 +9,41 @@ import AuthenStorage from '@/utils/storage/authen.storage';
 import { setGuestSecretCode } from '@/stores/states/user/reducer';
 import { useDispatch } from 'react-redux';
 import cs from 'classnames';
+import { userSelector } from '@/stores/states/user/selector';
+import { useAppSelector } from '@/stores/hooks';
 
 const BtnCreateGuest = () => {
   const dispatch = useDispatch();
   const { executeRecaptcha } = useGoogleReCaptcha();
   const [loading, setLoading] = useState(false);
-  const createNewSecretCode = useCallback(() => {
+  const user = useAppSelector(userSelector);
+  const isAuth = useMemo(() => user?.guest_code || user?.twitter_id, [user]);
+  // const createNewSecretCode = useCallback(() => {
+  //   try {
+  //     if (!executeRecaptcha) {
+  //       console.log('Execute recaptcha not yet available');
+  //       throw Error('Execute recaptcha not yet available');
+  //     }
+  //     executeRecaptcha('enquiryFormSubmit').then((gReCaptchaToken) => {
+  //       console.log(gReCaptchaToken, 'response Google reCaptcha server');
+  //       getToken(gReCaptchaToken);
+  //     });
+  //   } catch (error) {
+  //     //
+  //   }
+  // }, [executeRecaptcha]);
+
+  const createNewSecretCode = async () => {
     try {
-      if (!executeRecaptcha) {
-        console.log('Execute recaptcha not yet available');
-        throw Error('Execute recaptcha not yet available');
-      }
-      executeRecaptcha('enquiryFormSubmit').then((gReCaptchaToken) => {
-        console.log(gReCaptchaToken, 'response Google reCaptcha server');
-        getToken(gReCaptchaToken);
-      });
-    } catch (error) {
-      //
-    }
-  }, [executeRecaptcha]);
+      await getToken('gReCaptchaToken');
+    } catch (error) {}
+  };
 
   const getToken = async (captcha: string, code?: string) => {
     try {
+      if (isAuth) {
+        return;
+      }
       setLoading(true);
       const _secretCode = generateRandomString(10);
 

diff --git a/src/modules/PublicSale/AuthForBuy/importOrCreate.tsx b/src/modules/PublicSale/AuthForBuy/importOrCreate.tsx
@@ -12,21 +12,27 @@ import {
   Text,
   Box,
 } from '@chakra-ui/react';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { useGoogleReCaptcha } from 'react-google-recaptcha-v3';
 import { useDispatch } from 'react-redux';
 import s from './styles.module.scss';
+import { userSelector } from '@/stores/states/user/selector';
+import { useAppSelector } from '@/stores/hooks';
 
 const ImportOrCreate = ({ onBack }: { onBack?: any }) => {
   const dispatch = useDispatch();
   const getSecretCode = AuthenStorage.getGuestSecretKey();
 
+  const user = useAppSelector(userSelector);
+
   const [loading, setLoading] = useState(false);
   const [secretCode, setSecretCode] = useState(getSecretCode);
   const [isImport, setIsImport] = useState(false);
   const [importSecretKeyText, setImportSecretKeyText] = useState('');
   const [secretKeyError, setSecretKeyError] = useState('');
 
+  const isAuth = useMemo(() => user?.guest_code || user?.twitter_id, [user]);
+
   const validatePassword = (password: string) => {
     // Regular expression to validate password
     const regex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{10,}$/;
@@ -37,6 +43,9 @@ const ImportOrCreate = ({ onBack }: { onBack?: any }) => {
 
   const getToken = async (captcha: string, code?: string) => {
     try {
+      if (isAuth) {
+        return;
+      }
       setLoading(true);
       const _secretCode = code || generateRandomString(10);
 
@@ -51,20 +60,26 @@ const ImportOrCreate = ({ onBack }: { onBack?: any }) => {
     }
   };
 
-  const createNewSecretCode = useCallback(() => {
+  // const createNewSecretCode = useCallback(() => {
+  //   try {
+  //     if (!executeRecaptcha) {
+  //       console.log('Execute recaptcha not yet available');
+  //       throw Error('Execute recaptcha not yet available');
+  //     }
+  //     executeRecaptcha('enquiryFormSubmit').then((gReCaptchaToken) => {
+  //       console.log(gReCaptchaToken, 'response Google reCaptcha server');
+  //       getToken(gReCaptchaToken);
+  //     });
+  //   } catch (error) {
+  //     //
+  //   }
+  // }, [executeRecaptcha]);
+
+  const createNewSecretCode = async () => {
     try {
-      if (!executeRecaptcha) {
-        console.log('Execute recaptcha not yet available');
-        throw Error('Execute recaptcha not yet available');
-      }
-      executeRecaptcha('enquiryFormSubmit').then((gReCaptchaToken) => {
-        console.log(gReCaptchaToken, 'response Google reCaptcha server');
-        getToken(gReCaptchaToken);
-      });
-    } catch (error) {
-      //
-    }
-  }, [executeRecaptcha]);
+      await getToken('gReCaptchaToken');
+    } catch (error) {}
+  };
 
   const onImportSecretCode = useCallback(
     (code: string) => {

diff --git a/src/modules/PublicSale/AuthForBuy/index.tsx b/src/modules/PublicSale/AuthForBuy/index.tsx
@@ -8,6 +8,7 @@ import { GoogleReCaptchaProvider } from 'react-google-recaptcha-v3';
 import DepositContent from '../depositModal/deposit.content';
 import s from './styles.module.scss';
 import cx from 'clsx';
+import AuthForBuyV2 from '../AuthForBuyV2';
 
 interface IAuthForBuy extends PropsWithChildren {}
 
@@ -26,39 +27,49 @@ const AuthForBuy: React.FC<IAuthForBuy> = () => {
   return (
     <>
       <Flex className={s.btnWrapper}>
-        <Button
-          onClick={() => {
-            setHasStaked(false);
-            onOpen();
-          }}
-          type="button"
-          className={s.btnContainer}
-        >
-          {/*<SvgInset svgUrl="/icons/ic_twitter.svg" />*/}
-          Buy $BVM
-        </Button>
-        <Tooltip
-          minW="220px"
-          bg="#006149"
-          boxShadow="0px 0px 40px rgba(0, 0, 0, 0.12)"
-          borderRadius="4px"
-          padding="16px"
-          hasArrow
-          label={'Buy and stake your $BVM to earn rewards from the BVM ecosystem and our collaborative Bitcoin L2s and dApps partners. Your $BVM will be automatically staked after the public sale, and you can choose to unstake at any time.'}
-          color={"#FFFFFF"}
+        <AuthForBuyV2
+          renderWithoutLogin={(onClick: any) => (
+            <Button onClick={onClick} type="button" className={s.btnContainer}>
+              Buy $BVM
+            </Button>
+          )}
         >
           <Button
             onClick={() => {
-              setHasStaked(true);
+              setHasStaked(false);
               onOpen();
             }}
             type="button"
-            className={cx(s.btnContainer, s.btnBuyAndStake)}
+            className={s.btnContainer}
           >
-            {/*<SvgInset svgUrl="/icons/ic_twitter.svg" />*/}
-            Buy & Stake $BVM
+            Buy $BVM
           </Button>
-        </Tooltip>
+        </AuthForBuyV2>
+        <AuthForBuyV2>
+          <Tooltip
+            minW="220px"
+            bg="#006149"
+            boxShadow="0px 0px 40px rgba(0, 0, 0, 0.12)"
+            borderRadius="4px"
+            padding="16px"
+            hasArrow
+            label={
+              'Buy and stake your $BVM to earn rewards from the BVM ecosystem and our collaborative Bitcoin L2s and dApps partners. Your $BVM will be automatically staked after the public sale, and you can choose to unstake at any time.'
+            }
+            color={'#FFFFFF'}
+          >
+            <Button
+              onClick={() => {
+                setHasStaked(true);
+                onOpen();
+              }}
+              type="button"
+              className={cx(s.btnContainer, s.btnBuyAndStake)}
+            >
+              Buy & Stake $BVM
+            </Button>
+          </Tooltip>
+        </AuthForBuyV2>
       </Flex>
       <GoogleReCaptchaProvider
         reCaptchaKey="6LdrclkpAAAAAD1Xu6EVj_QB3e7SFtMVCKBuHb24"