Merge branch 'main' into feat/trade-naka

TrustlessComputer · Jan 30, 2024 · 65190d3 · 65190d3
2 parents b6d5300 + 8adf6ab
commit 65190d3
Show file tree

Hide file tree

Showing 44 changed files with 913 additions and 503 deletions.
diff --git a/public/public-sale/btn-pdf.png b/public/public-sale/btn-pdf.png
diff --git a/public/public-sale/btn-play-2.png b/public/public-sale/btn-play-2.png
diff --git a/public/public-sale/btn-play-3.png b/public/public-sale/btn-play-3.png
diff --git a/public/public-sale/btn-play.png b/public/public-sale/btn-play.png
diff --git a/public/public-sale/t-videos.jpeg b/public/public-sale/t-videos.jpeg
diff --git a/src/Providers/user-context.tsx b/src/Providers/user-context.tsx
@@ -1,4 +1,4 @@
-"use client"
+'use client';
 import React, { PropsWithChildren, useMemo } from 'react';
 import { useAppDispatch, useAppSelector } from '@/stores/hooks';
 import { setUser } from '@/stores/states/user/reducer';
@@ -22,50 +22,58 @@ export const UserContext = React.createContext<IUserContext>(initialValue);
 export const UserProvider: React.FC<PropsWithChildren> = ({
   children,
 }: PropsWithChildren): React.ReactElement => {
-
-  const router = useRouter()
+  const router = useRouter();
 
   const dispatch = useAppDispatch();
   const needReload = useAppSelector(commonSelector).needReload;
-  const token = AuthenStorage.getAuthenKey() || AuthenStorage.getGuestAuthenKey();
+  const token =
+    AuthenStorage.getAuthenKey() || AuthenStorage.getGuestAuthenKey();
+  const guestCode = AuthenStorage.getGuestSecretKey();
 
   const fetchUserInfo = async () => {
-    const userInfo = await userServices.getUser()
-    dispatch(setUser(userInfo as User))
+    const userInfo = await userServices.getUser();
+    const userInfoData = {
+      ...userInfo,
+      guest_code: guestCode,
+    };
+    dispatch(setUser(userInfoData as User));
   };
 
-  const throttleFetchUserInfo = React.useCallback(throttle(fetchUserInfo, 300), []);
+  const throttleFetchUserInfo = React.useCallback(
+    throttle(fetchUserInfo, 300),
+    [],
+  );
 
   const fetchCoinPrices = async () => {
     const coinPrices = await getCoinPrices();
     if (!coinPrices) return;
     dispatch(setCoinPrices(coinPrices));
-  }
+  };
 
   const contextValues = useMemo((): IUserContext => {
     return {};
   }, []);
 
   React.useEffect(() => {
     if (!token) return;
-    throttleFetchUserInfo()
+    throttleFetchUserInfo();
   }, [needReload, token]);
 
   // GET REFERRAL CODE
   React.useEffect(() => {
     const code = getReferralByURL();
     if (code) {
-      ReferralStorage.setReferralCode(code)
-      setTimeout(() => router.replace('/public-sale'), 100)
+      ReferralStorage.setReferralCode(code);
+      setTimeout(() => router.replace('/public-sale'), 100);
     }
   }, []);
 
   React.useEffect(() => {
     fetchCoinPrices();
     setInterval(() => {
-      fetchCoinPrices()
-    }, 60 * 1000)
-  }, [])
+      fetchCoinPrices();
+    }, 60 * 1000);
+  }, []);
 
   return (
     <UserContext.Provider value={contextValues}>

diff --git a/src/components/ConnectModal/index.tsx b/src/components/ConnectModal/index.tsx
@@ -6,7 +6,7 @@ import styles from './styles.module.scss';
 import Image from 'next/image';
 import { XVerseContext } from '@/Providers/xverse-context';
 import useConnect from '@/hooks/useConnect';
-import throttle from 'lodash/throttle'
+import throttle from 'lodash/throttle';
 import { getError } from '@/utils/error';
 import toast from 'react-hot-toast';
 import { useAppDispatch } from '@/stores/hooks';
@@ -39,78 +39,84 @@ const ITEMS: ModalItem[] = [
   },
 ];
 
