[BK76] - update staging stage for final check

package.json

@@ -43,6 +43,7 @@
     "d3": "^7.8.5",
     "date-fns": "^2.30.0",
     "date-fns-tz": "^2.0.0",
+    "decimal.js": "^10.4.3",
     "ethers": "^5.7.2",
     "framer-motion": "^10.12.10",
     "fs": "^0.0.1-security",

src/components/footer/index.tsx

@@ -25,19 +25,24 @@ const Footer = () => {
     >
       <Text fontSize={pcView ? 14 : 12} color={"#A0A3AD"}>
         Copyright © {dayjs().year()}{" "}
-        <span style={{ color: "#007AFF" }}>Tokamak Network</span> All Rights
-        Reserved.
+        <span
+          style={{ color: "#007AFF", cursor: "pointer" }}
+          onClick={() => window.open("https://www.tokamak.network/")}
+        >
+          Tokamak Network
+        </span>{" "}
+        All Rights Reserved.
       </Text>
     </Flex>
   ) : (
     // When in mobile view, there is no footer.
     // A box is placed to maintain the background color while scrolling with a finger. @Robert
     <Box
-      position='fixed'
-      top='0'
-      right='0'
-      bottom='0'
-      left='0'
+      position="fixed"
+      top="0"
+      right="0"
+      bottom="0"
+      left="0"
       zIndex={-1}
       bg={"#0F0F12"}
     ></Box>

src/components/header/Index.tsx

@@ -327,7 +327,6 @@ export default function Header() {
           <Account />
           {/* <AccountModal /> */}
         </Flex>
-
         {!menuView && (
           <Flex
             w={!mobileView ? "48px" : "32px"}

src/components/header/Network.tsx

@@ -1,8 +1,5 @@
-import ImageSymbol, { TokenSymbol } from "@/components/image/TokenSymbol";
 import { NetworkSymbol } from "../image/NetworkSymbol";
 import WARNING_ICON from "assets/icons/pool/unsupportedNetworkWarning.svg";
-import { capitalizeFirstChar } from "@/utils/trim/capitalizeChar";
-
 import {
   SupportedChainId,
   SupportedChainProperties,
@@ -16,8 +13,6 @@ import useConnectedNetwork from "@/hooks/network";
 import { useAccount, useSwitchNetwork } from "wagmi";
 import { SetStateAction, useEffect, useMemo, useRef, useState } from "react";
 import Select from "react-select";
-import AccoridonArrowImg from "assets/icons/accordionArrow.svg";
-import NetworkCircle from "assets/icons/networkCircle.svg";
 import { Overlay_Index } from "@/types/style/overlayIndex";
 import { convertNetworkName } from "@/utils/network/convertNetworkName";
 
@@ -26,6 +21,18 @@ type SelectOption = SupportedChainProperties & {
   label: SupportedChainProperties["chainName"];
 };
 
+const formatVariableName = (variable: string) => {
+  return variable?.replace(/([A-Z]+)_([A-Z]+)/g, (_, p1, p2) => {
+    return (
+      p1.charAt(0) +
+      p1.slice(1).toLowerCase() +
+      " " +
+      p2.charAt(0) +
+      p2.slice(1).toLowerCase()
+    );
+  });
+};
+
 const customStyles = (maxHeight: string, maxWidth: string) => {
   return {
     control: (styles: any) => ({
@@ -89,7 +96,7 @@ const ValueContainer = (props: {
             }}
           />
           {isConnected && !isConnectedToMainNetwork && (
-            <Text>{capitalizeFirstChar(selectedOption.chainName)}</Text>
+            <Text>{formatVariableName(selectedOption.chainName)}</Text>
           )}
         </Center>
       </Flex>
@@ -122,14 +129,10 @@ const ValueContainer = (props: {
 export default function Network() {
   // const { inNetwork, height, width, isPool } = props;
   const [network, setNetwork] = useRecoilState(networkStatus);
-  const { switchNetworkAsync, isError, switchNetwork } = useSwitchNetwork();
+  const { isError, switchNetwork } = useSwitchNetwork();
   const [isOpen, setIsOpen] = useState<boolean>(false);
-  const {
-    connectedChainId,
-    isConnectedToMainNetwork,
-    chainName,
-    isSupportedChain,
-  } = useConnectedNetwork();
+  const { connectedChainId, isConnectedToMainNetwork, isSupportedChain } =
+    useConnectedNetwork();
   const { isConnected } = useAccount();
 
   // const inNetwork = true;

src/components/history/AccountHistory.tsx

@@ -130,6 +130,7 @@ export default function AccountHistory() {
       variant="clickThrough"
       trapFocus={false}
       useInert={true}
+      blockScrollOnMount={false}
     >
       <DrawerOverlay
         bg={{ base: "#000000F0", lg: "none" }}

src/components/modal/Confirmation.tsx

@@ -126,7 +126,7 @@ export default function Confirmation() {
             {isClaimWaiting ? (
               "Please wait a few seconds for MetaMask popup to appear."
             ) : isConfirming ? (
-              "Please confirm txn. If is not updating, check your wallet."
+              "Please confirm txn. If it's not updating, check your wallet."
             ) : isConfirmed ? (
               <Link
                 href={`${blockExplorer}/tx/${txHash}`}

src/components/modal/TxToast.tsx

@@ -92,8 +92,11 @@ function TxTokenInfo(props: TransactionToastProp & { isToken0: boolean }) {
          */}
         <TokenSymbolWithNetwork
           tokenSymbol={symbol === "WETH" ? "WETH" : "ETH"}
+          networkSymbolW={16}
+          networkSymbolH={16}
+          bottom={-0.5}
+          right={-0.5}
           chainId={targetChainId}
-          bottom={0}
         />
         <Text fontSize={11} fontWeight={400} textAlign={"center"}>
           {trimAmount(convertParsedAmount)} {symbol === "WETH" ? "WETH" : "ETH"}
@@ -116,7 +119,10 @@ function TxTokenInfo(props: TransactionToastProp & { isToken0: boolean }) {
         <TokenSymbolWithNetwork
           tokenSymbol={symbol}
           chainId={targetChainId}
-          bottom={0}
+          networkSymbolW={16}
+          networkSymbolH={16}
+          bottom={-0.5}
+          right={-0.5}
         />
         <Text fontSize={11} fontWeight={400} textAlign={"center"} w={"94px"}>
           {noNeedToShowAmount ? "" : trimAmount(convertParsedAmount)} {symbol}
@@ -203,6 +209,7 @@ function TransactionToast(props: TransactionToastProp) {
       if (txSort === "Provide") {
         return setSelectedTransactionCategory(CT_ACTION.PROVIDE);
       }
+      return setSelectedTransactionCategory(CT_ACTION.REQUEST);
     }
   };
   const { closeModal } = useTxConfirmModal();

src/components/tooltip/CustomTooltip.tsx

@@ -3,6 +3,7 @@ import Image from "next/image";
 import React, { CSSProperties, ReactNode, useState } from "react";
 import QuestionIcon from "assets/icons/question.svg";
 import GrayQuestionIcon from "assets/icons/questionGray.svg";
+import BlueQuestionIcon from "assets/icons/questionBlue.svg";
 import TooltipArrow from "assets/icons/tooltipArrow.svg";
 
 export default function CustomTooltip(props: {
@@ -84,6 +85,7 @@ export default function CustomTooltip(props: {
 
 export const CustomTooltipWithQuestion = (props: {
   isGrayIcon?: boolean;
+  isBlueIcon?: boolean;
   tooltipLabel: string | ReactNode;
   style?: {
     width?: string;
@@ -102,7 +104,13 @@ export const CustomTooltipWithQuestion = (props: {
       <CustomTooltip
         content={
           <Image
-            src={props.isGrayIcon ? GrayQuestionIcon : QuestionIcon}
+            src={
+              props.isGrayIcon
+                ? GrayQuestionIcon
+                : props.isBlueIcon
+                ? BlueQuestionIcon
+                : QuestionIcon
+            }
             alt={"QuestionIcon"}
           ></Image>
         }

src/components/tooltip/RevokeTooltip.tsx

@@ -0,0 +1,37 @@
+import { Flex } from "@chakra-ui/react";
+import { CustomTooltipWithQuestion } from "./CustomTooltip";
+import { CSSProperties } from "react";
+
+export function TooltipForRevoke(props: {
+  style?: CSSProperties;
+  isGrayIcon?: boolean;
+  isBlueIcon?: boolean;
+}) {
+  const { style, isGrayIcon, isBlueIcon } = props;
+  return (
+    <Flex ml={"-5px"} style={style}>
+      <CustomTooltipWithQuestion
+        isGrayIcon={isGrayIcon ?? true}
+        isBlueIcon={isBlueIcon}
+        tooltipLabel={
+          <Flex
+            w={"240px"}
+            h={"45px"}
+            fontSize={11}
+            textAlign={"center"}
+            alignItems={"center"}
+            justifyContent={"center"}
+          >
+            {
+              <span>
+                Approval for USDT must be revoked first <br />
+                before a new amount is approved.
+              </span>
+            }
+          </Flex>
+        }
+        style={{ px: "-5px", tooltipLineHeight: "15x", height: "45px" }}
+      ></CustomTooltipWithQuestion>
+    </Flex>
+  );
+}

src/components/ui/GradientSpinner.tsx

@@ -1,21 +1,34 @@
-import { Box, keyframes } from "@chakra-ui/react";
+import { Box, Flex, FlexProps, keyframes } from "@chakra-ui/react";
 
 const gradientAnimation = keyframes`
-  0% { background-position: -200% 0%; }
-  100% { background-position: 200% 0%; }
+100% { background-position: -300% 0%; }
+0% { background-position: 300% 0%; }
 `;
-
-export default function GradientSpinner(props: { minW?: string }) {
-  const { minW } = props;
+const Spinner = () => {
   return (
     <Box
       w="100%"
-      minW={minW ?? "100px"}
       h="100%"
-      bgGradient="linear(to-r, #2b2f42 8%, #2b2f42 38%, #1c1d25 54%)"
+      bgGradient="linear(to-r, #15161D 10%, #2b2f42 40%, #15161D 90%)"
       bgSize="200% 100%"
       borderRadius={"8px"}
-      animation={`${gradientAnimation} 10s linear infinite`}
+      animation={`${gradientAnimation} 2s linear infinite`}
     />
   );
+};
+
+export default function GradientSpinner(props: FlexProps) {
+  return (
+    <Flex
+      h={{ base: "73px", lg: "160px" }}
+      w={{ baes: "100%", lg: "100%" }}
+      borderRadius={"8px"}
+      border={"1px solid #313442"}
+      bg={"#15161D"}
+      flexDir={"column"}
+      {...props}
+    >
+      <Spinner />
+    </Flex>
+  );
 }

src/css/scrollbar.css

@@ -1,5 +1,5 @@
 .scroll-hidden::-webkit-scrollbar {
-  display: none;
+  display: none; /* Chrome, Safari and Opera */
 }
 
 /* Hide scrollbar for IE, Edge and Firefox */

src/hooks/time/useTimeOver.ts

@@ -0,0 +1,26 @@
+import { useEffect, useState } from "react";
+
+export function useTimeOver(props: {
+  timeStamp: number;
+  timeBuffer: number;
+  needToCheck: boolean;
+}) {
+  const { timeStamp, timeBuffer, needToCheck } = props;
+  const [isTimeOver, setIsTimeOver] = useState(false);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      if (
+        needToCheck &&
+        timeStamp + timeBuffer < Math.floor(Date.now() / 1000)
+      ) {
+        setIsTimeOver(true);
+      } else {
+        setIsTimeOver(false);
+      }
+    }, 1000);
+    return () => clearInterval(interval);
+  }, [needToCheck, timeStamp]);
+
+  return { isTimeOver };
+}