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

Feat/81 market table filters (#1203)

Browse Source 
* feat(#81): amend market table filters

* chore: fix home not default found test
This commit is contained in:
Bartłomiej Głownia 2022-09-01 18:03:42 +02:00 committed by GitHub
parent 429b57ec52
commit 75044fa520
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 69 additions and 272 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
apps/trading-e2e/src/integration/home.cy.ts
View File

@ -1,7 +1,5 @@
import { aliasQuery } from '@vegaprotocol/cypress';
import type { MarketList } from '@vegaprotocol/market-list';
import { MarketState } from '@vegaprotocol/types';
import { generateMarketList } from '../support/mocks/generate-market-list';
import { generateMarkets } from '../support/mocks/generate-markets';
import { mockTradingPage } from '../support/trading';
@ -9,17 +7,10 @@ describe('home', () => {
const selectMarketOverlay = 'select-market-list';
describe('default market found', () => {
let marketsLanding: MarketList;
let marketList: MarketList;
beforeEach(() => {
marketList = generateMarketList();
marketsLanding = marketList;
// Mock markets query that is triggered by home page to find default market
cy.mockGQL((req) => {
aliasQuery(req, 'MarketList', marketsLanding);
aliasQuery(req, 'MarketList', marketList);
aliasQuery(req, 'MarketList', generateMarkets());
// Mock all market page queries
mockTradingPage(req, MarketState.STATE_ACTIVE);
@ -69,34 +60,14 @@ describe('home', () => {
it('redirects to a the market list page if no sensible default is found', () => {
// Mock markets query that is triggered by home page to find default market
cy.mockGQL((req) => {
aliasQuery(
req,
'MarketsLanding',
generateMarketList({
markets: [
{
marketTimestamps: {
__typename: 'MarketTimestamps',
open: '',
},
},
{
marketTimestamps: {
__typename: 'MarketTimestamps',
open: '',
},
},
],
})
);
aliasQuery(req, 'Markets', generateMarkets());
aliasQuery(req, 'MarketList', { markets: [] });
// Mock all market page queries
mockTradingPage(req, MarketState.STATE_ACTIVE);
});
cy.visit('/');
cy.url().should('include', '/markets');
cy.url().should('eq', Cypress.config().baseUrl + '/markets');
});
});
});

4
apps/trading-e2e/src/integration/markets.cy.ts
View File

@ -1,13 +1,13 @@
import { aliasQuery } from '@vegaprotocol/cypress';
import { MarketState } from '@vegaprotocol/types';
import { generateMarketList } from '../support/mocks/generate-market-list';
import { generateMarkets } from '../support/mocks/generate-markets';
import { mockTradingPage } from '../support/trading';
describe('markets table', () => {
beforeEach(() => {
cy.mockGQL((req) => {
mockTradingPage(req, MarketState.STATE_ACTIVE);
aliasQuery(req, 'MarketList', generateMarketList());
aliasQuery(req, 'MarketList', generateMarkets());
});
});

152
apps/trading-e2e/src/support/mocks/generate-market-list.ts
View File

@ -1,152 +0,0 @@
import merge from 'lodash/merge';
import type { PartialDeep } from 'type-fest';
import type { MarketList, MarketList_markets } from '@vegaprotocol/market-list';
import {
AuctionTrigger,
MarketState,
MarketTradingMode,
} from '@vegaprotocol/types';
export const generateMarketList = (
override?: PartialDeep<MarketList>
): MarketList => {
const markets: MarketList_markets[] = [
{
id: 'market-0',
name: 'BTCUSD Monthly (30 Jun 2022)',
decimalPlaces: 5,
positionDecimalPlaces: 0,
state: MarketState.STATE_ACTIVE,
tradingMode: MarketTradingMode.TRADING_MODE_CONTINUOUS,
fees: {
factors: {
makerFee: '0.0002',
infrastructureFee: '0.0005',
liquidityFee: '0.001',
__typename: 'FeeFactors',
},
__typename: 'Fees',
},
data: {
market: {
id: '10cd0a793ad2887b340940337fa6d97a212e0e517fe8e9eab2b5ef3a38633f35',
state: MarketState.STATE_ACTIVE,
tradingMode: MarketTradingMode.TRADING_MODE_CONTINUOUS,
__typename: 'Market',
},
bestBidPrice: '2411432389',
bestOfferPrice: '2346732714',
markPrice: '4612690058',
trigger: AuctionTrigger.AUCTION_TRIGGER_PRICE,
indicativeVolume: '1216',
__typename: 'MarketData',
},
tradableInstrument: {
instrument: {
id: 'BTCUSD.MF21',
name: 'BTC/USD Monthly',
code: 'BTCUSD.MF21',
metadata: {
__typename: 'InstrumentMetadata',
tags: ['tag1'],
},
product: {
settlementAsset: {
symbol: 'tBTC',
__typename: 'Asset',
},
__typename: 'Future',
},
__typename: 'Instrument',
},
__typename: 'TradableInstrument',
},
marketTimestamps: {
__typename: 'MarketTimestamps',
open: '2022-08-12T09:57:02.420419276Z',
close: '',
},
candles: [
{
__typename: 'Candle',
open: '100',
close: '100',
high: '110',
low: '90',
},
],
__typename: 'Market',
},
{
id: 'market-1',
name: 'SOL/USD',
decimalPlaces: 2,
positionDecimalPlaces: 0,
state: MarketState.STATE_SUSPENDED,
tradingMode: MarketTradingMode.TRADING_MODE_MONITORING_AUCTION,
fees: {
factors: {
makerFee: '0.0002',
infrastructureFee: '0.0005',
liquidityFee: '0.001',
__typename: 'FeeFactors',
},
__typename: 'Fees',
},
data: {
market: {
id: '34d95e10faa00c21d19d382d6d7e6fc9722a96985369f0caec041b0f44b775ed',
state: MarketState.STATE_SUSPENDED,
tradingMode: MarketTradingMode.TRADING_MODE_MONITORING_AUCTION,
__typename: 'Market',
},
bestBidPrice: '17065127',
bestOfferPrice: '17017654',
markPrice: '8441',
trigger: AuctionTrigger.AUCTION_TRIGGER_LIQUIDITY,
indicativeVolume: '249',
__typename: 'MarketData',
},
tradableInstrument: {
instrument: {
id: 'SOLUSD',
name: 'SOL/USD',
code: 'SOLUSD',
metadata: {
__typename: 'InstrumentMetadata',
tags: ['tag1'],
},
product: {
settlementAsset: {
symbol: 'SOLUSD',
__typename: 'Asset',
},
__typename: 'Future',
},
__typename: 'Instrument',
},
__typename: 'TradableInstrument',
},
marketTimestamps: {
__typename: 'MarketTimestamps',
open: '',
close: '',
},
candles: [
{
__typename: 'Candle',
open: '100',
close: '100',
high: '110',
low: '90',
},
],
__typename: 'Market',
},
];
const defaultResult = {
markets,
};
return merge(defaultResult, override);
};

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

@ -23,7 +23,15 @@ export const generateMarkets = (
close: '',
open: '',
},
candles: [],
candles: [
{
__typename: 'Candle',
open: '100',
close: '100',
high: '110',
low: '90',
},
],
fees: {
__typename: 'Fees',
factors: {
@ -81,7 +89,15 @@ export const generateMarkets = (
close: '',
open: '',
},
candles: [],
candles: [
{
__typename: 'Candle',
open: '100',
close: '100',
high: '110',
low: '90',
},
],
fees: {
__typename: 'Fees',
factors: {

45
apps/trading/pages/__generated__/MarketsLanding.ts generated
View File

@ -1,45 +0,0 @@
/* tslint:disable */
/* eslint-disable */
// @generated
// This file was automatically generated and should not be edited.
import { MarketTradingMode, MarketState } from "@vegaprotocol/types";
// ====================================================
// GraphQL query operation: MarketsLanding
// ====================================================
export interface MarketsLanding_markets_marketTimestamps {
__typename: "MarketTimestamps";
/**
* Time when the market is open and ready to accept trades
*/
open: string | null;
}
export interface MarketsLanding_markets {
__typename: "Market";
/**
* Market ID
*/
id: string;
/**
* Current mode of execution of the market
*/
tradingMode: MarketTradingMode;
/**
* Current state of the market
*/
state: MarketState;
/**
* timestamps for state changes in the market
*/
marketTimestamps: MarketsLanding_markets_marketTimestamps;
}
export interface MarketsLanding {
/**
* One or more instruments that are trading on the VEGA network
*/
markets: MarketsLanding_markets[] | null;
}

85
libs/market-list/src/lib/components/markets-container/market-list-table.tsx
View File

@ -7,6 +7,7 @@ import {
PriceFlashCell,
addDecimalsFormatNumber,
t,
toBigNum,
} from '@vegaprotocol/react-helpers';
import { AgGridDynamic as AgGrid } from '@vegaprotocol/ui-toolkit';
import { AgGridColumn } from 'ag-grid-react';
@ -21,10 +22,7 @@ import {
MarketTradingModeMapping,
AuctionTriggerMapping,
} from '@vegaprotocol/types';
import type {
MarketList_markets,
MarketList_markets_data,
} from '../../__generated__';
import type { MarketList_markets } from '../../__generated__';
import { useAssetDetailsDialogStore } from '@vegaprotocol/assets';
type Props = AgGridReactProps | AgReactUiProps;
@ -52,6 +50,7 @@ export const MarketListTable = forwardRef<AgGridReact, Props>((props, ref) => {
resizable: true,
sortable: true,
filter: true,
filterParams: { buttons: ['reset'] },
}}
suppressCellFocus={true}
components={{ PriceFlashCell }}
@ -84,13 +83,9 @@ export const MarketListTable = forwardRef<AgGridReact, Props>((props, ref) => {
headerName={t('Trading mode')}
field="data"
minWidth={170}
valueFormatter={({
value,
}: MarketListTableValueFormatterParams & {
value?: MarketList_markets_data;
}) => {
if (!value) return value;
const { market, trigger } = value;
valueGetter={({ data }: { data?: MarketList_markets }) => {
if (!data?.data) return undefined;
const { market, trigger } = data.data;
return market &&
market.tradingMode ===
MarketTradingMode.TRADING_MODE_MONITORING_AUCTION &&
@ -106,47 +101,59 @@ export const MarketListTable = forwardRef<AgGridReact, Props>((props, ref) => {
field="data.bestBidPrice"
type="rightAligned"
cellRenderer="PriceFlashCell"
valueFormatter={({
value,
data,
}: MarketListTableValueFormatterParams & {
value?: MarketList_markets_data['bestBidPrice'];
}) =>
value === undefined
? value
: addDecimalsFormatNumber(value, data.decimalPlaces)
filter="agNumberColumnFilter"
valueGetter={({ data }: { data?: MarketList_markets }) => {
return data?.data?.bestBidPrice === undefined
? undefined
: toBigNum(data?.data?.bestBidPrice, data.decimalPlaces).toNumber();
}}
valueFormatter={({ data }: MarketListTableValueFormatterParams) =>
data?.data?.bestBidPrice === undefined
? undefined
: addDecimalsFormatNumber(
data.data.bestBidPrice,
data.decimalPlaces
)
}
/>
<AgGridColumn
headerName={t('Best offer')}
field="data.bestOfferPrice"
type="rightAligned"
valueFormatter={({
value,
data,
}: MarketListTableValueFormatterParams & {
value?: MarketList_markets_data['bestOfferPrice'];
}) =>
value === undefined
? value
: addDecimalsFormatNumber(value, data.decimalPlaces)
}
cellRenderer="PriceFlashCell"
filter="agNumberColumnFilter"
valueGetter={({ data }: { data?: MarketList_markets }) => {
return data?.data?.bestOfferPrice === undefined
? undefined
: toBigNum(
data?.data?.bestOfferPrice,
data.decimalPlaces
).toNumber();
}}
valueFormatter={({ data }: MarketListTableValueFormatterParams) =>
data?.data?.bestOfferPrice === undefined
? undefined
: addDecimalsFormatNumber(
data.data.bestOfferPrice,
data.decimalPlaces
)
}
/>
<AgGridColumn
headerName={t('Mark price')}
field="data.markPrice"
type="rightAligned"
cellRenderer="PriceFlashCell"
valueFormatter={({
value,
data,
}: MarketListTableValueFormatterParams & {
value?: MarketList_markets_data['markPrice'];
}) =>
value === undefined
? value
: addDecimalsFormatNumber(value, data.decimalPlaces)
filter="agNumberColumnFilter"
valueGetter={({ data }: { data?: MarketList_markets }) => {
return data?.data?.markPrice === undefined
? undefined
: toBigNum(data?.data?.markPrice, data.decimalPlaces).toNumber();
}}
valueFormatter={({ data }: MarketListTableValueFormatterParams) =>
data?.data?.bestOfferPrice === undefined
? undefined
: addDecimalsFormatNumber(data.data.markPrice, data.decimalPlaces)
}
/>
<AgGridColumn headerName={t('Description')} field="name" />