vega-frontend-monorepo/apps/trading/client-pages/market/market.tsx
Matthew Russell c576037b58
chore(#1873): trading hash router (#1921)
* chore: make liquidity page client side only

* chore: switch to hash based router

* chore: add index files for each page

* chore: tidy up _app

* chore: convert to use useRoutes

* fix: active state with react-router NavLink

* feat: add routes enum

* chore: restrict link and router imports from next

* chore: update testing navigation to use hash routes

* fix: typoe in eslint rule message

* chore: remove unnecessary getInitialProps function definition

* chore: wrap tests with memory router

* chore: delete unused index.page file

* chore: update suspense fallback state

* chore: add comment for link component span usage, update link to use toolkit styles

* chore: fix lint issues

* chore: delete client deposit page

* chore: revert title in _app so title gets set correctly without rerender

* revert: removal of deposit page so deposit e2e tests still pass

* chore: move client router to index page so valid status codes are still sent

* fix: wrong route path for markets page, cypress tests
2022-11-08 08:23:38 +01:00

194 lines
4.8 KiB
TypeScript

import React, { useCallback, useEffect, useMemo, useState } from 'react';
import debounce from 'lodash/debounce';
import { useAssetDetailsDialogStore } from '@vegaprotocol/assets';
import {
addDecimalsFormatNumber,
t,
titlefy,
useDataProvider,
} from '@vegaprotocol/react-helpers';
import { AsyncRenderer, Splash } from '@vegaprotocol/ui-toolkit';
import type {
SingleMarketFieldsFragment,
MarketData,
Candle,
MarketDataUpdateFieldsFragment,
} from '@vegaprotocol/market-list';
import { marketProvider, marketDataProvider } from '@vegaprotocol/market-list';
import { useGlobalStore, usePageTitleStore } from '../../stores';
import { TradeGrid, TradePanels } from './trade-grid';
import { ColumnKind, SelectMarketDialog } from '../../components/select-market';
import { useNavigate, useParams } from 'react-router-dom';
const calculatePrice = (markPrice?: string, decimalPlaces?: number) => {
return markPrice && decimalPlaces
? addDecimalsFormatNumber(markPrice, decimalPlaces)
: '-';
};
export interface SingleMarketData extends SingleMarketFieldsFragment {
candles: Candle[];
data: MarketData;
}
export const Market = ({
id,
marketId: mid,
}: {
id?: string;
marketId?: string;
}) => {
const params = useParams();
const navigate = useNavigate();
const marketId = params.marketId;
const { w } = useWindowSize();
const { landingDialog, riskNoticeDialog, update } = useGlobalStore(
(store) => ({
landingDialog: store.landingDialog,
riskNoticeDialog: store.riskNoticeDialog,
update: store.update,
})
);
const { pageTitle, updateTitle } = usePageTitleStore((store) => ({
pageTitle: store.pageTitle,
updateTitle: store.updateTitle,
}));
const { open: openAssetDetailsDialog } = useAssetDetailsDialogStore();
const onSelect = useCallback(
(id: string) => {
if (id && id !== marketId) {
update({ marketId: id });
navigate(`/markets/${id}`);
}
},
[marketId, update, navigate]
);
const variables = useMemo(
() => ({
marketId: marketId || '',
}),
[marketId]
);
const { data, error, loading } = useDataProvider<
SingleMarketFieldsFragment,
never
>({
dataProvider: marketProvider,
variables,
skip: !marketId,
});
const marketName = data?.tradableInstrument.instrument.name;
const updateProvider = useCallback(
({ data: marketData }: { data: MarketData }) => {
const marketPrice = calculatePrice(
marketData.markPrice,
data?.decimalPlaces
);
if (marketName) {
const newPageTitle = titlefy([marketName, marketPrice]);
if (pageTitle !== newPageTitle) {
updateTitle(newPageTitle);
}
}
return true;
},
[updateTitle, pageTitle, marketName, data?.decimalPlaces]
);
useDataProvider<MarketData, MarketDataUpdateFieldsFragment>({
dataProvider: marketDataProvider,
update: updateProvider,
variables,
skip: !marketId || !data,
updateOnInit: true,
});
const tradeView = useMemo(() => {
if (!data) {
return null;
}
if (w > 960) {
return <TradeGrid market={data} onSelect={onSelect} />;
}
return <TradePanels market={data} onSelect={onSelect} />;
}, [w, data, onSelect]);
if (!marketId) {
return (
<Splash>
<p>{t('Not found')}</p>
</Splash>
);
}
return (
<AsyncRenderer<SingleMarketFieldsFragment>
loading={loading}
error={error}
data={data || undefined}
render={(data) => {
if (!data) {
return <Splash>{t('Market not found')}</Splash>;
}
return (
<>
{tradeView}
<SelectMarketDialog
dialogOpen={landingDialog && !riskNoticeDialog}
setDialogOpen={(isOpen: boolean) =>
update({ landingDialog: isOpen })
}
onSelect={onSelect}
onCellClick={(e, kind, value) => {
if (value && kind === ColumnKind.Asset) {
openAssetDetailsDialog(value, e.target as HTMLElement);
}
}}
/>
</>
);
}}
/>
);
};
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;
};