Merge branch 'main' into canvas-orderbook

package.json

@@ -44,6 +44,7 @@
     "@dydxprotocol/v4-localization": "^1.1.5",
     "@ethersproject/providers": "^5.7.2",
     "@js-joda/core": "^5.5.3",
+    "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-dialog": "^1.0.4",

pnpm-lock.yaml

@@ -1,9 +1,5 @@
 lockfileVersion: '6.0'
 
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false
-
 dependencies:
   '@0xsquid/sdk':
     specifier: ^1.10.0
@@ -41,6 +37,9 @@ dependencies:
   '@js-joda/core':
     specifier: ^5.5.3
     version: 5.5.3
+  '@radix-ui/react-accordion':
+    specifier: ^1.1.2
+    version: 1.1.2(@types/react-dom@18.2.6)(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)
   '@radix-ui/react-checkbox':
     specifier: ^1.0.4
     version: 1.0.4(@types/react-dom@18.2.6)(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)
@@ -2320,6 +2319,35 @@ packages:
       '@babel/runtime': 7.22.10
     dev: false
 
+  /@radix-ui/react-accordion@1.1.2(@types/react-dom@18.2.6)(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-fDG7jcoNKVjSK6yfmuAs0EnPDro0WMXIhMtXdTBWqEioVW206ku+4Lw07e+13lUkFkpoEQ2PdeMIAGpdqEAmDg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.22.10
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-collapsible': 1.0.3(@types/react-dom@18.2.6)(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.6)(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.14)(react@18.2.0)
+      '@radix-ui/react-context': 1.0.1(@types/react@18.2.14)(react@18.2.0)
+      '@radix-ui/react-direction': 1.0.1(@types/react@18.2.14)(react@18.2.0)
+      '@radix-ui/react-id': 1.0.1(@types/react@18.2.14)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.6)(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.14)(react@18.2.0)
+      '@types/react': 18.2.14
+      '@types/react-dom': 18.2.6
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /@radix-ui/react-arrow@1.0.3(@types/react-dom@18.2.6)(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-wSP+pHsB/jQRaL6voubsQ/ZlrGBHHrOjmBnr19hxYgtS0WvAFwZhK2WP/YY5yF9uKECCEEDGxuLxq1NBK51wFA==}
     peerDependencies:
@@ -11748,8 +11776,8 @@ packages:
     engines: {node: '>=10.5.0'}
     dev: true
 
-  /node-fetch-native@1.4.1:
+  /node-fetch-native@1.6.1:
-    resolution: {integrity: sha512-NsXBU0UgBxo2rQLOeWNZqS3fvflWePMECr8CoSWoSTqCqGbVVsvl9vZu1HfQicYN0g5piV9Gh8RTEvo/uP752w==}
+    resolution: {integrity: sha512-bW9T/uJDPAJB2YNYEpWzE54U5O3MQidXsOyTfnbKYtTtFexRvGzb1waphBN4ZwP6EcIvYYEOwW0b72BpAqydTw==}
     dev: false
 
   /node-fetch-native@1.6.1:
@@ -11899,7 +11927,7 @@ packages:
     resolution: {integrity: sha512-s1ZCMmQWXy4b5K/TW9i/DtiN8Ku+xCiHcjQ6/J/nDdssirrQNOoB165Zu8EqLMA2lln1JUth9a0aW9Ap2ctrUg==}
     dependencies:
       destr: 2.0.2
-      node-fetch-native: 1.4.1
+      node-fetch-native: 1.6.1
       ufo: 1.3.2
     dev: false
 
@@ -13787,7 +13815,7 @@ packages:
       consola: 3.2.3
       defu: 6.1.3
       mime: 3.0.0
-      node-fetch-native: 1.4.1
+      node-fetch-native: 1.6.1
       pathe: 1.1.1
     dev: false
 
@@ -13910,7 +13938,7 @@ packages:
       listhen: 1.5.5
       lru-cache: 10.1.0
       mri: 1.2.0
-      node-fetch-native: 1.4.1
+      node-fetch-native: 1.6.1
       ofetch: 1.3.3
       ufo: 1.3.2
     transitivePeerDependencies:
