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

* 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

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

@@ -1,34 +1,35 @@
-import { useCallback, useState } from 'react';
+import { DApp, useLinks } from '@vegaprotocol/environment';
-import { AgGridColumn } from 'ag-grid-react';
+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 {
+import { AgGridColumn } from 'ag-grid-react';
-  t,
+import { useCallback, useState } from 'react';
-  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 { 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(