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

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

Browse Source 
* 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
This commit is contained in:
Bartłomiej Głownia 2022-10-03 19:28:32 +02:00 committed by GitHub
parent 6681c01b43
commit 40527e9bc8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
56 changed files with 2377 additions and 2062 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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');

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

@ -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, 'MarketsCandlesQuery', generateMarketsCandles());
aliasQuery(req, 'MarketsCandles', 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, 'MarketsCandlesQuery', generateMarketsCandles());
aliasQuery(req, 'MarketsCandles', 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, 'MarketsCandlesQuery', generateMarketsCandles());
aliasQuery(req, 'MarketsCandles', generateMarketsCandles());
});
performance.mark('start-1k');
cy.visit('/markets');

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

@ -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, 'MarketsDataQuery', generateMarketsData());
aliasQuery(req, 'MarketsCandles', generateMarketsCandles());
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);
}

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

@ -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, 'MarketsDataQuery', generateMarketsData());
aliasQuery(req, 'MarketsCandles', generateMarketsCandles());
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);
}

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

@ -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,
})) as unknown as MarketsCandlesQuery_marketsConnection_edges_node_candlesConnection_edges[],
node: node as unknown as Candle,
})),
},
},
},
{
__typename: 'MarketEdge',
node: {
id: '6030e5b4e0ca3297a26081e5af4d453f97f96baab2d74bf56f84efcffc4c382f',
__typename: 'Market',
candlesConnection: {
@ -604,11 +611,14 @@ export const generateMarketsCandles = (): MarketsCandlesQuery => {
},
].map((node) => ({
__typename: 'CandleEdge',
node,
})) as unknown as MarketsCandlesQuery_marketsConnection_edges_node_candlesConnection_edges[],
node: node as unknown as Candle,
})),
},
},
},
{
__typename: 'MarketEdge',
node: {
id: 'de74a5572045b300e8ec50d136896912ec76e7d7ec135bc305dfd4854d9363a4',
__typename: 'Market',
candlesConnection: {
@ -688,11 +698,14 @@ export const generateMarketsCandles = (): MarketsCandlesQuery => {
},
].map((node) => ({
__typename: 'CandleEdge',
node,
})) as unknown as MarketsCandlesQuery_marketsConnection_edges_node_candlesConnection_edges[],
node: node as unknown as Candle,
})),
},
},
},
{
__typename: 'MarketEdge',
node: {
id: '87b0bbb3c171baa5d97dfc3852332829c91e5c5dc9f7c8fb584c6d8ac75aaaf2',
__typename: 'Market',
candlesConnection: {
@ -760,11 +773,14 @@ export const generateMarketsCandles = (): MarketsCandlesQuery => {
},
].map((node) => ({
__typename: 'CandleEdge',
node,
})) as unknown as MarketsCandlesQuery_marketsConnection_edges_node_candlesConnection_edges[],
node: node as unknown as Candle,
})),
},
},
},
{
__typename: 'MarketEdge',
node: {
id: '65663ebdc96161162769c4d5c5508137416748178d7cb28e2cb0d07a151a2bc6',
__typename: 'Market',
candlesConnection: {
@ -844,11 +860,14 @@ export const generateMarketsCandles = (): MarketsCandlesQuery => {
},
].map((node) => ({
__typename: 'CandleEdge',
node,
})) as unknown as MarketsCandlesQuery_marketsConnection_edges_node_candlesConnection_edges[],
node: node as unknown as Candle,
})),
},
},
},
{
__typename: 'MarketEdge',
node: {
id: '234afabd27e3bce1a879039c041f9f00f915d98459935ddafd0169d38dd13850',
__typename: 'Market',
candlesConnection: {
@ -928,11 +947,14 @@ export const generateMarketsCandles = (): MarketsCandlesQuery => {
},
].map((node) => ({
__typename: 'CandleEdge',
node,
})) as unknown as MarketsCandlesQuery_marketsConnection_edges_node_candlesConnection_edges[],
node: node as unknown as Candle,
})),
},
},
},
{
__typename: 'MarketEdge',
node: {
id: '9f2a3c1caa67bb0773ec18d908d32b55b129b9ec2d106a8e9a87f6aa5c0375a6',
__typename: 'Market',
candlesConnection: {
@ -1012,11 +1034,14 @@ export const generateMarketsCandles = (): MarketsCandlesQuery => {
},
].map((node) => ({
__typename: 'CandleEdge',
node,
})) as unknown as MarketsCandlesQuery_marketsConnection_edges_node_candlesConnection_edges[],
node: node as unknown as Candle,
})),
},
},
},
{
__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,
})) as unknown as MarketsCandlesQuery_marketsConnection_edges_node_candlesConnection_edges[],
},
},
];
return {
marketsConnection: {
__typename: 'MarketConnection',
edges: markets.map((node) => ({
__typename: 'MarketEdge',
node,
node: node as unknown as Candle,
})),
},
},
},
],
},
};
};
@ -1088,7 +1107,7 @@ export const generateLongListMarkets = (count: number) => {
};
};
export const generateMarkets = (override?): Markets => {
export const generateMarkets = (override?): MarketsQuery => {
const markets = [protoMarket];
const defaultResult = {

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

@ -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) => {

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

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

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

@ -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 { useMarketList } from '@vegaprotocol/market-list';
import type { Market } 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 localData = useMarketsFilterData(data as MarketsListData, params);
const variables = useMemo(() => {
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]"

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

@ -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) => {

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

@ -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}

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

@ -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 =
data?.markets?.filter((item) => {
return (
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) => ({
...market,
candles: (data?.marketsCandles || [])
.filter((c) => c.marketId === market.id)
.map((c) => c.candles),
}));
}, [
data?.marketsCandles,
data?.markets,
params.product,
params.asset,
params.state,
]);
}) || []
);
}, [data, params.product, params.asset, params.state]);
};
export default useMarketsFilterData;

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

