fixing console-lite

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

@@ -1,5 +0,0 @@
-subscription CandleLive($marketId: ID!) {
-  candles(marketId: $marketId, interval: INTERVAL_I1H) {
-    close
-  }
-}

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

@@ -1,44 +0,0 @@
-fragment SimpleMarketDataFields on MarketData {
-  market {
-    id
-    state
-  }
-}
-
-query SimpleMarkets($CandleSince: String!) {
-  markets {
-    id
-    name
-    state
-    data {
-      ...SimpleMarketDataFields
-    }
-    tradableInstrument {
-      instrument {
-        code
-        metadata {
-          tags
-        }
-        product {
-          __typename
-          ... on Future {
-            quoteName
-            settlementAsset {
-              symbol
-            }
-          }
-        }
-      }
-    }
-    candles(interval: INTERVAL_I1H, since: $CandleSince) {
-      open
-      close
-    }
-  }
-}
-
-subscription SimpleMarketDataSub {
-  marketData {
-    ...SimpleMarketDataFields
-  }
-}

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

@@ -2,8 +2,8 @@ import { t } from '@vegaprotocol/react-helpers';
 import { themelite as theme } from '@vegaprotocol/tailwindcss-config';
 import { MarketState } from '@vegaprotocol/types';
 import { IS_MARKET_TRADABLE } from '../../constants';
-import type { SimpleMarkets_markets } from './__generated__/SimpleMarkets';
 import colors from 'tailwindcss/colors';
+import type { Market } from '@vegaprotocol/market-list';
 
 export const STATES_FILTER = [
   { value: 'all', text: t('All') },
@@ -192,7 +192,7 @@ export const agGridDarkVariables = `
 `;
 
 export const ROW_CLASS_RULES = {
-  'cursor-pointer': ({ data }: { data: SimpleMarkets_markets }) =>
+  'cursor-pointer': ({ data }: { data: Market }) =>
     IS_MARKET_TRADABLE(data || {}),
 };
 

apps/console-lite/src/app/components/simple-market-list/data-provider.ts

@@ -1,94 +0,0 @@
-import produce from 'immer';
-import { gql } from '@apollo/client';
-import { makeDataProvider } from '@vegaprotocol/react-helpers';
-import type {
-  SimpleMarkets,
-  SimpleMarkets_markets,
-} from './__generated__/SimpleMarkets';
-import type {
-  SimpleMarketDataSub,
-  SimpleMarketDataSub_marketData,
-} from './__generated__/SimpleMarketDataSub';
-
-export const MARKETS_QUERY = gql`
-  query SimpleMarkets($CandleSince: String!) {
-    markets {
-      id
-      state
-      tradableInstrument {
-        instrument {
-          code
-          name
-          metadata {
-            tags
-          }
-          product {
-            __typename
-            ... on Future {
-              quoteName
-              settlementAsset {
-                symbol
-              }
-            }
-          }
-        }
-      }
-      candles(interval: INTERVAL_I1H, since: $CandleSince) {
-        open
-        close
-      }
-    }
-  }
-`;
-
-const MARKET_DATA_SUB = gql`
-  subscription SimpleMarketDataSub {
-    marketData {
-      market {
-        id
-        state
-      }
-    }
-  }
-`;
-
-export const CANDLE_SUB = gql`
-  subscription CandleLive($marketId: ID!) {
-    candles(marketId: $marketId, interval: INTERVAL_I1H) {
-      close
-    }
-  }
-`;
-
-const update = (
-  data: SimpleMarkets_markets[],
-  delta: SimpleMarketDataSub_marketData
-) => {
-  return produce(data, (draft) => {
-    const index = draft.findIndex((m) => m.id === delta.market.id);
-    if (index !== -1) {
-      draft[index].state = delta.market.state;
-    }
-    // @TODO - else push new market to draft
-  });
-};
-
-const getData = (responseData: SimpleMarkets) => responseData.markets;
-const getDelta = (
-  subscriptionData: SimpleMarketDataSub
-): SimpleMarketDataSub_marketData => subscriptionData.marketData;
-
-export const dataProvider = makeDataProvider<
-  SimpleMarkets,
-  SimpleMarkets_markets[],
-  SimpleMarketDataSub,
-  SimpleMarketDataSub_marketData
->({
-  query: MARKETS_QUERY,
-  subscriptionQuery: MARKET_DATA_SUB,
-  update,
-  getData,
-  getDelta,
-});
-
-export default dataProvider;

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

@@ -13,12 +13,8 @@ import type { MockedResponse } from '@apollo/client/testing';
 import { BrowserRouter } from 'react-router-dom';
 import { MarketState } from '@vegaprotocol/types';
 import SimpleMarketList from './simple-market-list';
-import { MARKETS_QUERY } from './data-provider';
-import type {
-  SimpleMarkets_markets,
-  SimpleMarkets,
-} from './__generated__/SimpleMarkets';
-import type { SimpleMarketDataSub_marketData } from './__generated__/SimpleMarketDataSub';
+import type { Market, MarketsListData } from '@vegaprotocol/market-list';
+import { MARKET_LIST_QUERY } from '@vegaprotocol/market-list';
 
 const mockedNavigate = jest.fn();
 
@@ -28,16 +24,6 @@ jest.mock('react-router-dom', () => ({
   useParams: () => ({}),
 }));
 
-jest.mock('date-fns', () => ({
-  subDays: () => new Date('2022-06-02T11:11:21.721Z'),
-}));
-
-let updateMock: ({
-  delta,
-}: {
-  delta: SimpleMarketDataSub_marketData;
-}) => boolean;
-
 let mockData = [
   {
     id: '1',
@@ -73,20 +59,18 @@ let mockData = [
       },
     },
   },
-] as unknown as SimpleMarkets_markets[];
+] as unknown as Market[];
 
