Merge branch 'feat/allowlist' into develop

package.json

@@ -40,6 +40,8 @@
     "clsx": "^2.1.0",
     "dayjs": "1.11.10",
     "ethers": "5.7.2",
+    "final-form": "^4.20.10",
+    "formik": "^2.4.5",
     "framer-motion": "^10.16.16",
     "gsap": "^3.12.4",
     "next": "14.0.4",

src/components/BaseModal/index.tsx

@@ -21,6 +21,7 @@ const BaseModal = (props: PropsWithChildren<IBaseModalProps>): React.ReactNode =
     isShow,
     onHide,
     title,
+    className,
     children,
     description,
     headerClassName,
@@ -34,7 +35,7 @@ const BaseModal = (props: PropsWithChildren<IBaseModalProps>): React.ReactNode =
         isCentered={true}
       >
         <ModalOverlay />
-        <ModalContent className={cs(s.modalContent, s[size])}>
+        <ModalContent className={cs(s.modalContent, s[size], className)}>
           <ModalHeader className={cs(s.modalHeader, headerClassName)}>
             <Flex justifyContent="space-between" alignItems="center">
               <button

src/components/ModalManage/ModalComponent.tsx

@@ -0,0 +1,117 @@
+import {
+  Box,
+  Flex,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
+  ModalProps,
+} from '@chakra-ui/react';
+import cx from 'classnames';
+
+import styles from './styles.module.scss';
+import { ReactNode } from 'react';
+import { useDispatch } from 'react-redux';
+import { closeModal } from '@/stores/states/modal/reducer';
+
+export interface ModalComponentProps {
+  id: string;
+  render: Function;
+  title?: string | ReactNode;
+  className?: string;
+  actions?: object;
+  modalProps?: ModalProps;
+  onClose?: Function;
+  theme?: 'light' | 'dark';
+  contentPadding?: number;
+  hideCloseButton?: boolean;
+  size?: string;
+  disableBgClose?: boolean;
+}
+
+const ModalComponent = (props: ModalComponentProps) => {
+  const {
+    id,
+    render,
+    title,
+    className,
+    actions,
+    modalProps,
+    onClose,
+    contentPadding,
+    hideCloseButton = false,
+    disableBgClose = false,
+  } = props;
+
+  const dispatch = useDispatch();
+
+  const handleClose = () => {
+    dispatch(closeModal({ id }));
+    if (onClose) onClose(props);
+  };
+
+  return (
+    <Modal
+      isOpen
+      onClose={handleClose}
+      isCentered
+      closeOnOverlayClick={!disableBgClose}
+      {...modalProps}
+    >
+      <ModalOverlay />
+      <ModalContent
+        className={className}
+        minW={{ base: '90%', sm: '440px' }}
+        padding={contentPadding}
+        // height={'90%'}
+      >
+        <Flex
+          className="modal-header-wrap"
+          justifyContent={'space-between'}
+          alignItems="center"
+          mb={[3]}
+        >
+          {!!title && (
+            <Box flex={1}>
+              <ModalHeader
+                style={{
+                  fontFamily: 'var(--chakra-fonts-body)',
+                  fontSize: 24,
+                  textTransform:
+                    typeof title === 'string' ? 'capitalize' : 'none',
+                  fontWeight: 600,
+                }}
+              >
+                {title}
+              </ModalHeader>
+            </Box>
+          )}
+          <Box
+            display={hideCloseButton ? 'none' : 'block'}
+            style={
+              contentPadding
+                ? {
+                    paddingTop: 20,
+                    paddingRight: 20,
+                  }
+                : {}
+            }
+          >
+            <ModalCloseButton
+              size={'sm'}
+              className={cx(styles.modalButtonClose)}
+            />
+          </Box>
+        </Flex>
+
+        <ModalBody className={cx(styles.modalBody)}>
+          {render && render(actions)}
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default ModalComponent;

src/components/ModalManage/index.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import last from 'lodash/last';
+import cx from 'classnames';
+import ModalComponent, { ModalComponentProps } from './ModalComponent';
+import styles from './styles.module.scss';
+import { closeModal, openModal } from '@/stores/states/modal/reducer';
+import { useDispatch, useSelector } from 'react-redux';
+import { modalSelector } from '@/stores/states/modal/selector';
+
+const ModalManager = () => {
+  const modals: ModalComponentProps[] = useSelector(modalSelector)
+    .modals as unknown as ModalComponentProps[];
+  const dispatch = useDispatch();
+
+  if (!modals.length) return null;
+
+  const onBackdropClick = () => {
+    const id = last(modals)?.id || '';
+    dispatch(closeModal({ id }));
+  };
+
+  return (
+    <div className={cx(styles.wrapper, modals.length > 0 && styles.show)}>
+      <div className={styles.backdrop} onClick={onBackdropClick} />
+      {modals.map(modal => (
+        <ModalComponent
+          key={modal.id}
+          actions={{ openModal, closeModal }}
+          id={modal.id}
+          title={modal.title}
+          render={modal.render}
+          className={modal.className}
+          modalProps={modal.modalProps}
+          onClose={modal.onClose}
+          theme={modal.theme}
+          hideCloseButton={modal.hideCloseButton}
+          disableBgClose={modal.disableBgClose}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default ModalManager;

src/components/ModalManage/styles.module.scss

@@ -0,0 +1,25 @@
+.noPadding {
+  padding: 0;
+}
+.modalContent {
+  border: none;
+}
+.modalBody {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+.modalDark {
+  background-color: var(--bs-gray-dark);
+  color: #fcfcfd;
+  button {
+    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg)
+      brightness(104%) contrast(102%);
+  }
+}
+
+.modalButtonClose {
+  box-shadow: none !important;
+}

src/modules/Whitelist/index.tsx

@@ -15,7 +15,7 @@ const Whitelist = () => {
   React.useEffect(() => {
     const element = document.getElementById(CONTAINER_ID)
     if (height && element) {
-      element.style.paddingTop = `${height}px`
+      element.style.paddingTop = `${height + 32}px`
     }
   }, [height])
 

src/modules/Whitelist/steps/Step/index.tsx

@@ -1,10 +1,11 @@
 import s from './styles.module.scss';
 import { Button, Flex, Text } from '@chakra-ui/react';
 import cx from 'clsx';
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import HistoryMessage from '@/modules/Whitelist/HistoryMessage';
 import Image from 'next/image';
 import { CDN_URL_ICONS } from '@/config';
+import AuthenStorage from '@/utils/storage/authen.storage';
 
 export enum MultiplierStep {
   authen,
@@ -24,7 +25,8 @@ export interface IItemCommunity {
   right: {
     title: string;
     desc: string
-  }
+  },
+  handleShowManualPopup?: () => void;
 }
 
 export default function ItemCommunity({
@@ -36,6 +38,15 @@ export default function ItemCommunity({
   content: IItemCommunity;
   isLoading?: boolean;
 }) {
+  const [showManualCheck, setShowManualCheck] = useState(false);
+  const token = AuthenStorage.getAuthenKey();
+
+  useEffect(() => {
+    if(!!token) {
+      setShowManualCheck(false);
+    }
+  }, [token]);
+
   const { isActive, image, step } = content;
 
   const isRunning = useMemo(() => {
@@ -58,17 +69,40 @@ export default function ItemCommunity({
             </Flex>
           </Flex>
           {!!content?.actionText && (
-            <Button
-              className={s.itemCommunity__btnCTA}
-              onClick={() => {
-                if (content?.actionHandle && isRunning) {
-                  content?.actionHandle()
-                }
-              }}
-              isLoading={isLoading}
-            >
-              {content?.actionText}
-            </Button>
+            <Flex direction={"column"}>
+              <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>
+              {
+                step === MultiplierStep.authen && showManualCheck && (
+                  <Text
+                    cursor={"pointer"}
+                    fontSize={"14px"}
+                    fontWeight={400}
+                    color={"#000000"}
+                    textDecoration={"underline"}
+                    onClick={content?.handleShowManualPopup}
+                    mt={1}
+                  >
+                    Missing from the Leaderboard?
+                  </Text>
+                )
+              }
+            </Flex>
           )}
           {step === MultiplierStep.signMessage && (
             <HistoryMessage />

src/modules/Whitelist/steps/Step/styles.module.scss

@@ -57,3 +57,8 @@
     border-radius: 0 !important;
   }
 }
+
+.modalContent {
+  border-radius: 0px !important;
+  min-width: unset !important;
+}