feat(deal-ticket): show worst case instead of ranges in estimated values (#4870)

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

@@ -12,6 +12,7 @@ import { formatRange, formatValue } from '@vegaprotocol/utils';
 import { marketMarginDataProvider } from '@vegaprotocol/accounts';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import * as Schema from '@vegaprotocol/types';
 
 import {
   MARGIN_DIFF_TOOLTIP_TEXT,
@@ -87,6 +88,7 @@ export interface DealTicketMarginDetailsProps {
   onMarketClick?: (marketId: string, metaKey?: boolean) => void;
   assetSymbol: string;
   positionEstimate: EstimatePositionQuery['estimatePosition'];
+  side: Schema.Side;
 }
 
 export const DealTicketMarginDetails = ({
@@ -96,6 +98,7 @@ export const DealTicketMarginDetails = ({
   market,
   onMarketClick,
   positionEstimate,
+  side,
 }: DealTicketMarginDetailsProps) => {
   const [breakdownDialog, setBreakdownDialog] = useState(false);
   const { pubKey: partyId } = useVegaWallet();
@@ -165,10 +168,7 @@ export const DealTicketMarginDetails = ({
             : '0',
           assetDecimals
         )}
-        formattedValue={formatRange(
+        formattedValue={formatValue(
-          deductionFromCollateralBestCase > 0
-            ? deductionFromCollateralBestCase.toString()
-            : '0',
           deductionFromCollateralWorstCase > 0
             ? deductionFromCollateralWorstCase.toString()
             : '0',
@@ -187,8 +187,7 @@ export const DealTicketMarginDetails = ({
           marginEstimate?.worstCase.initialLevel,
           assetDecimals
         )}
-        formattedValue={formatRange(
+        formattedValue={formatValue(
-          marginEstimate?.bestCase.initialLevel,
           marginEstimate?.worstCase.initialLevel,
           assetDecimals,
           quantum
@@ -200,6 +199,7 @@ export const DealTicketMarginDetails = ({
   }
 
   let liquidationPriceEstimate = emptyValue;
+  let liquidationPriceEstimateRange = emptyValue;
 
   if (liquidationEstimate) {
     const liquidationEstimateBestCaseIncludingBuyOrders = BigInt(
@@ -209,8 +209,7 @@ export const DealTicketMarginDetails = ({
       liquidationEstimate.bestCase.including_sell_orders.replace(/\..*/, '')
     );
     const liquidationEstimateBestCase =
-      liquidationEstimateBestCaseIncludingBuyOrders >
+      side === Schema.Side.SIDE_BUY
-      liquidationEstimateBestCaseIncludingSellOrders
         ? liquidationEstimateBestCaseIncludingBuyOrders
         : liquidationEstimateBestCaseIncludingSellOrders;
 
@@ -221,14 +220,19 @@ export const DealTicketMarginDetails = ({
       liquidationEstimate.worstCase.including_sell_orders.replace(/\..*/, '')
     );
     const liquidationEstimateWorstCase =
-      liquidationEstimateWorstCaseIncludingBuyOrders >
+      side === Schema.Side.SIDE_BUY
-      liquidationEstimateWorstCaseIncludingSellOrders
         ? liquidationEstimateWorstCaseIncludingBuyOrders
         : liquidationEstimateWorstCaseIncludingSellOrders;
 
     // The estimate order query API gives us the liquidation price in formatted by asset decimals.
     // We need to calculate it with asset decimals, but display it with market decimals precision until the API changes.
-    liquidationPriceEstimate = formatRange(
+    liquidationPriceEstimate = formatValue(
+      liquidationEstimateWorstCase.toString(),
+      assetDecimals,
+      undefined,
+      market.decimalPlaces
+    );
+    liquidationPriceEstimateRange = formatRange(
       (liquidationEstimateBestCase < liquidationEstimateWorstCase
         ? liquidationEstimateBestCase
         : liquidationEstimateWorstCase
@@ -287,8 +291,7 @@ export const DealTicketMarginDetails = ({
                   noUnderline
                 >
                   <div className="font-mono text-right">
-                    {formatRange(
+                    {formatValue(
-                      marginRequiredBestCase,
                       marginRequiredWorstCase,
                       assetDecimals,
                       quantum
@@ -346,7 +349,7 @@ export const DealTicketMarginDetails = ({
       {projectedMargin}
       <KeyValue
         label={t('Liquidation')}
-        value={liquidationPriceEstimate}
+        value={liquidationPriceEstimateRange}
         formattedValue={liquidationPriceEstimate}
         symbol={quoteName}
         labelDescription={LIQUIDATION_PRICE_ESTIMATE_TOOLTIP_TEXT}

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

@@ -676,6 +676,7 @@ export const DealTicket = ({
         )}
       </Button>
       <DealTicketMarginDetails
+        side={normalizedOrder.side}
         onMarketClick={onMarketClick}
         assetSymbol={assetSymbol}
         marginAccountBalance={marginAccountBalance}