From 3902d26fececbf223858111478b3710ae488b74d Mon Sep 17 00:00:00 2001 From: fairlighteth <31534717+fairlighteth@users.noreply.github.com> Date: Thu, 12 Dec 2024 15:20:05 +0000 Subject: [PATCH 1/8] feat: by default open all orders tab --- .../ordersTable/containers/OrdersTableWidget/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 ad82fe90b3..c6c708e8ac 100644 --- a/apps/cowswap-frontend/src/modules/ordersTable/containers/OrdersTableWidget/index.tsx +++ b/apps/cowswap-frontend/src/modules/ordersTable/containers/OrdersTableWidget/index.tsx @@ -30,7 +30,7 @@ import { useOrdersTableTokenApprove } from './hooks/useOrdersTableTokenApprove' import { useValidatePageUrlParams } from './hooks/useValidatePageUrlParams' import { BalancesAndAllowances } from '../../../tokens' -import { OPEN_TAB, ORDERS_TABLE_TABS } from '../../const/tabs' +import { OPEN_TAB, ORDERS_TABLE_TABS, ALL_ORDERS_TAB, ORDERS_TABLE_PAGE_SIZE } from '../../const/tabs' import { OrdersTableContainer } from '../../pure/OrdersTableContainer' import { ColumnLayout, LAYOUT_MAP } from '../../pure/OrdersTableContainer/tableHeaders' import { OrderActions } from '../../pure/OrdersTableContainer/types' @@ -151,7 +151,7 @@ export function OrdersTableWidget({ const params = parseOrdersTableUrl(location.search) return { - currentTabId: params.tabId || OPEN_TAB.id, + currentTabId: params.tabId || ALL_ORDERS_TAB.id, currentPageNumber: params.pageNumber || 1, } }, [location.search]) From 955699fca22eb43b2b8205f85f838677689415ce Mon Sep 17 00:00:00 2001 From: fairlighteth <31534717+fairlighteth@users.noreply.github.com> Date: Thu, 12 Dec 2024 15:22:44 +0000 Subject: [PATCH 2/8] feat: style table search for dark mode --- .../ordersTable/containers/OrdersTableWidget/index.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) 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 c6c708e8ac..1e2d9ef298 100644 --- a/apps/cowswap-frontend/src/modules/ordersTable/containers/OrdersTableWidget/index.tsx +++ b/apps/cowswap-frontend/src/modules/ordersTable/containers/OrdersTableWidget/index.tsx @@ -61,7 +61,9 @@ const SearchIcon = styled(Search)` const SearchInput = styled.input` width: 100%; padding: 8px 12px 8px 36px; - border: 1px solid var(${UI.COLOR_PAPER_DARKER}); + border: 1px solid var(${UI.COLOR_TEXT_OPACITY_10}); + background: var(${UI.COLOR_PAPER}); + color: var(${UI.COLOR_TEXT}); border-radius: 8px; font-size: 13px; font-weight: 500; @@ -72,7 +74,7 @@ const SearchInput = styled.input` &:focus { outline: none; - border-color: var(${UI.COLOR_TEXT}); + border-color: var(${UI.COLOR_TEXT_OPACITY_50}); } ` From 310a56c469ba0d2f084df26612ec491384539ab0 Mon Sep 17 00:00:00 2001 From: fairlighteth <31534717+fairlighteth@users.noreply.github.com> Date: Thu, 12 Dec 2024 15:29:14 +0000 Subject: [PATCH 3/8] feat: progress bar width adust --- .../ordersTable/pure/OrdersTableContainer/OrderRow/styled.tsx | 2 ++ .../src/modules/ordersTable/pure/ReceiptModal/FilledField.tsx | 2 +- .../src/modules/ordersTable/pure/ReceiptModal/styled.ts | 3 ++- 3 files changed, 5 insertions(+), 2 deletions(-) diff --git a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/OrderRow/styled.tsx b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/OrderRow/styled.tsx index 5e5be94741..fde0b5b2ea 100644 --- a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/OrderRow/styled.tsx +++ b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/OrderRow/styled.tsx @@ -184,6 +184,8 @@ export const ProgressBarWrapper = styled.div` font-size: 12px; font-weight: 500; height: 100%; + width: 100%; + max-width: 190px; display: flex; text-align: left; background: transparent; diff --git a/apps/cowswap-frontend/src/modules/ordersTable/pure/ReceiptModal/FilledField.tsx b/apps/cowswap-frontend/src/modules/ordersTable/pure/ReceiptModal/FilledField.tsx index 767dfd7d01..7addde60e4 100644 --- a/apps/cowswap-frontend/src/modules/ordersTable/pure/ReceiptModal/FilledField.tsx +++ b/apps/cowswap-frontend/src/modules/ordersTable/pure/ReceiptModal/FilledField.tsx @@ -23,10 +23,10 @@ export function FilledField({ order }: Props) { + - diff --git a/apps/cowswap-frontend/src/modules/ordersTable/pure/ReceiptModal/styled.ts b/apps/cowswap-frontend/src/modules/ordersTable/pure/ReceiptModal/styled.ts index 392f8680b1..0051874ba3 100644 --- a/apps/cowswap-frontend/src/modules/ordersTable/pure/ReceiptModal/styled.ts +++ b/apps/cowswap-frontend/src/modules/ordersTable/pure/ReceiptModal/styled.ts @@ -193,7 +193,8 @@ export const LightButton = styled.button` padding: 6px 14px; border-radius: var(${UI.BORDER_RADIUS_NORMAL}); background-color: var(${UI.COLOR_PAPER_DARKER}); - transition: border var(${UI.ANIMATION_DURATION}) ease-in-out, + transition: + border var(${UI.ANIMATION_DURATION}) ease-in-out, background-color var(${UI.ANIMATION_DURATION}) ease-in-out; cursor: pointer; color: inherit; From 1305eb44f584a3de42578ab6c43d47d25cd2cf3a Mon Sep 17 00:00:00 2001 From: fairlighteth <31534717+fairlighteth@users.noreply.github.com> Date: Thu, 12 Dec 2024 15:56:34 +0000 Subject: [PATCH 4/8] feat: left aligned orders table settings --- .../pure/Settings/index.cosmos.tsx | 1 + .../limitOrders/pure/Settings/index.tsx | 10 +++++++++- .../state/limitOrdersSettingsAtom.ts | 2 ++ .../trade/pure/TradePageLayout/index.tsx | 19 +++++++++++++------ .../pages/LimitOrders/RegularLimitOrders.tsx | 8 +++++--- 5 files changed, 30 insertions(+), 10 deletions(-) diff --git a/apps/cowswap-frontend/src/modules/limitOrders/pure/Settings/index.cosmos.tsx b/apps/cowswap-frontend/src/modules/limitOrders/pure/Settings/index.cosmos.tsx index 2e7711fd89..a4299b3836 100644 --- a/apps/cowswap-frontend/src/modules/limitOrders/pure/Settings/index.cosmos.tsx +++ b/apps/cowswap-frontend/src/modules/limitOrders/pure/Settings/index.cosmos.tsx @@ -9,6 +9,7 @@ const defaultProps: SettingsProps = { limitPricePosition: 'between', limitPriceLocked: false, columnLayout: 'DEFAULT', + ordersTableOnLeft: false, }, onStateChanged(state) { console.log('Settings state changed: ', state) diff --git a/apps/cowswap-frontend/src/modules/limitOrders/pure/Settings/index.tsx b/apps/cowswap-frontend/src/modules/limitOrders/pure/Settings/index.tsx index 4422897ee9..32981f7d3e 100644 --- a/apps/cowswap-frontend/src/modules/limitOrders/pure/Settings/index.tsx +++ b/apps/cowswap-frontend/src/modules/limitOrders/pure/Settings/index.tsx @@ -116,7 +116,8 @@ const COLUMN_LAYOUT_LABELS = { } export function Settings({ state, onStateChanged }: SettingsProps) { - const { showRecipient, partialFillsEnabled, limitPricePosition, limitPriceLocked, columnLayout } = state + const { showRecipient, partialFillsEnabled, limitPricePosition, limitPriceLocked, columnLayout, ordersTableOnLeft } = + state const [isOpen, setIsOpen] = useState(false) const [isColumnLayoutOpen, setIsColumnLayoutOpen] = useState(false) @@ -180,6 +181,13 @@ export function Settings({ state, onStateChanged }: SettingsProps) { toggle={() => onStateChanged({ limitPriceLocked: !limitPriceLocked })} /> + onStateChanged({ ordersTableOnLeft: !ordersTableOnLeft })} + /> + Limit Price Position diff --git a/apps/cowswap-frontend/src/modules/limitOrders/state/limitOrdersSettingsAtom.ts b/apps/cowswap-frontend/src/modules/limitOrders/state/limitOrdersSettingsAtom.ts index 890e4d93f6..5c8c70af9e 100644 --- a/apps/cowswap-frontend/src/modules/limitOrders/state/limitOrdersSettingsAtom.ts +++ b/apps/cowswap-frontend/src/modules/limitOrders/state/limitOrdersSettingsAtom.ts @@ -22,6 +22,7 @@ export interface LimitOrdersSettingsState { readonly limitPricePosition: 'top' | 'between' | 'bottom' readonly limitPriceLocked: boolean readonly columnLayout: ColumnLayoutType + readonly ordersTableOnLeft: boolean } export const defaultLimitOrdersSettings: LimitOrdersSettingsState = { @@ -32,6 +33,7 @@ export const defaultLimitOrdersSettings: LimitOrdersSettingsState = { limitPricePosition: 'top', limitPriceLocked: true, columnLayout: 'DEFAULT', + ordersTableOnLeft: false, } // regular diff --git a/apps/cowswap-frontend/src/modules/trade/pure/TradePageLayout/index.tsx b/apps/cowswap-frontend/src/modules/trade/pure/TradePageLayout/index.tsx index c819fa173a..5bff8c5b78 100644 --- a/apps/cowswap-frontend/src/modules/trade/pure/TradePageLayout/index.tsx +++ b/apps/cowswap-frontend/src/modules/trade/pure/TradePageLayout/index.tsx @@ -3,24 +3,29 @@ import { Media, UI } from '@cowprotocol/ui' import styled from 'styled-components/macro' import { WIDGET_MAX_WIDTH } from 'theme' -export const PageWrapper = styled.div<{ isUnlocked: boolean }>` +export const PageWrapper = styled.div<{ isUnlocked: boolean; secondaryOnLeft?: boolean }>` width: 100%; display: grid; max-width: 1500px; margin: 0 auto; - grid-template-columns: ${({ isUnlocked }) => (isUnlocked ? WIDGET_MAX_WIDTH.swap : '')} 1fr; - grid-template-rows: max-content; + grid-template-columns: ${({ isUnlocked, secondaryOnLeft }) => + isUnlocked ? (secondaryOnLeft ? '1fr ' + WIDGET_MAX_WIDTH.swap : WIDGET_MAX_WIDTH.swap + ' 1fr') : ''}; + grid-template-rows: 1fr; + grid-template-areas: ${({ secondaryOnLeft }) => (secondaryOnLeft ? '"secondary primary"' : '"primary secondary"')}; grid-column-gap: 20px; ${Media.upToLarge()} { - display: flex; - flex-flow: column wrap; + grid-template-columns: 1fr; + grid-template-rows: auto auto; + grid-template-areas: ${({ secondaryOnLeft }) => + secondaryOnLeft ? '"secondary" "primary"' : '"primary" "secondary"'}; } > div:last-child { display: ${({ isUnlocked }) => (isUnlocked ? '' : 'none')}; } ` + // Form + banner export const PrimaryWrapper = styled.div` display: flex; @@ -30,6 +35,7 @@ export const PrimaryWrapper = styled.div` max-width: ${WIDGET_MAX_WIDTH.swap}; margin: 0 auto; color: inherit; + grid-area: primary; ` // Graph + orders table @@ -48,9 +54,10 @@ export const SecondaryWrapper = styled.div` min-height: 200px; width: 100%; margin: 0 0 76px; + grid-area: secondary; ${Media.upToLargeAlt()} { flex-flow: column wrap; - margin: 56px 0; + margin: 0 0 20px; } ` diff --git a/apps/cowswap-frontend/src/pages/LimitOrders/RegularLimitOrders.tsx b/apps/cowswap-frontend/src/pages/LimitOrders/RegularLimitOrders.tsx index 542305fa8f..20162cf746 100644 --- a/apps/cowswap-frontend/src/pages/LimitOrders/RegularLimitOrders.tsx +++ b/apps/cowswap-frontend/src/pages/LimitOrders/RegularLimitOrders.tsx @@ -1,22 +1,24 @@ +import { useAtomValue } from 'jotai' + import { UiOrderType } from '@cowprotocol/types' import { useWalletInfo } from '@cowprotocol/wallet' import { useOrders } from 'legacy/state/orders/hooks' import { useInjectedWidgetParams } from 'modules/injectedWidget' -import { LimitOrdersWidget, useIsWidgetUnlocked } from 'modules/limitOrders' +import { LimitOrdersWidget, useIsWidgetUnlocked, limitOrdersSettingsAtom } from 'modules/limitOrders' import { OrdersTableWidget, TabOrderTypes } from 'modules/ordersTable' import * as styledEl from 'modules/trade/pure/TradePageLayout' - export function RegularLimitOrders() { const isUnlocked = useIsWidgetUnlocked() const { chainId, account } = useWalletInfo() const allLimitOrders = useOrders(chainId, account, UiOrderType.LIMIT) const { hideOrdersTable } = useInjectedWidgetParams() + const { ordersTableOnLeft } = useAtomValue(limitOrdersSettingsAtom) return ( - + From 494f651a2daead88a2d77e08904e1178460935ab Mon Sep 17 00:00:00 2001 From: fairlighteth <31534717+fairlighteth@users.noreply.github.com> Date: Thu, 12 Dec 2024 16:02:13 +0000 Subject: [PATCH 5/8] feat: orders table position setting --- .../limitOrders/pure/Settings/index.tsx | 4 ++-- .../trade/pure/TradePageLayout/index.tsx | 18 +++++++++--------- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/apps/cowswap-frontend/src/modules/limitOrders/pure/Settings/index.tsx b/apps/cowswap-frontend/src/modules/limitOrders/pure/Settings/index.tsx index 32981f7d3e..41061e9e39 100644 --- a/apps/cowswap-frontend/src/modules/limitOrders/pure/Settings/index.tsx +++ b/apps/cowswap-frontend/src/modules/limitOrders/pure/Settings/index.tsx @@ -182,8 +182,8 @@ export function Settings({ state, onStateChanged }: SettingsProps) { /> onStateChanged({ ordersTableOnLeft: !ordersTableOnLeft })} /> diff --git a/apps/cowswap-frontend/src/modules/trade/pure/TradePageLayout/index.tsx b/apps/cowswap-frontend/src/modules/trade/pure/TradePageLayout/index.tsx index 5bff8c5b78..093909e113 100644 --- a/apps/cowswap-frontend/src/modules/trade/pure/TradePageLayout/index.tsx +++ b/apps/cowswap-frontend/src/modules/trade/pure/TradePageLayout/index.tsx @@ -8,17 +8,17 @@ export const PageWrapper = styled.div<{ isUnlocked: boolean; secondaryOnLeft?: b display: grid; max-width: 1500px; margin: 0 auto; - grid-template-columns: ${({ isUnlocked, secondaryOnLeft }) => - isUnlocked ? (secondaryOnLeft ? '1fr ' + WIDGET_MAX_WIDTH.swap : WIDGET_MAX_WIDTH.swap + ' 1fr') : ''}; - grid-template-rows: 1fr; - grid-template-areas: ${({ secondaryOnLeft }) => (secondaryOnLeft ? '"secondary primary"' : '"primary secondary"')}; + grid-template-columns: 1fr; + grid-template-rows: auto auto; + grid-template-areas: 'primary' 'secondary'; grid-column-gap: 20px; + gap: 20px; - ${Media.upToLarge()} { - grid-template-columns: 1fr; - grid-template-rows: auto auto; - grid-template-areas: ${({ secondaryOnLeft }) => - secondaryOnLeft ? '"secondary" "primary"' : '"primary" "secondary"'}; + ${Media.LargeAndUp()} { + grid-template-columns: ${({ isUnlocked, secondaryOnLeft }) => + isUnlocked ? (secondaryOnLeft ? '1fr ' + WIDGET_MAX_WIDTH.swap : WIDGET_MAX_WIDTH.swap + ' 1fr') : ''}; + grid-template-rows: 1fr; + grid-template-areas: ${({ secondaryOnLeft }) => (secondaryOnLeft ? '"secondary primary"' : '"primary secondary"')}; } > div:last-child { From 782aa32ce1abc8d477c9757e922e8078606504a0 Mon Sep 17 00:00:00 2001 From: fairlighteth <31534717+fairlighteth@users.noreply.github.com> Date: Thu, 12 Dec 2024 16:21:46 +0000 Subject: [PATCH 6/8] feat: shared left aligned orders setting limit and TWAP --- .../advancedOrders/pure/Settings/index.tsx | 20 +++++++++++++++++-- .../trade/pure/TradePageLayout/index.tsx | 13 ++++++++---- .../src/pages/AdvancedOrders/index.tsx | 9 ++++++++- .../pages/LimitOrders/RegularLimitOrders.tsx | 4 +++- 4 files changed, 38 insertions(+), 8 deletions(-) diff --git a/apps/cowswap-frontend/src/modules/advancedOrders/pure/Settings/index.tsx b/apps/cowswap-frontend/src/modules/advancedOrders/pure/Settings/index.tsx index 51ec93bc1f..bd938ddcb8 100644 --- a/apps/cowswap-frontend/src/modules/advancedOrders/pure/Settings/index.tsx +++ b/apps/cowswap-frontend/src/modules/advancedOrders/pure/Settings/index.tsx @@ -1,6 +1,13 @@ -import { AdvancedOrdersSettingsState } from 'modules/advancedOrders/state/advancedOrdersSettingsAtom' +import { useAtomValue, useSetAtom } from 'jotai' + +import { + limitOrdersSettingsAtom, + updateLimitOrdersSettingsAtom, +} from 'modules/limitOrders/state/limitOrdersSettingsAtom' import { SettingsBox, SettingsContainer, SettingsTitle } from 'modules/trade/pure/Settings' +import { AdvancedOrdersSettingsState } from '../../state/advancedOrdersSettingsAtom' + export interface SettingsProps { state: AdvancedOrdersSettingsState onStateChanged: (state: Partial) => void @@ -8,10 +15,12 @@ export interface SettingsProps { export function Settings({ state, onStateChanged }: SettingsProps) { const { showRecipient } = state + const limitOrdersSettings = useAtomValue(limitOrdersSettingsAtom) + const updateLimitOrdersSettings = useSetAtom(updateLimitOrdersSettingsAtom) return ( - Interface Settings + Advanced Order Settings onStateChanged({ showRecipient: !showRecipient })} /> + + updateLimitOrdersSettings({ ordersTableOnLeft: !limitOrdersSettings.ordersTableOnLeft })} + /> ) } diff --git a/apps/cowswap-frontend/src/modules/trade/pure/TradePageLayout/index.tsx b/apps/cowswap-frontend/src/modules/trade/pure/TradePageLayout/index.tsx index 093909e113..7e48603ae6 100644 --- a/apps/cowswap-frontend/src/modules/trade/pure/TradePageLayout/index.tsx +++ b/apps/cowswap-frontend/src/modules/trade/pure/TradePageLayout/index.tsx @@ -3,20 +3,25 @@ import { Media, UI } from '@cowprotocol/ui' import styled from 'styled-components/macro' import { WIDGET_MAX_WIDTH } from 'theme' -export const PageWrapper = styled.div<{ isUnlocked: boolean; secondaryOnLeft?: boolean }>` +const DEFAULT_MAX_WIDTH = '1500px' + +export const PageWrapper = styled.div<{ isUnlocked: boolean; secondaryOnLeft?: boolean; maxWidth?: string }>` width: 100%; display: grid; - max-width: 1500px; + max-width: ${({ maxWidth = DEFAULT_MAX_WIDTH }) => maxWidth}; margin: 0 auto; grid-template-columns: 1fr; grid-template-rows: auto auto; grid-template-areas: 'primary' 'secondary'; - grid-column-gap: 20px; gap: 20px; ${Media.LargeAndUp()} { grid-template-columns: ${({ isUnlocked, secondaryOnLeft }) => - isUnlocked ? (secondaryOnLeft ? '1fr ' + WIDGET_MAX_WIDTH.swap : WIDGET_MAX_WIDTH.swap + ' 1fr') : ''}; + isUnlocked + ? secondaryOnLeft + ? '1fr minmax(auto, ' + WIDGET_MAX_WIDTH.swap.replace('px', '') + 'px)' + : 'minmax(auto, ' + WIDGET_MAX_WIDTH.swap.replace('px', '') + 'px) 1fr' + : '1fr'}; grid-template-rows: 1fr; grid-template-areas: ${({ secondaryOnLeft }) => (secondaryOnLeft ? '"secondary primary"' : '"primary secondary"')}; } diff --git a/apps/cowswap-frontend/src/pages/AdvancedOrders/index.tsx b/apps/cowswap-frontend/src/pages/AdvancedOrders/index.tsx index db9d944cb9..0f09b468bd 100644 --- a/apps/cowswap-frontend/src/pages/AdvancedOrders/index.tsx +++ b/apps/cowswap-frontend/src/pages/AdvancedOrders/index.tsx @@ -7,6 +7,7 @@ import { SetupAdvancedOrderAmountsFromUrlUpdater, } from 'modules/advancedOrders' import { useInjectedWidgetParams } from 'modules/injectedWidget' +import { limitOrdersSettingsAtom } from 'modules/limitOrders/state/limitOrdersSettingsAtom' import { OrdersTableWidget, TabOrderTypes } from 'modules/ordersTable' import * as styledEl from 'modules/trade/pure/TradePageLayout' import { @@ -20,9 +21,11 @@ import { } from 'modules/twap' import { TwapFormState } from 'modules/twap/pure/PrimaryActionButton/getTwapFormState' +const ADVANCED_ORDERS_MAX_WIDTH = '1800px' export default function AdvancedOrdersPage() { const { isUnlocked } = useAtomValue(advancedOrdersAtom) + const { ordersTableOnLeft } = useAtomValue(limitOrdersSettingsAtom) const allEmulatedOrders = useAllEmulatedOrders() @@ -40,7 +43,11 @@ export default function AdvancedOrdersPage() { <> - + } diff --git a/apps/cowswap-frontend/src/pages/LimitOrders/RegularLimitOrders.tsx b/apps/cowswap-frontend/src/pages/LimitOrders/RegularLimitOrders.tsx index 20162cf746..2254eb869b 100644 --- a/apps/cowswap-frontend/src/pages/LimitOrders/RegularLimitOrders.tsx +++ b/apps/cowswap-frontend/src/pages/LimitOrders/RegularLimitOrders.tsx @@ -10,6 +10,8 @@ import { LimitOrdersWidget, useIsWidgetUnlocked, limitOrdersSettingsAtom } from import { OrdersTableWidget, TabOrderTypes } from 'modules/ordersTable' import * as styledEl from 'modules/trade/pure/TradePageLayout' +const LIMIT_ORDERS_MAX_WIDTH = '1800px' + export function RegularLimitOrders() { const isUnlocked = useIsWidgetUnlocked() const { chainId, account } = useWalletInfo() @@ -18,7 +20,7 @@ export function RegularLimitOrders() { const { ordersTableOnLeft } = useAtomValue(limitOrdersSettingsAtom) return ( - + From 0d92de23cb3bbebdc255cf6070b6d525e20c77f2 Mon Sep 17 00:00:00 2001 From: fairlighteth <31534717+fairlighteth@users.noreply.github.com> Date: Thu, 12 Dec 2024 16:33:26 +0000 Subject: [PATCH 7/8] feat: shared limit and twap settings --- .../src/modules/advancedOrders/pure/Settings/index.tsx | 5 +++-- .../src/modules/limitOrders/pure/Settings/index.tsx | 5 +++-- apps/cowswap-frontend/src/modules/trade/const/common.ts | 8 ++++++++ 3 files changed, 14 insertions(+), 4 deletions(-) diff --git a/apps/cowswap-frontend/src/modules/advancedOrders/pure/Settings/index.tsx b/apps/cowswap-frontend/src/modules/advancedOrders/pure/Settings/index.tsx index bd938ddcb8..77f295a4b1 100644 --- a/apps/cowswap-frontend/src/modules/advancedOrders/pure/Settings/index.tsx +++ b/apps/cowswap-frontend/src/modules/advancedOrders/pure/Settings/index.tsx @@ -4,6 +4,7 @@ import { limitOrdersSettingsAtom, updateLimitOrdersSettingsAtom, } from 'modules/limitOrders/state/limitOrdersSettingsAtom' +import { ORDERS_TABLE_SETTINGS } from 'modules/trade/const/common' import { SettingsBox, SettingsContainer, SettingsTitle } from 'modules/trade/pure/Settings' import { AdvancedOrdersSettingsState } from '../../state/advancedOrdersSettingsAtom' @@ -30,8 +31,8 @@ export function Settings({ state, onStateChanged }: SettingsProps) { /> updateLimitOrdersSettings({ ordersTableOnLeft: !limitOrdersSettings.ordersTableOnLeft })} /> diff --git a/apps/cowswap-frontend/src/modules/limitOrders/pure/Settings/index.tsx b/apps/cowswap-frontend/src/modules/limitOrders/pure/Settings/index.tsx index 41061e9e39..4b756b6253 100644 --- a/apps/cowswap-frontend/src/modules/limitOrders/pure/Settings/index.tsx +++ b/apps/cowswap-frontend/src/modules/limitOrders/pure/Settings/index.tsx @@ -5,6 +5,7 @@ import { HelpTooltip } from '@cowprotocol/ui' import styled from 'styled-components/macro' +import { ORDERS_TABLE_SETTINGS } from 'modules/trade/const/common' import { SettingsBox, SettingsContainer, SettingsTitle } from 'modules/trade/pure/Settings' import { LimitOrdersSettingsState } from '../../state/limitOrdersSettingsAtom' @@ -182,8 +183,8 @@ export function Settings({ state, onStateChanged }: SettingsProps) { /> onStateChanged({ ordersTableOnLeft: !ordersTableOnLeft })} /> diff --git a/apps/cowswap-frontend/src/modules/trade/const/common.ts b/apps/cowswap-frontend/src/modules/trade/const/common.ts index 503f40f539..851ff6d027 100644 --- a/apps/cowswap-frontend/src/modules/trade/const/common.ts +++ b/apps/cowswap-frontend/src/modules/trade/const/common.ts @@ -8,3 +8,11 @@ export const TradeTypeToUiOrderType: Record = { [TradeType.ADVANCED_ORDERS]: UiOrderType.TWAP, [TradeType.YIELD]: UiOrderType.YIELD, } + +export const ORDERS_TABLE_SETTINGS = { + LEFT_ALIGNED: { + title: 'Desktop: Left-Aligned Orders Table', + tooltip: + 'When enabled, the orders table will be displayed on the left side on desktop screens. On mobile, the orders table will always be stacked below.', + }, +} as const From cc705f3daf02a92989e3f27a038f5980a5e623c9 Mon Sep 17 00:00:00 2001 From: fairlighteth <31534717+fairlighteth@users.noreply.github.com> Date: Thu, 12 Dec 2024 16:38:21 +0000 Subject: [PATCH 8/8] feat: fix lint issue --- .../modules/ordersTable/containers/OrdersTableWidget/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 1e2d9ef298..3c04974bf6 100644 --- a/apps/cowswap-frontend/src/modules/ordersTable/containers/OrdersTableWidget/index.tsx +++ b/apps/cowswap-frontend/src/modules/ordersTable/containers/OrdersTableWidget/index.tsx @@ -30,7 +30,7 @@ import { useOrdersTableTokenApprove } from './hooks/useOrdersTableTokenApprove' import { useValidatePageUrlParams } from './hooks/useValidatePageUrlParams' import { BalancesAndAllowances } from '../../../tokens' -import { OPEN_TAB, ORDERS_TABLE_TABS, ALL_ORDERS_TAB, ORDERS_TABLE_PAGE_SIZE } from '../../const/tabs' +import { OPEN_TAB, ORDERS_TABLE_TABS, ALL_ORDERS_TAB } from '../../const/tabs' import { OrdersTableContainer } from '../../pure/OrdersTableContainer' import { ColumnLayout, LAYOUT_MAP } from '../../pure/OrdersTableContainer/tableHeaders' import { OrderActions } from '../../pure/OrdersTableContainer/types'