feat(limit-orders): check permit validity in orders table (#6496)

* feat: add permit validation for lo

* refactor: move permit validity updater to lo module

* refactor: move updater to order module

* feat: add limit orders permit updater

* refactor: optimize flags

* refactor: typings

* feat: add permit validity checking for limit getOrderParams

* test: cover getPermitAmount

* refactor: decompose check permit amount fn

* refactor: check calldata validity before a viewcall

* fix: adjust test cases

* refactor: add useMemo

* chore: adjust import

* fix: mark order as unfillable inside group

* refactor: use helper for addresses and add type definition

* refactor: move trade orders permit updater to ordersTable module

* refactor: move the updater

* fix: check only pending orders

Author: limitofzero

apps/cowswap-frontend/src/common/hooks/usePendingOrdersFillability.ts

@@ -1,14 +1,14 @@
 import { doesHookHavePermit } from '@cowprotocol/hook-dapp-lib'
 
-import { Order } from 'legacy/state/orders/actions'
-
 import { getAppDataHooks } from 'modules/appData'
 
-export function doesOrderHavePermit(order: Order): boolean {
+import { GenericOrder } from 'common/types'
+
+export function doesOrderHavePermit(order: GenericOrder): boolean {
   return !!getOrderPermitIfExists(order)
 }
 
-export function getOrderPermitIfExists(order: Order): string | null {
+export function getOrderPermitIfExists(order: GenericOrder): string | null {
   const appData = order.fullAppData
   const hooks = getAppDataHooks(appData)
   if (!hooks?.pre) return null

apps/cowswap-frontend/src/common/utils/doesOrderHavePermit.ts

@@ -11,7 +11,8 @@ import { EnhancedTransactionDetails } from 'legacy/state/enhancedTransactions/re
 import { Order, OrderStatus } from 'legacy/state/orders/actions'
 import { useOrder, useOrders, useOrdersById } from 'legacy/state/orders/hooks'
 
-import { OrderFillability, usePendingOrdersFillability } from 'common/hooks/usePendingOrdersFillability'
+import { OrderFillability, usePendingOrdersFillability } from 'modules/ordersTable'
+
 import { ActivityStatus, ActivityType } from 'common/types/activity'
 
 /**

apps/cowswap-frontend/src/legacy/hooks/useRecentActivity.ts

@@ -22,6 +22,7 @@ import { BridgeActivitySummary } from 'modules/bridge'
 import { EthFlowStepper } from 'modules/ethFlow'
 import { useInjectedWidgetParams } from 'modules/injectedWidget'
 import { useGetPendingOrdersPermitValidityState } from 'modules/ordersTable'
+import { OrderFillability } from 'modules/ordersTable'
 import { useSwapPartialApprovalToggleState } from 'modules/swap/hooks/useSwapSettings'
 import { ConfirmDetailsItem } from 'modules/trade'
 
@@ -30,7 +31,6 @@ import { useCancelOrder } from 'common/hooks/useCancelOrder'
 import { isPending } from 'common/hooks/useCategorizeRecentActivity'
 import { useEnhancedActivityDerivedState } from 'common/hooks/useEnhancedActivityDerivedState'
 import { useGetSurplusData } from 'common/hooks/useGetSurplusFiatValue'
-import { OrderFillability } from 'common/hooks/usePendingOrdersFillability'
 import { useSwapAndBridgeContext } from 'common/hooks/useSwapAndBridgeContext'
 import { CurrencyLogoPair } from 'common/pure/CurrencyLogoPair'
 import { CustomRecipientWarningBanner } from 'common/pure/CustomRecipientWarningBanner'

apps/cowswap-frontend/src/modules/account/containers/Transaction/ActivityDetails.tsx

@@ -3,7 +3,7 @@ import { ReactNode } from 'react'
 import { BannerOrientation, StatusColorVariant } from '@cowprotocol/ui'
 import { CurrencyAmount, Token } from '@uniswap/sdk-core'
 
-import { OrderFillability } from 'common/hooks/usePendingOrdersFillability'
+import { OrderFillability } from 'modules/ordersTable'
 
 import {
   ApproveWrapper,

apps/cowswap-frontend/src/modules/account/pure/OrderFillabilityWarning/index.tsx

@@ -1,5 +1,5 @@
 import { useAtomValue } from 'jotai'
-import React, { useCallback, useEffect, useMemo } from 'react'
+import React, { ReactElement, useCallback, useEffect, useMemo } from 'react'
 
 import { useFeatureFlags } from '@cowprotocol/common-hooks'
 import { isSellOrder } from '@cowprotocol/common-utils'
@@ -60,10 +60,7 @@ const UNLOCK_SCREEN = {
   buttonLink: 'https://cow.fi/learn/cow-swap-improves-the-limit-order-experience-with-partially-fillable-limit-orders',
 }
 
-// TODO: Break down this large function into smaller functions
-// TODO: Add proper return type annotation
-// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-export function LimitOrdersWidget() {
+export function LimitOrdersWidget(): ReactElement {
   const {
     inputCurrency,
     outputCurrency,

apps/cowswap-frontend/src/modules/limitOrders/containers/LimitOrdersWidget/index.tsx

@@ -1,4 +1,4 @@
-import type { OrderFillability } from 'common/hooks/usePendingOrdersFillability'
+import type { OrderFillability } from 'modules/ordersTable'
 
 import { computeUnfillableOrderIds, getNewlyFillableOrderIds } from './OrderProgressEventsUpdater'
 

apps/cowswap-frontend/src/modules/orderProgressBar/updaters/OrderProgressEventsUpdater.test.ts

@@ -16,7 +16,7 @@ import { WIDGET_EVENT_EMITTER } from 'widgetEventEmitter'
 
 import { useOnlyPendingOrders } from 'legacy/state/orders/hooks'
 
-import { usePendingOrdersFillability, type OrderFillability } from 'common/hooks/usePendingOrdersFillability'
+import { usePendingOrdersFillability, type OrderFillability } from 'modules/ordersTable'
 
 import { OrderProgressBarStepName } from '../constants'
 import {

apps/cowswap-frontend/src/modules/orderProgressBar/updaters/OrderProgressEventsUpdater.tsx

@@ -5,6 +5,8 @@ import { BalancesAndAllowances } from '@cowprotocol/balances-and-allowances'
 import { Order, OrderStatus, PENDING_STATES } from 'legacy/state/orders/actions'
 import { useSetIsOrderUnfillable } from 'legacy/state/orders/hooks'
 
+import { useGetPendingOrdersPermitValidityState } from 'modules/ordersTable'
+
 import { getIsComposableCowOrder } from 'utils/orderUtils/getIsComposableCowOrder'
 import { getIsNotComposableCowOrder } from 'utils/orderUtils/getIsNotComposableCowOrder'
 
@@ -34,6 +36,8 @@ export function useOrdersTableList(
     return groupOrdersTable(allOrders).sort(ordersSorter)
   }, [allOrders])
 
+  const pendingOrdersPermitValidityState = useGetPendingOrdersPermitValidityState()
+
   // Then, categorize orders into their respective lists
   return useMemo(
     () =>
@@ -58,13 +62,18 @@ export function useOrdersTableList(
           const isSigning = order.status === OrderStatus.PRESIGNATURE_PENDING
 
           // Check if order is unfillable (insufficient balance or allowance)
-          const params = getOrderParams(chainId, balancesAndAllowances, order)
+          const params = getOrderParams(chainId, balancesAndAllowances, order, pendingOrdersPermitValidityState)
           let isUnfillable = params.hasEnoughBalance === false || params.hasEnoughAllowance === false
 
           // For TWAP orders, also check child orders
           if (!isParsedOrder(item) && item.children) {
             const hasUnfillableChild = item.children.some((childOrder) => {
-              const childParams = getOrderParams(chainId, balancesAndAllowances, childOrder)
+              const childParams = getOrderParams(
+                chainId,
+                balancesAndAllowances,
+                childOrder,
+                pendingOrdersPermitValidityState,
+              )
               return (
                 childOrder.status !== OrderStatus.FULFILLED &&
                 (childOrder.status === OrderStatus.SCHEDULED || childOrder.status === OrderStatus.PENDING) &&
@@ -103,6 +112,14 @@ export function useOrdersTableList(
         },
         { open: [], history: [], unfillable: [], signing: [], all: [] },
       ),
-    [allSortedOrders, chainId, balancesAndAllowances, orderType, setIsOrderUnfillable, orderLimit],
+    [
+      allSortedOrders,
+      chainId,
+      balancesAndAllowances,
+      orderType,
+      setIsOrderUnfillable,
+      orderLimit,
+      pendingOrdersPermitValidityState,
+    ],
   )
 }

apps/cowswap-frontend/src/modules/ordersTable/containers/OrdersTableWidget/hooks/useOrdersTableList.ts

@@ -57,13 +57,15 @@ export function OrdersTableWidget(props: OrdersTableWidgetProps): ReactNode {
     })
   }, [isTabWithPending, filteredOrders, currentPageNumber])
 
+  const hasPendingOrders = !!pendingOrders?.length
+
   return (
     <>
-      {!!pendingOrders?.length && <UnfillableOrdersUpdater orders={pendingOrders} />}
+      {hasPendingOrders && <UnfillableOrdersUpdater orders={pendingOrders} />}
       <OrdersTableStateUpdater searchTerm={searchTerm} {...stateParams} />
       {children}
       <OrdersTableContainer searchTerm={searchTerm} isDarkMode={darkMode}>
-        {!!pendingOrders?.length && <MultipleCancellationMenu pendingOrders={pendingOrders} />}
+        {hasPendingOrders && <MultipleCancellationMenu pendingOrders={pendingOrders} />}
 
         {/* If account is not connected, don't show the search input */}
         {!!account && !!orders?.length && (