feat: hide orders table widget (#5303)

* feat: hide orders table widget * feat: hide orders table widget for limit and twap
cowprotocol · Jan 16, 2025 · e135932 · e135932
1 parent 0fe6a26
commit e135932
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 16 deletions.
diff --git a/apps/cowswap-frontend/src/modules/trade/pure/TradePageLayout/index.tsx b/apps/cowswap-frontend/src/modules/trade/pure/TradePageLayout/index.tsx
@@ -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' : '')};
   }
 `
 

diff --git a/apps/cowswap-frontend/src/pages/AdvancedOrders/index.tsx b/apps/cowswap-frontend/src/pages/AdvancedOrders/index.tsx
@@ -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 />}
@@ -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>
     </>
   )

diff --git a/apps/cowswap-frontend/src/pages/LimitOrders/RegularLimitOrders.tsx b/apps/cowswap-frontend/src/pages/LimitOrders/RegularLimitOrders.tsx
@@ -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>
   )
 }