fix: format market list

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,

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;
 }

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 {

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 {

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<AgGridReact, MarketListTableProps>(
           field="tradableInstrument.instrument.product.settlementAsset.symbol"
         />
         <AgGridColumn
-          headerName={t('State')}
+          headerName={t('Trading mode')}
           field="data"
-          valueFormatter={({ value }: ValueFormatterParams) =>
-            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);
+          }}
         />
         <AgGridColumn
           headerName={t('Best bid')}

libs/market-list/src/lib/components/markets-container/markets-data-provider.ts

@@ -21,6 +21,7 @@ const MARKET_DATA_FRAGMENT = gql`
     bestBidPrice
     bestOfferPrice
     markPrice
+    trigger
   }
 `;
 

libs/react-helpers/src/lib/format/utils.ts

@@ -1,4 +1,10 @@
+import capitalize from 'lodash/capitalize';
+import startCase from 'lodash/startCase';
+
 export const getUserLocale = () => 'default';
 
 export const splitAt = (index: number) => (x: string) =>
   [x.slice(0, index), x.slice(index)];
+
+export const formatLabel = (str: string) =>
+  capitalize(startCase(str).toLowerCase());