Merge pull request #282 from tokamak-network/ale/BK-127/CT-hotfix

[BK-133] - v1.2.1

src/app/BridgeSwap/components/ActionButton.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { actionMode } from "@/recoil/bridgeSwap/atom";
 import { Button } from "@chakra-ui/react";
 import { useRecoilValue } from "recoil";
@@ -31,7 +31,7 @@ export default function ActionButton() {
   const { isNotSupportForSwap } = useBridgeSupport();
   const [isLoading] = useIsLoading();
 
-  const [isDisabled, setIsDisabled] = useState<boolean>(true);
+  // const [isDisabled, setIsDisabled] = useState<boolean>(true);
   const { isBalanceOver, isInputZero } = useInputBalanceCheck();
   const txPending = useRecoilValue(txPendingStatus);
   const { outToken, inToken } = useInOutTokens();
@@ -42,29 +42,23 @@ export default function ActionButton() {
   const needToOpenWithdrawModal = mode === "Withdraw";
   const needToOpenDepositModal = mode === "Deposit";
   const needToOpenSwapModal = mode === "Swap";
-
   const isL2 = inNetwork?.layer === "L2" || outNetwork?.layer === "L2"; //checks if the action is L2
-
   const deactivateButton = status === "Active" && isL2; //when the maintenance banner is active, this will disable the action button related to all L2 actions
-  useEffect(() => {
-    const timeoutId = setTimeout(() => {
-      const disabled =
-        !isReady ||
-        isApproved === false ||
-        (mode === "Swap" && isLoading) ||
-        isNotSupportForSwap ||
-        isBalanceOver ||
-        txPending ||
-        (mode === "Swap" && outToken === null) ||
-        isInputZero ||
-        (mode === "Swap" && isTONatPair) ||
-        deactivateButton;
-      setIsDisabled(disabled);
-    }, 200);
 
-    return () => {
-      clearTimeout(timeoutId);
-    };
+  const isDisabled = useMemo(() => {
+    if ((mode === "Withdraw" || !isConnected) && !isInputZero) return false;
+    const disabled =
+      !isReady ||
+      isApproved === false ||
+      (mode === "Swap" && isLoading) ||
+      isNotSupportForSwap ||
+      isBalanceOver ||
+      txPending ||
+      (mode === "Swap" && outToken === null) ||
+      isInputZero ||
+      (mode === "Swap" && isTONatPair) ||
+      deactivateButton;
+    return disabled;
   }, [
     isReady,
     isApproved,
@@ -76,17 +70,65 @@ export default function ActionButton() {
     isInputZero,
     mode,
     outToken,
+    isConnected,
   ]);
+
+  // useEffect(() => {
+  //   const timeoutId = setTimeout(() => {
+  //     const disabled =
+  //       !isReady ||
+  //       isApproved === false ||
+  //       (mode === "Swap" && isLoading) ||
+  //       isNotSupportForSwap ||
+  //       isBalanceOver ||
+  //       txPending ||
+  //       (mode === "Swap" && outToken === null) ||
+  //       isInputZero ||
+  //       (mode === "Swap" && isTONatPair) ||
+  //       deactivateButton;
+  //     setIsDisabled(disabled);
+  //   }, 200);
+
+  //   return () => {
+  //     clearTimeout(timeoutId);
+  //   };
+  // }, [
+  //   isReady,
+  //   isApproved,
+  //   isLoading,
+  //   isNotSupportForSwap,
+  //   isBalanceOver,
+  //   txPending,
+  //   isTONatPair,
+  //   isInputZero,
+  //   mode,
+  //   outToken,
+  // ]);
+
   const { onClick } = useCallBridgeSwapAction();
   const { connetAndDisconntWallet } = useConnectWallet();
-
-  {
-    /** add coming code  @Robert */
-  }
   const { onOpenCTOptionModal } = useCTOptionModal();
   const handleConfirm = useHandleConfirm();
   const { onOpenSwapConfirmModal } = useSwapConfirmModal();
 
+  const buttonAction = useCallback(() => {
+    if (!isConnected) return connetAndDisconntWallet();
+    if (needToOpenWithdrawModal) return onOpenCTOptionModal();
+    if (needToOpenDepositModal)
+      return handleConfirm(Action.Deposit, Status.Initiate);
+    if (needToOpenSwapModal) return onOpenSwapConfirmModal();
+    return onClick();
+  }, [
+    isConnected,
+    needToOpenWithdrawModal,
+    needToOpenDepositModal,
+    needToOpenSwapModal,
+    inToken,
+    outToken,
+    inNetwork,
+    outNetwork
+  ]);
+
   return (
     <>
       {/** FW UI test End @Robert*/}
@@ -100,27 +142,17 @@ export default function ActionButton() {
         _disabled={{}}
         bgColor={!isConnected ? "#007AFF" : isDisabled ? "#17181D" : "#007AFF"}
         color={!isConnected ? "fff" : isDisabled ? "#8E8E92" : "#fff"}
-        isDisabled={!isConnected ? false : isDisabled}
-        onClick={
-          isConnected === false
-            ? () => connetAndDisconntWallet()
-            : needToOpenWithdrawModal
-            ? () => onOpenCTOptionModal()
-            : needToOpenDepositModal
-            ? () => handleConfirm(Action.Deposit, Status.Initiate)
-            : needToOpenSwapModal
-            ? () => onOpenSwapConfirmModal()
-            : onClick
-        }
+        isDisabled={isDisabled}
+        onClick={buttonAction}
       >
         {!isConnected && "Connect Wallet"}
         {!isConnected
           ? null
           : isConnected && mode === null
-          ? "Select Network"
-          : mode === "Withdraw"
-          ? "Next"
-          : mode?.replaceAll("ETH-", "")}{" "}
+            ? "Select Network"
+            : mode === "Withdraw"
+              ? "Next"
+              : mode?.replaceAll("ETH-", "")}{" "}
         <span style={{ fontSize: "10px", marginLeft: "3px", marginTop: "3px" }}>
           {deactivateButton ? "(Service under maintenance)" : ""}
           {/* {'(Service under maintenance)'} */}

src/components/tooltip/CustomTooltip.tsx

@@ -18,7 +18,10 @@ export default function CustomTooltip(props: {
     px?: string;
     py?: string;
     tooltipLineHeight?: string;
+    left?: string;
   };
+  labelStyle?: CSSProperties;
+  tooltipArrowStyle?: CSSProperties;
   needArrow?: boolean;
 }) {
   const [isOpen, setIsOpen] = useState<boolean>(false);
@@ -47,6 +50,7 @@ export default function CustomTooltip(props: {
           color={"#fff"}
           pos={"relative"}
           {...props.style}
+          style={props.labelStyle}
         >
           <Text
             w={"100%"}
@@ -77,7 +81,13 @@ export default function CustomTooltip(props: {
       >
         {props.content}
         {arrowNeeded && isOpen && (
-          <Box pos={"absolute"} top={"-12px"} left={"4px"} zIndex={100}>
+          <Box
+            pos={"absolute"}
+            top={"-12px"}
+            left={"4px"}
+            zIndex={100}
+            style={props.tooltipArrowStyle}
+          >
             <Image src={TooltipArrow} alt={"TooltipArrow"}></Image>
           </Box>
         )}

src/components/ui/GetHelp.tsx

@@ -0,0 +1,13 @@
+import { Box } from "@chakra-ui/react";
+import LampIcon from "@/assets/icons/lamp.svg";
+import Image from "next/image";
+import Link from "next/link";
+import { GoogleFormURL } from "@/constant/url";
+
+export default function GetHelp() {
+  return (
+    <Link href={GoogleFormURL} target="_blank">
+      <Image src={LampIcon} alt="Lamp"></Image>
+    </Link>
+  );
+}

src/constant/url/index.ts

@@ -0,0 +1,2 @@
+export const GoogleFormURL =
+  "https://docs.google.com/forms/u/1/d/e/1FAIpQLSfCUJjuABK0Locc3Fqwr2W5eHI-Hpj6wiiGceBr1e4q4g9nmg/viewform?usp=send_form";

src/graphql/thegraph/apollosForCT.ts

@@ -36,8 +36,32 @@ const authMiddleware = (chainId: SupportedChainId) =>
     return forward(operation);
   });
 
+const cacheL1 = new InMemoryCache({
+  typePolicies: {
+    Query: {
+      fields: {
+        requestCTs: {
+          merge(existing = [], incoming) {
+            return incoming;
+          },
+        },
+        cancelCTs: {
+          merge(existing = [], incoming) {
+            return incoming;
+          },
+        },
+        providerClaimCTs: {
+          merge(existing = [], incoming) {
+            return incoming;
+          },
+        },
+      },
+    },
+  },
+});
+
 const apolloClient_Ethereum = new ApolloClient({
-  cache: new InMemoryCache(),
+  cache: cacheL1,
   link: concat(authMiddleware(SupportedChainId.MAINNET), httpLink),
 });
 
@@ -47,7 +71,7 @@ const apolloClient_Titan = new ApolloClient({
 });
 
 const apolloClient_Sepolia = new ApolloClient({
-  cache: new InMemoryCache(),
+  cache: cacheL1,
   link: concat(authMiddleware(SupportedChainId.SEPOLIA), httpLink),
 });
 

src/recoil/history/transaction.ts

@@ -1,4 +1,4 @@
-import { Action, CT_ACTION, HISTORY_SORT } from "@/staging/types/transaction";
+import { Action, CT_ACTION, DepositTransactionHistory, HISTORY_SORT, WithdrawTransactionHistory } from "@/staging/types/transaction";
 import { atom } from "recoil";
 
 export const userTransactions = atom<any>({
@@ -15,3 +15,14 @@ export const selectedTransactionCategory = atom<Action | CT_ACTION>({
   key: "selectedTransactionCategory",
   default: Action.Deposit,
 });
+
+
+export const depositTxHistory = atom<DepositTransactionHistory[] | null>({
+  key: "depositTransactionHistory",
+  default: null,
+});
+
+export const withdrawTxHistory = atom<WithdrawTransactionHistory[] | null>({
+  key: "withdrawTransactionHistory",
+  default: null,
+});

src/recoil/modal/atom.ts

@@ -103,9 +103,13 @@ export const ctRefreshModalStatus = atom<{
   },
 });
 
-export const ctOptionModalStatus = atom<boolean>({
+export const ctOptionModalStatus = atom<{
+  isOpen: boolean;
+}>({
   key: "ctOptionModalStatus",
-  default: false,
+  default: {
+    isOpen: false,
+  },
 });
 
 export const ctUpdateFeeModalStatus = atom<{