@ -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>();
}

3
apps/liquidity-provision-dashboard/project.json
View File

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

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

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

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

@ -13,8 +13,8 @@ describe('markets table', { tags: '@regression' }, () => {
cy.visit('/');
cy.wait('@Market');
cy.wait('@Markets');
cy.wait('@MarketsDataQuery');
cy.wait('@MarketsCandlesQuery');
cy.wait('@MarketsData');
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('@MarketsCandlesQuery');
cy.wait('@MarketsData');
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('@MarketsCandlesQuery');
cy.wait('@MarketsData');
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('@MarketsCandlesQuery');
cy.wait('@MarketsData');
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');

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

@ -6,16 +6,17 @@ import {
} from '@vegaprotocol/types';
import type { PartialDeep } from 'type-fest';
import type {
Markets,
Markets_marketsConnection_edges_node,
MarketsQuery,
Market,
MarketsCandlesQuery,
MarketsCandlesQuery_marketsConnection_edges_node,
MarketsDataQuery,
MarketsDataQuery_marketsConnection_edges_node,
MarketData,
} from '@vegaprotocol/market-list';
export const generateMarkets = (override?: PartialDeep<Markets>): Markets => {
const markets: Markets_marketsConnection_edges_node[] = [
export const generateMarkets = (
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,
})),
},
],
},
};

4
apps/trading-e2e/src/support/trading.ts
View File

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

24
apps/trading/pages/index.page.tsx
View File

@ -1,5 +1,9 @@
import { useMarketList } from '@vegaprotocol/market-list';
import { addDecimalsFormatNumber, titlefy } from '@vegaprotocol/react-helpers';
import { marketsWithDataProvider } from '@vegaprotocol/market-list';
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).
const { data, error, loading } = useMarketList();
// should be the oldest market that is currently trading in us mode(i.e. not in auction).
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 marketName = data.markets[0]?.tradableInstrument.instrument.name;
const marketPrice = data.marketsData[0]?.markPrice
const marketId = data[0]?.id;
const marketName = data[0]?.tradableInstrument.instrument.name;
const marketPrice = data[0]?.data?.markPrice
? addDecimalsFormatNumber(
data.marketsData[0]?.markPrice,
data.markets[0].decimalPlaces
data[0]?.data?.markPrice,
data[0]?.decimalPlaces
)
: null;
const pageTitle = titlefy([marketName, marketPrice]);

59
libs/assets/src/lib/__generated___/Asset.ts Normal file
View File

@ -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>;

60
libs/assets/src/lib/__generated___/Assets.ts Normal file
View File

@ -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>;

118
libs/candles-chart/src/lib/__generated___/Candles.ts Normal file
View File

@ -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>;

55
libs/candles-chart/src/lib/__generated___/Chart.ts Normal file
View File

@ -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>;

79
libs/deal-ticket/src/components/deal-ticket/__generated___/DealTicket.ts Normal file
View File

@ -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>;

112
libs/deposits/src/lib/__generated___/Deposit.ts Normal file
View File

@ -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>;

80
libs/environment/src/utils/__generated___/Node.ts Normal file
View File

@ -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>;

161
libs/fills/src/lib/__generated___/Fills.ts Normal file
View File

@ -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>;

12
libs/market-depth/src/lib/market-depth-provider.ts
View File

@ -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;

87
libs/market-list/src/lib/__generated__/MarketCandlesQuery.ts generated
View File

@ -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;
}

46
libs/market-list/src/lib/__generated__/MarketCandlesSub.ts generated
View File

@ -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;
}

