feat: clear order selection on change tabs

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

@@ -231,6 +231,11 @@ export function OrdersTableWidget({
 
   useValidatePageUrlParams(orders.length, currentTabId, currentPageNumber)
 
+  // Clear selection when changing tabs
+  useEffect(() => {
+    updateOrdersToCancel([])
+  }, [currentTabId, updateOrdersToCancel])
+
   const filteredOrders = useMemo(() => {
     if (!searchTerm) return orders
 

apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/OrderRow/index.tsx

@@ -83,10 +83,12 @@ export interface OrderRowProps {
   isRowSelectable: boolean
   isRowSelected: boolean
   isChild?: boolean
+  isExpanded?: boolean
   orderParams: OrderParams
   onClick: Command
   orderActions: OrderActions
   children?: React.ReactNode
+  isTwapTable?: boolean
 }
 
 export function OrderRow({
@@ -96,12 +98,14 @@ export function OrderRow({
   isRowSelectable,
   isRowSelected,
   isChild,
+  isExpanded,
   orderActions,
   orderParams,
   onClick,
   prices,
   spotPrice,
   children,
+  isTwapTable,
 }: OrderRowProps) {
   const { buyAmount, rateInfoParams, hasEnoughAllowance, hasEnoughBalance, chainId } = orderParams
   const { creationTime, expirationTime, status } = order
@@ -399,7 +403,14 @@ export function OrderRow({
   )
 
   return (
-    <TableRow data-id={order.id} isChildOrder={isChild} isHistoryTab={isHistoryTab} isRowSelectable={isRowSelectable}>
+    <TableRow
+      data-id={order.id}
+      isChildOrder={isChild}
+      isHistoryTab={isHistoryTab}
+      isRowSelectable={isRowSelectable}
+      isTwapTable={isTwapTable}
+      isExpanded={isExpanded}
+    >
       {/*Checkbox for multiple cancellation*/}
       {isRowSelectable && !isHistoryTab && (
         <TableRowCheckboxWrapper>

apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/OrdersTable.tsx

@@ -12,6 +12,7 @@ import { BalancesAndAllowances } from 'modules/tokens'
 
 import { CancellableOrder } from 'common/utils/isOrderCancellable'
 import { isOrderOffChainCancellable } from 'common/utils/isOrderOffChainCancellable'
+import { getIsComposableCowParentOrder } from 'utils/orderUtils/getIsComposableCowParentOrder'
 
 import { OrderRow } from './OrderRow'
 import { CheckboxCheckmark, TableHeader, TableRowCheckbox, TableRowCheckboxWrapper } from './styled'
@@ -33,17 +34,13 @@ import { OrdersTablePagination } from '../OrdersTablePagination'
 // TODO: move elements to styled.jsx
 
 const TableBox = styled.div`
-  display: block;
+  display: flex;
+  flex-flow: column wrap;
   border: none;
   padding: 0;
   position: relative;
   background: var(${UI.COLOR_PAPER});
-
-  ${Media.upToLargeAlt()} {
-    width: 100%;
-    display: flex;
-    flex-flow: column wrap;
-  }
+  width: 100%;
 `
 
 const TableInner = styled.div`
@@ -181,11 +178,23 @@ export function OrdersTable({
     })
   }, [tableHeaders, currentTab])
 
+  // Determine if this is a TWAP table by checking if any order has composableCowInfo with a parentId
+  const isTwapTable = useMemo(() => {
+    return orders.some((item) => {
+      const order = getParsedOrderFromTableItem(item)
+      return getIsComposableCowParentOrder(order)
+    })
+  }, [orders])
+
   return (
     <>
       <TableBox>
         <TableInner onScroll={onScroll}>
-          <TableHeader isHistoryTab={currentTab === HISTORY_TAB.id} isRowSelectable={isRowSelectable}>
+          <TableHeader
+            isHistoryTab={currentTab === HISTORY_TAB.id}
+            isRowSelectable={isRowSelectable}
+            isTwapTable={isTwapTable}
+          >
             {visibleHeaders.map((header) => {
               if (header.id === 'checkbox' && (!isRowSelectable || currentTab === HISTORY_TAB.id)) {
                 return null
@@ -245,6 +254,7 @@ export function OrdersTable({
                     orderParams={getOrderParams(chainId, balancesAndAllowances, order)}
                     onClick={() => orderActions.selectReceiptOrder(order)}
                     orderActions={orderActions}
+                    isTwapTable={isTwapTable}
                   />
                 )
               } else {
@@ -261,6 +271,7 @@ export function OrdersTable({
                     prices={pendingOrdersPrices[item.parent.id]}
                     isRateInverted={false}
                     orderActions={orderActions}
+                    isTwapTable={isTwapTable}
                   />
                 )
               }

apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/TableGroup.tsx

@@ -12,13 +12,15 @@ import { PendingOrderPrices } from 'modules/orders/state/pendingOrdersPricesAtom
 import { BalancesAndAllowances } from 'modules/tokens'
 
 import { OrderRow } from './OrderRow'
+import { WarningTooltip } from './OrderRow/OrderWarning'
 import * as styledEl from './OrderRow/styled'
 import { OrderActions } from './types'
 
 import { ORDERS_TABLE_PAGE_SIZE } from '../../const/tabs'
 import { getOrderParams } from '../../utils/getOrderParams'
 import { OrderTableGroup } from '../../utils/orderTableGroupUtils'
 import { OrdersTablePagination } from '../OrdersTablePagination'
+import { OrderStatusBox } from '../OrderStatusBox'
 
 const GroupBox = styled.div``
 
@@ -28,6 +30,78 @@ const Pagination = styled(OrdersTablePagination)`
   padding: 10px 0;
 `
 
+const TwapStatusAndToggleWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+`
+
+function TwapStatusAndToggle({
+  parent,
+  childrenLength,
+  isCollapsed,
+  onToggle,
+  onClick,
+  children,
+}: {
+  parent: any
+  childrenLength: number
+  isCollapsed: boolean
+  onToggle: () => void
+  onClick: () => void
+  children: any[]
+}) {
+  // Check if any child has insufficient balance or allowance
+  const hasChildWithWarning = children.some(
+    (child) =>
+      (child.orderParams?.hasEnoughBalance === false || child.orderParams?.hasEnoughAllowance === false) &&
+      (child.order.status === OrderStatus.PENDING || child.order.status === OrderStatus.SCHEDULED),
+  )
+
+  // Get the first child with a warning to use its parameters
+  const childWithWarning = hasChildWithWarning
+    ? children.find(
+        (child) =>
+          (child.orderParams?.hasEnoughBalance === false || child.orderParams?.hasEnoughAllowance === false) &&
+          (child.order.status === OrderStatus.PENDING || child.order.status === OrderStatus.SCHEDULED),
+      )
+    : null
+
+  return (
+    <TwapStatusAndToggleWrapper>
+      <OrderStatusBox
+        order={parent}
+        onClick={onClick}
+        withWarning={hasChildWithWarning}
+        WarningTooltip={
+          hasChildWithWarning && childWithWarning
+            ? ({ children }) => (
+                <WarningTooltip
+                  children={children}
+                  hasEnoughBalance={childWithWarning.orderParams.hasEnoughBalance ?? false}
+                  hasEnoughAllowance={childWithWarning.orderParams.hasEnoughAllowance ?? false}
+                  inputTokenSymbol={childWithWarning.order.inputToken.symbol || ''}
+                  isOrderScheduled={childWithWarning.order.status === OrderStatus.SCHEDULED}
+                  onApprove={() => childWithWarning.orderActions.approveOrderToken(childWithWarning.order.inputToken)}
+                  showIcon={true}
+                />
+              )
+            : undefined
+        }
+      />
+      <styledEl.ToggleExpandButton onClick={onToggle} isCollapsed={isCollapsed}>
+        {childrenLength && (
+          <i>
+            {childrenLength} part{childrenLength > 1 && 's'}
+          </i>
+        )}
+        <button />
+      </styledEl.ToggleExpandButton>
+    </TwapStatusAndToggleWrapper>
+  )
+}
+
 export interface TableGroupProps {
   item: OrderTableGroup
   prices: PendingOrderPrices | undefined | null
@@ -39,6 +113,7 @@ export interface TableGroupProps {
   orderActions: OrderActions
   chainId: SupportedChainId
   balancesAndAllowances: BalancesAndAllowances
+  isTwapTable?: boolean
 }
 
 export function TableGroup(props: TableGroupProps) {
@@ -53,6 +128,7 @@ export function TableGroup(props: TableGroupProps) {
     orderActions,
     chainId,
     balancesAndAllowances,
+    isTwapTable,
   } = props
 
   const { parent, children } = item
@@ -73,8 +149,16 @@ export function TableGroup(props: TableGroupProps) {
     prices,
     isRateInverted,
     orderActions,
+    isTwapTable,
   }
 
+  // Create an array of child order data with their orderParams
+  const childrenWithParams = children.map((child) => ({
+    order: child,
+    orderParams: getOrderParams(chainId, balancesAndAllowances, child),
+    orderActions,
+  }))
+
   return (
     <GroupBox>
       <OrderRow
@@ -84,16 +168,17 @@ export function TableGroup(props: TableGroupProps) {
         order={parent}
         orderParams={getOrderParams(chainId, balancesAndAllowances, parent)}
         onClick={() => orderActions.selectReceiptOrder(parent)}
+        isExpanded={!isCollapsed}
       >
         {isParentSigning ? undefined : (
-          <styledEl.ToggleExpandButton onClick={() => setIsCollapsed((state) => !state)} isCollapsed={isCollapsed}>
-            {childrenLength && (
-              <i>
-                {childrenLength} part{childrenLength > 1 && 's'}
-              </i>
-            )}
-            <button />
-          </styledEl.ToggleExpandButton>
+          <TwapStatusAndToggle
+            parent={parent}
+            childrenLength={childrenLength}
+            isCollapsed={isCollapsed}
+            onToggle={() => setIsCollapsed((state) => !state)}
+            onClick={() => orderActions.selectReceiptOrder(parent)}
+            children={childrenWithParams}
+          />
         )}
       </OrderRow>
 

apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/styled.tsx

@@ -53,14 +53,14 @@ export const ScrollContainer = styled.div`
   scrollbar-width: none;
 `
 
-export const TableHeader = styled.div<{ isHistoryTab: boolean; isRowSelectable: boolean }>`
+export const TableHeader = styled.div<{ isHistoryTab: boolean; isRowSelectable: boolean; isTwapTable?: boolean }>`
   --header-height: 26px;
   --row-height: 41px;
   --checkboxSize: 16px;
   --checkBoxBorderRadius: 3px;
   display: grid;
   gap: 14px;
-  grid-template-columns: ${({ isHistoryTab, isRowSelectable }) => {
+  grid-template-columns: ${({ isHistoryTab, isRowSelectable, isTwapTable }) => {
     if (isHistoryTab) {
       return `minmax(200px, 2.5fr)  
               repeat(4, minmax(110px, 1fr))
@@ -70,6 +70,13 @@ export const TableHeader = styled.div<{ isHistoryTab: boolean; isRowSelectable:
     }
 
     const checkboxColumn = isRowSelectable ? 'var(--checkboxSize)' : ''
+
+    // TWAP table layout
+    if (isTwapTable) {
+      return `${checkboxColumn} minmax(160px,2fr) minmax(120px,1fr) minmax(140px,1fr) minmax(120px,1fr) minmax(120px,1fr) minmax(100px,110px) minmax(190px,1.6fr) 24px`
+    }
+
+    // Default/Limit orders layout
     return `${checkboxColumn} minmax(160px,2fr) minmax(120px,1fr) minmax(140px,1fr) minmax(120px,1fr) minmax(120px,1fr) minmax(100px,110px) minmax(80px,0.8fr) 24px`
   }};
   grid-template-rows: minmax(var(--header-height), 1fr);
@@ -94,9 +101,12 @@ export const TableRow = styled(TableHeader)<{
   isChildOrder?: boolean
   isHistoryTab: boolean
   isRowSelectable: boolean
+  isTwapTable?: boolean
+  isExpanded?: boolean
 }>`
   grid-template-rows: minmax(var(--row-height), 1fr);
-  background: ${({ isChildOrder }) => (isChildOrder ? `var(${UI.COLOR_PAPER_DARKER})` : 'transparent')};
+  background: ${({ isChildOrder, isExpanded }) =>
+    isExpanded || isChildOrder ? `var(${UI.COLOR_PAPER_DARKER})` : 'transparent'};
   transition: background var(${UI.ANIMATION_DURATION}) ease-in-out;
   display: grid;
 
@@ -115,10 +125,6 @@ export const TableRow = styled(TableHeader)<{
       opacity: 0.6;
     }
   }
-
-  &:last-child {
-    border-bottom: 0;
-  }
 `
 
 export const CheckboxCheckmark = styled.span`