chore(trading): market list tweaks (#4756)

Co-authored-by: Matthew Russell <mattrussell36@gmail.com>
2023-09-12 19:41:45 +02:00 · 2023-09-12 19:41:45 +02:00 · 41804d9869
commit 41804d9869
parent 293288286b
4 changed files with 114 additions and 111 deletions
--- a/libs/datagrid/src/lib/cells/market-name-cell.tsx
+++ b/libs/datagrid/src/lib/cells/market-name-cell.tsx
@ -59,7 +59,7 @@ export const MarketNameCell = ({
    (data as { market: Market })?.market?.tradableInstrument.instrument.product
      .__typename;

-  if (!value) return;
+  if (!value) return null;
  const content = (
    <>
      <span data-testid="market-code" data-market-id={id}>
@ -72,7 +72,7 @@ export const MarketNameCell = ({
    <button
      onClick={handleOnClick}
      tabIndex={0}
-      className="block text-left text-ellipsis overflow-hidden whitespace-nowrap w-full"
+      className="block w-full overflow-hidden text-left text-ellipsis whitespace-nowrap"
    >
      {content}
    </button>
--- a/libs/markets/src/lib/components/markets-container/markets-container.spec.tsx
+++ b/libs/markets/src/lib/components/markets-container/markets-container.spec.tsx
@ -83,8 +83,9 @@ describe('MarketsContainer', () => {
    await userEvent.click(
      screen.getByRole('button', {
        name: (_name, element) =>
-          (element.parentNode as Element)?.getAttribute('id') ===
-          'cell-market-actions-9',
+          (element.parentNode as Element)
+            ?.getAttribute('id')
+            ?.startsWith('cell-market-actions-') || false,
      })
    );

@ -126,36 +127,6 @@ describe('MarketsContainer', () => {
    }
  });

-  it('SuccessorMarketRenderer should be rendered', async () => {
-    const successorMarketName = 'Successor Market Name';
-    const spySuccessorMarketRenderer = jest
-      .fn()
-      .mockReturnValue(successorMarketName);
-
-    render(
-      <MockedProvider>
-        <MarketsContainer
-          onSelect={spyOnSelect}
-          SuccessorMarketRenderer={spySuccessorMarketRenderer}
-        />
-      </MockedProvider>
-    );
-
-    expect(spySuccessorMarketRenderer).toHaveBeenCalled();
-    expect(
-      screen.getByRole('columnheader', {
-        name: (_name, element) =>
-          element.getAttribute('col-id') === 'successorMarketID',
-      })
-    ).toBeInTheDocument();
-    expect(
-      screen.getByRole('presentation', {
-        name: (_name, element) =>
-          element.getAttribute('id') === 'cell-successorMarketID-14',
-      })
-    ).toHaveTextContent(successorMarketName);
-  });
-
  it('feature flag should hide successorMarketID column', async () => {
    const mockedFlags = jest.mocked(FLAGS);
    mockedFlags.SUCCESSOR_MARKETS = false;
--- a/libs/markets/src/lib/components/markets-container/markets-container.tsx
+++ b/libs/markets/src/lib/components/markets-container/markets-container.tsx
@ -4,8 +4,10 @@ import type { CellClickedEvent } from 'ag-grid-community';
 import { t } from '@vegaprotocol/i18n';
 import { MarketListTable } from './market-list-table';
 import { useDataProvider } from '@vegaprotocol/data-provider';
-import { marketsWithDataProvider as dataProvider } from '../../markets-provider';
+import { marketListProvider as dataProvider } from '../../markets-provider';
 import type { MarketMaybeWithData } from '../../markets-provider';
+import { useYesterday } from '@vegaprotocol/react-helpers';
+import { Interval } from '@vegaprotocol/types';

 const POLLING_TIME = 2000;
 interface MarketsContainerProps {
@ -17,9 +19,13 @@ export const MarketsContainer = ({
  onSelect,
  SuccessorMarketRenderer,
 }: MarketsContainerProps) => {
+  const yesterday = useYesterday();
  const { data, error, reload } = useDataProvider({
    dataProvider,
-    variables: undefined,
+    variables: {
+      since: new Date(yesterday).toISOString(),
+      interval: Interval.INTERVAL_I1H,
+    },
  });

  useEffect(() => {
--- a/libs/markets/src/lib/components/markets-container/use-column-defs.tsx
+++ b/libs/markets/src/lib/components/markets-container/use-column-defs.tsx
@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import type { ColDef } from 'ag-grid-community';
+import type { ColDef, ValueFormatterParams } from 'ag-grid-community';
 import compact from 'lodash/compact';
 import { t } from '@vegaprotocol/i18n';
 import type {
@ -10,11 +10,14 @@ import type {
 import { COL_DEFS, SetFilter } from '@vegaprotocol/datagrid';
 import * as Schema from '@vegaprotocol/types';
 import { addDecimalsFormatNumber, toBigNum } from '@vegaprotocol/utils';
-import { ButtonLink } from '@vegaprotocol/ui-toolkit';
+import { ButtonLink, Tooltip } from '@vegaprotocol/ui-toolkit';
 import { useAssetDetailsDialogStore } from '@vegaprotocol/assets';
-import { FLAGS } from '@vegaprotocol/environment';
-import type { MarketMaybeWithData } from '../../markets-provider';
+import type {
+  MarketMaybeWithData,
+  MarketMaybeWithDataAndCandles,
+} from '../../markets-provider';
 import { MarketActionsDropdown } from './market-table-actions';
+import { calcCandleVolume } from '../../market-utils';

 interface Props {
  onMarketClick: (marketId: string, metaKey?: boolean) => void;
@ -32,26 +35,42 @@ export const useColumnDefs = ({ onMarketClick }: Props) => {
          field: 'tradableInstrument.instrument.code',
          cellRenderer: 'MarketName',
          cellRendererParams: { onMarketClick },
+          flex: 2,
        },
        {
          headerName: t('Description'),
          field: 'tradableInstrument.instrument.name',
+          flex: 2,
        },
        {
          headerName: t('Trading mode'),
          field: 'tradingMode',
-          valueFormatter: ({
+          cellRenderer: ({
            data,
-          }: VegaValueFormatterParams<MarketMaybeWithData, 'data'>) => {
+          }: VegaICellRendererParams<MarketMaybeWithData, 'data'>) => {
            if (!data?.data) return '-';
            const { trigger, marketTradingMode } = data.data;
-            return marketTradingMode ===
-              MarketTradingMode.TRADING_MODE_MONITORING_AUCTION &&
+
+            const withTriggerInfo =
+              marketTradingMode ===
+                MarketTradingMode.TRADING_MODE_MONITORING_AUCTION &&
              trigger &&
-              trigger !== AuctionTrigger.AUCTION_TRIGGER_UNSPECIFIED
-              ? `${Schema.MarketTradingModeMapping[marketTradingMode]}
-            - ${Schema.AuctionTriggerMapping[trigger]}`
-              : Schema.MarketTradingModeMapping[marketTradingMode];
+              trigger !== AuctionTrigger.AUCTION_TRIGGER_UNSPECIFIED;
+
+            if (withTriggerInfo) {
+              return (
+                <Tooltip
+                  description={`${Schema.MarketTradingModeMapping[marketTradingMode]}
+                - ${Schema.AuctionTriggerMapping[trigger]}`}
+                >
+                  <span>
+                    {Schema.MarketTradingModeMapping[marketTradingMode]}
+                  </span>
+                </Tooltip>
+              );
+            }
+
+            return Schema.MarketTradingModeMapping[marketTradingMode];
          },
          filter: SetFilter,
          filterParams: {
@ -71,69 +90,6 @@ export const useColumnDefs = ({ onMarketClick }: Props) => {
            set: Schema.MarketStateMapping,
          },
        },
-        FLAGS.SUCCESSOR_MARKETS && {
-          headerName: t('Successor market'),
-          field: 'successorMarketID',
-          cellRenderer: 'SuccessorMarketRenderer',
-        },
-        {
-          headerName: t('Best bid'),
-          field: 'data.bestBidPrice',
-          type: 'rightAligned',
-          cellRenderer: 'PriceFlashCell',
-          filter: 'agNumberColumnFilter',
-          valueGetter: ({
-            data,
-          }: VegaValueGetterParams<MarketMaybeWithData>) => {
-            return data?.data?.bestBidPrice === undefined
-              ? undefined
-              : toBigNum(
-                  data?.data?.bestBidPrice,
-                  data.decimalPlaces
-                ).toNumber();
-          },
-          valueFormatter: ({
-            data,
-          }: VegaValueFormatterParams<
-            MarketMaybeWithData,
-            'data.bestBidPrice'
-          >) =>
-            data?.data?.bestBidPrice === undefined
-              ? '-'
-              : addDecimalsFormatNumber(
-                  data.data.bestBidPrice,
-                  data.decimalPlaces
-                ),
-        },
-        {
-          headerName: t('Best offer'),
-          field: 'data.bestOfferPrice',
-          type: 'rightAligned',
-          cellRenderer: 'PriceFlashCell',
-          filter: 'agNumberColumnFilter',
-          valueGetter: ({
-            data,
-          }: VegaValueGetterParams<MarketMaybeWithData>) => {
-            return data?.data?.bestOfferPrice === undefined
-              ? undefined
-              : toBigNum(
-                  data?.data?.bestOfferPrice,
-                  data.decimalPlaces
-                ).toNumber();
-          },
-          valueFormatter: ({
-            data,
-          }: VegaValueFormatterParams<
-            MarketMaybeWithData,
-            'data.bestOfferPrice'
-          >) =>
-            data?.data?.bestOfferPrice === undefined
-              ? '-'
-              : addDecimalsFormatNumber(
-                  data.data.bestOfferPrice,
-                  data.decimalPlaces
-                ),
-        },
        {
          headerName: t('Mark price'),
          field: 'data.markPrice',
@ -157,6 +113,33 @@ export const useColumnDefs = ({ onMarketClick }: Props) => {
                  data.decimalPlaces
                ),
        },
+        {
+          headerName: t('24h volume'),
+          type: 'rightAligned',
+          field: 'data.candles',
+          valueGetter: ({
+            data,
+          }: VegaValueGetterParams<MarketMaybeWithDataAndCandles>) => {
+            if (!data) return 0;
+            const candles = data?.candles;
+            const vol = candles ? calcCandleVolume(candles) : '0';
+            return Number(vol);
+          },
+          valueFormatter: ({
+            data,
+          }: ValueFormatterParams<
+            MarketMaybeWithDataAndCandles,
+            'candles'
+          >) => {
+            const candles = data?.candles;
+            const vol = candles ? calcCandleVolume(candles) : '0';
+            const volume =
+              data && vol && vol !== '0'
+                ? addDecimalsFormatNumber(vol, data.positionDecimalPlaces)
+                : '0.00';
+            return volume;
+          },
+        },
        {
          headerName: t('Settlement asset'),
          field: 'tradableInstrument.instrument.product.settlementAsset.symbol',
@ -181,6 +164,49 @@ export const useColumnDefs = ({ onMarketClick }: Props) => {
            );
          },
        },
+        {
+          headerName: t('Spread'),
+          field: 'data.bestBidPrice',
+          type: 'rightAligned',
+          filter: 'agNumberColumnFilter',
+          cellRenderer: 'PriceFlashCell',
+          valueGetter: ({
+            data,
+          }: VegaValueGetterParams<MarketMaybeWithData>) => {
+            if (
+              !data ||
+              !data.data?.bestOfferPrice ||
+              !data.data?.bestBidPrice
+            ) {
+              return undefined;
+            }
+
+            const offer = toBigNum(
+              data.data.bestOfferPrice,
+              data.decimalPlaces
+            );
+            const bid = toBigNum(data.data.bestBidPrice, data.decimalPlaces);
+
+            const spread = offer.minus(bid).toNumber();
+
+            // The calculation above can result in '-0' being rendered after formatting
+            // so return Math.abs to remove it and just render '0'
+            if (spread === 0) {
+              return Math.abs(spread);
+            }
+
+            return spread;
+          },
+          valueFormatter: ({
+            value,
+          }: VegaValueFormatterParams<
+            MarketMaybeWithData,
+            'data.bestBidPrice'
+          >) => {
+            if (!value) return '-';
+            return value.toString();
+          },
+        },
        {
          colId: 'market-actions',
          field: 'id',