From f1097b76fc9fa4f304e6929a24ebb7a84a76ff30 Mon Sep 17 00:00:00 2001 From: asiaznik Date: Tue, 13 Sep 2022 17:45:59 +0200 Subject: [PATCH] fixing console-lite --- .../simple-market-list/Candles.graphql | 5 - .../simple-market-list/SimpleMarkets.graphql | 44 --------- .../simple-market-list/constants.ts | 4 +- .../simple-market-list/data-provider.ts | 94 ------------------- .../simple-market-list.spec.tsx | 84 +++-------------- .../simple-market-list/simple-market-list.tsx | 59 ++++-------- .../simple-market-percent-change.spec.tsx | 16 +--- .../simple-market-percent-change.tsx | 33 +++---- .../simple-market-renderer.tsx | 7 +- .../simple-market-toolbar.tsx | 6 +- apps/console-lite/src/app/constants/index.ts | 4 +- ...rkets-filter-data.ts => filter-markets.ts} | 9 +- .../src/app/hooks/use-column-definitions.tsx | 15 ++- .../src/app/hooks/use-markets-filter.ts | 4 +- .../deal-ticket/market-selector.tsx | 58 +++--------- libs/market-list/src/lib/markets-provider.ts | 3 +- 16 files changed, 86 insertions(+), 359 deletions(-) delete mode 100644 apps/console-lite/src/app/components/simple-market-list/Candles.graphql delete mode 100644 apps/console-lite/src/app/components/simple-market-list/SimpleMarkets.graphql delete mode 100644 apps/console-lite/src/app/components/simple-market-list/data-provider.ts rename apps/console-lite/src/app/hooks/{use-markets-filter-data.ts => filter-markets.ts} (75%) diff --git a/apps/console-lite/src/app/components/simple-market-list/Candles.graphql b/apps/console-lite/src/app/components/simple-market-list/Candles.graphql deleted file mode 100644 index 5ac33b8bc..000000000 --- a/apps/console-lite/src/app/components/simple-market-list/Candles.graphql +++ /dev/null @@ -1,5 +0,0 @@ -subscription CandleLive($marketId: ID!) { - candles(marketId: $marketId, interval: INTERVAL_I1H) { - close - } -} diff --git a/apps/console-lite/src/app/components/simple-market-list/SimpleMarkets.graphql b/apps/console-lite/src/app/components/simple-market-list/SimpleMarkets.graphql deleted file mode 100644 index ab6310ece..000000000 --- a/apps/console-lite/src/app/components/simple-market-list/SimpleMarkets.graphql +++ /dev/null @@ -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 - } -} diff --git a/apps/console-lite/src/app/components/simple-market-list/constants.ts b/apps/console-lite/src/app/components/simple-market-list/constants.ts index d834f7239..f75078b9a 100644 --- a/apps/console-lite/src/app/components/simple-market-list/constants.ts +++ b/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 || {}), }; diff --git a/apps/console-lite/src/app/components/simple-market-list/data-provider.ts b/apps/console-lite/src/app/components/simple-market-list/data-provider.ts deleted file mode 100644 index 5be5b70fe..000000000 --- a/apps/console-lite/src/app/components/simple-market-list/data-provider.ts +++ /dev/null @@ -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; diff --git a/apps/console-lite/src/app/components/simple-market-list/simple-market-list.spec.tsx b/apps/console-lite/src/app/components/simple-market-list/simple-market-list.spec.tsx index ff4ce6cc7..32ec4f848 100644 --- a/apps/console-lite/src/app/components/simple-market-list/simple-market-list.spec.tsx +++ b/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 = { + const mocks: MockedResponse = { 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( - - - , - { 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( diff --git a/apps/console-lite/src/app/components/simple-market-list/simple-market-list.tsx b/apps/console-lite/src/app/components/simple-market-list/simple-market-list.tsx index 0161cfaea..8e1b4f1ee 100644 --- a/apps/console-lite/src/app/components/simple-market-list/simple-market-list.tsx +++ b/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>({}); const gridRef = useRef(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 = 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 = {}; - 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 (
- + { - 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( { ); }); 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( 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(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); diff --git a/apps/console-lite/src/app/components/simple-market-list/simple-market-renderer.tsx b/apps/console-lite/src/app/components/simple-market-list/simple-market-renderer.tsx index 9283f2972..b17fc0588 100644 --- a/apps/console-lite/src/app/components/simple-market-list/simple-market-renderer.tsx +++ b/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) => { />
- {market.tradableInstrument.instrument.product.quoteName} + {/* {market.tradableInstrument.instrument.product.quoteName} */}
); diff --git a/apps/console-lite/src/app/components/simple-market-list/simple-market-toolbar.tsx b/apps/console-lite/src/app/components/simple-market-list/simple-market-toolbar.tsx index 8b04978c7..3ac92c910 100644 --- a/apps/console-lite/src/app/components/simple-market-list/simple-market-toolbar.tsx +++ b/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) => { diff --git a/apps/console-lite/src/app/constants/index.ts b/apps/console-lite/src/app/constants/index.ts index fc26ee723..af29eb63f 100644 --- a/apps/console-lite/src/app/constants/index.ts +++ b/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 = { diff --git a/apps/console-lite/src/app/hooks/use-markets-filter-data.ts b/apps/console-lite/src/app/hooks/filter-markets.ts similarity index 75% rename from apps/console-lite/src/app/hooks/use-markets-filter-data.ts rename to apps/console-lite/src/app/hooks/filter-markets.ts index 71ca60f02..83d1dff9f 100644 --- a/apps/console-lite/src/app/hooks/use-markets-filter-data.ts +++ b/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; diff --git a/apps/console-lite/src/app/hooks/use-column-definitions.tsx b/apps/console-lite/src/app/hooks/use-column-definitions.tsx index f5bbf8fcf..e679ce26d 100644 --- a/apps/console-lite/src/app/hooks/use-column-definitions.tsx +++ b/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 }) => ( ), }, @@ -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 }) => (
{ data, setValue, }: { - data: SimpleMarketsType; + data: { id: string; candles: Candle[] }; setValue: (arg: unknown) => void; }) => ( { field: 'state', headerClass: 'uppercase', minWidth: 100, - cellRenderer: ({ data }: { data: SimpleMarkets_markets }) => ( + cellRenderer: ({ data }: { data: Market }) => (
{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 }) => (
{!isMobile && t('Trade')} diff --git a/apps/console-lite/src/app/hooks/use-markets-filter.ts b/apps/console-lite/src/app/hooks/use-markets-filter.ts index 43fae17d1..1bba0a7dc 100644 --- a/apps/console-lite/src/app/hooks/use-markets-filter.ts +++ b/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([]); const [assetsPerProduct, setAssetsPerProduct] = useState< Record diff --git a/libs/deal-ticket/src/components/deal-ticket/market-selector.tsx b/libs/deal-ticket/src/components/deal-ticket/market-selector.tsx index 312f6df9f..76450e7fc 100644 --- a/libs/deal-ticket/src/components/deal-ticket/market-selector.tsx +++ b/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(null); const inputRef = useRef(null); const arrowButtonRef = useRef(null); - const [skip, setSkip] = useState(true); - const [results, setResults] = useState([]); + const [results, setResults] = useState([]); 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(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') diff --git a/libs/market-list/src/lib/markets-provider.ts b/libs/market-list/src/lib/markets-provider.ts index 4f6d4ac7e..3cf438599 100644 --- a/libs/market-list/src/lib/markets-provider.ts +++ b/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( ([markets]) => mapDataToMarketList(markets) ); -interface MarketsListData { +export interface MarketsListData { markets: Market[]; marketsData: MarketData[]; marketsCandles: MarketCandles[];