From c6f8ff68b8346686a9cafe59f729512152ed59d8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bart=C5=82omiej=20G=C5=82ownia?= Date: Fri, 21 Oct 2022 19:34:04 +0200 Subject: [PATCH] chore: move market depth queries to .graphql file (#1814) --- .../support/mocks/generate-market-depth.ts | 8 +- .../support/mocks/generate-market-depth.ts | 8 +- .../src/support/mocks/generate-order-book.ts | 11 +-- libs/market-depth/src/lib/MarketDepth.graphql | 46 ++++------- .../src/lib/__generated__/MarketDepth.ts | 79 ------------------ .../__generated__/MarketDepthSubscription.ts | 75 ----------------- .../src/lib/__generated___/MarketDepth.ts | 82 ++++++++----------- libs/market-depth/src/lib/depth-chart.tsx | 13 ++- libs/market-depth/src/lib/index.ts | 3 +- .../src/lib/market-depth-provider.ts | 79 +++++------------- .../src/lib/orderbook-data.spec.ts | 38 ++++----- libs/market-depth/src/lib/orderbook-data.ts | 75 +++++------------ .../src/lib/orderbook-manager.tsx | 13 ++- .../src/lib/use-orderbook-data.ts | 12 +-- 14 files changed, 134 insertions(+), 408 deletions(-) delete mode 100644 libs/market-depth/src/lib/__generated__/MarketDepth.ts delete mode 100644 libs/market-depth/src/lib/__generated__/MarketDepthSubscription.ts diff --git a/apps/console-lite-e2e/src/support/mocks/generate-market-depth.ts b/apps/console-lite-e2e/src/support/mocks/generate-market-depth.ts index d0342a6ea..c63794cf9 100644 --- a/apps/console-lite-e2e/src/support/mocks/generate-market-depth.ts +++ b/apps/console-lite-e2e/src/support/mocks/generate-market-depth.ts @@ -1,12 +1,12 @@ import merge from 'lodash/merge'; import type { PartialDeep } from 'type-fest'; // eslint-disable-next-line @nrwl/nx/enforce-module-boundaries -import type { MarketDepth } from '../../../../../libs/market-depth/src/lib/__generated__/MarketDepth'; +import type { MarketDepthQuery } from '../../../../../libs/market-depth/src/lib/__generated___/MarketDepth'; export const generateMarketDepth = ( - override?: PartialDeep -): MarketDepth => { - const defaultResult: MarketDepth = { + override?: PartialDeep +): MarketDepthQuery => { + const defaultResult: MarketDepthQuery = { market: { id: 'a46bd7e5277087723b7ab835844dec3cef8b4445738101269624bf5537d5d423', depth: { diff --git a/apps/trading-e2e/src/support/mocks/generate-market-depth.ts b/apps/trading-e2e/src/support/mocks/generate-market-depth.ts index 74012beb1..04effee3f 100644 --- a/apps/trading-e2e/src/support/mocks/generate-market-depth.ts +++ b/apps/trading-e2e/src/support/mocks/generate-market-depth.ts @@ -1,12 +1,12 @@ import merge from 'lodash/merge'; import type { PartialDeep } from 'type-fest'; // eslint-disable-next-line @nrwl/nx/enforce-module-boundaries -import type { MarketDepth } from '../../../../../libs/market-depth/src/lib/__generated__/MarketDepth'; +import type { MarketDepthQuery } from '../../../../../libs/market-depth/src/lib/__generated___/MarketDepth'; export const generateMarketDepth = ( - override?: PartialDeep -): MarketDepth => { - const defaultResult: MarketDepth = { + override?: PartialDeep +): MarketDepthQuery => { + const defaultResult: MarketDepthQuery = { market: { id: 'market-0', depth: { diff --git a/apps/trading-e2e/src/support/mocks/generate-order-book.ts b/apps/trading-e2e/src/support/mocks/generate-order-book.ts index 1529083e2..48564dc61 100644 --- a/apps/trading-e2e/src/support/mocks/generate-order-book.ts +++ b/apps/trading-e2e/src/support/mocks/generate-order-book.ts @@ -1,14 +1,11 @@ import merge from 'lodash/merge'; import type { PartialDeep } from 'type-fest'; -import type { - MarketDepth, - MarketDepth_market, -} from '@vegaprotocol/market-depth'; +import type { MarketDepthQuery } from '@vegaprotocol/market-depth'; export const generateOrderBook = ( - override?: PartialDeep -): MarketDepth => { - const marketDepth: MarketDepth_market = { + override?: PartialDeep +): MarketDepthQuery => { + const marketDepth: MarketDepthQuery['market'] = { id: 'b2426f67b085ba8fb429f1b529d49372b2d096c6fb6f509f76c5863abb6d969e', depth: { sell: [ diff --git a/libs/market-depth/src/lib/MarketDepth.graphql b/libs/market-depth/src/lib/MarketDepth.graphql index c9b294aca..c9b234ade 100644 --- a/libs/market-depth/src/lib/MarketDepth.graphql +++ b/libs/market-depth/src/lib/MarketDepth.graphql @@ -1,50 +1,32 @@ +fragment PriceLevelFields on PriceLevel { + price + volume + numberOfOrders +} + query MarketDepth($marketId: ID!) { market(id: $marketId) { id - decimalPlaces - positionDecimalPlaces - data { - staticMidPrice - marketTradingMode - indicativeVolume - indicativePrice - bestStaticBidPrice - bestStaticOfferPrice - market { - id - } - } depth { - lastTrade { - price - } sell { - price - volume - numberOfOrders + ...PriceLevelFields } buy { - price - volume - numberOfOrders + ...PriceLevelFields } sequenceNumber } } } -subscription MarketDepthSubscription($marketIds: [ID!]!) { - marketsDepthUpdate(marketIds: $marketIds) { +subscription MarketDepthUpdate($marketId: ID!) { + marketsDepthUpdate(marketIds: [$marketId]) { marketId - buy { - price - volume - numberOfOrders - } sell { - price - volume - numberOfOrders + ...PriceLevelFields + } + buy { + ...PriceLevelFields } sequenceNumber previousSequenceNumber diff --git a/libs/market-depth/src/lib/__generated__/MarketDepth.ts b/libs/market-depth/src/lib/__generated__/MarketDepth.ts deleted file mode 100644 index 7de7f05b6..000000000 --- a/libs/market-depth/src/lib/__generated__/MarketDepth.ts +++ /dev/null @@ -1,79 +0,0 @@ -/* tslint:disable */ -/* eslint-disable */ -// @generated -// This file was automatically generated and should not be edited. - -// ==================================================== -// GraphQL query operation: MarketDepth -// ==================================================== - -export interface MarketDepth_market_depth_sell { - __typename: "PriceLevel"; - /** - * The price of all the orders at this level (uint64) - */ - price: string; - /** - * The total remaining size of all orders at this level (uint64) - */ - volume: string; - /** - * The number of orders at this price level (uint64) - */ - numberOfOrders: string; -} - -export interface MarketDepth_market_depth_buy { - __typename: "PriceLevel"; - /** - * The price of all the orders at this level (uint64) - */ - price: string; - /** - * The total remaining size of all orders at this level (uint64) - */ - volume: string; - /** - * The number of orders at this price level (uint64) - */ - numberOfOrders: string; -} - -export interface MarketDepth_market_depth { - __typename: "MarketDepth"; - /** - * Sell side price levels (if available) - */ - sell: MarketDepth_market_depth_sell[] | null; - /** - * Buy side price levels (if available) - */ - buy: MarketDepth_market_depth_buy[] | null; - /** - * Sequence number for the current snapshot of the market depth - */ - sequenceNumber: string; -} - -export interface MarketDepth_market { - __typename: "Market"; - /** - * Market ID - */ - id: string; - /** - * Current depth on the order book for this market - */ - depth: MarketDepth_market_depth; -} - -export interface MarketDepth { - /** - * An instrument that is trading on the Vega network - */ - market: MarketDepth_market | null; -} - -export interface MarketDepthVariables { - marketId: string; -} diff --git a/libs/market-depth/src/lib/__generated__/MarketDepthSubscription.ts b/libs/market-depth/src/lib/__generated__/MarketDepthSubscription.ts deleted file mode 100644 index 80e7dfda3..000000000 --- a/libs/market-depth/src/lib/__generated__/MarketDepthSubscription.ts +++ /dev/null @@ -1,75 +0,0 @@ -/* tslint:disable */ -/* eslint-disable */ -// @generated -// This file was automatically generated and should not be edited. - -// ==================================================== -// GraphQL subscription operation: MarketDepthSubscription -// ==================================================== - -export interface MarketDepthSubscription_marketsDepthUpdate_sell { - __typename: "PriceLevel"; - /** - * The price of all the orders at this level (uint64) - */ - price: string; - /** - * The total remaining size of all orders at this level (uint64) - */ - volume: string; - /** - * The number of orders at this price level (uint64) - */ - numberOfOrders: string; -} - -export interface MarketDepthSubscription_marketsDepthUpdate_buy { - __typename: "PriceLevel"; - /** - * The price of all the orders at this level (uint64) - */ - price: string; - /** - * The total remaining size of all orders at this level (uint64) - */ - volume: string; - /** - * The number of orders at this price level (uint64) - */ - numberOfOrders: string; -} - -export interface MarketDepthSubscription_marketsDepthUpdate { - __typename: "ObservableMarketDepthUpdate"; - /** - * Market ID - */ - marketId: string; - /** - * Sell side price levels (if available) - */ - sell: MarketDepthSubscription_marketsDepthUpdate_sell[] | null; - /** - * Buy side price levels (if available) - */ - buy: MarketDepthSubscription_marketsDepthUpdate_buy[] | null; - /** - * Sequence number for the current snapshot of the market depth. It is always increasing but not monotonic. - */ - sequenceNumber: string; - /** - * Sequence number of the last update sent; useful for checking that no updates were missed. - */ - previousSequenceNumber: string; -} - -export interface MarketDepthSubscription { - /** - * Subscribe to price level market depth updates - */ - marketsDepthUpdate: MarketDepthSubscription_marketsDepthUpdate[]; -} - -export interface MarketDepthSubscriptionVariables { - marketId: string; -} diff --git a/libs/market-depth/src/lib/__generated___/MarketDepth.ts b/libs/market-depth/src/lib/__generated___/MarketDepth.ts index 2510c06bb..7f7b46e5f 100644 --- a/libs/market-depth/src/lib/__generated___/MarketDepth.ts +++ b/libs/market-depth/src/lib/__generated___/MarketDepth.ts @@ -3,57 +3,45 @@ import { Schema as Types } from '@vegaprotocol/types'; import { gql } from '@apollo/client'; import * as Apollo from '@apollo/client'; const defaultOptions = {} as const; +export type PriceLevelFieldsFragment = { __typename?: 'PriceLevel', price: string, volume: string, numberOfOrders: string }; + export type MarketDepthQueryVariables = Types.Exact<{ marketId: Types.Scalars['ID']; }>; -export type MarketDepthQuery = { __typename?: 'Query', market?: { __typename?: 'Market', id: string, decimalPlaces: number, positionDecimalPlaces: number, data?: { __typename?: 'MarketData', staticMidPrice: string, marketTradingMode: Types.MarketTradingMode, indicativeVolume: string, indicativePrice: string, bestStaticBidPrice: string, bestStaticOfferPrice: string, market: { __typename?: 'Market', id: string } } | null, depth: { __typename?: 'MarketDepth', sequenceNumber: string, lastTrade?: { __typename?: 'Trade', price: string } | null, sell?: Array<{ __typename?: 'PriceLevel', price: string, volume: string, numberOfOrders: string }> | null, buy?: Array<{ __typename?: 'PriceLevel', price: string, volume: string, numberOfOrders: string }> | null } } | null }; +export type MarketDepthQuery = { __typename?: 'Query', market?: { __typename?: 'Market', id: string, depth: { __typename?: 'MarketDepth', sequenceNumber: string, sell?: Array<{ __typename?: 'PriceLevel', price: string, volume: string, numberOfOrders: string }> | null, buy?: Array<{ __typename?: 'PriceLevel', price: string, volume: string, numberOfOrders: string }> | null } } | null }; -export type MarketDepthSubscriptionSubscriptionVariables = Types.Exact<{ - marketIds: Array | Types.Scalars['ID']; +export type MarketDepthUpdateSubscriptionVariables = Types.Exact<{ + marketId: Types.Scalars['ID']; }>; -export type MarketDepthSubscriptionSubscription = { __typename?: 'Subscription', marketsDepthUpdate: Array<{ __typename?: 'ObservableMarketDepthUpdate', marketId: string, sequenceNumber: string, previousSequenceNumber: string, buy?: Array<{ __typename?: 'PriceLevel', price: string, volume: string, numberOfOrders: string }> | null, sell?: Array<{ __typename?: 'PriceLevel', price: string, volume: string, numberOfOrders: string }> | null }> }; - +export type MarketDepthUpdateSubscription = { __typename?: 'Subscription', marketsDepthUpdate: Array<{ __typename?: 'ObservableMarketDepthUpdate', marketId: string, sequenceNumber: string, previousSequenceNumber: string, sell?: Array<{ __typename?: 'PriceLevel', price: string, volume: string, numberOfOrders: string }> | null, buy?: Array<{ __typename?: 'PriceLevel', price: string, volume: string, numberOfOrders: string }> | null }> }; +export const PriceLevelFieldsFragmentDoc = gql` + fragment PriceLevelFields on PriceLevel { + price + volume + numberOfOrders +} + `; export const MarketDepthDocument = gql` query MarketDepth($marketId: ID!) { market(id: $marketId) { id - decimalPlaces - positionDecimalPlaces - data { - staticMidPrice - marketTradingMode - indicativeVolume - indicativePrice - bestStaticBidPrice - bestStaticOfferPrice - market { - id - } - } depth { - lastTrade { - price - } sell { - price - volume - numberOfOrders + ...PriceLevelFields } buy { - price - volume - numberOfOrders + ...PriceLevelFields } sequenceNumber } } } - `; + ${PriceLevelFieldsFragmentDoc}`; /** * __useMarketDepthQuery__ @@ -82,45 +70,41 @@ export function useMarketDepthLazyQuery(baseOptions?: Apollo.LazyQueryHookOption export type MarketDepthQueryHookResult = ReturnType; export type MarketDepthLazyQueryHookResult = ReturnType; export type MarketDepthQueryResult = Apollo.QueryResult; -export const MarketDepthSubscriptionDocument = gql` - subscription MarketDepthSubscription($marketIds: [ID!]!) { - marketsDepthUpdate(marketIds: $marketIds) { +export const MarketDepthUpdateDocument = gql` + subscription MarketDepthUpdate($marketId: ID!) { + marketsDepthUpdate(marketIds: [$marketId]) { marketId - buy { - price - volume - numberOfOrders - } sell { - price - volume - numberOfOrders + ...PriceLevelFields + } + buy { + ...PriceLevelFields } sequenceNumber previousSequenceNumber } } - `; + ${PriceLevelFieldsFragmentDoc}`; /** - * __useMarketDepthSubscriptionSubscription__ + * __useMarketDepthUpdateSubscription__ * - * To run a query within a React component, call `useMarketDepthSubscriptionSubscription` and pass it any options that fit your needs. - * When your component renders, `useMarketDepthSubscriptionSubscription` returns an object from Apollo Client that contains loading, error, and data properties + * To run a query within a React component, call `useMarketDepthUpdateSubscription` and pass it any options that fit your needs. + * When your component renders, `useMarketDepthUpdateSubscription` returns an object from Apollo Client that contains loading, error, and data properties * you can use to render your UI. * * @param baseOptions options that will be passed into the subscription, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options; * * @example - * const { data, loading, error } = useMarketDepthSubscriptionSubscription({ + * const { data, loading, error } = useMarketDepthUpdateSubscription({ * variables: { - * marketIds: // value for 'marketIds' + * marketId: // value for 'marketId' * }, * }); */ -export function useMarketDepthSubscriptionSubscription(baseOptions: Apollo.SubscriptionHookOptions) { +export function useMarketDepthUpdateSubscription(baseOptions: Apollo.SubscriptionHookOptions) { const options = {...defaultOptions, ...baseOptions} - return Apollo.useSubscription(MarketDepthSubscriptionDocument, options); + return Apollo.useSubscription(MarketDepthUpdateDocument, options); } -export type MarketDepthSubscriptionSubscriptionHookResult = ReturnType; -export type MarketDepthSubscriptionSubscriptionResult = Apollo.SubscriptionResult; \ No newline at end of file +export type MarketDepthUpdateSubscriptionHookResult = ReturnType; +export type MarketDepthUpdateSubscriptionResult = Apollo.SubscriptionResult; \ No newline at end of file diff --git a/libs/market-depth/src/lib/depth-chart.tsx b/libs/market-depth/src/lib/depth-chart.tsx index 0046693c8..19be91e42 100644 --- a/libs/market-depth/src/lib/depth-chart.tsx +++ b/libs/market-depth/src/lib/depth-chart.tsx @@ -19,10 +19,9 @@ import { import { marketDataProvider, marketProvider } from '@vegaprotocol/market-list'; import type { MarketData } from '@vegaprotocol/market-list'; import type { - MarketDepthSubscription_marketsDepthUpdate, - MarketDepthSubscription_marketsDepthUpdate_sell, - MarketDepthSubscription_marketsDepthUpdate_buy, -} from './__generated__/MarketDepthSubscription'; + MarketDepthUpdateSubscription, + PriceLevelFieldsFragment, +} from './__generated___/MarketDepth'; import type { DepthChartProps } from 'pennant'; import { parseLevel, updateLevels } from './depth-chart-utils'; @@ -42,8 +41,8 @@ export const DepthChartContainer = ({ marketId }: DepthChartManagerProps) => { const dataRef = useRef(null); const marketDataRef = useRef(null); const deltaRef = useRef<{ - sell: MarketDepthSubscription_marketsDepthUpdate_sell[]; - buy: MarketDepthSubscription_marketsDepthUpdate_buy[]; + sell: PriceLevelFieldsFragment[]; + buy: PriceLevelFieldsFragment[]; }>({ sell: [], buy: [], @@ -93,7 +92,7 @@ export const DepthChartContainer = ({ marketId }: DepthChartManagerProps) => { ({ delta: deltas, }: { - delta?: MarketDepthSubscription_marketsDepthUpdate[]; + delta?: MarketDepthUpdateSubscription['marketsDepthUpdate']; }) => { if (!dataRef.current) { return false; diff --git a/libs/market-depth/src/lib/index.ts b/libs/market-depth/src/lib/index.ts index f97bfdaa0..ee1bf316c 100644 --- a/libs/market-depth/src/lib/index.ts +++ b/libs/market-depth/src/lib/index.ts @@ -1,5 +1,4 @@ -export * from './__generated__/MarketDepth'; -export * from './__generated__/MarketDepthSubscription'; +export * from './__generated___/MarketDepth'; export * from './depth-chart'; export * from './market-depth-provider'; export * from './orderbook-container'; diff --git a/libs/market-depth/src/lib/market-depth-provider.ts b/libs/market-depth/src/lib/market-depth-provider.ts index 91f2a2e02..bba5153d0 100644 --- a/libs/market-depth/src/lib/market-depth-provider.ts +++ b/libs/market-depth/src/lib/market-depth-provider.ts @@ -1,79 +1,40 @@ -import { gql } from '@apollo/client'; import { makeDataProvider } from '@vegaprotocol/react-helpers'; import { updateLevels } from './orderbook-data'; import type { Update } from '@vegaprotocol/react-helpers'; +import { + MarketDepthDocument, + MarketDepthUpdateDocument, +} from './__generated___/MarketDepth'; import type { - MarketDepth, - MarketDepth_market, -} from './__generated__/MarketDepth'; -import type { - MarketDepthSubscription, - MarketDepthSubscription_marketsDepthUpdate, -} from './__generated__/MarketDepthSubscription'; - -const MARKET_DEPTH_QUERY = gql` - query MarketDepth($marketId: ID!) { - market(id: $marketId) { - id - depth { - sell { - price - volume - numberOfOrders - } - buy { - price - volume - numberOfOrders - } - sequenceNumber - } - } - } -`; - -export const MARKET_DEPTH_SUBSCRIPTION_QUERY = gql` - subscription MarketDepthSubscription($marketId: ID!) { - marketsDepthUpdate(marketIds: [$marketId]) { - marketId - sell { - price - volume - numberOfOrders - } - buy { - price - volume - numberOfOrders - } - sequenceNumber - previousSequenceNumber - } - } -`; + MarketDepthQuery, + MarketDepthUpdateSubscription, +} from './__generated___/MarketDepth'; const sequenceNumbers: Record = {}; const update: Update< - MarketDepth_market, - MarketDepthSubscription_marketsDepthUpdate[] + ReturnType, + ReturnType > = (data, deltas, reload) => { + if (!data) { + return; + } for (const delta of deltas) { if (delta.marketId !== data.id) { continue; } + /* const sequenceNumber = Number(delta.sequenceNumber); if (sequenceNumber <= sequenceNumbers[delta.marketId]) { return data; } - /* - if (sequenceNumber - 1 !== sequenceNumbers[delta.market.id]) { - sequenceNumbers[delta.market.id] = 0; + if (sequenceNumber - 1 !== sequenceNumbers[delta.marketId]) { + sequenceNumbers[delta.marketId] = 0; reload(); return; } - */ sequenceNumbers[delta.marketId] = sequenceNumber; + */ const updatedData = { ...data, depth: { ...data.depth }, @@ -89,7 +50,7 @@ const update: Update< return data; }; -const getData = (responseData: MarketDepth) => { +const getData = (responseData: MarketDepthQuery) => { if (responseData.market?.id) { sequenceNumbers[responseData.market.id] = Number( responseData.market.depth.sequenceNumber @@ -97,12 +58,12 @@ const getData = (responseData: MarketDepth) => { } return responseData.market; }; -const getDelta = (subscriptionData: MarketDepthSubscription) => +const getDelta = (subscriptionData: MarketDepthUpdateSubscription) => subscriptionData.marketsDepthUpdate; export const marketDepthProvider = makeDataProvider({ - query: MARKET_DEPTH_QUERY, - subscriptionQuery: MARKET_DEPTH_SUBSCRIPTION_QUERY, + query: MarketDepthDocument, + subscriptionQuery: MarketDepthUpdateDocument, update, getData, getDelta, diff --git a/libs/market-depth/src/lib/orderbook-data.spec.ts b/libs/market-depth/src/lib/orderbook-data.spec.ts index e69e299b2..cdc1ebe69 100644 --- a/libs/market-depth/src/lib/orderbook-data.spec.ts +++ b/libs/market-depth/src/lib/orderbook-data.spec.ts @@ -4,16 +4,12 @@ import { updateCompactedRows, } from './orderbook-data'; import type { OrderbookRowData } from './orderbook-data'; -import type { MarketDepth_market_depth_sell } from './__generated__/MarketDepth'; -import type { - MarketDepthSubscription_marketDepthUpdate_sell, - MarketDepthSubscription_marketDepthUpdate_buy, -} from './__generated__/MarketDepthSubscription'; +import type { PriceLevelFieldsFragment } from './__generated___/MarketDepth'; describe('compactRows', () => { const numberOfRows = 100; const middle = 1000; - const sell: MarketDepth_market_depth_sell[] = new Array(numberOfRows) + const sell: PriceLevelFieldsFragment[] = new Array(numberOfRows) .fill(null) .map((n, i) => ({ __typename: 'PriceLevel', @@ -21,7 +17,7 @@ describe('compactRows', () => { price: (middle + numberOfRows - i).toString(), numberOfOrders: i.toString(), })); - const buy: MarketDepth_market_depth_sell[] = new Array(numberOfRows) + const buy: PriceLevelFieldsFragment[] = new Array(numberOfRows) .fill(null) .map((n, i) => ({ __typename: 'PriceLevel', @@ -79,7 +75,7 @@ describe('compactRows', () => { }); describe('updateLevels', () => { - let levels: MarketDepth_market_depth_sell[] = new Array(10) + let levels: PriceLevelFieldsFragment[] = new Array(10) .fill(null) .map((n, i) => ({ __typename: 'PriceLevel', @@ -88,7 +84,7 @@ describe('updateLevels', () => { numberOfOrders: ((i + 1) * 10).toString(), })); it('updates, removes and adds new items', () => { - const removeFirstRow: MarketDepthSubscription_marketDepthUpdate_sell = { + const removeFirstRow: PriceLevelFieldsFragment = { __typename: 'PriceLevel', price: '10', volume: '0', @@ -99,7 +95,7 @@ describe('updateLevels', () => { levels = updateLevels(levels, [removeFirstRow]); expect(levels[0].price).toEqual('20'); expect(updateLevels([], [removeFirstRow])).toEqual([]); - const addFirstRow: MarketDepthSubscription_marketDepthUpdate_sell = { + const addFirstRow: PriceLevelFieldsFragment = { __typename: 'PriceLevel', price: '10', volume: '10', @@ -107,7 +103,7 @@ describe('updateLevels', () => { }; levels = updateLevels(levels, [addFirstRow]); expect(levels[0].price).toEqual('10'); - const addBeforeLastRow: MarketDepthSubscription_marketDepthUpdate_sell = { + const addBeforeLastRow: PriceLevelFieldsFragment = { __typename: 'PriceLevel', price: '95', volume: '95', @@ -115,7 +111,7 @@ describe('updateLevels', () => { }; levels = updateLevels(levels, [addBeforeLastRow]); expect(levels[levels.length - 2].price).toEqual('95'); - const addAtTheEnd: MarketDepthSubscription_marketDepthUpdate_sell = { + const addAtTheEnd: PriceLevelFieldsFragment = { __typename: 'PriceLevel', price: '115', volume: '115', @@ -123,7 +119,7 @@ describe('updateLevels', () => { }; levels = updateLevels(levels, [addAtTheEnd]); expect(levels[levels.length - 1].price).toEqual('115'); - const updateLastRow: MarketDepthSubscription_marketDepthUpdate_sell = { + const updateLastRow: PriceLevelFieldsFragment = { __typename: 'PriceLevel', price: '115', volume: '116', @@ -196,13 +192,13 @@ describe('updateCompactedRows', () => { const resolution = 10; it('update volume', () => { - const sell: MarketDepthSubscription_marketDepthUpdate_sell = { + const sell: PriceLevelFieldsFragment = { __typename: 'PriceLevel', price: '120', volume: '10', numberOfOrders: '10', }; - const buy: MarketDepthSubscription_marketDepthUpdate_buy = { + const buy: PriceLevelFieldsFragment = { __typename: 'PriceLevel', price: '80', volume: '10', @@ -223,13 +219,13 @@ describe('updateCompactedRows', () => { }); it('remove row', () => { - const sell: MarketDepthSubscription_marketDepthUpdate_sell = { + const sell: PriceLevelFieldsFragment = { __typename: 'PriceLevel', price: '121', volume: '0', numberOfOrders: '0', }; - const buy: MarketDepthSubscription_marketDepthUpdate_buy = { + const buy: PriceLevelFieldsFragment = { __typename: 'PriceLevel', price: '79', volume: '0', @@ -245,13 +241,13 @@ describe('updateCompactedRows', () => { }); it('add new row at the end', () => { - const sell: MarketDepthSubscription_marketDepthUpdate_sell = { + const sell: PriceLevelFieldsFragment = { __typename: 'PriceLevel', price: '131', volume: '5', numberOfOrders: '5', }; - const buy: MarketDepthSubscription_marketDepthUpdate_buy = { + const buy: PriceLevelFieldsFragment = { __typename: 'PriceLevel', price: '59', volume: '5', @@ -271,13 +267,13 @@ describe('updateCompactedRows', () => { }); it('add new row in the middle', () => { - const sell: MarketDepthSubscription_marketDepthUpdate_sell = { + const sell: PriceLevelFieldsFragment = { __typename: 'PriceLevel', price: '111', volume: '5', numberOfOrders: '5', }; - const buy: MarketDepthSubscription_marketDepthUpdate_buy = { + const buy: PriceLevelFieldsFragment = { __typename: 'PriceLevel', price: '91', volume: '5', diff --git a/libs/market-depth/src/lib/orderbook-data.ts b/libs/market-depth/src/lib/orderbook-data.ts index 7362b9e84..bd0379c6a 100644 --- a/libs/market-depth/src/lib/orderbook-data.ts +++ b/libs/market-depth/src/lib/orderbook-data.ts @@ -3,15 +3,7 @@ import uniqBy from 'lodash/uniqBy'; import { VolumeType } from '@vegaprotocol/react-helpers'; import { MarketTradingMode } from '@vegaprotocol/types'; import type { MarketData } from '@vegaprotocol/market-list'; -import type { - MarketDepth_market_depth_sell, - MarketDepth_market_depth_buy, -} from './__generated__/MarketDepth'; -import type { - MarketDepthSubscription_marketsDepthUpdate_sell, - MarketDepthSubscription_marketsDepthUpdate_buy, -} from './__generated__/MarketDepthSubscription'; - +import type { PriceLevelFieldsFragment } from './__generated___/MarketDepth'; export interface CumulativeVol { bid: number; relativeBid?: number; @@ -104,35 +96,15 @@ export const createRow = ( const mapRawData = (dataType: VolumeType.ask | VolumeType.bid) => - ( - data: Omit< - | MarketDepth_market_depth_sell - | MarketDepthSubscription_marketsDepthUpdate_sell - | MarketDepth_market_depth_buy - | MarketDepthSubscription_marketsDepthUpdate_buy, - '__typename' - > - ): PartialOrderbookRowData => + (data: PriceLevelFieldsFragment): PartialOrderbookRowData => createPartialRow(data.price, Number(data.volume), dataType); /** * @summary merges sell amd buy data, orders by price desc, group by price level, counts cumulative and relative values */ export const compactRows = ( - sell: - | Omit< - | MarketDepth_market_depth_sell - | MarketDepthSubscription_marketsDepthUpdate_sell, - '__typename' - >[] - | null, - buy: - | Omit< - | MarketDepth_market_depth_buy - | MarketDepthSubscription_marketsDepthUpdate_buy, - '__typename' - >[] - | null, + sell: PriceLevelFieldsFragment[] | null | undefined, + buy: PriceLevelFieldsFragment[] | null | undefined, resolution: number ) => { // map raw sell data to OrderbookData @@ -202,9 +174,7 @@ export const compactRows = ( const partiallyUpdateCompactedRows = ( dataType: VolumeType, data: OrderbookRowData[], - delta: - | MarketDepthSubscription_marketsDepthUpdate_sell - | MarketDepthSubscription_marketsDepthUpdate_buy, + delta: PriceLevelFieldsFragment, resolution: number, modifiedIndex: number ): [number, OrderbookRowData[]] => { @@ -259,8 +229,8 @@ const partiallyUpdateCompactedRows = ( */ export const updateCompactedRows = ( rows: OrderbookRowData[], - sell: MarketDepthSubscription_marketsDepthUpdate_sell[] | null, - buy: MarketDepthSubscription_marketsDepthUpdate_buy[] | null, + sell: PriceLevelFieldsFragment[] | null, + buy: PriceLevelFieldsFragment[] | null, resolution: number ) => { let sellModifiedIndex = -1; @@ -352,11 +322,8 @@ export const mapMarketData = ( * @returns */ export const updateLevels = ( - draft: (MarketDepth_market_depth_buy | MarketDepth_market_depth_sell)[], - updates: ( - | MarketDepthSubscription_marketsDepthUpdate_buy - | MarketDepthSubscription_marketsDepthUpdate_sell - )[] + draft: PriceLevelFieldsFragment[], + updates: (PriceLevelFieldsFragment | PriceLevelFieldsFragment)[] ) => { const levels = [...draft]; updates.forEach((update) => { @@ -406,22 +373,18 @@ export const generateMockData = ({ }: MockDataGeneratorParams) => { let matrix = new Array(numberOfSellRows).fill(undefined); let price = midPrice + (numberOfSellRows - Math.ceil(overlap / 2) + 1); - const sell: Omit[] = matrix.map( - (row, i) => ({ - price: (price -= 1).toString(), - volume: (numberOfSellRows - i + 1).toString(), - numberOfOrders: '', - }) - ); + const sell: PriceLevelFieldsFragment[] = matrix.map((row, i) => ({ + price: (price -= 1).toString(), + volume: (numberOfSellRows - i + 1).toString(), + numberOfOrders: '', + })); price += overlap; matrix = new Array(numberOfBuyRows).fill(undefined); - const buy: Omit[] = matrix.map( - (row, i) => ({ - price: (price -= 1).toString(), - volume: (i + 2).toString(), - numberOfOrders: '', - }) - ); + const buy: PriceLevelFieldsFragment[] = matrix.map((row, i) => ({ + price: (price -= 1).toString(), + volume: (i + 2).toString(), + numberOfOrders: '', + })); const rows = compactRows(sell, buy, resolution); return { rows, diff --git a/libs/market-depth/src/lib/orderbook-manager.tsx b/libs/market-depth/src/lib/orderbook-manager.tsx index 84b143111..5bf844152 100644 --- a/libs/market-depth/src/lib/orderbook-manager.tsx +++ b/libs/market-depth/src/lib/orderbook-manager.tsx @@ -7,10 +7,9 @@ import { marketDataProvider, marketProvider } from '@vegaprotocol/market-list'; import type { MarketData } from '@vegaprotocol/market-list'; import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import type { - MarketDepthSubscription_marketsDepthUpdate, - MarketDepthSubscription_marketsDepthUpdate_sell, - MarketDepthSubscription_marketsDepthUpdate_buy, -} from './__generated__/MarketDepthSubscription'; + MarketDepthUpdateSubscription, + PriceLevelFieldsFragment, +} from './__generated___/MarketDepth'; import { compactRows, updateCompactedRows, @@ -32,8 +31,8 @@ export const OrderbookManager = ({ marketId }: OrderbookManagerProps) => { const dataRef = useRef({ rows: null }); const marketDataRef = useRef(null); const deltaRef = useRef<{ - sell: MarketDepthSubscription_marketsDepthUpdate_sell[]; - buy: MarketDepthSubscription_marketsDepthUpdate_buy[]; + sell: PriceLevelFieldsFragment[]; + buy: PriceLevelFieldsFragment[]; }>({ sell: [], buy: [], @@ -63,7 +62,7 @@ export const OrderbookManager = ({ marketId }: OrderbookManagerProps) => { ({ delta: deltas, }: { - delta?: MarketDepthSubscription_marketsDepthUpdate[]; + delta?: MarketDepthUpdateSubscription['marketsDepthUpdate']; }) => { if (!dataRef.current.rows) { return false; diff --git a/libs/market-depth/src/lib/use-orderbook-data.ts b/libs/market-depth/src/lib/use-orderbook-data.ts index c4a007f59..88ef4a8ba 100644 --- a/libs/market-depth/src/lib/use-orderbook-data.ts +++ b/libs/market-depth/src/lib/use-orderbook-data.ts @@ -2,7 +2,7 @@ import { useCallback, useEffect, useRef, useState } from 'react'; import throttle from 'lodash/throttle'; import { useDataProvider } from '@vegaprotocol/react-helpers'; import dataProvider from './market-depth-provider'; -import type { MarketDepth_market } from './__generated__/MarketDepth'; +import type { MarketDepthQuery } from './__generated___/MarketDepth'; interface Props { variables: { marketId: string }; @@ -13,10 +13,10 @@ export const useOrderBookData = ({ variables, throttleMilliseconds = 1000, }: Props) => { - const [orderbookData, setOrderbookData] = useState( - null - ); - const dataRef = useRef(null); + const [orderbookData, setOrderbookData] = useState< + MarketDepthQuery['market'] | null + >(null); + const dataRef = useRef(null); const updateOrderbookData = useRef( throttle(() => { if (!dataRef.current) { @@ -27,7 +27,7 @@ export const useOrderBookData = ({ ); const update = useCallback( - ({ data }: { data: MarketDepth_market | null }) => { + ({ data }: { data: MarketDepthQuery['market'] | null }) => { if (!data) { return false; }