fix(trading): use asset decimals to format liquidation price in posions table (#4787)

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

libs/deal-ticket/src/components/deal-ticket/deal-ticket-stop-order.spec.tsx

@@ -84,6 +84,7 @@ const ocoPostfix = (id: string, postfix = true) => (postfix ? `${id}-oco` : id);
 
 const mockDataProvider = jest.fn((...args) => ({
   data: Array(0),
+  reload: jest.fn(),
 }));
 jest.mock('@vegaprotocol/data-provider', () => ({
   ...jest.requireActual('@vegaprotocol/data-provider'),
@@ -473,6 +474,7 @@ describe('StopOrder', () => {
 
   it('shows limit of active stop orders number', async () => {
     mockDataProvider.mockReturnValue({
+      reload: jest.fn(),
       data: Array(4),
     });
     render(generateJsx());
@@ -484,6 +486,7 @@ describe('StopOrder', () => {
 
   it('counts oco as two orders', async () => {
     mockDataProvider.mockReturnValue({
+      reload: jest.fn(),
       data: Array(3),
     });
     render(generateJsx());

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

@@ -7,13 +7,21 @@ export const LiquidationPrice = ({
   marketId,
   openVolume,
   collateralAvailable,
-  marketDecimalPlaces,
+  decimalPlaces,
+  formatDecimals,
 }: {
   marketId: string;
   openVolume: string;
   collateralAvailable: string;
-  marketDecimalPlaces: number;
+  decimalPlaces: number;
+  formatDecimals: number;
 }) => {
+  // NOTE!
+  //
+  // The estimate order query API gives us the liquidation price unformatted but expecting to be converted
+  // using asset decimal placse.
+  //
+  // We need to convert it with asset decimals, but display it formatted with market decimals precision until the API changes.
   const { data: currentData, previousData } = useEstimatePositionQuery({
     variables: {
       marketId,
@@ -43,8 +51,8 @@ export const LiquidationPrice = ({
       /\..*/,
       ''
     );
-  worstCase = addDecimalsFormatNumber(worstCase, marketDecimalPlaces);
+  worstCase = addDecimalsFormatNumber(worstCase, decimalPlaces, formatDecimals);
-  bestCase = addDecimalsFormatNumber(bestCase, marketDecimalPlaces);
+  bestCase = addDecimalsFormatNumber(bestCase, decimalPlaces, formatDecimals);
 
   return (
     <Tooltip
@@ -53,11 +61,11 @@ export const LiquidationPrice = ({
           <tbody>
             <tr>
               <th>{t('Worst case')}</th>
-              <td className="text-right font-mono pl-2">{worstCase}</td>
+              <td className="pl-2 font-mono text-right">{worstCase}</td>
             </tr>
             <tr>
               <th>{t('Best case')}</th>
-              <td className="text-right font-mono pl-2">{bestCase}</td>
+              <td className="pl-2 font-mono text-right">{bestCase}</td>
             </tr>
           </tbody>
         </table>

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

@@ -339,12 +339,16 @@ export const PositionsTable = ({
               if (!data) {
                 return '-';
               }
+              // The estimate order query API gives us the liquidation price unformatted but expecting
+              // conversion using asset decimals. We need to convert it with asset decimals, but format
+              // it with market decimals precision until the API changes.
               return (
                 <LiquidationPrice
                   marketId={data.marketId}
                   openVolume={data.openVolume}
                   collateralAvailable={data.totalBalance}
-                  marketDecimalPlaces={data.marketDecimalPlaces}
+                  decimalPlaces={data.assetDecimals}
+                  formatDecimals={data.marketDecimalPlaces}
                 />
               );
             },