updated lockfile

2024-01-03 13:55:47 -08:00
12 changed files with 39 additions and 940 deletions
@@ -1,5 +1,9 @@
 lockfileVersion: '6.0'
 settings:
  autoInstallPeers: true
  excludeLinksFromLockfile: false
 dependencies:
  '@0xsquid/sdk':
    specifier: ^1.10.0
@@ -11780,10 +11784,6 @@ packages:
    resolution: {integrity: sha512-bW9T/uJDPAJB2YNYEpWzE54U5O3MQidXsOyTfnbKYtTtFexRvGzb1waphBN4ZwP6EcIvYYEOwW0b72BpAqydTw==}
    dev: false
  /node-fetch-native@1.6.1:
    resolution: {integrity: sha512-bW9T/uJDPAJB2YNYEpWzE54U5O3MQidXsOyTfnbKYtTtFexRvGzb1waphBN4ZwP6EcIvYYEOwW0b72BpAqydTw==}
    dev: false
  /node-fetch@2.6.12:
    resolution: {integrity: sha512-C/fGU2E8ToujUivIO0H+tpQ6HWo4eEmchoPIoXtxCrVghxdKq+QOHqEZW7tuP3KlV3bC8FRMO5nMCC7Zm1VP6g==}
    engines: {node: 4.x || >=6.0.0}
@@ -14754,7 +14754,3 @@ packages:
  /zwitch@2.0.4:
    resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
    dev: true
 settings:
  autoInstallPeers: true
  excludeLinksFromLockfile: false
@@ -1,16 +0,0 @@
 import { forwardRef } from 'react';
 type StyleProps = {
  className?: string;
 };
 type ElementProps = {
  width: number | string;
  height: number | string;
 };
 export const Canvas = forwardRef<HTMLCanvasElement, ElementProps & StyleProps>(
  ({ className, width, height }, canvasRef) => (
    <canvas ref={canvasRef} className={className} width={width ?? 0} height={height ?? 0} />
  )
 );
