diff --git a/libs/positions/src/lib/positions-table.tsx b/libs/positions/src/lib/positions-table.tsx index 29644b17a..e2794a187 100644 --- a/libs/positions/src/lib/positions-table.tsx +++ b/libs/positions/src/lib/positions-table.tsx @@ -21,7 +21,6 @@ import { ExternalLink, VegaIcon, VegaIconNames, - tooltipContentClasses, } from '@vegaprotocol/ui-toolkit'; import { volumePrefix, @@ -131,7 +130,7 @@ export const PositionsTable = ({ cellClass: 'font-mono text-right', cellClassRules: signedNumberCssClassRules, filter: 'agNumberColumnFilter', - valueGetter: ({ data }: VegaValueGetterParams) => { + valueGetter: ({ data }: { data: Position }) => { return data?.openVolume === undefined ? undefined : toBigNum( @@ -139,6 +138,15 @@ export const PositionsTable = ({ data.positionDecimalPlaces ).toNumber(); }, + tooltipValueGetter: ({ data }: ITooltipParams) => { + if ( + !data || + data.status === PositionStatus.POSITION_STATUS_UNSPECIFIED + ) { + return null; + } + return data.status; + }, valueFormatter: ({ data, }: VegaValueFormatterParams): string => { @@ -153,12 +161,14 @@ export const PositionsTable = ({ return vol; }, - tooltipComponent: ({ value, data }: ITooltipParams) => { - if (!data) return null; + tooltipComponent: (args: ITooltipParams) => { + if (!args.data) { + return null; + } const POSITION_RESOLUTION_LINK = DocsLinks?.POSITION_RESOLUTION ?? ''; let primaryTooltip; - switch (data.status) { + switch (args.data.status) { case PositionStatus.POSITION_STATUS_CLOSED_OUT: primaryTooltip = t('Your position was closed.'); break; @@ -171,11 +181,11 @@ export const PositionsTable = ({ } let secondaryTooltip; - switch (data.status) { + switch (args.data.status) { case PositionStatus.POSITION_STATUS_CLOSED_OUT: secondaryTooltip = t( `You did not have enough %s collateral to meet the maintenance margin requirements for your position, so it was closed by the network.`, - [data.assetSymbol] + args.data.assetSymbol ); break; case PositionStatus.POSITION_STATUS_ORDERS_CLOSED: @@ -192,18 +202,26 @@ export const PositionsTable = ({ secondaryTooltip = t('Maintained by network'); } return ( -
-

{primaryTooltip}

-

{secondaryTooltip}

-

- {t('Status: %s', PositionStatusMapping[data.status])} -

- {POSITION_RESOLUTION_LINK && ( - - {t('Read more about position resolution')} - - )} -
+ +

{primaryTooltip}

+

{secondaryTooltip}

+

+ {t( + 'Status: %s', + PositionStatusMapping[args.data.status] + )} +

+ {POSITION_RESOLUTION_LINK && ( + + {t('Read more about position resolution')} + + )} + + } + /> ); }, cellRenderer: OpenVolumeCell, @@ -329,51 +347,56 @@ export const PositionsTable = ({ valueGetter: realisedPNLValueGetter, // @ts-ignore no type overlap, but the functions are identical tooltipValueGetter: realisedPNLValueGetter, - tooltipComponent: ({ - value, - valueFormatted, - data, - }: ITooltipParams) => { + tooltipComponent: (args: ITooltipParams) => { const LOSS_SOCIALIZATION_LINK = DocsLinks?.LOSS_SOCIALIZATION ?? ''; - if (!data) { + if (!args.data) { return <>-; } - const losses = parseInt(data?.lossSocializationAmount ?? '0'); + const losses = parseInt( + args.data?.lossSocializationAmount ?? '0' + ); if (losses <= 0) { // eslint-disable-next-line react/jsx-no-useless-fragment - return <>{valueFormatted}; + return <>{args.valueFormatted}; } const lossesFormatted = addDecimalsFormatNumber( - data.lossSocializationAmount, - data.assetDecimals + args.data.lossSocializationAmount, + args.data.assetDecimals ); return ( -
-

{t('Realised PNL: %s', value)}

-

- {t( - 'Lifetime loss socialisation deductions: %s', - lossesFormatted - )} -

-

- {t( - `You received less %s in gains that you should have when the market moved in your favour. This occurred because one or more other trader(s) were closed out and did not have enough funds to cover their losses, and the market's insurance pool was empty.`, - [data.assetSymbol] - )} -

- {LOSS_SOCIALIZATION_LINK && ( - - {t('Read more about loss socialisation')} - - )} -
+ +

+ {t('Realised PNL: %s', args.value)} +

+

+ {t( + 'Lifetime loss socialisation deductions: %s', + lossesFormatted + )} +

+

+ {t( + `You received less %s in gains that you should have when the market moved in your favour. This occurred because one or more other trader(s) were closed out and did not have enough funds to cover their losses, and the market's insurance pool was empty.`, + args.data.assetSymbol + )} +

+ {LOSS_SOCIALIZATION_LINK && ( + + {t('Read more about loss socialisation')} + + )} + + } + /> ); }, valueFormatter: ({ diff --git a/libs/ui-toolkit/src/components/tooltip/tooltip.tsx b/libs/ui-toolkit/src/components/tooltip/tooltip.tsx index 8db592abc..9c629d785 100644 --- a/libs/ui-toolkit/src/components/tooltip/tooltip.tsx +++ b/libs/ui-toolkit/src/components/tooltip/tooltip.tsx @@ -9,7 +9,7 @@ import { } from '@radix-ui/react-tooltip'; import type { ITooltipParams } from 'ag-grid-community'; -export const tooltipContentClasses = +const tooltipContentClasses = 'max-w-sm bg-vega-light-100 dark:bg-vega-dark-100 border border-vega-light-200 dark:border-vega-dark-200 px-2 py-1 z-20 rounded text-xs text-black dark:text-white break-word'; export interface TooltipProps { children: React.ReactElement; @@ -60,5 +60,9 @@ export const Tooltip = ({ ); export const TooltipCellComponent = (props: ITooltipParams) => { - return

{props.value}

; + return ( +
+ {props.value} +
+ ); };