LaconicNetwork/vega-frontend-monorepo
3
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

fix(trading): market selector dropdown not updating (#5027)

Browse Source
This commit is contained in:
Matthew Russell 2023-10-17 09:56:48 -07:00 committed by GitHub
parent 9dc9588a14
commit e7c3b5054c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 158 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
apps/trading/components/market-selector/market-selector-item.tsx
View File

@ -56,6 +56,7 @@ const MarketData = ({
variables: {
marketId: market.id,
},
fetchPolicy: 'no-cache',
});
const marketData = data?.marketsData[0];
@ -70,6 +71,8 @@ const MarketData = ({
const marketTradingMode = marketData
? marketData.marketTradingMode
: market.data
? market.data.marketTradingMode
: market.tradingMode;
const mode = [
@ -95,7 +98,7 @@ const MarketData = ({
<>
<div className="w-2/5" role="gridcell">
<h3 className="flex items-baseline">
<span className="text-sm lg:text-base text-ellipsis whitespace-nowrap overflow-hidden">
<span className="overflow-hidden text-sm lg:text-base text-ellipsis whitespace-nowrap">
{market.tradableInstrument.instrument.code}
</span>
{allProducts && productType && (

33
apps/trading/components/market-selector/market-selector.spec.tsx
View File

@ -2,7 +2,10 @@ import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { MarketSelector } from './market-selector';
import { useMarketList } from '@vegaprotocol/markets';
import { createMarketFragment } from '@vegaprotocol/mock';
import {
createMarketFragment,
createMarketsDataFragment,
} from '@vegaprotocol/mock';
import { MarketState } from '@vegaprotocol/types';
import { MemoryRouter } from 'react-router-dom';
import type { ReactNode } from 'react';
@ -36,6 +39,10 @@ describe('MarketSelector', () => {
const markets = [
createMarketFragment({
id: 'market-0',
// @ts-ignore candles get joined outside this type
data: createMarketsDataFragment({
marketState: MarketState.STATE_ACTIVE,
}),
tradableInstrument: {
instrument: {
code: 'a',
@ -56,7 +63,10 @@ describe('MarketSelector', () => {
}),
createMarketFragment({
id: 'market-1',
state: MarketState.STATE_SUSPENDED,
// @ts-ignore candles get joined outside this type
data: createMarketsDataFragment({
marketState: MarketState.STATE_SUSPENDED,
}),
tradableInstrument: {
instrument: {
code: 'b',
@ -77,7 +87,10 @@ describe('MarketSelector', () => {
}),
createMarketFragment({
id: 'market-2',
state: MarketState.STATE_CLOSED,
// @ts-ignore candles get joined outside this type
data: createMarketsDataFragment({
marketState: MarketState.STATE_CLOSED,
}),
tradableInstrument: {
instrument: {
product: {
@ -91,7 +104,10 @@ describe('MarketSelector', () => {
}),
createMarketFragment({
id: 'market-3',
state: MarketState.STATE_ACTIVE,
// @ts-ignore candles get joined outside this type
data: createMarketsDataFragment({
marketState: MarketState.STATE_ACTIVE,
}),
tradableInstrument: {
instrument: {
code: 'c',
@ -112,6 +128,10 @@ describe('MarketSelector', () => {
}),
createMarketFragment({
id: 'market-4',
// @ts-ignore candles get joined outside this type
data: createMarketsDataFragment({
marketState: MarketState.STATE_ACTIVE,
}),
tradableInstrument: {
instrument: {
code: 'cd',
@ -132,7 +152,10 @@ describe('MarketSelector', () => {
}),
];
const activeMarkets = markets.filter((m) => isMarketActive(m.state));
const activeMarkets = markets.filter((m) =>
// @ts-ignore candles get joined outside this type
isMarketActive(m.data.marketState)
);
mockUseMarketList.mockReturnValue({
data: markets,
loading: false,

121
apps/trading/components/market-selector/use-market-selector-list.spec.tsx
View File

@ -4,7 +4,10 @@ import { useMarketSelectorList } from './use-market-selector-list';
import { isMarketActive } from '../../lib/utils';
import { Product } from './product-selector';
import { Sort } from './sort-dropdown';
import { createMarketFragment } from '@vegaprotocol/mock';
import {
createMarketFragment,
createMarketsDataFragment,
} from '@vegaprotocol/mock';
import { MarketState } from '@vegaprotocol/types';
import { useMarketList } from '@vegaprotocol/markets';
import type { Filter } from './market-selector';
@ -31,22 +34,40 @@ describe('useMarketSelectorList', () => {
it('returns all markets active and suspended markets', () => {
const markets = [
createMarketFragment({ id: 'market-0' }),
createMarketFragment({
id: 'market-0',
// @ts-ignore candles get joined outside this type
data: createMarketsDataFragment({
marketState: MarketState.STATE_ACTIVE,
}),
}),
createMarketFragment({
id: 'market-1',
state: MarketState.STATE_SUSPENDED,
// @ts-ignore candles get joined outside this type
data: createMarketsDataFragment({
marketState: MarketState.STATE_SUSPENDED,
}),
}),
createMarketFragment({
id: 'market-2',
state: MarketState.STATE_CLOSED,
// @ts-ignore candles get joined outside this type
data: createMarketsDataFragment({
marketState: MarketState.STATE_CLOSED,
}),
}),
createMarketFragment({
id: 'market-3',
state: MarketState.STATE_CLOSED,
// @ts-ignore candles get joined outside this type
data: createMarketsDataFragment({
marketState: MarketState.STATE_CLOSED,
}),
}),
createMarketFragment({
id: 'market-4',
state: MarketState.STATE_PENDING,
// @ts-ignore candles get joined outside this type
data: createMarketsDataFragment({
marketState: MarketState.STATE_PENDING,
}),
}),
];
mockUseMarketList.mockReturnValue({
@ -56,7 +77,8 @@ describe('useMarketSelectorList', () => {
});
const { result } = setup();
const expectedFilteredMarkets = markets.filter((m) =>
isMarketActive(m.state)
// @ts-ignore candles get joined outside this type
isMarketActive(m.data.marketState)
);
expect(result.current).toEqual({
data: markets,
@ -70,6 +92,10 @@ describe('useMarketSelectorList', () => {
const markets = [
createMarketFragment({
id: 'market-0',
// @ts-ignore candles get joined outside this type
data: createMarketsDataFragment({
marketState: MarketState.STATE_ACTIVE,
}),
tradableInstrument: {
instrument: {
product: {
@ -90,6 +116,10 @@ describe('useMarketSelectorList', () => {
// }),
createMarketFragment({
id: 'market-2',
// @ts-ignore candles get joined outside this type
data: createMarketsDataFragment({
marketState: MarketState.STATE_ACTIVE,
}),
tradableInstrument: {
instrument: {
product: {
@ -135,6 +165,10 @@ describe('useMarketSelectorList', () => {
const markets = [
createMarketFragment({
id: 'market-0',
// @ts-ignore candles get joined outside this type
data: createMarketsDataFragment({
marketState: MarketState.STATE_ACTIVE,
}),
tradableInstrument: {
instrument: {
product: {
@ -148,6 +182,10 @@ describe('useMarketSelectorList', () => {
}),
createMarketFragment({
id: 'market-1',
// @ts-ignore candles get joined outside this type
data: createMarketsDataFragment({
marketState: MarketState.STATE_ACTIVE,
}),
tradableInstrument: {
instrument: {
product: {
@ -161,6 +199,10 @@ describe('useMarketSelectorList', () => {
}),
createMarketFragment({
id: 'market-2',
// @ts-ignore candles get joined outside this type
data: createMarketsDataFragment({
marketState: MarketState.STATE_ACTIVE,
}),
tradableInstrument: {
instrument: {
product: {
@ -174,6 +216,10 @@ describe('useMarketSelectorList', () => {
}),
createMarketFragment({
id: 'market-3',
// @ts-ignore candles get joined outside this type
data: createMarketsDataFragment({
marketState: MarketState.STATE_ACTIVE,
}),
tradableInstrument: {
instrument: {
product: {
@ -238,6 +284,10 @@ describe('useMarketSelectorList', () => {
const markets = [
createMarketFragment({
id: 'market-0',
// @ts-ignore candles get joined outside this type
data: createMarketsDataFragment({
marketState: MarketState.STATE_ACTIVE,
}),
tradableInstrument: {
instrument: {
code: 'abc',
@ -247,6 +297,10 @@ describe('useMarketSelectorList', () => {
}),
createMarketFragment({
id: 'market-1',
// @ts-ignore candles get joined outside this type
data: createMarketsDataFragment({
marketState: MarketState.STATE_ACTIVE,
}),
tradableInstrument: {
instrument: {
code: 'def',
@ -256,6 +310,10 @@ describe('useMarketSelectorList', () => {
}),
createMarketFragment({
id: 'market-2',
// @ts-ignore candles get joined outside this type
data: createMarketsDataFragment({
marketState: MarketState.STATE_ACTIVE,
}),
tradableInstrument: {
instrument: {
code: 'defg',
@ -265,6 +323,10 @@ describe('useMarketSelectorList', () => {
}),
createMarketFragment({
id: 'market-3',
// @ts-ignore candles get joined outside this type
data: createMarketsDataFragment({
marketState: MarketState.STATE_ACTIVE,
}),
tradableInstrument: {
instrument: {
code: 'ggg',
@ -333,11 +395,11 @@ describe('useMarketSelectorList', () => {
const markets = [
createMarketFragment({
id: 'market-0',
state: MarketState.STATE_ACTIVE,
// @ts-ignore data not on fragment
data: {
data: createMarketsDataFragment({
marketState: MarketState.STATE_ACTIVE,
markPrice: '1',
},
}),
// @ts-ignore candles not on fragment
candles: [
{
@ -349,9 +411,10 @@ describe('useMarketSelectorList', () => {
id: 'market-1',
state: MarketState.STATE_ACTIVE,
// @ts-ignore data not on fragment
data: {
data: createMarketsDataFragment({
marketState: MarketState.STATE_ACTIVE,
markPrice: '1',
},
}),
// @ts-ignore candles not on fragment
candles: [
{
@ -363,9 +426,10 @@ describe('useMarketSelectorList', () => {
id: 'market-2',
state: MarketState.STATE_ACTIVE,
// @ts-ignore data not on fragment
data: {
data: createMarketsDataFragment({
marketState: MarketState.STATE_ACTIVE,
markPrice: '1',
},
}),
// @ts-ignore candles not on fragment
candles: [
{
@ -377,9 +441,10 @@ describe('useMarketSelectorList', () => {
id: 'market-3',
state: MarketState.STATE_ACTIVE,
// @ts-ignore data not on fragment
data: {
data: createMarketsDataFragment({
marketState: MarketState.STATE_ACTIVE,
markPrice: '1',
},
}),
// @ts-ignore candles not on fragment
candles: [
{
@ -414,6 +479,10 @@ describe('useMarketSelectorList', () => {
const markets = [
createMarketFragment({
id: 'market-0',
// @ts-ignore data not on fragment
data: createMarketsDataFragment({
marketState: MarketState.STATE_ACTIVE,
}),
// @ts-ignore actual fragment doesn't contain candles and is joined later
candles: [
{
@ -426,6 +495,10 @@ describe('useMarketSelectorList', () => {
}),
createMarketFragment({
id: 'market-1',
// @ts-ignore data not on fragment
data: createMarketsDataFragment({
marketState: MarketState.STATE_ACTIVE,
}),
// @ts-ignore actual fragment doesn't contain candles and is joined later
candles: [
{
@ -438,6 +511,10 @@ describe('useMarketSelectorList', () => {
}),
createMarketFragment({
id: 'market-2',
// @ts-ignore data not on fragment
data: createMarketsDataFragment({
marketState: MarketState.STATE_ACTIVE,
}),
// @ts-ignore actual fragment doesn't contain candles and is joined later
candles: [
{
@ -482,18 +559,30 @@ describe('useMarketSelectorList', () => {
const markets = [
createMarketFragment({
id: 'market-0',
// @ts-ignore data not on fragment
data: createMarketsDataFragment({
marketState: MarketState.STATE_ACTIVE,
}),
marketTimestamps: {
open: subDays(new Date(), 3).toISOString(),
},
}),
createMarketFragment({
id: 'market-1',
// @ts-ignore data not on fragment
data: createMarketsDataFragment({
marketState: MarketState.STATE_ACTIVE,
}),
marketTimestamps: {
open: subDays(new Date(), 1).toISOString(),
},
}),
createMarketFragment({
id: 'market-2',
// @ts-ignore data not on fragment
data: createMarketsDataFragment({
marketState: MarketState.STATE_ACTIVE,
}),
marketTimestamps: {
open: subDays(new Date(), 2).toISOString(),
},

8
apps/trading/components/market-selector/use-market-selector-list.ts
View File

@ -22,8 +22,12 @@ export const useMarketSelectorList = ({
const markets = useMemo(() => {
if (!data?.length) return [];
const markets = data
// only active
.filter((m) => isMarketActive(m.state))
// show only active markets, using m.data.marketState as this will be
// data that will get refreshed when calling reload
.filter((m) => {
if (!m.data) return false;
return isMarketActive(m.data.marketState);
})
// only selected product type
.filter((m) => {
if (

19
libs/datagrid/src/lib/cells/market-name-cell.tsx
View File

@ -14,16 +14,17 @@ export const MarketProductPill = ({
}: {
productType?: ProductType;
}) => {
if (!productType) {
return null;
}
return (
productType && (
<Pill
size="xxs"
className="uppercase ml-0.5"
title={ProductTypeMapping[productType]}
>
{ProductTypeShortName[productType]}
</Pill>
)
<Pill
size="xxs"
className="uppercase ml-0.5"
title={ProductTypeMapping[productType]}
>
{ProductTypeShortName[productType]}
</Pill>
);
};

5
libs/markets/src/lib/__generated__/markets-data.ts generated
View File

@ -3,12 +3,12 @@ import * as Types from '@vegaprotocol/types';
import { gql } from '@apollo/client';
import * as Apollo from '@apollo/client';
const defaultOptions = {} as const;
export type MarketsDataFieldsFragment = { __typename?: 'MarketData', bestBidPrice: string, bestOfferPrice: string, markPrice: string, trigger: Types.AuctionTrigger, staticMidPrice: string, marketTradingMode: Types.MarketTradingMode, indicativeVolume: string, indicativePrice: string, bestStaticBidPrice: string, bestStaticOfferPrice: string, targetStake?: string | null, suppliedStake?: string | null, auctionStart?: string | null, auctionEnd?: string | null, market: { __typename?: 'Market', id: string } };
export type MarketsDataFieldsFragment = { __typename?: 'MarketData', bestBidPrice: string, bestOfferPrice: string, markPrice: string, trigger: Types.AuctionTrigger, staticMidPrice: string, marketState: Types.MarketState, marketTradingMode: Types.MarketTradingMode, indicativeVolume: string, indicativePrice: string, bestStaticBidPrice: string, bestStaticOfferPrice: string, targetStake?: string | null, suppliedStake?: string | null, auctionStart?: string | null, auctionEnd?: string | null, market: { __typename?: 'Market', id: string } };
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, targetStake?: string | null, suppliedStake?: string | null, auctionStart?: string | null, auctionEnd?: string | null, market: { __typename?: 'Market', id: string } } | null } }> } | null };
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, marketState: Types.MarketState, marketTradingMode: Types.MarketTradingMode, indicativeVolume: string, indicativePrice: string, bestStaticBidPrice: string, bestStaticOfferPrice: string, targetStake?: string | null, suppliedStake?: string | null, auctionStart?: string | null, auctionEnd?: string | null, market: { __typename?: 'Market', id: string } } | null } }> } | null };
export const MarketsDataFieldsFragmentDoc = gql`
fragment MarketsDataFields on MarketData {
@ -20,6 +20,7 @@ export const MarketsDataFieldsFragmentDoc = gql`
markPrice
trigger
staticMidPrice
marketState
marketTradingMode
indicativeVolume
indicativePrice

1
libs/markets/src/lib/markets-data.graphql
View File

@ -7,6 +7,7 @@ fragment MarketsDataFields on MarketData {
markPrice
trigger
staticMidPrice
marketState
marketTradingMode
indicativeVolume
indicativePrice

1
libs/markets/src/lib/markets-data.mock.ts
View File

@ -34,6 +34,7 @@ export const createMarketsDataFragment = (
__typename: 'Market',
},
marketTradingMode: Schema.MarketTradingMode.TRADING_MODE_CONTINUOUS,
marketState: Schema.MarketState.STATE_ACTIVE,
staticMidPrice: '0',
indicativePrice: '0',
bestStaticBidPrice: '0',