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 35979d417..cd6b19c3e 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 @@ -11,6 +11,7 @@ import { t, toBigNum, } from '@vegaprotocol/react-helpers'; +import type { VegaValueFormatterParams } from '@vegaprotocol/ui-toolkit'; import type * as Schema from '@vegaprotocol/types'; import { AsyncRenderer, @@ -18,11 +19,7 @@ import { PriceCellChange, TooltipCellComponent, } from '@vegaprotocol/ui-toolkit'; -import type { - GetRowIdParams, - RowClickedEvent, - ValueFormatterParams, -} from 'ag-grid-community'; +import type { GetRowIdParams, RowClickedEvent } from 'ag-grid-community'; import 'ag-grid-community/dist/styles/ag-grid.css'; import 'ag-grid-community/dist/styles/ag-theme-alpine.css'; import { AgGridColumn } from 'ag-grid-react'; @@ -115,19 +112,26 @@ export const MarketList = () => { headerName={t('Last Price')} headerTooltip={t('Latest price for this market')} field="data.markPrice" - valueFormatter={({ value, data }: ValueFormatterParams) => - formatWithAsset( - value, - data.tradableInstrument.instrument.product.settlementAsset - ) + valueFormatter={({ + value, + data, + }: VegaValueFormatterParams) => + value && data + ? formatWithAsset( + value, + data.tradableInstrument.instrument.product.settlementAsset + ) + : '-' } /> { - if (data.candles) { + cellRenderer={({ + data, + }: VegaValueFormatterParams) => { + if (data && data.candles) { const prices = data.candles.map((candle) => candle.close); return ( { decimalPlaces={data?.decimalPlaces} /> ); - } else return
{t('No data')}
; + } else return
{t('-')}
; }} /> - `${addDecimalsFormatNumber( - value, - data.tradableInstrument.instrument.product.settlementAsset - .decimals - )} (${displayChange(data.volumeChange)})` + valueFormatter={({ + value, + data, + }: VegaValueFormatterParams) => + value && data + ? `${addDecimalsFormatNumber( + value, + data.tradableInstrument.instrument.product.settlementAsset + .decimals + )} (${displayChange(data.volumeChange)})` + : '-' } headerTooltip={t('The trade volume over the last 24h')} /> @@ -155,11 +164,16 @@ export const MarketList = () => { - formatWithAsset( - value, - data.tradableInstrument.instrument.product.settlementAsset - ) + valueFormatter={({ + value, + data, + }: VegaValueFormatterParams) => + data && value + ? formatWithAsset( + value.toString(), + data.tradableInstrument.instrument.product.settlementAsset + ) + : '-' } headerTooltip={t( 'The amount of funds allocated to provide liquidity' @@ -169,11 +183,16 @@ export const MarketList = () => { - formatWithAsset( - value, - data.tradableInstrument.instrument.product.settlementAsset - ) + valueFormatter={({ + value, + data, + }: VegaValueFormatterParams) => + data && value + ? 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.' @@ -182,15 +201,21 @@ export const MarketList = () => { { - const roundedPercentage = - parseInt( - (data.liquidityCommitted / parseFloat(data.target)).toFixed(0) - ) * 100; - const display = Number.isNaN(roundedPercentage) - ? 'N/A' - : formatNumberPercentage(toBigNum(roundedPercentage, 2)); - return display; + valueFormatter={({ + data, + }: VegaValueFormatterParams) => { + if (data) { + const roundedPercentage = + parseInt( + (data.liquidityCommitted / parseFloat(data.target)).toFixed( + 0 + ) + ) * 100; + const display = Number.isNaN(roundedPercentage) + ? 'N/A' + : formatNumberPercentage(toBigNum(roundedPercentage, 2)); + return display; + } else return '-'; }} headerTooltip={t('% Target stake met')} /> @@ -198,8 +223,10 @@ export const MarketList = () => { - `${value.factors.liquidityFee}%` + valueFormatter={({ + value, + }: VegaValueFormatterParams) => + value ? `${value.factors.liquidityFee}%` : '-' } headerTooltip={t('Fee level for this market')} /> diff --git a/libs/liquidity/src/lib/markets-liquidity-provider.ts b/libs/liquidity/src/lib/markets-liquidity-provider.ts index 2c510e9c6..7f7dd5a0a 100644 --- a/libs/liquidity/src/lib/markets-liquidity-provider.ts +++ b/libs/liquidity/src/lib/markets-liquidity-provider.ts @@ -38,7 +38,13 @@ export interface FeeLevels { } export type Market = MarketWithData & - MarketWithCandles & { feeLevels: FeeLevels[]; target: string }; + MarketWithCandles & { + feeLevels: FeeLevels[]; + target: string; + dayVolume: string; + liquidityCommitted: number; + volumeChange: string; + }; export interface Markets { markets: Market[];