feat: add column layout options in settings

apps/cowswap-frontend/src/modules/advancedOrders/containers/AdvancedOrdersSettings/index.tsx

@@ -1,17 +1,27 @@
 import { useAtomValue, useSetAtom } from 'jotai'
 import { useCallback } from 'react'
 
-import { Menu, MenuItem } from '@reach/menu-button'
+import { Menu, MenuItem, MenuPopover, MenuItems } from '@reach/menu-button'
+import styled from 'styled-components/macro'
 
 import { Settings } from 'modules/advancedOrders/pure/Settings'
-import { MenuContent, SettingsButton, SettingsIcon } from 'modules/trade/pure/Settings'
+import { SettingsButton, SettingsIcon } from 'modules/trade/pure/Settings'
 
 import {
   advancedOrdersSettingsAtom,
   AdvancedOrdersSettingsState,
   updateAdvancedOrdersSettingsAtom,
 } from '../../state/advancedOrdersSettingsAtom'
 
+const MenuWrapper = styled.div`
+  [data-reach-menu-popover] {
+    position: absolute;
+    width: 100%;
+    left: 0;
+    top: 0;
+  }
+`
+
 export function AdvancedOrdersSettings() {
   const settingsState = useAtomValue(advancedOrdersSettingsAtom)
   const updateSettingsState = useSetAtom(updateAdvancedOrdersSettingsAtom)
@@ -20,19 +30,23 @@ export function AdvancedOrdersSettings() {
     (state: Partial<AdvancedOrdersSettingsState>) => {
       updateSettingsState(state)
     },
-    [updateSettingsState]
+    [updateSettingsState],
   )
 
   return (
-    <Menu>
-      <SettingsButton>
-        <SettingsIcon />
-      </SettingsButton>
-      <MenuContent>
-        <MenuItem disabled={true} onSelect={() => void 0}>
-          <Settings state={settingsState} onStateChanged={onStateChanged} />
-        </MenuItem>
-      </MenuContent>
-    </Menu>
+    <MenuWrapper>
+      <Menu>
+        <SettingsButton>
+          <SettingsIcon />
+        </SettingsButton>
+        <MenuPopover portal={false}>
+          <MenuItems>
+            <MenuItem disabled={true} onSelect={() => void 0}>
+              <Settings state={settingsState} onStateChanged={onStateChanged} />
+            </MenuItem>
+          </MenuItems>
+        </MenuPopover>
+      </Menu>
+    </MenuWrapper>
   )
 }

apps/cowswap-frontend/src/modules/limitOrders/containers/SettingsWidget/index.tsx

@@ -2,10 +2,10 @@ import { useAtomValue, useSetAtom } from 'jotai'
 
 import UsdIcon from '@cowprotocol/assets/images/icon-USD.svg'
 
-import { Menu, MenuItem } from '@reach/menu-button'
+import { Menu, MenuItem, MenuPopover, MenuItems } from '@reach/menu-button'
 import SVG from 'react-inlinesvg'
 
-import { ButtonsContainer, MenuContent, SettingsButton, SettingsIcon, UsdButton } from 'modules/trade/pure/Settings'
+import { ButtonsContainer, SettingsButton, SettingsIcon, UsdButton } from 'modules/trade/pure/Settings'
 
 import { Settings } from '../../pure/Settings'
 import { limitOrdersSettingsAtom, updateLimitOrdersSettingsAtom } from '../../state/limitOrdersSettingsAtom'
@@ -25,11 +25,13 @@ export function SettingsWidget() {
           {/* TODO: add active state */}
           <SettingsIcon active={false} />
         </SettingsButton>
-        <MenuContent>
-          <MenuItem disabled={true} onSelect={() => void 0}>
-            <Settings state={settingsState} onStateChanged={updateSettingsState} />
-          </MenuItem>
-        </MenuContent>
+        <MenuPopover portal={false}>
+          <MenuItems>
+            <MenuItem disabled={true} onSelect={() => void 0}>
+              <Settings state={settingsState} onStateChanged={updateSettingsState} />
+            </MenuItem>
+          </MenuItems>
+        </MenuPopover>
       </Menu>
     </ButtonsContainer>
   )

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