101
libs/market-list/src/lib/__generated__/MarketDataQuery.ts generated
View File

@ -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;
}

69
libs/market-list/src/lib/__generated__/MarketDataSub.ts generated
View File

@ -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;
}

162
libs/market-list/src/lib/__generated__/MarketFields.ts generated
View File

@ -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;
}

185
libs/market-list/src/lib/__generated__/Markets.ts generated
View File

@ -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;
}

90
libs/market-list/src/lib/__generated__/MarketsCandlesQuery.ts generated
View File

@ -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;
}

97
libs/market-list/src/lib/__generated__/MarketsDataQuery.ts generated
View File

@ -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;
}

111
libs/market-list/src/lib/__generated___/market-candles.ts Normal file
View File

@ -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>;

126
libs/market-list/src/lib/__generated___/market-data.ts Normal file
View File

@ -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>;

62
libs/market-list/src/lib/__generated___/markets-candles.ts Normal file
View File

@ -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>;

52
libs/market-list/src/lib/__generated___/markets-data.ts Normal file
View File

@ -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>;

89
libs/market-list/src/lib/__generated___/markets.ts Normal file
View File

@ -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>;

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

@ -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 candleHigh = candles && calcCandleHigh(candles);
const candleLow = market.candles && calcCandleLow(market.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 &&
marketData.trigger !== AuctionTrigger.AUCTION_TRIGGER_UNSPECIFIED
market.data?.trigger &&
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 candleHigh = candles && calcCandleHigh(candles);
const candleLow = market.candles && calcCandleLow(market.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 &&
marketData.trigger !== AuctionTrigger.AUCTION_TRIGGER_UNSPECIFIED
market.data?.trigger &&
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
)
: '-',

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

@ -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',
},
},
};
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> = {
data: {
__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',
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',
__typename: 'Candle',
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]}
marketsCandles={[
MARKET_CANDLES_A as MarketCandles,
MARKET_CANDLES_B as MarketCandles,
]}
onCellClick={onCellClick}
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]}
marketsCandles={[
MARKET_CANDLES_A as MarketCandles,
MARKET_CANDLES_B as MarketCandles,
]}
onCellClick={onCellClick}
onSelect={onSelect}
/>
);

71
libs/market-list/src/lib/components/select-market.tsx
View File