-const mockUseDataProvider = ({ update }: { update: () => boolean }) => {
-  updateMock = update;
+const LIB = '@vegaprotocol/market-list';
+const useMarketList = () => {
   return { data: mockData, loading: false, error: false };
 };
-
-jest.mock('@vegaprotocol/react-helpers', () => ({
-  ...jest.requireActual('@vegaprotocol/react-helpers'),
-  useDataProvider: jest.fn((args) => mockUseDataProvider(args)),
+jest.mock(LIB, () => ({
+  ...jest.requireActual(LIB),
+  useMarketList: jest.fn(() => useMarketList()),
 }));
 
 const mockIsTradable = jest.fn((_arg) => true);
-
 jest.mock('../../constants', () => ({
   ...jest.requireActual('../../constants'),
   IS_MARKET_TRADABLE: jest.fn((arg) => mockIsTradable(arg)),
@@ -98,15 +82,12 @@ describe('SimpleMarketList', () => {
     cleanup();
   });
 
-  const mocks: MockedResponse<SimpleMarkets> = {
+  const mocks: MockedResponse<MarketsListData> = {
     request: {
-      query: MARKETS_QUERY,
-      variables: {
-        CandleSince: '2022-06-02T11:11:21.721Z',
-      },
+      query: MARKET_LIST_QUERY,
     },
     result: {
-      data: { markets: mockData },
+      data: { markets: mockData, marketsCandles: [], marketsData: [] },
     },
   };
 
@@ -131,49 +112,6 @@ describe('SimpleMarketList', () => {
     });
   });
 
-  it('update should return proper boolean value', async () => {
-    await act(async () => {
-      render(
-        <MockedProvider mocks={[mocks]}>
-          <SimpleMarketList />
-        </MockedProvider>,
-        { wrapper: BrowserRouter }
-      );
-      await new Promise((resolve) => setTimeout(resolve, 0));
-    });
-    await waitFor(() => {
-      expect(
-        document.querySelector('.ag-center-cols-container')
-      ).toBeInTheDocument();
-    });
-
-    await expect(
-      updateMock({
-        delta: {
-          __typename: 'MarketData',
-          market: {
-            __typename: 'Market',
-            id: '2',
-            state: MarketState.STATE_ACTIVE,
-          },
-        },
-      })
-    ).toEqual(true);
-
-    await expect(
-      updateMock({
-        delta: {
-          __typename: 'MarketData',
-          market: {
-            __typename: 'Market',
-            id: '2',
-            state: MarketState.STATE_SUSPENDED,
-          },
-        },
-      })
-    ).toEqual(false);
-  });
-
   it('click on row should be properly handled', async () => {
     await act(async () => {
       render(

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

@@ -1,29 +1,16 @@
-import React, {
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-} from 'react';
+import { useCallback, useContext, useEffect, useMemo, useRef } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
-import { subDays } from 'date-fns';
 import type { AgGridReact } from 'ag-grid-react';
 import { AgGridDynamic as AgGrid } from '@vegaprotocol/ui-toolkit';
-import {
-  useDataProvider,
-  useScreenDimensions,
-} from '@vegaprotocol/react-helpers';
+import { useScreenDimensions } from '@vegaprotocol/react-helpers';
 import { t } from '@vegaprotocol/react-helpers';
 import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
 import { ThemeContext } from '@vegaprotocol/react-helpers';
 import type { MarketState } from '@vegaprotocol/types';
-import useMarketsFilterData from '../../hooks/use-markets-filter-data';
+import filterMarkets from '../../hooks/filter-markets';
 import useColumnDefinitions from '../../hooks/use-column-definitions';
-import dataProvider from './data-provider';
 import * as constants from './constants';
 import SimpleMarketToolbar from './simple-market-toolbar';
-import type { SimpleMarkets_markets } from './__generated__/SimpleMarkets';
-import type { SimpleMarketDataSub_marketData } from './__generated__/SimpleMarketDataSub';
 import { IS_MARKET_TRADABLE } from '../../constants';
 import type {
   CellKeyDownEvent,
@@ -33,8 +20,10 @@ import type {
   GetRowIdParams,
   TabToNextCellParams,
 } from 'ag-grid-community/dist/lib/entities/iCallbackParams';
+import type { Market } from '@vegaprotocol/market-list';
+import { useMarketList } from '@vegaprotocol/market-list';
 
-export type SimpleMarketsType = SimpleMarkets_markets & {
+export type MarketWithPercentChange = Market & {
   percentChange?: number | '-';
 };
 
@@ -51,26 +40,18 @@ const SimpleMarketList = () => {
   const theme = useContext(ThemeContext);
   const statusesRef = useRef<Record<string, MarketState | ''>>({});
   const gridRef = useRef<AgGridReact | null>(null);
-  const variables = useMemo(
-    () => ({
-      CandleSince: subDays(Date.now(), 1).toJSON(),
-    }),
-    []
-  );
-  const update = useCallback(
-    ({ delta }: { delta: SimpleMarketDataSub_marketData }) =>
-      statusesRef.current[delta.market.id] === delta.market.state,
-    [statusesRef]
-  );
 
-  const { data, error, loading } = useDataProvider({
-    dataProvider,
-    update,
-    variables,
-  });
-  const localData: Array<SimpleMarketsType> = useMarketsFilterData(
-    data || [],
-    params
+  const { data, error, loading } = useMarketList();
+
+  const localData = useMemo(
+    () =>
+      filterMarkets(data?.markets || [], params).map((m) => ({
+        ...m,
+        candles: (data?.marketsCandles || [])
+          .filter((c) => c.marketId === m.id)
+          .map((c) => c.candles),
+      })),
+    [data, params]
   );
 
   const handleOnGridReady = useCallback(() => {
@@ -79,7 +60,7 @@ const SimpleMarketList = () => {
 
   useEffect(() => {
     const statuses: Record<string, MarketState | ''> = {};
-    data?.forEach((market) => {
+    data?.markets?.forEach((market) => {
       statuses[market.id] = market.state || '';
     });
     statusesRef.current = statuses;
@@ -95,7 +76,7 @@ const SimpleMarketList = () => {
   const getRowId = useCallback(({ data }: GetRowIdParams) => data.id, []);
 
   const handleRowClicked = useCallback(
-    ({ data }: { data: SimpleMarketsType }) => {
+    ({ data }: { data: Market }) => {
       if (IS_MARKET_TRADABLE(data)) {
         navigate(`/trading/${data.id}`);
       }
@@ -135,7 +116,7 @@ const SimpleMarketList = () => {
 
   return (
     <div className="h-full p-4 md:p-6 grid grid-rows-[min-content,1fr]">
-      <SimpleMarketToolbar data={data || []} />
+      <SimpleMarketToolbar data={data?.markets || []} />
       <AsyncRenderer loading={loading} error={error} data={localData}>
         <AgGrid
           className="mb-32 min-h-[300px]"

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

@@ -2,10 +2,10 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { MockedProvider } from '@apollo/react-testing';
 import SimpleMarketPercentChange from './simple-market-percent-change';
-import type { SimpleMarkets_markets_candles } from './__generated__/SimpleMarkets';
+import type { Candle } from '@vegaprotocol/market-list';
 
 describe('SimpleMarketPercentChange should parse proper change', () => {
-  let candles: (SimpleMarkets_markets_candles | null)[] | null;
+  let candles: (Candle | null)[] | null;
   const setValue = () => undefined;
   it('empty array', () => {
     candles = [];
@@ -34,11 +34,7 @@ describe('SimpleMarketPercentChange should parse proper change', () => {
     expect(screen.getByText('-')).toBeInTheDocument();
   });
   it('an appreciated one', () => {
-    candles = [
-      { open: '50' } as SimpleMarkets_markets_candles,
-      { close: '100' } as SimpleMarkets_markets_candles,
-      null,
-    ];
+    candles = [{ open: '50' } as Candle, { close: '100' } as Candle, null];
     render(
       <MockedProvider>
         <SimpleMarketPercentChange
@@ -54,11 +50,7 @@ describe('SimpleMarketPercentChange should parse proper change', () => {
     );
   });
   it('a depreciated one', () => {
-    candles = [
-      { open: '100' } as SimpleMarkets_markets_candles,
-      { close: '50' } as SimpleMarkets_markets_candles,
-      null,
-    ];
+    candles = [{ open: '100' } as Candle, { close: '50' } as Candle, null];
     render(
       <MockedProvider>
         <SimpleMarketPercentChange

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

@@ -1,26 +1,20 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import classNames from 'classnames';
 import { InView } from 'react-intersection-observer';
-import { useSubscription } from '@apollo/client';
-import type { SimpleMarkets_markets_candles } from './__generated__/SimpleMarkets';
-import type {
-  CandleLive,
-  CandleLiveVariables,
-} from './__generated__/CandleLive';
-import { CANDLE_SUB } from './data-provider';
+import { useDataProvider } from '@vegaprotocol/react-helpers';
+import type { Candle } from '@vegaprotocol/market-list';
+import { marketCandlesProvider } from '@vegaprotocol/market-list';
+import { Interval } from '@vegaprotocol/types';
 
 interface Props {
-  candles: (SimpleMarkets_markets_candles | null)[] | null;
+  candles: (Candle | null)[] | null;
   marketId: string;
   setValue: (arg: unknown) => void;
 }
 
 const EMPTY_VALUE = ' - ';
 
-const getChange = (
-  candles: (SimpleMarkets_markets_candles | null)[] | null,
-  lastClose?: string
-) => {
+const getChange = (candles: (Candle | null)[] | null, lastClose?: string) => {
   if (candles) {
     const first = parseInt(candles.find((item) => item?.open)?.open || '-1');
     const last =
@@ -74,11 +68,14 @@ const SimpleMarketPercentChangeWrapper = (props: Props) => {
 };
 
 const SimpleMarketPercentChange = ({ candles, marketId, setValue }: Props) => {
-  const { data: { candles: { close = undefined } = {} } = {} } =
-    useSubscription<CandleLive, CandleLiveVariables>(CANDLE_SUB, {
-      variables: { marketId },
-    });
-  const change = getChange(candles, close);
+  const { data } = useDataProvider({
+    dataProvider: marketCandlesProvider,
+    variables: { marketId, interval: Interval.INTERVAL_I1D },
+  });
+
+  const close = data?.map((m) => m.close);
+
+  const change = getChange(candles, close?.[0]);
   const colorClasses = getClassColor(change);
   useEffect(() => {
     const value = parseFloat(change);

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

@@ -1,10 +1,9 @@
-import React from 'react';
 import classNames from 'classnames';
-import type { MarketNames_markets } from '@vegaprotocol/deal-ticket';
 import SimpleMarketExpires from './simple-market-expires';
+import type { Market } from '@vegaprotocol/market-list';
 
 interface Props {
-  market: MarketNames_markets;
+  market: Market;
   isMobile?: boolean;
 }
 
@@ -25,7 +24,7 @@ const MarketNameRenderer = ({ market, isMobile }: Props) => {
         />
       </div>
       <div className="col-span-2 text-ui-tiny md:text-ui-small text-deemphasise dark:text-midGrey self-start leading-3">
-        {market.tradableInstrument.instrument.product.quoteName}
+        {/* {market.tradableInstrument.instrument.product.quoteName} */}
       </div>
     </div>
   );

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { useNavigate, useParams, Link } from 'react-router-dom';
 import {
@@ -17,10 +17,10 @@ import {
 import { MarketState } from '@vegaprotocol/types';
 import useMarketFiltersData from '../../hooks/use-markets-filter';
 import { STATES_FILTER } from './constants';
-import type { SimpleMarkets_markets } from './__generated__/SimpleMarkets';
+import type { Markets_marketsConnection_edges_node } from '@vegaprotocol/market-list';
 
 interface Props {
-  data: SimpleMarkets_markets[];
+  data: Markets_marketsConnection_edges_node[];
 }
 
 const SimpleMarketToolbar = ({ data }: Props) => {

apps/console-lite/src/app/constants/index.ts

@@ -1,6 +1,6 @@
-import type { SimpleMarkets_markets } from '../components/simple-market-list/__generated__/SimpleMarkets';
 import { MarketState } from '@vegaprotocol/types';
 import { t } from '@vegaprotocol/react-helpers';
+import type { Market } from '@vegaprotocol/market-list';
 
 export const DATE_FORMAT = 'dd MMMM yyyy HH:mm';
 export const EXPIRE_DATE_FORMAT = 'MMM dd';
@@ -9,7 +9,7 @@ export const TRADABLE_STATES = {
   [MarketState.STATE_ACTIVE]: true,
 };
 
-export const IS_MARKET_TRADABLE = (market: SimpleMarkets_markets) =>
+export const IS_MARKET_TRADABLE = (market: Market) =>
   Boolean((market.state ?? '') in TRADABLE_STATES && market?.id);
 
 export const MARKET_STATES_MAP: Record<MarketState | '', string> = {

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

@@ -1,11 +1,8 @@
-import type { SimpleMarkets_markets } from '../components/simple-market-list/__generated__/SimpleMarkets';
 import type { RouterParams } from '../components/simple-market-list/simple-market-list';
 import { MarketState } from '@vegaprotocol/types';
+import type { Market } from '@vegaprotocol/market-list';
 
-const useMarketsFilterData = (
-  data: SimpleMarkets_markets[] = [],
-  params: RouterParams
-) => {
+const filterMarkets = (data: Market[], params: RouterParams) => {
   return data.filter((item) => {
     if (
       params.product &&
@@ -34,4 +31,4 @@ const useMarketsFilterData = (
   });
 };
 
-export default useMarketsFilterData;
+export default filterMarkets;

apps/console-lite/src/app/hooks/use-column-definitions.tsx

@@ -1,14 +1,13 @@
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import classNames from 'classnames';
 import { t } from '@vegaprotocol/react-helpers';
-import type { SimpleMarkets_markets } from '../components/simple-market-list/__generated__/SimpleMarkets';
 import MarketNameRenderer from '../components/simple-market-list/simple-market-renderer';
 import SimpleMarketPercentChange from '../components/simple-market-list/simple-market-percent-change';
 import { Icon } from '@vegaprotocol/ui-toolkit';
 import type { ValueSetterParams } from 'ag-grid-community';
-import type { SimpleMarketsType } from '../components/simple-market-list/simple-market-list';
 import { IconNames } from '@blueprintjs/icons';
 import { IS_MARKET_TRADABLE, MARKET_STATES_MAP } from '../constants';
+import type { Candle, Market } from '@vegaprotocol/market-list';
 
 interface Props {
   isMobile: boolean;
@@ -24,7 +23,7 @@ const useColumnDefinitions = ({ isMobile }: Props) => {
         minWidth: isMobile ? 160 : 350,
         field: 'tradableInstrument.instrument.name',
         cellClass: 'overflow-visible',
-        cellRenderer: ({ data }: { data: SimpleMarketsType }) => (
+        cellRenderer: ({ data }: { data: Market }) => (
           <MarketNameRenderer market={data} isMobile={isMobile} />
         ),
       },
@@ -35,7 +34,7 @@ const useColumnDefinitions = ({ isMobile }: Props) => {
         minWidth: isMobile ? 50 : 80,
         cellClass: 'uppercase flex h-full items-center',
         field: 'tradableInstrument.instrument.product.settlementAsset.symbol',
-        cellRenderer: ({ data }: { data: SimpleMarketsType }) => (
+        cellRenderer: ({ data }: { data: Market }) => (
           <div
             className="grid h-full items-center text-center"
             title={
@@ -70,7 +69,7 @@ const useColumnDefinitions = ({ isMobile }: Props) => {
           data,
           setValue,
         }: {
-          data: SimpleMarketsType;
+          data: { id: string; candles: Candle[] };
           setValue: (arg: unknown) => void;
         }) => (
           <SimpleMarketPercentChange
@@ -96,7 +95,7 @@ const useColumnDefinitions = ({ isMobile }: Props) => {
         field: 'state',
         headerClass: 'uppercase',
         minWidth: 100,
-        cellRenderer: ({ data }: { data: SimpleMarkets_markets }) => (
+        cellRenderer: ({ data }: { data: Market }) => (
           <div className="uppercase flex h-full items-center justify-center">
             <div className="border text-center px-2 md:px-6 leading-4 md:leading-6">
               {MARKET_STATES_MAP[data.state || '']}
@@ -110,7 +109,7 @@ const useColumnDefinitions = ({ isMobile }: Props) => {
         headerClass: 'uppercase',
         sortable: false,
         width: isMobile ? 35 : 100,
-        cellRenderer: ({ data }: { data: SimpleMarkets_markets }) => (
+        cellRenderer: ({ data }: { data: Market }) => (
           <div className="h-full flex h-full items-center justify-end">
             <div className="uppercase text-center pr-2">
               {!isMobile && t('Trade')}

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

@@ -1,7 +1,7 @@
+import type { Market } from '@vegaprotocol/market-list';
 import { useEffect, useState } from 'react';
-import type { SimpleMarkets_markets } from '../components/simple-market-list/__generated__/SimpleMarkets';
 
-const useMarketFilters = (data: SimpleMarkets_markets[]) => {
+const useMarketFilters = (data: Market[]) => {
   const [products, setProducts] = useState<string[]>([]);
   const [assetsPerProduct, setAssetsPerProduct] = useState<
     Record<string, string[]>

libs/deal-ticket/src/components/deal-ticket/market-selector.tsx

@@ -7,7 +7,6 @@ import React, {
   useMemo,
 } from 'react';
 import * as DialogPrimitives from '@radix-ui/react-dialog';
-import { gql, useQuery } from '@apollo/client';
 import classNames from 'classnames';
 import type { DealTicketQuery_market } from './';
 import {
@@ -22,40 +21,18 @@ import {
   useScreenDimensions,
   useOutsideClick,
 } from '@vegaprotocol/react-helpers';
-import type {
-  MarketNames,
-  MarketNames_markets,
-} from './__generated__/MarketNames';
 import { IconNames } from '@blueprintjs/icons';
 import { MarketState } from '@vegaprotocol/types';
-
-export const MARKET_NAMES_QUERY = gql`
-  query MarketNames {
-    markets {
-      id
-      state
-      tradableInstrument {
-        instrument {
-          code
-          name
-          metadata {
-            tags
-          }
-          product {
-            ... on Future {
-              quoteName
-            }
-          }
-        }
-      }
-    }
-  }
-`;
+import type { Market } from '@vegaprotocol/market-list';
+import { useMarketList } from '@vegaprotocol/market-list';
 
 interface Props {
   market: DealTicketQuery_market;
   setMarket: (marketId: string) => void;
-  ItemRenderer?: React.FC<{ market: MarketNames_markets; isMobile?: boolean }>;
+  ItemRenderer?: React.FC<{
+    market: Market;
+    isMobile?: boolean;
+  }>;
 }
 
 function escapeRegExp(str: string) {
@@ -67,8 +44,7 @@ export const MarketSelector = ({ market, setMarket, ItemRenderer }: Props) => {
   const contRef = useRef<HTMLDivElement | null>(null);
   const inputRef = useRef<HTMLInputElement | null>(null);
   const arrowButtonRef = useRef<HTMLButtonElement | null>(null);
-  const [skip, setSkip] = useState(true);
-  const [results, setResults] = useState<MarketNames_markets[]>([]);
+  const [results, setResults] = useState<Market[]>([]);
   const [showPane, setShowPane] = useState(false);
   const [lookup, setLookup] = useState(
     market.tradableInstrument.instrument.name || ''
@@ -77,9 +53,7 @@ export const MarketSelector = ({ market, setMarket, ItemRenderer }: Props) => {
     null
   );
 
-  const { data, loading, error } = useQuery<MarketNames>(MARKET_NAMES_QUERY, {
-    skip,
-  });
+  const { data, loading, error } = useMarketList();
 
   const outsideClickCb = useCallback(() => {
     if (!isMobile) {
@@ -96,11 +70,8 @@ export const MarketSelector = ({ market, setMarket, ItemRenderer }: Props) => {
       } = event;
       setLookup(value);
       setShowPane(true);
-      if (value) {
-        setSkip(false);
-      }
     },
-    [setLookup, setShowPane, setSkip]
+    [setLookup, setShowPane]
   );
 
   const handleMarketSelect = useCallback(
@@ -117,11 +88,7 @@ export const MarketSelector = ({ market, setMarket, ItemRenderer }: Props) => {
   );
 
   const handleItemKeyDown = useCallback(
-    (
-      event: React.KeyboardEvent,
-      market: MarketNames_markets,
-      index: number
-    ) => {
+    (event: React.KeyboardEvent, market: Market, index: number) => {
       switch (event.key) {
         case 'ArrowDown':
           if (index < results.length - 1) {
@@ -170,9 +137,8 @@ export const MarketSelector = ({ market, setMarket, ItemRenderer }: Props) => {
 
   const openPane = useCallback(() => {
     setShowPane(!showPane);
-    setSkip(false);
     inputRef.current?.focus();
-  }, [showPane, setShowPane, setSkip, inputRef]);
+  }, [showPane, setShowPane, inputRef]);
 
   const handleDialogOnchange = useCallback(
     (isOpen: boolean) => {
@@ -275,7 +241,7 @@ export const MarketSelector = ({ market, setMarket, ItemRenderer }: Props) => {
   useEffect(() => {
     setResults(
       data?.markets?.filter(
-        (item: MarketNames_markets) =>
+        (item) =>
           item.state === MarketState.STATE_ACTIVE &&
           item.tradableInstrument.instrument.name.match(
             new RegExp(escapeRegExp(lookup), 'i')

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

@@ -46,6 +46,7 @@ const MARKET_DATA_FRAGMENT = gql`
             settlementAsset {
               symbol
             }
+            quoteName
           }
         }
       }
@@ -88,7 +89,7 @@ export const activeMarketsProvider = makeDerivedDataProvider<Market[]>(
   ([markets]) => mapDataToMarketList(markets)
 );
 
-interface MarketsListData {
+export interface MarketsListData {
   markets: Market[];
   marketsData: MarketData[];
   marketsCandles: MarketCandles[];