From e3257d4da17d28f87e01b607fb90d3fb64bc5e14 Mon Sep 17 00:00:00 2001 From: Matthew Russell Date: Mon, 10 Jul 2023 16:39:13 +0100 Subject: [PATCH] feat: adjust padding and add same scroll element for all sidebar children --- .../layouts/layout-with-sidebar.tsx | 3 +- apps/trading/components/sidebar/sidebar.tsx | 14 +- apps/trading/pages/_app.page.tsx | 2 +- .../components/deal-ticket/deal-ticket.tsx | 422 +++++++++--------- .../market-info/market-info-accordion.tsx | 6 +- 5 files changed, 221 insertions(+), 226 deletions(-) diff --git a/apps/trading/components/layouts/layout-with-sidebar.tsx b/apps/trading/components/layouts/layout-with-sidebar.tsx index aa49acc9b..4125148f9 100644 --- a/apps/trading/components/layouts/layout-with-sidebar.tsx +++ b/apps/trading/components/layouts/layout-with-sidebar.tsx @@ -23,7 +23,8 @@ export const LayoutWithSidebar = () => {
diff --git a/apps/trading/components/sidebar/sidebar.tsx b/apps/trading/components/sidebar/sidebar.tsx index 40cb68e44..67b8cd8b6 100644 --- a/apps/trading/components/sidebar/sidebar.tsx +++ b/apps/trading/components/sidebar/sidebar.tsx @@ -8,7 +8,7 @@ import { DealTicketContainer } from '@vegaprotocol/deal-ticket'; import { DepositContainer } from '@vegaprotocol/deposits'; import { t } from '@vegaprotocol/i18n'; import { MarketInfoAccordionContainer } from '@vegaprotocol/markets'; -import { VegaIcon, VegaIconNames } from '@vegaprotocol/ui-toolkit'; +import { TinyScroll, VegaIcon, VegaIconNames } from '@vegaprotocol/ui-toolkit'; import { NodeHealthContainer } from '../node-health'; import { Settings } from '../settings'; import { Tooltip } from '../../components/tooltip'; @@ -186,7 +186,11 @@ export const SidebarContent = () => { if (view.type === ViewType.Info) { if (params.marketId) { - return ; + return ( + + + + ); } else { return ; } @@ -235,14 +239,14 @@ const ContentWrapper = ({ title?: string; }) => { return ( -
{title &&

{title}

} {children} -
+ ); }; diff --git a/apps/trading/pages/_app.page.tsx b/apps/trading/pages/_app.page.tsx index 344a49091..59eef4e52 100644 --- a/apps/trading/pages/_app.page.tsx +++ b/apps/trading/pages/_app.page.tsx @@ -79,7 +79,7 @@ function AppBody({ Component }: AppProps) { 'grid-rows-[repeat(3,min-content),minmax(0,1fr)]' ); return ( -
+
{/* Cannot use meta tags in _document.page.tsx see https://nextjs.org/docs/messages/no-document-viewport-meta */} diff --git a/libs/deal-ticket/src/components/deal-ticket/deal-ticket.tsx b/libs/deal-ticket/src/components/deal-ticket/deal-ticket.tsx index e1af7ed64..943e6f665 100644 --- a/libs/deal-ticket/src/components/deal-ticket/deal-ticket.tsx +++ b/libs/deal-ticket/src/components/deal-ticket/deal-ticket.tsx @@ -22,7 +22,6 @@ import { Intent, Notification, Tooltip, - TinyScroll, } from '@vegaprotocol/ui-toolkit'; import { @@ -268,229 +267,224 @@ export const DealTicket = ({ if (!order || !normalizedOrder) return null; return ( - -
- ( - { - if (type === OrderType.TYPE_NETWORK) return; - update({ - type, - // when changing type also update the TIF to what was last used of new type - timeInForce: lastTIF[type] || order.timeInForce, - postOnly: - type === OrderType.TYPE_MARKET ? false : order.postOnly, - reduceOnly: - type === OrderType.TYPE_LIMIT && - ![ - OrderTimeInForce.TIME_IN_FORCE_FOK, - OrderTimeInForce.TIME_IN_FORCE_IOC, - ].includes(lastTIF[type] || order.timeInForce) - ? false - : order.postOnly, - expiresAt: undefined, - }); - clearErrors(['expiresAt', 'price']); - }} - market={market} - marketData={marketData} - errorMessage={errors.type?.message} - /> - )} - /> - ( - { - update({ side }); - }} - /> - )} - /> - - ( - { - // Reset post only and reduce only when changing TIF - update({ - timeInForce, - postOnly: [ + + ( + { + if (type === OrderType.TYPE_NETWORK) return; + update({ + type, + // when changing type also update the TIF to what was last used of new type + timeInForce: lastTIF[type] || order.timeInForce, + postOnly: + type === OrderType.TYPE_MARKET ? false : order.postOnly, + reduceOnly: + type === OrderType.TYPE_LIMIT && + ![ OrderTimeInForce.TIME_IN_FORCE_FOK, OrderTimeInForce.TIME_IN_FORCE_IOC, - ].includes(timeInForce) + ].includes(lastTIF[type] || order.timeInForce) ? false : order.postOnly, - reduceOnly: ![ - OrderTimeInForce.TIME_IN_FORCE_FOK, - OrderTimeInForce.TIME_IN_FORCE_IOC, - ].includes(timeInForce) - ? false - : order.reduceOnly, - }); - // Set TIF value for the given order type, so that when switching - // types we know the last used TIF for the given order type - setLastTIF((curr) => ({ - ...curr, - [order.type]: timeInForce, - expiresAt: undefined, - })); - clearErrors('expiresAt'); + expiresAt: undefined, + }); + clearErrors(['expiresAt', 'price']); + }} + market={market} + marketData={marketData} + errorMessage={errors.type?.message} + /> + )} + /> + ( + { + update({ side }); + }} + /> + )} + /> + + ( + { + // Reset post only and reduce only when changing TIF + update({ + timeInForce, + postOnly: [ + OrderTimeInForce.TIME_IN_FORCE_FOK, + OrderTimeInForce.TIME_IN_FORCE_IOC, + ].includes(timeInForce) + ? false + : order.postOnly, + reduceOnly: ![ + OrderTimeInForce.TIME_IN_FORCE_FOK, + OrderTimeInForce.TIME_IN_FORCE_IOC, + ].includes(timeInForce) + ? false + : order.reduceOnly, + }); + // Set TIF value for the given order type, so that when switching + // types we know the last used TIF for the given order type + setLastTIF((curr) => ({ + ...curr, + [order.type]: timeInForce, + expiresAt: undefined, + })); + clearErrors('expiresAt'); + }} + market={market} + marketData={marketData} + errorMessage={errors.timeInForce?.message} + /> + )} + /> + {order.type === Schema.OrderType.TYPE_LIMIT && + order.timeInForce === Schema.OrderTimeInForce.TIME_IN_FORCE_GTT && ( + ( + + update({ + expiresAt: expiresAt || undefined, + }) + } + errorMessage={errors.expiresAt?.message} + /> + )} + /> + )} +
+ ( + { + update({ postOnly: !order.postOnly, reduceOnly: false }); }} - market={market} - marketData={marketData} - errorMessage={errors.timeInForce?.message} - /> - )} - /> - {order.type === Schema.OrderType.TYPE_LIMIT && - order.timeInForce === Schema.OrderTimeInForce.TIME_IN_FORCE_GTT && ( - ( - - update({ - expiresAt: expiresAt || undefined, - }) + label={ + + {disablePostOnlyCheckbox + ? t( + '"Post only" can not be used on "Fill or Kill" or "Immediate or Cancel" orders.' + ) + : t( + '"Post only" will ensure the order is not filled immediately but is placed on the order book as a passive order. When the order is processed it is either stopped (if it would not be filled immediately), or placed in the order book as a passive order until the price taker matches with it.' + )} + } - errorMessage={errors.expiresAt?.message} - /> - )} + > + {t('Post only')} + + } /> )} -
- ( - { - update({ postOnly: !order.postOnly, reduceOnly: false }); - }} - label={ - - {disablePostOnlyCheckbox - ? t( - '"Post only" can not be used on "Fill or Kill" or "Immediate or Cancel" orders.' - ) - : t( - '"Post only" will ensure the order is not filled immediately but is placed on the order book as a passive order. When the order is processed it is either stopped (if it would not be filled immediately), or placed in the order book as a passive order until the price taker matches with it.' - )} - - } - > - {t('Post only')} - - } - /> - )} - /> - ( - { - update({ postOnly: false, reduceOnly: !order.reduceOnly }); - }} - label={ - - {disableReduceOnlyCheckbox - ? t( - '"Reduce only" can be used only with non-persistent orders, such as "Fill or Kill" or "Immediate or Cancel".' - ) - : t( - '"Reduce only" will ensure that this order will not increase the size of an open position. When the order is matched, it will only trade enough volume to bring your open volume towards 0 but never change the direction of your position. If applied to a limit order that is not instantly filled, the order will be stopped.' - )} - - } - > - {t('Reduce only')} - - } - /> - )} - /> -
- - - ( + { + update({ postOnly: false, reduceOnly: !order.reduceOnly }); + }} + label={ + + {disableReduceOnlyCheckbox + ? t( + '"Reduce only" can be used only with non-persistent orders, such as "Fill or Kill" or "Immediate or Cancel".' + ) + : t( + '"Reduce only" will ensure that this order will not increase the size of an open position. When the order is matched, it will only trade enough volume to bring your open volume towards 0 but never change the direction of your position. If applied to a limit order that is not instantly filled, the order will be stopped.' + )} + + } + > + {t('Reduce only')} + + } + /> + )} /> - - +
+ + + + ); }; diff --git a/libs/markets/src/lib/components/market-info/market-info-accordion.tsx b/libs/markets/src/lib/components/market-info/market-info-accordion.tsx index 10e347841..b6c61dba6 100644 --- a/libs/markets/src/lib/components/market-info/market-info-accordion.tsx +++ b/libs/markets/src/lib/components/market-info/market-info-accordion.tsx @@ -61,11 +61,7 @@ export const MarketInfoAccordionContainer = ({ return ( {data ? ( - -
- -
- + ) : (

{t('Could not load market')}