feat: use common formatRange function

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

@@ -11,11 +11,7 @@ import type { EstimatePositionQuery } from '@vegaprotocol/positions';
 import type { EstimateFeesQuery } from '../../hooks/__generated__/EstimateOrder';
 import { AccountBreakdownDialog } from '@vegaprotocol/accounts';
 
-import {
-  addDecimalsFormatNumber,
-  isNumeric,
-  addDecimalsFormatNumberQuantum,
-} from '@vegaprotocol/utils';
+import { formatRange, formatValue } from '@vegaprotocol/utils';
 import { marketMarginDataProvider } from '@vegaprotocol/accounts';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 
@@ -31,32 +27,6 @@ import {
 
 const emptyValue = '-';
 
-export const formatValue = (
-  value: string | number | null | undefined,
-  formatDecimals: number,
-  quantum?: string
-): string => {
-  if (!isNumeric(value)) return emptyValue;
-  if (!quantum) return addDecimalsFormatNumber(value, formatDecimals);
-  return addDecimalsFormatNumberQuantum(value, formatDecimals, quantum);
-};
-
-export const formatRange = (
-  min: string | number | null | undefined,
-  max: string | number | null | undefined,
-  formatDecimals: number,
-  quantum?: string
-) => {
-  const minFormatted = formatValue(min, formatDecimals, quantum);
-  const maxFormatted = formatValue(max, formatDecimals, quantum);
-  if (minFormatted !== maxFormatted) {
-    return `${minFormatted} - ${maxFormatted}`;
-  }
-  if (minFormatted !== emptyValue) {
-    return minFormatted;
-  }
-  return maxFormatted;
-};
 export interface DealTicketFeeDetailPros {
   label: string;
   value?: string | null | undefined;

libs/positions/src/lib/liquidation-price.tsx

@@ -1,19 +1,20 @@
 import { useEstimatePositionQuery } from './__generated__/Positions';
-
-import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
+import { formatRange } from '@vegaprotocol/utils';
 
 export const LiquidationPrice = ({
   marketId,
   openVolume,
   collateralAvailable,
   decimals,
+  quantum,
 }: {
   marketId: string;
   openVolume: string;
   collateralAvailable: string;
   decimals: number;
+  quantum: string;
 }) => {
-  const { data } = useEstimatePositionQuery({
+  const { data: currentData, previousData } = useEstimatePositionQuery({
     variables: {
       marketId,
       openVolume,
@@ -22,6 +23,7 @@ export const LiquidationPrice = ({
     fetchPolicy: 'no-cache',
     skip: !openVolume || openVolume === '0',
   });
+  const data = currentData || previousData;
   let value = '-';
 
   if (data) {
@@ -35,23 +37,10 @@ export const LiquidationPrice = ({
         /\..*/,
         ''
       );
-    const formattedBestCase =
-      bestCase && addDecimalsFormatNumber(bestCase, decimals);
-    const formattedWorstCase =
-      worstCase && addDecimalsFormatNumber(worstCase, decimals);
-    if (
-      formattedBestCase &&
-      formattedWorstCase &&
-      formattedBestCase !== formattedWorstCase
-    ) {
-      if (BigInt(bestCase) < BigInt(worstCase)) {
-        value = `${formattedBestCase} - ${formattedWorstCase}`;
-      } else {
-        value = `${formattedWorstCase} - ${formattedBestCase}`;
-      }
-    } else if (formattedBestCase) {
-      value = formattedBestCase;
-    }
+    value =
+      bestCase && worstCase && BigInt(bestCase) < BigInt(worstCase)
+        ? formatRange(bestCase, worstCase, decimals, quantum, value)
+        : formatRange(worstCase, bestCase, decimals, quantum, value);
   }
   return <span data-testid="liquidation-price">{value}</span>;
 };

libs/positions/src/lib/positions-data-providers.ts

@@ -34,6 +34,7 @@ export interface Position {
   averageEntryPrice: string;
   currentLeverage: number | undefined;
   decimals: number;
+  quantum: string;
   lossSocializationAmount: string;
   marginAccountBalance: string;
   marketDecimalPlaces: number;
@@ -73,6 +74,7 @@ export const getMetrics = (
       decimals,
       id: assetId,
       symbol: assetSymbol,
+      quantum,
     } = market.tradableInstrument.instrument.product.settlementAsset;
     const generalAccount = accounts?.find(
       (account) =>
@@ -114,6 +116,7 @@ export const getMetrics = (
       averageEntryPrice: position.averageEntryPrice,
       currentLeverage: currentLeverage ? currentLeverage.toNumber() : undefined,
       decimals,
+      quantum,
       lossSocializationAmount: position.lossSocializationAmount || '0',
       marginAccountBalance: marginAccount?.balance ?? '0',
       marketDecimalPlaces,

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

@@ -20,6 +20,7 @@ const singleRow: Position = {
   averageEntryPrice: '133',
   currentLeverage: 1.1,
   decimals: 2,
+  quantum: '0.1',
   lossSocializationAmount: '0',
   marginAccountBalance: '12345600',
   marketDecimalPlaces: 1,

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

@@ -249,6 +249,7 @@ export const PositionsTable = forwardRef<AgGridReact, Props>(
                     openVolume={data.openVolume}
                     collateralAvailable={data.totalBalance}
                     decimals={data.decimals}
+                    quantum={data.quantum}
                   />
                 );
               },

libs/utils/src/lib/format/index.ts

@@ -1,4 +1,5 @@
 export * from './date';
 export * from './number';
+export * from './range';
 export * from './size';
 export * from './strings';

libs/utils/src/lib/format/range.spec.ts

@@ -1,6 +1,6 @@
-import { formatRange, formatValue } from './deal-ticket-fee-details';
+import { formatRange, formatValue } from './range';
 
-describe('formatRange, formatValue', () => {
+describe('formatValue', () => {
   it.each([
     { v: 123000, d: 5, o: '1.23' },
     { v: 123000, d: 3, o: '123.00' },
@@ -35,7 +35,8 @@ describe('formatRange, formatValue', () => {
       expect(formatValue(v.toString(), d, q)).toStrictEqual(o);
     }
   );
-
+});
+describe('formatRange', () => {
   it.each([
     { min: 123000, max: 12300011111, d: 5, o: '1.23 - 123,000.111', q: '0.1' },
     {

libs/utils/src/lib/format/range.ts

@@ -0,0 +1,34 @@
+import {
+  addDecimalsFormatNumber,
+  addDecimalsFormatNumberQuantum,
+  isNumeric,
+} from './number';
+
+export const formatValue = (
+  value: string | number | null | undefined,
+  formatDecimals: number,
+  quantum?: string,
+  emptyValue = '-'
+): string => {
+  if (!isNumeric(value)) return emptyValue;
+  if (!quantum) return addDecimalsFormatNumber(value, formatDecimals);
+  return addDecimalsFormatNumberQuantum(value, formatDecimals, quantum);
+};
+
+export const formatRange = (
+  min: string | number | null | undefined,
+  max: string | number | null | undefined,
+  formatDecimals: number,
+  quantum?: string,
+  emptyValue = '-'
+) => {
+  const minFormatted = formatValue(min, formatDecimals, quantum);
+  const maxFormatted = formatValue(max, formatDecimals, quantum);
+  if (minFormatted !== maxFormatted) {
+    return `${minFormatted} - ${maxFormatted}`;
+  }
+  if (minFormatted !== emptyValue) {
+    return minFormatted;
+  }
+  return maxFormatted;
+};