@ -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 {
Positions_party,
PositionsSubscription_positions,
Positions_party_positionsConnection_edges_node,
} from '@vegaprotocol/positions';
import type { 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;
marketsData: MarketData[] | undefined;
marketsCandles: MarketCandles[] | undefined;
markets: Market[] | null;
onSelect: (id: string) => void;
onCellClick: OnCellClickHandler;
}) => {
@ -61,17 +55,7 @@ export const SelectMarketLandingTable = ({
key={i}
detailed={false}
onSelect={onSelect}
columns={columns(
market,
marketsData?.find(
(marketData) => marketData.market.id === market.id
),
marketsCandles?.find(
(marketCandles) => marketCandles.marketId === market.id
)?.candles,
onSelect,
onCellClick
)}
columns={columns(market, 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) =>
columns(market, marketData, candles, onSelect, onCellClick),
tableColumns = (market) => columns(market, onSelect, onCellClick),
}: {
markets: Market[] | undefined;
marketsData: MarketData[] | undefined;
marketsCandles: MarketCandles[] | undefined;
markets?: Market[] | null;
positions?: Positions_party_positionsConnection_edges_node[];
title?: string;
onSelect: (id: string) => void;
onCellClick: OnCellClickHandler;
headers?: Column[];
tableColumns?: (
market: Market,
marketData: MarketData | undefined,
candles: Candle[] | undefined,
openVolume?: string
) => Column[];
tableColumns?: (market: Market, 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<
Positions_party,
PositionsSubscription_positions[]
>({
const { data: party, loading: positionsLoading } = useDataProvider({
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}
marketsData={data?.marketsData}
marketsCandles={data?.marketsCandles}
markets={data}
onSelect={onSelectMarket}
onCellClick={onCellClick}
/>
@ -319,9 +278,7 @@ const LandingDialogContainer = ({
return (
<SelectMarketLandingTable
markets={data?.markets}
marketsData={data?.marketsData}
marketsCandles={data?.marketsCandles}
markets={data}
onSelect={onSelect}
onCellClick={onCellClick}
/>

13
libs/market-list/src/lib/index.ts
View File

@ -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__/MarketCandlesSub';
export * from './__generated__/MarketDataQuery';
export * from './__generated__/MarketDataSub';
export * from './__generated__/MarketFields';
export * from './__generated__/Markets';
export * from './__generated__/MarketsCandlesQuery';
export * from './__generated__/MarketsDataQuery';
export * from './__generated___/market-candles';
export * from './__generated___/market-data';
export * from './__generated___/markets';
export * from './__generated___/markets-candles';
export * from './__generated___/markets-data';

80
libs/market-list/src/lib/market-candles-provider.ts
View File

@ -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,
} from './__generated__/MarketCandlesQuery';
import type {
MarketCandlesSub,
MarketCandlesSub_candles,
} from './__generated__/MarketCandlesSub';
MarketCandlesUpdateSubscription,
MarketCandlesFieldsFragment,
} from './__generated___/market-candles';
import {
MarketCandlesDocument,
MarketCandlesUpdateDocument,
} from './__generated___/market-candles';
export const MARKET_CANDLES_QUERY = gql`
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
}
}
}
}
}
}
}
`;
export type Candle = MarketCandlesFieldsFragment;
const MARKET_CANDLES_SUB = gql`
subscription MarketCandlesSub($marketId: ID!, $interval: Interval!) {
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 update = (data: Candle[], delta: Candle) => {
return data && delta ? [...data, delta] : 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 = (
subscriptionData: MarketCandlesSub
): MarketCandlesSub_candles => subscriptionData.candles;
const getDelta = (subscriptionData: MarketCandlesUpdateSubscription): Candle =>
subscriptionData.candles;
export const marketCandlesProvider = makeDataProvider<
MarketCandlesQuery,
Candle[],
MarketCandlesSub,
MarketCandlesSub_candles
MarketCandlesUpdateSubscription,
Candle
>({
query: MARKET_CANDLES_QUERY,
subscriptionQuery: MARKET_CANDLES_SUB,
query: MarketCandlesDocument,
subscriptionQuery: MarketCandlesUpdateDocument,
update,
getData,
getDelta,

29
libs/market-list/src/lib/market-candles.graphql Normal file
View File

@ -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
}
}

76
libs/market-list/src/lib/market-data-provider.ts
View File

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

47
libs/market-list/src/lib/market-data.graphql Normal file
View File

@ -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
}
}
}
}
}

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

@ -1,36 +1,10 @@
import { gql } from '@apollo/client';
import { makeDataProvider } from '@vegaprotocol/react-helpers';
import type {
MarketsCandlesQuery,
MarketsCandlesQuery_marketsConnection_edges_node as Market,
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
}
}
}
}
}
}
}
`;
import { MarketsCandlesDocument } from './__generated___/markets-candles';
import type { MarketsCandlesQuery } from './__generated___/markets-candles';
import type { Candle } from './market-candles-provider';
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,
});

24
libs/market-list/src/lib/markets-candles.graphql Normal file
View File

@ -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
}
}
}
}
}
}
}

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

@ -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,
});

27
libs/market-list/src/lib/markets-data.graphql Normal file
View File

@ -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
}
}
}
}
}

130
libs/market-list/src/lib/markets-provider.ts
View File

@ -1,132 +1,92 @@
import { gql } from '@apollo/client';
import {
makeDataProvider,
makeDerivedDataProvider,
useDataProvider,
} from '@vegaprotocol/react-helpers';
import type {
Markets,
Markets_marketsConnection_edges_node,
} from './__generated__/Markets';
MarketsQuery,
MarketFieldsFragment,
} 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
export type Market = Markets_marketsConnection_edges_node;
import type { Candle } from './market-candles-provider';
const MARKET_DATA_FRAGMENT = 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 type Market = MarketFieldsFragment;
export const MARKET_LIST_QUERY = gql`
${MARKET_DATA_FRAGMENT}
query Markets {
marketsConnection {
edges {
node {
...MarketFields
}
}
}
}
`;
const getData = (responseData: Markets): Market[] | null =>
const getData = (responseData: MarketsQuery): 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 {
markets: Market[];
marketsData: MarketData[];
marketsCandles: MarketCandles[];
}
export type MarketWithCandles = Market & { candles?: Candle[] };
export const marketListProvider = makeDerivedDataProvider<
MarketsListData,
const addCandles = <T extends Market>(
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) => {
return {
markets: parts[0] as Market[],
marketsData: parts[1] as MarketData[],
marketsCandles: parts[2] as MarketCandles[],
};
}
(parts) => addCandles(parts[0] as Market[], parts[1] 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) => ({
...market,
data: (parts[1] as MarketData[]).find(
(data) => data.market.id === market.id
),
}))
addData(parts[0] as Market[], parts[1] as MarketData[])
);
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,

47
libs/market-list/src/lib/markets.graphql Normal file
View File

@ -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
}
}
}
}

4
libs/market-list/src/lib/utils/market-utils.spec.tsx
View File

@ -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,

2
libs/market-list/src/lib/utils/market-utils.ts
View File

@ -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,