diff --git a/apps/cowswap-frontend/src/modules/ordersTable/containers/OrdersTableWidget/hooks/useOrdersTableList.ts b/apps/cowswap-frontend/src/modules/ordersTable/containers/OrdersTableWidget/hooks/useOrdersTableList.ts index 309a715bb2..34bf7f75cc 100644 --- a/apps/cowswap-frontend/src/modules/ordersTable/containers/OrdersTableWidget/hooks/useOrdersTableList.ts +++ b/apps/cowswap-frontend/src/modules/ordersTable/containers/OrdersTableWidget/hooks/useOrdersTableList.ts @@ -36,10 +36,12 @@ export function useOrdersTableList( ): OrdersTableList { const setIsOrderUnfillable = useSetIsOrderUnfillable() + // First, group and sort all orders const allSortedOrders = useMemo(() => { return groupOrdersTable(allOrders).sort(ordersSorter) }, [allOrders]) + // Then, categorize orders into their respective lists return useMemo(() => { const { pending, history, unfillable, signing, all } = allSortedOrders.reduce( (acc, item) => { @@ -96,6 +98,7 @@ export function useOrdersTableList( }, ) + // Return sliced lists to respect ORDERS_LIMIT return { pending: pending.slice(0, ORDERS_LIMIT), history: history.slice(0, ORDERS_LIMIT), 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 a3ac961eff..3de5f82530 100644 --- a/apps/cowswap-frontend/src/modules/ordersTable/containers/OrdersTableWidget/index.tsx +++ b/apps/cowswap-frontend/src/modules/ordersTable/containers/OrdersTableWidget/index.tsx @@ -160,11 +160,23 @@ export function OrdersTableWidget({ const { currentTabId, currentPageNumber } = useMemo(() => { const params = parseOrdersTableUrl(location.search) + // If we're on a tab that becomes empty (signing or unfillable), + // default to the all orders tab + if ( + (params.tabId === 'signing' && !ordersList.signing.length) || + (params.tabId === 'unfillable' && !ordersList.unfillable.length) + ) { + return { + currentTabId: ALL_ORDERS_TAB.id, + currentPageNumber: params.pageNumber || 1, + } + } + return { currentTabId: params.tabId || ALL_ORDERS_TAB.id, currentPageNumber: params.pageNumber || 1, } - }, [location.search]) + }, [location.search, ordersList.signing.length, ordersList.unfillable.length]) const orders = useMemo(() => { return getOrdersListByIndex(ordersList, currentTabId)