@@ -14726,3 +14754,7 @@ packages:
   /zwitch@2.0.4:
     resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
     dev: true
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false

public/configs/cctp.json

@@ -4,38 +4,9 @@
         "tokenAddress": "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
         "name": "Ethereum"
     },
-    {
-        "chainId": "421613",
-        "tokenAddress": "0xfd064a18f3bf249cf1f87fc203e90d8f650f2d63",
-        "name": "Arbitrum Goerli"
-    },
-    {
-        "chainId": "43113",
-        "tokenAddress": "0x5425890298aed601595a70AB815c96711a31Bc65",
-        "name": "Avalanche Fuji"
-    },
-    {
-        "chainId": "84531",
-        "tokenAddress": "0xf175520c52418dfe19c8098071a252da48cd1c19",
-        "name": "Base Goerli"
-    },
     {
         "chainId": "5",
         "tokenAddress": "0x07865c6E87B9F70255377e024ace6630C1Eaa37F",
         "name": "Ethereum Goerli"
-    },
-    {
-        "chainId": "grand-1",
-        "tokenAddress": "uusdc",
-        "name": "Noble Testnet"
-    },
-    {
-        "chainId": "420",
-        "tokenAddress": "0xe05606174bac4a6364b31bd0eca4bf4dd368f8c6",
-        "name": "OP Goerli"
-    },
-    {
-        "chainId": "103",
-        "name": "Solana Devnet"
     }
 ]

src/components/Accordion.tsx

@@ -0,0 +1,119 @@
+import styled, { keyframes, type AnyStyledComponent } from 'styled-components';
+
+import { Root, Item, Header, Trigger, Content } from '@radix-ui/react-accordion';
+
+import { layoutMixins } from '@/styles/layoutMixins';
+import { PlusIcon } from '@/icons';
+
+export type AccordionItem = {
+  header: React.ReactNode;
+  content: React.ReactNode;
+};
+
+type AccordionProps = {
+  items: AccordionItem[];
+  className?: string;
+};
+
+export const Accordion = ({ items, className }: AccordionProps) => (
+  <Styled.Root className={className} type="single" collapsible>
+    {items.map(({ header, content }, idx) => (
+      <Styled.Item key={idx} value={idx.toString()}>
+        <Header>
+          <Styled.Trigger>
+            {header}
+            <Styled.Icon>
+              <PlusIcon />
+            </Styled.Icon>
+          </Styled.Trigger>
+        </Header>
+        <Styled.Content>{content}</Styled.Content>
+      </Styled.Item>
+    ))}
+  </Styled.Root>
+);
+
+const Styled: Record<string, AnyStyledComponent> = {};
+
+Styled.Root = styled(Root)`
+  > *:not(:last-child) {
+    border-bottom: var(--border-width) solid var(--border-color);
+  }
+`;
+
+Styled.Item = styled(Item)``;
+
+Styled.Icon = styled.div`
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+
+  width: 2.25rem;
+  height: 2.25rem;
+
+  --color-border: var(--color-layer-6);
+  color: var(--color-text-1);
+  background-color: var(--color-layer-5);
+  border: solid var(--border-width) var(--color-border);
+  border-radius: 50%;
+  font: var(--font-small-book);
+
+  svg {
+    height: 1.125em;
+    width: 1.125em;
+  }
+`;
+
+Styled.Trigger = styled(Trigger)`
+  ${layoutMixins.spacedRow}
+  width: 100%;
+  padding: 1rem 0.75rem;
+
+  color: var(--color-text-1);
+  text-align: start;
+
+  &:hover {
+    ${Styled.Icon} {
+      color: var(--color-text-2);
+      filter: brightness(1.1);
+    }
+  }
+
+  svg {
+    color: var(--color-text-0);
+    transition: transform 0.3s var(--ease-out-expo);
+  }
+
+  &[data-state='open'] svg {
+    transform: rotate(45deg);
+  }
+`;
+
+Styled.Content = styled(Content)`
+  overflow: hidden;
+  margin: 0 0.75rem 1rem;
+
+  color: var(--color-text-0);
+
+  &[data-state='open'] {
+    animation: ${keyframes`
+      from {
+        height: 0;
+      }
+      to {
+        height: var(--radix-accordion-content-height);
+      }
+    `} 0.3s var(--ease-out-expo);
+  }
+
+  &[data-state='closed'] {
+    animation: ${keyframes`
+      from {
+        height: var(--radix-accordion-content-height);
+      }
+      to {
+        height: 0;
+      }
+    `} 0.1s var(--ease-in-expo);
+  }
+`;