-const ConnectModal = React.memo(({ isShow, onHide, needVerifyBTCAddress = true }: IProps)=> {
-  const xverseCtx = useContext(XVerseContext);
-  const { signMessage } = useConnect();
-  const dispatch = useAppDispatch()
+const ConnectModal = React.memo(
+  ({ isShow, onHide, needVerifyBTCAddress = true }: IProps) => {
+    const xverseCtx = useContext(XVerseContext);
+    const { signMessage } = useConnect();
+    const dispatch = useAppDispatch();
 
-  const [loading, setLoading] = React.useState(false)
+    const [loading, setLoading] = React.useState(false);
 
-  const onSignMessage = async (type: WalletType) => {
-    try {
-      if (loading) return;
-      setLoading(true)
-      await signMessage(type, needVerifyBTCAddress);
-      dispatch(requestReload())
-      onHide()
-    } catch (error) {
-      const { message } = getError(error);
-      toast.error(message)
-    } finally {
-      setLoading(false)
-    }
-  }
+    const onSignMessage = async (type: WalletType) => {
+      try {
+        if (loading) return;
+        setLoading(true);
+        await signMessage(type, needVerifyBTCAddress);
+        dispatch(requestReload());
+        onHide();
+      } catch (error) {
+        const { message } = getError(error);
+        toast.error(message);
+      } finally {
+        setLoading(false);
+      }
+    };
 
-  const throttleSignMessage = React.useCallback(throttle(onSignMessage, 300), [xverseCtx.capabilityMessage, xverseCtx.capabilityState, loading])
+    const throttleSignMessage = React.useCallback(
+      throttle(onSignMessage, 300),
+      [xverseCtx.capabilityMessage, xverseCtx.capabilityState, loading],
+    );
 
-  const renderItem = React.useCallback(
-    (item: ModalItem) => {
-      return (
-        <div
-          className={styles.modalItem}
-          key={item.text}
-          onClick={() => throttleSignMessage(item.type)}
-        >
-          <Image width={48} height={48} src={item.image} alt="ic_wallet" />
-          <div className={styles.modalItem_content}>
-            <p className={styles.modalItem_title}>
-              {item.text}
-            </p>
-            {item.description ? (
-              <p
-                className={styles.modalItem_description}
-              >
-                {item.description}
-              </p>
-            ) : (
-              item.type === WalletType.xverse && (
-                <p
-                  className={styles.modalItem_warning}
-                >
-                  {xverseCtx.capabilityMessage}
+    const renderItem = React.useCallback(
+      (item: ModalItem) => {
+        return (
+          <div
+            className={styles.modalItem}
+            key={item.text}
+            onClick={() => throttleSignMessage(item.type)}
+          >
+            <Image width={48} height={48} src={item.image} alt="ic_wallet" />
+            <div className={styles.modalItem_content}>
+              <p className={styles.modalItem_title}>{item.text}</p>
+              {item.description ? (
+                <p className={styles.modalItem_description}>
+                  {item.description}
                 </p>
-              )
-            )}
+              ) : (
+                item.type === WalletType.xverse && (
+                  <p className={styles.modalItem_warning}>
+                    {xverseCtx.capabilityMessage}
+                  </p>
+                )
+              )}
+            </div>
           </div>
-        </div>
-      );
-    },
-    [xverseCtx.capabilityMessage, xverseCtx.capabilityState, loading]
-  );
+        );
+      },
+      [xverseCtx.capabilityMessage, xverseCtx.capabilityState, loading],
+    );
 
-  return (
-    <BaseModal isShow={isShow} onHide={onHide} title="Choose your wallet" size={!!xverseCtx.capabilityMessage ? "normal" : "small"}>
-      <div className={cs(styles.modalContent, loading && styles.modalContent__loading)}>
-        {ITEMS.map(renderItem)}
-      </div>
-      {
-        loading && (
-          <AppLoading className={styles.loading}/>
-        )
-      }
-    </BaseModal>
-  );
-})
+    return (
+      <BaseModal
+        className={styles.modal}
+        isShow={isShow}
+        onHide={onHide}
+        title="Choose your wallet"
+        size={!!xverseCtx.capabilityMessage ? 'normal' : 'small'}
+      >
+        <div
+          className={cs(
+            styles.modalContent,
+            loading && styles.modalContent__loading,
+          )}
+        >
+          {ITEMS.map(renderItem)}
+        </div>
+        {loading && <AppLoading className={styles.loading} />}
+      </BaseModal>
+    );
+  },
+);
 
 ConnectModal.displayName = 'ConnectModal';
 

