enhance order categorization and warning handling in OrdersTableWidget

apps/cowswap-frontend/src/modules/limitOrders/pure/Settings/index.tsx

@@ -25,7 +25,7 @@ const DropdownButton = styled.button`
   border: 1px solid var(${UI.COLOR_BORDER});
   border-radius: 12px;
   padding: 10px 34px 10px 12px;
-  min-width: 140px;
+  width: 180px;
   cursor: pointer;
   font-size: 14px;
   display: flex;
@@ -64,7 +64,7 @@ const DropdownList = styled.div<{ isOpen: boolean }>`
   border: 1px solid var(${UI.COLOR_BORDER});
   border-radius: 12px;
   padding: 6px;
-  min-width: 140px;
+  width: 180px;
   z-index: 100;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 `

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

@@ -42,69 +42,72 @@ export function useOrdersTableList(
   }, [allOrders])
 
   // Then, categorize orders into their respective lists
-  return useMemo(() => {
-    const { pending, history, unfillable, signing, all } = allSortedOrders.reduce<OrdersTableList>(
-      (acc, item) => {
-        const order = isParsedOrder(item) ? item : item.parent
+  return useMemo(
+    () =>
+      allSortedOrders.slice(0, ORDERS_LIMIT).reduce<OrdersTableList>(
+        (acc, item) => {
+          const order = isParsedOrder(item) ? item : item.parent
+
+          const advancedTabNonAdvancedOrder = orderType === TabOrderTypes.ADVANCED && getIsNotComposableCowOrder(order)
+          const limitTabNonLimitOrder = orderType === TabOrderTypes.LIMIT && getIsComposableCowOrder(order)
+
+          if (advancedTabNonAdvancedOrder || limitTabNonLimitOrder) {
+            // Skip if order type doesn't match
+            return acc
+          }
+
+          // Add to 'all' list regardless of status
+          acc.all.push(item)
+
+          const isPending = PENDING_STATES.includes(order.status)
+          const isSigning = order.status === OrderStatus.PRESIGNATURE_PENDING
+
+          // Check if order is unfillable (insufficient balance or allowance)
+          const params = getOrderParams(chainId, balancesAndAllowances, order)
+          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)
+              return (
+                childOrder.status !== OrderStatus.FULFILLED &&
+                (childOrder.status === OrderStatus.SCHEDULED || childOrder.status === OrderStatus.PENDING) &&
+                (childParams.hasEnoughBalance === false || childParams.hasEnoughAllowance === false)
+              )
+            })
+            isUnfillable = isUnfillable || hasUnfillableChild
+          }
+
+          // Update the unfillable flag whenever the state changes, not just when becoming unfillable
+          if (isPending && order.isUnfillable !== isUnfillable) {
+            setIsOrderUnfillable({ chainId, id: order.id, isUnfillable })
+          }
+
+          // Add to signing if in presignature pending state
+          if (isSigning) {
+            acc.signing.push(item)
+          }
+
+          // Add to unfillable only if pending, unfillable, and not in signing state
+          if (isPending && isUnfillable && !isSigning) {
+            acc.unfillable.push(item)
+          }
+
+          // Add to pending if in a pending state and not in signing state
+          if (isPending && !isSigning) {
+            acc.pending.push(item)
+          }
+
+          // Add to history if not pending and not signing
+          if (!isPending && !isSigning) {
+            acc.history.push(item)
+          }
 
-        const advancedTabNonAdvancedOrder = orderType === TabOrderTypes.ADVANCED && getIsNotComposableCowOrder(order)
-        const limitTabNonLimitOrder = orderType === TabOrderTypes.LIMIT && getIsComposableCowOrder(order)
-
-        if (advancedTabNonAdvancedOrder || limitTabNonLimitOrder) {
-          // Skip if order type doesn't match
           return acc
-        }
-
-        // Add to 'all' list regardless of status
-        acc.all.push(item)
-
-        const isPending = PENDING_STATES.includes(order.status)
-        const isSigning = order.status === OrderStatus.PRESIGNATURE_PENDING
-
-        // Check if order is unfillable (insufficient balance or allowance)
-        const params = getOrderParams(chainId, balancesAndAllowances, order)
-        const isUnfillable = params.hasEnoughBalance === false || params.hasEnoughAllowance === false
-
-        // Update the unfillable flag whenever the state changes, not just when becoming unfillable
-        if (isPending && order.isUnfillable !== isUnfillable) {
-          setIsOrderUnfillable({ chainId, id: order.id, isUnfillable })
-        }
-
-        // Add to signing if in presignature pending state
-        if (isSigning) {
-          acc.signing.push(item)
-        }
-
-        // Add to unfillable only if pending, unfillable, and not in signing state
-        if (isPending && isUnfillable && !isSigning) {
-          acc.unfillable.push(item)
-        }
-
-        // Add to pending or history based on status
-        if (isPending && !isSigning) {
-          acc.pending.push(item)
-        } else if (!isPending) {
-          acc.history.push(item)
-        }
-
-        return acc
-      },
-      {
-        pending: [],
-        history: [],
-        unfillable: [],
-        signing: [],
-        all: [],
-      },
-    )
-
-    // Return sliced lists to respect ORDERS_LIMIT
-    return {
-      pending: pending.slice(0, ORDERS_LIMIT),
-      history: history.slice(0, ORDERS_LIMIT),
-      unfillable: unfillable.slice(0, ORDERS_LIMIT),
-      signing: signing.slice(0, ORDERS_LIMIT),
-      all: all.slice(0, ORDERS_LIMIT),
-    }
-  }, [allSortedOrders, orderType, chainId, balancesAndAllowances, setIsOrderUnfillable])
+        },
+        { pending: [], history: [], unfillable: [], signing: [], all: [] },
+      ),
+    [allSortedOrders, chainId, balancesAndAllowances, orderType, setIsOrderUnfillable],
+  )
 }