vega-frontend-monorepo/apps/trading/components/trading-mode-tooltip/trading-mode-tooltip.tsx
m.ray d85c5d7c1f
chore: LP tooltips & move market-info lib (#1267)
* 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

* fix: route to LP and update selected market

* fix: add market-info lib

* fix: add tooltips to header stat

* fix: add overflow-y on div within auto sizer

* fix: fix merge conflicts

* fix: size and dialog

* fix: format target stake and supplied stake

* fix: add tooltips ag-grid and fix decimals

* fix: overflow on both axes auto-sizer

* fix: remove symbol, add to commitment

* fix: update tooltips and headers after demo

* fix: network switcher background

* fix: remove any from market info

* fix: integration test

* fix: remove e2e test for risk factors for now until grpc error sorted

* fix: get liquidity panel  by test-id

* fix: fix market-info.cy.ts test

* fix: liquidity test

* f
ix: fix link data test id

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-12 11:07:29 +02:00

214 lines
5.9 KiB
TypeScript

import type { ReactNode } from 'react';
import {
t,
getDateTimeFormat,
addDecimalsFormatNumber,
} from '@vegaprotocol/react-helpers';
import { Link } from '@vegaprotocol/ui-toolkit';
import { MarketTradingMode, AuctionTrigger } from '@vegaprotocol/types';
import type { Market_market } from '../../pages/markets/__generated__/Market';
type MarketDataGridProps = {
grid: {
label: string | ReactNode;
value?: ReactNode;
}[];
};
const MarketDataGrid = ({ grid }: MarketDataGridProps) => {
return (
<>
{grid.map(
({ label, value }, index) =>
value && (
<div key={index} className="grid grid-cols-2">
<span data-testid="tooltip-label">{label}</span>
<span data-testid="tooltip-value" className="text-right">
{value}
</span>
</div>
)
)}
</>
);
};
const formatStake = (value: string, market: Market_market) => {
const formattedValue = addDecimalsFormatNumber(
value,
market.tradableInstrument.instrument.product.settlementAsset.decimals
);
const asset =
market.tradableInstrument.instrument.product.settlementAsset.symbol;
return `${formattedValue} ${asset}`;
};
const compileGridData = (
market: Market_market,
onSelect?: (id: string) => void
) => {
const grid: MarketDataGridProps['grid'] = [];
const isLiquidityMonitoringAuction =
market.tradingMode === MarketTradingMode.TRADING_MODE_MONITORING_AUCTION &&
market.data?.trigger === AuctionTrigger.AUCTION_TRIGGER_LIQUIDITY;
if (!market.data) return grid;
if (market.data?.auctionStart) {
grid.push({
label: t('Auction start'),
value: getDateTimeFormat().format(new Date(market.data.auctionStart)),
});
}
if (market.data?.auctionEnd) {
const endDate = getDateTimeFormat().format(
new Date(market.data.auctionEnd)
);
grid.push({
label: isLiquidityMonitoringAuction
? t('Est auction end')
: t('Auction end'),
value: isLiquidityMonitoringAuction ? `~${endDate}` : endDate,
});
}
if (isLiquidityMonitoringAuction && market.data?.targetStake) {
grid.push({
label: t('Target liquidity'),
value: formatStake(market.data.targetStake, market),
});
}
if (isLiquidityMonitoringAuction && market.data?.suppliedStake) {
grid.push({
label: (
<Link onClick={() => onSelect && onSelect(market.id)}>
{t('Current liquidity')}
</Link>
),
value: formatStake(market.data.suppliedStake, market),
});
}
if (market.data?.indicativePrice) {
grid.push({
label: t('Est uncrossing price'),
value:
'~' +
addDecimalsFormatNumber(
market.data.indicativePrice,
market.positionDecimalPlaces
),
});
}
if (market.data?.indicativeVolume) {
grid.push({
label: t('Est uncrossing vol'),
value:
'~' +
addDecimalsFormatNumber(
market.data.indicativeVolume,
market.positionDecimalPlaces
),
});
}
return grid;
};
type TradingModeTooltipProps = {
market: Market_market;
onSelect?: (marketId: string) => void;
};
export const TradingModeTooltip = ({
market,
onSelect,
}: TradingModeTooltipProps) => {
switch (market.tradingMode) {
case MarketTradingMode.TRADING_MODE_CONTINUOUS: {
return (
<>
{t(
'This is the standard trading mode where trades are executed whenever orders are received.'
)}
</>
);
}
case MarketTradingMode.TRADING_MODE_OPENING_AUCTION: {
return (
<>
<p className="mb-4">
<span>
{t(
'This new market is in an opening auction to determine a fair mid-price before starting continuous trading.'
)}
</span>{' '}
<Link
href="https://docs.fairground.vega.xyz/docs/trading-questions/#auctions-what-happens-in-an-opening-auction"
target="_blank"
>
{t('Find out more')}
</Link>
</p>
<MarketDataGrid grid={compileGridData(market)} />
</>
);
}
case MarketTradingMode.TRADING_MODE_MONITORING_AUCTION: {
switch (market.data?.trigger) {
case AuctionTrigger.AUCTION_TRIGGER_LIQUIDITY: {
return (
<>
<p data-testid="tooltip-market-info" className="mb-4">
<span>
{t(
'This market is in auction until it reaches sufficient liquidity.'
)}
</span>{' '}
<Link
href="https://docs.fairground.vega.xyz/docs/trading-questions/#auctions-what-is-a-liquidity-monitoring-auction"
target="_blank"
>
{t('Find out more')}
</Link>
</p>
<MarketDataGrid grid={compileGridData(market, onSelect)} />
</>
);
}
case AuctionTrigger.AUCTION_TRIGGER_PRICE: {
return (
<>
<p className="mb-4">
<span>
{t('This market is in auction due to high price volatility.')}
</span>{' '}
<Link
href="https://docs.fairground.vega.xyz/docs/trading-questions/#auctions-what-is-a-price-monitoring-auction"
target="_blank"
>
{t('Find out more')}
</Link>
</p>
<MarketDataGrid grid={compileGridData(market)} />
</>
);
}
default: {
return null;
}
}
}
case MarketTradingMode.TRADING_MODE_NO_TRADING: {
return <>{t('No trading enabled for this market.')}</>;
}
case MarketTradingMode.TRADING_MODE_BATCH_AUCTION:
default: {
return null;
}
}
};