remove testnet cctp chains

package.json

@@ -44,7 +44,6 @@
     "@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,5 +1,9 @@
 lockfileVersion: '6.0'
 
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
 dependencies:
   '@0xsquid/sdk':
     specifier: ^1.10.0
@@ -37,9 +41,6 @@ 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)
@@ -2319,35 +2320,6 @@ 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:
@@ -11776,8 +11748,8 @@ packages:
     engines: {node: '>=10.5.0'}
     dev: true
 
-  /node-fetch-native@1.6.1:
+  /node-fetch-native@1.4.1:
-    resolution: {integrity: sha512-bW9T/uJDPAJB2YNYEpWzE54U5O3MQidXsOyTfnbKYtTtFexRvGzb1waphBN4ZwP6EcIvYYEOwW0b72BpAqydTw==}
+    resolution: {integrity: sha512-NsXBU0UgBxo2rQLOeWNZqS3fvflWePMECr8CoSWoSTqCqGbVVsvl9vZu1HfQicYN0g5piV9Gh8RTEvo/uP752w==}
     dev: false
 
   /node-fetch-native@1.6.1:
@@ -11927,7 +11899,7 @@ packages:
     resolution: {integrity: sha512-s1ZCMmQWXy4b5K/TW9i/DtiN8Ku+xCiHcjQ6/J/nDdssirrQNOoB165Zu8EqLMA2lln1JUth9a0aW9Ap2ctrUg==}
     dependencies:
       destr: 2.0.2
-      node-fetch-native: 1.6.1
+      node-fetch-native: 1.4.1
       ufo: 1.3.2
     dev: false
 
@@ -13815,7 +13787,7 @@ packages:
       consola: 3.2.3
       defu: 6.1.3
       mime: 3.0.0
-      node-fetch-native: 1.6.1
+      node-fetch-native: 1.4.1
       pathe: 1.1.1
     dev: false
 
@@ -13938,7 +13910,7 @@ packages:
       listhen: 1.5.5
       lru-cache: 10.1.0
       mri: 1.2.0
-      node-fetch-native: 1.6.1
+      node-fetch-native: 1.4.1
       ofetch: 1.3.3
       ufo: 1.3.2
     transitivePeerDependencies:
@@ -14754,7 +14726,3 @@ packages:
   /zwitch@2.0.4:
     resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
     dev: true
-
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false

src/components/Accordion.tsx

@@ -1,119 +0,0 @@
-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

@@ -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} />
-  )
-);

src/components/Icon.tsx

@@ -55,7 +55,6 @@ import {
   OverviewIcon,
   PencilIcon,
   PlayIcon,
-  PlusIcon,
   PositionsIcon,
   PriceChartIcon,
   PrivacyIcon,
@@ -131,7 +130,6 @@ export enum IconName {
   Overview = 'Overview',
   Pencil = 'Pencil',
   Play = 'Play',
-  Plus = 'Plus',
   Positions = 'Positions',
   PriceChart = 'PriceChart',
   Privacy = 'Privacy',
@@ -206,7 +204,6 @@ 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,7 +118,6 @@ 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

@@ -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,
-};

src/hooks/orderbook/useCalculateOrderbookData.ts

@@ -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]);
-};

src/hooks/orderbook/useCenterOrderbook.ts

@@ -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]);
-};

src/hooks/orderbook/useDrawOrderbook.ts

@@ -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 };
-};

src/hooks/orderbook/useSpreadRowScrollListener.ts

@@ -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;
-};

src/icons/index.ts

@@ -44,7 +44,6 @@ 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

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

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

src/views/Orderbook.tsx

@@ -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;
-`;

src/views/Orderbook/OrderbookRow.tsx

@@ -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;
-  }
-`;

src/views/Orderbook/SpreadRow.tsx

@@ -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]}
-`;