feat(trading): display empty values for funding and countdown if perp market is in auction (#4987)

apps/trading/client-pages/market/market-header-stats.tsx

@@ -15,9 +15,11 @@ import {
   Last24hVolume,
   getAsset,
   getDataSourceSpecForSettlementSchedule,
+  isMarketInAuction,
   marketInfoProvider,
   useFundingPeriodsQuery,
   useFundingRate,
+  useMarketTradingMode,
   useExternalTwap,
 } from '@vegaprotocol/markets';
 import { MarketState as State } from '@vegaprotocol/types';
@@ -187,9 +189,11 @@ const useNow = () => {
 };
 
 const useEvery = (marketId: string) => {
+  const { data: marketTradingMode } = useMarketTradingMode(marketId);
   const { data: marketInfo } = useDataProvider({
     dataProvider: marketInfoProvider,
     variables: { marketId },
+    skip: !marketTradingMode || isMarketInAuction(marketTradingMode),
   });
   let every: number | undefined = undefined;
   const sourceType =

libs/markets/src/lib/market-data-provider.ts

@@ -16,6 +16,7 @@ import type {
   MarketDataQueryVariables,
 } from './__generated__/market-data';
 import { getMarketPrice } from './get-price';
+import { isMarketInAuction } from './is-market-in-auction';
 
 export type MarketData = MarketDataFieldsFragment;
 
@@ -115,14 +116,25 @@ export const staticMarketDataProvider = makeDerivedDataProvider<
   });
 });
 
+export const marketTradingModeProvider = makeDerivedDataProvider<
+  MarketDataFieldsFragment['marketTradingMode'] | undefined,
+  never,
+  MarketDataQueryVariables
+>(
+  [marketDataProvider],
+  (parts, variables, prevData) =>
+    (parts[0] as ReturnType<typeof getData>)?.marketTradingMode
+);
+
 export const fundingRateProvider = makeDerivedDataProvider<
   string,
   never,
   MarketDataQueryVariables
 >([marketDataProvider], (parts) => {
-  return (
+  const marketData = parts[0] as ReturnType<typeof getData>;
-    (parts[0] as ReturnType<typeof getData>)?.productData?.fundingRate || null
+  return marketData && !isMarketInAuction(marketData.marketTradingMode)
-  );
+    ? marketData?.productData?.fundingRate || null
+    : null;
 });
 
 export const useFundingRate = (marketId?: string, skip?: boolean) =>
@@ -156,3 +168,11 @@ export const useStaticMarketData = (marketId?: string, skip?: boolean) => {
     skip: skip || !marketId,
   });
 };
+
+export const useMarketTradingMode = (marketId?: string, skip?: boolean) => {
+  return useDataProvider({
+    dataProvider: marketTradingModeProvider,
+    variables: { marketId: marketId || '' },
+    skip: skip || !marketId,
+  });
+};