[BK-123] - v1.2 Final Check

src/app/BridgeSwap/Details.tsx

@@ -37,7 +37,7 @@ export function Details() {
       {!mobileView ? (
         <ActionButton />
       ) : (
-        <Flex direction='column' rowGap={"12px"}>
+        <Flex direction="column" rowGap={"12px"}>
           {showWarning && <Warning />}
           <ActionButton />
         </Flex>

src/app/BridgeSwap/components/ActionButton.tsx

@@ -12,8 +12,6 @@ import useInputBalanceCheck from "@/hooks/token/useInputCheck";
 import useConnectWallet from "@/hooks/account/useConnectWallet";
 import { useInOutTokens } from "@/hooks/token/useInOutTokens";
 import useIsTon from "@/hooks/token/useIsTon";
-import { confirmWithdrawStats } from "@/recoil/modal/atom";
-import { useRecoilState } from "recoil";
 import { bannerStatus } from "@/recoil/bridgeSwap/atom";
 import { useInOutNetwork } from "@/hooks/network";
 import "@fontsource/poppins/600.css";

src/hooks/history/useFinalize.ts

@@ -9,14 +9,16 @@ import useTxConfirmModal from "@/hooks/modal/useTxConfirmModal";
 import { useProvier } from "@/hooks/provider/useProvider";
 import { getWithdarwCalldata } from "@/utils/history/getWithdrawCalldata";
 import { WithdrawTransactionHistory } from "@/staging/types/transaction";
+import useDepositWithdrawConfirmModal from "@/staging/components/new-confirm/hooks/useDepositWithdrawConfirmModal";
 
 export const useFinalize = (params?: WithdrawTransactionHistory) => {
   const { isConnectedToMainNetwork, isLayer2 } = useConnectedNetwork();
   const { switchNetworkAsync } = useSwitchNetwork();
   const { L1MESSENGER_CONTRACT } = useContract();
-  const { setModalOpen } = useTxConfirmModal();
+  const { setModalOpen, setIsOpen } = useTxConfirmModal();
   const { L1Provider, L2Provider } = useProvier();
-
+  const { onCloseDepositWithdrawConfirmModal } =
+    useDepositWithdrawConfirmModal();
   const { data, write, isError } = useContractWrite({
     address: L1MESSENGER_CONTRACT,
     abi: L1CrossDomainMessenger_ABI,
@@ -37,22 +39,23 @@ export const useFinalize = (params?: WithdrawTransactionHistory) => {
         throw new Error("Not connected to any network");
       if (!L1Provider || !L2Provider) throw new Error("Provider not found");
       if (!params) throw new Error("params not found");
+      if (params)
+        if (isLayer2) {
+          const chainId = isConnectedToMainNetwork
+            ? SupportedChainId.MAINNET
+            : SupportedChainId.SEPOLIA;
+          const res = await switchNetworkAsync?.(chainId);
 
-      if (isLayer2) {
-        const chainId = isConnectedToMainNetwork
-          ? SupportedChainId.MAINNET
-          : SupportedChainId.SEPOLIA;
-        const res = await switchNetworkAsync?.(chainId);
-
-        //if user cancel or fail the network switch
-        if (!res) return;
-      }
+          //if user cancel or fail the network switch
+          if (!res) return;
+        }
 
       const { resolved, stateBatchAppended, blockNumber } = params;
 
       if (!stateBatchAppended) throw new Error("StateBatchAppended not found");
-
+      onCloseDepositWithdrawConfirmModal();
       //close detail modal and open confirming modal
+      setIsOpen(true);
       setModalOpen("confirming");
 
       const proof = await getWithdarwCalldata({

src/staging/components/cross-trade/components/core/main/CTMain.tsx

@@ -27,6 +27,7 @@ import capitalizeFirstLetter from "@/staging/utils/capitalizeFirstLetter";
 import { convertNumber } from "@/utils/trim/convertNumber";
 import { formatProfit } from "@/staging/utils/formatProfit";
 import formatNumber from "@/staging/utils/formatNumbers";
+import { useProvideCTGas } from "../../../hooks/useCTGas";
 
 {
   /** 
@@ -163,19 +164,19 @@ export default function CTMain() {
   }, []);
 
   return mobileView ? (
-    <Flex direction='column' width='100%' height='100%' padding='0'>
+    <Flex direction="column" width="100%" height="100%" padding="0">
       {displayedItems.length === 0 && (
         <Flex
-          justifyContent='center'
-          alignItems='center'
-          height='100%'
-          flexDirection='column'
+          justifyContent="center"
+          alignItems="center"
+          height="100%"
+          flexDirection="column"
           mt={"16px"}
         >
           <Text
-            fontSize='14px'
-            color='#E3F3FF'
-            fontWeight='400'
+            fontSize="14px"
+            color="#E3F3FF"
+            fontWeight="400"
             lineHeight={"21px"}
           >
             No active requests
@@ -213,13 +214,13 @@ export default function CTMain() {
 
         return (
           <Box
-            w='100%'
-            h='100%'
+            w="100%"
+            h="100%"
             py={"12px"}
             borderBottom={"1px solid #313442"}
             ref={index === displayedItems.length - 1 ? lastItemRef : null}
           >
-            <Flex justifyContent='space-between' alignItems={"center"}>
+            <Flex justifyContent="space-between" alignItems={"center"}>
               <Flex alignItems={"center"}>
                 <Box>
                   <TokenSymbolWithNetwork
@@ -233,40 +234,40 @@ export default function CTMain() {
                     bottom={0}
                   />
                 </Box>
-                <Flex direction={"column"} ml='12px'>
+                <Flex direction={"column"} ml="12px">
                   <Text
-                    fontSize='13px'
+                    fontSize="13px"
                     fontWeight={400}
-                    lineHeight='19.5px'
-                    color='#A0A3AD'
+                    lineHeight="19.5px"
+                    color="#A0A3AD"
                   >
                     Receive on {displayNetworkNameIn}
                   </Text>
                   <Flex alignItems={"center"}>
                     <Text
-                      fontSize='16px'
+                      fontSize="16px"
                       fontWeight={600}
-                      lineHeight='24px'
-                      color='#FFFFFF'
-                      mr='3px'
+                      lineHeight="24px"
+                      color="#FFFFFF"
+                      mr="3px"
                     >
                       {formatNumber(formattedAmount)} {item.outToken.symbol}
                     </Text>
-                    <Text fontSize='13px' fontWeight={400} lineHeight='19.5px'>
+                    <Text fontSize="13px" fontWeight={400} lineHeight="19.5px">
                       (
                     </Text>
-                    <Text fontSize='16px' fontWeight={400} lineHeight='24px'>
+                    <Text fontSize="16px" fontWeight={400} lineHeight="24px">
                       +{formatProfit(item.profit?.percent)}%
                     </Text>
-                    <Text fontSize='13px' fontWeight={400} lineHeight='19.5px'>
+                    <Text fontSize="13px" fontWeight={400} lineHeight="19.5px">
                       )
                     </Text>
                   </Flex>
                   <Text
-                    fontSize='13px'
+                    fontSize="13px"
                     fontWeight={500}
-                    lineHeight='19.5px'
-                    color='#DB00FF'
+                    lineHeight="19.5px"
+                    color="#DB00FF"
                   >
                     Provide on {displayNetworkNameOut}
                   </Text>
@@ -278,6 +279,7 @@ export default function CTMain() {
                   crossTradeData={item}
                   subgraphData={item.subgraphData}
                   serviceFee={item.serviceFee}
+                  isNetaveProfit={item.isNetaveProfit}
                 />
               </Box>
             </Flex>
@@ -287,15 +289,15 @@ export default function CTMain() {
     </Flex>
   ) : (
     <Box
-      w='100%'
-      h='100%'
+      w="100%"
+      h="100%"
       borderRadius={"16px"}
       border={"1px solid #313442"}
-      overflow='hidden'
+      overflow="hidden"
       pos={"sticky"}
       top={500}
     >
-      <Table variant={"unstyled"} w='100%' h='100%'>
+      <Table variant={"unstyled"} w="100%" h="100%">
         <Thead pos={"sticky"} top={0} zIndex={10000}>
           <Tr
             sx={{
@@ -304,9 +306,9 @@ export default function CTMain() {
               letterSpacing: 0,
             }}
           >
-            <Th textTransform='none' minW={"210px"} maxW={"210px"}>
+            <Th textTransform="none" minW={"210px"} maxW={"210px"}>
               <Flex
-                alignItems='center'
+                alignItems="center"
                 cursor={"pointer"}
                 onClick={() => {
                   setIsDescSortedReceive(null);
@@ -325,7 +327,7 @@ export default function CTMain() {
                         ? "rotate(360deg)"
                         : "rotate(180deg)",
                     }}
-                    mr='4px'
+                    mr="4px"
                   >
                     <Image src={Polygon} alt={"Polygon"} />
                   </Flex>
@@ -346,9 +348,9 @@ export default function CTMain() {
                 />
               </Flex>
             </Th>
-            <Th textTransform='none' minW={"210px"} maxW={"210px"}>
+            <Th textTransform="none" minW={"210px"} maxW={"210px"}>
               <Flex
-                alignItems='center'
+                alignItems="center"
                 cursor={"pointer"}
                 onClick={() => {
                   setIsDescSortedProvide(null);
@@ -360,15 +362,15 @@ export default function CTMain() {
               >
                 {isDescSortedReceive !== null && (
                   <Flex
-                    ml='4px'
+                    ml="4px"
                     justifyContent={"center"}
                     alignItems={"center"}
                     style={{
                       transform: isDescSortedReceive
                         ? "rotate(360deg)"
                         : "rotate(180deg)",
                     }}
-                    mr='4px'
+                    mr="4px"
                   >
                     <Image src={Polygon} alt={"Polygon"} />
                   </Flex>
@@ -402,7 +404,7 @@ export default function CTMain() {
                 />
               </Flex>
             </Th>
-            <Th textTransform='none' minW={"140px"} maxW={"140px"} p={0}>
+            <Th textTransform="none" minW={"140px"} maxW={"140px"} p={0}>
               <Flex
                 cursor={"pointer"}
                 onClick={() => {
@@ -422,7 +424,7 @@ export default function CTMain() {
                         ? "rotate(360deg)"
                         : "rotate(180deg)",
                     }}
-                    mr='4px'
+                    mr="4px"
                   >
                     <Image src={Polygon} alt={"Polygon"} />
                   </Flex>
@@ -434,11 +436,11 @@ export default function CTMain() {
                   color={"#A0A3AD"}
                   letterSpacing={0}
                 >
-                  Profit (%)
+                  Net Profit (%)
                 </Text>
               </Flex>
             </Th>
-            <Th textTransform='none'></Th>
+            <Th textTransform="none"></Th>
           </Tr>
         </Thead>
         <Tbody>
@@ -538,6 +540,7 @@ export default function CTMain() {
                       crossTradeData={item}
                       subgraphData={item.subgraphData}
                       serviceFee={item.serviceFee}
+                      isNetaveProfit={item.isNetaveProfit}
                     />
                   </Td>
                 </Tr>

src/staging/components/cross-trade/components/core/main/CTMainProvider.tsx

@@ -22,17 +22,18 @@ import useCTUpdateFeeModal from "@/staging/components/cross-trade/hooks/useCTUpd
 import useFxConfirmModal from "@/staging/components/cross-trade/hooks/useCTConfirmModal";
 import { useTimeOver } from "@/hooks/time/useTimeOver";
 interface CTProviderProps {
-  // status: number;
   status: boolean;
   crossTradeData: CrossTradeData;
   subgraphData: T_FETCH_REQUEST_LIST_L2;
   serviceFee: BigInt;
+  isNetaveProfit: boolean;
 }
 
 export default function CTProvider({
   status,
   crossTradeData,
   subgraphData,
+  isNetaveProfit,
 }: CTProviderProps) {
   const {
     blockTimestamps,
@@ -142,7 +143,7 @@ export default function CTProvider({
       );
     }
 
-    const isDisabled = isInRelay;
+    const isDisabled = isInRelay || (isNetaveProfit && !isCreatedByUser);
     const bgColor =
       isDisabled || isInRelay
         ? "#23242B"