@@ -118,7 +118,6 @@ export const Tabs = <TabItemsValue extends string>({
              forceMount={forceMount}
              $hide={forceMount && currentItem?.value !== value}
              $withTransitions={withTransitions}
              asChild={asChild}
            >
              {content}
            </Styled.Content>
@@ -1,11 +0,0 @@
 import { useCalculateOrderbookData } from './useCalculateOrderbookData';
 import { useCenterOrderbook } from './useCenterOrderbook';
 import { useDrawOrderbook } from './useDrawOrderbook';
 import { useSpreadRowScrollListener } from './useSpreadRowScrollListener';
 export {
  useCalculateOrderbookData,
  useCenterOrderbook,
  useDrawOrderbook,
  useSpreadRowScrollListener,
 };
@@ -1,55 +0,0 @@
 import { useMemo } from 'react';
 import { useSelector, shallowEqual } from 'react-redux';
 import { OrderSide } from '@dydxprotocol/v4-client-js';
 import { OrderbookLine } from '@/constants/abacus';
 import { getCurrentMarketOrderbook } from '@/state/perpetualsSelectors';
 import { getSubaccountOpenOrdersBySideAndPrice } from '@/state/accountSelectors';
 import type { RowData } from '@/views/Orderbook/OrderbookRow';
 import { MustBigNumber } from '@/lib/numbers';
 export const useCalculateOrderbookData = ({ maxRowsPerSide }: { maxRowsPerSide: number }) => {
  const orderbook = useSelector(getCurrentMarketOrderbook, shallowEqual);
  const openOrdersBySideAndPrice =
    useSelector(getSubaccountOpenOrdersBySideAndPrice, shallowEqual) || {};
  return useMemo(() => {
    const asks = (orderbook?.asks?.toArray() ?? [])
      .map(
        (row: OrderbookLine) =>
          ({
            side: 'ask',
            mine: openOrdersBySideAndPrice[OrderSide.SELL]?.[row.price]?.size,
            ...row,
          } as RowData)
      )
      .slice(0, maxRowsPerSide);
    const bids = (orderbook?.bids?.toArray() ?? [])
      .map(
        (row: OrderbookLine) =>
          ({
            side: 'bid',
            mine: openOrdersBySideAndPrice[OrderSide.BUY]?.[row.price]?.size,
            ...row,
          } as RowData)
      )
      .slice(0, maxRowsPerSide);
    const spread =
      asks[0] && bids[0] ? MustBigNumber(asks[0]?.price ?? 0).minus(bids[0]?.price ?? 0) : null;
    const spreadPercent = orderbook?.spreadPercent;
    const histogramRange = Math.max(
      Number(bids[bids.length - 1]?.depth),
      Number(asks[asks.length - 1]?.depth)
    );
    return { asks, bids, spread, spreadPercent, histogramRange, hasOrderbook: !!orderbook };
  }, [orderbook, openOrdersBySideAndPrice]);
 };
@@ -1,22 +0,0 @@
 import { type RefObject, useEffect } from 'react';
 type ElementProps = {
  marketId: string;
  orderbookRef: RefObject<HTMLDivElement>;
 };
 /**
 * @description Center Orderbook on load and market change
 * Assumed that the two sides are the same height
 */
 export const useCenterOrderbook = ({ marketId, orderbookRef }: ElementProps) => {
  const orderbookEl = orderbookRef.current;
  const { clientHeight, scrollHeight } = orderbookEl ?? {};
  const shouldScroll = !!scrollHeight && !!clientHeight && scrollHeight > clientHeight;
  useEffect(() => {
    if (orderbookEl && shouldScroll) {
      orderbookEl.scrollTo({ top: (scrollHeight - clientHeight) / 2 });
    }
  }, [shouldScroll, marketId]);
 };
@@ -1,380 +0,0 @@
 import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useSelector } from 'react-redux';
 import type { Nullable } from '@/constants/abacus';
 import { SMALL_USD_DECIMALS, TOKEN_DECIMALS } from '@/constants/numbers';
 import { useLocaleSeparators } from '@/hooks/useLocaleSeparators';
 import { getAppTheme } from '@/state/configsSelectors';
 import { ROW_HEIGHT, ROW_PADDING_RIGHT, type RowData } from '@/views/Orderbook/OrderbookRow';
 import { MustBigNumber } from '@/lib/numbers';
 import { log } from '@/lib/telemetry';
 import { Colors } from '@/styles/colors';
 type ElementProps = {
  data: RowData[];
  histogramRange: number;
  hoveredRow?: number;
  stepSizeDecimals: Nullable<number>;
  tickSizeDecimals: Nullable<number>;
 };
 type StyleProps = {
  histogramSide?: 'left' | 'right';
 };
 export const useDrawOrderbook = ({
  data,
  histogramRange,
  stepSizeDecimals,
  tickSizeDecimals,
  histogramSide = 'right',
  hoveredRow,
 }: ElementProps & StyleProps) => {
  const theme = useSelector(getAppTheme);
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const hoverCanvasRef = useRef<HTMLCanvasElement>(null);
  const canvas = canvasRef.current;
  const hoverCanvas = hoverCanvasRef.current;
  /**
   *         to === 'right'                to === 'left'
   *         |===================|         |===================|
   * bar:    a                   b         c                   d
   * a = 0
   * b = depthBarWidth
   * c = canvasWidth - depthBarWidth
   * d = canvasWidth
   *
   */
  const getXYValues = ({
    barWidth,
    canvasWidth,
    gradientMultiplier,
  }: {
    barWidth: number;
    canvasWidth: number;
    gradientMultiplier: number;
  }) => {
    const gradient = {
      x1: Math.floor(histogramSide === 'left' ? barWidth : canvasWidth - barWidth),
      x2: Math.floor(
        histogramSide === 'left'
          ? 0 - (canvasWidth * gradientMultiplier - canvasWidth)
          : canvasWidth * gradientMultiplier
      ),
    };
    const bar = {
      x1: Math.floor(histogramSide === 'left' ? 0 : canvasWidth - barWidth),
      x2: Math.floor(
        histogramSide === 'left' ? Math.min(barWidth, canvasWidth - 2) : canvasWidth - 2
      ),
    };
    return {
      bar,
      gradient,
    };
  };
  const getYFromIndex = (idx: number, type: 'text' | 'bar' | 'rect') => {
    return (
      idx * ROW_HEIGHT +
      {
        text: ROW_HEIGHT / 2, // center of the row
        bar: 1, // 1px off the top and bottom so the histograms do not touch
        rect: 0,
      }[type]
    );
  };
  // Get X value by column, colIdx starts at 0
  const getXByColumn = ({ canvasWidth, colIdx }: { canvasWidth: number; colIdx: number }) => {
    return Math.floor(((colIdx + 1) * canvasWidth) / 3);
  };
  const drawBars = ({
    value,
    canvasWidth,
    ctx,
    gradientMultiplier,
    histogramAccentColor,
    idx,
    histogramSide,
  }: {
    value: Nullable<number>;
    canvasWidth: number;
    ctx: CanvasRenderingContext2D;
    gradientMultiplier: number;
    histogramAccentColor: string;
    idx: number;
    histogramSide: 'left' | 'right';
  }) => {
    const histogramBarWidth = canvasWidth - 2;
    const barWidth = value ? (value / histogramRange) * histogramBarWidth : 0;
    const { gradient, bar } = getXYValues({ barWidth, canvasWidth, gradientMultiplier });
    let linearGradient;
    try {
      linearGradient = ctx.createLinearGradient(
        gradient.x1,
        ROW_HEIGHT / 2,
        gradient.x2,
        ROW_HEIGHT / 2
      );
      linearGradient.addColorStop(0, histogramAccentColor);
      linearGradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
      ctx.fillStyle = linearGradient;
    } catch (err) {
      log('Orderbook/createLinearGradient', err, {
        x1: gradient.x1,
        y1: ROW_HEIGHT / 2,
        x2: gradient.x2,
        y2: ROW_HEIGHT / 2,
      });
      ctx.fillStyle = 'rgba(0, 0, 0, 0)';
    }
    ctx.beginPath();
    ctx.roundRect
      ? ctx.roundRect?.(
          bar.x1,
          getYFromIndex(idx, 'bar'),
          bar.x2,
          ROW_HEIGHT - 2,
          histogramSide === 'right' ? [2, 0, 0, 2] : [0, 2, 2, 0]
        )
      : ctx.rect(bar.x1, getYFromIndex(idx, 'bar'), bar.x2, ROW_HEIGHT - 2);
    ctx.fill();
  };
  const { decimal: LOCALE_DECIMAL_SEPARATOR } = useLocaleSeparators();
  const formatOptions = {
    decimalSeparator: LOCALE_DECIMAL_SEPARATOR,
  };
  const drawText = useCallback(
    ({
      ctx,
      canvasWidth,
      idx,
      size,
      price,
      mine,
      animationType,
    }: {
      ctx: CanvasRenderingContext2D;
      canvasWidth: number;
      idx: number;
      size?: Nullable<number>;
      price?: Nullable<number>;
      mine?: Nullable<number>;
      animationType?: 'remove' | 'add';
    }) => {
      const y = getYFromIndex(idx, 'text');
      const rectY = getYFromIndex(idx, 'rect');
      let startTime: number;
      let textColor: string = Colors[theme].text2;
      const animateColor = (timestamp: number) => {
        if (!startTime) startTime = timestamp;
        const animationTime = timestamp - startTime;
        // Linear transition for demonstration purposes
        textColor = animationType
          ? {
              add: Colors[theme].green,
              remove: Colors[theme].red,
            }[animationType]
          : Colors[theme].text2;
        if (animationTime < 500) {
          // Continue the animation for 500ms (adjust as needed)
          requestAnimationFrame(animateColor);
        } else {
          textColor = Colors[theme].text2;
        }
        if (animationType) {
          // TODO: Clear rect and redraw text
          // ctx.clearRect(0, rectY, canvasWidth, rectY + ROW_HEIGHT);
        }
      };
      requestAnimationFrame(animateColor);
      // Size text
      if (size) {
        ctx.fillStyle = textColor;
        ctx.fillText(
          MustBigNumber(size).toFormat(stepSizeDecimals ?? TOKEN_DECIMALS, formatOptions),
          getXByColumn({ canvasWidth, colIdx: 0 }) - ROW_PADDING_RIGHT,
          y
        );
      }
      // Price text
      if (price) {
        ctx.fillStyle = textColor;
        ctx.fillText(
          MustBigNumber(price).toFormat(tickSizeDecimals ?? SMALL_USD_DECIMALS, formatOptions),
          getXByColumn({ canvasWidth, colIdx: 1 }) - ROW_PADDING_RIGHT,
          y
        );
      }
      // Mine text
      if (mine) {
        ctx.fillStyle = Colors[theme].text2;
        ctx.fillText(
          MustBigNumber(mine).toFormat(stepSizeDecimals ?? TOKEN_DECIMALS, formatOptions),
          getXByColumn({ canvasWidth, colIdx: 2 }) - ROW_PADDING_RIGHT,
          y
        );
      }
    },
    [theme, LOCALE_DECIMAL_SEPARATOR, tickSizeDecimals, stepSizeDecimals]
  );
  /**
   * Scale canvas using device pixel ratio to unblur drawn text
   * @returns adjusted canvas width used in coordinates for drawing
   **/
  const canvasWidth = useMemo(() => {
    const devicePixelRatio = window.devicePixelRatio || 1;
    if (!canvas || !hoverCanvas) return 300 / devicePixelRatio;
    const ctx = canvas.getContext('2d');
    const hoverCtx = hoverCanvas.getContext('2d');
    const backingStoreRatio =
      // @ts-ignore
      ctx.webkitBackingStorePixelRatio ||
      // @ts-ignore
      ctx.mozBackingStorePixelRatio ||
      // @ts-ignore
      ctx.msBackingStorePixelRatio ||
      // @ts-ignore
      ctx.oBackingStorePixelRatio ||
      // @ts-ignore
      ctx.backingStorePixelRatio ||
      1;
    const ratio = devicePixelRatio / backingStoreRatio;
    canvas.width = canvas.offsetWidth * ratio;
    canvas.height = canvas.offsetHeight * ratio;
    hoverCanvas.width = hoverCanvas.offsetWidth * ratio;
    hoverCanvas.height = hoverCanvas.offsetHeight * ratio;
    if (hoverCtx) {
      hoverCtx.scale(ratio, ratio);
    }
    if (ctx) {
      ctx.scale(ratio, ratio);
      ctx.font = `12.5px Satoshi`;
      ctx.textAlign = 'right';
      ctx.textBaseline = 'middle';
      ctx.imageSmoothingQuality = 'high';
    }
    return canvas.width / ratio;
  }, [canvas, hoverCanvas]);
  //Handle Row Hover
  const lastHoveredRowRef = useRef<number>();
  const lastHoveredRow = lastHoveredRowRef.current;
  useEffect(() => {
    const hoverCtx = hoverCanvas?.getContext('2d');
    if (!!!hoverCtx) return;
    if (hoveredRow !== lastHoveredRow) {
      const y = getYFromIndex(lastHoveredRow ?? 0, 'rect');
      hoverCtx.clearRect(0, y, canvasWidth, ROW_HEIGHT);
      lastHoveredRowRef.current = hoveredRow;
    }
    if (hoveredRow !== undefined) {
      hoverCtx.fillStyle = 'rgba(255, 255, 255, 0.02)';
      hoverCtx.fillRect(0, hoveredRow * 20, canvasWidth, 20);
    }
  }, [lastHoveredRow, hoveredRow]);
  // Row Removal Animation state
  const previousDataRef = useRef<{
    [key: string]: number;
  }>(Object.fromEntries(data.map((row: RowData) => [row.price, row.size])));
  //Update histograms and row contents on data change
  useEffect(() => {
    const ctx = canvas?.getContext('2d');
    if (!canvas || !ctx) return;
    // Clear canvas before redraw
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    // Draw histograms
    data.forEach(({ depth, mine, price, size, side }, idx) => {
      const histogramAccentColor =
        side === 'bid' ? `hsla(159, 67%, 39%,  0.15)` : `hsla(360, 73%, 61%,  0.15)`;
      // Depth Bar
      drawBars({
        value: depth,
        canvasWidth,
        ctx,
        gradientMultiplier: 1.3,
        histogramAccentColor,
        idx,
        histogramSide,
      });
      // Size Bar
      drawBars({
        value: size,
        canvasWidth,
        ctx,
        gradientMultiplier: 5,
        histogramAccentColor,
        idx,
        histogramSide,
      });
      const isNew = !previousDataRef.current[price];
      const wasRemoved = previousDataRef.current[price] && !data.find((row) => row.price === price);
      // Size, Price, Mine
      drawText({
        ctx,
        canvasWidth,
        idx,
        size,
        price,
        mine,
        animationType: isNew ? 'add' : wasRemoved ? 'remove' : undefined,
      });
    });
    previousDataRef.current = Object.fromEntries(data.map((row: RowData) => [row.price, row.size]));
  }, [
    canvasWidth,
    data,
    drawText,
    histogramRange,
    stepSizeDecimals,
    tickSizeDecimals,
    histogramSide,
  ]);
  return { canvasRef, hoverCanvasRef };
 };
@@ -1,39 +0,0 @@
 import { type RefObject, useEffect, useState, Dispatch } from 'react';
 export const useSpreadRowScrollListener = ({
  orderbookRef,
  spreadRowRef,
 }: {
  orderbookRef: RefObject<HTMLDivElement>;
  spreadRowRef: RefObject<HTMLDivElement>;
 }) => {
  const [displaySide, setDisplaySide] = useState<string>();
  useEffect(() => {
    const onScroll = () => {
      if (spreadRowRef.current && orderbookRef.current) {
        const { clientHeight } = orderbookRef.current;
        const parent = orderbookRef.current.getBoundingClientRect();
        const spread = spreadRowRef.current.getBoundingClientRect();
        const spreadTop = spread.top - parent.top;
        const spreadBottom = spread.bottom - parent.top;
        if (spreadBottom > clientHeight) {
          setDisplaySide('bottom');
        } else if (spreadTop < 0) {
          setDisplaySide('top');
        } else {
          setDisplaySide(undefined);
        }
      }
    };
    orderbookRef.current?.addEventListener('scroll', onScroll, false);
    return () => {
      orderbookRef.current?.removeEventListener('scroll', onScroll, false);
    };
  }, [orderbookRef.current, spreadRowRef.current]);
  return displaySide;
 };
@@ -1,4 +1,6 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import styled, { AnyStyledComponent } from 'styled-components';
 import { TradeLayouts } from '@/constants/layout';
 import { STRING_KEYS } from '@/constants/localization';
@@ -7,9 +9,11 @@ import { useStringGetter } from '@/hooks';
 import { Tabs } from '@/components/Tabs';
-import { Orderbook } from '@/views/Orderbook';
+import { Orderbook, orderbookMixins, OrderbookScrollBehavior } from '@/views/tables/Orderbook';
 import { LiveTrades } from '@/views/tables/LiveTrades';
 import { getCurrentMarketId } from '@/state/perpetualsSelectors';
 enum Tab {
  Orderbook = 'Orderbook',
  Trades = 'Trades',
@@ -23,13 +27,22 @@ const HISTOGRAM_SIDES_BY_LAYOUT = {
 export const VerticalPanel = ({ tradeLayout }: { tradeLayout: TradeLayouts }) => {
  const stringGetter = useStringGetter();
  const [value, setValue] = useState(Tab.Orderbook);
  const [scrollBehavior, setScrollBehavior] = useState<OrderbookScrollBehavior>('snapToCenter');
  const marketId = useSelector(getCurrentMarketId);
  useEffect(() => {
    setScrollBehavior('snapToCenter');
  }, [marketId]);
  return (
-    <Tabs
+    <Styled.Tabs
      fullWidthTabs
      value={value}
      onValueChange={(value: Tab) => {
        setScrollBehavior('snapToCenter');
        setValue(value);
      }}
      items={[
@@ -37,7 +50,6 @@ export const VerticalPanel = ({ tradeLayout }: { tradeLayout: TradeLayouts }) =>
          content: <Orderbook histogramSide={HISTOGRAM_SIDES_BY_LAYOUT[tradeLayout]} />,
          label: stringGetter({ key: STRING_KEYS.ORDERBOOK_SHORT }),
          value: Tab.Orderbook,
          asChild: true,
        },
        {
          content: <LiveTrades histogramSide={HISTOGRAM_SIDES_BY_LAYOUT[tradeLayout]} />,
@@ -45,7 +57,26 @@ export const VerticalPanel = ({ tradeLayout }: { tradeLayout: TradeLayouts }) =>
          value: Tab.Trades,
        },
      ]}
      onWheel={() => setScrollBehavior('free')}
      withTransitions={false}
      isShowingOrderbook={value === Tab.Orderbook}
      scrollBehavior={scrollBehavior}
      // style={{
      //   scrollSnapType: {
      //     'snapToCenter': 'y mandatory',
      //     'free': 'none',
      //     'snapToCenterUnlessHovered': 'none',
      //   }[scrollBehavior],
      // }}
    />
  );
 };
 const Styled: Record<string, AnyStyledComponent> = {};
 Styled.Tabs = styled(Tabs)<{
  isShowingOrderbook: boolean;
  scrollBehavior: OrderbookScrollBehavior;
 }>`
  ${orderbookMixins.scrollArea}
 `;
@@ -1,317 +0,0 @@
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 import styled, { css } from 'styled-components';
 import { Nullable } from '@/constants/abacus';
 import { STRING_KEYS } from '@/constants/localization';
 import { useBreakpoints, useStringGetter } from '@/hooks';
 import {
  useCalculateOrderbookData,
  useCenterOrderbook,
  useDrawOrderbook,
  useSpreadRowScrollListener,
 } from '@/hooks/orderbook';
 import { calculateCanViewAccount } from '@/state/accountCalculators';
 import { getCurrentMarketAssetData } from '@/state/assetsSelectors';
 import { getCurrentMarketConfig } from '@/state/perpetualsSelectors';
 import { setTradeFormInputs } from '@/state/inputs';
 import { getCurrentInput } from '@/state/inputsSelectors';
 import { Canvas } from '@/components/Canvas';
 import { LoadingSpace } from '@/components/Loading/LoadingSpinner';
 import { Tag } from '@/components/Tag';
 import { ROW_HEIGHT, Row, type RowData } from './Orderbook/OrderbookRow';
 import { SpreadRow } from './Orderbook/SpreadRow';
 import { Output, OutputType } from '@/components/Output';
 const ORDERBOOK_MAX_ROWS_PER_SIDE = 35;
 type ElementProps = {
  maxRowsPerSide?: number;
  layout?: 'vertical' | 'horizontal';
 };
 type StyleProps = {
  hideHeader?: boolean;
  histogramSide?: 'left' | 'right';
  className?: string;
 };
 const getEmptyRow = (side: 'bid' | 'ask') => ({
  side,
  size: undefined,
  price: undefined,
  offset: 0,
  depth: undefined,
 });
 export const Orderbook = ({
  histogramSide,
  maxRowsPerSide = ORDERBOOK_MAX_ROWS_PER_SIDE,
 }: ElementProps & StyleProps) => {
  const dispatch = useDispatch();
  const stringGetter = useStringGetter();
  const { isTablet } = useBreakpoints();
  const showMineColumn = useSelector(calculateCanViewAccount) && !isTablet;
  const currentInput = useSelector(getCurrentInput);
  const { id = '' } = useSelector(getCurrentMarketAssetData, shallowEqual) ?? {};
  const { stepSizeDecimals, tickSizeDecimals } =
    useSelector(getCurrentMarketConfig, shallowEqual) ?? {};
  const { asks, bids, spread, spreadPercent, histogramRange, hasOrderbook } =
    useCalculateOrderbookData({
      maxRowsPerSide,
    });
  const { askLevels, asksSlice, bidLevels, bidsSlice, numRows } = useMemo(() => {
    const bidsSlice = bids.slice(0, maxRowsPerSide).reverse();
    const asksSlice = asks.slice(0, maxRowsPerSide);
    const numRows = maxRowsPerSide; // Math.max(bidsSlice.length, asksSlice.length);
    if (asksSlice.length < numRows) {
      const emptyRows = new Array(numRows - asksSlice.length).fill(getEmptyRow('ask'));
      asksSlice.push(...emptyRows);
    }
    if (bidsSlice.length < numRows) {
      const emptyRows = new Array(numRows - bidsSlice.length).fill(getEmptyRow('bid'));
      bidsSlice.unshift(...emptyRows);
    }
    const askLevels = new Set(asksSlice.map(({ price }: { price: number }) => price));
    const bidLevels = new Set(bidsSlice.map(({ price }: { price: number }) => price));
    return { askLevels, asksSlice, bidLevels, bidsSlice, numRows };
  }, [asks, bids]);
  const orderbookRef = useRef<HTMLDivElement>(null);
  useCenterOrderbook({ orderbookRef, marketId: id });
  /**
   * Display top or bottom spreadRow when center spreadRow is off screen
   */
  const spreadRowRef = useRef<HTMLDivElement>(null);
  const displaySide = useSpreadRowScrollListener({
    orderbookRef,
    spreadRowRef,
  });
  /**
   * Row action and hover
   */
  const onRowAction = useCallback(
    (price: Nullable<number>) => {
      if (currentInput === 'trade' && price) {
        dispatch(setTradeFormInputs({ limitPriceInput: price?.toString() }));
      }
    },
    [currentInput]
  );
  const [hoveredRow, setHoveredRow] = useState<{
    idx: number;
    side: 'bid' | 'ask';
  }>();
  const { canvasRef: asksCanvasRef, hoverCanvasRef: asksHoverRef } = useDrawOrderbook({
    data: asksSlice.reverse(),
    histogramRange,
    stepSizeDecimals,
    tickSizeDecimals,
    hoveredRow: hoveredRow?.side === 'ask' ? hoveredRow.idx : undefined,
    histogramSide,
  });
  const { canvasRef: bidsCanvasRef, hoverCanvasRef: bidsHoverRef } = useDrawOrderbook({
    data: bidsSlice.reverse(),
    histogramRange,
    stepSizeDecimals,
    tickSizeDecimals,
    hoveredRow: hoveredRow?.side === 'bid' ? hoveredRow.idx : undefined,
    histogramSide,
  });
  return (
    <$OrderbookContainer>
      <$OrderbookContent isLoading={!hasOrderbook}>
        <$Header>
          <span>
            {stringGetter({ key: STRING_KEYS.SIZE })} {id && <Tag>{id}</Tag>}
          </span>
          <span>
            {stringGetter({ key: STRING_KEYS.PRICE })} <Tag>USD</Tag>
          </span>
          <span>{showMineColumn && stringGetter({ key: STRING_KEYS.MINE })}</span>
        </$Header>
        {displaySide === 'top' && (
          <$SpreadRow
            side="top"
            spread={spread}
            spreadPercent={spreadPercent}
            tickSizeDecimals={tickSizeDecimals}
          />
        )}
        <$OrderbookWrapper ref={orderbookRef}>
          {!hasOrderbook ? (
            <LoadingSpace id="orderbook" />
          ) : (
            <>
              <$OrderbookSideContainer
                numRows={numRows}
                side="ask"
                onMouseLeave={() => setHoveredRow(undefined)}
              >
                <$OrderbookCanvas ref={asksCanvasRef} width="100%" height={numRows * ROW_HEIGHT} />
                <$HoverCanvas ref={asksHoverRef} width="100%" height={numRows * ROW_HEIGHT} />
                <$HoverRows>
                  {asksSlice.map((row: RowData, idx) =>
                    row.price ? (
                      <$Row
                        key={idx}
                        title={`${row.price}`}
                        onClick={() => onRowAction(row.price)}
                        onMouseOver={(e) => setHoveredRow({ idx, side: 'ask' })}
                      >
                        <span></span>
                        <span></span>
                        <span>
                          <Output
                            type={OutputType.Fiat}
                            value={row.price}
                            fractionDigits={tickSizeDecimals}
                          />
                        </span>
                      </$Row>
                    ) : (
                      <$Row key={idx} onMouseOver={(e) => setHoveredRow(undefined)} />
                    )
                  )}
                </$HoverRows>
              </$OrderbookSideContainer>
              <SpreadRow
                ref={spreadRowRef}
                spread={spread}
                spreadPercent={spreadPercent}
                tickSizeDecimals={tickSizeDecimals}
              />
              <$OrderbookSideContainer
                numRows={numRows}
                side="bid"
                onMouseLeave={() => setHoveredRow(undefined)}
              >
                <$OrderbookCanvas ref={bidsCanvasRef} width="100%" height={numRows * ROW_HEIGHT} />
                <$HoverCanvas ref={bidsHoverRef} width="100%" height={numRows * ROW_HEIGHT} />
                <$HoverRows>
                  {bidsSlice.map((row: RowData, idx) =>
                    row.price ? (
                      <$Row
                        key={idx}
                        title={`${row.price}`}
                        onClick={() => onRowAction(row.price)}
                        onMouseOver={(e) => setHoveredRow({ idx, side: 'bid' })}
                      >
                        <span></span>
                        <span></span>
                        <span>
                          <Output
                            type={OutputType.Fiat}
                            value={row.price}
                            fractionDigits={tickSizeDecimals}
                          />
                        </span>
                      </$Row>
                    ) : (
                      <$Row key={idx} onMouseOver={(e) => setHoveredRow(undefined)} />
                    )
                  )}
                </$HoverRows>
              </$OrderbookSideContainer>
            </>
          )}
        </$OrderbookWrapper>
        {displaySide === 'bottom' && (
          <$SpreadRow
            side="bottom"
            spread={spread}
            spreadPercent={spreadPercent}
            tickSizeDecimals={tickSizeDecimals}
          />
        )}
      </$OrderbookContent>
    </$OrderbookContainer>
  );
 };
 const $OrderbookContainer = styled.div`
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  overflow: hidden;
 `;
 const $OrderbookContent = styled.div<{ isLoading?: boolean }>`
  max-height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  ${({ isLoading }) => isLoading && 'flex: 1;'}
 `;
 const $Header = styled(Row)`
  height: 2rem;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-0);
 `;
 const $OrderbookWrapper = styled.div`
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
 `;
 const $OrderbookSideContainer = styled.div<{ numRows: number; side: 'bid' | 'ask' }>`
  ${({ numRows }) => css`
    min-height: calc(${numRows} * 1.25rem);
  `}
  ${({ side }) => css`
    --accent-color: ${side === 'bid' ? 'var(--color-positive)' : 'var(--color-negative)'};
  `}
  position: relative;
 `;
 const $OrderbookCanvas = styled(Canvas)`
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  font-feature-settings: var(--fontFeature-monoNumbers);
 `;
 const $HoverCanvas = styled($OrderbookCanvas)``;
 const $HoverRows = styled.div`
  position: absolute;
  width: 100%;
 `;
 const $Row = styled(Row)<{ onClick?: () => void }>`
  ${({ onClick }) => (onClick ? 'cursor: pointer;' : 'cursor: default;')}
 `;
 const $SpreadRow = styled(SpreadRow)`
  position: absolute;
 `;
@@ -1,26 +0,0 @@
 import styled from 'styled-components';
 import { OrderbookLine } from '@/constants/abacus';
 export type RowData = OrderbookLine & { side: 'bid' | 'ask'; mine?: number };
 export const ROW_HEIGHT = 20;
 export const ROW_PADDING_RIGHT = 8;
 export const Row = styled.div`
  display: flex;
  flex-shrink: 0;
  align-items: center;
  height: ${ROW_HEIGHT}px;
  min-height: ${ROW_HEIGHT}px;
  font: var(--font-mini-book);
  position: relative;
  padding-right: 0.5rem;
  > span {
    flex: 1 1 0%;
    text-align: right;
    padding-bottom: 2px;
  }
 `;
@@ -1,61 +0,0 @@
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import BigNumber from 'bignumber.js';
 import type { Nullable } from '@/constants/abacus';
 import { STRING_KEYS } from '@/constants/localization';
 import { useStringGetter } from '@/hooks';
 import { Output, OutputType } from '@/components/Output';
 import { WithTooltip } from '@/components/WithTooltip';
 import { Row } from './OrderbookRow';
 type StyleProps = {
  side?: 'top' | 'bottom';
 };
 type ElementProps = {
  spread: BigNumber | null;
  spreadPercent: Nullable<number>;
  tickSizeDecimals: Nullable<number>;
 };
 export const SpreadRow = forwardRef<HTMLDivElement, StyleProps & ElementProps>(
  ({ side, spread, spreadPercent, tickSizeDecimals }, ref) => {
    const stringGetter = useStringGetter();
    return (
      <$SpreadRow ref={ref} side={side}>
        <span>
          <WithTooltip tooltip="spread">
            {stringGetter({ key: STRING_KEYS.ORDERBOOK_SPREAD })}
          </WithTooltip>
        </span>
        <span>
          <Output type={OutputType.Number} value={spread} fractionDigits={tickSizeDecimals} />
        </span>
        <span>
          <Output type={OutputType.Percent} value={spreadPercent} />
        </span>
      </$SpreadRow>
    );
  }
 );
 const $SpreadRow = styled(Row)<{ side?: 'top' | 'bottom' }>`
  height: 2rem;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  ${({ side }) =>
    side &&
    {
      top: css`
        border-top: none;
      `,
      bottom: css`
        border-bottom: none;
      `,
    }[side]}
 `;