feat(trading): pin collateral row (#3218)

apps/trading-e2e/src/integration/trading-accounts.cy.ts

@@ -10,7 +10,7 @@ beforeEach(() => {
 
 describe('accounts', { tags: '@smoke' }, () => {
   it('renders accounts', () => {
-    const tradingAccountRowId = '[row-id="asset-0"]';
+    const tradingAccountRowId = '[row-id="t-0"]';
     cy.getByTestId('Collateral').click();
 
     cy.getByTestId('tab-accounts').should('be.visible');
@@ -44,9 +44,9 @@ describe('accounts', { tags: '@smoke' }, () => {
   describe('sorting by ag-grid columns should work well', () => {
     it('sorting by asset', () => {
       cy.getByTestId('Collateral').click();
-      const marketsSortedDefault = ['tBTC', 'AST0', 'tEURO', 'tDAI', 'tBTC'];
-      const marketsSortedAsc = ['AST0', 'tBTC', 'tBTC', 'tDAI', 'tEURO'];
-      const marketsSortedDesc = ['tEURO', 'tDAI', 'tBTC', 'tBTC', 'AST0'];
+      const marketsSortedDefault = ['tBTC', 'tEURO', 'tDAI', 'tBTC'];
+      const marketsSortedAsc = ['tBTC', 'tBTC', 'tDAI', 'tEURO'];
+      const marketsSortedDesc = ['tEURO', 'tDAI', 'tBTC', 'tBTC'];
       checkSorting(
         'asset.symbol',
         marketsSortedDefault,
@@ -59,7 +59,6 @@ describe('accounts', { tags: '@smoke' }, () => {
       cy.getByTestId('Collateral').click();
       const marketsSortedDefault = [
         '1,000.00002',
-        '100,001.01',
         '1,000.01',
         '1,000.00',
         '1,000.00001',
@@ -69,10 +68,8 @@ describe('accounts', { tags: '@smoke' }, () => {
         '1,000.00001',
         '1,000.00002',
         '1,000.01',
-        '100,001.01',
       ];
       const marketsSortedDesc = [
-        '100,001.01',
         '1,000.01',
         '1,000.00002',
         '1,000.00001',
@@ -90,7 +87,6 @@ describe('accounts', { tags: '@smoke' }, () => {
       cy.getByTestId('Collateral').click();
       const marketsSortedDefault = [
         '0.000.00%',
-        '1.010.00%',
         '0.010.00%',
         '0.000.00%',
         '0.000.00%',
@@ -100,10 +96,8 @@ describe('accounts', { tags: '@smoke' }, () => {
         '0.000.00%',
         '0.000.00%',
         '0.010.00%',
-        '1.010.00%',
       ];
       const marketsSortedDesc = [
-        '1.010.00%',
         '0.010.00%',
         '0.000.00%',
         '0.000.00%',
@@ -121,7 +115,6 @@ describe('accounts', { tags: '@smoke' }, () => {
       cy.getByTestId('Collateral').click();
       const marketsSortedDefault = [
         '1,000.00002',
-        '100,001.01',
         '1,000.01',
         '1,000.00',
         '1,000.00001',
@@ -131,10 +124,8 @@ describe('accounts', { tags: '@smoke' }, () => {
         '1,000.00001',
         '1,000.00002',
         '1,000.01',
-        '100,001.01',
       ];
       const marketsSortedDesc = [
-        '100,001.01',
         '1,000.01',
         '1,000.00002',
         '1,000.00001',

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

@@ -10,7 +10,6 @@ import type { AccountFields } from './accounts-data-provider';
 import { aggregatedAccountsDataProvider } from './accounts-data-provider';
 import type { PinnedAsset } from './accounts-table';
 import { AccountTable } from './accounts-table';
-import type { RowHeightParams } from 'ag-grid-community';
 
 interface AccountManagerProps {
   partyId: string;
@@ -50,10 +49,6 @@ export const AccountManager = ({
     disabled: noBottomPlaceholder,
   });
 
-  const getRowHeight = useCallback(
-    (params: RowHeightParams) => (params.node.rowPinned ? 32 : 22),
-    []
-  );
   return (
     <div className="relative h-full">
       <AccountTable
@@ -66,7 +61,6 @@ export const AccountManager = ({
         suppressLoadingOverlay
         suppressNoRowsOverlay
         pinnedAsset={pinnedAsset}
-        getRowHeight={getRowHeight}
         {...bottomPlaceholderProps}
       />
       <div className="pointer-events-none absolute inset-0">

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

@@ -1,4 +1,4 @@
-import { forwardRef, useMemo, useState } from 'react';
+import { forwardRef, useCallback, useMemo, useState } from 'react';
 import {
   addDecimalsFormatNumber,
   isNumeric,
@@ -16,7 +16,12 @@ import {
   CenteredGridCellWrapper,
 } from '@vegaprotocol/datagrid';
 import { AgGridColumn } from 'ag-grid-react';
-import type { IDatasource, IGetRowsParams, RowNode } from 'ag-grid-community';
+import type {
+  IDatasource,
+  IGetRowsParams,
+  RowHeightParams,
+  RowNode,
+} from 'ag-grid-community';
 import type { AgGridReact, AgGridReactProps } from 'ag-grid-react';
 import BreakdownTable from './breakdown-table';
 import type { AccountFields } from './accounts-data-provider';
@@ -108,17 +113,31 @@ export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
           };
         }
       }
-      return undefined;
+      return currentPinnedAssetRow;
     }, [pinnedAssetId, props.pinnedAsset, props.rowData]);
 
+    const getRowHeight = useCallback(
+      (params: RowHeightParams) =>
+        params.node.rowPinned &&
+        params.data.asset.id === pinnedAssetId &&
+        new BigNumber(params.data.total).isLessThanOrEqualTo(0)
+          ? 32
+          : 22,
+      [pinnedAssetId]
+    );
+
     return (
       <>
         <AgGrid
+          {...props}
           style={{ width: '100%', height: '100%' }}
           overlayNoRowsTemplate={t('No accounts')}
           getRowId={({ data }: { data: AccountFields }) => data.asset.id}
           ref={ref}
           tooltipShowDelay={500}
+          rowData={props.rowData?.filter(
+            (data) => data.asset.id !== pinnedAssetId
+          )}
           defaultColDef={{
             flex: 1,
             resizable: true,
@@ -126,7 +145,7 @@ export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
             sortable: true,
             comparator: accountValuesComparator,
           }}
-          {...props}
+          getRowHeight={getRowHeight}
           pinnedTopRowData={pinnedAssetRow ? [pinnedAssetRow] : undefined}
         >
           <AgGridColumn