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

feat: add more data columns to lp dashboard (#2337)

Browse Source 
* chore: rename column for liquidityCommited on LP market list page

* chore: organise imports in market-list.tsx

* feat: add column for last/mark price to lp-dashboard

* feat: add column for 24h change to lp-dashboard

* feat: add column for market type in lp-dashboard

* feat: add column for market code to lp-dashboard
This commit is contained in:
Ciaran McGhie 2022-12-08 11:18:37 +00:00 committed by GitHub
parent f1f775268f
commit 088c399b9f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 67 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
apps/liquidity-provision-dashboard/src/app/components/dashboard/market-list/market-list.tsx
View File

@ -1,34 +1,35 @@
import { useCallback, useState } from 'react';
import { AgGridColumn } from 'ag-grid-react';
import { DApp, useLinks } from '@vegaprotocol/environment';
import type { Market } from '@vegaprotocol/liquidity';
import {
displayChange,
formatWithAsset,
useMarketsLiquidity,
} from '@vegaprotocol/liquidity';
import {
addDecimalsFormatNumber,
formatNumberPercentage,
t,
toBigNum,
} from '@vegaprotocol/react-helpers';
import type { Schema } from '@vegaprotocol/types';
import {
AsyncRenderer,
Icon,
PriceCellChange,
TooltipCellComponent,
} from '@vegaprotocol/ui-toolkit';
import type {
ValueFormatterParams,
GetRowIdParams,
RowClickedEvent,
ValueFormatterParams,
} 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,
formatNumberPercentage,
toBigNum,
} from '@vegaprotocol/react-helpers';
import {
Icon,
AsyncRenderer,
TooltipCellComponent,
} from '@vegaprotocol/ui-toolkit';
import type { Market } from '@vegaprotocol/liquidity';
import {
useMarketsLiquidity,
formatWithAsset,
displayChange,
} from '@vegaprotocol/liquidity';
import type { Schema } from '@vegaprotocol/types';
import { DApp, useLinks } from '@vegaprotocol/environment';
import { AgGridColumn } from 'ag-grid-react';
import { useCallback, useState } from 'react';
import { HealthBar } from '../../health-bar';
import { Grid } from '../../grid';
import { HealthBar } from '../../health-bar';
import { HealthDialog } from '../../health-dialog';
import { Status } from '../../status';
@ -96,6 +97,48 @@ export const MarketList = () => {
headerTooltip={t('The market name and settlement asset')}
/>
<AgGridColumn
headerName={t('Market Code')}
headerTooltip={t(
'The market code is a unique identifier for this market'
)}
field="tradableInstrument.instrument.code"
/>
<AgGridColumn
headerName={t('Type')}
headerTooltip={t('Type')}
field="tradableInstrument.instrument.product.__typename"
/>
<AgGridColumn
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
)
}
/>
<AgGridColumn
headerName={t('Change (24h)')}
headerTooltip={t('Change in price over the last 24h')}
cellRenderer={({ data }: { data: Market }) => {
if (data.candles) {
const prices = data.candles.map((candle) => candle.close);
return (
<PriceCellChange
candles={prices}
decimalPlaces={data?.decimalPlaces}
/>
);
} else return <div>{t('No data')}</div>;
}}
/>
<AgGridColumn
headerName={t('Volume (24h)')}
field="dayVolume"
@ -110,7 +153,7 @@ export const MarketList = () => {
/>
<AgGridColumn
headerName={t('Committed bond')}
headerName={t('Total staked by LPs')}
field="liquidityCommitted"
valueFormatter={({ value, data }: ValueFormatterParams) =>
formatWithAsset(