fix(#1740): fix market candles subscription update (#1937)

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

@@ -322,6 +322,7 @@ export const generateMarketsCandles = (
                     high: '110',
                     low: '90',
                     volume: '1',
+                    periodStart: '2022-11-01T15:49:00Z',
                   },
                 },
               ],
@@ -345,6 +346,7 @@ export const generateMarketsCandles = (
                     high: '110',
                     low: '90',
                     volume: '1',
+                    periodStart: '2022-11-01T15:49:00Z',
                   },
                 },
               ],
@@ -368,6 +370,7 @@ export const generateMarketsCandles = (
                     high: '110',
                     low: '90',
                     volume: '1',
+                    periodStart: '2022-11-01T15:49:00Z',
                   },
                 },
               ],
@@ -391,6 +394,7 @@ export const generateMarketsCandles = (
                     high: '110',
                     low: '90',
                     volume: '1',
+                    periodStart: '2022-11-01T15:49:00Z',
                   },
                 },
               ],

apps/trading/components/select-market/select-market.spec.tsx

@@ -79,6 +79,7 @@ const MARKET_A: PartialMarket = {
       open: '10',
       close: '80',
       volume: '1000',
+      periodStart: '2022-11-01T15:49:00Z',
     },
     {
       __typename: 'Candle',
@@ -87,6 +88,7 @@ const MARKET_A: PartialMarket = {
       open: '1',
       close: '100',
       volume: '1000',
+      periodStart: '2022-11-01T15:50:00Z',
     },
   ],
 };
@@ -145,6 +147,7 @@ const MARKET_B: PartialMarket = {
       open: '10',
       close: '80',
       volume: '1000',
+      periodStart: '2022-11-01T15:49:00Z',
     },
   ],
 };

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

@@ -3,7 +3,7 @@ import { Schema 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 };
+export type MarketCandlesFieldsFragment = { __typename?: 'Candle', high: string, low: string, open: string, close: string, volume: string, periodStart: string };
 
 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 } } | 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, periodStart: string } } | 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 } };
+export type MarketCandlesUpdateSubscription = { __typename?: 'Subscription', candles: { __typename?: 'Candle', high: string, low: string, open: string, close: string, volume: string, periodStart: string } };
 
 export const MarketCandlesFieldsFragmentDoc = gql`
     fragment MarketCandlesFields on Candle {
@@ -29,6 +29,7 @@ export const MarketCandlesFieldsFragmentDoc = gql`
   open
   close
   volume
+  periodStart
 }
     `;
 export const MarketCandlesDocument = gql`

libs/market-list/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 } } | 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, periodStart: string } } | null> | null } | null } }> } | null };
 
 
 export const MarketsCandlesDocument = gql`

libs/market-list/src/lib/index.ts

@@ -1,6 +1,7 @@
 export * from './components';
 export * from './utils';
-export * from './market-candles-provider';
+export { marketCandlesProvider } from './market-candles-provider';
+export type { Candle } from './market-candles-provider';
 export * from './market-data-provider';
 export * from './market-provider';
 export * from './markets-candles-provider';

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

@@ -0,0 +1,34 @@
+import { update } from './market-candles-provider';
+
+describe('market candles provider update', () => {
+  const data = [
+    {
+      high: '153350000',
+      low: '153350000',
+      open: '153350000',
+      close: '153350000',
+      volume: '50',
+      periodStart: '2022-11-01T15:49:00Z',
+    },
+  ];
+  it('updates last candle if periodStart matches', () => {
+    const delta = { ...data[0] };
+    expect(update(data, delta)[0]).toBe(delta);
+  });
+
+  it('adds candle if periodStart is newer than last periodStart', () => {
+    const delta = { ...data[0], periodStart: '2022-11-01T15:50:00Z' };
+    expect(update(data, delta)[1]).toBe(delta);
+  });
+
+  it('omits update if periodStart older than last periodStart', () => {
+    const delta = { ...data[0], periodStart: '2022-11-01T15:48:00Z' };
+    expect(update(data, delta)).toBe(data);
+  });
+
+  it('returns [delta] if data is was empty', () => {
+    const delta = data[0];
+    expect(update(null, delta).length).toBe(1);
+    expect(update([], delta).length).toBe(1);
+  });
+});

libs/market-list/src/lib/market-candles-provider.ts

@@ -11,8 +11,18 @@ import {
 
 export type Candle = MarketCandlesFieldsFragment;
 
-const update = (data: Candle[], delta: Candle) =>
+export const update = (data: Candle[] | null, delta: Candle) => {
-  data && delta ? [...data, delta] : data;
+  if (data && data.length) {
+    if (data[data.length - 1].periodStart === delta.periodStart) {
+      return [...data.slice(0, -1), delta];
+    } else if (data[data.length - 1].periodStart < delta.periodStart) {
+      return [...data, delta];
+    } else {
+      return data;
+    }
+  }
+  return [delta];
+};
 
 const getData = (responseData: MarketCandlesQuery): Candle[] | null =>
   responseData?.marketsConnection?.edges[0]?.node.candlesConnection?.edges

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

@@ -4,6 +4,7 @@ fragment MarketCandlesFields on Candle {
   open
   close
   volume
+  periodStart
 }
 
 query MarketCandles($interval: Interval!, $since: String!, $marketId: ID!) {

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

@@ -4,6 +4,7 @@ fragment MarketCandlesFields on Candle {
   open
   close
   volume
+  periodStart
 }
 
 query MarketsCandles($interval: Interval!, $since: String!) {