diff --git a/apps/cowswap-frontend/src/modules/ordersTable/containers/OrdersTableWidget/index.tsx b/apps/cowswap-frontend/src/modules/ordersTable/containers/OrdersTableWidget/index.tsx index 78ad83e09f..afcd55003b 100644 --- a/apps/cowswap-frontend/src/modules/ordersTable/containers/OrdersTableWidget/index.tsx +++ b/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 ( <>