d0ec016adc
* [#151] Add orderbook * [#151] Add orderbook components * [#151] Add market-depth data provider * [#151] Add orderbook manager * [#151] handle market depth updates in orderbook manager * [#151] Fix PageQueryContainer usage of AsyncRenderer * [#151] Move data handling logig out from orderbook manager * [#151] Use mocked data, fix data issues * [#151] Add compact order book data unit tests * [#151] Add updateData unit tests * [#151] Add updateCompactedData unit tests * [#151] update cummulative vol on update, move data ref handling from effect to manager * [#151] Update cummulative vol on update, fixes * [#151] Optimieze orderbook ag-grid render * [#151] Replace ag-grid with orderbook component * [#151] Use react memo to optimize orderbook rendering * [#151] Fix cummulative vol computation on compacted data update * [#151] Add resolution controls * [#151] Fix cumulative spelling mistake * [#151] Use number instead of string for cumulative values * [#151] Expose restart callback in useDataProvider hook * [#151] Update empty cumulative values * [#151] Add horizontal line under header in orderbook * [#151] reuse orderbook data in market-depth chart * [#151] restart market depth provider on sequenceNumber gap * [#151] use throttle in orderbook and depth-chart * [#151] Add comments, refactor data functions * [#151] Add comments, refactor data functions * [#151] move orderbook and depth-chart libs to market-depth
101 lines
2.2 KiB
TypeScript
101 lines
2.2 KiB
TypeScript
import { gql } from '@apollo/client';
|
|
import type { Market, MarketVariables } from './__generated__/Market';
|
|
import { Splash } from '@vegaprotocol/ui-toolkit';
|
|
import { useRouter } from 'next/router';
|
|
import React, { useEffect, useState } from 'react';
|
|
import debounce from 'lodash/debounce';
|
|
import { PageQueryContainer } from '../../components/page-query-container';
|
|
import { TradeGrid, TradePanels } from './trade-grid';
|
|
import { t } from '@vegaprotocol/react-helpers';
|
|
|
|
// Top level page query
|
|
const MARKET_QUERY = gql`
|
|
query Market($marketId: ID!) {
|
|
market(id: $marketId) {
|
|
id
|
|
name
|
|
}
|
|
}
|
|
`;
|
|
|
|
const MarketPage = () => {
|
|
const { query } = useRouter();
|
|
const { w } = useWindowSize();
|
|
|
|
// Default to first marketId query item if found
|
|
const marketId = Array.isArray(query.marketId)
|
|
? query.marketId[0]
|
|
: query.marketId;
|
|
|
|
if (!marketId) {
|
|
return (
|
|
<Splash>
|
|
<p>{t('Not found')}</p>
|
|
</Splash>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<PageQueryContainer<Market, MarketVariables>
|
|
query={MARKET_QUERY}
|
|
options={{
|
|
variables: {
|
|
marketId,
|
|
},
|
|
fetchPolicy: 'network-only',
|
|
}}
|
|
render={({ market }) => {
|
|
if (!market) {
|
|
return <Splash>{t('Market not found')}</Splash>;
|
|
}
|
|
|
|
return w > 960 ? (
|
|
<TradeGrid market={market} />
|
|
) : (
|
|
<TradePanels market={market} />
|
|
);
|
|
}}
|
|
/>
|
|
);
|
|
};
|
|
|
|
MarketPage.getInitialProps = () => ({
|
|
page: 'market',
|
|
});
|
|
|
|
export default MarketPage;
|
|
|
|
const useWindowSize = () => {
|
|
const [windowSize, setWindowSize] = useState(() => {
|
|
if (typeof window !== 'undefined') {
|
|
return {
|
|
w: window.innerWidth,
|
|
h: window.innerHeight,
|
|
};
|
|
}
|
|
|
|
// Something sensible for server rendered page
|
|
return {
|
|
w: 1200,
|
|
h: 900,
|
|
};
|
|
});
|
|
|
|
useEffect(() => {
|
|
const handleResize = debounce(({ target }) => {
|
|
setWindowSize({
|
|
w: target.innerWidth,
|
|
h: target.innerHeight,
|
|
});
|
|
}, 300);
|
|
|
|
window.addEventListener('resize', handleResize);
|
|
|
|
return () => {
|
|
window.removeEventListener('resize', handleResize);
|
|
};
|
|
}, []);
|
|
|
|
return windowSize;
|
|
};
|