From 75044fa5208c3a1fe0878a25685aee23d2f21b74 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bart=C5=82omiej=20G=C5=82ownia?= Date: Thu, 1 Sep 2022 18:03:42 +0200 Subject: [PATCH] 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 | 35 +--- .../trading-e2e/src/integration/markets.cy.ts | 4 +- .../src/support/mocks/generate-market-list.ts | 152 ------------------ .../src/support/mocks/generate-markets.ts | 20 ++- .../pages/__generated__/MarketsLanding.ts | 45 ------ .../markets-container/market-list-table.tsx | 85 +++++----- 6 files changed, 69 insertions(+), 272 deletions(-) delete mode 100644 apps/trading-e2e/src/support/mocks/generate-market-list.ts delete mode 100644 apps/trading/pages/__generated__/MarketsLanding.ts diff --git a/apps/trading-e2e/src/integration/home.cy.ts b/apps/trading-e2e/src/integration/home.cy.ts index 4ddf2fe32..6cf9ec8c4 100644 --- a/apps/trading-e2e/src/integration/home.cy.ts +++ b/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', marketList); + aliasQuery(req, 'MarketList', generateMarkets()); // 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( - req, - 'MarketsLanding', - generateMarketList({ - markets: [ - { - marketTimestamps: { - __typename: 'MarketTimestamps', - open: '', - }, - }, - { - marketTimestamps: { - __typename: 'MarketTimestamps', - open: '', - }, - }, - ], - }) - ); - aliasQuery(req, 'Markets', generateMarkets()); + aliasQuery(req, 'MarketList', { markets: [] }); // 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'); }); }); }); diff --git a/apps/trading-e2e/src/integration/markets.cy.ts b/apps/trading-e2e/src/integration/markets.cy.ts index a7b34b968..010e3347e 100644 --- a/apps/trading-e2e/src/integration/markets.cy.ts +++ b/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()); }); }); diff --git a/apps/trading-e2e/src/support/mocks/generate-market-list.ts b/apps/trading-e2e/src/support/mocks/generate-market-list.ts deleted file mode 100644 index 7801ad9e8..000000000 --- a/apps/trading-e2e/src/support/mocks/generate-market-list.ts +++ /dev/null @@ -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 => { - 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); -}; diff --git a/apps/trading-e2e/src/support/mocks/generate-markets.ts b/apps/trading-e2e/src/support/mocks/generate-markets.ts index 2797c92f5..5b6767785 100644 --- a/apps/trading-e2e/src/support/mocks/generate-markets.ts +++ b/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: { diff --git a/apps/trading/pages/__generated__/MarketsLanding.ts b/apps/trading/pages/__generated__/MarketsLanding.ts deleted file mode 100644 index edc7cb8fe..000000000 --- a/apps/trading/pages/__generated__/MarketsLanding.ts +++ /dev/null @@ -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; -} diff --git a/libs/market-list/src/lib/components/markets-container/market-list-table.tsx b/libs/market-list/src/lib/components/markets-container/market-list-table.tsx index 9f525c903..fd4ef1c38 100644 --- a/libs/market-list/src/lib/components/markets-container/market-list-table.tsx +++ b/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 { - MarketList_markets, - MarketList_markets_data, -} from '../../__generated__'; +import type { MarketList_markets } from '../../__generated__'; import { useAssetDetailsDialogStore } from '@vegaprotocol/assets'; type Props = AgGridReactProps | AgReactUiProps; @@ -52,6 +50,7 @@ export const MarketListTable = forwardRef((props, ref) => { resizable: true, sortable: true, filter: true, + filterParams: { buttons: ['reset'] }, }} suppressCellFocus={true} components={{ PriceFlashCell }} @@ -84,13 +83,9 @@ export const MarketListTable = forwardRef((props, ref) => { headerName={t('Trading mode')} field="data" minWidth={170} - valueFormatter={({ - value, - }: MarketListTableValueFormatterParams & { - value?: MarketList_markets_data; - }) => { - if (!value) return value; - const { market, trigger } = value; + valueGetter={({ data }: { data?: MarketList_markets }) => { + if (!data?.data) return undefined; + const { market, trigger } = data.data; return market && market.tradingMode === MarketTradingMode.TRADING_MODE_MONITORING_AUCTION && @@ -106,47 +101,59 @@ export const MarketListTable = forwardRef((props, ref) => { field="data.bestBidPrice" type="rightAligned" cellRenderer="PriceFlashCell" - valueFormatter={({ - value, - data, - }: MarketListTableValueFormatterParams & { - value?: MarketList_markets_data['bestBidPrice']; - }) => - value === undefined - ? value - : addDecimalsFormatNumber(value, data.decimalPlaces) + filter="agNumberColumnFilter" + valueGetter={({ data }: { data?: MarketList_markets }) => { + return data?.data?.bestBidPrice === undefined + ? undefined + : toBigNum(data?.data?.bestBidPrice, data.decimalPlaces).toNumber(); + }} + valueFormatter={({ data }: MarketListTableValueFormatterParams) => + data?.data?.bestBidPrice === undefined + ? undefined + : addDecimalsFormatNumber( + data.data.bestBidPrice, + data.decimalPlaces + ) } /> - 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 + ) + } /> - value === undefined - ? value - : addDecimalsFormatNumber(value, data.decimalPlaces) + filter="agNumberColumnFilter" + valueGetter={({ data }: { data?: MarketList_markets }) => { + return data?.data?.markPrice === undefined + ? undefined + : toBigNum(data?.data?.markPrice, data.decimalPlaces).toNumber(); + }} + valueFormatter={({ data }: MarketListTableValueFormatterParams) => + data?.data?.bestOfferPrice === undefined + ? undefined + : addDecimalsFormatNumber(data.data.markPrice, data.decimalPlaces) } />