LaconicNetwork/vega-frontend-monorepo
3
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

fix(trading): liquidity table improve readability and remove grouping (#5598)

Browse Source
This commit is contained in:
m.ray 2024-01-10 17:49:35 +02:00 committed by GitHub
parent f62d3289ab
commit c003e5fa30
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 277 additions and 315 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/trading/e2e/tests/liquidity_provision/test_liquidity_provision.py
View File

@ -16,7 +16,6 @@ def vega(request):
def continuous_market(vega): def continuous_market(vega):
return setup_continuous_market(vega) return setup_continuous_market(vega)
@pytest.mark.skip("Issue 5581")
@pytest.mark.usefixtures("auth", "risk_accepted") @pytest.mark.usefixtures("auth", "risk_accepted")
def test_liquidity_provision_amendment(continuous_market, vega: VegaServiceNull, page: Page): def test_liquidity_provision_amendment(continuous_market, vega: VegaServiceNull, page: Page):
# TODO Refactor asserting the grid # TODO Refactor asserting the grid

5
libs/liquidity/src/lib/liquidity-table.spec.tsx
View File

@ -83,11 +83,6 @@ describe('LiquidityTable', () => {
h.querySelector('[ref="eText"]')?.textContent?.trim() h.querySelector('[ref="eText"]')?.textContent?.trim()
); );
const expectedHeaders = [ const expectedHeaders = [
undefined,
undefined,
undefined,
undefined,
undefined,
'Party', 'Party',
'Status', 'Status',
'Commitment ()', 'Commitment ()',

586
libs/liquidity/src/lib/liquidity-table.tsx
View File

@ -18,7 +18,7 @@ import {
truncateMiddle, truncateMiddle,
} from '@vegaprotocol/ui-toolkit'; } from '@vegaprotocol/ui-toolkit';
import type { import type {
ColGroupDef, ColDef,
ITooltipParams, ITooltipParams,
ValueFormatterParams, ValueFormatterParams,
} from 'ag-grid-community'; } from 'ag-grid-community';
@ -60,10 +60,11 @@ const dateValueFormatter = ({ value }: { value?: string | null }) => {
return getDateTimeFormat().format(new Date(value)); return getDateTimeFormat().format(new Date(value));
}; };
const defaultColDef = { const defaultColDef: ColDef = {
resizable: true, resizable: true,
sortable: true, sortable: true,
tooltipComponent: TooltipCellComponent, tooltipComponent: TooltipCellComponent,
minWidth: 120,
}; };
export interface LiquidityTableProps export interface LiquidityTableProps
@ -168,333 +169,300 @@ export const LiquidityTable = ({
)}`; )}`;
}; };
const defs: ColGroupDef[] = [ const defs: ColDef[] = [
{ {
headerName: '', headerName: t('Party'),
children: [ field: 'partyId',
{ headerTooltip: t('The public key of the party making this commitment.'),
headerName: t('Party'), cellRenderer: copyCellRenderer,
field: 'partyId', pinned: 'left',
headerTooltip: t(
'The public key of the party making this commitment.'
),
cellRenderer: copyCellRenderer,
},
],
}, },
{ {
headerName: t('Commitment details'), headerName: t('Status'),
marryChildren: true, headerTooltip: t('The current status of this liquidity provision.'),
children: [ field: 'status',
{ cellRenderer: ({
headerName: t('Status'), data,
headerTooltip: t('The current status of this liquidity provision.'), value,
field: 'status', }: VegaICellRendererParams<LiquidityProvisionData, 'status'>) => {
cellRenderer: ({ if (!value) return value;
data, if (
value, data?.status === LiquidityProvisionStatus.STATUS_PENDING &&
}: VegaICellRendererParams<LiquidityProvisionData, 'status'>) => { (data?.currentCommitmentAmount || data?.currentFee)
if (!value) return value; ) {
if ( return (
data?.status === LiquidityProvisionStatus.STATUS_PENDING && <span className="text-warning">{t('Updating next epoch')}</span>
(data?.currentCommitmentAmount || data?.currentFee) );
) { }
return ( return (
<span className="text-warning"> <span>
{t('Updating next epoch')} {
</span> LiquidityProvisionStatusMapping[
); value as LiquidityProvisionStatus
]
} }
return ( </span>
<span> );
{ },
LiquidityProvisionStatusMapping[ },
value as LiquidityProvisionStatus {
] headerName: t(`Commitment ({{symbol}})`, { symbol }),
} field: 'commitmentAmount',
</span> type: 'rightAligned',
headerTooltip: t(
'The amount committed to the market by this liquidity provider.'
),
cellRenderer: ({
data,
value,
}: VegaICellRendererParams<
LiquidityProvisionData,
'commitmentAmount'
>) => {
if (!value) return '-';
const currentCommitmentAmount = data?.currentCommitmentAmount;
const pendingCommitmentAmount = value;
const formattedPendingCommitmentAmount =
addDecimalsFormatNumberQuantum(
pendingCommitmentAmount,
assetDecimalPlaces ?? 0,
quantum ?? 0
);
if (
currentCommitmentAmount &&
currentCommitmentAmount !== pendingCommitmentAmount
) {
const formattedCurrentCommitmentAmount =
addDecimalsFormatNumberQuantum(
currentCommitmentAmount,
assetDecimalPlaces ?? 0,
quantum ?? 0
); );
},
},
{
headerName: t(`Commitment ({{symbol}})`, { symbol }),
field: 'commitmentAmount',
type: 'rightAligned',
headerTooltip: t(
'The amount committed to the market by this liquidity provider.'
),
cellRenderer: ({
data,
value,
}: VegaICellRendererParams<
LiquidityProvisionData,
'commitmentAmount'
>) => {
if (!value) return '-';
const currentCommitmentAmount = data?.currentCommitmentAmount;
const pendingCommitmentAmount = value;
const formattedPendingCommitmentAmount = return (
addDecimalsFormatNumberQuantum( <>
pendingCommitmentAmount, <span>{formattedCurrentCommitmentAmount}</span> (
assetDecimalPlaces ?? 0, <span className="text-warning">
quantum ?? 0 {formattedPendingCommitmentAmount}
); </span>
)
</>
);
} else {
return formattedPendingCommitmentAmount;
}
},
tooltipValueGetter: assetDecimalsFormatter,
},
{
headerName: t('Obligation'),
field: 'commitmentAmount',
type: 'rightAligned',
headerTooltip: t(
`The liquidity provider's obligation to the market, calculated as the liquidity commitment amount multiplied by the value of the stake_to_ccy_volume network parameter to convert into units of liquidity volume.`
),
cellRenderer: ({
data,
value,
}: VegaICellRendererParams<
LiquidityProvisionData,
'commitmentAmount'
>) => {
if (!value) return '-';
if ( const currentCommitmentAmount = data?.currentCommitmentAmount
currentCommitmentAmount && ? new BigNumber(data?.currentCommitmentAmount)
currentCommitmentAmount !== pendingCommitmentAmount
) {
const formattedCurrentCommitmentAmount =
addDecimalsFormatNumberQuantum(
currentCommitmentAmount,
assetDecimalPlaces ?? 0,
quantum ?? 0
);
return (
<>
<span>{formattedCurrentCommitmentAmount}</span> (
<span className="text-warning">
{formattedPendingCommitmentAmount}
</span>
)
</>
);
} else {
return formattedPendingCommitmentAmount;
}
},
tooltipValueGetter: assetDecimalsFormatter,
},
{
headerName: t('Obligation'),
field: 'commitmentAmount',
type: 'rightAligned',
headerTooltip: t(
`The liquidity provider's obligation to the market, calculated as the liquidity commitment amount multiplied by the value of the stake_to_ccy_volume network parameter to convert into units of liquidity volume.`
),
cellRenderer: ({
data,
value,
}: VegaICellRendererParams<
LiquidityProvisionData,
'commitmentAmount'
>) => {
if (!value) return '-';
const currentCommitmentAmount = data?.currentCommitmentAmount
? new BigNumber(data?.currentCommitmentAmount)
.times(Number(stakeToCcyVolume) || 1)
.toString()
: undefined;
const pendingCommitmentAmount = new BigNumber(value)
.times(Number(stakeToCcyVolume) || 1) .times(Number(stakeToCcyVolume) || 1)
.toString(); .toString()
: undefined;
const formattedPendingCommitmentAmount = const pendingCommitmentAmount = new BigNumber(value)
addDecimalsFormatNumberQuantum( .times(Number(stakeToCcyVolume) || 1)
pendingCommitmentAmount, .toString();
assetDecimalPlaces ?? 0,
quantum ?? 0
);
if ( const formattedPendingCommitmentAmount =
currentCommitmentAmount && addDecimalsFormatNumberQuantum(
currentCommitmentAmount !== pendingCommitmentAmount pendingCommitmentAmount,
) { assetDecimalPlaces ?? 0,
const formattedCurrentCommitmentAmount = quantum ?? 0
addDecimalsFormatNumberQuantum( );
currentCommitmentAmount,
assetDecimalPlaces ?? 0,
quantum ?? 0
);
return ( if (
<> currentCommitmentAmount &&
<span>{formattedCurrentCommitmentAmount}</span> ( currentCommitmentAmount !== pendingCommitmentAmount
<span className="text-warning"> ) {
{formattedPendingCommitmentAmount} const formattedCurrentCommitmentAmount =
</span> addDecimalsFormatNumberQuantum(
) currentCommitmentAmount,
</> assetDecimalPlaces ?? 0,
); quantum ?? 0
} else { );
return formattedPendingCommitmentAmount;
}
},
tooltipValueGetter: stakeToCcyVolumeFormatter,
},
{
headerName: t('Fee'),
headerTooltip: t(
'The fee percentage (per trade) proposed by each liquidity provider.'
),
field: 'fee',
type: 'rightAligned',
cellRenderer: ({
data,
value,
}: VegaICellRendererParams<LiquidityProvisionData, 'fee'>) => {
if (!value) return '-';
const formattedPendingFee =
formatNumberPercentage(new BigNumber(value).times(100), 2) ||
'-';
if (data?.currentFee && data?.currentFee !== value) {
const formattedCurrentFee = formatNumberPercentage(
new BigNumber(data.currentFee).times(100),
2
);
return (
<>
<span>{formattedCurrentFee}</span> (
<span className="text-warning">{formattedPendingFee}</span>)
</>
);
}
return formattedPendingFee;
},
},
{
headerName: t('Adjusted stake'),
field: 'feeShare.virtualStake',
type: 'rightAligned',
headerTooltip: t(
'The effective stake of the liquidity provider, adjusted for length of commitment and impact on equity like share.'
),
valueFormatter: assetDecimalsQuantumFormatter, return (
tooltipValueGetter: assetDecimalsFormatter, <>
}, <span>{formattedCurrentCommitmentAmount}</span> (
{ <span className="text-warning">
headerName: t(`Share`), {formattedPendingCommitmentAmount}
field: 'feeShare.equityLikeShare', </span>
type: 'rightAligned', )
headerTooltip: t( </>
'The equity-like share of liquidity of the market used to determine allocation of LP fees. Calculated based on share of total liquidity, with a premium added for length of commitment.' );
), } else {
valueFormatter: percentageFormatter, return formattedPendingCommitmentAmount;
}, }
], },
tooltipValueGetter: stakeToCcyVolumeFormatter,
}, },
{ {
headerName: t('Live liquidity data'), headerName: t('Fee'),
marryChildren: true, headerTooltip: t(
children: [ 'The fee percentage (per trade) proposed by each liquidity provider.'
{ ),
headerName: t('Live supplied liquidity'), field: 'fee',
field: 'balance', type: 'rightAligned',
type: 'rightAligned', cellRenderer: ({
headerTooltip: t( data,
`The amount of liquidity volume supplied by the LP order in order to meet the obligation. If the obligation is already met in full by other limit orders from the same Vega key the LP order is not required and this value will be zero. Also note if the target stake for the market is less than the obligation the full value of the obligation may not be required.` value,
), }: VegaICellRendererParams<LiquidityProvisionData, 'fee'>) => {
valueFormatter: stakeToCcyVolumeQuantumFormatter, if (!value) return '-';
tooltipValueGetter: stakeToCcyVolumeFormatter, const formattedPendingFee =
}, formatNumberPercentage(new BigNumber(value).times(100), 2) || '-';
{ if (data?.currentFee && data?.currentFee !== value) {
headerName: t('Fees accrued this epoch'), const formattedCurrentFee = formatNumberPercentage(
field: 'earmarkedFees', new BigNumber(data.currentFee).times(100),
type: 'rightAligned', 2
headerTooltip: t( );
`The liquidity fees accrued by each provider, which will be distributed at the end of the epoch after applying any penalties.` return (
), <>
valueFormatter: assetDecimalsQuantumFormatter, <span>{formattedCurrentFee}</span> (
tooltipValueGetter: feesAccruedTooltip, <span className="text-warning">{formattedPendingFee}</span>)
cellClassRules: { </>
'text-warning': ({ data }: { data: LiquidityProvisionData }) => { );
if (!data.sla) return false; }
return ( return formattedPendingFee;
new BigNumber( },
data.sla.currentEpochFractionOfTimeOnBook
).isLessThan(1) &&
new BigNumber(
data.sla.currentEpochFractionOfTimeOnBook
).isGreaterThan(data.commitmentMinTimeFraction)
);
},
'text-red-500': ({ data }: { data: LiquidityProvisionData }) => {
if (!data.sla) return false;
return new BigNumber(
data.sla.currentEpochFractionOfTimeOnBook
).isLessThan(data.commitmentMinTimeFraction);
},
},
},
{
headerName: t(`Live time on book`),
field: 'sla.currentEpochFractionOfTimeOnBook',
type: 'rightAligned',
headerTooltip: t('Current epoch fraction of time on the book.'),
valueFormatter: percentageFormatter,
},
{
headerName: t('Live liquidity score (%)'),
field: 'feeShare.averageScore',
type: 'rightAligned',
headerTooltip: t(
'The liquidity score of the provider, used to determine allocation of fees to the best performing LPs. Posting volume closer to the mid on both sides of the book will improve this score.'
),
valueFormatter: percentageFormatter,
},
],
}, },
{ {
headerName: t('Last epoch SLA details'), headerName: t('Adjusted stake'),
marryChildren: true, field: 'feeShare.virtualStake',
children: [ type: 'rightAligned',
{ headerTooltip: t(
headerName: t(`Last time on book`), 'The effective stake of the liquidity provider, adjusted for length of commitment and impact on equity like share.'
field: 'sla.lastEpochFractionOfTimeOnBook', ),
type: 'rightAligned',
headerTooltip: t( valueFormatter: assetDecimalsQuantumFormatter,
'Fraction of time on the book at the end of the last epoch.' tooltipValueGetter: assetDecimalsFormatter,
),
valueFormatter: percentageFormatter,
},
{
headerName: t(`Last fee penalty`),
field: 'sla.lastEpochFeePenalty',
type: 'rightAligned',
headerTooltip: t(
'Penalty applied on the fees a liquidity provider collected in the last epoch. This percentage increased if an LP did not meet the SLA, or if they met it but other LPs outscored them in the previous epoch.'
),
valueFormatter: percentageFormatter,
},
{
headerName: t(`Last bond penalty`),
field: 'sla.lastEpochBondPenalty',
type: 'rightAligned',
headerTooltip: t(
`Penalty applied on a provider's bond penalty at the end of the last epoch. This percentage increased if an LP: had a shortfall and their bond needed to be used to cover it, did not meet the SLA, and/or reduced their commitment to the point that the market was below its target stake.`
),
valueFormatter: percentageFormatter,
},
],
}, },
{ {
headerName: '', headerName: t(`Share`),
marryChildren: true, field: 'feeShare.equityLikeShare',
children: [ type: 'rightAligned',
{ headerTooltip: t(
headerName: t('Created'), 'The equity-like share of liquidity of the market used to determine allocation of LP fees. Calculated based on share of total liquidity, with a premium added for length of commitment.'
headerTooltip: t( ),
'The date and time this liquidity provision was created.' valueFormatter: percentageFormatter,
), },
field: 'createdAt', {
type: 'rightAligned', headerName: t('Live supplied liquidity'),
valueFormatter: dateValueFormatter, field: 'balance',
type: 'rightAligned',
headerTooltip: t(
`The amount of liquidity volume supplied by the LP order in order to meet the obligation. If the obligation is already met in full by other limit orders from the same Vega key the LP order is not required and this value will be zero. Also note if the target stake for the market is less than the obligation the full value of the obligation may not be required.`
),
valueFormatter: stakeToCcyVolumeQuantumFormatter,
tooltipValueGetter: stakeToCcyVolumeFormatter,
},
{
headerName: t('Fees accrued this epoch'),
field: 'earmarkedFees',
type: 'rightAligned',
headerTooltip: t(
`The liquidity fees accrued by each provider, which will be distributed at the end of the epoch after applying any penalties.`
),
valueFormatter: assetDecimalsQuantumFormatter,
tooltipValueGetter: feesAccruedTooltip,
cellClassRules: {
'text-warning': ({ data }: { data: LiquidityProvisionData }) => {
if (!data.sla) return false;
return (
new BigNumber(
data.sla.currentEpochFractionOfTimeOnBook
).isLessThan(1) &&
new BigNumber(
data.sla.currentEpochFractionOfTimeOnBook
).isGreaterThan(data.commitmentMinTimeFraction)
);
}, },
{ 'text-red-500': ({ data }: { data: LiquidityProvisionData }) => {
headerName: t('Updated'), if (!data.sla) return false;
headerTooltip: t( return new BigNumber(
'The date and time this liquidity provision was last updated.' data.sla.currentEpochFractionOfTimeOnBook
), ).isLessThan(data.commitmentMinTimeFraction);
field: 'updatedAt',
type: 'rightAligned',
valueFormatter: dateValueFormatter,
}, },
], },
},
{
headerName: t(`Live time on book`),
field: 'sla.currentEpochFractionOfTimeOnBook',
type: 'rightAligned',
headerTooltip: t('Current epoch fraction of time on the book.'),
valueFormatter: percentageFormatter,
},
{
headerName: t('Live liquidity score (%)'),
field: 'feeShare.averageScore',
type: 'rightAligned',
headerTooltip: t(
'The liquidity score of the provider, used to determine allocation of fees to the best performing LPs. Posting volume closer to the mid on both sides of the book will improve this score.'
),
valueFormatter: percentageFormatter,
},
{
headerName: t(`Last time on book`),
field: 'sla.lastEpochFractionOfTimeOnBook',
type: 'rightAligned',
headerTooltip: t(
'Fraction of time on the book at the end of the last epoch.'
),
valueFormatter: percentageFormatter,
},
{
headerName: t(`Last fee penalty`),
field: 'sla.lastEpochFeePenalty',
type: 'rightAligned',
headerTooltip: t(
'Penalty applied on the fees a liquidity provider collected in the last epoch. This percentage increased if an LP did not meet the SLA, or if they met it but other LPs outscored them in the previous epoch.'
),
valueFormatter: percentageFormatter,
},
{
headerName: t(`Last bond penalty`),
field: 'sla.lastEpochBondPenalty',
type: 'rightAligned',
headerTooltip: t(
`Penalty applied on a provider's bond penalty at the end of the last epoch. This percentage increased if an LP: had a shortfall and their bond needed to be used to cover it, did not meet the SLA, and/or reduced their commitment to the point that the market was below its target stake.`
),
valueFormatter: percentageFormatter,
},
{
headerName: t('Created'),
headerTooltip: t(
'The date and time this liquidity provision was created.'
),
field: 'createdAt',
type: 'rightAligned',
valueFormatter: dateValueFormatter,
},
{
headerName: t('Updated'),
headerTooltip: t(
'The date and time this liquidity provision was last updated.'
),
field: 'updatedAt',
type: 'rightAligned',
valueFormatter: dateValueFormatter,
}, },
]; ];
return defs; return defs;