Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: hide orders table widget #5303

Merged
merged 3 commits into from
Jan 16, 2025
Merged

feat: hide orders table widget #5303

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
268a66b
feat: hide orders table widget
fairlighteth Jan 16, 2025
260aad0
feat: hide orders table widget for limit and twap
fairlighteth Jan 16, 2025
c94329f
Merge branch 'feat/limit-ui-upgrade-13' into feat/limit-ui-upgrade-14
fairlighteth Jan 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 13 additions & 7 deletions apps/cowswap-frontend/src/modules/trade/pure/TradePageLayout/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,29 +5,35 @@ import { WIDGET_MAX_WIDTH } from 'theme'

const DEFAULT_MAX_WIDTH = '1500px'

export const PageWrapper = styled.div<{ isUnlocked: boolean; secondaryOnLeft?: boolean; maxWidth?: string }>`
export const PageWrapper = styled.div<{
isUnlocked: boolean
secondaryOnLeft?: boolean
maxWidth?: string
hideOrdersTable?: boolean
}>`
width: 100%;
display: grid;
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-template-rows: auto;
grid-template-areas: ${({ hideOrdersTable }) => (hideOrdersTable ? '"primary"' : '"primary" "secondary"')};
gap: 20px;

${Media.LargeAndUp()} {
grid-template-columns: ${({ isUnlocked, secondaryOnLeft }) =>
isUnlocked
grid-template-columns: ${({ isUnlocked, hideOrdersTable, secondaryOnLeft }) =>
isUnlocked && !hideOrdersTable
? 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"')};
grid-template-areas: ${({ secondaryOnLeft, hideOrdersTable }) =>
hideOrdersTable ? '"primary"' : secondaryOnLeft ? '"secondary primary"' : '"primary secondary"'};
}

> div:last-child {
display: ${({ isUnlocked }) => (isUnlocked ? '' : 'none')};
display: ${({ isUnlocked }) => (!isUnlocked ? 'none' : '')};
Comment on lines -30 to +36
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"Trocou 6 por meia dúzia", is what I have to say about this change

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let me explain: https://crossidiomas.com/trocar-seis-por-meia-duzia/

Copy link
Contributor

@anxolin anxolin Jan 16, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pluuuus, unlock means not locked, so effectivelly reads worse: "not not lock: double negations are harder to reason about

}
`

Expand Down
9 changes: 5 additions & 4 deletions apps/cowswap-frontend/src/pages/AdvancedOrders/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ export default function AdvancedOrdersPage() {
isUnlocked={isUnlocked}
maxWidth={ADVANCED_ORDERS_MAX_WIDTH}
secondaryOnLeft={ordersTableOnLeft}
hideOrdersTable={hideOrdersTable}
>
<styledEl.PrimaryWrapper>
{isFallbackHandlerRequired && pendingOrders.length > 0 && <SetupFallbackHandlerWarning />}
Expand All @@ -69,15 +70,15 @@ export default function AdvancedOrdersPage() {
</AdvancedOrdersWidget>
</styledEl.PrimaryWrapper>

<styledEl.SecondaryWrapper>
{!hideOrdersTable && (
{!hideOrdersTable && (
<styledEl.SecondaryWrapper>
<OrdersTableWidget
displayOrdersOnlyForSafeApp={true}
orderType={TabOrderTypes.ADVANCED}
orders={allEmulatedOrders}
/>
)}
</styledEl.SecondaryWrapper>
</styledEl.SecondaryWrapper>
)}
</styledEl.PageWrapper>
</>
)
Expand Down
15 changes: 10 additions & 5 deletions apps/cowswap-frontend/src/pages/LimitOrders/RegularLimitOrders.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,20 +20,25 @@ export function RegularLimitOrders() {
const { ordersTableOnLeft } = useAtomValue(limitOrdersSettingsAtom)

return (
<styledEl.PageWrapper isUnlocked={isUnlocked} secondaryOnLeft={ordersTableOnLeft} maxWidth={LIMIT_ORDERS_MAX_WIDTH}>
<styledEl.PageWrapper
isUnlocked={isUnlocked}
secondaryOnLeft={ordersTableOnLeft}
maxWidth={LIMIT_ORDERS_MAX_WIDTH}
hideOrdersTable={hideOrdersTable}
>
<styledEl.PrimaryWrapper>
<LimitOrdersWidget />
</styledEl.PrimaryWrapper>

<styledEl.SecondaryWrapper>
{!hideOrdersTable && (
{!hideOrdersTable && (
<styledEl.SecondaryWrapper>
<OrdersTableWidget
displayOrdersOnlyForSafeApp={false}
orderType={TabOrderTypes.LIMIT}
orders={allLimitOrders}
/>
)}
</styledEl.SecondaryWrapper>
</styledEl.SecondaryWrapper>
)}
</styledEl.PageWrapper>
)
}
Loading