@@ -8,6 +8,7 @@ const defaultProps: SettingsProps = {
     customDeadlineTimestamp: null,
     limitPricePosition: 'between',
     limitPriceLocked: false,
+    columnLayout: 'DEFAULT',
   },
   onStateChanged(state) {
     console.log('Settings state changed: ', state)

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

@@ -109,9 +109,16 @@ const POSITION_LABELS = {
   bottom: 'Bottom',
 }
 
+const COLUMN_LAYOUT_LABELS = {
+  DEFAULT: 'Default view',
+  VIEW_2: 'Limit price / Fills at / Distance',
+  VIEW_3: 'Limit price / Fills at + Distance / Market',
+}
+
 export function Settings({ state, onStateChanged }: SettingsProps) {
-  const { showRecipient, partialFillsEnabled, limitPricePosition, limitPriceLocked } = state
+  const { showRecipient, partialFillsEnabled, limitPricePosition, limitPriceLocked, columnLayout } = state
   const [isOpen, setIsOpen] = useState(false)
+  const [isColumnLayoutOpen, setIsColumnLayoutOpen] = useState(false)
 
   const handleSelect = useCallback(
     (value: LimitOrdersSettingsState['limitPricePosition']) => (e: React.MouseEvent) => {
@@ -122,11 +129,22 @@ export function Settings({ state, onStateChanged }: SettingsProps) {
     [onStateChanged],
   )
 
+  const handleColumnLayoutSelect = (value: LimitOrdersSettingsState['columnLayout']) => (e: React.MouseEvent) => {
+    e.stopPropagation()
+    onStateChanged({ columnLayout: value })
+    setIsColumnLayoutOpen(false)
+  }
+
   const toggleDropdown = (e: React.MouseEvent) => {
     e.stopPropagation()
     setIsOpen(!isOpen)
   }
 
+  const toggleColumnLayoutDropdown = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    setIsColumnLayoutOpen(!isColumnLayoutOpen)
+  }
+
   return (
     <SettingsContainer>
       <SettingsTitle>Limit Order Settings</SettingsTitle>
@@ -178,6 +196,26 @@ export function Settings({ state, onStateChanged }: SettingsProps) {
           </DropdownList>
         </DropdownContainer>
       </SettingsRow>
+
+      <SettingsRow>
+        <SettingsLabel>
+          Column Layout
+          <HelpTooltip text="Choose how to display the columns in the orders table." />
+        </SettingsLabel>
+        <DropdownContainer>
+          <DropdownButton onClick={toggleColumnLayoutDropdown}>{COLUMN_LAYOUT_LABELS[columnLayout]}</DropdownButton>
+          <DropdownList isOpen={isColumnLayoutOpen}>
+            {Object.entries(COLUMN_LAYOUT_LABELS).map(([value, label]) => (
+              <DropdownItem
+                key={value}
+                onClick={handleColumnLayoutSelect(value as LimitOrdersSettingsState['columnLayout'])}
+              >
+                {label}
+              </DropdownItem>
+            ))}
+          </DropdownList>
+        </DropdownContainer>
+      </SettingsRow>
     </SettingsContainer>
   )
 }

apps/cowswap-frontend/src/modules/limitOrders/state/limitOrdersSettingsAtom.ts

@@ -12,13 +12,16 @@ import {
   alternativeOrderReadWriteAtomFactory,
 } from 'modules/trade/state/alternativeOrder'
 
+export type ColumnLayoutType = 'DEFAULT' | 'VIEW_2' | 'VIEW_3'
+
 export interface LimitOrdersSettingsState {
   readonly showRecipient: boolean
   readonly partialFillsEnabled: boolean
   readonly deadlineMilliseconds: Milliseconds
   readonly customDeadlineTimestamp: Timestamp | null
   readonly limitPricePosition: 'top' | 'between' | 'bottom'
   readonly limitPriceLocked: boolean
+  readonly columnLayout: ColumnLayoutType
 }
 
 export const defaultLimitOrdersSettings: LimitOrdersSettingsState = {
@@ -28,6 +31,7 @@ export const defaultLimitOrdersSettings: LimitOrdersSettingsState = {
   customDeadlineTimestamp: null,
   limitPricePosition: 'top',
   limitPriceLocked: true,
+  columnLayout: 'DEFAULT',
 }
 
 // regular

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

@@ -2,6 +2,7 @@ import { useAtomValue, useSetAtom } from 'jotai'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 
 import { useTokensAllowances, useTokensBalances } from '@cowprotocol/balances-and-allowances'
+import { UI } from '@cowprotocol/ui'
 import { useIsSafeViaWc, useWalletDetails, useWalletInfo } from '@cowprotocol/wallet'
 
 import { Search } from 'react-feather'
@@ -11,6 +12,7 @@ import styled from 'styled-components/macro'
 import { Order } from 'legacy/state/orders/actions'
 
 import { useInjectedWidgetParams } from 'modules/injectedWidget'
+import { limitOrdersSettingsAtom } from 'modules/limitOrders/state/limitOrdersSettingsAtom'
 import { pendingOrdersPricesAtom } from 'modules/orders/state/pendingOrdersPricesAtom'
 import { useGetSpotPrice } from 'modules/orders/state/spotPricesAtom'
 import { PendingPermitUpdater, useGetOrdersPermitStatus } from 'modules/permit'
@@ -30,6 +32,7 @@ import { useValidatePageUrlParams } from './hooks/useValidatePageUrlParams'
 import { BalancesAndAllowances } from '../../../tokens'
 import { OPEN_TAB, ORDERS_TABLE_TABS } from '../../const/tabs'
 import { OrdersTableContainer } from '../../pure/OrdersTableContainer'
+import { ColumnLayout, LAYOUT_MAP } from '../../pure/OrdersTableContainer/tableHeaders'
 import { OrderActions } from '../../pure/OrdersTableContainer/types'
 import { TabOrderTypes } from '../../types'
 import { buildOrdersTableUrl } from '../../utils/buildOrdersTableUrl'
@@ -38,7 +41,6 @@ import { parseOrdersTableUrl } from '../../utils/parseOrdersTableUrl'
 import { MultipleCancellationMenu } from '../MultipleCancellationMenu'
 import { OrdersReceiptModal } from '../OrdersReceiptModal'
 import { useGetAlternativeOrderModalContextCallback, useSelectReceiptOrder } from '../OrdersReceiptModal/hooks'
-import { UI } from '@cowprotocol/ui'
 
 const SearchInputContainer = styled.div`
   margin: 0;
@@ -124,6 +126,11 @@ export function OrdersTableWidget({
   const ordersPermitStatus = useGetOrdersPermitStatus()
   const injectedWidgetParams = useInjectedWidgetParams()
   const [searchTerm, setSearchTerm] = useState('')
+  const limitOrdersSettings = useAtomValue(limitOrdersSettingsAtom)
+  const columnLayout = useMemo(
+    () => LAYOUT_MAP[limitOrdersSettings.columnLayout] || ColumnLayout.DEFAULT,
+    [limitOrdersSettings.columnLayout],
+  )
 
   const balancesState = useTokensBalances()
   const allowancesState = useTokensAllowances()
@@ -290,6 +297,7 @@ export function OrdersTableWidget({
         ordersPermitStatus={ordersPermitStatus}
         injectedWidgetParams={injectedWidgetParams}
         searchTerm={searchTerm}
+        columnLayout={columnLayout}
       >
         {(currentTabId === OPEN_TAB.id || currentTabId === 'all' || currentTabId === 'unfillable') &&
           orders.length > 0 && <MultipleCancellationMenu pendingOrders={tableItemsToOrders(orders)} />}