refactor ux

KyberNetwork · Sep 28, 2023 · 2911f48 · 2911f48
1 parent bfbf43c
commit 2911f48
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 77 deletions.
diff --git a/src/components/swapv2/LimitOrder/EditOrderModal.tsx b/src/components/swapv2/LimitOrder/EditOrderModal.tsx
@@ -1,6 +1,6 @@
 import { Trans } from '@lingui/macro'
 import { ethers } from 'ethers'
-import { useCallback, useMemo, useState } from 'react'
+import { useMemo, useState } from 'react'
 import { X } from 'react-feather'
 import { Flex, Text } from 'rebass'
 import { useGetTotalActiveMakingAmountQuery } from 'services/limitOrder'
@@ -75,17 +75,6 @@ export default function EditOrderModal({
   const [cancelStatus, setCancelStatus] = useState<CancelStatus>(CancelStatus.WAITING)
   const [expiredTime, setExpiredTime] = useState(0)
 
-  const handleError = useCallback(
-    (error: any) => {
-      setFlowState(state => ({
-        ...state,
-        attemptingTxn: false,
-        errorMessage: getErrorMessage(error),
-      }))
-    },
-    [setFlowState],
-  )
-
   const signOrder = useSignOrder(setFlowState)
   const { orderEditing } = useLimitState()
   const onSubmitEditOrder = async (cancelType: CancelOrderType) => {
@@ -101,7 +90,11 @@ export default function EditOrderModal({
       else onDismiss()
     } catch (error) {
       order && removeOrderNeedCreated(order.id)
-      handleError(error)
+      setFlowState(state => ({
+        ...state,
+        attemptingTxn: false,
+        errorMessage: getErrorMessage(error),
+      }))
     }
   }
 

diff --git a/src/components/swapv2/LimitOrder/ListOrder/index.tsx b/src/components/swapv2/LimitOrder/ListOrder/index.tsx
@@ -394,6 +394,7 @@ export default function ListLimitOrder() {
       <CancelOrderModal
         isOpen={isOpenCancel}
         flowState={flowState}
+        setFlowState={setFlowState}
         onDismiss={hideConfirmCancel}
         onSubmit={onCancelOrder}
         order={currentOrder}

diff --git a/src/components/swapv2/LimitOrder/ListOrder/useRequestCancelOrder.tsx b/src/components/swapv2/LimitOrder/ListOrder/useRequestCancelOrder.tsx
@@ -18,7 +18,7 @@ import { TransactionFlowState } from 'types/TransactionFlowState'
 import { getContract } from 'utils/getContract'
 import { sendEVMTransaction } from 'utils/sendTransaction'
 
-import { formatAmountOrder, formatSignature, getErrorMessage, getPayloadTracking } from '../helpers'
+import { formatAmountOrder, formatSignature, getPayloadTracking } from '../helpers'
 import { CancelOrderType, LimitOrder } from '../type'
 
 export const useGetEncodeLimitOrder = () => {
@@ -161,19 +161,11 @@ const useRequestCancelOrder = ({
   }
 
   const onCancelOrder = async (orders: LimitOrder[], cancelType: CancelOrderType) => {
-    try {
-      const resp = await (cancelType === CancelOrderType.HARD_CANCEL
-        ? requestHardCancelOrder(orders?.[0])
-        : requestGasLessCancelOrder(orders))
-      setFlowState(state => ({ ...state, attemptingTxn: false, showConfirm: false }))
-      return resp
-    } catch (error) {
-      setFlowState(state => ({
-        ...state,
-        attemptingTxn: false,
-        errorMessage: getErrorMessage(error),
-      }))
-    }
+    const resp = await (cancelType === CancelOrderType.HARD_CANCEL
+      ? requestHardCancelOrder(orders?.[0])
+      : requestGasLessCancelOrder(orders))
+    setFlowState(state => ({ ...state, attemptingTxn: false, showConfirm: false }))
+    return resp
   }
 
   const onUpdateOrder = async (orders: LimitOrder[], cancelType: CancelOrderType) => {

diff --git a/src/components/swapv2/LimitOrder/Modals/CancelOrderModal.tsx b/src/components/swapv2/LimitOrder/Modals/CancelOrderModal.tsx
@@ -10,8 +10,8 @@ import useAllActiveOrders, { useIsSupportSoftCancelOrder } from 'components/swap
 import { useCurrencyV2 } from 'hooks/Tokens'
 import { TransactionFlowState } from 'types/TransactionFlowState'
 
-import { BaseTradeInfo, useBaseTradeInfoLimitOrder } from '../../../../hooks/useBaseTradeInfo'
-import { calcPercentFilledOrder, formatAmountOrder } from '../helpers'
+import { useBaseTradeInfoLimitOrder } from '../../../../hooks/useBaseTradeInfo'
+import { calcPercentFilledOrder, formatAmountOrder, getErrorMessage } from '../helpers'
 import { CancelOrderFunction, CancelOrderResponse, CancelOrderType, LimitOrder, LimitOrderStatus } from '../type'
 import { Container, Header, Label, ListInfo, Note, Rate, Value } from './styled'
 
@@ -23,23 +23,27 @@ export enum CancelStatus {
 }
 
 const styleLogo = { width: 20, height: 20 }
-function ContentCancel({
+function CancelOrderModal({
   isCancelAll,
   order,
-  marketPrice,
   onSubmit,
   onDismiss,
   flowState,
   isOpen,
+  setFlowState,
 }: {
   isCancelAll: boolean
   order: LimitOrder | undefined
-  marketPrice: BaseTradeInfo | undefined
   onSubmit: CancelOrderFunction
   onDismiss: () => void
   flowState: TransactionFlowState
   isOpen: boolean
+  setFlowState: React.Dispatch<React.SetStateAction<TransactionFlowState>>
 }) {
+  const currencyIn = useCurrencyV2(order?.makerAsset) || undefined
+  const currencyOut = useCurrencyV2(order?.takerAsset) || undefined
+  const { tradeInfo: marketPrice } = useBaseTradeInfoLimitOrder(currencyIn, currencyOut)
+
   const {
     takerAssetLogoURL,
     makerAssetSymbol,
@@ -68,20 +72,28 @@ function ContentCancel({
   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) {
-      onDismiss()
-      return
+    try {
+      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) {
+        onDismiss()
+        return
+      }
+      setCancelStatus(gasLessCancel ? CancelStatus.COUNTDOWN : CancelStatus.WAITING)
+      const expired = data?.orders?.[0]?.operatorSignatureExpiredAt
+      if (expired) setExpiredTime(expired)
+      else onDismiss()
+    } catch (error) {
+      setFlowState(state => ({
+        ...state,
+        attemptingTxn: false,
+        errorMessage: getErrorMessage(error),
+      }))
     }
-    setCancelStatus(gasLessCancel ? CancelStatus.COUNTDOWN : CancelStatus.WAITING)
-    const expired = data?.orders?.[0]?.operatorSignatureExpiredAt
-    if (expired) setExpiredTime(expired)
-    else onDismiss()
   }
 
   const onClickGaslessCancel = () => !isCountDown && requestCancel(CancelOrderType.GAS_LESS_CANCEL)
@@ -207,34 +219,4 @@ function ContentCancel({
   )
 }
 
-export default function CancelOrderModal({
-  onSubmit,
-  onDismiss,
-  flowState,
-  order,
-  isOpen,
-  isCancelAll,
-}: {
-  onSubmit: CancelOrderFunction
-  onDismiss: () => void
-  flowState: TransactionFlowState
-  order?: LimitOrder
-  isOpen: boolean
-  isCancelAll: boolean
-}) {
-  const currencyIn = useCurrencyV2(order?.makerAsset) || undefined
-  const currencyOut = useCurrencyV2(order?.takerAsset) || undefined
-  const { tradeInfo } = useBaseTradeInfoLimitOrder(currencyIn, currencyOut)
-
-  return (
-    <ContentCancel
-      isOpen={isOpen}
-      onSubmit={onSubmit}
-      onDismiss={onDismiss}
-      marketPrice={tradeInfo}
-      isCancelAll={isCancelAll}
-      order={order}
-      flowState={flowState}
-    />
-  )
-}
+export default CancelOrderModal
diff --git a/src/components/swapv2/LimitOrder/Modals/styled.tsx b/src/components/swapv2/LimitOrder/Modals/styled.tsx
@@ -77,7 +77,7 @@ const ListWrapper = styled.div`
   flex-direction: column;
   gap: 12px;
   border-radius: 12px;
-  background-color: ${({ theme }) => rgba(theme.buttonBlack, 0.2)};
+  background-color: ${({ theme }) => rgba(theme.buttonBlack, 0.3)};
   padding: 16px;
 `
 export function ListInfo({