fix: deal ticket estimated uncrossing (#1636)

* fix: invalid uncrossing price

* chore: align estimated uncrossing price with size label

* fix: 0 used balance on margin and bond accounts should not be displayed

* fix: small tweaks and bugfixes

* fix: filter empty acounts

* fix: fix unit test

* fix: fix unit test

Co-authored-by: Matthew Russell <mattrussell36@gmail.com>

libs/accounts/src/lib/accounts-data-provider.ts

@@ -114,10 +114,12 @@ const getTotalBalance = (accounts: AccountFieldsFragment[]) =>
   accounts.reduce((acc, a) => acc + BigInt(a.balance), BigInt(0));
 
 export const getAccountData = (data: Account[]): AccountFields[] => {
-  return getAssetIds(data).map((assetId) => {
-    const accounts = data.filter((a) => a.asset.id === assetId);
-    return accounts && getAssetAccountAggregation(accounts, assetId);
-  });
+  return getAssetIds(data)
+    .map((assetId) => {
+      const accounts = data.filter((a) => a.asset.id === assetId);
+      return accounts && getAssetAccountAggregation(accounts, assetId);
+    })
+    .filter((a) => a.deposited !== '0'); // filter empty accounts
 };
 
 const getAssetAccountAggregation = (
@@ -150,7 +152,8 @@ const getAssetAccountAggregation = (
       deposited: balanceAccount.deposited,
       available: balanceAccount.available,
       used: a.balance,
-    }));
+    }))
+    .filter((a) => a.used !== '0');
   return { ...balanceAccount, breakdown };
 };
 

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

@@ -38,7 +38,7 @@ describe('AccountsTable', () => {
         <AccountTable rowData={singleRowData} onClickAsset={() => null} />
       );
     });
