vega-frontend-monorepo/apps/trading/pages/markets/[marketId].page.tsx
m.ray a65c52d7d4
feat: trading page market summary & select markets modal opening from market title & fix: positions table realised PnL (#505)
* feat: [#456] select markets modal opening from market title

* feat: add a global zustand store for managing connect dialogs and landing dialog

* feat: add tests

* feat: [#456] make arrow configurable

* feat: [#456] make arrow configurable

* feat: [#456] trading tab active only on portfolio

* chore: update tranches

Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* fix: [#445] shallow routing from index (#484)

* fix: [#445] shallow routing from index

* fix: [#445] use link to redirect to market - an attempt to fix reload

* fix: [#445] remove stretched link from last link - it makes all the other links unusable

* fix: [#445] fix lint on select market list - remove stretched link

* fix: [#456] put everything in landing folder to avoid conflicts

* fix: remove condition for cypress for auto connecting

* feat: [#456] add global store and fix href routing

* feat: [#456] add global store and fix href routing

* feat: [#456] add one more test

* feat: [#154] pull market data summary

* feat: [#154] move header above the trade grid child sections

* feat: [#154] flex oerflow and styling updates for market summary

* feat: [#154] fix styling

* fix: [154] fix cyp tests and styling

* fix: [#154] fix markets navigation cypress step

* fix: [#154] fix for navigate to markets link

* fix: failing tests from market change

* fix: [#154] set nav items based on market id and show last viewed market on landing

* fix: [#412] invalid decimal place on realised PnL field

* fix: [#154] remove redundant curly braces

* fix: [#154] show hyphen on volume if market data is undefined

Co-authored-by: Matthew Russell <mattrussell36@gmail.com>
Co-authored-by: dexturr <dexturr@users.noreply.github.com>
Co-authored-by: Joe <joe@vega.xyz>
2022-06-06 17:19:56 +01:00

151 lines
3.5 KiB
TypeScript

import { gql } from '@apollo/client';
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 { LocalStorage, t } from '@vegaprotocol/react-helpers';
import { useGlobalStore } from '../../stores';
import { LandingDialog } from '@vegaprotocol/market-list';
import type { Market, MarketVariables } from './__generated__/Market';
import { Interval } from '@vegaprotocol/types';
// Top level page query
const MARKET_QUERY = gql`
query Market($marketId: ID!, $interval: Interval!, $since: String!) {
market(id: $marketId) {
id
name
tradingMode
state
decimalPlaces
data {
market {
id
}
markPrice
indicativeVolume
bestBidVolume
bestOfferVolume
bestStaticBidVolume
bestStaticOfferVolume
indicativeVolume
}
tradableInstrument {
instrument {
name
code
metadata {
tags
}
}
}
marketTimestamps {
open
close
}
candles(interval: $interval, since: $since) {
open
close
volume
}
}
}
`;
const MarketPage = ({ id }: { id?: string }) => {
const { query } = useRouter();
const { w } = useWindowSize();
const store = useGlobalStore();
// Default to first marketId query item if found
const marketId =
id || (Array.isArray(query.marketId) ? query.marketId[0] : query.marketId);
const yesterday = Math.round(new Date().getTime() / 1000) - 24 * 3600;
const yTimestamp = new Date(yesterday * 1000).toISOString();
if (!marketId) {
return (
<Splash>
<p>{t('Not found')}</p>
</Splash>
);
}
LocalStorage.setItem('marketId', marketId);
return (
<PageQueryContainer<Market, MarketVariables>
query={MARKET_QUERY}
options={{
variables: {
marketId,
interval: Interval.I1H,
since: yTimestamp,
},
fetchPolicy: 'network-only',
}}
render={({ market }) => {
if (!market) {
return <Splash>{t('Market not found')}</Splash>;
}
return (
<>
{w > 960 ? (
<TradeGrid market={market} />
) : (
<TradePanels market={market} />
)}
<LandingDialog
open={store.landingDialog}
setOpen={(isOpen) => store.setLandingDialog(isOpen)}
/>
</>
);
}}
/>
);
};
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;
};