refactor: extract useGetOrdersToCheckPendingPermit

apps/cowswap-frontend/src/modules/ordersTable/containers/OrdersTableWidget/index.tsx

@@ -2,6 +2,7 @@ import { useAtomValue, useSetAtom } from 'jotai'
 import { useCallback, useEffect, useMemo } from 'react'
 
 import { GP_VAULT_RELAYER } from '@cowprotocol/common-const'
+import { SupportedChainId } from '@cowprotocol/cow-sdk'
 import { useIsSafeViaWc, useWalletDetails, useWalletInfo } from '@cowprotocol/wallet'
 
 import { useLocation, useNavigate } from 'react-router-dom'
@@ -18,7 +19,7 @@ import { useSelectReceiptOrder } from 'modules/ordersTable/containers/OrdersRece
 import { OrderActions } from 'modules/ordersTable/pure/OrdersTableContainer/types'
 import { buildOrdersTableUrl, parseOrdersTableUrl } from 'modules/ordersTable/utils/buildOrdersTableUrl'
 import { PendingPermitUpdater, useGetOrdersPermitStatus } from 'modules/permit'
-import { useBalancesAndAllowances } from 'modules/tokens'
+import { BalancesAndAllowances, useBalancesAndAllowances } from 'modules/tokens'
 
 import { useCancelOrder } from 'common/hooks/useCancelOrder'
 import { useCategorizeRecentActivity } from 'common/hooks/useCategorizeRecentActivity'
@@ -57,6 +58,28 @@ const ContentWrapper = styled.div`
   width: 100%;
 `
 
+function useGetOrdersToCheckPendingPermit(
+  ordersList: OrdersTableList,
+  chainId: SupportedChainId,
+  balancesAndAllowances: BalancesAndAllowances
+) {
+  return useMemo(() => {
+    // Pick only the pending orders
+    return ordersList.pending.reduce((acc: ParsedOrder[], item) => {
+      // Only do it for regular orders (not TWAP)
+      if (isParsedOrder(item)) {
+        const { hasEnoughAllowance } = getOrderParams(chainId, balancesAndAllowances, item)
+
+        // Only if the order has not enough allowance
+        if (hasEnoughAllowance === false) {
+          acc.push(item)
+        }
+      }
+      return acc
+    }, [])
+  }, [balancesAndAllowances, chainId, ordersList.pending])
+}
+
 export interface OrdersTableWidgetProps {
   displayOrdersOnlyForSafeApp: boolean
   orders: Order[]
@@ -156,19 +179,7 @@ export function OrdersTableWidget({
 
   useValidatePageUrlParams(orders.length, currentTabId, currentPageNumber)
 
-  const ordersToCheckPendingPermit = useMemo(() => {
-    // TODO: hook for this, or filter it inside the updater?
-    return ordersList.pending.reduce((acc: ParsedOrder[], item) => {
-      if (isParsedOrder(item)) {
-        const { hasEnoughAllowance } = getOrderParams(chainId, balancesAndAllowances, item)
-
-        if (hasEnoughAllowance === false) {
-          acc.push(item)
-        }
-      }
-      return acc
-    }, [])
-  }, [balancesAndAllowances, chainId, ordersList.pending])
+  const ordersToCheckPendingPermit = useGetOrdersToCheckPendingPermit(ordersList, chainId, balancesAndAllowances)
 
   return (
     <>