diff --git a/src/components/ConnectModal/styles.module.scss b/src/components/ConnectModal/styles.module.scss
@@ -16,7 +16,7 @@
     box-shadow: 0 0 16px -6px rgb(0 0 0 / 8%);
     cursor: pointer;
     color: black;
-    border: 1px solid rgba(255, 126, 33, 0.30);
+    border: 1px solid rgba(255, 126, 33, 0.3);
     background: rgba(255, 126, 33, 0.06);
 
     &_content {
@@ -62,7 +62,7 @@
       font-style: normal;
       font-weight: 400;
       line-height: 130%;
-      background-color: rgba(255, 126, 33, 0.30);
+      background-color: rgba(255, 126, 33, 0.3);
       padding: 3px 12px;
       border-radius: 4px;
     }
@@ -76,3 +76,7 @@
   bottom: 0;
   right: 0;
 }
+
+.modal {
+  background: #ffffff !important;
+}
diff --git a/src/components/DropList/index.tsx b/src/components/DropList/index.tsx
@@ -1,16 +1,15 @@
-import { ReactElement } from 'react';
-import s from '@/layouts/Header/components/styles.module.scss';
+import { PropsWithChildren, ReactElement } from 'react';
+import s from './styles.module.scss';
 import SvgInset from '@/components/SvgInset';
 
-type PropD = {
-  title: string, lists: {title: string, link: string}[]
+interface PropD extends PropsWithChildren{
+   lists: {title: string, link: string}[]
 };
-const DropDown = ({ title, lists }: PropD): ReactElement => {
+const DropDown = ({ children, lists }: PropD): ReactElement => {
 
   return <div className={s.dropMenu}>
     <span className={`${s.dropMenu_label} dropMenu_label`}>
-       {title}
-      <SvgInset svgUrl={`icons/ic-submenu.svg`} />
+       {children}
     </span>
     <ul className={s.dropMenu_list}>
       {

diff --git a/src/components/DropList/styles.module.scss b/src/components/DropList/styles.module.scss
@@ -3,14 +3,11 @@
   color: white;
 
   &_label {
-    display: flex;
-    gap: 5px;
-    align-items: center;
     font-weight: 500;
-    cursor: pointer;
 
     &.black {
       color: black;
+
       svg path {
         stroke: black !important;
       }
@@ -20,6 +17,7 @@
       transform: translateY(.05em);
     }
   }
+
   &:hover {
     .dropMenu_list {
       opacity: 1;
@@ -42,3 +40,49 @@
     visibility: hidden;
   }
 }
+
+.listItem {
+
+  a {
+    color: #000000 !important;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    svg * {
+      transition: fill .4s var(--easeOutQuart);
+    }
+
+    &:hover {
+      rect {
+        fill: red;
+      }
+
+      path {
+        fill: white
+      }
+    }
+  }
+}
+
+
+.isStrong {
+  padding: 4px 12px;
+  border-radius: 100px;
+  background: #000000;
+  display: flex;
+  align-items: center;
+
+  p {
+    color: #FF6A00 !important;
+    background: linear-gradient(90deg, #EE0979 0%, #FF6A00 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    font-weight: 500;
+  }
+}
+
+.strongText {
+  color: yellow !important;
+}
diff --git a/src/layouts/Header/components/DesktopNavLeft.tsx b/src/layouts/Header/components/DesktopNavLeft.tsx
@@ -21,6 +21,12 @@ export const DesktopNavLeft = (props: Props) => {
           color={props?.primaryColor || 'white'}
           className={navItem.isStrong ? s.isStrong : ''}
         >
+          {
+            navItem.isStrong && <span className={s.strongText}>
+            ✨
+          </span>
+          }
+
             <Text
               textAlign={'center'}
               fontSize={['14px', '16px']}

diff --git a/src/layouts/Header/components/styles.module.scss b/src/layouts/Header/components/styles.module.scss
@@ -70,17 +70,22 @@
 
 
 .isStrong {
-  padding: 5px 12px;
+  padding: 4px 12px;
   border-radius: 100px;
-  background: #002D07;
+  background: #000000;
   display: flex;
   align-items: center;
 
-  * {
+  p {
     color: #FF6A00 !important;
     background: linear-gradient(90deg, #EE0979 0%, #FF6A00 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
+    font-weight: 500;
   }
 }
+
+.strongText {
+  color: yellow !important;
+}