vega-frontend-monorepo/apps/trading/pages/markets/[marketId].page.tsx
Matthew Russell 313e6e1217
Feat/63 Deal ticket (#82)
* scaffold dealticket package, remove trading views from react-helpers

* add deal ticket component, add intent utils, expand dialog and form group styles

* add splash component, show market not found message if market doesnt exist

* tidy up error handling

* add handleError method for vega tx hook

* add better testname for provider test, flesh out tests a bit more for deal ticket

* Add unit tests for useVegaTransaction and useOrderSubmit hooks

* add wrapper component for order dialog styles

* add vega styled loader to ui toolkit and use in order dialog

* add title prop to order dialog

* split limit and market tickets into own files

* add button radio component

* revert dialog styles

* move splash component to ui-toolkit, add story

* convert intent to enum

* Make button always type=button unless type prop is passed

* inline filter logic for tif selector

* add date-fns, add datetime to helpers

* add order types to wallet package, make price undefined if order type is market

* use enums in deal ticket logic

* tidy up order state by moving submit and transaction hooks out of deal ticket

* add comment for dialog styles

* remove decimal from price input

* add types package, delete old generated types from trading project

* rename types package to graphql

* update generate command to point to correct locations

* fix use order submit test

* use intent shadow helper

* remove date-fns and format manually, update submit button error to use input-error

* remove stray console.log
2022-03-17 12:35:46 -07:00

117 lines
2.5 KiB
TypeScript

import { gql } from '@apollo/client';
import { Market, MarketVariables } from '@vegaprotocol/graphql';
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';
// Top level page query
const MARKET_QUERY = gql`
query Market($marketId: ID!) {
market(id: $marketId) {
id
name
decimalPlaces
state
tradingMode
tradableInstrument {
instrument {
product {
... on Future {
quoteName
settlementAsset {
id
symbol
name
}
}
}
}
}
trades {
id
price
size
createdAt
}
depth {
lastTrade {
price
}
}
}
}
`;
const MarketPage = () => {
const {
query: { marketId },
} = useRouter();
const { w } = useWindowSize();
return (
<PageQueryContainer<Market, MarketVariables>
query={MARKET_QUERY}
options={{
// Not sure exactly why marketId is string | string[] but just the first item in the array if
// it is one
variables: {
marketId: Array.isArray(marketId) ? marketId[0] : marketId,
},
skip: !marketId,
fetchPolicy: 'network-only',
}}
>
{({ market }) => {
if (!market) {
return <Splash>Market not found</Splash>;
}
return w > 960 ? (
<TradeGrid market={market} />
) : (
<TradePanels market={market} />
);
}}
</PageQueryContainer>
);
};
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;
};