Chore/markets-list: move queries to .graphql, combine data in marketListProvider (#1554)

* chore: combine data instead of providing three lists in marketListProvider

* chore: move markets-libs lib queries to .graphql files

* chore: fix markets queries names in e2e tests

* chore: add missing variables to simple market list candles query

* chore: fix trading  home e2e

* chore: change liquidity-provision-dashboard serve port to allow parell e2e tests

apps/console-lite-e2e/src/integration/app.test.ts

@@ -1,5 +1,17 @@
+import { aliasQuery } from '@vegaprotocol/cypress';
+import {
+  generateSimpleMarkets,
+  generateMarketsCandles,
+} from '../support/mocks/generate-markets';
+
 describe('simple trading app', { tags: '@smoke' }, () => {
-  beforeEach(() => cy.visit('/'));
+  beforeEach(() => {
+    cy.mockGQL((req) => {
+      aliasQuery(req, 'Markets', generateSimpleMarkets());
+      aliasQuery(req, 'MarketsCandles', generateMarketsCandles());
+    });
+    cy.visit('/');
+  });
 
   it('render', () => {
     cy.get('#root').should('exist');

apps/console-lite-e2e/src/integration/market-list.test.ts

@@ -1,9 +1,8 @@
 import { aliasQuery } from '@vegaprotocol/cypress';
-import type { Markets } from '@vegaprotocol/market-list';
+import type { MarketsQuery } from '@vegaprotocol/market-list';
 import {
   generateLongListMarkets,
   generateSimpleMarkets,
-  generateMarketsData,
   generateMarketsCandles,
 } from '../support/mocks/generate-markets';
 
@@ -12,8 +11,7 @@ describe('market list', { tags: '@smoke' }, () => {
     beforeEach(() => {
       cy.mockGQL((req) => {
         aliasQuery(req, 'Markets', generateSimpleMarkets());
-        aliasQuery(req, 'MarketsDataQuery', generateMarketsData());
+        aliasQuery(req, 'MarketsCandles', generateMarketsCandles());
-        aliasQuery(req, 'MarketsCandlesQuery', generateMarketsCandles());
       });
       cy.visit('/markets');
     });
@@ -68,8 +66,7 @@ describe('market list', { tags: '@smoke' }, () => {
     beforeEach(() => {
       cy.mockGQL((req) => {
         aliasQuery(req, 'Markets', generateSimpleMarkets());
-        aliasQuery(req, 'MarketsDataQuery', generateMarketsData());
+        aliasQuery(req, 'MarketsCandles', generateMarketsCandles());
-        aliasQuery(req, 'MarketsCandlesQuery', generateMarketsCandles());
       });
     });
 
@@ -81,7 +78,7 @@ describe('market list', { tags: '@smoke' }, () => {
     it('last asset (if exists)', () => {
       cy.visit('/markets');
       cy.wait('@Markets').then((filters) => {
-        const data: Markets | undefined = filters?.response?.body?.data;
+        const data: MarketsQuery | undefined = filters?.response?.body?.data;
         if (data.marketsConnection.edges.length) {
           const asset =
             data.marketsConnection.edges[0].node.tradableInstrument.instrument
@@ -107,8 +104,7 @@ describe('market list', { tags: '@smoke' }, () => {
       cy.viewport(1440, 900);
       cy.mockGQL((req) => {
         aliasQuery(req, 'Markets', generateLongListMarkets(1000));
-        aliasQuery(req, 'MarketsDataQuery', generateMarketsData());
+        aliasQuery(req, 'MarketsCandles', generateMarketsCandles());
-        aliasQuery(req, 'MarketsCandlesQuery', generateMarketsCandles());
       });
       performance.mark('start-1k');
       cy.visit('/markets');

apps/console-lite-e2e/src/integration/market-selector.test.ts

@@ -14,15 +14,15 @@ import { generatePartyMarketData } from '../support/mocks/generate-party-market-
 import { generateMarketMarkPrice } from '../support/mocks/generate-market-mark-price';
 import { generateMarketNames } from '../support/mocks/generate-market-names';
 import { generateMarketDepth } from '../support/mocks/generate-market-depth';
-import type { Market, Markets } from '@vegaprotocol/market-list';
+import type { Market, MarketsQuery } from '@vegaprotocol/market-list';
 
 describe('market selector', { tags: '@smoke' }, () => {
   let markets: Market[];
   beforeEach(() => {
     cy.mockGQL((req) => {
       aliasQuery(req, 'Markets', generateSimpleMarkets());
-      aliasQuery(req, 'MarketsCandlesQuery', generateMarketsCandles());
+      aliasQuery(req, 'MarketsCandles', generateMarketsCandles());
-      aliasQuery(req, 'MarketsDataQuery', generateMarketsData());
+      aliasQuery(req, 'MarketsData', generateMarketsData());
       aliasQuery(req, 'DealTicket', generateDealTicket());
       aliasQuery(req, 'MarketTags', generateMarketTags());
       aliasQuery(req, 'MarketPositions', generateMarketPositions());
@@ -36,7 +36,7 @@ describe('market selector', { tags: '@smoke' }, () => {
 
     cy.visit('/markets');
     cy.wait('@Markets').then((response) => {
-      const data: Markets | undefined = response?.response?.body?.data;
+      const data: MarketsQuery | undefined = response?.response?.body?.data;
       if (data.marketsConnection.edges.length) {
         markets = data.marketsConnection.edges.map((edge) => edge.node);
       }

apps/console-lite-e2e/src/integration/market-trade.test.ts

@@ -13,15 +13,15 @@ import { generatePartyMarketData } from '../support/mocks/generate-party-market-
 import { generateMarketMarkPrice } from '../support/mocks/generate-market-mark-price';
 import { generateMarketDepth } from '../support/mocks/generate-market-depth';
 import { connectVegaWallet } from '../support/connect-wallet';
-import type { Markets, Market } from '@vegaprotocol/market-list';
+import type { MarketsQuery, Market } from '@vegaprotocol/market-list';
 
 describe('Market trade', { tags: '@smoke' }, () => {
   let markets: Market[];
   beforeEach(() => {
     cy.mockGQL((req) => {
       aliasQuery(req, 'Markets', generateSimpleMarkets());
-      aliasQuery(req, 'MarketsCandlesQuery', generateMarketsCandles());
+      aliasQuery(req, 'MarketsCandles', generateMarketsCandles());
-      aliasQuery(req, 'MarketsDataQuery', generateMarketsData());
+      aliasQuery(req, 'MarketsData', generateMarketsData());
       aliasQuery(req, 'SimpleMarkets', generateSimpleMarkets());
       aliasQuery(req, 'DealTicket', generateDealTicket());
       aliasQuery(req, 'MarketTags', generateMarketTags());
@@ -34,7 +34,7 @@ describe('Market trade', { tags: '@smoke' }, () => {
     });
     cy.visit('/markets');
     cy.wait('@Markets').then((response) => {
-      const data: Markets | undefined = response?.response?.body?.data;
+      const data: MarketsQuery | undefined = response?.response?.body?.data;
       if (data.marketsConnection.edges.length) {
         markets = data.marketsConnection.edges.map((edge) => edge.node);
       }

apps/console-lite-e2e/src/support/mocks/generate-markets.ts

@@ -1,17 +1,16 @@
 import merge from 'lodash/merge';
 import { MarketState } from '@vegaprotocol/types';
 import type {
+  MarketsQuery,
   Market,
-  MarketsCandlesQuery_marketsConnection_edges_node,
-  MarketsCandlesQuery_marketsConnection_edges_node_candlesConnection_edges,
-  Markets,
   MarketsCandlesQuery,
+  Candle,
   MarketsDataQuery,
 } from '@vegaprotocol/market-list';
 import { protoMarket, protoCandles } from './commons';
 
 MarketState.STATE_SUSPENDED;
-export const generateSimpleMarkets = (): Markets => {
+export const generateSimpleMarkets = (): MarketsQuery => {
   const markets: Market[] = [
     { ...protoMarket },
     {
@@ -512,19 +511,27 @@ export const generateSimpleMarkets = (): Markets => {
 };
 
 export const generateMarketsCandles = (): MarketsCandlesQuery => {
-  const markets: MarketsCandlesQuery_marketsConnection_edges_node[] = [
+  return {
+    marketsConnection: {
+      __typename: 'MarketConnection',
+      edges: [
         {
+          __typename: 'MarketEdge',
+          node: {
             id: protoMarket.id,
             __typename: 'Market',
             candlesConnection: {
               __typename: 'CandleDataConnection',
               edges: protoCandles.map((node) => ({
                 __typename: 'CandleEdge',
-          node,
+                node: node as unknown as Candle,
-        })) as unknown as MarketsCandlesQuery_marketsConnection_edges_node_candlesConnection_edges[],
+              })),
+            },
           },
         },
         {
+          __typename: 'MarketEdge',
+          node: {
             id: '6030e5b4e0ca3297a26081e5af4d453f97f96baab2d74bf56f84efcffc4c382f',
             __typename: 'Market',
             candlesConnection: {
@@ -604,11 +611,14 @@ export const generateMarketsCandles = (): MarketsCandlesQuery => {
                 },
               ].map((node) => ({
                 __typename: 'CandleEdge',
-          node,
+                node: node as unknown as Candle,
-        })) as unknown as MarketsCandlesQuery_marketsConnection_edges_node_candlesConnection_edges[],
+              })),
+            },
           },
         },
         {
+          __typename: 'MarketEdge',
+          node: {
             id: 'de74a5572045b300e8ec50d136896912ec76e7d7ec135bc305dfd4854d9363a4',
             __typename: 'Market',
             candlesConnection: {
@@ -688,11 +698,14 @@ export const generateMarketsCandles = (): MarketsCandlesQuery => {
                 },
               ].map((node) => ({
                 __typename: 'CandleEdge',
-          node,
+                node: node as unknown as Candle,
-        })) as unknown as MarketsCandlesQuery_marketsConnection_edges_node_candlesConnection_edges[],
+              })),
+            },
           },
         },
         {
+          __typename: 'MarketEdge',
+          node: {
             id: '87b0bbb3c171baa5d97dfc3852332829c91e5c5dc9f7c8fb584c6d8ac75aaaf2',
             __typename: 'Market',
             candlesConnection: {
@@ -760,11 +773,14 @@ export const generateMarketsCandles = (): MarketsCandlesQuery => {
                 },
               ].map((node) => ({
                 __typename: 'CandleEdge',
-          node,
+                node: node as unknown as Candle,
-        })) as unknown as MarketsCandlesQuery_marketsConnection_edges_node_candlesConnection_edges[],
+              })),
+            },
           },
         },
         {
+          __typename: 'MarketEdge',
+          node: {
             id: '65663ebdc96161162769c4d5c5508137416748178d7cb28e2cb0d07a151a2bc6',
             __typename: 'Market',
             candlesConnection: {
@@ -844,11 +860,14 @@ export const generateMarketsCandles = (): MarketsCandlesQuery => {
                 },
               ].map((node) => ({
                 __typename: 'CandleEdge',
-          node,
+                node: node as unknown as Candle,
-        })) as unknown as MarketsCandlesQuery_marketsConnection_edges_node_candlesConnection_edges[],
+              })),
+            },
           },
         },
         {
+          __typename: 'MarketEdge',
+          node: {
             id: '234afabd27e3bce1a879039c041f9f00f915d98459935ddafd0169d38dd13850',
             __typename: 'Market',
             candlesConnection: {
@@ -928,11 +947,14 @@ export const generateMarketsCandles = (): MarketsCandlesQuery => {
                 },
               ].map((node) => ({
                 __typename: 'CandleEdge',
-          node,
+                node: node as unknown as Candle,
-        })) as unknown as MarketsCandlesQuery_marketsConnection_edges_node_candlesConnection_edges[],
+              })),
+            },
           },
         },
         {
+          __typename: 'MarketEdge',
+          node: {
             id: '9f2a3c1caa67bb0773ec18d908d32b55b129b9ec2d106a8e9a87f6aa5c0375a6',
             __typename: 'Market',
             candlesConnection: {
@@ -1012,11 +1034,14 @@ export const generateMarketsCandles = (): MarketsCandlesQuery => {
                 },
               ].map((node) => ({
                 __typename: 'CandleEdge',
-          node,
+                node: node as unknown as Candle,
-        })) as unknown as MarketsCandlesQuery_marketsConnection_edges_node_candlesConnection_edges[],
+              })),
+            },
           },
         },
         {
+          __typename: 'MarketEdge',
+          node: {
             id: '8a45ee934d3ddac4b036f9884df1064a5353c620a56f775ba36597d0edef9a7a',
             __typename: 'Market',
             candlesConnection: {
@@ -1037,19 +1062,13 @@ export const generateMarketsCandles = (): MarketsCandlesQuery => {
                 { open: '5710', close: '5691', __typename: 'Candle' },
               ].map((node) => ({
                 __typename: 'CandleEdge',
-          node,
+                node: node as unknown as Candle,
-        })) as unknown as MarketsCandlesQuery_marketsConnection_edges_node_candlesConnection_edges[],
-      },
-    },
-  ];
-  return {
-    marketsConnection: {
-      __typename: 'MarketConnection',
-      edges: markets.map((node) => ({
-        __typename: 'MarketEdge',
-        node,
               })),
             },
+          },
+        },
+      ],
+    },
   };
 };
 
@@ -1088,7 +1107,7 @@ export const generateLongListMarkets = (count: number) => {
   };
 };
 
-export const generateMarkets = (override?): Markets => {
+export const generateMarkets = (override?): MarketsQuery => {
   const markets = [protoMarket];
 
   const defaultResult = {

apps/console-lite/src/app/components/simple-market-list/simple-market-expires.tsx

@@ -5,7 +5,7 @@ import { EXPIRE_DATE_FORMAT } from '../../constants';
 const SimpleMarketExpires = ({
   tags,
 }: {
-  tags: ReadonlyArray<string> | null;
+  tags?: ReadonlyArray<string> | null;
 }) => {
   if (tags) {
     const dateFound = tags.reduce<Date | null>((agg, tag) => {

apps/console-lite/src/app/components/simple-market-list/simple-market-list.spec.tsx

@@ -58,21 +58,17 @@ let marketsMock = [
   },
 ] as unknown as Market[];
 
-const LIB = '@vegaprotocol/market-list';
+const LIB = '@vegaprotocol/react-helpers';
-const useMarketList = () => {
+const useDataProvider = () => {
   return {
-    data: {
+    data: marketsMock,
-      markets: marketsMock,
-      marketsData: [],
-      marketsCandles: [],
-    },
     loading: false,
     error: false,
   };
 };
 jest.mock(LIB, () => ({
   ...jest.requireActual(LIB),
-  useMarketList: jest.fn(() => useMarketList()),
+  useDataProvider: jest.fn(() => useDataProvider()),
 }));
 
 const mockIsTradable = jest.fn((_arg) => true);

apps/console-lite/src/app/components/simple-market-list/simple-market-list.tsx

@@ -1,7 +1,10 @@
-import React, { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef, useMemo } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import type { AgGridReact } from 'ag-grid-react';
-import { useScreenDimensions } from '@vegaprotocol/react-helpers';
+import {
+  useScreenDimensions,
+  useDataProvider,
+} from '@vegaprotocol/react-helpers';
 import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
 import type { MarketState } from '@vegaprotocol/types';
 import useMarketsFilterData from './use-markets-filter-data';
@@ -9,8 +12,9 @@ import useColumnDefinitions from './use-column-definitions';
 import SimpleMarketToolbar from './simple-market-toolbar';
 import { IS_MARKET_TRADABLE } from '../../constants';
 import { ConsoleLiteGrid } from '../console-lite-grid';
-import type { Market, MarketsListData } from '@vegaprotocol/market-list';
+import type { Market } from '@vegaprotocol/market-list';
-import { useMarketList } from '@vegaprotocol/market-list';
+import { Interval } from '@vegaprotocol/types';
+import { marketsWithCandlesProvider } from '@vegaprotocol/market-list';
 
 export type MarketWithPercentChange = Market & {
   percentChange?: number | '-';
@@ -29,8 +33,19 @@ const SimpleMarketList = () => {
   const statusesRef = useRef<Record<string, MarketState | ''>>({});
   const gridRef = useRef<AgGridReact | null>(null);
 
-  const { data, error, loading } = useMarketList();
+  const variables = useMemo(() => {
-  const localData = useMarketsFilterData(data as MarketsListData, params);
+    const yesterday = Math.round(new Date().getTime() / 1000) - 24 * 3600;
+    return {
+      since: new Date(yesterday * 1000).toISOString(),
+      interval: Interval.INTERVAL_I1H,
+    };
+  }, []);
+  const { data, error, loading } = useDataProvider({
+    dataProvider: marketsWithCandlesProvider,
+    variables,
+    noUpdate: true,
+  });
+  const localData = useMarketsFilterData(data, params);
 
   const handleOnGridReady = useCallback(() => {
     gridRef.current?.api?.sizeColumnsToFit();
@@ -38,7 +53,7 @@ const SimpleMarketList = () => {
 
   useEffect(() => {
     const statuses: Record<string, MarketState | ''> = {};
-    data?.markets?.forEach((market) => {
+    data?.forEach((market) => {
       statuses[market.id] = market.state || '';
     });
     statusesRef.current = statuses;
@@ -62,7 +77,7 @@ const SimpleMarketList = () => {
 
   return (
     <div className="h-full p-4 md:p-6 grid grid-rows-[min-content,1fr]">
-      <SimpleMarketToolbar data={data?.markets || []} />
+      <SimpleMarketToolbar data={data || []} />
       <AsyncRenderer loading={loading} error={error} data={localData}>
         <ConsoleLiteGrid<MarketWithPercentChange>
           classNamesParam="mb-32 min-h-[300px]"

apps/console-lite/src/app/components/simple-market-list/simple-market-toolbar.tsx

@@ -15,13 +15,13 @@ import {
 } from '@vegaprotocol/ui-toolkit';
 import { MarketState } from '@vegaprotocol/types';
 import useMarketFiltersData from '../../hooks/use-markets-filter';
-import type { Markets_marketsConnection_edges_node } from '@vegaprotocol/market-list';
+import type { Market } from '@vegaprotocol/market-list';
 import { HorizontalMenu } from '../horizontal-menu';
 import type { HorizontalMenuItem } from '../horizontal-menu';
 import * as constants from './constants';
 
 interface Props {
-  data: Markets_marketsConnection_edges_node[];
+  data: Market[];
 }
 
 const SimpleMarketToolbar = ({ data }: Props) => {

apps/console-lite/src/app/components/simple-market-list/use-column-definitions.tsx

@@ -7,7 +7,7 @@ import { Icon } from '@vegaprotocol/ui-toolkit';
 import type { ValueSetterParams } from 'ag-grid-community';
 import { IconNames } from '@blueprintjs/icons';
 import { IS_MARKET_TRADABLE, MARKET_STATES_MAP } from '../../constants';
-import type { Candle, Market } from '@vegaprotocol/market-list';
+import type { MarketWithCandles as Market } from '@vegaprotocol/market-list';
 
 interface Props {
   isMobile: boolean;
@@ -69,9 +69,10 @@ const useColumnDefinitions = ({ isMobile }: Props) => {
           data,
           setValue,
         }: {
-          data: { id: string; candles: Candle[] };
+          data: Market;
           setValue: (arg: unknown) => void;
-        }) => (
+        }) =>
+          data.candles && (
             <SimpleMarketPercentChange
               candles={data.candles}
               marketId={data.id}

apps/console-lite/src/app/components/simple-market-list/use-markets-filter-data.ts

@@ -1,12 +1,15 @@
 import { useMemo } from 'react';
 import { MarketState } from '@vegaprotocol/types';
-import type { MarketsListData } from '@vegaprotocol/market-list';
+import type { MarketWithCandles } from '@vegaprotocol/market-list';
 import type { RouterParams } from './simple-market-list';
 
-const useMarketsFilterData = (data: MarketsListData, params: RouterParams) => {
+const useMarketsFilterData = (
+  data: MarketWithCandles[] | null,
+  params: RouterParams
+) => {
   return useMemo(() => {
-    const markets =
+    return (
-      data?.markets?.filter((item) => {
+      data?.filter((item) => {
         if (
           params.product &&
           params.product !==
@@ -32,21 +35,9 @@ const useMarketsFilterData = (data: MarketsListData, params: RouterParams) => {
           return false;
         }
         return true;
-      }) || [];
+      }) || []
-
+    );
-    return markets.map((market) => ({
+  }, [data, params.product, params.asset, params.state]);
-      ...market,
-      candles: (data?.marketsCandles || [])
-        .filter((c) => c.marketId === market.id)
-        .map((c) => c.candles),
-    }));
-  }, [
-    data?.marketsCandles,
-    data?.markets,
-    params.product,
-    params.asset,
-    params.state,
-  ]);
 };
 
 export default useMarketsFilterData;

apps/console-lite/src/app/hooks/use-markets-filter.ts

@@ -14,6 +14,9 @@ const useMarketFilters = (data: Market[]) => {
       const product = item.tradableInstrument.instrument.product.__typename;
       const asset =
         item.tradableInstrument.instrument.product.settlementAsset.symbol;
+      if (!product) {
+        return;
+      }
       if (!(product in localAssetPerProduct)) {
         localAssetPerProduct[product] = new Set<string>();
       }

apps/liquidity-provision-dashboard/project.json

@@ -50,7 +50,8 @@
       "executor": "./tools/executors/webpack:serve",
       "options": {
         "buildTarget": "liquidity-provision-dashboard:build",
-        "hmr": true
+        "hmr": true,
+        "port": 4201
       },
       "configurations": {
         "development": {

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

@@ -63,13 +63,11 @@ describe('home', { tags: '@regression' }, () => {
           },
         };
         aliasQuery(req, 'Markets', data);
-        aliasQuery(req, 'MarketsDataQuery', data);
+        aliasQuery(req, 'MarketsData', data);
-        aliasQuery(req, 'MarketsCandlesQuery', data);
       });
       cy.visit('/');
       cy.wait('@Markets');
-      cy.wait('@MarketsDataQuery');
+      cy.wait('@MarketsData');
-      cy.wait('@MarketsCandlesQuery');
       cy.url().should('eq', Cypress.config().baseUrl + '/markets');
     });
   });

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

@@ -13,8 +13,8 @@ describe('markets table', { tags: '@regression' }, () => {
     cy.visit('/');
     cy.wait('@Market');
     cy.wait('@Markets');
-    cy.wait('@MarketsDataQuery');
+    cy.wait('@MarketsData');
-    cy.wait('@MarketsCandlesQuery');
+    cy.wait('@MarketsCandles');
     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');
@@ -26,8 +26,8 @@ describe('markets table', { tags: '@regression' }, () => {
   it('renders market list drop down', () => {
     cy.visit('/');
     cy.wait('@Markets');
-    cy.wait('@MarketsDataQuery');
+    cy.wait('@MarketsData');
-    cy.wait('@MarketsCandlesQuery');
+    cy.wait('@MarketsCandles');
     openMarketDropDown();
     cy.getByTestId('price').invoke('text').should('not.be.empty');
     cy.getByTestId('trading-mode').should('not.be.empty');
@@ -39,8 +39,8 @@ describe('markets table', { tags: '@regression' }, () => {
   it('Able to select market from dropdown', () => {
     cy.visit('/');
     cy.wait('@Markets');
-    cy.wait('@MarketsDataQuery');
+    cy.wait('@MarketsData');
-    cy.wait('@MarketsCandlesQuery');
+    cy.wait('@MarketsCandles');
     openMarketDropDown();
     cy.getByTestId('market-link-market-0').should('be.visible').click();
 
@@ -59,8 +59,8 @@ describe('markets table', { tags: '@regression' }, () => {
     ];
     cy.visit('/');
     cy.wait('@Markets');
-    cy.wait('@MarketsDataQuery');
+    cy.wait('@MarketsData');
-    cy.wait('@MarketsCandlesQuery');
+    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');

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

@@ -6,16 +6,17 @@ import {
 } from '@vegaprotocol/types';
 import type { PartialDeep } from 'type-fest';
 import type {
-  Markets,
+  MarketsQuery,
-  Markets_marketsConnection_edges_node,
+  Market,
   MarketsCandlesQuery,
-  MarketsCandlesQuery_marketsConnection_edges_node,
   MarketsDataQuery,
-  MarketsDataQuery_marketsConnection_edges_node,
+  MarketData,
 } from '@vegaprotocol/market-list';
 
-export const generateMarkets = (override?: PartialDeep<Markets>): Markets => {
+export const generateMarkets = (
-  const markets: Markets_marketsConnection_edges_node[] = [
+  override?: PartialDeep<MarketsQuery>
+): MarketsQuery => {
+  const markets: Market[] = [
     {
       id: 'market-0',
       decimalPlaces: 5,
@@ -194,7 +195,7 @@ export const generateMarkets = (override?: PartialDeep<Markets>): Markets => {
     },
   ];
 
-  const defaultResult: Markets = {
+  const defaultResult: MarketsQuery = {
     marketsConnection: {
       __typename: 'MarketConnection',
       edges: markets.map((node) => ({
@@ -210,9 +211,8 @@ export const generateMarkets = (override?: PartialDeep<Markets>): Markets => {
 export const generateMarketsData = (
   override?: PartialDeep<MarketsDataQuery>
 ): MarketsDataQuery => {
-  const markets: MarketsDataQuery_marketsConnection_edges_node[] = [
+  const markets: MarketData[] = [
     {
-      data: {
       market: {
         id: 'market-0',
         __typename: 'Market',
@@ -229,10 +229,7 @@ export const generateMarketsData = (
       trigger: AuctionTrigger.AUCTION_TRIGGER_UNSPECIFIED,
       __typename: 'MarketData',
     },
-      __typename: 'Market',
-    },
     {
-      data: {
       market: {
         id: 'market-1',
         __typename: 'Market',
@@ -249,10 +246,7 @@ export const generateMarketsData = (
       trigger: AuctionTrigger.AUCTION_TRIGGER_UNSPECIFIED,
       __typename: 'MarketData',
     },
-      __typename: 'Market',
-    },
     {
-      data: {
       market: {
         id: 'market-2',
         __typename: 'Market',
@@ -269,10 +263,7 @@ export const generateMarketsData = (
       trigger: AuctionTrigger.AUCTION_TRIGGER_LIQUIDITY,
       __typename: 'MarketData',
     },
-      __typename: 'Market',
-    },
     {
-      data: {
       market: {
         id: 'market-3',
         __typename: 'Market',
@@ -289,16 +280,17 @@ export const generateMarketsData = (
       trigger: AuctionTrigger.AUCTION_TRIGGER_LIQUIDITY,
       __typename: 'MarketData',
     },
-      __typename: 'Market',
-    },
   ];
 
   const defaultResult: MarketsDataQuery = {
     marketsConnection: {
       __typename: 'MarketConnection',
-      edges: markets.map((node) => ({
+      edges: markets.map((data) => ({
         __typename: 'MarketEdge',
-        node,
+        node: {
+          __typename: 'Market',
+          data,
+        },
       })),
     },
   };
@@ -307,10 +299,15 @@ export const generateMarketsData = (
 };
 
 export const generateMarketsCandles = (
-  override?: PartialDeep<MarketsCandlesQuery>
+  override?: PartialDeep<MarketsDataQuery>
 ): MarketsCandlesQuery => {
-  const markets: MarketsCandlesQuery_marketsConnection_edges_node[] = [
+  const defaultResult: MarketsCandlesQuery = {
+    marketsConnection: {
+      __typename: 'MarketConnection',
+      edges: [
         {
+          __typename: 'MarketEdge',
+          node: {
             __typename: 'Market',
             id: 'market-0',
             candlesConnection: {
@@ -330,7 +327,10 @@ export const generateMarketsCandles = (
               ],
             },
           },
+        },
         {
+          __typename: 'MarketEdge',
+          node: {
             __typename: 'Market',
             id: 'market-1',
             candlesConnection: {
@@ -350,7 +350,10 @@ export const generateMarketsCandles = (
               ],
             },
           },
+        },
         {
+          __typename: 'MarketEdge',
+          node: {
             __typename: 'Market',
             id: 'market-2',
             candlesConnection: {
@@ -370,7 +373,10 @@ export const generateMarketsCandles = (
               ],
             },
           },
+        },
         {
+          __typename: 'MarketEdge',
+          node: {
             __typename: 'Market',
             id: 'market-3',
             candlesConnection: {
@@ -390,14 +396,8 @@ export const generateMarketsCandles = (
               ],
             },
           },
-  ];
+        },
-  const defaultResult: MarketsCandlesQuery = {
+      ],
-    marketsConnection: {
-      __typename: 'MarketConnection',
-      edges: markets.map((node) => ({
-        __typename: 'MarketEdge',
-        node,
-      })),
     },
   };
 

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

@@ -36,8 +36,8 @@ export const mockTradingPage = (
     })
   );
   aliasQuery(req, 'Markets', generateMarkets());
-  aliasQuery(req, 'MarketsDataQuery', generateMarketsData());
+  aliasQuery(req, 'MarketsData', generateMarketsData());
-  aliasQuery(req, 'MarketsCandlesQuery', generateMarketsCandles());
+  aliasQuery(req, 'MarketsCandles', generateMarketsCandles());
 
   aliasQuery(req, 'MarketDepth', generateMarketDepth());
   aliasQuery(req, 'Orders', generateOrders());

apps/trading/pages/index.page.tsx

@@ -1,5 +1,9 @@
-import { useMarketList } from '@vegaprotocol/market-list';
+import { marketsWithDataProvider } from '@vegaprotocol/market-list';
-import { addDecimalsFormatNumber, titlefy } from '@vegaprotocol/react-helpers';
+import {
+  addDecimalsFormatNumber,
+  titlefy,
+  useDataProvider,
+} from '@vegaprotocol/react-helpers';
 import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
 import { useRouter } from 'next/router';
 import { useEffect } from 'react';
@@ -8,8 +12,10 @@ import { useGlobalStore } from '../stores';
 export function Index() {
   const { replace } = useRouter();
   // The default market selected in the platform behind the overlay
-  // should be the oldest market that is currently trading in continuous mode(i.e. not in auction).
+  // should be the oldest market that is currently trading in     us mode(i.e. not in auction).
-  const { data, error, loading } = useMarketList();
+  const { data, error, loading } = useDataProvider({
+    dataProvider: marketsWithDataProvider,
+  });
   const { riskNoticeDialog, update } = useGlobalStore((store) => ({
     riskNoticeDialog: store.riskNoticeDialog,
     update: store.update,
@@ -19,12 +25,12 @@ export function Index() {
     update({ landingDialog: true });
 
     if (data) {
-      const marketId = data.markets[0]?.id;
+      const marketId = data[0]?.id;
-      const marketName = data.markets[0]?.tradableInstrument.instrument.name;
+      const marketName = data[0]?.tradableInstrument.instrument.name;
-      const marketPrice = data.marketsData[0]?.markPrice
+      const marketPrice = data[0]?.data?.markPrice
         ? addDecimalsFormatNumber(
-            data.marketsData[0]?.markPrice,
+            data[0]?.data?.markPrice,
-            data.markets[0].decimalPlaces
+            data[0]?.decimalPlaces
           )
         : null;
       const pageTitle = titlefy([marketName, marketPrice]);

libs/assets/src/lib/__generated___/Asset.ts

@@ -0,0 +1,59 @@
+import { Schema as Types } from '@vegaprotocol/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type AssetQueryVariables = Types.Exact<{
+  assetId: Types.Scalars['ID'];
+}>;
+
+
+export type AssetQuery = { __typename?: 'Query', asset?: { __typename?: 'Asset', id: string, name: string, symbol: string, decimals: number, quantum: string, source: { __typename?: 'BuiltinAsset' } | { __typename?: 'ERC20', contractAddress: string, lifetimeLimit: string, withdrawThreshold: string } } | null };
+
+
+export const AssetDocument = gql`
+    query Asset($assetId: ID!) {
+  asset(id: $assetId) {
+    id
+    name
+    symbol
+    decimals
+    quantum
+    source {
+      ... on ERC20 {
+        contractAddress
+        lifetimeLimit
+        withdrawThreshold
+      }
+    }
+  }
+}
+    `;
+
+/**
+ * __useAssetQuery__
+ *
+ * To run a query within a React component, call `useAssetQuery` and pass it any options that fit your needs.
+ * When your component renders, `useAssetQuery` 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 query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useAssetQuery({
+ *   variables: {
+ *      assetId: // value for 'assetId'
+ *   },
+ * });
+ */
+export function useAssetQuery(baseOptions: Apollo.QueryHookOptions<AssetQuery, AssetQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<AssetQuery, AssetQueryVariables>(AssetDocument, options);
+      }
+export function useAssetLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<AssetQuery, AssetQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<AssetQuery, AssetQueryVariables>(AssetDocument, options);
+        }
+export type AssetQueryHookResult = ReturnType<typeof useAssetQuery>;
+export type AssetLazyQueryHookResult = ReturnType<typeof useAssetLazyQuery>;
+export type AssetQueryResult = Apollo.QueryResult<AssetQuery, AssetQueryVariables>;

libs/assets/src/lib/__generated___/Assets.ts

@@ -0,0 +1,60 @@
+import { Schema as Types } from '@vegaprotocol/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type AssetsConnectionQueryVariables = Types.Exact<{ [key: string]: never; }>;
+
+
+export type AssetsConnectionQuery = { __typename?: 'Query', assetsConnection?: { __typename?: 'AssetsConnection', edges?: Array<{ __typename?: 'AssetEdge', node: { __typename?: 'Asset', id: string, name: string, symbol: string, decimals: number, quantum: string, source: { __typename?: 'BuiltinAsset' } | { __typename?: 'ERC20', contractAddress: string, lifetimeLimit: string, withdrawThreshold: string } } } | null> | null } | null };
+
+
+export const AssetsConnectionDocument = gql`
+    query AssetsConnection {
+  assetsConnection {
+    edges {
+      node {
+        id
+        name
+        symbol
+        decimals
+        quantum
+        source {
+          ... on ERC20 {
+            contractAddress
+            lifetimeLimit
+            withdrawThreshold
+          }
+        }
+      }
+    }
+  }
+}
+    `;
+
+/**
+ * __useAssetsConnectionQuery__
+ *
+ * To run a query within a React component, call `useAssetsConnectionQuery` and pass it any options that fit your needs.
+ * When your component renders, `useAssetsConnectionQuery` 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 query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useAssetsConnectionQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useAssetsConnectionQuery(baseOptions?: Apollo.QueryHookOptions<AssetsConnectionQuery, AssetsConnectionQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<AssetsConnectionQuery, AssetsConnectionQueryVariables>(AssetsConnectionDocument, options);
+      }
+export function useAssetsConnectionLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<AssetsConnectionQuery, AssetsConnectionQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<AssetsConnectionQuery, AssetsConnectionQueryVariables>(AssetsConnectionDocument, options);
+        }
+export type AssetsConnectionQueryHookResult = ReturnType<typeof useAssetsConnectionQuery>;
+export type AssetsConnectionLazyQueryHookResult = ReturnType<typeof useAssetsConnectionLazyQuery>;
+export type AssetsConnectionQueryResult = Apollo.QueryResult<AssetsConnectionQuery, AssetsConnectionQueryVariables>;

libs/candles-chart/src/lib/__generated___/Candles.ts

@@ -0,0 +1,118 @@
+import { Schema as Types } from '@vegaprotocol/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type CandleFieldsFragment = { __typename?: 'Candle', periodStart: string, lastUpdateInPeriod: string, high: string, low: string, open: string, close: string, volume: string };
+
+export type CandlesQueryVariables = Types.Exact<{
+  marketId: Types.Scalars['ID'];
+  interval: Types.Interval;
+  since: Types.Scalars['String'];
+}>;
+
+
+export type CandlesQuery = { __typename?: 'Query', market?: { __typename?: 'Market', id: string, decimalPlaces: number, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', id: string, name: string, code: string } }, candlesConnection?: { __typename?: 'CandleDataConnection', edges?: Array<{ __typename?: 'CandleEdge', node: { __typename?: 'Candle', periodStart: string, lastUpdateInPeriod: string, high: string, low: string, open: string, close: string, volume: string } } | null> | null } | null } | null };
+
+export type CandlesEventsSubscriptionVariables = Types.Exact<{
+  marketId: Types.Scalars['ID'];
+  interval: Types.Interval;
+}>;
+
+
+export type CandlesEventsSubscription = { __typename?: 'Subscription', candles: { __typename?: 'Candle', periodStart: string, lastUpdateInPeriod: string, high: string, low: string, open: string, close: string, volume: string } };
+
+export const CandleFieldsFragmentDoc = gql`
+    fragment CandleFields on Candle {
+  periodStart
+  lastUpdateInPeriod
+  high
+  low
+  open
+  close
+  volume
+}
+    `;
+export const CandlesDocument = gql`
+    query Candles($marketId: ID!, $interval: Interval!, $since: String!) {
+  market(id: $marketId) {
+    id
+    decimalPlaces
+    tradableInstrument {
+      instrument {
+        id
+        name
+        code
+      }
+    }
+    candlesConnection(interval: $interval, since: $since) {
+      edges {
+        node {
+          ...CandleFields
+        }
+      }
+    }
+  }
+}
+    ${CandleFieldsFragmentDoc}`;
+
+/**
+ * __useCandlesQuery__
+ *
+ * To run a query within a React component, call `useCandlesQuery` and pass it any options that fit your needs.
+ * When your component renders, `useCandlesQuery` 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 query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useCandlesQuery({
+ *   variables: {
+ *      marketId: // value for 'marketId'
+ *      interval: // value for 'interval'
+ *      since: // value for 'since'
+ *   },
+ * });
+ */
+export function useCandlesQuery(baseOptions: Apollo.QueryHookOptions<CandlesQuery, CandlesQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<CandlesQuery, CandlesQueryVariables>(CandlesDocument, options);
+      }
+export function useCandlesLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<CandlesQuery, CandlesQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<CandlesQuery, CandlesQueryVariables>(CandlesDocument, options);
+        }
+export type CandlesQueryHookResult = ReturnType<typeof useCandlesQuery>;
+export type CandlesLazyQueryHookResult = ReturnType<typeof useCandlesLazyQuery>;
+export type CandlesQueryResult = Apollo.QueryResult<CandlesQuery, CandlesQueryVariables>;
+export const CandlesEventsDocument = gql`
+    subscription CandlesEvents($marketId: ID!, $interval: Interval!) {
+  candles(marketId: $marketId, interval: $interval) {
+    ...CandleFields
+  }
+}
+    ${CandleFieldsFragmentDoc}`;
+
+/**
+ * __useCandlesEventsSubscription__
+ *
+ * To run a query within a React component, call `useCandlesEventsSubscription` and pass it any options that fit your needs.
+ * When your component renders, `useCandlesEventsSubscription` 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 } = useCandlesEventsSubscription({
+ *   variables: {
+ *      marketId: // value for 'marketId'
+ *      interval: // value for 'interval'
+ *   },
+ * });
+ */
+export function useCandlesEventsSubscription(baseOptions: Apollo.SubscriptionHookOptions<CandlesEventsSubscription, CandlesEventsSubscriptionVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useSubscription<CandlesEventsSubscription, CandlesEventsSubscriptionVariables>(CandlesEventsDocument, options);
+      }
+export type CandlesEventsSubscriptionHookResult = ReturnType<typeof useCandlesEventsSubscription>;
+export type CandlesEventsSubscriptionResult = Apollo.SubscriptionResult<CandlesEventsSubscription>;

libs/candles-chart/src/lib/__generated___/Chart.ts

@@ -0,0 +1,55 @@
+import { Schema as Types } from '@vegaprotocol/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type ChartQueryVariables = Types.Exact<{
+  marketId: Types.Scalars['ID'];
+}>;
+
+
+export type ChartQuery = { __typename?: 'Query', market?: { __typename?: 'Market', decimalPlaces: number, data?: { __typename?: 'MarketData', priceMonitoringBounds?: Array<{ __typename?: 'PriceMonitoringBounds', minValidPrice: string, maxValidPrice: string, referencePrice: string }> | null } | null } | null };
+
+
+export const ChartDocument = gql`
+    query Chart($marketId: ID!) {
+  market(id: $marketId) {
+    decimalPlaces
+    data {
+      priceMonitoringBounds {
+        minValidPrice
+        maxValidPrice
+        referencePrice
+      }
+    }
+  }
+}
+    `;
+
+/**
+ * __useChartQuery__
+ *
+ * To run a query within a React component, call `useChartQuery` and pass it any options that fit your needs.
+ * When your component renders, `useChartQuery` 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 query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useChartQuery({
+ *   variables: {
+ *      marketId: // value for 'marketId'
+ *   },
+ * });
+ */
+export function useChartQuery(baseOptions: Apollo.QueryHookOptions<ChartQuery, ChartQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<ChartQuery, ChartQueryVariables>(ChartDocument, options);
+      }
+export function useChartLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ChartQuery, ChartQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<ChartQuery, ChartQueryVariables>(ChartDocument, options);
+        }
+export type ChartQueryHookResult = ReturnType<typeof useChartQuery>;
+export type ChartLazyQueryHookResult = ReturnType<typeof useChartLazyQuery>;
+export type ChartQueryResult = Apollo.QueryResult<ChartQuery, ChartQueryVariables>;

libs/deal-ticket/src/components/deal-ticket/__generated___/DealTicket.ts

@@ -0,0 +1,79 @@
+import { Schema as Types } from '@vegaprotocol/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type DealTicketMarketFragment = { __typename?: 'Market', id: string, decimalPlaces: number, positionDecimalPlaces: number, state: Types.MarketState, tradingMode: Types.MarketTradingMode, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', id: string, name: string, product: { __typename?: 'Future', quoteName: string, settlementAsset: { __typename?: 'Asset', id: string, symbol: string, name: string } } } }, depth: { __typename?: 'MarketDepth', lastTrade?: { __typename?: 'Trade', price: string } | null } };
+
+export type DealTicketQueryVariables = Types.Exact<{
+  marketId: Types.Scalars['ID'];
+}>;
+
+
+export type DealTicketQuery = { __typename?: 'Query', market?: { __typename?: 'Market', id: string, decimalPlaces: number, positionDecimalPlaces: number, state: Types.MarketState, tradingMode: Types.MarketTradingMode, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', id: string, name: string, product: { __typename?: 'Future', quoteName: string, settlementAsset: { __typename?: 'Asset', id: string, symbol: string, name: string } } } }, depth: { __typename?: 'MarketDepth', lastTrade?: { __typename?: 'Trade', price: string } | null } } | null };
+
+export const DealTicketMarketFragmentDoc = gql`
+    fragment DealTicketMarket on Market {
+  id
+  decimalPlaces
+  positionDecimalPlaces
+  state
+  tradingMode
+  tradableInstrument {
+    instrument {
+      id
+      name
+      product {
+        ... on Future {
+          quoteName
+          settlementAsset {
+            id
+            symbol
+            name
+          }
+        }
+      }
+    }
+  }
+  depth {
+    lastTrade {
+      price
+    }
+  }
+}
+    `;
+export const DealTicketDocument = gql`
+    query DealTicket($marketId: ID!) {
+  market(id: $marketId) {
+    ...DealTicketMarket
+  }
+}
+    ${DealTicketMarketFragmentDoc}`;
+
+/**
+ * __useDealTicketQuery__
+ *
+ * To run a query within a React component, call `useDealTicketQuery` and pass it any options that fit your needs.
+ * When your component renders, `useDealTicketQuery` 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 query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useDealTicketQuery({
+ *   variables: {
+ *      marketId: // value for 'marketId'
+ *   },
+ * });
+ */
+export function useDealTicketQuery(baseOptions: Apollo.QueryHookOptions<DealTicketQuery, DealTicketQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<DealTicketQuery, DealTicketQueryVariables>(DealTicketDocument, options);
+      }
+export function useDealTicketLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<DealTicketQuery, DealTicketQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<DealTicketQuery, DealTicketQueryVariables>(DealTicketDocument, options);
+        }
+export type DealTicketQueryHookResult = ReturnType<typeof useDealTicketQuery>;
+export type DealTicketLazyQueryHookResult = ReturnType<typeof useDealTicketLazyQuery>;
+export type DealTicketQueryResult = Apollo.QueryResult<DealTicketQuery, DealTicketQueryVariables>;

libs/deposits/src/lib/__generated___/Deposit.ts

@@ -0,0 +1,112 @@
+import { Schema as Types } from '@vegaprotocol/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type DepositFieldsFragment = { __typename?: 'Deposit', id: string, status: Types.DepositStatus, amount: string, createdTimestamp: string, creditedTimestamp?: string | null, txHash?: string | null, asset: { __typename?: 'Asset', id: string, symbol: string, decimals: number } };
+
+export type DepositsQueryVariables = Types.Exact<{
+  partyId: Types.Scalars['ID'];
+}>;
+
+
+export type DepositsQuery = { __typename?: 'Query', party?: { __typename?: 'Party', id: string, depositsConnection?: { __typename?: 'DepositsConnection', edges?: Array<{ __typename?: 'DepositEdge', node: { __typename?: 'Deposit', id: string, status: Types.DepositStatus, amount: string, createdTimestamp: string, creditedTimestamp?: string | null, txHash?: string | null, asset: { __typename?: 'Asset', id: string, symbol: string, decimals: number } } } | null> | null } | null } | null };
+
+export type DepositEventSubscriptionVariables = Types.Exact<{
+  partyId: Types.Scalars['ID'];
+}>;
+
+
+export type DepositEventSubscription = { __typename?: 'Subscription', busEvents?: Array<{ __typename?: 'BusEvent', event: { __typename?: 'Account' } | { __typename?: 'Asset' } | { __typename?: 'AuctionEvent' } | { __typename?: 'Deposit', id: string, status: Types.DepositStatus, amount: string, createdTimestamp: string, creditedTimestamp?: string | null, txHash?: string | null, asset: { __typename?: 'Asset', id: string, symbol: string, decimals: number } } | { __typename?: 'LiquidityProvision' } | { __typename?: 'LossSocialization' } | { __typename?: 'MarginLevels' } | { __typename?: 'Market' } | { __typename?: 'MarketData' } | { __typename?: 'MarketEvent' } | { __typename?: 'MarketTick' } | { __typename?: 'NodeSignature' } | { __typename?: 'OracleSpec' } | { __typename?: 'Order' } | { __typename?: 'Party' } | { __typename?: 'PositionResolution' } | { __typename?: 'Proposal' } | { __typename?: 'RiskFactor' } | { __typename?: 'SettleDistressed' } | { __typename?: 'SettlePosition' } | { __typename?: 'TimeUpdate' } | { __typename?: 'Trade' } | { __typename?: 'TransferResponses' } | { __typename?: 'Vote' } | { __typename?: 'Withdrawal' } }> | null };
+
+export const DepositFieldsFragmentDoc = gql`
+    fragment DepositFields on Deposit {
+  id
+  status
+  amount
+  asset {
+    id
+    symbol
+    decimals
+  }
+  createdTimestamp
+  creditedTimestamp
+  txHash
+}
+    `;
+export const DepositsDocument = gql`
+    query Deposits($partyId: ID!) {
+  party(id: $partyId) {
+    id
+    depositsConnection {
+      edges {
+        node {
+          ...DepositFields
+        }
+      }
+    }
+  }
+}
+    ${DepositFieldsFragmentDoc}`;
+
+/**
+ * __useDepositsQuery__
+ *
+ * To run a query within a React component, call `useDepositsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useDepositsQuery` 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 query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useDepositsQuery({
+ *   variables: {
+ *      partyId: // value for 'partyId'
+ *   },
+ * });
+ */
+export function useDepositsQuery(baseOptions: Apollo.QueryHookOptions<DepositsQuery, DepositsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<DepositsQuery, DepositsQueryVariables>(DepositsDocument, options);
+      }
+export function useDepositsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<DepositsQuery, DepositsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<DepositsQuery, DepositsQueryVariables>(DepositsDocument, options);
+        }
+export type DepositsQueryHookResult = ReturnType<typeof useDepositsQuery>;
+export type DepositsLazyQueryHookResult = ReturnType<typeof useDepositsLazyQuery>;
+export type DepositsQueryResult = Apollo.QueryResult<DepositsQuery, DepositsQueryVariables>;
+export const DepositEventDocument = gql`
+    subscription DepositEvent($partyId: ID!) {
+  busEvents(partyId: $partyId, batchSize: 0, types: [Deposit]) {
+    event {
+      ... on Deposit {
+        ...DepositFields
+      }
+    }
+  }
+}
+    ${DepositFieldsFragmentDoc}`;
+
+/**
+ * __useDepositEventSubscription__
+ *
+ * To run a query within a React component, call `useDepositEventSubscription` and pass it any options that fit your needs.
+ * When your component renders, `useDepositEventSubscription` 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 } = useDepositEventSubscription({
+ *   variables: {
+ *      partyId: // value for 'partyId'
+ *   },
+ * });
+ */
+export function useDepositEventSubscription(baseOptions: Apollo.SubscriptionHookOptions<DepositEventSubscription, DepositEventSubscriptionVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useSubscription<DepositEventSubscription, DepositEventSubscriptionVariables>(DepositEventDocument, options);
+      }
+export type DepositEventSubscriptionHookResult = ReturnType<typeof useDepositEventSubscription>;
+export type DepositEventSubscriptionResult = Apollo.SubscriptionResult<DepositEventSubscription>;

libs/environment/src/utils/__generated___/Node.ts

@@ -0,0 +1,80 @@
+import { Schema as Types } from '@vegaprotocol/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type StatisticsQueryVariables = Types.Exact<{ [key: string]: never; }>;
+
+
+export type StatisticsQuery = { __typename?: 'Query', statistics: { __typename?: 'Statistics', chainId: string, blockHeight: string } };
+
+export type BlockTimeSubscriptionVariables = Types.Exact<{ [key: string]: never; }>;
+
+
+export type BlockTimeSubscription = { __typename?: 'Subscription', busEvents?: Array<{ __typename?: 'BusEvent', id: string }> | null };
+
+
+export const StatisticsDocument = gql`
+    query Statistics {
+  statistics {
+    chainId
+    blockHeight
+  }
+}
+    `;
+
+/**
+ * __useStatisticsQuery__
+ *
+ * To run a query within a React component, call `useStatisticsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useStatisticsQuery` 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 query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useStatisticsQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useStatisticsQuery(baseOptions?: Apollo.QueryHookOptions<StatisticsQuery, StatisticsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<StatisticsQuery, StatisticsQueryVariables>(StatisticsDocument, options);
+      }
+export function useStatisticsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<StatisticsQuery, StatisticsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<StatisticsQuery, StatisticsQueryVariables>(StatisticsDocument, options);
+        }
+export type StatisticsQueryHookResult = ReturnType<typeof useStatisticsQuery>;
+export type StatisticsLazyQueryHookResult = ReturnType<typeof useStatisticsLazyQuery>;
+export type StatisticsQueryResult = Apollo.QueryResult<StatisticsQuery, StatisticsQueryVariables>;
+export const BlockTimeDocument = gql`
+    subscription BlockTime {
+  busEvents(types: TimeUpdate, batchSize: 1) {
+    id
+  }
+}
+    `;
+
+/**
+ * __useBlockTimeSubscription__
+ *
+ * To run a query within a React component, call `useBlockTimeSubscription` and pass it any options that fit your needs.
+ * When your component renders, `useBlockTimeSubscription` 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 } = useBlockTimeSubscription({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useBlockTimeSubscription(baseOptions?: Apollo.SubscriptionHookOptions<BlockTimeSubscription, BlockTimeSubscriptionVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useSubscription<BlockTimeSubscription, BlockTimeSubscriptionVariables>(BlockTimeDocument, options);
+      }
+export type BlockTimeSubscriptionHookResult = ReturnType<typeof useBlockTimeSubscription>;
+export type BlockTimeSubscriptionResult = Apollo.SubscriptionResult<BlockTimeSubscription>;

libs/fills/src/lib/__generated___/Fills.ts

@@ -0,0 +1,161 @@
+import { Schema as Types } from '@vegaprotocol/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type FillFieldsFragment = { __typename?: 'Trade', id: string, createdAt: string, price: string, size: string, buyOrder: string, sellOrder: string, aggressor: Types.Side, market: { __typename?: 'Market', id: string }, buyer: { __typename?: 'Party', id: string }, seller: { __typename?: 'Party', id: string }, buyerFee: { __typename?: 'TradeFee', makerFee: string, infrastructureFee: string, liquidityFee: string }, sellerFee: { __typename?: 'TradeFee', makerFee: string, infrastructureFee: string, liquidityFee: string } };
+
+export type FillEdgeFragment = { __typename?: 'TradeEdge', cursor: string, node: { __typename?: 'Trade', id: string, createdAt: string, price: string, size: string, buyOrder: string, sellOrder: string, aggressor: Types.Side, market: { __typename?: 'Market', id: string }, buyer: { __typename?: 'Party', id: string }, seller: { __typename?: 'Party', id: string }, buyerFee: { __typename?: 'TradeFee', makerFee: string, infrastructureFee: string, liquidityFee: string }, sellerFee: { __typename?: 'TradeFee', makerFee: string, infrastructureFee: string, liquidityFee: string } } };
+
+export type FillsQueryVariables = Types.Exact<{
+  partyId: Types.Scalars['ID'];
+  marketId?: Types.InputMaybe<Types.Scalars['ID']>;
+  pagination?: Types.InputMaybe<Types.Pagination>;
+}>;
+
+
+export type FillsQuery = { __typename?: 'Query', party?: { __typename?: 'Party', id: string, tradesConnection?: { __typename?: 'TradeConnection', edges: Array<{ __typename?: 'TradeEdge', cursor: string, node: { __typename?: 'Trade', id: string, createdAt: string, price: string, size: string, buyOrder: string, sellOrder: string, aggressor: Types.Side, market: { __typename?: 'Market', id: string }, buyer: { __typename?: 'Party', id: string }, seller: { __typename?: 'Party', id: string }, buyerFee: { __typename?: 'TradeFee', makerFee: string, infrastructureFee: string, liquidityFee: string }, sellerFee: { __typename?: 'TradeFee', makerFee: string, infrastructureFee: string, liquidityFee: string } } }>, pageInfo: { __typename?: 'PageInfo', startCursor: string, endCursor: string, hasNextPage: boolean, hasPreviousPage: boolean } } | null } | null };
+
+export type FillsEventSubscriptionVariables = Types.Exact<{
+  partyId: Types.Scalars['ID'];
+}>;
+
+
+export type FillsEventSubscription = { __typename?: 'Subscription', trades?: Array<{ __typename?: 'TradeUpdate', id: string, marketId: string, buyOrder: string, sellOrder: string, buyerId: string, sellerId: string, aggressor: Types.Side, price: string, size: string, createdAt: string, type: Types.TradeType, buyerFee: { __typename?: 'TradeFee', makerFee: string, infrastructureFee: string, liquidityFee: string }, sellerFee: { __typename?: 'TradeFee', makerFee: string, infrastructureFee: string, liquidityFee: string } }> | null };
+
+export const FillFieldsFragmentDoc = gql`
+    fragment FillFields on Trade {
+  id
+  market {
+    id
+  }
+  createdAt
+  price
+  size
+  buyOrder
+  sellOrder
+  aggressor
+  buyer {
+    id
+  }
+  seller {
+    id
+  }
+  buyerFee {
+    makerFee
+    infrastructureFee
+    liquidityFee
+  }
+  sellerFee {
+    makerFee
+    infrastructureFee
+    liquidityFee
+  }
+}
+    `;
+export const FillEdgeFragmentDoc = gql`
+    fragment FillEdge on TradeEdge {
+  node {
+    ...FillFields
+  }
+  cursor
+}
+    ${FillFieldsFragmentDoc}`;
+export const FillsDocument = gql`
+    query Fills($partyId: ID!, $marketId: ID, $pagination: Pagination) {
+  party(id: $partyId) {
+    id
+    tradesConnection(marketId: $marketId, pagination: $pagination) {
+      edges {
+        ...FillEdge
+      }
+      pageInfo {
+        startCursor
+        endCursor
+        hasNextPage
+        hasPreviousPage
+      }
+    }
+  }
+}
+    ${FillEdgeFragmentDoc}`;
+
+/**
+ * __useFillsQuery__
+ *
+ * To run a query within a React component, call `useFillsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useFillsQuery` 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 query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useFillsQuery({
+ *   variables: {
+ *      partyId: // value for 'partyId'
+ *      marketId: // value for 'marketId'
+ *      pagination: // value for 'pagination'
+ *   },
+ * });
+ */
+export function useFillsQuery(baseOptions: Apollo.QueryHookOptions<FillsQuery, FillsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<FillsQuery, FillsQueryVariables>(FillsDocument, options);
+      }
+export function useFillsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<FillsQuery, FillsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<FillsQuery, FillsQueryVariables>(FillsDocument, options);
+        }
+export type FillsQueryHookResult = ReturnType<typeof useFillsQuery>;
+export type FillsLazyQueryHookResult = ReturnType<typeof useFillsLazyQuery>;
+export type FillsQueryResult = Apollo.QueryResult<FillsQuery, FillsQueryVariables>;
+export const FillsEventDocument = gql`
+    subscription FillsEvent($partyId: ID!) {
+  trades(partyId: $partyId) {
+    id
+    marketId
+    buyOrder
+    sellOrder
+    buyerId
+    sellerId
+    aggressor
+    price
+    size
+    createdAt
+    type
+    buyerFee {
+      makerFee
+      infrastructureFee
+      liquidityFee
+    }
+    sellerFee {
+      makerFee
+      infrastructureFee
+      liquidityFee
+    }
+  }
+}
+    `;
+
+/**
+ * __useFillsEventSubscription__
+ *
+ * To run a query within a React component, call `useFillsEventSubscription` and pass it any options that fit your needs.
+ * When your component renders, `useFillsEventSubscription` 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 } = useFillsEventSubscription({
+ *   variables: {
+ *      partyId: // value for 'partyId'
+ *   },
+ * });
+ */
+export function useFillsEventSubscription(baseOptions: Apollo.SubscriptionHookOptions<FillsEventSubscription, FillsEventSubscriptionVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useSubscription<FillsEventSubscription, FillsEventSubscriptionVariables>(FillsEventDocument, options);
+      }
+export type FillsEventSubscriptionHookResult = ReturnType<typeof useFillsEventSubscription>;
+export type FillsEventSubscriptionResult = Apollo.SubscriptionResult<FillsEventSubscription>;

libs/market-depth/src/lib/market-depth-provider.ts

@@ -60,10 +60,19 @@ const update: Update<
 > = (data, deltas, reload) => {
   for (const delta of deltas) {
     if (delta.marketId !== data.id) {
+      //console.log('wrong-market');
       continue;
     }
     const sequenceNumber = Number(delta.sequenceNumber);
+    console.log(delta.previousSequenceNumber, delta.sequenceNumber);
     if (sequenceNumber <= sequenceNumbers[delta.marketId]) {
+      /*
+      console.log(
+        'smaller sequence number',
+        sequenceNumber,
+        sequenceNumbers[delta.marketId]
+      );
+      */
       return data;
     }
     /*
@@ -73,6 +82,8 @@ const update: Update<
       return;
     }
     */
+    // const { buy, sell } = delta;
+    // console.log({ buy, sell });
     sequenceNumbers[delta.marketId] = sequenceNumber;
     const updatedData = {
       ...data,
@@ -84,6 +95,7 @@ const update: Update<
     if (delta.sell) {
       updatedData.depth.sell = updateLevels(data.depth.sell ?? [], delta.sell);
     }
+    // console.log({ updatedData });
     return updatedData;
   }
   return data;

libs/market-list/src/lib/__generated__/MarketCandlesQuery.ts

@@ -1,87 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-// @generated
-// This file was automatically generated and should not be edited.
-
-import { Interval } from "@vegaprotocol/types";
-
-// ====================================================
-// GraphQL query operation: MarketCandlesQuery
-// ====================================================
-
-export interface MarketCandlesQuery_marketsConnection_edges_node_candlesConnection_edges_node {
-  __typename: "Candle";
-  /**
-   * High price (uint64)
-   */
-  high: string;
-  /**
-   * Low price (uint64)
-   */
-  low: string;
-  /**
-   * Open price (uint64)
-   */
-  open: string;
-  /**
-   * Close price (uint64)
-   */
-  close: string;
-  /**
-   * Volume price (uint64)
-   */
-  volume: string;
-}
-
-export interface MarketCandlesQuery_marketsConnection_edges_node_candlesConnection_edges {
-  __typename: "CandleEdge";
-  /**
-   * The candle
-   */
-  node: MarketCandlesQuery_marketsConnection_edges_node_candlesConnection_edges_node;
-}
-
-export interface MarketCandlesQuery_marketsConnection_edges_node_candlesConnection {
-  __typename: "CandleDataConnection";
-  /**
-   * The candles
-   */
-  edges: (MarketCandlesQuery_marketsConnection_edges_node_candlesConnection_edges | null)[] | null;
-}
-
-export interface MarketCandlesQuery_marketsConnection_edges_node {
-  __typename: "Market";
-  /**
-   * Candles on a market, for the 'last' n candles, at 'interval' seconds as specified by parameters using cursor based pagination
-   */
-  candlesConnection: MarketCandlesQuery_marketsConnection_edges_node_candlesConnection | null;
-}
-
-export interface MarketCandlesQuery_marketsConnection_edges {
-  __typename: "MarketEdge";
-  /**
-   * The market
-   */
-  node: MarketCandlesQuery_marketsConnection_edges_node;
-}
-
-export interface MarketCandlesQuery_marketsConnection {
-  __typename: "MarketConnection";
-  /**
-   * The markets in this connection
-   */
-  edges: MarketCandlesQuery_marketsConnection_edges[];
-}
-
-export interface MarketCandlesQuery {
-  /**
-   * One or more instruments that are trading on the Vega network
-   */
-  marketsConnection: MarketCandlesQuery_marketsConnection | null;
-}
-
-export interface MarketCandlesQueryVariables {
-  interval: Interval;
-  since: string;
-  marketId: string;
-}

libs/market-list/src/lib/__generated__/MarketCandlesSub.ts

@@ -1,46 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-// @generated
-// This file was automatically generated and should not be edited.
-
-import { Interval } from "@vegaprotocol/types";
-
-// ====================================================
-// GraphQL subscription operation: MarketCandlesSub
-// ====================================================
-
-export interface MarketCandlesSub_candles {
-  __typename: "Candle";
-  /**
-   * High price (uint64)
-   */
-  high: string;
-  /**
-   * Low price (uint64)
-   */
-  low: string;
-  /**
-   * Open price (uint64)
-   */
-  open: string;
-  /**
-   * Close price (uint64)
-   */
-  close: string;
-  /**
-   * Volume price (uint64)
-   */
-  volume: string;
-}
-
-export interface MarketCandlesSub {
-  /**
-   * Subscribe to the candles updates
-   */
-  candles: MarketCandlesSub_candles;
-}
-
-export interface MarketCandlesSubVariables {
-  marketId: string;
-  interval: Interval;
-}

libs/market-list/src/lib/__generated__/MarketDataQuery.ts

@@ -1,101 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-// @generated
-// This file was automatically generated and should not be edited.
-
-import { AuctionTrigger, MarketTradingMode } from "@vegaprotocol/types";
-
-// ====================================================
-// GraphQL query operation: MarketDataQuery
-// ====================================================
-
-export interface MarketDataQuery_marketsConnection_edges_node_data_market {
-  __typename: "Market";
-  /**
-   * Market ID
-   */
-  id: string;
-}
-
-export interface MarketDataQuery_marketsConnection_edges_node_data {
-  __typename: "MarketData";
-  /**
-   * Market of the associated mark price
-   */
-  market: MarketDataQuery_marketsConnection_edges_node_data_market;
-  /**
-   * The highest price level on an order book for buy orders.
-   */
-  bestBidPrice: string;
-  /**
-   * The lowest price level on an order book for offer orders.
-   */
-  bestOfferPrice: string;
-  /**
-   * The mark price (an unsigned integer)
-   */
-  markPrice: string;
-  /**
-   * What triggered an auction (if an auction was started)
-   */
-  trigger: AuctionTrigger;
-  /**
-   * The arithmetic average of the best static bid price and best static offer price
-   */
-  staticMidPrice: string;
-  /**
-   * What mode the market is in (auction, continuous, etc)
-   */
-  marketTradingMode: MarketTradingMode;
-  /**
-   * Indicative volume if the auction ended now, 0 if not in auction mode
-   */
-  indicativeVolume: string;
-  /**
-   * Indicative price if the auction ended now, 0 if not in auction mode
-   */
-  indicativePrice: string;
-  /**
-   * The highest price level on an order book for buy orders not including pegged orders.
-   */
-  bestStaticBidPrice: string;
-  /**
-   * The lowest price level on an order book for offer orders not including pegged orders.
-   */
-  bestStaticOfferPrice: string;
-}
-
-export interface MarketDataQuery_marketsConnection_edges_node {
-  __typename: "Market";
-  /**
-   * marketData for the given market
-   */
-  data: MarketDataQuery_marketsConnection_edges_node_data | null;
-}
-
-export interface MarketDataQuery_marketsConnection_edges {
-  __typename: "MarketEdge";
-  /**
-   * The market
-   */
-  node: MarketDataQuery_marketsConnection_edges_node;
-}
-
-export interface MarketDataQuery_marketsConnection {
-  __typename: "MarketConnection";
-  /**
-   * The markets in this connection
-   */
-  edges: MarketDataQuery_marketsConnection_edges[];
-}
-
-export interface MarketDataQuery {
-  /**
-   * One or more instruments that are trading on the Vega network
-   */
-  marketsConnection: MarketDataQuery_marketsConnection | null;
-}
-
-export interface MarketDataQueryVariables {
-  marketId: string;
-}

libs/market-list/src/lib/__generated__/MarketDataSub.ts

@@ -1,69 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-// @generated
-// This file was automatically generated and should not be edited.
-
-import { AuctionTrigger, MarketTradingMode } from "@vegaprotocol/types";
-
-// ====================================================
-// GraphQL subscription operation: MarketDataSub
-// ====================================================
-
-export interface MarketDataSub_marketsData {
-  __typename: "ObservableMarketData";
-  /**
-   * Market ID of the associated mark price
-   */
-  marketId: string;
-  /**
-   * The highest price level on an order book for buy orders.
-   */
-  bestBidPrice: string;
-  /**
-   * The lowest price level on an order book for offer orders.
-   */
-  bestOfferPrice: string;
-  /**
-   * The mark price (an unsigned integer)
-   */
-  markPrice: string;
-  /**
-   * What triggered an auction (if an auction was started)
-   */
-  trigger: AuctionTrigger;
-  /**
-   * The arithmetic average of the best static bid price and best static offer price
-   */
-  staticMidPrice: string;
-  /**
-   * What mode the market is in (auction, continuous etc)
-   */
-  marketTradingMode: MarketTradingMode;
-  /**
-   * Indicative volume if the auction ended now, 0 if not in auction mode
-   */
-  indicativeVolume: string;
-  /**
-   * Indicative price if the auction ended now, 0 if not in auction mode
-   */
-  indicativePrice: string;
-  /**
-   * The highest price level on an order book for buy orders not including pegged orders.
-   */
-  bestStaticBidPrice: string;
-  /**
-   * The lowest price level on an order book for offer orders not including pegged orders
-   */
-  bestStaticOfferPrice: string;
-}
-
-export interface MarketDataSub {
-  /**
-   * Subscribe to the mark price changes
-   */
-  marketsData: MarketDataSub_marketsData[];
-}
-
-export interface MarketDataSubVariables {
-  marketId: string;
-}

libs/market-list/src/lib/__generated__/MarketFields.ts

@@ -1,162 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-// @generated
-// This file was automatically generated and should not be edited.
-
-import { MarketState, MarketTradingMode } from "@vegaprotocol/types";
-
-// ====================================================
-// GraphQL fragment: MarketFields
-// ====================================================
-
-export interface MarketFields_fees_factors {
-  __typename: "FeeFactors";
-  /**
-   * The factor applied to calculate MakerFees, a non-negative float
-   */
-  makerFee: string;
-  /**
-   * The factor applied to calculate InfrastructureFees, a non-negative float
-   */
-  infrastructureFee: string;
-  /**
-   * The factor applied to calculate LiquidityFees, a non-negative float
-   */
-  liquidityFee: string;
-}
-
-export interface MarketFields_fees {
-  __typename: "Fees";
-  /**
-   * The factors used to calculate the different fees
-   */
-  factors: MarketFields_fees_factors;
-}
-
-export interface MarketFields_tradableInstrument_instrument_metadata {
-  __typename: "InstrumentMetadata";
-  /**
-   * An arbitrary list of tags to associated to associate to the Instrument (string list)
-   */
-  tags: string[] | null;
-}
-
-export interface MarketFields_tradableInstrument_instrument_product_settlementAsset {
-  __typename: "Asset";
-  /**
-   * The symbol of the asset (e.g: GBP)
-   */
-  symbol: string;
-  /**
-   * The precision of the asset. Should match the decimal precision of the asset on its native chain, e.g: for ERC20 assets, it is often 18
-   */
-  decimals: number;
-}
-
-export interface MarketFields_tradableInstrument_instrument_product {
-  __typename: "Future";
-  /**
-   * The name of the asset (string)
-   */
-  settlementAsset: MarketFields_tradableInstrument_instrument_product_settlementAsset;
-  /**
-   * String representing the quote (e.g. BTCUSD -> USD is quote)
-   */
-  quoteName: string;
-}
-
-export interface MarketFields_tradableInstrument_instrument {
-  __typename: "Instrument";
-  /**
-   * Uniquely identify an instrument across all instruments available on Vega (string)
-   */
-  id: string;
-  /**
-   * Full and fairly descriptive name for the instrument
-   */
-  name: string;
-  /**
-   * A short non necessarily unique code used to easily describe the instrument (e.g: FX:BTCUSD/DEC18) (string)
-   */
-  code: string;
-  /**
-   * Metadata for this instrument
-   */
-  metadata: MarketFields_tradableInstrument_instrument_metadata;
-  /**
-   * A reference to or instance of a fully specified product, including all required product parameters for that product (Product union)
-   */
-  product: MarketFields_tradableInstrument_instrument_product;
-}
-
-export interface MarketFields_tradableInstrument {
-  __typename: "TradableInstrument";
-  /**
-   * An instance of, or reference to, a fully specified instrument.
-   */
-  instrument: MarketFields_tradableInstrument_instrument;
-}
-
-export interface MarketFields_marketTimestamps {
-  __typename: "MarketTimestamps";
-  /**
-   * Time when the market is open and ready to accept trades
-   */
-  open: string | null;
-  /**
-   * Time when the market is closed
-   */
-  close: string | null;
-}
-
-export interface MarketFields {
-  __typename: "Market";
-  /**
-   * Market ID
-   */
-  id: string;
-  /**
-   * The number of decimal places that an integer must be shifted by in order to get a correct
-   * number denominated in the currency of the market. (uint64)
-   * 
-   * Examples:
-   * Currency     Balance  decimalPlaces  Real Balance
-   * GBP              100              0       GBP 100
-   * GBP              100              2       GBP   1.00
-   * GBP              100              4       GBP   0.01
-   * GBP                1              4       GBP   0.0001   (  0.01p  )
-   * 
-   * GBX (pence)      100              0       GBP   1.00     (100p     )
-   * GBX (pence)      100              2       GBP   0.01     (  1p     )
-   * GBX (pence)      100              4       GBP   0.0001   (  0.01p  )
-   * GBX (pence)        1              4       GBP   0.000001 (  0.0001p)
-   */
-  decimalPlaces: number;
-  /**
-   * The number of decimal places that an integer must be shifted in order to get a correct size (uint64).
-   * i.e. 0 means there are no fractional orders for the market, and order sizes are always whole sizes.
-   * 2 means sizes given as 10^2 * desired size, e.g. a desired size of 1.23 is represented as 123 in this market.
-   * This sets how big the smallest order / position on the market can be.
-   */
-  positionDecimalPlaces: number;
-  /**
-   * Current state of the market
-   */
-  state: MarketState;
-  /**
-   * Current mode of execution of the market
-   */
-  tradingMode: MarketTradingMode;
-  /**
-   * Fees related data
-   */
-  fees: MarketFields_fees;
-  /**
-   * An instance of, or reference to, a tradable instrument.
-   */
-  tradableInstrument: MarketFields_tradableInstrument;
-  /**
-   * Timestamps for state changes in the market
-   */
-  marketTimestamps: MarketFields_marketTimestamps;
-}

libs/market-list/src/lib/__generated__/Markets.ts

@@ -1,185 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-// @generated
-// This file was automatically generated and should not be edited.
-
-import { MarketState, MarketTradingMode } from "@vegaprotocol/types";
-
-// ====================================================
-// GraphQL query operation: Markets
-// ====================================================
-
-export interface Markets_marketsConnection_edges_node_fees_factors {
-  __typename: "FeeFactors";
-  /**
-   * The factor applied to calculate MakerFees, a non-negative float
-   */
-  makerFee: string;
-  /**
-   * The factor applied to calculate InfrastructureFees, a non-negative float
-   */
-  infrastructureFee: string;
-  /**
-   * The factor applied to calculate LiquidityFees, a non-negative float
-   */
-  liquidityFee: string;
-}
-
-export interface Markets_marketsConnection_edges_node_fees {
-  __typename: "Fees";
-  /**
-   * The factors used to calculate the different fees
-   */
-  factors: Markets_marketsConnection_edges_node_fees_factors;
-}
-
-export interface Markets_marketsConnection_edges_node_tradableInstrument_instrument_metadata {
-  __typename: "InstrumentMetadata";
-  /**
-   * An arbitrary list of tags to associated to associate to the Instrument (string list)
-   */
-  tags: string[] | null;
-}
-
-export interface Markets_marketsConnection_edges_node_tradableInstrument_instrument_product_settlementAsset {
-  __typename: "Asset";
-  /**
-   * The symbol of the asset (e.g: GBP)
-   */
-  symbol: string;
-  /**
-   * The precision of the asset. Should match the decimal precision of the asset on its native chain, e.g: for ERC20 assets, it is often 18
-   */
-  decimals: number;
-}
-
-export interface Markets_marketsConnection_edges_node_tradableInstrument_instrument_product {
-  __typename: "Future";
-  /**
-   * The name of the asset (string)
-   */
-  settlementAsset: Markets_marketsConnection_edges_node_tradableInstrument_instrument_product_settlementAsset;
-  /**
-   * String representing the quote (e.g. BTCUSD -> USD is quote)
-   */
-  quoteName: string;
-}
-
-export interface Markets_marketsConnection_edges_node_tradableInstrument_instrument {
-  __typename: "Instrument";
-  /**
-   * Uniquely identify an instrument across all instruments available on Vega (string)
-   */
-  id: string;
-  /**
-   * Full and fairly descriptive name for the instrument
-   */
-  name: string;
-  /**
-   * A short non necessarily unique code used to easily describe the instrument (e.g: FX:BTCUSD/DEC18) (string)
-   */
-  code: string;
-  /**
-   * Metadata for this instrument
-   */
-  metadata: Markets_marketsConnection_edges_node_tradableInstrument_instrument_metadata;
-  /**
-   * A reference to or instance of a fully specified product, including all required product parameters for that product (Product union)
-   */
-  product: Markets_marketsConnection_edges_node_tradableInstrument_instrument_product;
-}
-
-export interface Markets_marketsConnection_edges_node_tradableInstrument {
-  __typename: "TradableInstrument";
-  /**
-   * An instance of, or reference to, a fully specified instrument.
-   */
-  instrument: Markets_marketsConnection_edges_node_tradableInstrument_instrument;
-}
-
-export interface Markets_marketsConnection_edges_node_marketTimestamps {
-  __typename: "MarketTimestamps";
-  /**
-   * Time when the market is open and ready to accept trades
-   */
-  open: string | null;
-  /**
-   * Time when the market is closed
-   */
-  close: string | null;
-}
-
-export interface Markets_marketsConnection_edges_node {
-  __typename: "Market";
-  /**
-   * Market ID
-   */
-  id: string;
-  /**
-   * The number of decimal places that an integer must be shifted by in order to get a correct
-   * number denominated in the currency of the market. (uint64)
-   * 
-   * Examples:
-   * Currency     Balance  decimalPlaces  Real Balance
-   * GBP              100              0       GBP 100
-   * GBP              100              2       GBP   1.00
-   * GBP              100              4       GBP   0.01
-   * GBP                1              4       GBP   0.0001   (  0.01p  )
-   * 
-   * GBX (pence)      100              0       GBP   1.00     (100p     )
-   * GBX (pence)      100              2       GBP   0.01     (  1p     )
-   * GBX (pence)      100              4       GBP   0.0001   (  0.01p  )
-   * GBX (pence)        1              4       GBP   0.000001 (  0.0001p)
-   */
-  decimalPlaces: number;
-  /**
-   * The number of decimal places that an integer must be shifted in order to get a correct size (uint64).
-   * i.e. 0 means there are no fractional orders for the market, and order sizes are always whole sizes.
-   * 2 means sizes given as 10^2 * desired size, e.g. a desired size of 1.23 is represented as 123 in this market.
-   * This sets how big the smallest order / position on the market can be.
-   */
-  positionDecimalPlaces: number;
-  /**
-   * Current state of the market
-   */
-  state: MarketState;
-  /**
-   * Current mode of execution of the market
-   */
-  tradingMode: MarketTradingMode;
-  /**
-   * Fees related data
-   */
-  fees: Markets_marketsConnection_edges_node_fees;
-  /**
-   * An instance of, or reference to, a tradable instrument.
-   */
-  tradableInstrument: Markets_marketsConnection_edges_node_tradableInstrument;
-  /**
-   * Timestamps for state changes in the market
-   */
-  marketTimestamps: Markets_marketsConnection_edges_node_marketTimestamps;
-}
-
-export interface Markets_marketsConnection_edges {
-  __typename: "MarketEdge";
-  /**
-   * The market
-   */
-  node: Markets_marketsConnection_edges_node;
-}
-
-export interface Markets_marketsConnection {
-  __typename: "MarketConnection";
-  /**
-   * The markets in this connection
-   */
-  edges: Markets_marketsConnection_edges[];
-}
-
-export interface Markets {
-  /**
-   * One or more instruments that are trading on the Vega network
-   */
-  marketsConnection: Markets_marketsConnection | null;
-}

libs/market-list/src/lib/__generated__/MarketsCandlesQuery.ts

@@ -1,90 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-// @generated
-// This file was automatically generated and should not be edited.
-
-import { Interval } from "@vegaprotocol/types";
-
-// ====================================================
-// GraphQL query operation: MarketsCandlesQuery
-// ====================================================
-
-export interface MarketsCandlesQuery_marketsConnection_edges_node_candlesConnection_edges_node {
-  __typename: "Candle";
-  /**
-   * High price (uint64)
-   */
-  high: string;
-  /**
-   * Low price (uint64)
-   */
-  low: string;
-  /**
-   * Open price (uint64)
-   */
-  open: string;
-  /**
-   * Close price (uint64)
-   */
-  close: string;
-  /**
-   * Volume price (uint64)
-   */
-  volume: string;
-}
-
-export interface MarketsCandlesQuery_marketsConnection_edges_node_candlesConnection_edges {
-  __typename: "CandleEdge";
-  /**
-   * The candle
-   */
-  node: MarketsCandlesQuery_marketsConnection_edges_node_candlesConnection_edges_node;
-}
-
-export interface MarketsCandlesQuery_marketsConnection_edges_node_candlesConnection {
-  __typename: "CandleDataConnection";
-  /**
-   * The candles
-   */
-  edges: (MarketsCandlesQuery_marketsConnection_edges_node_candlesConnection_edges | null)[] | null;
-}
-
-export interface MarketsCandlesQuery_marketsConnection_edges_node {
-  __typename: "Market";
-  /**
-   * Market ID
-   */
-  id: string;
-  /**
-   * Candles on a market, for the 'last' n candles, at 'interval' seconds as specified by parameters using cursor based pagination
-   */
-  candlesConnection: MarketsCandlesQuery_marketsConnection_edges_node_candlesConnection | null;
-}
-
-export interface MarketsCandlesQuery_marketsConnection_edges {
-  __typename: "MarketEdge";
-  /**
-   * The market
-   */
-  node: MarketsCandlesQuery_marketsConnection_edges_node;
-}
-
-export interface MarketsCandlesQuery_marketsConnection {
-  __typename: "MarketConnection";
-  /**
-   * The markets in this connection
-   */
-  edges: MarketsCandlesQuery_marketsConnection_edges[];
-}
-
-export interface MarketsCandlesQuery {
-  /**
-   * One or more instruments that are trading on the Vega network
-   */
-  marketsConnection: MarketsCandlesQuery_marketsConnection | null;
-}
-
-export interface MarketsCandlesQueryVariables {
-  interval: Interval;
-  since: string;
-}

libs/market-list/src/lib/__generated__/MarketsDataQuery.ts

@@ -1,97 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-// @generated
-// This file was automatically generated and should not be edited.
-
-import { AuctionTrigger, MarketTradingMode } from "@vegaprotocol/types";
-
-// ====================================================
-// GraphQL query operation: MarketsDataQuery
-// ====================================================
-
-export interface MarketsDataQuery_marketsConnection_edges_node_data_market {
-  __typename: "Market";
-  /**
-   * Market ID
-   */
-  id: string;
-}
-
-export interface MarketsDataQuery_marketsConnection_edges_node_data {
-  __typename: "MarketData";
-  /**
-   * Market of the associated mark price
-   */
-  market: MarketsDataQuery_marketsConnection_edges_node_data_market;
-  /**
-   * The highest price level on an order book for buy orders.
-   */
-  bestBidPrice: string;
-  /**
-   * The lowest price level on an order book for offer orders.
-   */
-  bestOfferPrice: string;
-  /**
-   * The mark price (an unsigned integer)
-   */
-  markPrice: string;
-  /**
-   * What triggered an auction (if an auction was started)
-   */
-  trigger: AuctionTrigger;
-  /**
-   * The arithmetic average of the best static bid price and best static offer price
-   */
-  staticMidPrice: string;
-  /**
-   * What mode the market is in (auction, continuous, etc)
-   */
-  marketTradingMode: MarketTradingMode;
-  /**
-   * Indicative volume if the auction ended now, 0 if not in auction mode
-   */
-  indicativeVolume: string;
-  /**
-   * Indicative price if the auction ended now, 0 if not in auction mode
-   */
-  indicativePrice: string;
-  /**
-   * The highest price level on an order book for buy orders not including pegged orders.
-   */
-  bestStaticBidPrice: string;
-  /**
-   * The lowest price level on an order book for offer orders not including pegged orders.
-   */
-  bestStaticOfferPrice: string;
-}
-
-export interface MarketsDataQuery_marketsConnection_edges_node {
-  __typename: "Market";
-  /**
-   * marketData for the given market
-   */
-  data: MarketsDataQuery_marketsConnection_edges_node_data | null;
-}
-
-export interface MarketsDataQuery_marketsConnection_edges {
-  __typename: "MarketEdge";
-  /**
-   * The market
-   */
-  node: MarketsDataQuery_marketsConnection_edges_node;
-}
-
-export interface MarketsDataQuery_marketsConnection {
-  __typename: "MarketConnection";
-  /**
-   * The markets in this connection
-   */
-  edges: MarketsDataQuery_marketsConnection_edges[];
-}
-
-export interface MarketsDataQuery {
-  /**
-   * One or more instruments that are trading on the Vega network
-   */
-  marketsConnection: MarketsDataQuery_marketsConnection | null;
-}

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

@@ -0,0 +1,111 @@
+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 MarketCandlesQueryVariables = Types.Exact<{
+  interval: Types.Interval;
+  since: Types.Scalars['String'];
+  marketId: Types.Scalars['ID'];
+}>;
+
+
+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 MarketCandlesUpdateSubscriptionVariables = Types.Exact<{
+  marketId: Types.Scalars['ID'];
+  interval: Types.Interval;
+}>;
+
+
+export type MarketCandlesUpdateSubscription = { __typename?: 'Subscription', candles: { __typename?: 'Candle', high: string, low: string, open: string, close: string, volume: string } };
+
+export const MarketCandlesFieldsFragmentDoc = gql`
+    fragment MarketCandlesFields on Candle {
+  high
+  low
+  open
+  close
+  volume
+}
+    `;
+export const MarketCandlesDocument = gql`
+    query MarketCandles($interval: Interval!, $since: String!, $marketId: ID!) {
+  marketsConnection(id: $marketId) {
+    edges {
+      node {
+        candlesConnection(interval: $interval, since: $since) {
+          edges {
+            node {
+              ...MarketCandlesFields
+            }
+          }
+        }
+      }
+    }
+  }
+}
+    ${MarketCandlesFieldsFragmentDoc}`;
+
+/**
+ * __useMarketCandlesQuery__
+ *
+ * To run a query within a React component, call `useMarketCandlesQuery` and pass it any options that fit your needs.
+ * When your component renders, `useMarketCandlesQuery` 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 query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useMarketCandlesQuery({
+ *   variables: {
+ *      interval: // value for 'interval'
+ *      since: // value for 'since'
+ *      marketId: // value for 'marketId'
+ *   },
+ * });
+ */
+export function useMarketCandlesQuery(baseOptions: Apollo.QueryHookOptions<MarketCandlesQuery, MarketCandlesQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<MarketCandlesQuery, MarketCandlesQueryVariables>(MarketCandlesDocument, options);
+      }
+export function useMarketCandlesLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<MarketCandlesQuery, MarketCandlesQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<MarketCandlesQuery, MarketCandlesQueryVariables>(MarketCandlesDocument, options);
+        }
+export type MarketCandlesQueryHookResult = ReturnType<typeof useMarketCandlesQuery>;
+export type MarketCandlesLazyQueryHookResult = ReturnType<typeof useMarketCandlesLazyQuery>;
+export type MarketCandlesQueryResult = Apollo.QueryResult<MarketCandlesQuery, MarketCandlesQueryVariables>;
+export const MarketCandlesUpdateDocument = gql`
+    subscription MarketCandlesUpdate($marketId: ID!, $interval: Interval!) {
+  candles(interval: $interval, marketId: $marketId) {
+    ...MarketCandlesFields
+  }
+}
+    ${MarketCandlesFieldsFragmentDoc}`;
+
+/**
+ * __useMarketCandlesUpdateSubscription__
+ *
+ * To run a query within a React component, call `useMarketCandlesUpdateSubscription` and pass it any options that fit your needs.
+ * When your component renders, `useMarketCandlesUpdateSubscription` 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 } = useMarketCandlesUpdateSubscription({
+ *   variables: {
+ *      marketId: // value for 'marketId'
+ *      interval: // value for 'interval'
+ *   },
+ * });
+ */
+export function useMarketCandlesUpdateSubscription(baseOptions: Apollo.SubscriptionHookOptions<MarketCandlesUpdateSubscription, MarketCandlesUpdateSubscriptionVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useSubscription<MarketCandlesUpdateSubscription, MarketCandlesUpdateSubscriptionVariables>(MarketCandlesUpdateDocument, options);
+      }
+export type MarketCandlesUpdateSubscriptionHookResult = ReturnType<typeof useMarketCandlesUpdateSubscription>;
+export type MarketCandlesUpdateSubscriptionResult = Apollo.SubscriptionResult<MarketCandlesUpdateSubscription>;

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

@@ -0,0 +1,126 @@
+import { Schema as Types } from '@vegaprotocol/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type MarketDataUpdateFieldsFragment = { __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 MarketDataUpdateSubscriptionVariables = Types.Exact<{
+  marketId: Types.Scalars['ID'];
+}>;
+
+
+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 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 const MarketDataUpdateFieldsFragmentDoc = gql`
+    fragment MarketDataUpdateFields on ObservableMarketData {
+  marketId
+  bestBidPrice
+  bestOfferPrice
+  markPrice
+  trigger
+  staticMidPrice
+  marketTradingMode
+  indicativeVolume
+  indicativePrice
+  bestStaticBidPrice
+  bestStaticOfferPrice
+}
+    `;
+export const MarketDataFieldsFragmentDoc = gql`
+    fragment MarketDataFields on MarketData {
+  market {
+    id
+  }
+  bestBidPrice
+  bestOfferPrice
+  markPrice
+  trigger
+  staticMidPrice
+  marketTradingMode
+  indicativeVolume
+  indicativePrice
+  bestStaticBidPrice
+  bestStaticOfferPrice
+}
+    `;
+export const MarketDataUpdateDocument = gql`
+    subscription MarketDataUpdate($marketId: ID!) {
+  marketsData(marketIds: [$marketId]) {
+    ...MarketDataUpdateFields
+  }
+}
+    ${MarketDataUpdateFieldsFragmentDoc}`;
+
+/**
+ * __useMarketDataUpdateSubscription__
+ *
+ * To run a query within a React component, call `useMarketDataUpdateSubscription` and pass it any options that fit your needs.
+ * When your component renders, `useMarketDataUpdateSubscription` 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 } = useMarketDataUpdateSubscription({
+ *   variables: {
+ *      marketId: // value for 'marketId'
+ *   },
+ * });
+ */
+export function useMarketDataUpdateSubscription(baseOptions: Apollo.SubscriptionHookOptions<MarketDataUpdateSubscription, MarketDataUpdateSubscriptionVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useSubscription<MarketDataUpdateSubscription, MarketDataUpdateSubscriptionVariables>(MarketDataUpdateDocument, options);
+      }
+export type MarketDataUpdateSubscriptionHookResult = ReturnType<typeof useMarketDataUpdateSubscription>;
+export type MarketDataUpdateSubscriptionResult = Apollo.SubscriptionResult<MarketDataUpdateSubscription>;
+export const MarketDataDocument = gql`
+    query MarketData($marketId: ID!) {
+  marketsConnection(id: $marketId) {
+    edges {
+      node {
+        data {
+          ...MarketDataFields
+        }
+      }
+    }
+  }
+}
+    ${MarketDataFieldsFragmentDoc}`;
+
+/**
+ * __useMarketDataQuery__
+ *
+ * To run a query within a React component, call `useMarketDataQuery` and pass it any options that fit your needs.
+ * When your component renders, `useMarketDataQuery` 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 query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useMarketDataQuery({
+ *   variables: {
+ *      marketId: // value for 'marketId'
+ *   },
+ * });
+ */
+export function useMarketDataQuery(baseOptions: Apollo.QueryHookOptions<MarketDataQuery, MarketDataQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<MarketDataQuery, MarketDataQueryVariables>(MarketDataDocument, options);
+      }
+export function useMarketDataLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<MarketDataQuery, MarketDataQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<MarketDataQuery, MarketDataQueryVariables>(MarketDataDocument, options);
+        }
+export type MarketDataQueryHookResult = ReturnType<typeof useMarketDataQuery>;
+export type MarketDataLazyQueryHookResult = ReturnType<typeof useMarketDataLazyQuery>;
+export type MarketDataQueryResult = Apollo.QueryResult<MarketDataQuery, MarketDataQueryVariables>;

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

@@ -0,0 +1,62 @@
+import { Schema as Types } from '@vegaprotocol/types';
+
+import { gql } from '@apollo/client';
+import { MarketCandlesFieldsFragmentDoc } from './market-candles';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type MarketsCandlesQueryVariables = Types.Exact<{
+  interval: Types.Interval;
+  since: Types.Scalars['String'];
+}>;
+
+
+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 const MarketsCandlesDocument = gql`
+    query MarketsCandles($interval: Interval!, $since: String!) {
+  marketsConnection {
+    edges {
+      node {
+        id
+        candlesConnection(interval: $interval, since: $since) {
+          edges {
+            node {
+              ...MarketCandlesFields
+            }
+          }
+        }
+      }
+    }
+  }
+}
+    ${MarketCandlesFieldsFragmentDoc}`;
+
+/**
+ * __useMarketsCandlesQuery__
+ *
+ * To run a query within a React component, call `useMarketsCandlesQuery` and pass it any options that fit your needs.
+ * When your component renders, `useMarketsCandlesQuery` 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 query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useMarketsCandlesQuery({
+ *   variables: {
+ *      interval: // value for 'interval'
+ *      since: // value for 'since'
+ *   },
+ * });
+ */
+export function useMarketsCandlesQuery(baseOptions: Apollo.QueryHookOptions<MarketsCandlesQuery, MarketsCandlesQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<MarketsCandlesQuery, MarketsCandlesQueryVariables>(MarketsCandlesDocument, options);
+      }
+export function useMarketsCandlesLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<MarketsCandlesQuery, MarketsCandlesQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<MarketsCandlesQuery, MarketsCandlesQueryVariables>(MarketsCandlesDocument, options);
+        }
+export type MarketsCandlesQueryHookResult = ReturnType<typeof useMarketsCandlesQuery>;
+export type MarketsCandlesLazyQueryHookResult = ReturnType<typeof useMarketsCandlesLazyQuery>;
+export type MarketsCandlesQueryResult = Apollo.QueryResult<MarketsCandlesQuery, MarketsCandlesQueryVariables>;

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

@@ -0,0 +1,52 @@
+import { Schema as Types } from '@vegaprotocol/types';
+
+import { gql } from '@apollo/client';
+import { MarketDataFieldsFragmentDoc } from './market-data';
+import * as Apollo from '@apollo/client';
+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 const MarketsDataDocument = gql`
+    query MarketsData {
+  marketsConnection {
+    edges {
+      node {
+        data {
+          ...MarketDataFields
+        }
+      }
+    }
+  }
+}
+    ${MarketDataFieldsFragmentDoc}`;
+
+/**
+ * __useMarketsDataQuery__
+ *
+ * To run a query within a React component, call `useMarketsDataQuery` and pass it any options that fit your needs.
+ * When your component renders, `useMarketsDataQuery` 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 query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useMarketsDataQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useMarketsDataQuery(baseOptions?: Apollo.QueryHookOptions<MarketsDataQuery, MarketsDataQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<MarketsDataQuery, MarketsDataQueryVariables>(MarketsDataDocument, options);
+      }
+export function useMarketsDataLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<MarketsDataQuery, MarketsDataQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<MarketsDataQuery, MarketsDataQueryVariables>(MarketsDataDocument, options);
+        }
+export type MarketsDataQueryHookResult = ReturnType<typeof useMarketsDataQuery>;
+export type MarketsDataLazyQueryHookResult = ReturnType<typeof useMarketsDataLazyQuery>;
+export type MarketsDataQueryResult = Apollo.QueryResult<MarketsDataQuery, MarketsDataQueryVariables>;

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

@@ -0,0 +1,89 @@
+import { Schema as Types } from '@vegaprotocol/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type MarketFieldsFragment = { __typename?: 'Market', id: string, decimalPlaces: number, positionDecimalPlaces: number, state: Types.MarketState, tradingMode: Types.MarketTradingMode, fees: { __typename?: 'Fees', factors: { __typename?: 'FeeFactors', makerFee: string, infrastructureFee: string, liquidityFee: string } }, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', id: string, name: string, code: string, metadata: { __typename?: 'InstrumentMetadata', tags?: Array<string> | null }, product: { __typename?: 'Future', quoteName: string, settlementAsset: { __typename?: 'Asset', symbol: string, decimals: number } } } }, marketTimestamps: { __typename?: 'MarketTimestamps', open?: string | null, close?: string | null } };
+
+export type MarketsQueryVariables = Types.Exact<{ [key: string]: never; }>;
+
+
+export type MarketsQuery = { __typename?: 'Query', marketsConnection?: { __typename?: 'MarketConnection', edges: Array<{ __typename?: 'MarketEdge', node: { __typename?: 'Market', id: string, decimalPlaces: number, positionDecimalPlaces: number, state: Types.MarketState, tradingMode: Types.MarketTradingMode, fees: { __typename?: 'Fees', factors: { __typename?: 'FeeFactors', makerFee: string, infrastructureFee: string, liquidityFee: string } }, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', id: string, name: string, code: string, metadata: { __typename?: 'InstrumentMetadata', tags?: Array<string> | null }, product: { __typename?: 'Future', quoteName: string, settlementAsset: { __typename?: 'Asset', symbol: string, decimals: number } } } }, marketTimestamps: { __typename?: 'MarketTimestamps', open?: string | null, close?: string | null } } }> } | null };
+
+export const MarketFieldsFragmentDoc = gql`
+    fragment MarketFields on Market {
+  id
+  decimalPlaces
+  positionDecimalPlaces
+  state
+  tradingMode
+  fees {
+    factors {
+      makerFee
+      infrastructureFee
+      liquidityFee
+    }
+  }
+  tradableInstrument {
+    instrument {
+      id
+      name
+      code
+      metadata {
+        tags
+      }
+      product {
+        ... on Future {
+          settlementAsset {
+            symbol
+            decimals
+          }
+          quoteName
+        }
+      }
+    }
+  }
+  marketTimestamps {
+    open
+    close
+  }
+}
+    `;
+export const MarketsDocument = gql`
+    query Markets {
+  marketsConnection {
+    edges {
+      node {
+        ...MarketFields
+      }
+    }
+  }
+}
+    ${MarketFieldsFragmentDoc}`;
+
+/**
+ * __useMarketsQuery__
+ *
+ * To run a query within a React component, call `useMarketsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useMarketsQuery` 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 query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useMarketsQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useMarketsQuery(baseOptions?: Apollo.QueryHookOptions<MarketsQuery, MarketsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<MarketsQuery, MarketsQueryVariables>(MarketsDocument, options);
+      }
+export function useMarketsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<MarketsQuery, MarketsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<MarketsQuery, MarketsQueryVariables>(MarketsDocument, options);
+        }
+export type MarketsQueryHookResult = ReturnType<typeof useMarketsQuery>;
+export type MarketsLazyQueryHookResult = ReturnType<typeof useMarketsLazyQuery>;
+export type MarketsQueryResult = Apollo.QueryResult<MarketsQuery, MarketsQueryVariables>;

libs/market-list/src/lib/components/select-market-columns.tsx

@@ -19,9 +19,11 @@ import Link from 'next/link';
 import { calcCandleHigh, calcCandleLow, totalFees } from '../utils';
 
 import type { CandleClose } from '@vegaprotocol/types';
-import type { Market, MarketData, Candle } from '../';
+import type { MarketWithData, MarketWithCandles } from '../';
 import isNil from 'lodash/isNil';
 
+type Market = MarketWithData & MarketWithCandles;
+
 export const cellClassNames = 'py-1 first:text-left text-right';
 
 const FeesInfo = () => {
@@ -159,16 +161,14 @@ export type OnCellClickHandler = (
 
 export const columns = (
   market: Market,
-  marketData: MarketData | undefined,
-  candles: Candle[] | undefined,
   onSelect: (id: string) => void,
   onCellClick: OnCellClickHandler
 ) => {
-  const candlesClose = candles
+  const candlesClose = market.candles
     ?.map((candle) => candle?.close)
     .filter((c: string | undefined): c is CandleClose => !isNil(c));
-  const candleLow = candles && calcCandleLow(candles);
+  const candleLow = market.candles && calcCandleLow(market.candles);
-  const candleHigh = candles && calcCandleHigh(candles);
+  const candleHigh = market.candles && calcCandleHigh(market.candles);
   const selectMarketColumns: Column[] = [
     {
       kind: ColumnKind.Market,
@@ -178,11 +178,11 @@ export const columns = (
     },
     {
       kind: ColumnKind.LastPrice,
-      value: marketData?.markPrice ? (
+      value: market.data?.markPrice ? (
         <PriceCell
-          value={Number(marketData?.markPrice)}
+          value={Number(market.data?.markPrice)}
           valueFormatted={addDecimalsFormatNumber(
-            marketData?.markPrice.toString(),
+            market.data?.markPrice.toString(),
             market.decimalPlaces,
             2
           )}
@@ -228,7 +228,7 @@ export const columns = (
     },
     {
       kind: ColumnKind.Sparkline,
-      value: candles && (
+      value: market.candles && (
         <Sparkline
           width={100}
           height={20}
@@ -278,10 +278,10 @@ export const columns = (
       value:
         market.tradingMode ===
           MarketTradingMode.TRADING_MODE_MONITORING_AUCTION &&
-        marketData?.trigger &&
+        market.data?.trigger &&
-        marketData.trigger !== AuctionTrigger.AUCTION_TRIGGER_UNSPECIFIED
+        market.data.trigger !== AuctionTrigger.AUCTION_TRIGGER_UNSPECIFIED
           ? `${MarketTradingModeMapping[market.tradingMode]}
-                     - ${AuctionTriggerMapping[marketData.trigger]}`
+                     - ${AuctionTriggerMapping[market.data.trigger]}`
           : MarketTradingModeMapping[market.tradingMode],
       className: `${cellClassNames} hidden lg:table-cell`,
       onlyOnDetailed: true,
@@ -290,9 +290,9 @@ export const columns = (
     {
       kind: ColumnKind.Volume,
       value:
-        marketData?.indicativeVolume && marketData.indicativeVolume !== '0'
+        market.data?.indicativeVolume && market.data.indicativeVolume !== '0'
           ? addDecimalsFormatNumber(
-              marketData.indicativeVolume,
+              market.data.indicativeVolume,
               market.positionDecimalPlaces
             )
           : '-',
@@ -320,17 +320,15 @@ export const columns = (
 
 export const columnsPositionMarkets = (
   market: Market,
-  marketData: MarketData | undefined,
-  candles: Candle[] | undefined,
   onSelect: (id: string) => void,
   openVolume?: string,
   onCellClick?: OnCellClickHandler
 ) => {
-  const candlesClose = candles
+  const candlesClose = market.candles
     ?.map((candle) => candle?.close)
     .filter((c: string | undefined): c is CandleClose => !isNil(c));
-  const candleLow = candles && calcCandleLow(candles);
+  const candleLow = market.candles && calcCandleLow(market.candles);
-  const candleHigh = candles && calcCandleHigh(candles);
+  const candleHigh = market.candles && calcCandleHigh(market.candles);
   const handleKeyPress = (
     event: React.KeyboardEvent<HTMLAnchorElement>,
     id: string
@@ -361,11 +359,11 @@ export const columnsPositionMarkets = (
     },
     {
       kind: ColumnKind.LastPrice,
-      value: marketData?.markPrice ? (
+      value: market.data?.markPrice ? (
         <PriceCell
-          value={Number(marketData.markPrice)}
+          value={Number(market.data.markPrice)}
           valueFormatted={addDecimalsFormatNumber(
-            marketData.markPrice.toString(),
+            market.data.markPrice.toString(),
             market.decimalPlaces,
             2
           )}
@@ -461,10 +459,10 @@ export const columnsPositionMarkets = (
       value:
         market.tradingMode ===
           MarketTradingMode.TRADING_MODE_MONITORING_AUCTION &&
-        marketData?.trigger &&
+        market.data?.trigger &&
-        marketData.trigger !== AuctionTrigger.AUCTION_TRIGGER_UNSPECIFIED
+        market.data.trigger !== AuctionTrigger.AUCTION_TRIGGER_UNSPECIFIED
           ? `${MarketTradingModeMapping[market.tradingMode]}
-                     - ${AuctionTriggerMapping[marketData.trigger]}`
+                     - ${AuctionTriggerMapping[market.data.trigger]}`
           : MarketTradingModeMapping[market.tradingMode],
       className: `${cellClassNames} hidden lg:table-cell`,
       onlyOnDetailed: true,
@@ -473,9 +471,9 @@ export const columnsPositionMarkets = (
     {
       kind: ColumnKind.Volume,
       value:
-        marketData && marketData.indicativeVolume !== '0'
+        market.data && market.data.indicativeVolume !== '0'
           ? addDecimalsFormatNumber(
-              marketData.indicativeVolume,
+              market.data.indicativeVolume,
               market.positionDecimalPlaces
             )
           : '-',

libs/market-list/src/lib/components/select-market.spec.tsx

@@ -2,15 +2,16 @@ import { fireEvent, render, screen } from '@testing-library/react';
 import { AuctionTrigger, MarketTradingMode } from '@vegaprotocol/types';
 
 import type { ReactNode } from 'react';
+import type { MarketWithCandles, MarketWithData } from '../markets-provider';
 import type { MarketData } from '../market-data-provider';
-import type { MarketCandles } from '../markets-candles-provider';
-import type { Market } from '../markets-provider';
 
 import {
   SelectAllMarketsTableBody,
   SelectMarketLandingTable,
 } from './select-market';
 
+type Market = MarketWithCandles & MarketWithData;
+
 jest.mock(
   'next/link',
   () =>
@@ -18,7 +19,11 @@ jest.mock(
       children
 );
 
-const MARKET_A: Partial<Market> = {
+type PartialMarket = Partial<
+  Omit<Market, 'data'> & { data: Partial<MarketData> }
+>;
+
+const MARKET_A: PartialMarket = {
   __typename: 'Market',
   id: '1',
   decimalPlaces: 2,
@@ -32,8 +37,10 @@ const MARKET_A: Partial<Market> = {
       name: 'ABCDEF 1-Day',
       product: {
         __typename: 'Future',
+        quoteName: 'ABCDEF',
         settlementAsset: {
           __typename: 'Asset',
+          decimals: 2,
           symbol: 'ABC',
         },
       },
@@ -52,9 +59,37 @@ const MARKET_A: Partial<Market> = {
       makerFee: '0.01',
     },
   },
+  data: {
+    __typename: 'MarketData',
+    market: {
+      __typename: 'Market',
+      id: '1',
+    },
+    markPrice: '90',
+    trigger: AuctionTrigger.AUCTION_TRIGGER_OPENING,
+    indicativeVolume: '1000',
+  },
+  candles: [
+    {
+      __typename: 'Candle',
+      high: '100',
+      low: '10',
+      open: '10',
+      close: '80',
+      volume: '1000',
+    },
+    {
+      __typename: 'Candle',
+      high: '10',
+      low: '1',
+      open: '1',
+      close: '100',
+      volume: '1000',
+    },
+  ],
 };
 
-const MARKET_B: Partial<Market> = {
+const MARKET_B: PartialMarket = {
   __typename: 'Market',
   id: '2',
   decimalPlaces: 2,
@@ -68,8 +103,10 @@ const MARKET_B: Partial<Market> = {
       name: 'XYZ 1-Day',
       product: {
         __typename: 'Future',
+        quoteName: 'XYZ',
         settlementAsset: {
           __typename: 'Asset',
+          decimals: 2,
           symbol: 'XYZ',
         },
       },
@@ -88,20 +125,7 @@ const MARKET_B: Partial<Market> = {
       makerFee: '0.01',
     },
   },
-};
+  data: {
-
-const MARKET_DATA_A: Partial<MarketData> = {
-  __typename: 'MarketData',
-  market: {
-    __typename: 'Market',
-    id: '1',
-  },
-  markPrice: '90',
-  trigger: AuctionTrigger.AUCTION_TRIGGER_OPENING,
-  indicativeVolume: '1000',
-};
-
-const MARKET_DATA_B: Partial<MarketData> = {
     __typename: 'MarketData',
     market: {
       __typename: 'Market',
@@ -110,35 +134,10 @@ const MARKET_DATA_B: Partial<MarketData> = {
     markPrice: '123.123',
     trigger: AuctionTrigger.AUCTION_TRIGGER_OPENING,
     indicativeVolume: '2000',
-};
+  },
-
-const MARKET_CANDLES_A: Partial<MarketCandles> = {
-  marketId: '1',
   candles: [
     {
-      __typename: 'CandleNode',
+      __typename: 'Candle',
-      high: '100',
-      low: '10',
-      open: '10',
-      close: '80',
-      volume: '1000',
-    },
-    {
-      __typename: 'CandleNode',
-      high: '10',
-      low: '1',
-      open: '1',
-      close: '100',
-      volume: '1000',
-    },
-  ],
-};
-
-const MARKET_CANDLES_B: Partial<MarketCandles> = {
-  marketId: '2',
-  candles: [
-    {
-      __typename: 'CandleNode',
       high: '100',
       low: '10',
       open: '10',
@@ -151,14 +150,11 @@ const MARKET_CANDLES_B: Partial<MarketCandles> = {
 describe('SelectMarket', () => {
   it('should render the SelectAllMarketsTableBody', () => {
     const onSelect = jest.fn();
+    const onCellClick = jest.fn();
     const { container } = render(
       <SelectAllMarketsTableBody
         markets={[MARKET_A as Market, MARKET_B as Market]}
-        marketsData={[MARKET_DATA_A as MarketData, MARKET_DATA_B as MarketData]}
+        onCellClick={onCellClick}
-        marketsCandles={[
-          MARKET_CANDLES_A as MarketCandles,
-          MARKET_CANDLES_B as MarketCandles,
-        ]}
         onSelect={onSelect}
       />
     );
@@ -171,14 +167,12 @@ describe('SelectMarket', () => {
 
   it('should call onSelect callback on SelectMarketLandingTable', () => {
     const onSelect = jest.fn();
+    const onCellClick = jest.fn();
+
     render(
       <SelectMarketLandingTable
         markets={[MARKET_A as Market, MARKET_B as Market]}
-        marketsData={[MARKET_DATA_A as MarketData, MARKET_DATA_B as MarketData]}
+        onCellClick={onCellClick}
-        marketsCandles={[
-          MARKET_CANDLES_A as MarketCandles,
-          MARKET_CANDLES_B as MarketCandles,
-        ]}
         onSelect={onSelect}
       />
     );

libs/market-list/src/lib/components/select-market.tsx

@@ -17,13 +17,9 @@ import {
 } from './select-market-columns';
 import { columnHeaders } from './select-market-columns';
 import { columns } from './select-market-columns';
-import type { Market, MarketData, MarketCandles, Candle } from '../';
+import type { MarketWithCandles, MarketWithData } from '../';
 import { useVegaWallet } from '@vegaprotocol/wallet';
-import type {
+import type { Positions_party_positionsConnection_edges_node } from '@vegaprotocol/positions';
-  Positions_party,
-  PositionsSubscription_positions,
-  Positions_party_positionsConnection_edges_node,
-} from '@vegaprotocol/positions';
 import { positionsDataProvider } from '@vegaprotocol/positions';
 import {
   SelectMarketTableHeader,
@@ -31,16 +27,14 @@ import {
 } from './select-market-table';
 import { useMarketList } from '../markets-provider';
 
+type Market = MarketWithCandles & MarketWithData;
+
 export const SelectMarketLandingTable = ({
   markets,
-  marketsData,
-  marketsCandles,
   onSelect,
   onCellClick,
 }: {
-  markets: Market[] | undefined;
+  markets: Market[] | null;
-  marketsData: MarketData[] | undefined;
-  marketsCandles: MarketCandles[] | undefined;
   onSelect: (id: string) => void;
   onCellClick: OnCellClickHandler;
 }) => {
@@ -61,17 +55,7 @@ export const SelectMarketLandingTable = ({
                 key={i}
                 detailed={false}
                 onSelect={onSelect}
-                columns={columns(
+                columns={columns(market, onSelect, onCellClick)}
-                  market,
-                  marketsData?.find(
-                    (marketData) => marketData.market.id === market.id
-                  ),
-                  marketsCandles?.find(
-                    (marketCandles) => marketCandles.marketId === market.id
-                  )?.candles,
-                  onSelect,
-                  onCellClick
-                )}
               />
             ))}
           </tbody>
@@ -86,29 +70,19 @@ export const SelectMarketLandingTable = ({
 
 export const SelectAllMarketsTableBody = ({
   markets,
-  marketsData,
-  marketsCandles,
   positions,
   onSelect,
   onCellClick,
   headers = columnHeaders,
-  tableColumns = (market, marketData, candles) =>
+  tableColumns = (market) => columns(market, onSelect, onCellClick),
-    columns(market, marketData, candles, onSelect, onCellClick),
 }: {
-  markets: Market[] | undefined;
+  markets?: Market[] | null;
-  marketsData: MarketData[] | undefined;
-  marketsCandles: MarketCandles[] | undefined;
   positions?: Positions_party_positionsConnection_edges_node[];
   title?: string;
   onSelect: (id: string) => void;
   onCellClick: OnCellClickHandler;
   headers?: Column[];
-  tableColumns?: (
+  tableColumns?: (market: Market, openVolume?: string) => Column[];
-    market: Market,
-    marketData: MarketData | undefined,
-    candles: Candle[] | undefined,
-    openVolume?: string
-  ) => Column[];
 }) => {
   if (!markets) return null;
   return (
@@ -126,12 +100,6 @@ export const SelectAllMarketsTableBody = ({
             onSelect={onSelect}
             columns={tableColumns(
               market,
-              marketsData?.find(
-                (marketData) => marketData.market.id === market.id
-              ),
-              marketsCandles?.find(
-                (marketCandles) => marketCandles.marketId === market.id
-              )?.candles,
               positions &&
                 positions.find((p) => p.market.id === market.id)?.openVolume
             )}
@@ -157,10 +125,7 @@ export const SelectMarketPopover = ({
   const [open, setOpen] = useState(false);
   const { data, loading: marketsLoading } = useMarketList();
   const variables = useMemo(() => ({ partyId: keypair?.pub }), [keypair?.pub]);
-  const { data: party, loading: positionsLoading } = useDataProvider<
+  const { data: party, loading: positionsLoading } = useDataProvider({
-    Positions_party,
-    PositionsSubscription_positions[]
-  >({
     dataProvider: positionsDataProvider,
     noUpdate: true,
     variables,
@@ -175,7 +140,7 @@ export const SelectMarketPopover = ({
   const iconClass = open ? 'rotate-180' : '';
   const markets = useMemo(
     () =>
-      data?.markets?.filter((market) =>
+      data?.filter((market) =>
         party?.positionsConnection?.edges?.find(
           (edge) => edge.node.market.id === market.id
         )
@@ -210,19 +175,15 @@ export const SelectMarketPopover = ({
                 <TableTitle>{t('My markets')}</TableTitle>
                 <SelectAllMarketsTableBody
                   markets={markets}
-                  marketsData={data?.marketsData}
-                  marketsCandles={data?.marketsCandles}
                   positions={party?.positionsConnection?.edges
                     ?.filter((edge) => edge.node)
                     .map((edge) => edge.node)}
                   onSelect={onSelectMarket}
                   onCellClick={onCellClick}
                   headers={columnHeadersPositionMarkets}
-                  tableColumns={(market, marketData, candles, openVolume) =>
+                  tableColumns={(market, openVolume) =>
                     columnsPositionMarkets(
                       market,
-                      marketData,
-                      candles,
                       onSelectMarket,
                       openVolume,
                       onCellClick
@@ -233,9 +194,7 @@ export const SelectMarketPopover = ({
             ) : null}
             <TableTitle>{t('All markets')}</TableTitle>
             <SelectAllMarketsTableBody
-              markets={data?.markets}
+              markets={data}
-              marketsData={data?.marketsData}
-              marketsCandles={data?.marketsCandles}
               onSelect={onSelectMarket}
               onCellClick={onCellClick}
             />
@@ -319,9 +278,7 @@ const LandingDialogContainer = ({
 
   return (
     <SelectMarketLandingTable
-      markets={data?.markets}
+      markets={data}
-      marketsData={data?.marketsData}
-      marketsCandles={data?.marketsCandles}
       onSelect={onSelect}
       onCellClick={onCellClick}
     />

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

@@ -6,11 +6,8 @@ export * from './market-provider';
 export * from './markets-candles-provider';
 export * from './markets-data-provider';
 export * from './markets-provider';
-export * from './__generated__/MarketCandlesQuery';
+export * from './__generated___/market-candles';
-export * from './__generated__/MarketCandlesSub';
+export * from './__generated___/market-data';
-export * from './__generated__/MarketDataQuery';
+export * from './__generated___/markets';
-export * from './__generated__/MarketDataSub';
+export * from './__generated___/markets-candles';
-export * from './__generated__/MarketFields';
+export * from './__generated___/markets-data';
-export * from './__generated__/Markets';
-export * from './__generated__/MarketsCandlesQuery';
-export * from './__generated__/MarketsDataQuery';

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

@@ -1,65 +1,18 @@
-import { gql } from '@apollo/client';
 import { makeDataProvider } from '@vegaprotocol/react-helpers';
 import type {
   MarketCandlesQuery,
-  MarketCandlesQuery_marketsConnection_edges_node_candlesConnection_edges_node,
+  MarketCandlesUpdateSubscription,
-} from './__generated__/MarketCandlesQuery';
+  MarketCandlesFieldsFragment,
-import type {
+} from './__generated___/market-candles';
-  MarketCandlesSub,
+import {
-  MarketCandlesSub_candles,
+  MarketCandlesDocument,
-} from './__generated__/MarketCandlesSub';
+  MarketCandlesUpdateDocument,
+} from './__generated___/market-candles';
 
-export const MARKET_CANDLES_QUERY = gql`
+export type Candle = MarketCandlesFieldsFragment;
-  query MarketCandlesQuery(
-    $interval: Interval!
-    $since: String!
-    $marketId: ID!
-  ) {
-    marketsConnection(id: $marketId) {
-      edges {
-        node {
-          candlesConnection(interval: $interval, since: $since) {
-            edges {
-              node {
-                high
-                low
-                open
-                close
-                volume
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-`;
 
-const MARKET_CANDLES_SUB = gql`
+const update = (data: Candle[], delta: Candle) => {
-  subscription MarketCandlesSub($marketId: ID!, $interval: Interval!) {
+  return data && delta ? [...data, delta] : data;
-    candles(interval: $interval, marketId: $marketId) {
-      high
-      low
-      open
-      close
-      volume
-    }
-  }
-`;
-
-export type Candle =
-  MarketCandlesQuery_marketsConnection_edges_node_candlesConnection_edges_node;
-
-const update = (data: Candle[], delta: MarketCandlesSub_candles) => {
-  return data && delta
-    ? [
-        ...data,
-        {
-          ...delta,
-          __typename: 'Candle',
-        } as Candle,
-      ]
-    : data;
 };
 
 const getData = (responseData: MarketCandlesQuery): Candle[] | null =>
@@ -67,18 +20,17 @@ const getData = (responseData: MarketCandlesQuery): Candle[] | null =>
     ?.filter((edge) => edge?.node)
     .map((edge) => edge?.node as Candle) || null;
 
-const getDelta = (
+const getDelta = (subscriptionData: MarketCandlesUpdateSubscription): Candle =>
-  subscriptionData: MarketCandlesSub
+  subscriptionData.candles;
-): MarketCandlesSub_candles => subscriptionData.candles;
 
 export const marketCandlesProvider = makeDataProvider<
   MarketCandlesQuery,
   Candle[],
-  MarketCandlesSub,
+  MarketCandlesUpdateSubscription,
-  MarketCandlesSub_candles
+  Candle
 >({
-  query: MARKET_CANDLES_QUERY,
+  query: MarketCandlesDocument,
-  subscriptionQuery: MARKET_CANDLES_SUB,
+  subscriptionQuery: MarketCandlesUpdateDocument,
   update,
   getData,
   getDelta,

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

@@ -0,0 +1,29 @@
+fragment MarketCandlesFields on Candle {
+  high
+  low
+  open
+  close
+  volume
+}
+
+query MarketCandles($interval: Interval!, $since: String!, $marketId: ID!) {
+  marketsConnection(id: $marketId) {
+    edges {
+      node {
+        candlesConnection(interval: $interval, since: $since) {
+          edges {
+            node {
+              ...MarketCandlesFields
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+subscription MarketCandlesUpdate($marketId: ID!, $interval: Interval!) {
+  candles(interval: $interval, marketId: $marketId) {
+    ...MarketCandlesFields
+  }
+}

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

@@ -1,62 +1,19 @@
 import produce from 'immer';
-import { gql } from '@apollo/client';
 import { makeDataProvider } from '@vegaprotocol/react-helpers';
-import type {
+import {
-  MarketDataSub,
+  MarketDataDocument,
-  MarketDataSub_marketsData,
+  MarketDataUpdateDocument,
-} from './__generated__/MarketDataSub';
+} from './__generated___/market-data';
 import type {
   MarketDataQuery,
-  MarketDataQuery_marketsConnection_edges_node_data,
+  MarketDataFieldsFragment,
-} from './__generated__/MarketDataQuery';
+  MarketDataUpdateSubscription,
+  MarketDataUpdateFieldsFragment,
+} from './__generated___/market-data';
 
-export const MARKET_DATA_QUERY = gql`
+export type MarketData = MarketDataFieldsFragment;
-  query MarketDataQuery($marketId: ID!) {
-    marketsConnection(id: $marketId) {
-      edges {
-        node {
-          data {
-            market {
-              id
-            }
-            bestBidPrice
-            bestOfferPrice
-            markPrice
-            trigger
-            staticMidPrice
-            marketTradingMode
-            indicativeVolume
-            indicativePrice
-            bestStaticBidPrice
-            bestStaticOfferPrice
-          }
-        }
-      }
-    }
-  }
-`;
 
-const MARKET_DATA_SUB = gql`
+const update = (data: MarketData, delta: MarketDataUpdateFieldsFragment) => {
-  subscription MarketDataSub($marketId: ID!) {
-    marketsData(marketIds: [$marketId]) {
-      marketId
-      bestBidPrice
-      bestOfferPrice
-      markPrice
-      trigger
-      staticMidPrice
-      marketTradingMode
-      indicativeVolume
-      indicativePrice
-      bestStaticBidPrice
-      bestStaticOfferPrice
-    }
-  }
-`;
-
-export type MarketData = MarketDataQuery_marketsConnection_edges_node_data;
-
-const update = (data: MarketData, delta: MarketDataSub_marketsData) => {
   return produce(data, (draft) => {
     const { marketId, __typename, ...marketData } = delta;
     Object.assign(draft, marketData);
@@ -66,17 +23,18 @@ const update = (data: MarketData, delta: MarketDataSub_marketsData) => {
 const getData = (responseData: MarketDataQuery): MarketData | null =>
   responseData?.marketsConnection?.edges[0].node.data || null;
 
-const getDelta = (subscriptionData: MarketDataSub): MarketDataSub_marketsData =>
+const getDelta = (
-  subscriptionData.marketsData[0];
+  subscriptionData: MarketDataUpdateSubscription
+): MarketDataUpdateFieldsFragment => subscriptionData.marketsData[0];
 
 export const marketDataProvider = makeDataProvider<
   MarketDataQuery,
   MarketData,
-  MarketDataSub,
+  MarketDataUpdateSubscription,
-  MarketDataSub_marketsData
+  MarketDataUpdateFieldsFragment
 >({
-  query: MARKET_DATA_QUERY,
+  query: MarketDataDocument,
-  subscriptionQuery: MARKET_DATA_SUB,
+  subscriptionQuery: MarketDataUpdateDocument,
   update,
   getData,
   getDelta,

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

@@ -0,0 +1,47 @@
+fragment MarketDataUpdateFields on ObservableMarketData {
+  marketId
+  bestBidPrice
+  bestOfferPrice
+  markPrice
+  trigger
+  staticMidPrice
+  marketTradingMode
+  indicativeVolume
+  indicativePrice
+  bestStaticBidPrice
+  bestStaticOfferPrice
+}
+
+subscription MarketDataUpdate($marketId: ID!) {
+  marketsData(marketIds: [$marketId]) {
+    ...MarketDataUpdateFields
+  }
+}
+
+fragment MarketDataFields on MarketData {
+  market {
+    id
+  }
+  bestBidPrice
+  bestOfferPrice
+  markPrice
+  trigger
+  staticMidPrice
+  marketTradingMode
+  indicativeVolume
+  indicativePrice
+  bestStaticBidPrice
+  bestStaticOfferPrice
+}
+
+query MarketData($marketId: ID!) {
+  marketsConnection(id: $marketId) {
+    edges {
+      node {
+        data {
+          ...MarketDataFields
+        }
+      }
+    }
+  }
+}

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

@@ -1,36 +1,10 @@
-import { gql } from '@apollo/client';
 import { makeDataProvider } from '@vegaprotocol/react-helpers';
-import type {
+import { MarketsCandlesDocument } from './__generated___/markets-candles';
-  MarketsCandlesQuery,
+import type { MarketsCandlesQuery } from './__generated___/markets-candles';
-  MarketsCandlesQuery_marketsConnection_edges_node as Market,
+import type { Candle } from './market-candles-provider';
-  MarketsCandlesQuery_marketsConnection_edges_node_candlesConnection_edges_node as Candle,
-} from './__generated__/MarketsCandlesQuery';
-
-export const MARKETS_CANDLES_QUERY = gql`
-  query MarketsCandlesQuery($interval: Interval!, $since: String!) {
-    marketsConnection {
-      edges {
-        node {
-          id
-          candlesConnection(interval: $interval, since: $since) {
-            edges {
-              node {
-                high
-                low
-                open
-                close
-                volume
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-`;
 
 export interface MarketCandles {
-  marketId: Market['id'];
+  marketId: string;
   candles: Candle[] | undefined;
 }
 
@@ -48,6 +22,6 @@ export const marketsCandlesProvider = makeDataProvider<
   never,
   never
 >({
-  query: MARKETS_CANDLES_QUERY,
+  query: MarketsCandlesDocument,
   getData,
 });

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

@@ -0,0 +1,24 @@
+fragment MarketCandlesFields on Candle {
+  high
+  low
+  open
+  close
+  volume
+}
+
+query MarketsCandles($interval: Interval!, $since: String!) {
+  marketsConnection {
+    edges {
+      node {
+        id
+        candlesConnection(interval: $interval, since: $since) {
+          edges {
+            node {
+              ...MarketCandlesFields
+            }
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -1,34 +1,8 @@
-import { gql } from '@apollo/client';
 import { makeDataProvider } from '@vegaprotocol/react-helpers';
-import type { MarketsDataQuery } from './__generated__/MarketsDataQuery';
+import type { MarketsDataQuery } from './__generated___/markets-data';
+import { MarketsDataDocument } from './__generated___/markets-data';
 import type { MarketData } from './market-data-provider';
 
-export const MARKETS_DATA_QUERY = gql`
-  query MarketsDataQuery {
-    marketsConnection {
-      edges {
-        node {
-          data {
-            market {
-              id
-            }
-            bestBidPrice
-            bestOfferPrice
-            markPrice
-            trigger
-            staticMidPrice
-            marketTradingMode
-            indicativeVolume
-            indicativePrice
-            bestStaticBidPrice
-            bestStaticOfferPrice
-          }
-        }
-      }
-    }
-  }
-`;
-
 const getData = (responseData: MarketsDataQuery): MarketData[] | null =>
   responseData.marketsConnection?.edges
     .filter((edge) => edge.node.data)
@@ -40,6 +14,6 @@ export const marketsDataProvider = makeDataProvider<
   never,
   never
 >({
-  query: MARKETS_DATA_QUERY,
+  query: MarketsDataDocument,
   getData,
 });

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

@@ -0,0 +1,27 @@
+fragment MarketDataFields on MarketData {
+  market {
+    id
+  }
+  bestBidPrice
+  bestOfferPrice
+  markPrice
+  trigger
+  staticMidPrice
+  marketTradingMode
+  indicativeVolume
+  indicativePrice
+  bestStaticBidPrice
+  bestStaticOfferPrice
+}
+
+query MarketsData {
+  marketsConnection {
+    edges {
+      node {
+        data {
+          ...MarketDataFields
+        }
+      }
+    }
+  }
+}

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

@@ -1,132 +1,92 @@
-import { gql } from '@apollo/client';
 import {
   makeDataProvider,
   makeDerivedDataProvider,
   useDataProvider,
 } from '@vegaprotocol/react-helpers';
 import type {
-  Markets,
+  MarketsQuery,
-  Markets_marketsConnection_edges_node,
+  MarketFieldsFragment,
-} from './__generated__/Markets';
+} from './__generated___/markets';
 import { marketsDataProvider } from './markets-data-provider';
 import { marketsCandlesProvider } from './markets-candles-provider';
 import type { MarketData } from './market-data-provider';
 import type { MarketCandles } from './markets-candles-provider';
 import { useMemo } from 'react';
 import { Interval } from '@vegaprotocol/types';
-import { mapDataToMarketList } from './utils';
+import { filterAndSortMarkets } from './utils';
+import { MarketsDocument } from './__generated___/markets';
 
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
+import type { Candle } from './market-candles-provider';
-export type Market = Markets_marketsConnection_edges_node;
 
-const MARKET_DATA_FRAGMENT = gql`
+export type Market = MarketFieldsFragment;
-  fragment MarketFields on Market {
-    id
-    decimalPlaces
-    positionDecimalPlaces
-    state
-    tradingMode
-    fees {
-      factors {
-        makerFee
-        infrastructureFee
-        liquidityFee
-      }
-    }
-    tradableInstrument {
-      instrument {
-        id
-        name
-        code
-        metadata {
-          tags
-        }
-        product {
-          ... on Future {
-            settlementAsset {
-              symbol
-              decimals
-            }
-            quoteName
-          }
-        }
-      }
-    }
-    marketTimestamps {
-      open
-      close
-    }
-  }
-`;
 
-export const MARKET_LIST_QUERY = gql`
+const getData = (responseData: MarketsQuery): Market[] | null =>
-  ${MARKET_DATA_FRAGMENT}
-  query Markets {
-    marketsConnection {
-      edges {
-        node {
-          ...MarketFields
-        }
-      }
-    }
-  }
-`;
-
-const getData = (responseData: Markets): Market[] | null =>
   responseData?.marketsConnection?.edges.map((edge) => edge.node) || null;
 
 export const marketsProvider = makeDataProvider<
-  Markets,
+  MarketsQuery,
   Market[],
   never,
   never
 >({
-  query: MARKET_LIST_QUERY,
+  query: MarketsDocument,
   getData,
   fetchPolicy: 'cache-first',
 });
 
 export const activeMarketsProvider = makeDerivedDataProvider<Market[], never>(
   [marketsProvider],
-  ([markets]) => mapDataToMarketList(markets)
+  ([markets]) => filterAndSortMarkets(markets)
 );
 
-export interface MarketsListData {
+export type MarketWithCandles = Market & { candles?: Candle[] };
-  markets: Market[];
-  marketsData: MarketData[];
-  marketsCandles: MarketCandles[];
-}
 
-export const marketListProvider = makeDerivedDataProvider<
+const addCandles = <T extends Market>(
-  MarketsListData,
+  markets: T[],
+  marketsCandles: MarketCandles[]
+) =>
+  markets.map((market) => ({
+    ...market,
+    candles: marketsCandles.find((data) => data.marketId === market.id)
+      ?.candles,
+  }));
+
+export const marketsWithCandlesProvider = makeDerivedDataProvider<
+  MarketWithCandles[],
   never
 >(
   [
     (callback, client) => activeMarketsProvider(callback, client),
-    (callback, client) => marketsDataProvider(callback, client),
     marketsCandlesProvider,
   ],
-  (parts) => {
+  (parts) => addCandles(parts[0] as Market[], parts[1] as MarketCandles[])
-    return {
-      markets: parts[0] as Market[],
-      marketsData: parts[1] as MarketData[],
-      marketsCandles: parts[2] as MarketCandles[],
-    };
-  }
 );
 
 export type MarketWithData = Market & { data?: MarketData };
 
+const addData = <T extends Market>(markets: T[], marketsData: MarketData[]) =>
+  markets.map((market) => ({
+    ...market,
+    data: marketsData.find((data) => data.market.id === market.id),
+  }));
+
 export const marketsWithDataProvider = makeDerivedDataProvider<
   MarketWithData[],
   never
 >([activeMarketsProvider, marketsDataProvider], (parts) =>
-  (parts[0] as Market[]).map((market) => ({
+  addData(parts[0] as Market[], parts[1] as MarketData[])
-    ...market,
+);
-    data: (parts[1] as MarketData[]).find(
+
-      (data) => data.market.id === market.id
+export const marketListProvider = makeDerivedDataProvider<
-    ),
+  (MarketWithData & MarketWithCandles)[],
-  }))
+  never
+>(
+  [
+    (callback, client) => marketsWithDataProvider(callback, client),
+    marketsCandlesProvider,
+  ],
+  (parts) =>
+    addCandles(parts[0] as MarketWithCandles[], parts[1] as MarketCandles[])
 );
 
 export const useMarketList = () => {
@@ -137,7 +97,7 @@ export const useMarketList = () => {
       interval: Interval.INTERVAL_I1H,
     };
   }, []);
-  const { data, loading, error } = useDataProvider<MarketsListData, never>({
+  const { data, loading, error } = useDataProvider({
     dataProvider: marketListProvider,
     variables,
     noUpdate: true,

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

@@ -0,0 +1,47 @@
+fragment MarketFields on Market {
+  id
+  decimalPlaces
+  positionDecimalPlaces
+  state
+  tradingMode
+  fees {
+    factors {
+      makerFee
+      infrastructureFee
+      liquidityFee
+    }
+  }
+  tradableInstrument {
+    instrument {
+      id
+      name
+      code
+      metadata {
+        tags
+      }
+      product {
+        ... on Future {
+          settlementAsset {
+            symbol
+            decimals
+          }
+          quoteName
+        }
+      }
+    }
+  }
+  marketTimestamps {
+    open
+    close
+  }
+}
+
+query Markets {
+  marketsConnection {
+    edges {
+      node {
+        ...MarketFields
+      }
+    }
+  }
+}

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

@@ -1,6 +1,6 @@
 import { MarketState, MarketTradingMode } from '@vegaprotocol/types';
 import type { Market } from '../markets-provider';
-import { mapDataToMarketList, totalFees } from './market-utils';
+import { filterAndSortMarkets, totalFees } from './market-utils';
 
 const MARKET_A: Partial<Market> = {
   id: '1',
@@ -48,7 +48,7 @@ const MARKET_D: Partial<Market> = {
 
 describe('mapDataToMarketList', () => {
   it('should map queried data to market list format', () => {
-    const result = mapDataToMarketList([
+    const result = filterAndSortMarkets([
       MARKET_A,
       MARKET_B,
       MARKET_C,

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

@@ -16,7 +16,7 @@ export const totalFees = (fees: Market['fees']['factors']) => {
   );
 };
 
-export const mapDataToMarketList = (markets: Market[]) => {
+export const filterAndSortMarkets = (markets: Market[]) => {
   const tradingModesOrdering = [
     MarketTradingMode.TRADING_MODE_CONTINUOUS,
     MarketTradingMode.TRADING_MODE_MONITORING_AUCTION,