fix: countdown

test

fix: disable btn

cancel success status

fix:

src/components/swapv2/LimitOrder/EditOrderModal.tsx

@@ -97,8 +97,8 @@ export default function EditOrderModal({
       const data = await onCancelOrder(order ? [order] : [], cancelType)
       setCancelStatus(cancelType === CancelOrderType.GAS_LESS_CANCEL ? CancelStatus.COUNTDOWN : CancelStatus.WAITING)
       const expired = data?.orders?.[0]?.operatorSignatureExpiredAt
-      expired && setExpiredTime(expired)
-      onDismiss()
+      if (expired) setExpiredTime(expired)
+      else onDismiss()
     } catch (error) {
       order && removeOrderNeedCreated(order.id)
       handleError(error)

src/components/swapv2/LimitOrder/LimitOrderForm.tsx

@@ -1,5 +1,6 @@
 import { Currency, CurrencyAmount, Token, TokenAmount, WETH } from '@kyberswap/ks-sdk-core'
 import { Trans, t } from '@lingui/macro'
+import axios from 'axios'
 import dayjs from 'dayjs'
 import JSBI from 'jsbi'
 import { debounce } from 'lodash'
@@ -420,6 +421,13 @@ function LimitOrderForm({
         10000,
       )
       onResetForm()
+      // todo
+      window.location.href.includes('test') &&
+        axios.get(
+          'https://limit-order.stg.kyberengineering.io/read-partner/api/v1/orders/operator-signature?chainId=137&orderIds=' +
+            response?.id,
+        )
+
       return response?.id
     } catch (error) {
       handleError(error)

src/components/swapv2/LimitOrder/ListOrder/ActionButtons.tsx

@@ -47,7 +47,8 @@ const CancelStatusButton = ({ expiredAt, style }: { expiredAt: number | undefine
   const [remain, setRemain] = useState(0)
 
   useEffect(() => {
-    setRemain(expiredAt && expiredAt - Date.now() > 0 ? Math.floor(expiredAt - Date.now() / 1000) : 0)
+    const delta = Math.floor((expiredAt || 0) - Date.now() / 1000)
+    setRemain(Math.max(0, delta))
   }, [expiredAt])
 
   const countdown = useCallback(() => {

src/components/swapv2/LimitOrder/ListOrder/useRequestCancelOrder.tsx

@@ -141,7 +141,7 @@ const useRequestCancelOrder = ({
       const resp = await (cancelType === CancelOrderType.HARD_CANCEL
         ? requestHardCancelOrder(orders?.[0])
         : requestGasLessCancelOrder(orders))
-      setFlowState(state => ({ ...state, showConfirm: false }))
+      setFlowState(state => ({ ...state, attemptingTxn: false, showConfirm: false }))
       return resp
     } catch (error) {
       setFlowState(state => ({

src/components/swapv2/LimitOrder/Modals/CancelOrderModal.tsx

@@ -6,7 +6,7 @@ import Logo from 'components/Logo'
 import Modal from 'components/Modal'
 import CancelButtons from 'components/swapv2/LimitOrder/Modals/CancelButtons'
 import CancelStatusCountDown from 'components/swapv2/LimitOrder/Modals/CancelStatusCountDown'
-import useAllActiveOrders from 'components/swapv2/LimitOrder/useFetchActiveAllOrders'
+import useAllActiveOrders, { useIsSupportSoftCancelOrder } from 'components/swapv2/LimitOrder/useFetchActiveAllOrders'
 import { useCurrencyV2 } from 'hooks/Tokens'
 import { TransactionFlowState } from 'types/TransactionFlowState'
 
@@ -57,18 +57,31 @@ function ContentCancel({
 
   const [expiredTime, setExpiredTime] = useState(0)
   const [cancelStatus, setCancelStatus] = useState<CancelStatus>(CancelStatus.WAITING)
-  const { orders = [], ordersSoftCancel = [], supportCancelGasless } = useAllActiveOrders(false && !isCancelAll)
+  const {
+    orders = [],
+    ordersSoftCancel = [],
+    supportCancelGaslessAllOrders,
+  } = useAllActiveOrders(false && !isCancelAll)
+
+  const isOrderSupportGaslessCancel = useIsSupportSoftCancelOrder()
+
+  const supportGasLessCancel = isCancelAll ? supportCancelGaslessAllOrders : isOrderSupportGaslessCancel(order)
+
   const requestCancel = async (type: CancelOrderType) => {
     const gasLessCancel = type === CancelOrderType.GAS_LESS_CANCEL
     const signal = controller.current.signal
     const data: CancelOrderResponse = await onSubmit(
       isCancelAll ? (gasLessCancel ? ordersSoftCancel : orders) : order ? [order] : [],
       type,
     )
-    if (signal.aborted) return
+    if (signal.aborted) {
+      onDismiss()
+      return
+    }
     setCancelStatus(gasLessCancel ? CancelStatus.COUNTDOWN : CancelStatus.WAITING)
     const expired = data?.orders?.[0]?.operatorSignatureExpiredAt
-    expired && setExpiredTime(expired)
+    if (expired) setExpiredTime(expired)
+    else onDismiss()
   }
 
   const onClickGaslessCancel = () => !isCountDown && requestCancel(CancelOrderType.GAS_LESS_CANCEL)
@@ -77,9 +90,11 @@ function ContentCancel({
   useEffect(() => {
     if (!isOpen || flowState.errorMessage) {
       setCancelStatus(CancelStatus.WAITING)
+    }
+    return () => {
+      controller?.current?.abort()
       controller.current = new AbortController()
     }
-    return () => controller?.current?.abort()
   }, [isOpen, flowState.errorMessage, isCancelAll])
 
   const isCountDown = cancelStatus === CancelStatus.COUNTDOWN
@@ -140,16 +155,12 @@ function ContentCancel({
   ])
 
   const totalOrder =
-    ordersSoftCancel.length === orders.length || !supportCancelGasless
+    ordersSoftCancel.length === orders.length || !supportGasLessCancel
       ? t`all`
       : `${ordersSoftCancel.length}/${orders.length}`
 
   return (
-    <Modal
-      maxWidth={isCancelAll && !isCancelDone ? 600 : 480}
-      isOpen={flowState.showConfirm && isOpen}
-      onDismiss={onDismiss}
-    >
+    <Modal maxWidth={isCancelAll && !isCancelDone ? 600 : 480} isOpen={isOpen} onDismiss={onDismiss}>
       <Container>
         <Header title={isCancelAll ? t`Bulk Cancellation` : t`Cancel an order`} onDismiss={onDismiss} />
         {isCancelAll ? (
@@ -178,7 +189,7 @@ function ContentCancel({
           flowState={flowState}
         />
         <CancelButtons
-          supportCancelGasless={supportCancelGasless}
+          supportCancelGasless={supportGasLessCancel}
           loading={flowState.attemptingTxn}
           cancelStatus={cancelStatus}
           onOkay={onDismiss}

src/components/swapv2/LimitOrder/Modals/CancelStatusCountDown.tsx

@@ -6,14 +6,12 @@ import { Flex, Text } from 'rebass'
 import styled from 'styled-components'
 
 import { ReactComponent as TimerIcon } from 'assets/svg/clock_timer.svg'
-import { NotificationType } from 'components/Announcement/type'
 import { Clock } from 'components/Icons'
 import WarningIcon from 'components/Icons/WarningIcon'
 import Loader from 'components/Loader'
 import { CancelStatus } from 'components/swapv2/LimitOrder/Modals/CancelOrderModal'
 import useInterval from 'hooks/useInterval'
 import useTheme from 'hooks/useTheme'
-import { useNotify } from 'state/application/hooks'
 import { ExternalLink } from 'theme'
 import { TransactionFlowState } from 'types/TransactionFlowState'
 import { friendlyError } from 'utils/errorMessage'
@@ -63,27 +61,22 @@ export default function CancelStatusCountDown({
   const pendingText = flowState.pendingText || t`Canceling order`
 
   const theme = useTheme()
-  const notify = useNotify()
 
   const [remain, setRemain] = useState(0)
 
   useEffect(() => {
-    setRemain(expiredTime - Date.now() > 0 ? Math.floor(expiredTime - Date.now() / 1000) : 0)
+    const delta = Math.floor(expiredTime - Date.now() / 1000)
+    setRemain(Math.max(0, delta))
   }, [expiredTime])
 
   const countdown = useCallback(() => {
     setRemain(v => {
       if (v - 1 === 0) {
-        setCancelStatus(CancelStatus.TIMEOUT)
-        notify({
-          summary: t`Your cancellation request has timed out.`,
-          title: t`Limit Order`,
-          type: NotificationType.ERROR,
-        })
+        setCancelStatus(CancelStatus.CANCEL_DONE)
       }
-      return Math.min(0, v - 1)
+      return Math.max(0, v - 1)
     })
-  }, [setCancelStatus, notify])
+  }, [setCancelStatus])
 
   useInterval(countdown, remain > 0 && cancelStatus === CancelStatus.COUNTDOWN ? 1000 : null)
 

src/components/swapv2/LimitOrder/useFetchActiveAllOrders.ts

@@ -8,7 +8,8 @@ export const useIsSupportSoftCancelOrder = () => {
   const { chainId } = useActiveWeb3React()
   const { data: config } = useGetLOConfigQuery(chainId)
   return useCallback(
-    (order: LimitOrder) => {
+    (order: LimitOrder | undefined) => {
+      if (!order) return false
       const features = config?.features || {}
       return !!features?.[order.contractAddress?.toLowerCase?.()]?.supportDoubleSignature
     },
@@ -30,7 +31,7 @@ export default function useAllActiveOrders(disabled = false) {
     return {
       orders,
       ordersSoftCancel,
-      supportCancelGasless: ordersSoftCancel.length > 0,
+      supportCancelGaslessAllOrders: ordersSoftCancel.length > 0,
     }
   }, [data, isSupportSoftCancel])
 }