Merge pull request #170 from TrustlessComputer/feat/whitelist_munual

Feat/whitelist munual

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;

src/components/InfoTooltip/index.tsx

@@ -0,0 +1,105 @@
+/* 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={
+        { zIndex: 999999999 }
+      }
+    >
+      <PopoverTrigger>
+        <Box
+          cursor={"pointer"}
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            onToggle();
+          }}
+          className={className}
+        >
+          {renderChild()}
+        </Box>
+      </PopoverTrigger>
+      <PopoverContent>
+        <PopoverArrow bg="white" />
+        <PopoverBody
+          style={{
+            padding: 5,
+            zIndex: 999999999
+          }}
+          className={bodyClassName}
+        >
+          <Text fontSize={'12px'}>{label}</Text>
+        </PopoverBody>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export default InfoTooltip;

src/components/InfoTooltip/style.module.scss

@@ -0,0 +1,3 @@
+.popover {
+  color: red;
+}

src/modules/PublicSale/BuyForm/index.tsx

@@ -1,17 +1,13 @@
 import { Box, Button, Flex, Text, Tooltip } from '@chakra-ui/react';
 import { FormikProps, useFormik } from 'formik';
-import React, { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
+import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import s from './styles.module.scss';
 import {
   getPublicSaleLeaderBoards,
   getPublicSaleSummary,
   postPublicsaleWalletInfoManualCheck,
 } from '@/services/public-sale';
-import {
-  defaultSummary,
-  IPublicSaleDepositInfo,
-  VCInfo,
-} from '@/interfaces/vc';
+import { defaultSummary, IPublicSaleDepositInfo, VCInfo } from '@/interfaces/vc';
 import { formatCurrency } from '@/utils/format';
 import { toast } from 'react-hot-toast';
 import dayjs from 'dayjs';
@@ -26,9 +22,8 @@ import cx from 'classnames';
 import AuthenStorage from '@/utils/storage/authen.storage';
 import { PUBLIC_SALE_END } from '@/modules/Whitelist';
 import NumberScale from '@/components/NumberScale';
-import DepositGuestCodeHere, {
-  GuestCodeHere,
-} from '../depositModal/deposit.guest.code';
+import { GuestCodeHere } from '../depositModal/deposit.guest.code';
+import LoginTooltip from '@/modules/PublicSale/depositModal/login.tooltip';
 
 interface FormValues {
   tokenAmount: string;
@@ -171,16 +166,20 @@ const PrivateSaleForm = ({ vcInfo }: { vcInfo?: VCInfo }) => {
           {...rest}
           cursor={token ? 'pointer' : 'auto'}
         >
-          <Text
+          <Flex
             className={s.tLabel}
             fontSize={20}
             lineHeight={1}
             fontWeight={400}
             color={'rgba(0,0,0,0.7)'}
+            gap={1} alignItems={"center"}
           >
             Your contribution
-          </Text>
-          <Flex gap={1} alignItems={'center'}>
+            <LoginTooltip onClose={() => {
+
+            }}/>
+          </Flex>
+          <Flex gap={1} alignItems={"center"}>
             <Text fontSize={20} lineHeight={1} fontWeight={400} color={'#000'}>
               {token
                 ? `$${formatCurrency(
@@ -267,6 +266,28 @@ const PrivateSaleForm = ({ vcInfo }: { vcInfo?: VCInfo }) => {
     );
   });
 
+  const renderLoginTooltip = useCallback(() => {
+    return (
+      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} />
+      )
+    )
+  }, [token]);
+
   return (
     <div className={s.container}>
       <form className={s.form} onSubmit={formik.handleSubmit}>
@@ -372,23 +393,9 @@ const PrivateSaleForm = ({ vcInfo }: { vcInfo?: VCInfo }) => {
               {/*)}*/}
             </div>
             <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} />
-              )}
+              {
+                renderLoginTooltip()
+              }
             </div>
           </div>
 

src/modules/PublicSale/BuyForm/styles.module.scss

@@ -200,6 +200,19 @@
   .backer {
     cursor: pointer;
   }
+
+  :global {
+    .chakra-popover__popper {
+      z-index: 999999;
+
+      .chakra-popover__content {
+        &:focus-visible {
+          outline: none !important;
+          box-shadow: 0px 0px 24px -6px #0000001F !important;
+        }
+      }
+    }
+  }
 }
 
 .grid {