Market page test refactor (#1741)

* fix: markets fixed test with new mock

* test: market summary tests refactored

* fix: fix undefined row.price issue

* chore: comments adressed

Co-authored-by: Madalina Raicu <madalina@raygroup.uk>

apps/trading-e2e/cypress.config.js

@@ -54,6 +54,8 @@ module.exports = defineConfig({
     TRADING_TEST_VEGA_WALLET_PASSPHRASE: '123',
     ETH_WALLET_MNEMONIC:
       'ugly gallery notice network true range brave clarify flat logic someone chunk',
+    TRADING_MODE_LINK:
+      'https://docs.vega.xyz/docs/testnet/concepts/trading-on-vega/trading-modes#auction-type-liquidity-monitoring',
     grepTags: '@regression @smoke @slow',
     grepFilterSpecs: true,
     grepOmitFiltered: true,

apps/trading-e2e/src/integration/market-summary.cy.ts

@@ -0,0 +1,160 @@
+import {
+  AuctionTrigger,
+  MarketState,
+  MarketTradingMode,
+} from '@vegaprotocol/types';
+import { mockTradingPage } from '../support/trading';
+
+const marketSummaryBlock = 'header-summary';
+const marketExpiry = 'market-expiry';
+const marketPrice = 'market-price';
+const marketChange = 'market-change';
+const marketVolume = 'market-volume';
+const marketMode = 'market-trading-mode';
+const marketSettlement = 'market-settlement-asset';
+const percentageValue = 'price-change-percentage';
+const priceChangeValue = 'price-change';
+const itemHeader = 'item-header';
+const itemValue = 'item-value';
+
+describe('Market trading page', () => {
+  before(() => {
+    cy.mockGQL((req) => {
+      mockTradingPage(
+        req,
+        MarketState.STATE_ACTIVE,
+        MarketTradingMode.TRADING_MODE_MONITORING_AUCTION,
+        AuctionTrigger.AUCTION_TRIGGER_LIQUIDITY
+      );
+    });
+    cy.mockGQLSubscription();
+    cy.visit('/markets/market-0');
+    cy.wait('@MarketData');
+    cy.getByTestId(marketSummaryBlock).should('be.visible');
+  });
+
+  describe('Market summary', { tags: '@smoke' }, () => {
+    // 7002-SORD-001
+    // 7002-SORD-002
+    it('must display market name', () => {
+      cy.getByTestId('popover-trigger').should('not.be.empty');
+    });
+
+    it('must see market expiry', () => {
+      cy.getByTestId(marketSummaryBlock).within(() => {
+        cy.getByTestId(marketExpiry).within(() => {
+          cy.getByTestId(itemHeader).should('have.text', 'Expiry');
+          cy.getByTestId(itemValue).should('not.be.empty');
+        });
+      });
+    });
+
+    it('must see market price', () => {
+      cy.getByTestId(marketSummaryBlock).within(() => {
+        cy.getByTestId(marketPrice).within(() => {
+          cy.getByTestId(itemHeader).should('have.text', 'Price');
+          cy.getByTestId(itemValue).should('not.be.empty');
+        });
+      });
+    });
+
+    it('must see market change', () => {
+      cy.getByTestId(marketSummaryBlock).within(() => {
+        cy.getByTestId(marketChange).within(() => {
+          cy.getByTestId(itemHeader).should('have.text', 'Change (24h)');
+          cy.getByTestId(percentageValue).should('not.be.empty');
+          cy.getByTestId(priceChangeValue).should('not.be.empty');
+        });
+      });
+    });
+
+    it('must see market volume', () => {
+      cy.getByTestId(marketSummaryBlock).within(() => {
+        cy.getByTestId(marketVolume).within(() => {
+          cy.getByTestId(itemHeader).should('have.text', 'Volume');
+          cy.getByTestId(itemValue).should('not.be.empty');
+        });
+      });
+    });
+
+    it('must see market mode', () => {
+      cy.getByTestId(marketSummaryBlock).within(() => {
+        cy.getByTestId(marketMode).within(() => {
+          cy.getByTestId(itemHeader).should('have.text', 'Trading mode');
+          cy.getByTestId(itemValue).should('not.be.empty');
+        });
+      });
+    });
+
+    it('must see market settlement', () => {
+      cy.getByTestId(marketSummaryBlock).within(() => {
+        cy.getByTestId(marketSettlement).within(() => {
+          cy.getByTestId(itemHeader).should('have.text', 'Settlement asset');
+          cy.getByTestId(itemValue).should('not.be.empty');
+        });
+      });
+    });
+  });
+
+  describe('Market tooltips', { tags: '@regression' }, () => {
+    it('should see expiry tooltip', () => {
+      cy.getByTestId(marketSummaryBlock).within(() => {
+        cy.getByTestId(marketExpiry).within(() => {
+          cy.getByTestId(itemValue)
+            .should('have.text', 'Not time-based')
+            .realHover();
+        });
+      });
+      cy.getByTestId('expiry-tool-tip')
+        .should(
+          'contain.text',
+          'This market expires when triggered by its oracle, not on a set date.'
+        )
+        .within(() => {
+          cy.getByTestId('link')
+            .should('have.attr', 'href')
+            .and('include', 'https://explorer.fairground.wtf/');
+        });
+    });
+
+    it('should see trading conditions tooltip', () => {
+      const toolTipLabel = 'tooltip-label';
+      const toolTipValue = 'tooltip-value';
+      const auctionToolTipLabels = [
+        'Auction start',
+        'Est auction end',
+        'Target liquidity',
+        'Current liquidity',
+        'Est uncrossing price',
+        'Est uncrossing vol',
+      ];
+
+      cy.getByTestId(marketSummaryBlock).within(() => {
+        cy.getByTestId(marketMode).within(() => {
+          cy.getByTestId(itemValue)
+            .should('contain.text', 'Monitoring auction')
+            .and('contain.text', 'liquidity')
+            .realHover();
+        });
+      });
+
+      cy.getByTestId('trading-mode-tooltip')
+        .should(
+          'contain.text',
+          'This market is in auction until it reaches sufficient liquidity.'
+        )
+        .within(() => {
+          cy.getByTestId('external-link')
+            .should('have.attr', 'href')
+            .and('include', Cypress.env('TRADING_MODE_LINK'));
+
+          for (let i = 0; i < 6; i++) {
+            cy.getByTestId(toolTipLabel)
+              .eq(i)
+              .should('have.text', auctionToolTipLabels[i]);
+            cy.getByTestId(toolTipValue).eq(i).should('not.be.empty');
+          }
+        });
+    });
+  });
+});

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

@@ -1,20 +1,29 @@
-import { MarketState } from '@vegaprotocol/types';
+import {
+  AuctionTrigger,
+  MarketState,
+  MarketTradingMode,
+} from '@vegaprotocol/types';
 import { mockTradingPage } from '../support/trading';
 
-describe('markets table', { tags: '@regression' }, () => {
+describe('markets table', { tags: '@smoke' }, () => {
   beforeEach(() => {
     cy.mockGQL((req) => {
-      mockTradingPage(req, MarketState.STATE_ACTIVE);
+      mockTradingPage(
+        req,
+        MarketState.STATE_ACTIVE,
+        MarketTradingMode.TRADING_MODE_MONITORING_AUCTION,
+        AuctionTrigger.AUCTION_TRIGGER_LIQUIDITY
+      );
     });
     cy.mockGQLSubscription();
-  });
-
-  it('renders markets correctly', () => {
     cy.visit('/');
     cy.wait('@Market');
     cy.wait('@Markets');
     cy.wait('@MarketsData');
     cy.wait('@MarketsCandles');
+  });
+
+  it('renders markets correctly', () => {
     cy.get('[data-testid^="market-link-"]').should('not.be.empty');
     cy.getByTestId('price').invoke('text').should('not.be.empty');
     cy.getByTestId('settlement-asset').should('not.be.empty');
@@ -24,10 +33,6 @@ describe('markets table', { tags: '@regression' }, () => {
   });
 
   it('renders market list drop down', () => {
-    cy.visit('/');
-    cy.wait('@Markets');
-    cy.wait('@MarketsData');
-    cy.wait('@MarketsCandles');
     openMarketDropDown();
     cy.getByTestId('price').invoke('text').should('not.be.empty');
     cy.getByTestId('trading-mode-col').should('not.be.empty');
@@ -37,20 +42,11 @@ describe('markets table', { tags: '@regression' }, () => {
   });
 
   it('Able to select market from dropdown', () => {
-    // 7002-SORD-001
-    // 7002-SORD-002
-    cy.visit('/');
-    cy.wait('@Markets');
-    cy.wait('@MarketsData');
-    cy.wait('@MarketsCandles');
     openMarketDropDown();
     cy.getByTestId('market-link-market-0').should('be.visible').click();
-
+    cy.contains('ACTIVE MARKET').should('be.visible');
-    cy.wait('@Market');
-    cy.contains('ACTIVE MARKET');
     cy.url().should('include', '/markets/market-0');
     cy.getByTestId('popover-trigger').should('not.be.empty');
-    verifyMarketSummaryDisplayed();
   });
 
   it('Able to open and sort full market list - market page', () => {
@@ -60,10 +56,6 @@ describe('markets table', { tags: '@regression' }, () => {
       'ETHBTC.QM21',
       'SOLUSD',
     ];
-    cy.visit('/');
-    cy.wait('@Markets');
-    cy.wait('@MarketsData');
-    cy.wait('@MarketsCandles');
     cy.getByTestId('link').should('have.attr', 'href', '/markets').click();
     cy.url().should('eq', Cypress.config('baseUrl') + '/markets');
     cy.contains('AAPL.MF21').should('be.visible');
@@ -75,84 +67,9 @@ describe('markets table', { tags: '@regression' }, () => {
     }
   });
 
-  it('Settlement expiry is displayed', () => {
-    cy.visit('/markets/market-0');
-    cy.wait('@Market');
-
-    cy.getByTestId('trading-expiry')
-      .should('have.text', 'Not time-based')
-      .realHover();
-    cy.getByTestId('expiry-tool-tip').should(
-      'contain.text',
-      'This market expires when triggered by its oracle, not on a set date.'
-    );
-    cy.getByTestId('link')
-      .should('have.attr', 'href')
-      .and('include', 'https://explorer.fairground.wtf/');
-  });
-
-  it('Auction conditions are displayed', () => {
-    const toolTipLabel = 'tooltip-label';
-    const toolTipValue = 'tooltip-value';
-    const auctionToolTipLabels = [
-      'Auction start',
-      'Est auction end',
-      'Target liquidity',
-      'Current liquidity',
-      'Est uncrossing price',
-      'Est uncrossing vol',
-    ];
-
-    cy.visit('/markets/market-0');
-    cy.wait('@Market');
-
-    cy.getByTestId('trading-mode').realHover();
-    cy.getByTestId('tooltip-market-info').within(() => {
-      cy.get('span')
-        .eq(0)
-        .should(
-          'contain.text',
-          'This market is in auction until it reaches sufficient liquidity.'
-        );
-      cy.getByTestId('external-link')
-        .should('have.attr', 'href')
-        .and(
-          'include',
-          'https://docs.vega.xyz/docs/testnet/concepts/trading-on-vega/trading-modes#auction-type-liquidity-monitoring'
-        );
-    });
-
-    for (let i = 0; i < 6; i++) {
-      cy.getByTestId(toolTipLabel)
-        .eq(i)
-        .should('have.text', auctionToolTipLabels[i]);
-      cy.getByTestId(toolTipValue).eq(i).should('not.be.empty');
-    }
-  });
-
   function openMarketDropDown() {
     cy.getByTestId('dialog-close').click();
     cy.getByTestId('popover-trigger').click();
     cy.contains('Loading market data...').should('not.exist');
   }
-
-  function verifyMarketSummaryDisplayed() {
-    const marketSummaryBlock = 'header-summary';
-    const percentageValue = 'price-change-percentage';
-    const priceChangeValue = 'price-change';
-    const tradingVolume = 'trading-volume';
-    const tradingMode = 'trading-mode';
-
-    cy.getByTestId(marketSummaryBlock).within(() => {
-      cy.getByTestId('trading-mode').should('not.be.empty');
-      cy.contains('Change (24h)');
-      cy.getByTestId(percentageValue).should('not.be.empty');
-      cy.getByTestId(priceChangeValue).should('not.be.empty');
-      cy.contains('Volume');
-      cy.getByTestId(tradingVolume).should('not.be.empty');
-      cy.contains('Trading mode');
-      cy.getByTestId(tradingMode).should('not.be.empty');
-      cy.getByTestId('mark-price').should('not.be.empty');
-    });
-  }
 });

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

@@ -1,8 +1,15 @@
 import merge from 'lodash/merge';
-import { MarketState, MarketTradingMode } from '@vegaprotocol/types';
+import {
+  AuctionTrigger,
+  MarketState,
+  MarketTradingMode,
+} from '@vegaprotocol/types';
 import type { PartialDeep } from 'type-fest';
-// eslint-disable-next-line @nrwl/nx/enforce-module-boundaries
+import type {
-import type { MarketQuery } from '@vegaprotocol/market-list';
+  MarketData,
+  MarketQuery,
+  MarketsDataQuery,
+} from '@vegaprotocol/market-list';
 
 export const generateMarket = (
   override?: PartialDeep<MarketQuery>
@@ -69,3 +76,50 @@ export const generateMarket = (
 
   return merge(defaultResult, override);
 };
+
+export const generateMarketData = (
+  override?: PartialDeep<MarketData>
+): MarketsDataQuery => {
+  const defaultMarket: MarketData = {
+    __typename: 'MarketData',
+    market: {
+      id: 'market-0',
+      __typename: 'Market',
+    },
+    auctionStart: '2022-06-21T17:18:43.484055236Z',
+    auctionEnd: '2022-06-21T17:18:43.484055236Z',
+    targetStake: '1000000',
+    suppliedStake: '1000',
+    marketTradingMode: MarketTradingMode.TRADING_MODE_CONTINUOUS,
+    staticMidPrice: '0',
+    indicativePrice: '0',
+    bestStaticBidPrice: '0',
+    bestStaticOfferPrice: '0',
+    indicativeVolume: '0',
+    bestBidPrice: '0',
+    bestOfferPrice: '0',
+    markPrice: '4612690058',
+    trigger: AuctionTrigger.AUCTION_TRIGGER_UNSPECIFIED,
+  };
+
+  const marketsConnectionWrapper = (
+    marketData: MarketData
+  ): MarketsDataQuery => {
+    return {
+      marketsConnection: {
+        __typename: 'MarketConnection',
+        edges: [
+          {
+            __typename: 'MarketEdge',
+            node: {
+              __typename: 'Market',
+              data: marketData,
+            },
+          },
+        ],
+      },
+    };
+  };
+
+  return marketsConnectionWrapper(merge(defaultMarket, override));
+};

apps/trading-e2e/src/support/trading.ts

@@ -10,7 +10,7 @@ import { generateAsset, generateAssets } from './mocks/generate-assets';
 import { generateCandles } from './mocks/generate-candles';
 import { generateChart } from './mocks/generate-chart';
 import { generateDealTicketQuery } from './mocks/generate-deal-ticket-query';
-import { generateMarket } from './mocks/generate-market';
+import { generateMarket, generateMarketData } from './mocks/generate-market';
 import { generateMarketDepth } from './mocks/generate-market-depth';
 import { generateMarketInfoQuery } from './mocks/generate-market-info-query';
 import {
@@ -39,11 +39,18 @@ export const mockTradingPage = (
           },
         },
         state: state,
-        tradingMode: tradingMode,
       },
     })
   );
   aliasQuery(req, 'Markets', generateMarkets());
+  aliasQuery(
+    req,
+    'MarketData',
+    generateMarketData({
+      trigger: trigger,
+      marketTradingMode: tradingMode,
+    })
+  );
   aliasQuery(req, 'MarketsData', generateMarketsData());
   aliasQuery(req, 'MarketsCandles', generateMarketsCandles());
 

apps/trading/components/header/header.tsx

@@ -34,21 +34,29 @@ export const HeaderStat = ({
   heading,
   id,
   description,
+  testId,
 }: {
   children: ReactNode;
   heading: string;
   id?: string;
   description?: string | ReactNode;
+  testId?: string;
 }) => {
   const itemClass =
     'min-w-min w-[120px] whitespace-nowrap pb-3 px-4 border-l border-default';
   const itemHeading = 'text-neutral-500 dark:text-neutral-400';
 
   return (
-    <div className={itemClass}>
+    <div data-testid={testId} className={itemClass}>
-      <div id={id}>{heading}</div>
+      <div data-testid="item-header" id={id}>
+        {heading}
+      </div>
       <Tooltip description={description}>
-        <div aria-labelledby={id} className={itemHeading}>
+        <div
+          data-testid="item-value"
+          aria-labelledby={id}
+          className={itemHeading}
+        >
           {children}
         </div>
       </Tooltip>

apps/trading/components/last-24h-price-change/last-24h-price-change.tsx

@@ -71,7 +71,7 @@ export const Last24hPriceChange = ({ marketId }: { marketId: string }) => {
   });
 
   return (
-    <HeaderStat heading={t('Change (24h)')}>
+    <HeaderStat heading={t('Change (24h)')} testId="market-change">
       {!error && data?.decimalPlaces ? (
         <PriceCellChange
           candles={candlesClose}

apps/trading/components/market-mark-price/market-mark-price.tsx

@@ -53,8 +53,8 @@ export const MarketMarkPrice = ({ marketId }: { marketId: string }) => {
   });
 
   return (
-    <HeaderStat heading={t('Price')}>
+    <HeaderStat heading={t('Price')} testId="market-price">
-      <div data-testid="mark-price">{marketPrice}</div>
+      <div>{marketPrice}</div>
     </HeaderStat>
   );
 };

apps/trading/components/market-trading-mode/market-trading-mode.tsx

@@ -75,8 +75,9 @@ export const MarketTradingModeComponent = ({ marketId, onSelect }: Props) => {
           />
         )
       }
+      testId="market-trading-mode"
     >
-      <div data-testid="trading-mode">
+      <div>
         {tradingMode === MarketTradingMode.TRADING_MODE_MONITORING_AUCTION &&
         trigger &&
         trigger !== AuctionTrigger.AUCTION_TRIGGER_UNSPECIFIED

apps/trading/components/market-volume/market-volume.tsx

@@ -57,8 +57,8 @@ export const MarketVolume = ({ marketId }: { marketId: string }) => {
   });
 
   return (
-    <HeaderStat heading={t('Volume')}>
+    <HeaderStat heading={t('Volume')} testId="market-volume">
-      <div data-testid="trading-volume">{marketVolume}</div>
+      <div>{marketVolume}</div>
     </HeaderStat>
   );
 };

apps/trading/pages/markets/trade-grid.tsx

@@ -75,8 +75,8 @@ const ExpiryTooltipContent = ({
         .oracleSpecForTradingTermination?.id;
 
     return (
-      <>
+      <section data-testid="expiry-tool-tip">
-        <p data-testid="expiry-tool-tip" className="mb-2">
+        <p className="mb-2">
           {t(
             'This market expires when triggered by its oracle, not on a set date.'
           )}
@@ -86,7 +86,7 @@ const ExpiryTooltipContent = ({
             {t('View oracle specification')}
           </Link>
         )}
-      </>
+      </section>
     );
   }
 
@@ -132,6 +132,7 @@ export const TradeMarketHeader = ({
             explorerUrl={VEGA_EXPLORER_URL}
           />
         }
+        testId="market-expiry"
       >
         <ExpiryLabel market={market} />
       </HeaderStat>
@@ -140,8 +141,11 @@ export const TradeMarketHeader = ({
       <MarketVolume marketId={market.id} />
       <MarketTradingModeComponent marketId={market.id} onSelect={onSelect} />
       {symbol ? (
-        <HeaderStat heading={t('Settlement asset')}>
+        <HeaderStat
-          <div data-testid="trading-mode">
+          heading={t('Settlement asset')}
+          testId="market-settlement-asset"
+        >
+          <div>
             <ButtonLink
               onClick={(e) => {
                 openAssetDetailsDialog(symbol, e.target as HTMLElement);

libs/deal-ticket/src/components/trading-mode-tooltip/trading-mode-tooltip.tsx

@@ -18,16 +18,16 @@ export const TradingModeTooltip = ({
   switch (tradingMode) {
     case MarketTradingMode.TRADING_MODE_CONTINUOUS: {
       return (
-        <>
+        <section data-testid="trading-mode-tooltip">
           {t(
             'This is the standard trading mode where trades are executed whenever orders are received.'
           )}
-        </>
+        </section>
       );
     }
     case MarketTradingMode.TRADING_MODE_OPENING_AUCTION: {
       return (
-        <>
+        <section data-testid="trading-mode-tooltip">
           <p className="mb-4">
             <span>
               {t(
@@ -39,15 +39,15 @@ export const TradingModeTooltip = ({
             </ExternalLink>
           </p>
           <MarketDataGrid grid={compiledGrid} />
-        </>
+        </section>
       );
     }
     case MarketTradingMode.TRADING_MODE_MONITORING_AUCTION: {
       switch (trigger) {
         case AuctionTrigger.AUCTION_TRIGGER_LIQUIDITY: {
           return (
-            <>
+            <section data-testid="trading-mode-tooltip">
-              <p data-testid="tooltip-market-info" className="mb-4">
+              <p className="mb-4">
                 <span>
                   {t(
                     'This market is in auction until it reaches sufficient liquidity.'
@@ -58,12 +58,12 @@ export const TradingModeTooltip = ({
                 </ExternalLink>
               </p>
               <MarketDataGrid grid={compiledGrid} />
-            </>
+            </section>
           );
         }
         case AuctionTrigger.AUCTION_TRIGGER_PRICE: {
           return (
-            <>
+            <section data-testid="trading-mode-tooltip">
               <p className="mb-4">
                 <span>
                   {t('This market is in auction due to high price volatility.')}
@@ -73,7 +73,7 @@ export const TradingModeTooltip = ({
                 </ExternalLink>
               </p>
               <MarketDataGrid grid={compiledGrid} />
-            </>
+            </section>
           );
         }
         default: {
@@ -82,7 +82,11 @@ export const TradingModeTooltip = ({
       }
     }
     case MarketTradingMode.TRADING_MODE_NO_TRADING: {
-      return <>{t('No trading enabled for this market.')}</>;
+      return (
+        <section data-testid="trading-mode-tooltip">
+          {t('No trading enabled for this market.')}
+        </section>
+      );
     }
     case MarketTradingMode.TRADING_MODE_BATCH_AUCTION:
     default: {

libs/market-depth/src/lib/orderbook.tsx

@@ -306,7 +306,7 @@ export const Orderbook = ({
   const minPriceLevel = (
     fillGaps
       ? BigInt(maxPriceLevel) - BigInt(Math.floor(numberOfRows * resolution))
-      : BigInt(rows?.[rows.length - 1].price ?? '0')
+      : BigInt(rows?.[rows.length - 1]?.price ?? '0')
   ).toString();
   const [debug, setDebug] = useState(false);
   const updateScrollOffset = useCallback(

libs/market-list/src/lib/__generated___/market-data.ts

@@ -12,14 +12,14 @@ export type MarketDataUpdateSubscriptionVariables = Types.Exact<{
 
 export type MarketDataUpdateSubscription = { __typename?: 'Subscription', marketsData: Array<{ __typename?: 'ObservableMarketData', marketId: string, bestBidPrice: string, bestOfferPrice: string, markPrice: string, trigger: Types.AuctionTrigger, staticMidPrice: string, marketTradingMode: Types.MarketTradingMode, indicativeVolume: string, indicativePrice: string, bestStaticBidPrice: string, bestStaticOfferPrice: string }> };
 
-export type MarketDataFieldsFragment = { __typename?: 'MarketData', bestBidPrice: string, bestOfferPrice: string, markPrice: string, trigger: Types.AuctionTrigger, staticMidPrice: string, marketTradingMode: Types.MarketTradingMode, indicativeVolume: string, indicativePrice: string, bestStaticBidPrice: string, bestStaticOfferPrice: string, market: { __typename?: 'Market', id: string } };
+export type MarketDataFieldsFragment = { __typename?: 'MarketData', bestBidPrice: string, bestOfferPrice: string, markPrice: string, trigger: Types.AuctionTrigger, staticMidPrice: string, marketTradingMode: Types.MarketTradingMode, indicativeVolume: string, indicativePrice: string, bestStaticBidPrice: string, bestStaticOfferPrice: string, targetStake?: string | null, suppliedStake?: string | null, auctionStart?: string | null, auctionEnd?: string | null, market: { __typename?: 'Market', id: string } };
 
 export type MarketDataQueryVariables = Types.Exact<{
   marketId: Types.Scalars['ID'];
 }>;
 
 
-export type MarketDataQuery = { __typename?: 'Query', marketsConnection?: { __typename?: 'MarketConnection', edges: Array<{ __typename?: 'MarketEdge', node: { __typename?: 'Market', data?: { __typename?: 'MarketData', bestBidPrice: string, bestOfferPrice: string, markPrice: string, trigger: Types.AuctionTrigger, staticMidPrice: string, marketTradingMode: Types.MarketTradingMode, indicativeVolume: string, indicativePrice: string, bestStaticBidPrice: string, bestStaticOfferPrice: string, market: { __typename?: 'Market', id: string } } | null } }> } | null };
+export type MarketDataQuery = { __typename?: 'Query', marketsConnection?: { __typename?: 'MarketConnection', edges: Array<{ __typename?: 'MarketEdge', node: { __typename?: 'Market', data?: { __typename?: 'MarketData', bestBidPrice: string, bestOfferPrice: string, markPrice: string, trigger: Types.AuctionTrigger, staticMidPrice: string, marketTradingMode: Types.MarketTradingMode, indicativeVolume: string, indicativePrice: string, bestStaticBidPrice: string, bestStaticOfferPrice: string, targetStake?: string | null, suppliedStake?: string | null, auctionStart?: string | null, auctionEnd?: string | null, market: { __typename?: 'Market', id: string } } | null } }> } | null };
 
 export const MarketDataUpdateFieldsFragmentDoc = gql`
     fragment MarketDataUpdateFields on ObservableMarketData {
@@ -51,6 +51,10 @@ export const MarketDataFieldsFragmentDoc = gql`
   indicativePrice
   bestStaticBidPrice
   bestStaticOfferPrice
+  targetStake
+  suppliedStake
+  auctionStart
+  auctionEnd
 }
     `;
 export const MarketDataUpdateDocument = gql`

libs/market-list/src/lib/__generated___/markets-data.ts

@@ -7,7 +7,7 @@ const defaultOptions = {} as const;
 export type MarketsDataQueryVariables = Types.Exact<{ [key: string]: never; }>;
 
 
-export type MarketsDataQuery = { __typename?: 'Query', marketsConnection?: { __typename?: 'MarketConnection', edges: Array<{ __typename?: 'MarketEdge', node: { __typename?: 'Market', data?: { __typename?: 'MarketData', bestBidPrice: string, bestOfferPrice: string, markPrice: string, trigger: Types.AuctionTrigger, staticMidPrice: string, marketTradingMode: Types.MarketTradingMode, indicativeVolume: string, indicativePrice: string, bestStaticBidPrice: string, bestStaticOfferPrice: string, market: { __typename?: 'Market', id: string } } | null } }> } | null };
+export type MarketsDataQuery = { __typename?: 'Query', marketsConnection?: { __typename?: 'MarketConnection', edges: Array<{ __typename?: 'MarketEdge', node: { __typename?: 'Market', data?: { __typename?: 'MarketData', bestBidPrice: string, bestOfferPrice: string, markPrice: string, trigger: Types.AuctionTrigger, staticMidPrice: string, marketTradingMode: Types.MarketTradingMode, indicativeVolume: string, indicativePrice: string, bestStaticBidPrice: string, bestStaticOfferPrice: string, targetStake?: string | null, suppliedStake?: string | null, auctionStart?: string | null, auctionEnd?: string | null, market: { __typename?: 'Market', id: string } } | null } }> } | null };
 
 
 export const MarketsDataDocument = gql`

libs/market-list/src/lib/market-data.graphql

@@ -32,6 +32,10 @@ fragment MarketDataFields on MarketData {
   indicativePrice
   bestStaticBidPrice
   bestStaticOfferPrice
+  targetStake
+  suppliedStake
+  auctionStart
+  auctionEnd
 }
 
 query MarketData($marketId: ID!) {

libs/market-list/src/lib/markets-data.graphql

@@ -12,6 +12,10 @@ fragment MarketDataFields on MarketData {
   indicativePrice
   bestStaticBidPrice
   bestStaticOfferPrice
+  targetStake
+  suppliedStake
+  auctionStart
+  auctionEnd
 }
 
 query MarketsData {