diff --git a/apps/liquidity-provision-dashboard/src/app/components/dashboard/market-list/market-list.tsx b/apps/liquidity-provision-dashboard/src/app/components/dashboard/market-list/market-list.tsx index e35d1290b..099193ef7 100644 --- a/apps/liquidity-provision-dashboard/src/app/components/dashboard/market-list/market-list.tsx +++ b/apps/liquidity-provision-dashboard/src/app/components/dashboard/market-list/market-list.tsx @@ -8,8 +8,17 @@ import type { } from 'ag-grid-community'; import 'ag-grid-community/dist/styles/ag-grid.css'; import 'ag-grid-community/dist/styles/ag-theme-alpine.css'; -import { t, addDecimalsFormatNumber } from '@vegaprotocol/react-helpers'; -import { Icon, AsyncRenderer } from '@vegaprotocol/ui-toolkit'; +import { + t, + addDecimalsFormatNumber, + formatNumberPercentage, + toBigNum, +} from '@vegaprotocol/react-helpers'; +import { + Icon, + AsyncRenderer, + TooltipCellComponent, +} from '@vegaprotocol/ui-toolkit'; import type { Market } from '@vegaprotocol/liquidity'; import { useMarketsLiquidity, @@ -50,9 +59,11 @@ export const MarketList = () => { sortable: true, unSortIcon: true, cellClass: ['flex', 'flex-col', 'justify-center'], + tooltipComponent: TooltipCellComponent, }} getRowId={getRowId} isRowClickable + tooltipShowDelay={500} > { }} minWidth={100} flex="1" + headerTooltip={t('The market name and settlement asset')} /> { .decimals )} (${displayChange(data.volumeChange)})` } + headerTooltip={t('The trade volume over the last 24h')} /> formatWithAsset( @@ -101,6 +114,47 @@ export const MarketList = () => { data.tradableInstrument.instrument.product.settlementAsset ) } + headerTooltip={t( + 'The amount of funds allocated to provide liquidity' + )} + /> + + + formatWithAsset( + value, + data.tradableInstrument.instrument.product.settlementAsset + ) + } + headerTooltip={t( + 'The ideal committed liquidity to operate the market. If total commitment currently below this level then LPs can set the fee level with new commitment.' + )} + /> + + { + const roundedPercentage = + parseInt( + (data.liquidityCommitted / parseFloat(data.target)).toFixed(0) + ) * 100; + const display = Number.isNaN(roundedPercentage) + ? 'N/A' + : formatNumberPercentage(toBigNum(roundedPercentage, 2)); + return display; + }} + headerTooltip={t('% Target stake met')} + /> + + + `${value.factors.liquidityFee}%` + } + headerTooltip={t('Fee level for this market')} /> { ); }} + headerTooltip={t( + 'The current market status - those below the target stake mark are most in need of liquidity' + )} /> { sortable={false} cellStyle={{ overflow: 'unset' }} /> - { if (!value) { @@ -39,11 +40,14 @@ export const LPProvidersGrid = ({ return ( value ? formatWithAsset(value, settlementAsset) : '0' } + headerTooltip={t('The amount of funds allocated to provide liquidity')} + minWidth={140} + /> + + - - `${value}%`} field="fee" + headerTooltip={t( + "The market's liquidity fee, or the percentage of a trade's value which is collected from the price taker for every trade" + )} /> - + ); }; diff --git a/apps/liquidity-provision-dashboard/src/app/components/status/status.tsx b/apps/liquidity-provision-dashboard/src/app/components/status/status.tsx index 43043dbf7..257c02bdb 100644 --- a/apps/liquidity-provision-dashboard/src/app/components/status/status.tsx +++ b/apps/liquidity-provision-dashboard/src/app/components/status/status.tsx @@ -1,4 +1,4 @@ -import { Lozenge } from '@vegaprotocol/ui-toolkit'; +import { Lozenge, Tooltip } from '@vegaprotocol/ui-toolkit'; import classNames from 'classnames'; import { @@ -6,6 +6,7 @@ import { AuctionTriggerMapping, Schema, } from '@vegaprotocol/types'; +import { t } from '@vegaprotocol/react-helpers'; import { Indicator } from '../indicator'; @@ -33,17 +34,46 @@ export const Status = ({ return MarketTradingModeMapping[tradingMode]; }; + const status = getStatus(); + const tooltipDescription = t(getTooltipDescription(status)); + return ( -
- - - {getStatus()} - +
+ +
+ + + {status} + +
+
); }; + +const getTooltipDescription = (status: string) => { + let tooltipDescription = ''; + switch (status) { + case MarketTradingModeMapping.TRADING_MODE_CONTINUOUS: + tooltipDescription = + 'This is the standard trading mode where trades are executed whenever orders are received'; + break; + case `${MarketTradingModeMapping.TRADING_MODE_MONITORING_AUCTION} - ${AuctionTriggerMapping.AUCTION_TRIGGER_LIQUIDITY}`: + tooltipDescription = + 'This market is in auction until it reaches sufficient liquidity'; + break; + case MarketTradingModeMapping.TRADING_MODE_OPENING_AUCTION: + tooltipDescription = + 'This is a new market in an opening auction to determine a fair mid-price before starting continuous trading.'; + break; + default: + break; + } + + return tooltipDescription; +};