From a71f40956bc0d057bd94093d68c325eb0bd94f32 Mon Sep 17 00:00:00 2001
From: "m.ray" <16125548+MadalinaRaicu@users.noreply.github.com>
Date: Fri, 7 Oct 2022 16:19:01 +0100
Subject: [PATCH] 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>
---
 .../src/lib/accounts-data-provider.ts         | 13 ++++++----
 libs/accounts/src/lib/accounts-table.spec.tsx |  2 +-
 libs/accounts/src/lib/accounts-table.tsx      |  9 +++++--
 .../accounts/src/lib/breakdown-table.spec.tsx |  4 +--
 libs/accounts/src/lib/breakdown-table.tsx     | 15 -----------
 .../deal-ticket/deal-ticket-market-amount.tsx | 10 ++++----
 .../components/deal-ticket/deal-ticket.tsx    | 25 ++++++++++---------
 .../compile-grid-data.tsx                     |  2 +-
 8 files changed, 37 insertions(+), 43 deletions(-)

diff --git a/libs/accounts/src/lib/accounts-data-provider.ts b/libs/accounts/src/lib/accounts-data-provider.ts
index 97c61475e..8a381109d 100644
--- a/libs/accounts/src/lib/accounts-data-provider.ts
+++ b/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 };
 };
 
diff --git a/libs/accounts/src/lib/accounts-table.spec.tsx b/libs/accounts/src/lib/accounts-table.spec.tsx
index 3a7fcb152..254a7b0c4 100644
--- a/libs/accounts/src/lib/accounts-table.spec.tsx
+++ b/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(
diff --git a/libs/accounts/src/lib/accounts-table.tsx b/libs/accounts/src/lib/accounts-table.tsx
index 48a7e41ed..aeb25886b 100644
--- a/libs/accounts/src/lib/accounts-table.tsx
+++ b/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>) => {
diff --git a/libs/accounts/src/lib/breakdown-table.spec.tsx b/libs/accounts/src/lib/breakdown-table.spec.tsx
index 36be0d297..59d1016f2 100644
--- a/libs/accounts/src/lib/breakdown-table.spec.tsx
+++ b/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 () => {
diff --git a/libs/accounts/src/lib/breakdown-table.tsx b/libs/accounts/src/lib/breakdown-table.tsx
index fc7e7a12d..fdf809fe0 100644
--- a/libs/accounts/src/lib/breakdown-table.tsx
+++ b/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"
diff --git a/libs/deal-ticket/src/components/deal-ticket/deal-ticket-market-amount.tsx b/libs/deal-ticket/src/components/deal-ticket/deal-ticket-market-amount.tsx
index 91d0d7c42..11c134ae8 100644
--- a/libs/deal-ticket/src/components/deal-ticket/deal-ticket-market-amount.tsx
+++ b/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>
   );
diff --git a/libs/deal-ticket/src/components/deal-ticket/deal-ticket.tsx b/libs/deal-ticket/src/components/deal-ticket/deal-ticket.tsx
index eed0852d1..7c9a94486 100644
--- a/libs/deal-ticket/src/components/deal-ticket/deal-ticket.tsx
+++ b/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;
   };
diff --git a/libs/deal-ticket/src/components/trading-mode-tooltip/compile-grid-data.tsx b/libs/deal-ticket/src/components/trading-mode-tooltip/compile-grid-data.tsx
index 0f15ec962..ebd9fe270 100644
--- a/libs/deal-ticket/src/components/trading-mode-tooltip/compile-grid-data.tsx
+++ b/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
         ),
     });
   }