-    const expectedHeaders = ['Asset', 'Deposited', 'Used', '', ''];
+    const expectedHeaders = ['Asset', 'Total', 'Used', '', ''];
     const headers = await screen.findAllByRole('columnheader');
     expect(headers).toHaveLength(expectedHeaders.length);
     expect(

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

@@ -109,8 +109,11 @@ export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
             maxWidth={300}
           />
           <AgGridColumn
-            headerName={t('Deposited')}
+            headerName={t('Total')}
             field="deposited"
+            headerTooltip={t(
+              'This is the total amount of collateral used plus the amount available in your general account.'
+            )}
             valueFormatter={({
               value,
               data,
@@ -125,6 +128,7 @@ export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
             headerName={t('Used')}
             field="used"
             flex={2}
+            minWidth={150}
             maxWidth={500}
             headerComponentParams={progressBarHeaderComponentParams}
             cellRendererSelector={progressBarCellRendererSelector}
@@ -133,7 +137,7 @@ export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
           <AgGridColumn
             headerName=""
             field="breakdown"
-            maxWidth={150}
+            minWidth={150}
             cellRenderer={({
               value,
             }: VegaICellRendererParams<AccountFields, 'breakdown'>) => {
@@ -154,6 +158,7 @@ export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
             colId="transact"
             headerName=""
             sortable={false}
+            minWidth={250}
             cellRenderer={({
               data,
             }: VegaICellRendererParams<AccountFields>) => {

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

@@ -37,10 +37,10 @@ describe('BreakdownTable', () => {
       render(<BreakdownTable data={singleRowData} />);
     });
     const headers = await screen.findAllByRole('columnheader');
-    expect(headers).toHaveLength(5);
+    expect(headers).toHaveLength(4);
     expect(
       headers.map((h) => h.querySelector('[ref="eText"]')?.textContent?.trim())
-    ).toEqual(['Account type', 'Market', 'Used', 'Deposited', 'Balance']);
+    ).toEqual(['Account type', 'Market', 'Used', 'Balance']);
   });
 
   it('should apply correct formatting', async () => {

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

@@ -74,21 +74,6 @@ const BreakdownTable = forwardRef<AgGridReact, BreakdownTableProps>(
           cellRendererSelector={progressBarCellRendererSelector}
           valueFormatter={progressBarValueFormatter}
         />
-
-        <AgGridColumn
-          headerName={t('Deposited')}
-          field="deposited"
-          valueFormatter={({
-            value,
-            data,
-          }: VegaValueFormatterParams<AccountFields, 'deposited'>) => {
-            if (data && data.asset) {
-              return addDecimalsFormatNumber(value, data.asset.decimals);
-            }
-            return '-';
-          }}
-          maxWidth={300}
-        />
         <AgGridColumn
           headerName={t('Balance')}
           field="balance"

libs/deal-ticket/src/components/deal-ticket/deal-ticket-market-amount.tsx

@@ -17,7 +17,7 @@ export const DealTicketMarketAmount = ({
 }: DealTicketMarketAmountProps) => {
   const sizeStep = toDecimal(market?.positionDecimalPlaces);
   return (
-    <div className="flex items-center gap-4">
+    <div className="flex items-center gap-4 relative">
       <div className="flex-1">
         <FormGroup label={t('Size')} labelFor="input-order-size-market">
           <Input
@@ -44,12 +44,12 @@ export const DealTicketMarketAmount = ({
               'This market is in auction. The uncrossing price is an indication of what the price is expected to be when the auction ends.'
             )}
           >
-            <span className={'block mb-2 text-sm text-left'}>
+            <div className="absolute top-0 right-0 text-sm">
               {t(`Estimated uncrossing price`)}
-            </span>
+            </div>
           </Tooltip>
         )}
-        <span className="text-sm">
+        <div className="text-sm text-right">
           {price && quoteName ? (
             <>
               ~{price} {quoteName}
@@ -57,7 +57,7 @@ export const DealTicketMarketAmount = ({
           ) : (
             '-'
           )}
-        </span>
+        </div>
       </div>
     </div>
   );

libs/deal-ticket/src/components/deal-ticket/deal-ticket.tsx

@@ -15,8 +15,10 @@ import { ExpirySelector } from './expiry-selector';
 import type { OrderSubmissionBody } from '@vegaprotocol/wallet';
 import { OrderTimeInForce, OrderType } from '@vegaprotocol/types';
 import { getDefaultOrder } from '../deal-ticket-validation';
-import { useOrderValidation } from '../deal-ticket-validation/use-order-validation';
-import { MarketTradingMode } from '@vegaprotocol/types';
+import {
+  isMarketInAuction,
+  useOrderValidation,
+} from '../deal-ticket-validation/use-order-validation';
 
 export type TransactionStatus = 'default' | 'pending';
 
@@ -73,16 +75,15 @@ export const DealTicket = ({
   );
 
   const getPrice = () => {
-    if (
-      market.tradingMode === MarketTradingMode.TRADING_MODE_OPENING_AUCTION ||
-      market.tradingMode === MarketTradingMode.TRADING_MODE_BATCH_AUCTION
-    ) {
-      return market.data?.indicativePrice;
-    }
-    if (
-      market.tradingMode === MarketTradingMode.TRADING_MODE_MONITORING_AUCTION
-    ) {
-      return null;
+    if (isMarketInAuction(market)) {
+      //  0 can never be a valid uncrossing price as it would require there being orders on the book at that price.
+      if (
+        market.data?.indicativePrice &&
+        BigInt(market.data?.indicativePrice) !== BigInt(0)
+      ) {
+        return market.data.indicativePrice;
+      }
+      return '-';
     }
     return market.depth.lastTrade?.price;
   };

libs/deal-ticket/src/components/trading-mode-tooltip/compile-grid-data.tsx

@@ -77,7 +77,7 @@ export const compileGridData = (
         '~' +
         addDecimalsFormatNumber(
           market.data.indicativePrice,
-          market.positionDecimalPlaces
+          market.decimalPlaces
         ),
     });
   }