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

184 lines
4.6 KiB
TypeScript
Raw Normal View History

import React, { useCallback, useEffect, useMemo, useState } from 'react';
import debounce from 'lodash/debounce';
import { addDecimalsFormatNumber, titlefy } from '@vegaprotocol/utils';
import { t } from '@vegaprotocol/i18n';
import {
useDataProvider,
useThrottledDataProvider,
} from '@vegaprotocol/react-helpers';
import { AsyncRenderer, ExternalLink, Splash } from '@vegaprotocol/ui-toolkit';
import type {
MarketData,
MarketDataUpdateFieldsFragment,
} from '@vegaprotocol/market-list';
import { marketProvider, marketDataProvider } from '@vegaprotocol/market-list';
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';
feat: market list mega dropdown (rich popover) (#889) * feat: use MarketList query only * fix: remove Market.ts from index * feat: 30 refactor dialog, market list, change query * feat: #30 add indicativeVolume, total fees, tooltip, large dialog, tooltip accepts html description * fix: #30 total fees display in tooltip * fix: #30 toggle title on dialog open * fix: #30 fix order, price, high, low utils * fix: #30 fix test for market utils * feat: #30 add popover with markets to select * feat: #30 storybook popover * feat: #30 remove border on trigger and add some other classes * fix: #30 fix format check with format:write * feat: #30 add tooltip on taker fee * feat: #30 add tooltip on taker fee * fix: #30 format on select market list * fix: #30 remove unknown cast in test mock data * fix: #30 show markets where you have open positions * fix: #30 double check if open positions * fix: #30 dialog has only small/large sizes * feat: #30 add border on trigger and change padding and no wrap * fix: #30 if fees or factors are not found * fix: #30 remove markets.cy tests as markets page is now gone * fix #30 remove view full market list test * fix: #30 add rotating arrow on market title * fix: #30 add ease-in-out on popover * fix: #30 add ease-in-out on popover * fix: #30 align select a market table * fix: #30 select a market title * fix: #30 select a market title * fix: #30 fix any validateDOMnesting issues * fix: #30 show loading market data * fix: #30 add list of header columns * fix: #30 add list of header columns * fix: #30 small refactoring after review * fix: #30 update bold undreline class names * fix: #30 add large-mobile size * feat: #30 refactor select markets tables to render array of columns * fix: #30 remove size from select market dialog * fix: #30 add extra file for columns * fix: #30 update formtting * fix: #30 make sure popup closes on same market navigation * fix: rename market-utils, add calcCandle methods, store market id on select * fix: useMemo ondata and marketPositionData + orderbook stories fix * feat: #30 add open volume positions * fix: add market summary back * fix: update formatting * fix: use currentcolor on arrow * fix: create all markets page * fix: add overflow-y auto * fix: enlarge select market to get started dialog * fix: revert markets container * fix: use query to fix flickering on position markets * fix: edit unordered list in tooltips * fix: fix tooltip table * fix: fix home.cy.ts * chore: skip /markets tests
2022-08-11 11:56:35 +00:00
import { TradeGrid, TradePanels } from './trade-grid';
import { useNavigate, useParams } from 'react-router-dom';
import { Links, Routes } from '../../pages/client-router';
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<
MarketData,
MarketDataUpdateFieldsFragment
>(
{
dataProvider: marketDataProvider,
variables: useMemo(() => ({ 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();
2022-03-02 00:05:31 +00:00
const { w } = useWindowSize();
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 onSelect = useCallback(
(id: string) => {
if (id && id !== marketId) {
navigate(Links[Routes.MARKET](id));
}
},
[marketId, navigate]
);
feat: liquidity provisions view (#1133) * feat(#473): add positions metrics data provider * feat(#473) add positions stats * feat(#473) add positions stats * feat(#473): add positions stats * feat(#473): add positions stats * feat(#473): position metrics, test and refactoring * feat(#473): add unit tests to positions table * feat(#473): fix spelling, order positions by updated at desc * feat(#473): protect from division by 0 * feat(#473): fix trading positions e2e tests * feat(#473): fix e2e data mocks * feat(#473): post code review clean up * feat(#993): dependencies handling in data provider * feat(#993): fix e2e tests data mocks * feat(#993): remove position metrics mocks, add market data market id * feat: #994 add price monitoring bounds and candles update interface * fix: move best bid price to diff section * feat(#993): add missing mocks, fix combine function * fix: add insurance pool and calc volume 24h * feat: display some oracle min info, asset id, insurance pool, move open interest and 24hVol * fix: add market-info.cy.ts case * fix: remove # from numbered price monitoring settings * fix: add insurance pool test * fix: format 24hvol * feat(#993): set loading initially to true, add unit tests * feat(#993): cleanup, add comments * feat(#993): remove undefined from client type * fix: remove indicativeVolume and oracleSpecBinding from market info * feat(#993): cosmetic changes * fix: add oracleSpecBinding back * Update libs/deal-ticket/src/components/info-market.tsx Co-authored-by: botond <105208209+notbot00@users.noreply.github.com> * feat: add initial queries * fix: memo yesterday's timestamp * fix: add back info * fix: update query * fix: add view full oracle details link and update mappings * fix: regen code, make link reactnode, fix index.ts * feat: add liquidity lib, refactor info market * fix: remove liquidity query from deal-ticket * feat:(#993): pass informaton about update callback cause * fix: small ui tweaks * fix: display in grid * feat: navigate to oracle by termination id * feat: #491 add use liquidity provision merging * fix: remove logs, add extra check on my liquidity provision * fix: type number trivially inferred from a number literal, remove type annotation * fix: cypress tests and formatting for market info * Update libs/deal-ticket/src/components/market-info/info-market.tsx * fix: use position decimal places for stake and market value proxy * fix: #491 use size/position decimal places for obligation, supplied and commitment amount * fix: add size component and use decimal places * fix: update readme liquidity * fix: #491 add correct asset decimal formatters * Update libs/deal-ticket/src/components/market-info/tooltip-mapping.tsx Co-authored-by: candida-d <62548908+candida-d@users.noreply.github.com> * fix: make link instead of button to open liquidity * fix: #491 add liquidity page, link to trading mode tooltip, tabs hidden or choose active * fix: remove LP dialog, use only link to page * fix: add market id in LP view * fix: follow trade grid design * fix: add one line tabs , remove link styling, remove any, add value formatters * fix: remove falsy check LP undefined * fix: keep date formatter in LP table * fix: add generic type market info, hooks in body function * fix: revert number formatters * fix: use one param only in network params query * fix: use network param in web3 lib * fix: move lp container to trading app * fix: remove resizable panel * feat: add header component, remove isEstimate * chore: remove unnecessary type cast * fix: fix build with children map clone element * chore: lint * fix: move use network params to react helpers * fix: add const for LP tabs * fix: fix formatting on LP page * fix: only show tilde for liquidity monitoring auction end date * fix: market id being rendered twice in market info * chore: fix lint * fix: types for generate withdraw form query * chore: fix intermittent failing withdrawal test * Update libs/deal-ticket/src/components/market-info/info-market.tsx * chore: add another wait for market Co-authored-by: Bartłomiej Głownia <bglownia@gmail.com> Co-authored-by: botond <105208209+notbot00@users.noreply.github.com> Co-authored-by: candida-d <62548908+candida-d@users.noreply.github.com> Co-authored-by: Matthew Russell <mattrussell36@gmail.com> Co-authored-by: Joe <joe@vega.xyz>
2022-09-07 11:05:28 +00:00
const { data, error, loading } = useDataProvider({
dataProvider: marketProvider,
variables: { marketId: marketId || '' },
skip: !marketId,
});
useEffect(() => {
if (data?.id && data.id !== lastMarketId) {
update({ marketId: data.id });
}
}, [update, lastMarketId, data?.id]);
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 (w > 960) {
return (
<TradeGrid
market={data}
onSelect={onSelect}
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}
onSelect={onSelect}
onClickCollateral={() => navigate('/portfolio')}
/>
);
}, [w, data, onSelect, navigate]);
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>
);
};
2022-03-02 00:05:31 +00:00
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 }) => {
2022-03-02 00:05:31 +00:00
setWindowSize({
w: target.innerWidth,
h: target.innerHeight,
2022-03-02 00:05:31 +00:00
});
}, 300);
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
};
}, []);
return windowSize;
};