vega-frontend-monorepo/apps/trading/client-pages/market/market.tsx

137 lines
3.9 KiB
TypeScript
Raw Normal View History

import React, { useEffect, useMemo } from 'react';
import { addDecimalsFormatNumber, titlefy } from '@vegaprotocol/utils';
import { t } from '@vegaprotocol/i18n';
import { useScreenDimensions } from '@vegaprotocol/react-helpers';
import { useThrottledDataProvider } from '@vegaprotocol/data-provider';
import { AsyncRenderer, ExternalLink, Splash } from '@vegaprotocol/ui-toolkit';
import { marketDataProvider, useMarket } from '@vegaprotocol/markets';
market page: break down components to smaller chunks for better performance (#1726) * chore: break down components to smaller chunks for better performance * chore: break down components to smaller chunks for better performance * chore: break down components to smaller chunks for better performance - fix failing tests * chore: break down components to smaller chunks for better performance - adjust token app cases * chore: break down components to smaller chunks for better performance - small fixes * chore: break down components to smaller chunks for better performance - small fixes * chore: break down components to smaller chunks for better performance - small fixes * chore: break down components to smaller chunks for better performance - small fixes * chore: break down components to smaller chunks for better performance - add nwe store for pageTitle * chore: break down components to smaller chunks for better performance - sm fix * chore: break down components to smaller chunks for better performance - sm fix * chore: break down components to smaller chunks for better performance - sm imprv * chore: break down components to smaller chunks for better performance - change prop names * chore: break down components to smaller chunks for better performance - fix some test * chore: break down components to smaller chunks for better performance - change cypress url * chore: break down components to smaller chunks for better perf - set back redundant changes * chore: resolve conflicts Co-authored-by: maciek <maciek@vegaprotocol.io>
2022-10-14 15:42:53 +00:00
import { useGlobalStore, usePageTitleStore } from '../../stores';
import { TradeGrid } from './trade-grid';
import { TradePanels } from './trade-panels';
import { useNavigate, useParams } from 'react-router-dom';
import { Links, Routes } from '../../pages/client-router';
import { ViewType, useSidebar } from '../../components/sidebar';
2022-09-05 14:25:33 +00:00
const calculatePrice = (markPrice?: string, decimalPlaces?: number) => {
return markPrice && decimalPlaces
? addDecimalsFormatNumber(markPrice, decimalPlaces)
: '-';
};
const TitleUpdater = ({
marketId,
marketName,
decimalPlaces,
}: {
marketId?: string;
marketName?: string;
decimalPlaces?: number;
}) => {
const pageTitle = usePageTitleStore((store) => store.pageTitle);
const updateTitle = usePageTitleStore((store) => store.updateTitle);
const { data: marketData } = useThrottledDataProvider(
{
dataProvider: marketDataProvider,
variables: { marketId: marketId || '' },
skip: !marketId,
},
1000
);
useEffect(() => {
const marketPrice = calculatePrice(marketData?.markPrice, decimalPlaces);
if (marketName) {
const newPageTitle = titlefy([marketName, marketPrice]);
if (pageTitle !== newPageTitle) {
updateTitle(newPageTitle);
}
}
}, [
decimalPlaces,
marketName,
marketData?.markPrice,
pageTitle,
updateTitle,
]);
return null;
};
export const MarketPage = () => {
const { marketId } = useParams();
const navigate = useNavigate();
const { init, view, setView } = useSidebar();
const { screenSize } = useScreenDimensions();
const largeScreen = ['lg', 'xl', 'xxl', 'xxxl'].includes(screenSize);
const update = useGlobalStore((store) => store.update);
const lastMarketId = useGlobalStore((store) => store.marketId);
market page: break down components to smaller chunks for better performance (#1726) * chore: break down components to smaller chunks for better performance * chore: break down components to smaller chunks for better performance * chore: break down components to smaller chunks for better performance - fix failing tests * chore: break down components to smaller chunks for better performance - adjust token app cases * chore: break down components to smaller chunks for better performance - small fixes * chore: break down components to smaller chunks for better performance - small fixes * chore: break down components to smaller chunks for better performance - small fixes * chore: break down components to smaller chunks for better performance - small fixes * chore: break down components to smaller chunks for better performance - add nwe store for pageTitle * chore: break down components to smaller chunks for better performance - sm fix * chore: break down components to smaller chunks for better performance - sm fix * chore: break down components to smaller chunks for better performance - sm imprv * chore: break down components to smaller chunks for better performance - change prop names * chore: break down components to smaller chunks for better performance - fix some test * chore: break down components to smaller chunks for better performance - change cypress url * chore: break down components to smaller chunks for better perf - set back redundant changes * chore: resolve conflicts Co-authored-by: maciek <maciek@vegaprotocol.io>
2022-10-14 15:42:53 +00:00
const { data, error, loading } = useMarket(marketId);
useEffect(() => {
if (data?.id && data.id !== lastMarketId) {
update({ marketId: data.id });
// make sidebar open on market id change
setView({ type: ViewType.Order });
}
// make sidebar open on deal ticket by default
if (view === null) {
setView({ type: ViewType.Order });
}
}, [update, lastMarketId, data?.id, setView, init, view]);
market page: break down components to smaller chunks for better performance (#1726) * chore: break down components to smaller chunks for better performance * chore: break down components to smaller chunks for better performance * chore: break down components to smaller chunks for better performance - fix failing tests * chore: break down components to smaller chunks for better performance - adjust token app cases * chore: break down components to smaller chunks for better performance - small fixes * chore: break down components to smaller chunks for better performance - small fixes * chore: break down components to smaller chunks for better performance - small fixes * chore: break down components to smaller chunks for better performance - small fixes * chore: break down components to smaller chunks for better performance - add nwe store for pageTitle * chore: break down components to smaller chunks for better performance - sm fix * chore: break down components to smaller chunks for better performance - sm fix * chore: break down components to smaller chunks for better performance - sm imprv * chore: break down components to smaller chunks for better performance - change prop names * chore: break down components to smaller chunks for better performance - fix some test * chore: break down components to smaller chunks for better performance - change cypress url * chore: break down components to smaller chunks for better perf - set back redundant changes * chore: resolve conflicts Co-authored-by: maciek <maciek@vegaprotocol.io>
2022-10-14 15:42:53 +00:00
const tradeView = useMemo(() => {
if (largeScreen) {
return (
<TradeGrid
market={data}
pinnedAsset={
data?.tradableInstrument.instrument.product.settlementAsset
}
/>
);
market page: break down components to smaller chunks for better performance (#1726) * chore: break down components to smaller chunks for better performance * chore: break down components to smaller chunks for better performance * chore: break down components to smaller chunks for better performance - fix failing tests * chore: break down components to smaller chunks for better performance - adjust token app cases * chore: break down components to smaller chunks for better performance - small fixes * chore: break down components to smaller chunks for better performance - small fixes * chore: break down components to smaller chunks for better performance - small fixes * chore: break down components to smaller chunks for better performance - small fixes * chore: break down components to smaller chunks for better performance - add nwe store for pageTitle * chore: break down components to smaller chunks for better performance - sm fix * chore: break down components to smaller chunks for better performance - sm fix * chore: break down components to smaller chunks for better performance - sm imprv * chore: break down components to smaller chunks for better performance - change prop names * chore: break down components to smaller chunks for better performance - fix some test * chore: break down components to smaller chunks for better performance - change cypress url * chore: break down components to smaller chunks for better perf - set back redundant changes * chore: resolve conflicts Co-authored-by: maciek <maciek@vegaprotocol.io>
2022-10-14 15:42:53 +00:00
}
return (
<TradePanels
market={data}
pinnedAsset={
data?.tradableInstrument.instrument.product.settlementAsset
}
/>
);
}, [largeScreen, data]);
if (!data && marketId) {
return (
<Splash>
<span className="flex flex-col items-center gap-2">
<p className="text-sm justify-center">
{t('This market URL is not available any more.')}
</p>
<p className="text-sm justify-center">
{t(`Please choose another market from the`)}{' '}
<ExternalLink onClick={() => navigate(Links[Routes.MARKETS]())}>
market list
</ExternalLink>
</p>
</span>
</Splash>
);
}
return (
<AsyncRenderer
loading={loading}
error={error}
data={data || undefined}
noDataCondition={(data) => false}
>
<TitleUpdater
marketId={data?.id}
marketName={data?.tradableInstrument.instrument.name}
decimalPlaces={data?.decimalPlaces}
/>
{tradeView}
</AsyncRenderer>
);
};