feat(uirefresh): component refresh - orderbook

src/components/Tabs.tsx

@@ -110,7 +110,7 @@ export const Tabs = <TabItemsValue extends string>({
       </$List>
 
       {(currentItem?.slotToolbar ?? slotToolbar) && (
-        <Toolbar>{currentItem?.slotToolbar ?? slotToolbar}</Toolbar>
+        <$Toolbar>{currentItem?.slotToolbar ?? slotToolbar}</$Toolbar>
       )}
     </>
   );
@@ -176,6 +176,8 @@ const $Root = styled(Root)<{
     --tabs-currentHeight: var(--tabs-height-mobile);
   }
 
+  --toolbar-width: ;
+
   /* Rules */
   ${layoutMixins.scrollArea}
   overscroll-behavior: contain;
@@ -358,6 +360,11 @@ const $DropdownSelectMenu = styled(DropdownSelectMenu)<{
       : css``}
 ` as typeof dropdownSelectMenuType;
 
+const $Toolbar = styled(Toolbar)`
+  justify-content: flex-end;
+  width: var(--toolbar-width);
+`;
+
 export const MobileTabs = styled(Tabs)`
   --trigger-backgroundColor: transparent;
   --trigger-active-backgroundColor: transparent;

src/components/Toolbar.tsx

@@ -45,5 +45,5 @@ const $Root = styled(Root)<{ layout?: 'column' | 'row' }>`
       row: layoutMixins.row,
     }[layout]}
 
-  padding: 0 1rem;
+  padding: var(--toolbar-padding, 0 1rem);
 `;

src/constants/orderbook.ts

@@ -13,4 +13,5 @@ export const ORDERBOOK_HEIGHT = 756;
 export const ORDERBOOK_WIDTH = 300;
 export const ORDERBOOK_ROW_HEIGHT = 21;
 export const ORDERBOOK_ROW_PADDING_RIGHT = 8;
-export const ORDERBOOK_HEADER_HEIGHT = 70;
+export const ORDERBOOK_HEADER_HEIGHT = 43;
+export const ORDERBOOK_CONTROLS_HEIGHT = 38;

src/pages/trade/VerticalPanel.tsx

@@ -1,15 +1,28 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 
+import { shallowEqual } from 'react-redux';
+import styled from 'styled-components';
+
 import { TradeLayouts } from '@/constants/layout';
 import { STRING_KEYS } from '@/constants/localization';
-import { ORDERBOOK_HEADER_HEIGHT, ORDERBOOK_ROW_HEIGHT } from '@/constants/orderbook';
+import {
+  ORDERBOOK_CONTROLS_HEIGHT,
+  ORDERBOOK_MAX_ROWS_PER_SIDE,
+  ORDERBOOK_HEADER_HEIGHT,
+  ORDERBOOK_ROW_HEIGHT,
+} from '@/constants/orderbook';
 
+import { useCalculateOrderbookData } from '@/hooks/Orderbook/useOrderbookValues';
 import { useStringGetter } from '@/hooks/useStringGetter';
 
 import { Tabs } from '@/components/Tabs';
 import { CanvasOrderbook } from '@/views/CanvasOrderbook/CanvasOrderbook';
+import { OrderbookControls } from '@/views/CanvasOrderbook/OrderbookControls';
 import { LiveTrades } from '@/views/tables/LiveTrades';
 
+import { useAppSelector } from '@/state/appTypes';
+import { getCurrentMarketData } from '@/state/perpetualsSelectors';
+
 import { testFlags } from '@/lib/testFlags';
 
 enum Tab {
@@ -25,20 +38,31 @@ const HISTOGRAM_SIDES_BY_LAYOUT = {
 export const VerticalPanel = ({ tradeLayout }: { tradeLayout: TradeLayouts }) => {
   const stringGetter = useStringGetter();
   const [value, setValue] = useState(Tab.Orderbook);
-  const [rowsPerSide, setRowsPerSide] = useState<number | undefined>(undefined);
+  const [rowsPerSide, setRowsPerSide] = useState<number>(ORDERBOOK_MAX_ROWS_PER_SIDE);
 
   const { uiRefresh } = testFlags;
 
   const canvasOrderbookRef = useRef<HTMLDivElement>(null);
   const canvasOrderbook = canvasOrderbookRef.current;
 
-  const calculateNumRows = useCallback((orderbookHeight: number) => {
-    const maxNumRowsToRender = Math.floor(
-      (orderbookHeight - ORDERBOOK_HEADER_HEIGHT - ORDERBOOK_ROW_HEIGHT) /
-        (2 * ORDERBOOK_ROW_HEIGHT)
-    );
-    setRowsPerSide(maxNumRowsToRender);
-  }, []);
+  const { assetId: id } = useAppSelector(getCurrentMarketData, shallowEqual) ?? {};
+  const { currentGrouping } = useCalculateOrderbookData({
+    rowsPerSide,
+  });
+
+  const calculateNumRows = useCallback(
+    (orderbookHeight: number) => {
+      const maxNumRowsToRender = Math.floor(
+        (orderbookHeight -
+          ORDERBOOK_HEADER_HEIGHT -
+          ORDERBOOK_ROW_HEIGHT -
+          (uiRefresh ? 0 : ORDERBOOK_CONTROLS_HEIGHT)) /
+          (2 * ORDERBOOK_ROW_HEIGHT)
+      );
+      setRowsPerSide(maxNumRowsToRender);
+    },
+    [uiRefresh]
+  );
 
   useEffect(() => {
     const resizeObserver = new ResizeObserver((entries) => {
@@ -65,7 +89,7 @@ export const VerticalPanel = ({ tradeLayout }: { tradeLayout: TradeLayouts }) =>
   }, [calculateNumRows, canvasOrderbook]);
 
   return (
-    <Tabs
+    <$Tabs
       fullWidthTabs
       dividerStyle={uiRefresh ? 'underline' : 'border'}
       value={value}
@@ -84,15 +108,22 @@ export const VerticalPanel = ({ tradeLayout }: { tradeLayout: TradeLayouts }) =>
           label: stringGetter({ key: STRING_KEYS.ORDERBOOK_SHORT }),
           value: Tab.Orderbook,
           forceMount: true,
+          slotToolbar: <OrderbookControls assetId={id} grouping={currentGrouping} />,
           ref: canvasOrderbookRef,
         },
         {
           content: <LiveTrades histogramSide={HISTOGRAM_SIDES_BY_LAYOUT[tradeLayout]} />,
           label: stringGetter({ key: STRING_KEYS.TRADES }),
           value: Tab.Trades,
+          slotToolbar: <div />,
         },
       ]}
       withTransitions={false}
     />
   );
 };
+
+const $Tabs = styled(Tabs)`
+  --toolbar-padding: 0;
+  --toolbar-width: 50%;
+` as typeof Tabs;

src/views/CanvasOrderbook/CanvasOrderbook.tsx

@@ -31,6 +31,7 @@ import {
 } from '@/state/perpetualsSelectors';
 
 import { MustBigNumber } from '@/lib/numbers';
+import { testFlags } from '@/lib/testFlags';
 
 import { OrderbookControls } from './OrderbookControls';
 import { OrderbookMiddleRow, OrderbookRow } from './OrderbookRow';
@@ -68,6 +69,7 @@ export const CanvasOrderbook = forwardRef(
 
     const { tickSizeDecimals = USD_DECIMALS } = currentMarketConfig ?? {};
 
+    const { uiRefresh } = testFlags;
     /**
      * Slice asks and bids to rowsPerSide using empty rows
      */
@@ -203,7 +205,9 @@ export const CanvasOrderbook = forwardRef(
     return (
       <div ref={ref} tw="flex flex-1 flex-col overflow-hidden">
         <$OrderbookContent $isLoading={!hasOrderbook}>
-          {!hideHeader && <OrderbookControls assetId={id} grouping={currentGrouping} />}
+          {!hideHeader && !uiRefresh && (
+            <OrderbookControls assetId={id} grouping={currentGrouping} />
+          )}
           {!hideHeader && (
             <OrderbookRow tw="h-1.75 text-color-text-0">
               <span>

src/views/CanvasOrderbook/OrderbookControls.tsx

@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 
 import { clamp } from 'lodash';
 import { shallowEqual, useDispatch } from 'react-redux';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 import { MarketOrderbookGrouping, Nullable, OrderbookGrouping } from '@/constants/abacus';
 import { ButtonShape, ButtonSize } from '@/constants/buttons';
@@ -19,6 +19,7 @@ import { getSelectedDisplayUnit } from '@/state/configsSelectors';
 import { getCurrentMarketConfig } from '@/state/perpetualsSelectors';
 
 import abacusStateManager from '@/lib/abacus';
+import { testFlags } from '@/lib/testFlags';
 
 type OrderbookControlsProps = {
   className?: string;
@@ -29,6 +30,7 @@ type OrderbookControlsProps = {
 export const OrderbookControls = ({ className, assetId, grouping }: OrderbookControlsProps) => {
   const dispatch = useDispatch();
   const displayUnit = useAppSelector(getSelectedDisplayUnit);
+  const { uiRefresh } = testFlags;
 
   const modifyScale = useCallback(
     (direction: number) => {
@@ -42,6 +44,7 @@ export const OrderbookControls = ({ className, assetId, grouping }: OrderbookCon
   );
   const currentMarketConfig = useAppSelector(getCurrentMarketConfig, shallowEqual);
   const tickSizeDecimals = currentMarketConfig?.tickSizeDecimals ?? USD_DECIMALS;
+
   const onToggleDisplayUnit = useCallback(
     (newValue: DisplayUnit) => {
       if (!assetId) return;
@@ -55,10 +58,16 @@ export const OrderbookControls = ({ className, assetId, grouping }: OrderbookCon
     },
     [dispatch, assetId]
   );
+
   return (
-    <$OrderbookControlsContainer className={className}>
+    <$OrderbookControlsContainer className={className} $uiRefreshEnabled={uiRefresh}>
       <div tw="flex justify-between gap-0.5">
         <div tw="flex gap-0.5">
+          <Output
+            value={grouping?.tickSize}
+            type={OutputType.Fiat}
+            fractionDigits={tickSizeDecimals === 1 ? 2 : tickSizeDecimals}
+          />
           <$ButtonGroup>
             <Button
               size={ButtonSize.XSmall}
@@ -75,13 +84,8 @@ export const OrderbookControls = ({ className, assetId, grouping }: OrderbookCon
               +
             </Button>
           </$ButtonGroup>
-          <Output
-            value={grouping?.tickSize}
-            type={OutputType.Fiat}
-            fractionDigits={tickSizeDecimals === 1 ? 2 : tickSizeDecimals}
-          />
         </div>
-        {assetId && (
+        {!uiRefresh && assetId && (
           <ToggleGroup
             items={[
               { label: assetId, value: DisplayUnit.Asset },
@@ -97,7 +101,7 @@ export const OrderbookControls = ({ className, assetId, grouping }: OrderbookCon
   );
 };
 
-const $OrderbookControlsContainer = styled.div`
+const $OrderbookControlsContainer = styled.div<{ $uiRefreshEnabled: boolean }>`
   color: var(--color-text-0);
   font: var(--font-small-book);
 
@@ -109,6 +113,12 @@ const $OrderbookControlsContainer = styled.div`
     padding-top: 0.3rem;
     padding-bottom: 0.3rem;
   }
+
+  ${({ $uiRefreshEnabled }) =>
+    !$uiRefreshEnabled &&
+    css`
+      flex-direction: column-reverse;
+    `}
 `;
 const $ButtonGroup = styled.div`
   display: flex;