Merge pull request #246 from tokamak-network/dev

[BK-95] : Reflect issues for mainnet testing

src/app/Entry.tsx

@@ -5,12 +5,16 @@ import TxToast from "@/components/modal/TxToast";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { getQueryClient } from "@/client/queryClient";
 import Script from "next/script";
-import Header from "@/components/header/Index";
 import { Flex } from "@chakra-ui/react";
 import Modals from "./Modals";
 import Drawers from "./Drawers";
 import Footer from "@/components/footer";
-import useMediaView from "@/hooks/mediaView/useMediaView";
+import dynamic from "next/dynamic";
+
+const DynamicHeader = dynamic(() => import("@/components/header/Index"), {
+  loading: () => <></>,
+  ssr: false,
+});
 
 /**
  * test domain building commit
@@ -32,7 +36,7 @@ const GoogleAnalyticsScript = () => {
     <>
       <Script
         async
-        src="https://www.googletagmanager.com/gtag/js?id=G-WBYF8R92QK"
+        src='https://www.googletagmanager.com/gtag/js?id=G-WBYF8R92QK'
       ></Script>
       <Script>
         {`window.dataLayer = window.dataLayer || [];
@@ -46,15 +50,14 @@ const GoogleAnalyticsScript = () => {
 
 export default function Entry({ children }: { children: React.ReactNode }) {
   const queryClient = getQueryClient();
-  const { mobileView } = useMediaView();
 
   return (
     <>
       <GoogleAnalyticsScript />
       <QueryClientProvider client={queryClient}>
         <ChakraProvidersForNextJs>
           <Flex flexDir={"column"} h={"100vh"}>
-            <Header />
+            <DynamicHeader />
             <Flex flexDir={"column"} flexGrow={1}>
               <Flex
                 justifyContent={"center"}

src/app/pools/add/ActionButton.tsx

@@ -22,7 +22,7 @@ import { Button, Flex, Spinner, Text } from "@chakra-ui/react";
 import { useCallback, useMemo } from "react";
 import { useRecoilState } from "recoil";
 import { Hash } from "viem";
-import { useContractWrite, useWaitForTransaction } from "wagmi";
+import { useContractWrite } from "wagmi";
 import useConnectedNetwork from "@/hooks/network";
 import { USDT_ADDRESS_BY_CHAINID } from "@/constant/contracts/tokens";
 import USDT_ABI from "@/constant/abis/USDT.json";

src/components/header/HamburgerMenu.tsx

@@ -30,7 +30,7 @@ const CustomMenuItem = (props: {
   return (
     <Flex
       align={"center"}
-      target="_blank"
+      target='_blank'
       as={"a"}
       href={link}
       h={"40px"}
@@ -40,11 +40,11 @@ const CustomMenuItem = (props: {
       _hover={{ bg: "#313442" }}
       borderRadius={"8px"}
     >
-      <Flex mr="9px">
+      <Flex mr='9px'>
         <Image
           width={title === "User Guide" || title === "Get Help" ? 24 : 18}
           src={icon}
-          alt="icon"
+          alt='icon'
         />
       </Flex>
       <Text
@@ -88,7 +88,7 @@ const HamburgerMenu = () => {
   return (
     <Drawer
       isOpen={isHamburgerOpen}
-      placement="right"
+      placement='right'
       onClose={() => {
         setHamburgerOpen(false);
       }}
@@ -118,28 +118,28 @@ const HamburgerMenu = () => {
             flexDir={"column"}
             padding={"32px 21px"}
           >
-            <Image src={LOGO} alt="Logo" />
+            <Image src={LOGO} alt='Logo' />
             <Box padding={"8px"} marginTop={"32px"}>
-              <RouterMenu title="BRIDGE & SWAP" link="/" />
-              <RouterMenu title="POOLS" link="/pools" />
+              <RouterMenu title='Bridge & Swap' link='/' />
+              <RouterMenu title='Liquidity' link='/pools' />
               <CustomMenuItem
-                link="https://tokamaknetwork.gitbook.io/home/02-service-guide/tokamak-bridge"
-                title="User Guide"
+                link='https://tokamaknetwork.gitbook.io/home/02-service-guide/tokamak-bridge'
+                title='User Guide'
                 icon={userguide}
                 hoverIcon={userGuideHover}
               />
               <CustomMenuItem
-                link="https://forms.gle/GLY1PZq4BH4RqZY79"
-                title="Get Help"
+                link='https://forms.gle/GLY1PZq4BH4RqZY79'
+                title='Get Help'
                 icon={lightbulb}
                 hoverIcon={lightbulbHover}
               />
-              <Flex w="100%" alignItems={"center"} mt={"8px"} mb={"8px"}>
-                <Flex w="52px" h="1px" bg={"#757893"} mr="10px"></Flex>
+              <Flex w='100%' alignItems={"center"} mt={"8px"} mb={"8px"}>
+                <Flex w='52px' h='1px' bg={"#757893"} mr='10px'></Flex>
                 <Text color={"#757893"} fontSize={"12px"}>
                   COMMUNITY
                 </Text>
-                <Flex w="52px" h="1px" bg={"#757893"} ml="10px"></Flex>
+                <Flex w='52px' h='1px' bg={"#757893"} ml='10px'></Flex>
               </Flex>
               {menuLinks.map((link: any) => {
                 return (

src/components/header/Index.tsx

@@ -41,6 +41,8 @@ import { useInOutTokens } from "@/hooks/token/useInOutTokens";
 import { useAccount } from "wagmi";
 import WARNING_ICON from "assets/icons/pool/unsupportedNetworkWarning.svg";
 import { useGetMode } from "@/hooks/mode/useGetMode";
+import { accountDrawerStatus } from "@/recoil/modal/atom";
+import { useRecoilValue } from "recoil";
 
 const menuList = [
   {
@@ -96,19 +98,19 @@ const CustomMenuItem = (props: {
     <MenuItem
       onMouseEnter={() => setHover(true)}
       onMouseLeave={() => setHover(false)}
-      target="_blank"
+      target='_blank'
       as={"a"}
       href={link}
       h={"18px"}
       marginBottom={"16px"}
       padding={"0px"}
       // border={'1px solid red'}
-      bg="#0F0F12"
+      bg='#0F0F12'
       _focus={{ background: "0F0F12" }}
       _hover={{ bg: "none", color: "#2a72e5" }}
     >
-      <Flex mr="9px">
-        <Image src={hover ? hoverIcon : icon} alt="icon" />
+      <Flex mr='9px'>
+        <Image src={hover ? hoverIcon : icon} alt='icon' />
       </Flex>
       <Text
         fontSize={
@@ -129,7 +131,7 @@ export const menuLinks = [
     hoverIcon: mediumHover,
   },
   {
-    title: "Twitter",
+    title: "X",
     link: "https://twitter.com/tokamak_network",
     icon: twitter,
     hoverIcon: twitterHover,
@@ -172,6 +174,7 @@ export default function Header() {
   const { isSupportedChain } = useConnectedNetwork();
   const router = useRouter();
   const { mode } = useGetMode();
+  const isAccountDrawerOpen = useRecoilValue(accountDrawerStatus);
 
   const handleMenuButtonhover = (
     event: React.MouseEvent<HTMLButtonElement, MouseEvent>
@@ -252,13 +255,13 @@ export default function Header() {
                   // width={"24px"}
                   transform={menuState === true ? "rotate(180deg)" : ""}
                 >
-                  <Image src={arrow} alt="icon_arrow" />
+                  <Image src={arrow} alt='icon_arrow' />
                 </Flex>
               </Flex>
             </MenuButton>
             <MenuList
               onMouseLeave={() => setMenuState(false)}
-              bg="#0F0F12"
+              bg='#0F0F12'
               mt={"17px"}
               border={"1px solid #313442"}
               style={{
@@ -270,23 +273,23 @@ export default function Header() {
               }}
             >
               <CustomMenuItem
-                link="https://docs.tokamak.network/home/02-service-guide/tokamak-bridge"
-                title="User Guide"
+                link='https://docs.tokamak.network/home/02-service-guide/tokamak-bridge'
+                title='User Guide'
                 icon={userguide}
                 hoverIcon={userGuideHover}
               />
               <CustomMenuItem
-                link="https://forms.gle/GLY1PZq4BH4RqZY79"
-                title="Get Help"
+                link='https://forms.gle/GLY1PZq4BH4RqZY79'
+                title='Get Help'
                 icon={lightbulb}
                 hoverIcon={lightbulbHover}
               />
-              <Flex w="100%" alignItems={"center"} mb={"16px"}>
-                <Flex w="24px" h="1px" bg={"#757893"} mr="10px"></Flex>
+              <Flex w='100%' alignItems={"center"} mb={"16px"}>
+                <Flex w='24px' h='1px' bg={"#757893"} mr='10px'></Flex>
                 <Text color={"#757893"} fontSize={"12px"}>
                   COMMUNITY
                 </Text>
-                <Flex w="24px" h="1px" bg={"#757893"} ml="10px"></Flex>
+                <Flex w='24px' h='1px' bg={"#757893"} ml='10px'></Flex>
               </Flex>
               {menuLinks.map((link: any) => {
                 return (
@@ -327,7 +330,7 @@ export default function Header() {
           <Account />
           {/* <AccountModal /> */}
         </Flex>
