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

fix(trading): lp table forward ref breaking resize grid (#4447)

Browse Source
This commit is contained in:
Matthew Russell 2023-08-02 13:59:05 +01:00 committed by GitHub
parent 76a6005b77
commit d18a0c7e15
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 154 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apps/trading/components/liquidity-container/liquidity-container.tsx
View File

@ -12,10 +12,9 @@ import {
NetworkParams, NetworkParams,
useNetworkParams, useNetworkParams,
} from '@vegaprotocol/network-parameters'; } from '@vegaprotocol/network-parameters';
import type { AgGridReact } from 'ag-grid-react';
import type { DataGridSlice } from '../../stores/datagrid-store-slice'; import type { DataGridSlice } from '../../stores/datagrid-store-slice';
import { createDataGridSlice } from '../../stores/datagrid-store-slice'; import { createDataGridSlice } from '../../stores/datagrid-store-slice';
import { useEffect, useRef } from 'react'; import { useEffect } from 'react';
import { create } from 'zustand'; import { create } from 'zustand';
import { persist } from 'zustand/middleware'; import { persist } from 'zustand/middleware';
@ -26,8 +25,6 @@ export const LiquidityContainer = ({
marketId: string | undefined; marketId: string | undefined;
filter?: Filter; filter?: Filter;
}) => { }) => {
const gridRef = useRef<AgGridReact | null>(null);
const gridStore = useLiquidityStore((store) => store.gridStore); const gridStore = useLiquidityStore((store) => store.gridStore);
const updateGridStore = useLiquidityStore((store) => store.updateGridStore); const updateGridStore = useLiquidityStore((store) => store.updateGridStore);
@ -60,7 +57,6 @@ export const LiquidityContainer = ({
return ( return (
<div className="h-full relative"> <div className="h-full relative">
<LiquidityTable <LiquidityTable
ref={gridRef}
rowData={data} rowData={data}
symbol={symbol} symbol={symbol}
assetDecimalPlaces={assetDecimalPlaces} assetDecimalPlaces={assetDecimalPlaces}

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

@ -1,4 +1,4 @@
import { forwardRef, useMemo } from 'react'; import { useMemo } from 'react';
import { import {
addDecimalsFormatNumber, addDecimalsFormatNumber,
addDecimalsFormatNumberQuantum, addDecimalsFormatNumberQuantum,
@ -9,7 +9,6 @@ import { t } from '@vegaprotocol/i18n';
import type { TypedDataAgGrid } from '@vegaprotocol/datagrid'; import type { TypedDataAgGrid } from '@vegaprotocol/datagrid';
import { AgGridLazy as AgGrid } from '@vegaprotocol/datagrid'; import { AgGridLazy as AgGrid } from '@vegaprotocol/datagrid';
import { TooltipCellComponent } from '@vegaprotocol/ui-toolkit'; import { TooltipCellComponent } from '@vegaprotocol/ui-toolkit';
import type { AgGridReact } from 'ag-grid-react';
import type { import type {
ColDef, ColDef,
ITooltipParams, ITooltipParams,
@ -40,168 +39,164 @@ export interface LiquidityTableProps
quantum?: string | number; quantum?: string | number;
} }
export const LiquidityTable = forwardRef<AgGridReact, LiquidityTableProps>( export const LiquidityTable = ({
( symbol = '',
{ symbol = '', assetDecimalPlaces, stakeToCcyVolume, quantum, ...props }, assetDecimalPlaces,
ref stakeToCcyVolume,
) => { quantum,
const colDefs = useMemo(() => { ...props
const assetDecimalsFormatter = ({ value }: ITooltipParams) => { }: LiquidityTableProps) => {
if (!value) return '-'; const colDefs = useMemo(() => {
return `${addDecimalsFormatNumber(value, assetDecimalPlaces ?? 0)}`; const assetDecimalsFormatter = ({ value }: ITooltipParams) => {
}; if (!value) return '-';
return `${addDecimalsFormatNumber(value, assetDecimalPlaces ?? 0)}`;
};
const assetDecimalsQuantumFormatter = ({ const assetDecimalsQuantumFormatter = ({ value }: ValueFormatterParams) => {
if (!value) return '-';
return `${addDecimalsFormatNumberQuantum(
value, value,
}: ValueFormatterParams) => { assetDecimalPlaces ?? 0,
if (!value) return '-'; quantum ?? 0
return `${addDecimalsFormatNumberQuantum( )}`;
value, };
assetDecimalPlaces ?? 0,
quantum ?? 0
)}`;
};
const stakeToCcyVolumeFormatter = ({ value }: ITooltipParams) => { const stakeToCcyVolumeFormatter = ({ value }: ITooltipParams) => {
if (!value) return '-'; if (!value) return '-';
const newValue = new BigNumber(value) const newValue = new BigNumber(value)
.times(Number(stakeToCcyVolume) || 1) .times(Number(stakeToCcyVolume) || 1)
.toString(); .toString();
return `${addDecimalsFormatNumber(newValue, assetDecimalPlaces ?? 0)}`; return `${addDecimalsFormatNumber(newValue, assetDecimalPlaces ?? 0)}`;
}; };
const stakeToCcyVolumeQuantumFormatter = ({ const stakeToCcyVolumeQuantumFormatter = ({
value, value,
}: ValueFormatterParams) => { }: ValueFormatterParams) => {
if (!value) return '-'; if (!value) return '-';
const newValue = new BigNumber(value) const newValue = new BigNumber(value)
.times(Number(stakeToCcyVolume) || 1) .times(Number(stakeToCcyVolume) || 1)
.toString(); .toString();
return `${addDecimalsFormatNumberQuantum( return `${addDecimalsFormatNumberQuantum(
newValue, newValue,
assetDecimalPlaces ?? 0, assetDecimalPlaces ?? 0,
quantum ?? 0 quantum ?? 0
)}`; )}`;
}; };
const defs: ColDef[] = [ const defs: ColDef[] = [
{ {
headerName: t('Party'), headerName: t('Party'),
field: 'party.id', field: 'party.id',
headerTooltip: t( headerTooltip: t('The public key of the party making this commitment.'),
'The public key of the party making this commitment.' },
), {
headerName: t(`Commitment (${symbol})`),
field: 'commitmentAmount',
type: 'rightAligned',
headerTooltip: t(
'The amount committed to the market by this liquidity provider.'
),
valueFormatter: assetDecimalsQuantumFormatter,
tooltipValueGetter: assetDecimalsFormatter,
},
{
headerName: t(`Share`),
field: 'equityLikeShare',
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.'
),
valueFormatter: percentageFormatter,
},
{
headerName: t('Proposed fee'),
headerTooltip: t(
'The fee percentage (per trade) proposed by each liquidity provider.'
),
field: 'fee',
type: 'rightAligned',
valueFormatter: percentageFormatter,
},
{
headerName: t('Market valuation at entry'),
field: 'averageEntryValuation',
type: 'rightAligned',
headerTooltip: t(
'The valuation of the market at the time the liquidity commitment was made. Commitments made at a lower valuation earlier in the lifetime of the market would be expected to have a higher equity-like share if the market has grown. If a commitment is amended, value will reflect the average of the market valuations across the lifetime of the commitment.'
),
minWidth: 160,
valueFormatter: assetDecimalsQuantumFormatter,
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. The obligation can be met by a combination of LP orders and limit orders on the order book.`
),
valueFormatter: stakeToCcyVolumeQuantumFormatter,
tooltipValueGetter: stakeToCcyVolumeFormatter,
},
{
headerName: t('Supplied'),
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('Status'),
headerTooltip: t('The current status of this liquidity provision.'),
field: 'status',
valueFormatter: ({ value }) => {
if (!value) return value;
return LiquidityProvisionStatusMapping[
value as LiquidityProvisionStatus
];
}, },
{ },
headerName: t(`Commitment (${symbol})`), {
field: 'commitmentAmount', headerName: t('Created'),
type: 'rightAligned', headerTooltip: t(
headerTooltip: t( 'The date and time this liquidity provision was created.'
'The amount committed to the market by this liquidity provider.' ),
), field: 'createdAt',
valueFormatter: assetDecimalsQuantumFormatter, type: 'rightAligned',
tooltipValueGetter: assetDecimalsFormatter, valueFormatter: dateValueFormatter,
}, },
{ {
headerName: t(`Share`), headerName: t('Updated'),
field: 'equityLikeShare', headerTooltip: t(
type: 'rightAligned', 'The date and time this liquidity provision was last updated.'
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.' field: 'updatedAt',
), type: 'rightAligned',
valueFormatter: percentageFormatter, valueFormatter: dateValueFormatter,
}, },
{ ];
headerName: t('Proposed fee'), return defs;
headerTooltip: t( }, [assetDecimalPlaces, quantum, stakeToCcyVolume, symbol]);
'The fee percentage (per trade) proposed by each liquidity provider.'
),
field: 'fee',
type: 'rightAligned',
valueFormatter: percentageFormatter,
},
{
headerName: t('Market valuation at entry'),
field: 'averageEntryValuation',
type: 'rightAligned',
headerTooltip: t(
'The valuation of the market at the time the liquidity commitment was made. Commitments made at a lower valuation earlier in the lifetime of the market would be expected to have a higher equity-like share if the market has grown. If a commitment is amended, value will reflect the average of the market valuations across the lifetime of the commitment.'
),
minWidth: 160,
valueFormatter: assetDecimalsQuantumFormatter,
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. The obligation can be met by a combination of LP orders and limit orders on the order book.`
),
valueFormatter: stakeToCcyVolumeQuantumFormatter,
tooltipValueGetter: stakeToCcyVolumeFormatter,
},
{
headerName: t('Supplied'),
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('Status'),
headerTooltip: t('The current status of this liquidity provision.'),
field: 'status',
valueFormatter: ({ value }) => {
if (!value) return value;
return LiquidityProvisionStatusMapping[
value as LiquidityProvisionStatus
];
},
},
{
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;
}, [assetDecimalPlaces, quantum, stakeToCcyVolume, symbol]);
return ( return (
<AgGrid <AgGrid
style={{ width: '100%', height: '100%' }} style={{ width: '100%', height: '100%' }}
overlayNoRowsTemplate={t('No liquidity provisions')} overlayNoRowsTemplate={t('No liquidity provisions')}
getRowId={({ data }: { data: LiquidityProvisionData }) => data.id || ''} getRowId={({ data }: { data: LiquidityProvisionData }) => data.id || ''}
ref={ref} tooltipShowDelay={500}
tooltipShowDelay={500} defaultColDef={{
defaultColDef={{ resizable: true,
resizable: true, minWidth: 100,
minWidth: 100, tooltipComponent: TooltipCellComponent,
tooltipComponent: TooltipCellComponent, sortable: true,
sortable: true, }}
}} {...props}
{...props} columnDefs={colDefs}
columnDefs={colDefs} />
/> );
); };
}
);
export default LiquidityTable; export default LiquidityTable;