fix(#2413): collateral table to have separate used available cells (#2436)

* fix(#2413): separate collateral used and available cells

* fix(#2413): fix accounts table test update

* fix(#2413): move progress bar in breakdown.tsx

libs/accounts/src/lib/accounts-table.spec.tsx

@@ -38,7 +38,7 @@ describe('AccountsTable', () => {
         <AccountTable rowData={singleRowData} onClickAsset={() => null} />
       );
     });
-    const expectedHeaders = ['Asset', 'Total', 'Used', '', ''];
+    const expectedHeaders = ['Asset', 'Total', 'Used', 'Available', '', ''];
     const headers = await screen.findAllByRole('columnheader');
     expect(headers).toHaveLength(expectedHeaders.length);
     expect(
@@ -56,7 +56,8 @@ describe('AccountsTable', () => {
     const expectedValues = [
       'tBTC',
       '1,256.00',
-      '1,256.001,256.00',
+      '1,256.00',
+      '1,256.00',
       'Breakdown',
       'Deposit',
     ];

libs/accounts/src/lib/accounts-table.tsx

@@ -1,21 +1,11 @@
 import { forwardRef, useState } from 'react';
-import type { ValueFormatterParams } from 'ag-grid-community';
 import {
   addDecimalsFormatNumber,
   isNumeric,
   t,
 } from '@vegaprotocol/react-helpers';
-import type {
+import type { VegaICellRendererParams } from '@vegaprotocol/ui-toolkit';
-  ValueProps,
+import { Button, ButtonLink, Dialog } from '@vegaprotocol/ui-toolkit';
-  VegaICellRendererParams,
-} from '@vegaprotocol/ui-toolkit';
-import {
-  Button,
-  ButtonLink,
-  Dialog,
-  Intent,
-  progressBarCellRendererSelector,
-} from '@vegaprotocol/ui-toolkit';
 import { TooltipCellComponent } from '@vegaprotocol/ui-toolkit';
 import { AgGridDynamic as AgGrid } from '@vegaprotocol/ui-toolkit';
 import { AgGridColumn } from 'ag-grid-react';
@@ -25,33 +15,6 @@ import type { VegaValueFormatterParams } from '@vegaprotocol/ui-toolkit';
 import BreakdownTable from './breakdown-table';
 import type { AccountFields } from './accounts-data-provider';
 
-export const progressBarValueFormatter = ({
-  data,
-  node,
-}: ValueFormatterParams): ValueProps['valueFormatted'] | undefined => {
-  if (!data || node?.rowPinned) {
-    return undefined;
-  }
-  const min = BigInt(data.used);
-  const mid = BigInt(data.available);
-  const max = BigInt(data.deposited);
-  const range = max > min ? max : min;
-  return {
-    low: addDecimalsFormatNumber(min.toString(), data.asset.decimals, 4),
-    high: addDecimalsFormatNumber(mid.toString(), data.asset.decimals, 4),
-    value: range ? Number((min * BigInt(100)) / range) : 0,
-    intent: Intent.Warning,
-  };
-};
-
-export const progressBarHeaderComponentParams = {
-  template:
-    '<div class="ag-cell-label-container" role="presentation">' +
-    `  <span>${t('Available')}</span>` +
-    '  <span ref="eText" class="ag-header-cell-text"></span>' +
-    '</div>',
-};
-
 export interface GetRowsParams extends Omit<IGetRowsParams, 'successCallback'> {
   successCallback(rowsThisBlock: AccountFields[], lastRow?: number): void;
 }
@@ -134,12 +97,36 @@ export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
           <AgGridColumn
             headerName={t('Used')}
             field="used"
-            flex={2}
+            headerTooltip={t(
-            minWidth={150}
+              'This is the amount of collateral used from your general account.'
-            maxWidth={500}
+            )}
-            headerComponentParams={progressBarHeaderComponentParams}
+            valueFormatter={({
-            cellRendererSelector={progressBarCellRendererSelector}
+              value,
-            valueFormatter={progressBarValueFormatter}
+              data,
+            }: VegaValueFormatterParams<AccountFields, 'used'>) =>
+              data &&
+              data.asset &&
+              isNumeric(value) &&
+              addDecimalsFormatNumber(value, data.asset.decimals)
+            }
+            maxWidth={300}
+          />
+          <AgGridColumn
+            headerName={t('Available')}
+            field="available"
+            headerTooltip={t(
+              'This is the amount of collateral available in your general account.'
+            )}
+            valueFormatter={({
+              value,
+              data,
+            }: VegaValueFormatterParams<AccountFields, 'available'>) =>
+              data &&
+              data.asset &&
+              isNumeric(value) &&
+              addDecimalsFormatNumber(value, data.asset.decimals)
+            }
+            maxWidth={300}
           />
           <AgGridColumn
             headerName=""

libs/accounts/src/lib/breakdown-table.tsx

@@ -5,19 +5,47 @@ import {
   PriceCell,
   t,
 } from '@vegaprotocol/react-helpers';
-import type { VegaValueFormatterParams } from '@vegaprotocol/ui-toolkit';
 import {
   AgGridDynamic as AgGrid,
+  Intent,
   progressBarCellRendererSelector,
 } from '@vegaprotocol/ui-toolkit';
 import { AgGridColumn } from 'ag-grid-react';
 import type { AgGridReact, AgGridReactProps } from 'ag-grid-react';
 import type { AccountFields } from './accounts-data-provider';
 import { AccountTypeMapping } from '@vegaprotocol/types';
-import {
+import type {
-  progressBarHeaderComponentParams,
+  ValueProps,
-  progressBarValueFormatter,
+  VegaValueFormatterParams,
-} from './accounts-table';
+} from '@vegaprotocol/ui-toolkit';
+import type { ValueFormatterParams } from 'ag-grid-community';
+
+export const progressBarValueFormatter = ({
+  data,
+  node,
+}: ValueFormatterParams): ValueProps['valueFormatted'] | undefined => {
+  if (!data || node?.rowPinned) {
+    return undefined;
+  }
+  const min = BigInt(data.used);
+  const mid = BigInt(data.available);
+  const max = BigInt(data.deposited);
+  const range = max > min ? max : min;
+  return {
+    low: addDecimalsFormatNumber(min.toString(), data.asset.decimals, 4),
+    high: addDecimalsFormatNumber(mid.toString(), data.asset.decimals, 4),
+    value: range ? Number((min * BigInt(100)) / range) : 0,
+    intent: Intent.Warning,
+  };
+};
+
+export const progressBarHeaderComponentParams = {
+  template:
+    '<div class="ag-cell-label-container" role="presentation">' +
+    `  <span>${t('Available')}</span>` +
+    '  <span ref="eText" class="ag-header-cell-text"></span>' +
+    '</div>',
+};
 
 interface BreakdownTableProps extends AgGridReactProps {
   data: AccountFields[] | null;