chore: orderbook adjustments

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

@@ -26,7 +26,7 @@ const CumulationBar = ({
     <div
       data-testid={`${VolumeType.bid === type ? 'bid' : 'ask'}-bar`}
       className={classNames(
-        'absolute top-0 left-0 h-full transition-all',
+        'absolute top-0 left-0 h-full',
         type === VolumeType.bid
           ? 'bg-market-green-300 dark:bg-market-green/50'
           : 'bg-market-red-300 dark:bg-market-red/30'

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

@@ -1,14 +1,15 @@
-import { useMemo } from 'react';
+import { useMemo, useRef } from 'react';
 import ReactVirtualizedAutoSizer from 'react-virtualized-auto-sizer';
 import {
   addDecimalsFormatNumber,
   formatNumberFixed,
 } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
+import { usePrevious } from '@vegaprotocol/react-helpers';
 import { OrderbookRow } from './orderbook-row';
 import type { OrderbookRowData } from './orderbook-data';
 import { compactRows, VolumeType } from './orderbook-data';
-import { Splash } from '@vegaprotocol/ui-toolkit';
+import { Splash, VegaIcon, VegaIconNames } from '@vegaprotocol/ui-toolkit';
 import classNames from 'classnames';
 import { useState } from 'react';
 import type { PriceLevelFieldsFragment } from './__generated__/MarketDepth';
@@ -99,12 +100,40 @@ export const Orderbook = ({
   const groupedBids = useMemo(() => {
     return compactRows(bids, VolumeType.bid, resolution);
   }, [bids, resolution]);
+  const previousMidPrice = usePrevious(midPrice);
+  const iconRef = useRef(
+    <span className="text-vega-blue-500 dark:text-vega-blue-500">
+      <VegaIcon name={VegaIconNames.BULLET} />
+    </span>
+  );
+  const arrowIcon = useMemo(() => {
+    if (previousMidPrice !== midPrice) {
+      iconRef.current = (
+        <span
+          className={classNames(
+            previousMidPrice > midPrice
+              ? 'text-market-red dark:text-market-red'
+              : 'text-market-green-600 dark:text-market-green'
+          )}
+        >
+          <VegaIcon
+            name={
+              previousMidPrice > midPrice
+                ? VegaIconNames.ARROW_DOWN
+                : VegaIconNames.ARROW_UP
+            }
+          />
+        </span>
+      );
+    }
+    return iconRef.current;
+  }, [previousMidPrice, midPrice]);
 
   return (
     <div className="h-full pl-1 text-xs grid grid-rows-[1fr_min-content]">
       <div>
-        <ReactVirtualizedAutoSizer disableWidth>
-          {({ height }) => {
+        <ReactVirtualizedAutoSizer>
+          {({ width, height }) => {
             const limit = Math.max(
               1,
               Math.floor((height - midHeight) / 2 / (rowHeight + rowGap))
@@ -116,6 +145,7 @@ export const Orderbook = ({
                 className="overflow-hidden grid"
                 data-testid="orderbook-grid-element"
                 style={{
+                  width: width + 'px',
                   height: height + 'px',
                   gridTemplateRows: `1fr ${midHeight}px 1fr`, // cannot use tailwind here as tailwind will not parse a class string with interpolation
                 }}
@@ -140,6 +170,7 @@ export const Orderbook = ({
                             {addDecimalsFormatNumber(midPrice, decimalPlaces)}
                           </span>
                           <span className="text-base">{assetSymbol}</span>
+                          {arrowIcon}
                         </>
                       )}
                     </div>

libs/ui-toolkit/src/components/icon/vega-icons/svg-icons/icon-arrow-up.tsx

@@ -0,0 +1,18 @@
+export const IconArrowUp = ({ size = 16 }: { size: number }) => {
+  return (
+    <svg width={size} height={size} viewBox="0 0 16 16">
+      <path
+        d="M 7.47,3.63
+           C 7.47,3.63 2.37,8.72 2.37,8.72
+             2.37,8.72 1.63,7.98 1.63,7.98
+             1.63,7.98 8.00,1.60 8.00,1.60
+             8.00,1.60 14.37,7.98 14.37,7.98
+             14.37,7.98 13.63,8.72 13.63,8.72
+             13.63,8.72 8.53,3.63 8.53,3.63
+             8.53,3.63 8.53,14.35 8.53,14.35
+             8.53,14.35 7.47,14.35 7.47,14.35
+             7.47,14.35 7.47,3.63 7.47,3.63 Z"
+      />
+    </svg>
+  );
+};

libs/ui-toolkit/src/components/icon/vega-icons/svg-icons/icon-bullet.tsx

@@ -0,0 +1,7 @@
+export const IconBullet = ({ size = 16 }: { size: number }) => {
+  return (
+    <svg width={size} height={size} viewBox="0 0 16 16">
+      <circle cx="8" cy="8" r="6" />
+    </svg>
+  );
+};

libs/ui-toolkit/src/components/icon/vega-icons/vega-icon-record.ts

@@ -1,6 +1,8 @@
 import { IconArrowDown } from './svg-icons/icon-arrow-down';
+import { IconArrowUp } from './svg-icons/icon-arrow-up';
 import { IconArrowRight } from './svg-icons/icon-arrow-right';
 import { IconBreakdown } from './svg-icons/icon-breakdown';
+import { IconBullet } from './svg-icons/icon-bullet';
 import { IconChevronDown } from './svg-icons/icon-chevron-down';
 import { IconChevronLeft } from './svg-icons/icon-chevron-left';
 import { IconChevronUp } from './svg-icons/icon-chevron-up';
@@ -24,8 +26,10 @@ import { IconWithdraw } from './svg-icons/icon-withdraw';
 
 export enum VegaIconNames {
   ARROW_DOWN = 'arrow-down',
+  ARROW_UP = 'arrow-up',
   ARROW_RIGHT = 'arrow-right',
   BREAKDOWN = 'breakdown',
+  BULLET = 'bullet',
   CHEVRON_DOWN = 'chevron-down',
   CHEVRON_LEFT = 'chevron-left',
   CHEVRON_UP = 'chevron-up',
@@ -53,6 +57,7 @@ export const VegaIconNameMap: Record<
   ({ size }: { size: number }) => JSX.Element
 > = {
   'arrow-down': IconArrowDown,
+  'arrow-up': IconArrowUp,
   'arrow-right': IconArrowRight,
   'chevron-down': IconChevronDown,
   'chevron-left': IconChevronLeft,
@@ -61,6 +66,7 @@ export const VegaIconNameMap: Record<
   'question-mark': IconQuestionMark,
   'trend-up': IconTrendUp,
   breakdown: IconBreakdown,
+  bullet: IconBullet,
   copy: IconCopy,
   cross: IconCross,
   deposit: IconDeposit,