src/components/Canvas.tsx

@@ -0,0 +1,16 @@
+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} />
+  )
+);

src/components/Icon.tsx

@@ -55,6 +55,7 @@ import {
   OverviewIcon,
   PencilIcon,
   PlayIcon,
+  PlusIcon,
   PositionsIcon,
   PriceChartIcon,
   PrivacyIcon,
@@ -130,6 +131,7 @@ export enum IconName {
   Overview = 'Overview',
   Pencil = 'Pencil',
   Play = 'Play',
+  Plus = 'Plus',
   Positions = 'Positions',
   PriceChart = 'PriceChart',
   Privacy = 'Privacy',
@@ -204,6 +206,7 @@ const icons = {
   [IconName.Overview]: OverviewIcon,
   [IconName.Pencil]: PencilIcon,
   [IconName.Play]: PlayIcon,
+  [IconName.Plus]: PlusIcon,
   [IconName.Positions]: PositionsIcon,
   [IconName.PriceChart]: PriceChartIcon,
   [IconName.Privacy]: PrivacyIcon,

src/components/Tabs.tsx

@@ -118,6 +118,7 @@ export const Tabs = <TabItemsValue extends string>({
               forceMount={forceMount}
               $hide={forceMount && currentItem?.value !== value}
               $withTransitions={withTransitions}
+              asChild={asChild}
             >
               {content}
             </Styled.Content>

src/hooks/orderbook/index.ts

@@ -0,0 +1,11 @@
+import { useCalculateOrderbookData } from './useCalculateOrderbookData';
+import { useCenterOrderbook } from './useCenterOrderbook';
+import { useDrawOrderbook } from './useDrawOrderbook';
+import { useSpreadRowScrollListener } from './useSpreadRowScrollListener';
+
+export {
+  useCalculateOrderbookData,
+  useCenterOrderbook,
+  useDrawOrderbook,
+  useSpreadRowScrollListener,
+};

src/hooks/orderbook/useCalculateOrderbookData.ts

@@ -0,0 +1,55 @@
+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]);
+};

src/hooks/orderbook/useCenterOrderbook.ts

@@ -0,0 +1,22 @@
+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]);
+};

src/hooks/orderbook/useDrawOrderbook.ts

@@ -0,0 +1,380 @@
+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 };
+};

src/hooks/orderbook/useSpreadRowScrollListener.ts

@@ -0,0 +1,39 @@
+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;
+};

src/icons/index.ts

@@ -44,6 +44,7 @@ export { default as OrderbookIcon } from './orderbook.svg';
 export { default as OverviewIcon } from './overview.svg';
 export { default as PencilIcon } from './pencil.svg';
 export { default as PlayIcon } from './play.svg';
+export { default as PlusIcon } from './plus.svg';
 export { default as PortfolioIcon } from './portfolio.svg';
 export { default as PositionsIcon } from './positions.svg';
 export { default as PriceChartIcon } from './price-chart.svg';

src/icons/plus.svg

@@ -0,0 +1 @@
+<svg fill="none" height="12" viewBox="0 0 12 12" width="12" xmlns="http://www.w3.org/2000/svg"><path d="m6.75.75c0-.198912-.07902-.389678-.21967-.53033-.14065-.1406525-.33142-.21967-.53033-.21967s-.38968.0790175-.53033.21967c-.14065.140652-.21967.331418-.21967.53033v4.5h-4.5c-.198912 0-.389678.07902-.53033.21967-.1406525.14065-.21967.33142-.21967.53033s.0790175.38968.21967.53033c.140652.14065.331418.21967.53033.21967h4.5v4.5c0 .1989.07902.3897.21967.5303.14065.1407.33142.2197.53033.2197s.38968-.079.53033-.2197c.14065-.1406.21967-.3314.21967-.5303v-4.5h4.5c.1989 0 .3897-.07902.5303-.21967.1407-.14065.2197-.33142.2197-.53033s-.079-.38968-.2197-.53033c-.1406-.14065-.3314-.21967-.5303-.21967h-4.5z" fill="currentColor"/></svg>

