Feat/81 market table filters (#1203)

* feat(#81): amend market table filters

* chore: fix home not default found test

apps/trading-e2e/src/integration/home.cy.ts

@@ -1,7 +1,5 @@
 import { aliasQuery } from '@vegaprotocol/cypress';
-import type { MarketList } from '@vegaprotocol/market-list';
 import { MarketState } from '@vegaprotocol/types';
-import { generateMarketList } from '../support/mocks/generate-market-list';
 import { generateMarkets } from '../support/mocks/generate-markets';
 import { mockTradingPage } from '../support/trading';
 
@@ -9,17 +7,10 @@ describe('home', () => {
   const selectMarketOverlay = 'select-market-list';
 
   describe('default market found', () => {
-    let marketsLanding: MarketList;
-    let marketList: MarketList;
-
     beforeEach(() => {
-      marketList = generateMarketList();
-      marketsLanding = marketList;
-
       // Mock markets query that is triggered by home page to find default market
       cy.mockGQL((req) => {
-        aliasQuery(req, 'MarketList', marketsLanding);
+        aliasQuery(req, 'MarketList', generateMarkets());
-        aliasQuery(req, 'MarketList', marketList);
 
         // Mock all market page queries
         mockTradingPage(req, MarketState.STATE_ACTIVE);
@@ -69,34 +60,14 @@ describe('home', () => {
     it('redirects to a the market list page if no sensible default is found', () => {
       // Mock markets query that is triggered by home page to find default market
       cy.mockGQL((req) => {
-        aliasQuery(
+        aliasQuery(req, 'MarketList', { markets: [] });
-          req,
-          'MarketsLanding',
-          generateMarketList({
-            markets: [
-              {
-                marketTimestamps: {
-                  __typename: 'MarketTimestamps',
-                  open: '',
-                },
-              },
-              {
-                marketTimestamps: {
-                  __typename: 'MarketTimestamps',
-                  open: '',
-                },
-              },
-            ],
-          })
-        );
-        aliasQuery(req, 'Markets', generateMarkets());
 
         // Mock all market page queries
         mockTradingPage(req, MarketState.STATE_ACTIVE);
       });
 
       cy.visit('/');
-      cy.url().should('include', '/markets');
+      cy.url().should('eq', Cypress.config().baseUrl + '/markets');
     });
   });
 });

apps/trading-e2e/src/integration/markets.cy.ts

@@ -1,13 +1,13 @@
 import { aliasQuery } from '@vegaprotocol/cypress';
 import { MarketState } from '@vegaprotocol/types';
-import { generateMarketList } from '../support/mocks/generate-market-list';
+import { generateMarkets } from '../support/mocks/generate-markets';
 import { mockTradingPage } from '../support/trading';
 
 describe('markets table', () => {
   beforeEach(() => {
     cy.mockGQL((req) => {
       mockTradingPage(req, MarketState.STATE_ACTIVE);
-      aliasQuery(req, 'MarketList', generateMarketList());
+      aliasQuery(req, 'MarketList', generateMarkets());
     });
   });
 

apps/trading-e2e/src/support/mocks/generate-market-list.ts

@@ -1,152 +0,0 @@
-import merge from 'lodash/merge';
-import type { PartialDeep } from 'type-fest';
-import type { MarketList, MarketList_markets } from '@vegaprotocol/market-list';
-import {
-  AuctionTrigger,
-  MarketState,
-  MarketTradingMode,
-} from '@vegaprotocol/types';
-
-export const generateMarketList = (
-  override?: PartialDeep<MarketList>
-): MarketList => {
-  const markets: MarketList_markets[] = [
-    {
-      id: 'market-0',
-      name: 'BTCUSD Monthly (30 Jun 2022)',
-      decimalPlaces: 5,
-      positionDecimalPlaces: 0,
-      state: MarketState.STATE_ACTIVE,
-      tradingMode: MarketTradingMode.TRADING_MODE_CONTINUOUS,
-      fees: {
-        factors: {
-          makerFee: '0.0002',
-          infrastructureFee: '0.0005',
-          liquidityFee: '0.001',
-          __typename: 'FeeFactors',
-        },
-        __typename: 'Fees',
-      },
-      data: {
-        market: {
-          id: '10cd0a793ad2887b340940337fa6d97a212e0e517fe8e9eab2b5ef3a38633f35',
-          state: MarketState.STATE_ACTIVE,
-          tradingMode: MarketTradingMode.TRADING_MODE_CONTINUOUS,
-          __typename: 'Market',
-        },
-        bestBidPrice: '2411432389',
-        bestOfferPrice: '2346732714',
-        markPrice: '4612690058',
-        trigger: AuctionTrigger.AUCTION_TRIGGER_PRICE,
-        indicativeVolume: '1216',
-        __typename: 'MarketData',
-      },
-      tradableInstrument: {
-        instrument: {
-          id: 'BTCUSD.MF21',
-          name: 'BTC/USD Monthly',
-          code: 'BTCUSD.MF21',
-          metadata: {
-            __typename: 'InstrumentMetadata',
-            tags: ['tag1'],
-          },
-          product: {
-            settlementAsset: {
-              symbol: 'tBTC',
-              __typename: 'Asset',
-            },
-            __typename: 'Future',
-          },
-          __typename: 'Instrument',
-        },
-        __typename: 'TradableInstrument',
-      },
-      marketTimestamps: {
-        __typename: 'MarketTimestamps',
-        open: '2022-08-12T09:57:02.420419276Z',
-        close: '',
-      },
-      candles: [
-        {
-          __typename: 'Candle',
-          open: '100',
-          close: '100',
-          high: '110',
-          low: '90',
-        },
-      ],
-      __typename: 'Market',
-    },
-    {
-      id: 'market-1',
-      name: 'SOL/USD',
-      decimalPlaces: 2,
-      positionDecimalPlaces: 0,
-      state: MarketState.STATE_SUSPENDED,
-      tradingMode: MarketTradingMode.TRADING_MODE_MONITORING_AUCTION,
-      fees: {
-        factors: {
-          makerFee: '0.0002',
-          infrastructureFee: '0.0005',
-          liquidityFee: '0.001',
-          __typename: 'FeeFactors',
-        },
-        __typename: 'Fees',
-      },
-      data: {
-        market: {
-          id: '34d95e10faa00c21d19d382d6d7e6fc9722a96985369f0caec041b0f44b775ed',
-          state: MarketState.STATE_SUSPENDED,
-          tradingMode: MarketTradingMode.TRADING_MODE_MONITORING_AUCTION,
-          __typename: 'Market',
-        },
-        bestBidPrice: '17065127',
-        bestOfferPrice: '17017654',
-        markPrice: '8441',
-        trigger: AuctionTrigger.AUCTION_TRIGGER_LIQUIDITY,
-        indicativeVolume: '249',
-        __typename: 'MarketData',
-      },
-      tradableInstrument: {
-        instrument: {
-          id: 'SOLUSD',
-          name: 'SOL/USD',
-          code: 'SOLUSD',
-          metadata: {
-            __typename: 'InstrumentMetadata',
-            tags: ['tag1'],
-          },
-          product: {
-            settlementAsset: {
-              symbol: 'SOLUSD',
-              __typename: 'Asset',
-            },
-            __typename: 'Future',
-          },
-          __typename: 'Instrument',
-        },
-        __typename: 'TradableInstrument',
-      },
-      marketTimestamps: {
-        __typename: 'MarketTimestamps',
-        open: '',
-        close: '',
-      },
-      candles: [
-        {
-          __typename: 'Candle',
-          open: '100',
-          close: '100',
-          high: '110',
-          low: '90',
-        },
-      ],
-      __typename: 'Market',
-    },
-  ];
-  const defaultResult = {
-    markets,
-  };
-
-  return merge(defaultResult, override);
-};

apps/trading-e2e/src/support/mocks/generate-markets.ts

@@ -23,7 +23,15 @@ export const generateMarkets = (
         close: '',
         open: '',
       },
-      candles: [],
+      candles: [
+        {
+          __typename: 'Candle',
+          open: '100',
+          close: '100',
+          high: '110',
+          low: '90',
+        },
+      ],
       fees: {
         __typename: 'Fees',
         factors: {
@@ -81,7 +89,15 @@ export const generateMarkets = (
         close: '',
         open: '',
       },
-      candles: [],
+      candles: [
+        {
+          __typename: 'Candle',
+          open: '100',
+          close: '100',
+          high: '110',
+          low: '90',
+        },
+      ],
       fees: {
         __typename: 'Fees',
         factors: {

apps/trading/pages/__generated__/MarketsLanding.ts

@@ -1,45 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-// @generated
-// This file was automatically generated and should not be edited.
-
-import { MarketTradingMode, MarketState } from "@vegaprotocol/types";
-
-// ====================================================
-// GraphQL query operation: MarketsLanding
-// ====================================================
-
-export interface MarketsLanding_markets_marketTimestamps {
-  __typename: "MarketTimestamps";
-  /**
-   * Time when the market is open and ready to accept trades
-   */
-  open: string | null;
-}
-
-export interface MarketsLanding_markets {
-  __typename: "Market";
-  /**
-   * Market ID
-   */
-  id: string;
-  /**
-   * Current mode of execution of the market
-   */
-  tradingMode: MarketTradingMode;
-  /**
-   * Current state of the market
-   */
-  state: MarketState;
-  /**
-   * timestamps for state changes in the market
-   */
-  marketTimestamps: MarketsLanding_markets_marketTimestamps;
-}
-
-export interface MarketsLanding {
-  /**
-   * One or more instruments that are trading on the VEGA network
-   */
-  markets: MarketsLanding_markets[] | null;
-}

libs/market-list/src/lib/components/markets-container/market-list-table.tsx

@@ -7,6 +7,7 @@ import {
   PriceFlashCell,
   addDecimalsFormatNumber,
   t,
+  toBigNum,
 } from '@vegaprotocol/react-helpers';
 import { AgGridDynamic as AgGrid } from '@vegaprotocol/ui-toolkit';
 import { AgGridColumn } from 'ag-grid-react';
@@ -21,10 +22,7 @@ import {
   MarketTradingModeMapping,
   AuctionTriggerMapping,
 } from '@vegaprotocol/types';
-import type {
+import type { MarketList_markets } from '../../__generated__';
-  MarketList_markets,
-  MarketList_markets_data,
-} from '../../__generated__';
 import { useAssetDetailsDialogStore } from '@vegaprotocol/assets';
 
 type Props = AgGridReactProps | AgReactUiProps;
@@ -52,6 +50,7 @@ export const MarketListTable = forwardRef<AgGridReact, Props>((props, ref) => {
         resizable: true,
         sortable: true,
         filter: true,
+        filterParams: { buttons: ['reset'] },
       }}
       suppressCellFocus={true}
       components={{ PriceFlashCell }}
@@ -84,13 +83,9 @@ export const MarketListTable = forwardRef<AgGridReact, Props>((props, ref) => {
         headerName={t('Trading mode')}
         field="data"
         minWidth={170}
-        valueFormatter={({
+        valueGetter={({ data }: { data?: MarketList_markets }) => {
-          value,
+          if (!data?.data) return undefined;
-        }: MarketListTableValueFormatterParams & {
+          const { market, trigger } = data.data;
-          value?: MarketList_markets_data;
-        }) => {
-          if (!value) return value;
-          const { market, trigger } = value;
           return market &&
             market.tradingMode ===
               MarketTradingMode.TRADING_MODE_MONITORING_AUCTION &&
@@ -106,47 +101,59 @@ export const MarketListTable = forwardRef<AgGridReact, Props>((props, ref) => {
         field="data.bestBidPrice"
         type="rightAligned"
         cellRenderer="PriceFlashCell"
-        valueFormatter={({
+        filter="agNumberColumnFilter"
-          value,
+        valueGetter={({ data }: { data?: MarketList_markets }) => {
-          data,
+          return data?.data?.bestBidPrice === undefined
-        }: MarketListTableValueFormatterParams & {
+            ? undefined
-          value?: MarketList_markets_data['bestBidPrice'];
+            : toBigNum(data?.data?.bestBidPrice, data.decimalPlaces).toNumber();
-        }) =>
+        }}
-          value === undefined
+        valueFormatter={({ data }: MarketListTableValueFormatterParams) =>
-            ? value
+          data?.data?.bestBidPrice === undefined
-            : addDecimalsFormatNumber(value, data.decimalPlaces)
+            ? undefined
+            : addDecimalsFormatNumber(
+                data.data.bestBidPrice,
+                data.decimalPlaces
+              )
         }
       />
       <AgGridColumn
         headerName={t('Best offer')}
         field="data.bestOfferPrice"
         type="rightAligned"
-        valueFormatter={({
-          value,
-          data,
-        }: MarketListTableValueFormatterParams & {
-          value?: MarketList_markets_data['bestOfferPrice'];
-        }) =>
-          value === undefined
-            ? value
-            : addDecimalsFormatNumber(value, data.decimalPlaces)
-        }
         cellRenderer="PriceFlashCell"
+        filter="agNumberColumnFilter"
+        valueGetter={({ data }: { data?: MarketList_markets }) => {
+          return data?.data?.bestOfferPrice === undefined
+            ? undefined
+            : toBigNum(
+                data?.data?.bestOfferPrice,
+                data.decimalPlaces
+              ).toNumber();
+        }}
+        valueFormatter={({ data }: MarketListTableValueFormatterParams) =>
+          data?.data?.bestOfferPrice === undefined
+            ? undefined
+            : addDecimalsFormatNumber(
+                data.data.bestOfferPrice,
+                data.decimalPlaces
+              )
+        }
       />
       <AgGridColumn
         headerName={t('Mark price')}
         field="data.markPrice"
         type="rightAligned"
         cellRenderer="PriceFlashCell"
-        valueFormatter={({
+        filter="agNumberColumnFilter"
-          value,
+        valueGetter={({ data }: { data?: MarketList_markets }) => {
-          data,
+          return data?.data?.markPrice === undefined
-        }: MarketListTableValueFormatterParams & {
+            ? undefined
-          value?: MarketList_markets_data['markPrice'];
+            : toBigNum(data?.data?.markPrice, data.decimalPlaces).toNumber();
-        }) =>
+        }}
-          value === undefined
+        valueFormatter={({ data }: MarketListTableValueFormatterParams) =>
-            ? value
+          data?.data?.bestOfferPrice === undefined
-            : addDecimalsFormatNumber(value, data.decimalPlaces)
+            ? undefined
+            : addDecimalsFormatNumber(data.data.markPrice, data.decimalPlaces)
         }
       />
       <AgGridColumn headerName={t('Description')} field="name" />