-        {!menuView && (
+        {!menuView && !isAccountDrawerOpen && (
           <Flex
             w={!mobileView ? "48px" : "32px"}
             h={!mobileView ? "48px" : "32px"}
@@ -342,7 +345,7 @@ export default function Header() {
             }}
           >
             <Image
-              alt="hamburger"
+              alt='hamburger'
               src={!mobileView ? big_hamburger : hamburger}
             />
           </Flex>

src/components/history/AccountHistory.tsx

@@ -25,6 +25,8 @@ import {
 import { Action, CT_ACTION, HISTORY_SORT } from "@/staging/types/transaction";
 import { useHistoryTab } from "@/staging/hooks/useHistoryTab";
 import { BetaIcon } from "@/staging/components/cross-trade/components/common/BetaIcon";
+import { ctConfirmModalStatus } from "@/recoil/modal/atom";
+import { useRecoilValue } from "recoil";
 
 export default function AccountHistory() {
   const [isOpen, setIsOpen] = useRecoilState(accountDrawerStatus);
@@ -35,6 +37,7 @@ export default function AccountHistory() {
   const { isOnOfficialStandard, isOnCrossTrade } = useHistoryTab();
   const [_selectedTransactionCategory, setSelectedTransactionCategory] =
     useRecoilState(selectedTransactionCategory);
+  const checkConfirmModal = useRecoilValue(ctConfirmModalStatus).isOpen;
 
   useEffect(() => {
     if (address === undefined) {
@@ -131,7 +134,7 @@ export default function AccountHistory() {
       variant='clickThrough'
       trapFocus={false}
       useInert={true}
-      blockScrollOnMount={false}
+      blockScrollOnMount={!checkConfirmModal ? true : false}
     >
       <DrawerOverlay
         bg={{ base: "#000000F0", lg: "none" }}

src/components/mobile/input/MobileTokenBox.tsx

@@ -22,6 +22,8 @@ import { tokenModalStatus } from "@/recoil/bridgeSwap/atom";
 import { MAINNET_CONTRACTS } from "@/constant/contracts";
 import useIsTon from "@/hooks/token/useIsTon";
 import { useAccount } from "wagmi";
+import formatNumber from "@/staging/utils/formatNumbers";
+import commafy from "@/utils/trim/commafy";
 
 export default function MobileTokenBox(props: {
   inToken: boolean;
@@ -179,46 +181,46 @@ export default function MobileTokenBox(props: {
   return (
     <Flex
       visibility={visibilityTypeState ? "visible" : "hidden"}
-      direction="column"
+      direction='column'
       ml={inToken ? "" : "5"}
       mr={inToken ? "5" : ""}
-      mt="2"
-      w="148px"
-      h="84px"
+      mt='2'
+      w='148px'
+      h='84px'
       cursor={inToken ? "pointer" : "default"} // 조건에 따른 cursor 스타일 설정
       onClick={inToken ? handleClick : undefined} // 조건에 따라 onClick 핸들러 설정
     >
       {visibilityTypeState && valueProp ? (
         <>
-          <Box bg="#1F2128" p="2" rounded="md" w="full" mb="1">
-            <Text fontSize="md" fontWeight="bold" color="white">
+          <Box bg='#1F2128' p='2' rounded='md' w='full' mb='1'>
+            <Text fontSize='md' fontWeight='bold' color='white'>
               {valueProp}
             </Text>
           </Box>
-          <Text fontSize="sm" color="gray.400">
-            ${marketPrice}
+          <Text fontSize='sm' color='gray.400'>
+            ${commafy(marketPrice)}
           </Text>
         </>
       ) : (
         <>
           <Box
-            p="5"
-            rounded="md"
-            w="full"
-            bgSize="200% 100%"
-            mb="1"
-            bgGradient="linear(to-r, #2b2f42 8%, #2b2f42 38%, #1c1d25 54%)"
+            p='5'
+            rounded='md'
+            w='full'
+            bgSize='200% 100%'
+            mb='1'
+            bgGradient='linear(to-r, #2b2f42 8%, #2b2f42 38%, #1c1d25 54%)'
             borderRadius={"8px"}
             animation={`${useIsMoibleLoading} 10s linear infinite`}
           />
           <Box
-            bg="#1F2128"
-            p="2"
-            rounded="md"
-            w="full"
-            bgSize="200% 100%"
-            mb="1"
-            bgGradient="linear(to-r, #2b2f42 8%, #2b2f42 38%, #1c1d25 54%)"
+            bg='#1F2128'
+            p='2'
+            rounded='md'
+            w='full'
+            bgSize='200% 100%'
+            mb='1'
+            bgGradient='linear(to-r, #2b2f42 8%, #2b2f42 38%, #1c1d25 54%)'
             borderRadius={"8px"}
             animation={`${useIsMoibleLoading} 10s linear infinite`}
           />

src/components/mobile/input/MobileTokenInput.tsx

@@ -38,6 +38,7 @@ import Warning from "@/app/BridgeSwap/Warning";
 
 import useAmountModal from "@/hooks/modal/useAmountModal";
 import { mobileTokenModalStatus } from "@/recoil/mobile/atom";
+import commafy from "@/utils/trim/commafy";
 
 export default function MobileTokenInput(props: {
   inToken: boolean;
@@ -449,9 +450,9 @@ export default function MobileTokenInput(props: {
       ) : (
         <Flex
           flexDir={"column"}
-          border="1px solid"
-          borderColor="#59628d"
-          borderRadius="8px"
+          border='1px solid'
+          borderColor='#59628d'
+          borderRadius='8px'
         >
           {/* {mobileView && <Warning />} */}
           <Flex
@@ -474,11 +475,11 @@ export default function MobileTokenInput(props: {
                 {/* <Warning /> */}
                 <Input
                   autoFocus
-                  autoComplete="off"
-                  type="number"
-                  pattern="[0-9]*"
+                  autoComplete='off'
+                  type='number'
+                  pattern='[0-9]*'
                   flexGrow={1}
-                  inputMode="decimal"
+                  inputMode='decimal'
                   id={inToken ? "LeftInput" : "RightInput"}
                   w={"100%"}
                   h={"24px"}
@@ -521,11 +522,9 @@ export default function MobileTokenInput(props: {
                   <GradientSpinner />
                 </Flex>
               ) : (
-                <Text
-                  ml={"5px"}
-                  fontSize={14}
-                  color={"#A0A3AD"}
-                >{`$${marketPrice}`}</Text>
+                <Text ml={"5px"} fontSize={14} color={"#A0A3AD"}>{`$${commafy(
+                  marketPrice
+                )}`}</Text>
               ))}
             {hasMaxButton && !isMax && (
               <Button