src/pages/rewards/RewardsHelpPanel.tsx

@@ -0,0 +1,80 @@
+import styled, { AnyStyledComponent } from 'styled-components';
+
+import { STRING_KEYS } from '@/constants/localization';
+import { layoutMixins } from '@/styles/layoutMixins';
+import { useStringGetter } from '@/hooks';
+
+import { Accordion } from '@/components/Accordion';
+import { Link } from '@/components/Link';
+import { Panel } from '@/components/Panel';
+
+const REWARDS_LEARN_MORE_LINK = ''; // to be configured
+
+export const RewardsHelpPanel = () => {
+  const stringGetter = useStringGetter();
+
+  return (
+    <Styled.HelpCard
+      slotHeader={
+        <Styled.Header>
+          <h3>{stringGetter({ key: STRING_KEYS.HELP })}</h3>
+          {REWARDS_LEARN_MORE_LINK && (
+            <Link withIcon href={REWARDS_LEARN_MORE_LINK}>
+              {stringGetter({ key: STRING_KEYS.LEARN_MORE })}
+            </Link>
+          )}
+        </Styled.Header>
+      }
+    >
+      <Accordion
+        items={[
+          {
+            header: 'Who is eligible for trading rewards?',
+            content: 'All traders are eligible for trading rewards.',
+          },
+          {
+            header: 'How do trading rewards work?',
+            content:
+              'Immediately after each fill, trading rewards are sent directly to the trader’s dYdX Chain address, based on the amount of fees paid by the trader.',
+          },
+          {
+            header: 'How do I claim my rewards?',
+            content:
+              'Each block, trading rewards are automatically sent directly to the trader’s dYdX Chain address.',
+          },
+        ]}
+      />
+    </Styled.HelpCard>
+  );
+};
+
+const Styled: Record<string, AnyStyledComponent> = {};
+
+Styled.HelpCard = styled(Panel)`
+  --panel-content-paddingY: 0;
+  width: 100%;
+  height: max-content;
+  padding: 0;
+  gap: 0;
+
+  text-align: start;
+`;
+
+Styled.Header = styled.div`
+  ${layoutMixins.spacedRow}
+  gap: 1ch;
+
+  padding: 1.25rem 1.5rem;
+  border-bottom: var(--border-width) solid var(--border-color);
+
+  font: var(--font-small-book);
+
+  h3 {
+    font: var(--font-medium-book);
+    color: var(--color-text-2);
+  }
+`;
+
+Styled.Link = styled(Link)`
+  display: inline-flex;
+`;

src/pages/trade/VerticalPanel.tsx

@@ -1,6 +1,4 @@
-import { useEffect, useState } from 'react';
+import { 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';
@@ -9,11 +7,9 @@ import { useStringGetter } from '@/hooks';
 
 import { Tabs } from '@/components/Tabs';
 
-import { Orderbook, orderbookMixins, OrderbookScrollBehavior } from '@/views/tables/Orderbook';
+import { Orderbook } from '@/views/Orderbook';
 import { LiveTrades } from '@/views/tables/LiveTrades';
 
-import { getCurrentMarketId } from '@/state/perpetualsSelectors';
-
 enum Tab {
   Orderbook = 'Orderbook',
   Trades = 'Trades',
@@ -27,22 +23,13 @@ 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 (
-    <Styled.Tabs
+    <Tabs
       fullWidthTabs
       value={value}
       onValueChange={(value: Tab) => {
-        setScrollBehavior('snapToCenter');
         setValue(value);
       }}
       items={[
@@ -50,6 +37,7 @@ 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]} />,
@@ -57,26 +45,7 @@ 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}
-`;

src/views/Orderbook.tsx

@@ -0,0 +1,317 @@
+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;
+`;

src/views/Orderbook/OrderbookRow.tsx

@@ -0,0 +1,26 @@
+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;
+  }
+`;

src/views/Orderbook/SpreadRow.tsx

@@ -0,0 +1,61 @@
+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]}
+`;