fix(market-depth): fix order book priceInCenter calculation and scroll to price (#2901)

libs/market-depth/src/lib/market-depth-provider.ts

@@ -42,10 +42,18 @@ export const update: Update<
       },
     };
     if (delta.buy) {
-      updatedData.depth.buy = updateLevels(data.depth.buy ?? [], delta.buy);
+      updatedData.depth.buy = updateLevels(
+        data.depth.buy ?? [],
+        delta.buy,
+        false
+      );
     }
     if (delta.sell) {
-      updatedData.depth.sell = updateLevels(data.depth.sell ?? [], delta.sell);
+      updatedData.depth.sell = updateLevels(
+        data.depth.sell ?? [],
+        delta.sell,
+        true
+      );
     }
     updatedData.depth.sequenceNumber = delta.sequenceNumber;
     return updatedData;

libs/market-depth/src/lib/orderbook-data.ts

@@ -26,9 +26,19 @@ export interface OrderbookRowData {
 
 type PartialOrderbookRowData = Pick<OrderbookRowData, 'price' | 'ask' | 'bid'>;
 
-export type OrderbookData = Partial<
+type OrderbookMarketData = Pick<
-  Omit<MarketData, '__typename' | 'market'>
+  MarketData,
-> & { rows: OrderbookRowData[] | null };
+  | 'bestStaticBidPrice'
+  | 'bestStaticOfferPrice'
+  | 'indicativePrice'
+  | 'indicativeVolume'
+  | 'marketTradingMode'
+>;
+
+export type OrderbookData = Partial<OrderbookMarketData> & {
+  rows: OrderbookRowData[] | null;
+  midPrice?: string;
+};
 
 export const getPriceLevel = (price: string | bigint, resolution: number) => {
   const p = BigInt(price);
@@ -40,6 +50,18 @@ export const getPriceLevel = (price: string | bigint, resolution: number) => {
   return priceLevel.toString();
 };
 
+export const getMidPrice = (
+  sell: PriceLevelFieldsFragment[] | null | undefined,
+  buy: PriceLevelFieldsFragment[] | null | undefined,
+  resolution: number
+) =>
+  buy?.length && sell?.length
+    ? getPriceLevel(
+        (BigInt(buy[0].price) + BigInt(sell[0].price)) / BigInt(2),
+        resolution
+      )
+    : undefined;
+
 const getMaxVolumes = (orderbookData: OrderbookRowData[]) => ({
   bid: Math.max(...orderbookData.map((data) => data.bid)),
   ask: Math.max(...orderbookData.map((data) => data.ask)),
@@ -157,8 +179,15 @@ export const compactRows = (
     }
     orderbookData.push(row);
   });
-  // order by price, it's safe to cast to number price diff should not exceed Number.MAX_SAFE_INTEGER
+  orderbookData.sort((a, b) => {
-  orderbookData.sort((a, b) => Number(BigInt(b.price) - BigInt(a.price)));
+    if (a === b) {
+      return 0;
+    }
+    if (BigInt(a.price) > BigInt(b.price)) {
+      return -1;
+    }
+    return 1;
+  });
   // count cumulative volumes
   if (orderbookData.length > 1) {
     const maxIndex = orderbookData.length - 1;
@@ -253,28 +282,6 @@ export const updateCompactedRows = (
   return data;
 };
 
-export const mapMarketData = (
-  data: Pick<
-    MarketData,
-    | 'staticMidPrice'
-    | 'bestStaticBidPrice'
-    | 'bestStaticOfferPrice'
-    | 'indicativePrice'
-  > | null,
-  resolution: number
-) => ({
-  staticMidPrice:
-    data?.staticMidPrice && getPriceLevel(data?.staticMidPrice, resolution),
-  bestStaticBidPrice:
-    data?.bestStaticBidPrice &&
-    getPriceLevel(data?.bestStaticBidPrice, resolution),
-  bestStaticOfferPrice:
-    data?.bestStaticOfferPrice &&
-    getPriceLevel(data?.bestStaticOfferPrice, resolution),
-  indicativePrice:
-    data?.indicativePrice && getPriceLevel(data?.indicativePrice, resolution),
-});
-
 /**
  * Updates raw data with new data received from subscription - mutates input
  * @param levels
@@ -283,7 +290,8 @@ export const mapMarketData = (
  */
 export const updateLevels = (
   draft: PriceLevelFieldsFragment[],
-  updates: (PriceLevelFieldsFragment | PriceLevelFieldsFragment)[]
+  updates: (PriceLevelFieldsFragment | PriceLevelFieldsFragment)[],
+  ascending = true
 ) => {
   const levels = [...draft];
   updates.forEach((update) => {
@@ -295,8 +303,10 @@ export const updateLevels = (
         levels[index] = update;
       }
     } else if (update.volume !== '0') {
-      index = levels.findIndex(
+      index = levels.findIndex((level) =>
-        (level) => BigInt(level.price) > BigInt(update.price)
+        ascending
+          ? BigInt(level.price) > BigInt(update.price)
+          : BigInt(level.price) < BigInt(update.price)
       );
       if (index !== -1) {
         levels.splice(index, 0, update);
@@ -346,22 +356,20 @@ export const generateMockData = ({
     numberOfOrders: '',
   }));
   const rows = compactRows(sell, buy, resolution);
+  const marketTradingMode =
+    overlap > 0
+      ? Schema.MarketTradingMode.TRADING_MODE_BATCH_AUCTION
+      : Schema.MarketTradingMode.TRADING_MODE_CONTINUOUS;
   return {
     rows,
     resolution,
     indicativeVolume: indicativeVolume?.toString(),
-    marketTradingMode:
+    marketTradingMode,
-      overlap > 0
+    midPrice: ((bestStaticBidPrice + bestStaticOfferPrice) / 2).toString(),
-        ? Schema.MarketTradingMode.TRADING_MODE_BATCH_AUCTION
+    bestStaticBidPrice: bestStaticBidPrice.toString(),
-        : Schema.MarketTradingMode.TRADING_MODE_CONTINUOUS,
+    bestStaticOfferPrice: bestStaticOfferPrice.toString(),
-    ...mapMarketData(
+    indicativePrice: indicativePrice
-      {
+      ? getPriceLevel(indicativePrice.toString(), resolution)
-        staticMidPrice: '',
+      : undefined,
-        bestStaticBidPrice: bestStaticBidPrice.toString(),
-        bestStaticOfferPrice: bestStaticOfferPrice.toString(),
-        indicativePrice: indicativePrice?.toString() ?? '',
-      },
-      resolution
-    ),
   };
 };

libs/market-depth/src/lib/orderbook-manager.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import throttle from 'lodash/throttle';
 import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
 import { Orderbook } from './orderbook';
@@ -8,12 +9,14 @@ import type { MarketData } from '@vegaprotocol/market-list';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type {
   MarketDepthUpdateSubscription,
+  MarketDepthQuery,
   PriceLevelFieldsFragment,
 } from './__generated__/MarketDepth';
 import {
   compactRows,
   updateCompactedRows,
-  mapMarketData,
+  getMidPrice,
+  getPriceLevel,
 } from './orderbook-data';
 import type { OrderbookData } from './orderbook-data';
 import { usePersistedOrderStore } from '@vegaprotocol/orders';
@@ -31,6 +34,7 @@ export const OrderbookManager = ({ marketId }: OrderbookManagerProps) => {
   });
   const dataRef = useRef<OrderbookData>({ rows: null });
   const marketDataRef = useRef<MarketData | null>(null);
+  const rawDataRef = useRef<MarketDepthQuery['market'] | null>(null);
   const deltaRef = useRef<{
     sell: PriceLevelFieldsFragment[];
     buy: PriceLevelFieldsFragment[];
@@ -42,7 +46,17 @@ export const OrderbookManager = ({ marketId }: OrderbookManagerProps) => {
     throttle(() => {
       dataRef.current = {
         ...marketDataRef.current,
-        ...mapMarketData(marketDataRef.current, resolutionRef.current),
+        indicativePrice: marketDataRef.current?.indicativePrice
+          ? getPriceLevel(
+              marketDataRef.current.indicativePrice,
+              resolutionRef.current
+            )
+          : undefined,
+        midPrice: getMidPrice(
+          rawDataRef.current?.depth.sell,
+          rawDataRef.current?.depth.buy,
+          resolution
+        ),
         rows:
           deltaRef.current.buy.length || deltaRef.current.sell.length
             ? updateCompactedRows(
@@ -56,14 +70,16 @@ export const OrderbookManager = ({ marketId }: OrderbookManagerProps) => {
       deltaRef.current.buy = [];
       deltaRef.current.sell = [];
       setOrderbookData(dataRef.current);
-    }, 1000)
+    }, 250)
   );
 
   const update = useCallback(
     ({
       delta: deltas,
+      data: rawData,
     }: {
       delta?: MarketDepthUpdateSubscription['marketsDepthUpdate'];
+      data?: MarketDepthQuery['market'];
     }) => {
       if (!dataRef.current.rows) {
         return false;
@@ -78,6 +94,7 @@ export const OrderbookManager = ({ marketId }: OrderbookManagerProps) => {
         if (delta.buy) {
           deltaRef.current.buy.push(...delta.buy);
         }
+        rawDataRef.current = rawData;
         updateOrderbookData.current();
       }
       return true;
@@ -134,9 +151,14 @@ export const OrderbookManager = ({ marketId }: OrderbookManagerProps) => {
     }
     dataRef.current = {
       ...marketDataRef.current,
-      ...mapMarketData(marketDataRef.current, resolution),
+      indicativePrice: getPriceLevel(
+        marketDataRef.current.indicativePrice,
+        resolution
+      ),
+      midPrice: getMidPrice(data.depth.sell, data.depth.buy, resolution),
       rows: compactRows(data.depth.sell, data.depth.buy, resolution),
     };
+    rawDataRef.current = data;
     setOrderbookData(dataRef.current);
 
     return () => {

libs/market-depth/src/lib/orderbook.spec.tsx

@@ -92,7 +92,7 @@ describe('Orderbook', () => {
     expect(result.getByTestId('scroll').scrollTop).toBe(90 * rowHeight);
   });
 
-  it('should should keep price it the middle', async () => {
+  it('should keep price it the middle', async () => {
     window.innerHeight = 11 * rowHeight;
     const result = render(
       <Orderbook
@@ -106,7 +106,7 @@ describe('Orderbook', () => {
     await waitFor(() => screen.getByTestId(`bid-vol-${params.midPrice}`));
     const scrollElement = result.getByTestId('scroll');
     expect(scrollElement.scrollTop).toBe(91 * rowHeight);
-    scrollElement.scrollTop = 92 * rowHeight;
+    scrollElement.scrollTop = 92 * rowHeight + 0.01;
     fireEvent.scroll(scrollElement);
     result.rerender(
       <Orderbook
@@ -121,10 +121,10 @@ describe('Orderbook', () => {
       />
     );
     await waitFor(() => screen.getByTestId(`bid-vol-${params.midPrice}`));
-    expect(result.getByTestId('scroll').scrollTop).toBe(91 * rowHeight);
+    expect(result.getByTestId('scroll').scrollTop).toBe(91 * rowHeight + 0.01);
   });
 
-  it('should should get back to mid price on click', async () => {
+  it('should get back to mid price on click', async () => {
     window.innerHeight = 11 * rowHeight;
     const result = render(
       <Orderbook
@@ -138,15 +138,15 @@ describe('Orderbook', () => {
     await waitFor(() => screen.getByTestId(`bid-vol-${params.midPrice}`));
     const scrollElement = result.getByTestId('scroll');
     expect(scrollElement.scrollTop).toBe(91 * rowHeight);
-    scrollElement.scrollTop = 0;
+    scrollElement.scrollTop = 1;
     fireEvent.scroll(scrollElement);
-    expect(result.getByTestId('scroll').scrollTop).toBe(0);
+    expect(result.getByTestId('scroll').scrollTop).toBe(1);
     const scrollToMidPriceButton = result.getByTestId('scroll-to-midprice');
     fireEvent.click(scrollToMidPriceButton);
-    expect(result.getByTestId('scroll').scrollTop).toBe(91 * rowHeight);
+    expect(result.getByTestId('scroll').scrollTop).toBe(91 * rowHeight + 1);
   });
 
-  it('should should get back to mid price on resolution change', async () => {
+  it('should get back to mid price on resolution change', async () => {
     window.innerHeight = 11 * rowHeight;
     const result = render(
       <Orderbook
@@ -160,9 +160,9 @@ describe('Orderbook', () => {
     await waitFor(() => screen.getByTestId(`bid-vol-${params.midPrice}`));
     const scrollElement = result.getByTestId('scroll');
     expect(scrollElement.scrollTop).toBe(91 * rowHeight);
-    scrollElement.scrollTop = 0;
+    scrollElement.scrollTop = 1;
     fireEvent.scroll(scrollElement);
-    expect(result.getByTestId('scroll').scrollTop).toBe(0);
+    expect(result.getByTestId('scroll').scrollTop).toBe(1);
     const resolutionSelect = result.getByTestId(
       'resolution'
     ) as HTMLSelectElement;
@@ -181,6 +181,6 @@ describe('Orderbook', () => {
         onResolutionChange={onResolutionChange}
       />
     );
-    expect(result.getByTestId('scroll').scrollTop).toBe(5 * rowHeight);
+    expect(result.getByTestId('scroll').scrollTop).toBe(6 * rowHeight);
   });
 });

libs/market-depth/src/lib/orderbook.tsx

@@ -1,15 +1,7 @@
 import styles from './orderbook.module.scss';
 import colors from 'tailwindcss/colors';
 
-import {
+import { useEffect, useRef, useState, useCallback, Fragment } from 'react';
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-  useMemo,
-  useCallback,
-  Fragment,
-} from 'react';
 import classNames from 'classnames';
 
 import {
@@ -21,7 +13,7 @@ import {
 } from '@vegaprotocol/react-helpers';
 import * as Schema from '@vegaprotocol/types';
 import { OrderbookRow } from './orderbook-row';
-import { createRow, getPriceLevel } from './orderbook-data';
+import { createRow } from './orderbook-data';
 import { Checkbox, Icon, Splash } from '@vegaprotocol/ui-toolkit';
 import type { OrderbookData, OrderbookRowData } from './orderbook-data';
 
@@ -36,7 +28,7 @@ interface OrderbookProps extends OrderbookData {
 
 const HorizontalLine = ({ top, testId }: { top: string; testId: string }) => (
   <div
-    className="absolute border-b border-default inset-x-0"
+    className="absolute border-b border-default inset-x-0 hidden"
     style={{ top }}
     data-testid={testId}
   />
@@ -97,7 +89,12 @@ const getRowsToRender = (
 };
 
 // 17px of row height plus 5px gap
+export const gridGap = 5;
 export const rowHeight = 22;
+// top padding to make space for header
+const headerPadding = 30;
+// bottom padding to make space for footer
+const footerPadding = 25;
 // buffer size in rows
 const bufferSize = 30;
 // margin size in px, when reached scrollOffset will be updated
@@ -112,30 +109,30 @@ const getBestStaticBidPriceLinePosition = (
   rows: OrderbookRowData[] | null
 ) => {
   let bestStaticBidPriceLinePosition = '';
-  if (maxPriceLevel !== '0' && minPriceLevel !== '0') {
+  if (
-    if (
+    rows?.length &&
-      bestStaticBidPrice &&
+    bestStaticBidPrice &&
-      BigInt(bestStaticBidPrice) < BigInt(maxPriceLevel) &&
+    BigInt(bestStaticBidPrice) < BigInt(maxPriceLevel) &&
-      BigInt(bestStaticBidPrice) > BigInt(minPriceLevel)
+    BigInt(bestStaticBidPrice) > BigInt(minPriceLevel)
-    ) {
+  ) {
-      if (fillGaps) {
+    if (fillGaps) {
+      bestStaticBidPriceLinePosition = (
+        ((BigInt(maxPriceLevel) - BigInt(bestStaticBidPrice)) /
+          BigInt(resolution)) *
+          BigInt(rowHeight) +
+        BigInt(headerPadding) -
+        BigInt(3)
+      ).toString();
+    } else {
+      const index = rows?.findIndex(
+        (row) => BigInt(row.price) <= BigInt(bestStaticBidPrice)
+      );
+      if (index !== undefined && index !== -1) {
         bestStaticBidPriceLinePosition = (
-          ((BigInt(maxPriceLevel) - BigInt(bestStaticBidPrice)) /
+          index * rowHeight +
-            BigInt(resolution) +
+          headerPadding -
-            BigInt(1)) *
+          3
-            BigInt(rowHeight) +
-          BigInt(1)
         ).toString();
-      } else {
-        const index = rows?.findIndex(
-          (row) => BigInt(row.price) <= BigInt(bestStaticBidPrice)
-        );
-        if (index !== undefined && index !== -1) {
-          bestStaticBidPriceLinePosition = (
-            (index + 1) * rowHeight +
-            1
-          ).toString();
-        }
       }
     }
   }
@@ -151,6 +148,7 @@ const getBestStaticOfferPriceLinePosition = (
 ) => {
   let bestStaticOfferPriceLinePosition = '';
   if (
+    rows?.length &&
     bestStaticOfferPrice &&
     BigInt(bestStaticOfferPrice) <= BigInt(maxPriceLevel) &&
     BigInt(bestStaticOfferPrice) > BigInt(minPriceLevel)
@@ -159,9 +157,10 @@ const getBestStaticOfferPriceLinePosition = (
       bestStaticOfferPriceLinePosition = (
         ((BigInt(maxPriceLevel) - BigInt(bestStaticOfferPrice)) /
           BigInt(resolution) +
-          BigInt(2)) *
+          BigInt(1)) *
           BigInt(rowHeight) +
-        BigInt(1)
+        BigInt(headerPadding) -
+        BigInt(3)
       ).toString();
     } else {
       const index = rows?.findIndex(
@@ -169,8 +168,9 @@ const getBestStaticOfferPriceLinePosition = (
       );
       if (index !== undefined && index !== -1) {
         bestStaticOfferPriceLinePosition = (
-          (index + 2) * rowHeight +
+          (index + 1) * rowHeight +
-          1
+          headerPadding -
+          3
         ).toString();
       }
     }
@@ -187,7 +187,7 @@ const OrderbookDebugInfo = ({
   bestStaticOfferPrice,
   maxPriceLevel,
   minPriceLevel,
-  resolution,
+  midPrice,
 }: {
   decimalPlaces: number;
   numberOfRows: number;
@@ -198,7 +198,7 @@ const OrderbookDebugInfo = ({
   bestStaticOfferPrice?: string;
   maxPriceLevel: string;
   minPriceLevel: string;
-  resolution: number;
+  midPrice?: string;
 }) => (
   <Fragment>
     <div
@@ -247,16 +247,7 @@ const OrderbookDebugInfo = ({
               decimalPlaces
             ),
             midPrice: addDecimalsFixedFormatNumber(
-              (bestStaticOfferPrice &&
+              midPrice ?? '0',
-                bestStaticBidPrice &&
-                getPriceLevel(
-                  BigInt(bestStaticOfferPrice) +
-                    (BigInt(bestStaticBidPrice) -
-                      BigInt(bestStaticOfferPrice)) /
-                      BigInt(2),
-                  resolution
-                )) ??
-                '0',
               decimalPlaces
             ),
           },
@@ -270,6 +261,7 @@ const OrderbookDebugInfo = ({
 
 export const Orderbook = ({
   rows,
+  midPrice,
   bestStaticBidPrice,
   bestStaticOfferPrice,
   marketTradingMode,
@@ -295,21 +287,36 @@ export const Orderbook = ({
   // price level which is rendered in center of viewport, need to preserve price level when rows will be added or removed
   // if undefined then we render mid price in center
   const priceInCenter = useRef<string>();
+  // by default mid price is rendered in center - view locked on mid price
   const [lockOnMidPrice, setLockOnMidPrice] = useState(true);
   const resolutionRef = useRef(resolution);
   const [viewportHeight, setViewportHeight] = useState(window.innerHeight);
+  // show price levels with no orders, can lead to enormous number of rows
   const [fillGaps, setFillGaps] = useState(!!initialFillGaps);
-  const numberOfRows = useMemo(
-    () => (fillGaps ? getNumberOfRows(rows, resolution) : rows?.length ?? 0),
-    [rows, resolution, fillGaps]
-  );
-  const maxPriceLevel = rows?.[0]?.price ?? '0';
-  const minPriceLevel = (
-    fillGaps
-      ? BigInt(maxPriceLevel) - BigInt(Math.floor(numberOfRows * resolution))
-      : BigInt(rows?.[rows.length - 1]?.price ?? '0')
-  ).toString();
   const [debug, setDebug] = useState(false);
+
+  const numberOfRows = fillGaps
+    ? getNumberOfRows(rows, resolution)
+    : rows?.length ?? 0;
+  const maxPriceLevel = rows?.[0]?.price ?? '0';
+  const minPriceLevel = rows?.[rows.length - 1]?.price ?? '0';
+
+  let offset = Math.max(0, Math.round(scrollOffset / rowHeight));
+  const prependingBufferSize = Math.min(bufferSize, offset);
+  offset -= prependingBufferSize;
+  const viewportSize = Math.round(viewportHeight / rowHeight);
+  const limit = Math.min(
+    prependingBufferSize + viewportSize + bufferSize,
+    numberOfRows - offset
+  );
+  const data = fillGaps
+    ? getRowsToRender(rows, resolution, offset, limit)
+    : rows?.slice(offset, offset + limit) ?? [];
+
+  const paddingTop = offset * rowHeight + headerPadding;
+  const paddingBottom =
+    (numberOfRows - offset - limit) * rowHeight + footerPadding;
+
   const updateScrollOffset = useCallback(
     (scrollTop: number) => {
       if (Math.abs(scrollOffset - scrollTop) > marginSize) {
@@ -318,23 +325,35 @@ export const Orderbook = ({
     },
     [scrollOffset]
   );
+
   const onScroll = useCallback(
     (event: React.UIEvent<HTMLDivElement>) => {
-      const { scrollTop } = event.currentTarget;
+      const { scrollTop, scrollHeight, clientHeight } = event.currentTarget;
       updateScrollOffset(scrollTop);
       if (scrollTop === scrollTopRef.current) {
         return;
+      } else if ((scrollTop - scrollTopRef.current) % rowHeight === 0) {
+        if (scrollElement.current) {
+          scrollElement.current.scrollTop = scrollTopRef.current;
+        }
+        return;
+      }
+      if (scrollTop === 0 || scrollHeight === clientHeight + scrollTop) {
+        priceInCenter.current = undefined;
+      } else {
+        // top offset in rows to row in the middle
+        const offsetTop = Math.floor(
+          (scrollTop +
+            Math.floor((viewportHeight - footerPadding - headerPadding) / 2)) /
+            rowHeight
+        );
+        priceInCenter.current = fillGaps
+          ? (
+              BigInt(maxPriceLevel) -
+              BigInt(offsetTop) * BigInt(resolution)
+            ).toString()
+          : rows?.[Math.min(offsetTop, rows.length - 1)].price.toString();
       }
-      const offsetTop = Math.floor(
-        (scrollTop + Math.floor(viewportHeight / 2)) / rowHeight
-      );
-      priceInCenter.current = fillGaps
-        ? (
-            BigInt(resolution) + // extra row on very top - sticky header
-            BigInt(maxPriceLevel) -
-            BigInt(offsetTop) * BigInt(resolution)
-          ).toString()
-        : rows?.[Math.min(offsetTop, rows.length - 1)]?.price?.toString();
       if (lockOnMidPrice) {
         setLockOnMidPrice(false);
       }
@@ -361,24 +380,22 @@ export const Orderbook = ({
             (Number(
               (BigInt(maxPriceLevel) - BigInt(price)) / BigInt(resolution)
             ) +
-              1) * // add one row for sticky header
+              1) *
-              rowHeight +
+            rowHeight;
-            rowHeight / 2 -
-            (viewportHeight % rowHeight);
         } else if (rows) {
           const index = rows.findIndex(
             (row) => BigInt(row.price) <= BigInt(price)
           );
           if (index !== -1) {
-            scrollTop =
+            scrollTop = rowHeight * (index + 1);
-              index * rowHeight + rowHeight / 2 - (viewportHeight % rowHeight);
+            if (index !== 0) {
-            if (
+              const diffToCurrentRow =
-              price === rows[index].price ||
+                BigInt(price) - BigInt(rows[index].price);
-              index === 0 ||
+              const diffToPreviousRow =
-              BigInt(rows[index].price) - BigInt(price) <
+                BigInt(rows[index - 1].price) - BigInt(price);
-                BigInt(price) - BigInt(rows[index - 1].price)
+              if (diffToPreviousRow < diffToCurrentRow) {
-            ) {
+                scrollTop -= rowHeight;
-              scrollTop += rowHeight;
+              }
             }
           }
         }
@@ -389,7 +406,13 @@ export const Orderbook = ({
           (scrollTopRef.current % rowHeight) - (scrollTop % rowHeight);
         const priceCenterScrollOffset = Math.max(
           0,
-          Math.min(scrollTop, numberOfRows * rowHeight - viewportHeight)
+          Math.min(
+            scrollTop,
+            numberOfRows * rowHeight +
+              headerPadding +
+              footerPadding +
+              -viewportHeight
+          )
         );
         if (scrollTopRef.current !== priceCenterScrollOffset) {
           updateScrollOffset(priceCenterScrollOffset);
@@ -410,72 +433,31 @@ export const Orderbook = ({
   );
 
   const scrollToMidPrice = useCallback(() => {
-    if (!bestStaticOfferPrice || !bestStaticBidPrice) {
+    if (!midPrice) {
       return;
     }
     priceInCenter.current = undefined;
-    let midPrice = getPriceLevel(
-      BigInt(bestStaticOfferPrice) +
-        (BigInt(bestStaticBidPrice) - BigInt(bestStaticOfferPrice)) / BigInt(2),
-      resolution
-    );
-    if (BigInt(midPrice) > BigInt(maxPriceLevel)) {
-      midPrice = maxPriceLevel;
-    } else {
-      if (BigInt(midPrice) < BigInt(minPriceLevel)) {
-        midPrice = minPriceLevel.toString();
-      }
-    }
     scrollToPrice(midPrice);
     setLockOnMidPrice(true);
-  }, [
+  }, [midPrice, scrollToPrice]);
-    bestStaticOfferPrice,
-    bestStaticBidPrice,
-    scrollToPrice,
-    resolution,
-    maxPriceLevel,
-    minPriceLevel,
-  ]);
 
   // adjust scroll position to keep selected price in center
-  useLayoutEffect(() => {
+  useEffect(() => {
+    if (priceInCenter.current) {
+      scrollToPrice(priceInCenter.current);
+    } else if (lockOnMidPrice && midPrice) {
+      scrollToPrice(midPrice);
+    }
+  }, [midPrice, scrollToPrice, lockOnMidPrice]);
+
+  useEffect(() => {
     if (resolutionRef.current !== resolution) {
       priceInCenter.current = undefined;
       resolutionRef.current = resolution;
+      setLockOnMidPrice(true);
     }
-    if (priceInCenter.current) {
+  }, [resolution]);
-      scrollToPrice(priceInCenter.current);
-    } else {
-      scrollToMidPrice();
-    }
-  }, [scrollToMidPrice, scrollToPrice, resolution]);
 
-  // handles window resize
-  useEffect(() => {
-    function handleResize() {
-      if (rootElement.current) {
-        setViewportHeight(
-          rootElement.current.clientHeight || window.innerHeight
-        );
-      }
-    }
-    window.addEventListener('resize', handleResize);
-    handleResize();
-    return () => window.removeEventListener('resize', handleResize);
-  }, []);
-  // sets the correct width of header and footer
-  useLayoutEffect(() => {
-    if (
-      !gridElement.current ||
-      !headerElement.current ||
-      !footerElement.current
-    ) {
-      return;
-    }
-    const gridWidth = gridElement.current.clientWidth;
-    headerElement.current.style.width = `${gridWidth}px`;
-    footerElement.current.style.width = `${gridWidth}px`;
-  }, [headerElement, footerElement, gridElement]);
   // handles resizing of the Allotment.Pane (x-axis)
   // adjusts the header and footer width
   const gridResizeHandler: ResizeObserverCallback = useCallback(
@@ -509,20 +491,6 @@ export const Orderbook = ({
   useResizeObserver(gridElement.current, gridResizeHandler);
   useResizeObserver(rootElement.current, rootElementResizeHandler);
 
-  let offset = Math.max(0, Math.round(scrollOffset / rowHeight));
-  const prependingBufferSize = Math.min(bufferSize, offset);
-  offset -= prependingBufferSize;
-  const viewportSize = Math.round(viewportHeight / rowHeight);
-  const limit = Math.min(
-    prependingBufferSize + viewportSize + bufferSize,
-    numberOfRows - offset
-  );
-  const data = fillGaps
-    ? getRowsToRender(rows, resolution, offset, limit)
-    : rows?.slice(offset, offset + limit) ?? [];
-
-  const paddingTop = offset * rowHeight;
-  const paddingBottom = (numberOfRows - offset - limit) * rowHeight;
   const tableBody =
     data && data.length !== 0 ? (
       <div
@@ -603,16 +571,16 @@ export const Orderbook = ({
         </div>
       </div>
       <div
-        className={`h-full overflow-auto relative ${styles['scroll']} pt-[26px] pb-[17px]`}
+        className={`h-full overflow-auto relative ${styles['scroll']}`}
         onScroll={onScroll}
         ref={scrollElement}
         data-testid="scroll"
       >
         <div
-          className="relative text-right min-h-full"
+          className="relative text-right min-h-full overflow-hidden"
           style={{
-            paddingTop: paddingTop,
+            paddingTop,
-            paddingBottom: paddingBottom,
+            paddingBottom,
             background: tableBody ? gradientStyles : 'none',
           }}
           ref={gridElement}
@@ -685,7 +653,7 @@ export const Orderbook = ({
       {debug && (
         <OrderbookDebugInfo
           decimalPlaces={decimalPlaces}
-          resolution={resolution}
+          midPrice={midPrice}
           numberOfRows={numberOfRows}
           viewportHeight={viewportHeight}
           lockOnMidPrice={lockOnMidPrice}