feat(trading): use notional for candle calcs (#6119)

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

@@ -61,8 +61,8 @@ export const MarketHeaderStats = ({ market }: MarketHeaderStatsProps) => {
       <HeaderStat heading={t('Volume (24h)')} testId="market-volume">
         <Last24hVolume
           marketId={market.id}
-          positionDecimalPlaces={market.positionDecimalPlaces}
           marketDecimals={market.decimalPlaces}
+          positionDecimalPlaces={market.positionDecimalPlaces}
           quoteUnit={quoteUnit}
         />
       </HeaderStat>

apps/trading/client-pages/markets/use-column-defs.tsx

@@ -15,7 +15,6 @@ import {
 import { ButtonLink, Tooltip } from '@vegaprotocol/ui-toolkit';
 import { useAssetDetailsDialogStore } from '@vegaprotocol/assets';
 import type {
-  MarketFieldsFragment,
   MarketMaybeWithData,
   MarketMaybeWithDataAndCandles,
 } from '@vegaprotocol/markets';
@@ -166,16 +165,12 @@ export const useMarketsColumnDefs = () => {
         valueFormatter: ({
           data,
         }: ValueFormatterParams<MarketMaybeWithDataAndCandles, 'candles'>) => {
-          const candles = data?.candles;
+          if (!data) return '-';
+          const candles = data.candles;
           const vol = candles ? calcCandleVolume(candles) : '0';
-          const quoteName = getQuoteName(data as MarketFieldsFragment);
+          const quoteName = getQuoteName(data);
           const volPrice =
-            candles &&
+            candles && calcCandleVolumePrice(candles, data.decimalPlaces);
-            calcCandleVolumePrice(
-              candles,
-              data.decimalPlaces,
-              data.positionDecimalPlaces
-            );
 
           const volume =
             data && vol && vol !== '0'

apps/trading/components/market-banner/market-settled-banner.spec.tsx

@@ -115,6 +115,7 @@ describe('MarketSettledBanner', () => {
                         open: '100',
                         close: '100',
                         volume: '100',
+                        notional: '10000',
                         periodStart: subHours(new Date(now), 1).toISOString(),
                       },
                     },
@@ -125,6 +126,7 @@ describe('MarketSettledBanner', () => {
                         open: '100',
                         close: '200',
                         volume: '100',
+                        notional: '10000',
                         periodStart: subHours(new Date(now), 2).toISOString(),
                       },
                     },
@@ -161,6 +163,7 @@ describe('MarketSettledBanner', () => {
           open: '100',
           close: '100',
           volume: '100',
+          notional: '10000',
           periodStart: '2020-01-01T00:00:00',
         },
       },

apps/trading/components/market-selector/market-selector-item.spec.tsx

@@ -79,6 +79,7 @@ describe('MarketSelectorItem', () => {
       high: '5',
       low: '5',
       volume: '50',
+      notional: '10000',
       periodStart: yesterday.toISOString(),
     },
     {
@@ -87,6 +88,7 @@ describe('MarketSelectorItem', () => {
       high: '10',
       low: '10',
       volume: '50',
+      notional: '10000',
       periodStart: yesterday.toISOString(),
     },
   ];

libs/markets/src/lib/__generated__/market-candles.ts

@@ -3,7 +3,7 @@ import * as Types from '@vegaprotocol/types';
 import { gql } from '@apollo/client';
 import * as Apollo from '@apollo/client';
 const defaultOptions = {} as const;
-export type MarketCandlesFieldsFragment = { __typename?: 'Candle', high: string, low: string, open: string, close: string, volume: string, periodStart: any };
+export type MarketCandlesFieldsFragment = { __typename?: 'Candle', high: string, low: string, open: string, close: string, volume: string, notional: string, periodStart: any };
 
 export type MarketCandlesQueryVariables = Types.Exact<{
   interval: Types.Interval;
@@ -12,7 +12,7 @@ export type MarketCandlesQueryVariables = Types.Exact<{
 }>;
 
 
-export type MarketCandlesQuery = { __typename?: 'Query', marketsConnection?: { __typename?: 'MarketConnection', edges: Array<{ __typename?: 'MarketEdge', node: { __typename?: 'Market', candlesConnection?: { __typename?: 'CandleDataConnection', edges?: Array<{ __typename?: 'CandleEdge', node: { __typename?: 'Candle', high: string, low: string, open: string, close: string, volume: string, periodStart: any } } | null> | null } | null } }> } | null };
+export type MarketCandlesQuery = { __typename?: 'Query', marketsConnection?: { __typename?: 'MarketConnection', edges: Array<{ __typename?: 'MarketEdge', node: { __typename?: 'Market', candlesConnection?: { __typename?: 'CandleDataConnection', edges?: Array<{ __typename?: 'CandleEdge', node: { __typename?: 'Candle', high: string, low: string, open: string, close: string, volume: string, notional: string, periodStart: any } } | null> | null } | null } }> } | null };
 
 export type MarketCandlesUpdateSubscriptionVariables = Types.Exact<{
   marketId: Types.Scalars['ID'];
@@ -20,7 +20,7 @@ export type MarketCandlesUpdateSubscriptionVariables = Types.Exact<{
 }>;
 
 
-export type MarketCandlesUpdateSubscription = { __typename?: 'Subscription', candles: { __typename?: 'Candle', high: string, low: string, open: string, close: string, volume: string, periodStart: any } };
+export type MarketCandlesUpdateSubscription = { __typename?: 'Subscription', candles: { __typename?: 'Candle', high: string, low: string, open: string, close: string, volume: string, notional: string, periodStart: any } };
 
 export const MarketCandlesFieldsFragmentDoc = gql`
     fragment MarketCandlesFields on Candle {
@@ -29,6 +29,7 @@ export const MarketCandlesFieldsFragmentDoc = gql`
   open
   close
   volume
+  notional
   periodStart
 }
     `;

libs/markets/src/lib/__generated__/markets-candles.ts

@@ -10,7 +10,7 @@ export type MarketsCandlesQueryVariables = Types.Exact<{
 }>;
 
 
-export type MarketsCandlesQuery = { __typename?: 'Query', marketsConnection?: { __typename?: 'MarketConnection', edges: Array<{ __typename?: 'MarketEdge', node: { __typename?: 'Market', id: string, candlesConnection?: { __typename?: 'CandleDataConnection', edges?: Array<{ __typename?: 'CandleEdge', node: { __typename?: 'Candle', high: string, low: string, open: string, close: string, volume: string, periodStart: any } } | null> | null } | null } }> } | null };
+export type MarketsCandlesQuery = { __typename?: 'Query', marketsConnection?: { __typename?: 'MarketConnection', edges: Array<{ __typename?: 'MarketEdge', node: { __typename?: 'Market', id: string, candlesConnection?: { __typename?: 'CandleDataConnection', edges?: Array<{ __typename?: 'CandleEdge', node: { __typename?: 'Candle', high: string, low: string, open: string, close: string, volume: string, notional: string, periodStart: any } } | null> | null } | null } }> } | null };
 
 
 export const MarketsCandlesDocument = gql`

libs/markets/src/lib/components/last-24h-volume/last-24h-volume.tsx

@@ -13,7 +13,7 @@ interface Props {
   positionDecimalPlaces?: number;
   formatDecimals?: number;
   initialValue?: string;
-  marketDecimals?: number;
+  marketDecimals: number;
   quoteUnit?: string;
 }
 
@@ -41,11 +41,7 @@ export const Last24hVolume = ({
     : initialValue;
 
   const candleVolumePrice = oneDayCandles
-    ? calcCandleVolumePrice(
+    ? calcCandleVolumePrice(oneDayCandles, marketDecimals)
-        oneDayCandles,
-        marketDecimals,
-        positionDecimalPlaces
-      )
     : initialValue;
 
   return (

libs/markets/src/lib/components/market-info/market-info-panels.tsx

@@ -205,8 +205,8 @@ export const MarketVolumeInfoPanel = ({ market }: MarketInfoProps) => {
         '24hourVolume': (
           <Last24hVolume
             marketId={market.id}
-            positionDecimalPlaces={market.positionDecimalPlaces}
             marketDecimals={market.decimalPlaces}
+            positionDecimalPlaces={market.positionDecimalPlaces}
             quoteUnit={getQuoteName(market)}
           />
         ),

libs/markets/src/lib/market-candles-provider.spec.ts

@@ -1,12 +1,15 @@
 import { update } from './market-candles-provider';
 
 describe('market candles provider update', () => {
+  const price = 153350000;
+  const volume = 50;
   const data = [
     {
-      high: '153350000',
+      high: price.toString(),
-      low: '153350000',
+      low: price.toString(),
-      open: '153350000',
+      open: price.toString(),
-      close: '153350000',
+      close: price.toString(),
+      notional: (price * volume).toString(),
       volume: '50',
       periodStart: '2022-11-01T15:49:00Z',
     },

libs/markets/src/lib/market-candles.graphql

@@ -4,6 +4,7 @@ fragment MarketCandlesFields on Candle {
   open
   close
   volume
+  notional
   periodStart
 }
 

libs/markets/src/lib/market-candles.mock.ts

@@ -40,5 +40,6 @@ const marketCandlesFieldsFragment: MarketCandlesFieldsFragment = {
   high: '110',
   low: '90',
   volume: '1',
+  notional: '100',
   periodStart: '2022-11-01T15:49:00Z',
 };

libs/markets/src/lib/market-utils.spec.tsx

@@ -164,6 +164,7 @@ describe('calcCandleVolumePrice', () => {
         low: '10',
         open: '15',
         close: '90',
+        notional: '100',
         periodStart: '2022-05-18T13:08:27.693537312Z',
       },
       {
@@ -172,13 +173,11 @@ describe('calcCandleVolumePrice', () => {
         low: '10',
         open: '15',
         close: '90',
+        notional: '100',
         periodStart: '2022-05-18T14:08:27.693537312Z',
       },
     ];
-    const marketDecimals = 3;
+    const decimalPlaces = 2;
-    const positionDecimalPlaces = 2;
+    expect(calcCandleVolumePrice(candles, decimalPlaces)).toEqual('2');
-    expect(
-      calcCandleVolumePrice(candles, marketDecimals, positionDecimalPlaces)
-    ).toEqual('2');
   });
 });

libs/markets/src/lib/market-utils.ts

@@ -1,8 +1,4 @@
-import {
+import { formatNumberPercentage, toBigNum } from '@vegaprotocol/utils';
-  addDecimal,
-  formatNumberPercentage,
-  toBigNum,
-} from '@vegaprotocol/utils';
 import { MarketState, MarketTradingMode } from '@vegaprotocol/types';
 import BigNumber from 'bignumber.js';
 import orderBy from 'lodash/orderBy';
@@ -182,19 +178,12 @@ export const calcCandleVolume = (candles: Candle[]): string | undefined =>
  */
 export const calcCandleVolumePrice = (
   candles: Candle[],
-  marketDecimals: number = 1,
+  decimalPlaces: number
-  positionDecimalPlaces: number = 1
 ): string | undefined =>
   candles &&
   candles.reduce(
     (acc, c) =>
-      new BigNumber(acc)
+      new BigNumber(acc).plus(toBigNum(c.notional, decimalPlaces)).toString(),
-        .plus(
-          BigNumber(addDecimal(c.volume, positionDecimalPlaces)).times(
-            addDecimal(c.high, marketDecimals)
-          )
-        )
-        .toString(),
     '0'
   );
 

libs/markets/src/lib/markets-candles.mock.ts

@@ -50,6 +50,7 @@ const createCandle = (
     high: '110',
     low: '90',
     volume: '1',
+    notional: '100',
     periodStart: '2022-11-01T15:49:00Z',
   };
   return merge(defaultCandle, override);