From 087e2fed03d39cbaddf8fec8921afe716935051b Mon Sep 17 00:00:00 2001 From: madalinaraicu Date: Fri, 15 Jul 2022 16:18:13 +0200 Subject: [PATCH] fix: format market list --- apps/trading/pages/markets/trade-grid.tsx | 10 +++++----- .../__generated__/MarketDataFields.ts | 6 +++++- .../__generated__/MarketDataSub.ts | 6 +++++- .../__generated__/Markets.ts | 6 +++++- .../markets-container/market-list-table.tsx | 20 +++++++++++++------ .../markets-data-provider.ts | 1 + libs/react-helpers/src/lib/format/utils.ts | 6 ++++++ 7 files changed, 41 insertions(+), 14 deletions(-) diff --git a/apps/trading/pages/markets/trade-grid.tsx b/apps/trading/pages/markets/trade-grid.tsx index bef8d85d6..01247c28c 100644 --- a/apps/trading/pages/markets/trade-grid.tsx +++ b/apps/trading/pages/markets/trade-grid.tsx @@ -11,7 +11,11 @@ import { TradesContainer } from '@vegaprotocol/trades'; import { PositionsContainer } from '@vegaprotocol/positions'; import { OrderbookContainer } from '@vegaprotocol/market-depth'; import type { Market_market } from './__generated__/Market'; -import { addDecimalsFormatNumber, t } from '@vegaprotocol/react-helpers'; +import { + addDecimalsFormatNumber, + formatLabel, + t, +} from '@vegaprotocol/react-helpers'; import { AccountsContainer } from '@vegaprotocol/accounts'; import { DepthChartContainer } from '@vegaprotocol/market-depth'; import { CandlesChartContainer } from '@vegaprotocol/candles-chart'; @@ -25,8 +29,6 @@ import { import type { CandleClose } from '@vegaprotocol/types'; import { AuctionTrigger } from '@vegaprotocol/types'; import { MarketTradingMode } from '@vegaprotocol/types'; -import capitalize from 'lodash/capitalize'; -import startCase from 'lodash/startCase'; const TradingViews = { Candles: CandlesChartContainer, @@ -47,8 +49,6 @@ interface TradeMarketHeaderProps { className?: string; } -const formatLabel = (str: string) => capitalize(startCase(str).toLowerCase()); - export const TradeMarketHeader = ({ market, className, diff --git a/libs/market-list/src/lib/components/markets-container/__generated__/MarketDataFields.ts b/libs/market-list/src/lib/components/markets-container/__generated__/MarketDataFields.ts index 16906d33b..d8a5b01dc 100644 --- a/libs/market-list/src/lib/components/markets-container/__generated__/MarketDataFields.ts +++ b/libs/market-list/src/lib/components/markets-container/__generated__/MarketDataFields.ts @@ -3,7 +3,7 @@ // @generated // This file was automatically generated and should not be edited. -import { MarketState, MarketTradingMode } from "@vegaprotocol/types"; +import { MarketState, MarketTradingMode, AuctionTrigger } from "@vegaprotocol/types"; // ==================================================== // GraphQL fragment: MarketDataFields @@ -43,4 +43,8 @@ export interface MarketDataFields { * the mark price (actually an unsigned int) */ markPrice: string; + /** + * what triggered an auction (if an auction was started) + */ + trigger: AuctionTrigger; } diff --git a/libs/market-list/src/lib/components/markets-container/__generated__/MarketDataSub.ts b/libs/market-list/src/lib/components/markets-container/__generated__/MarketDataSub.ts index a74ce2159..24f3090bb 100644 --- a/libs/market-list/src/lib/components/markets-container/__generated__/MarketDataSub.ts +++ b/libs/market-list/src/lib/components/markets-container/__generated__/MarketDataSub.ts @@ -3,7 +3,7 @@ // @generated // This file was automatically generated and should not be edited. -import { MarketState, MarketTradingMode } from "@vegaprotocol/types"; +import { MarketState, MarketTradingMode, AuctionTrigger } from "@vegaprotocol/types"; // ==================================================== // GraphQL subscription operation: MarketDataSub @@ -43,6 +43,10 @@ export interface MarketDataSub_marketData { * the mark price (actually an unsigned int) */ markPrice: string; + /** + * what triggered an auction (if an auction was started) + */ + trigger: AuctionTrigger; } export interface MarketDataSub { diff --git a/libs/market-list/src/lib/components/markets-container/__generated__/Markets.ts b/libs/market-list/src/lib/components/markets-container/__generated__/Markets.ts index 37cc01771..4d53f88e7 100644 --- a/libs/market-list/src/lib/components/markets-container/__generated__/Markets.ts +++ b/libs/market-list/src/lib/components/markets-container/__generated__/Markets.ts @@ -3,7 +3,7 @@ // @generated // This file was automatically generated and should not be edited. -import { MarketState, MarketTradingMode } from "@vegaprotocol/types"; +import { MarketState, MarketTradingMode, AuctionTrigger } from "@vegaprotocol/types"; // ==================================================== // GraphQL query operation: Markets @@ -43,6 +43,10 @@ export interface Markets_markets_data { * the mark price (actually an unsigned int) */ markPrice: string; + /** + * what triggered an auction (if an auction was started) + */ + trigger: AuctionTrigger; } export interface Markets_markets_tradableInstrument_instrument_product_settlementAsset { 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 e866397dc..45cd91a7d 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 @@ -4,11 +4,13 @@ import { PriceFlashCell, addDecimalsFormatNumber, t, + formatLabel, } from '@vegaprotocol/react-helpers'; import { AgGridDynamic as AgGrid } from '@vegaprotocol/ui-toolkit'; import { AgGridColumn } from 'ag-grid-react'; import type { AgGridReact } from 'ag-grid-react'; import type { Markets_markets } from '../__generated__/Markets'; +import { MarketTradingMode, AuctionTrigger } from '@vegaprotocol/types'; interface MarketListTableProps { datasource: IDatasource; @@ -44,13 +46,19 @@ export const MarketListTable = forwardRef( field="tradableInstrument.instrument.product.settlementAsset.symbol" /> - value === undefined - ? value - : `${value.market.state} (${value.market.tradingMode})` - } + minWidth={200} + valueFormatter={({ value }: ValueFormatterParams) => { + if (!value) return value; + const { market, trigger } = value; + return market && + market.tradingMode === MarketTradingMode.MonitoringAuction && + trigger && + trigger !== AuctionTrigger.Unspecified + ? `${formatLabel(market.tradingMode)} - ${trigger.toLowerCase()}` + : formatLabel(market?.tradingMode); + }} /> 'default'; export const splitAt = (index: number) => (x: string) => [x.slice(0, index), x.slice(index)]; + +export const formatLabel = (str: string) => + capitalize(startCase(str).toLowerCase());