fix: fixes around formatting numbers and arrange edit order dialog (#2178)

* fix: update size and order edit dialog

* fix: update decimals on position notional size

* fix: normalize values

* fix: fix positions unit tests

* fix: remove liquidation price

* fix: positions linting issue

* fix: remove liquidation price test

* fix: remove total summary row

* fix: remove comments

* fix: cypress test to not show trailing 0s

* fix: add back liq. price est as cell only

* fix: remove not used params

* fix: positions formatting in select market and format account numbers

* fix: remove import

* fix: remove redundant comment

* fix: fix unit tests

* fix: fix cypress tests

apps/trading-e2e/src/integration/market-info.cy.ts

@@ -81,8 +81,8 @@ describe('market info is displayed', { tags: '@smoke' }, () => {
       'Contract address',
       '0x0158031158Bb4dF2AD02eAA31e8963E84EA978a4'
     );
-    validateMarketDataRow(8, 'Withdrawal threshold', '0.00050');
+    validateMarketDataRow(8, 'Withdrawal threshold', '0.0005');
-    validateMarketDataRow(9, 'Lifetime limit', '1,230.00000');
+    validateMarketDataRow(9, 'Lifetime limit', '1,230');
   });
 
   it('metadata displayed', () => {
@@ -184,7 +184,7 @@ describe('market info is displayed', { tags: '@smoke' }, () => {
       .and('contain', '/governance/market-0');
     cy.getByTestId(externalLink)
       .eq(1)
-      .should('have.text', 'Propose a change to this market')
+      .should('have.text', 'Propose a change to market')
       .and('have.attr', 'href')
       .and('contain', '/governance/propose/update-market');
   });

apps/trading-e2e/src/integration/trading-accounts.cy.ts

@@ -28,6 +28,6 @@ describe('accounts', { tags: '@smoke' }, () => {
     cy.getByTestId('tab-accounts')
       .get(tradingAccountRowId)
       .find('[col-id="deposited"]')
-      .should('have.text', '1,000.00000');
+      .should('have.text', '1,000');
   });
 });

apps/trading/components/select-market/select-market-columns.tsx

@@ -554,7 +554,13 @@ export const columnsPositionMarkets = (
     {
       kind: ColumnKind.Position,
       value: (
-        <p className={signedNumberCssClass(openVolume || '')}>{openVolume}</p>
+        <p className={signedNumberCssClass(openVolume || '')}>
+          {openVolume &&
+            addDecimalsNormalizeNumber(
+              openVolume,
+              market.positionDecimalPlaces
+            )}
+        </p>
       ),
       className: `${cellClassNames} hidden xxl:table-cell font-mono`,
       onlyOnDetailed: true,

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

@@ -55,8 +55,8 @@ describe('AccountsTable', () => {
     const cells = await screen.findAllByRole('gridcell');
     const expectedValues = [
       'tBTC',
-      '1,256.00000',
+      '1,256',
-      '1,256.00001,256.0000',
+      '1,2561,256',
       'Breakdown',
       'Deposit',
     ];

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

@@ -2,7 +2,7 @@ import { forwardRef, useState } from 'react';
 import type { ValueFormatterParams } from 'ag-grid-community';
 import type { Asset } from '@vegaprotocol/assets';
 import {
-  addDecimalsFormatNumber,
+  addDecimalsNormalizeNumber,
   isNumeric,
   t,
 } from '@vegaprotocol/react-helpers';
@@ -38,8 +38,8 @@ export const progressBarValueFormatter = ({
   const max = BigInt(data.deposited);
   const range = max > min ? max : min;
   return {
-    low: addDecimalsFormatNumber(min.toString(), data.asset.decimals, 4),
+    low: addDecimalsNormalizeNumber(min.toString(), data.asset.decimals, 4),
-    high: addDecimalsFormatNumber(mid.toString(), data.asset.decimals, 4),
+    high: addDecimalsNormalizeNumber(mid.toString(), data.asset.decimals, 4),
     value: range ? Number((min * BigInt(100)) / range) : 0,
     intent: Intent.Warning,
   };
@@ -125,7 +125,7 @@ export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
               data &&
               data.asset &&
               isNumeric(value) &&
-              addDecimalsFormatNumber(value, data.asset.decimals)
+              addDecimalsNormalizeNumber(value, data.asset.decimals)
             }
             maxWidth={300}
           />

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

@@ -51,9 +51,9 @@ describe('BreakdownTable', () => {
     const expectedValues = [
       'Margin',
       'BTCUSD Monthly (30 Jun 2022)',
-      '1,256.00001,256.0000',
+      '1,2561,256',
-      '1,256.00000',
+      '1,256',
-      '1,256.00000',
+      '1,256',
     ];
     cells.forEach((cell, i) => {
       expect(cell).toHaveTextContent(expectedValues[i]);

libs/assets/src/lib/asset-details-dialog.spec.tsx

@@ -83,8 +83,8 @@ describe('AssetDetailsDialog', () => {
         { key: AssetDetail.QUANTUM, value: '1' },
         { key: AssetDetail.STATUS, value: 'Enabled' },
         { key: AssetDetail.CONTRACT_ADDRESS, value: '0x123' },
-        { key: AssetDetail.WITHDRAWAL_THRESHOLD, value: '0.050' },
+        { key: AssetDetail.WITHDRAWAL_THRESHOLD, value: '0.05' },
-        { key: AssetDetail.LIFETIME_LIMIT, value: '123,000.000' },
+        { key: AssetDetail.LIFETIME_LIMIT, value: '123,000' },
         {
           key: AssetDetail.INFRASTRUCTURE_FEE_ACCOUNT_BALANCE,
           value: '0.001',
@@ -115,10 +115,10 @@ describe('AssetDetailsDialog', () => {
         { key: AssetDetail.DECIMALS, value: '5' },
         { key: AssetDetail.QUANTUM, value: '1' },
         { key: AssetDetail.STATUS, value: 'Enabled' },
-        { key: AssetDetail.MAX_FAUCET_AMOUNT_MINT, value: '50,000.00000' },
+        { key: AssetDetail.MAX_FAUCET_AMOUNT_MINT, value: '50,000' },
         {
           key: AssetDetail.INFRASTRUCTURE_FEE_ACCOUNT_BALANCE,
-          value: '0.00000',
+          value: '0',
         },
       ],
     ],
@@ -132,10 +132,10 @@ describe('AssetDetailsDialog', () => {
         { key: AssetDetail.DECIMALS, value: '5' },
         { key: AssetDetail.QUANTUM, value: '1' },
         { key: AssetDetail.STATUS, value: 'Pending listing' },
-        { key: AssetDetail.MAX_FAUCET_AMOUNT_MINT, value: '50,000.00000' },
+        { key: AssetDetail.MAX_FAUCET_AMOUNT_MINT, value: '50,000' },
         {
           key: AssetDetail.INFRASTRUCTURE_FEE_ACCOUNT_BALANCE,
-          value: '0.00000',
+          value: '0',
         },
       ],
     ],
@@ -149,10 +149,10 @@ describe('AssetDetailsDialog', () => {
         { key: AssetDetail.DECIMALS, value: '5' },
         { key: AssetDetail.QUANTUM, value: '1' },
         { key: AssetDetail.STATUS, value: 'Proposed' },
-        { key: AssetDetail.MAX_FAUCET_AMOUNT_MINT, value: '50,000.00000' },
+        { key: AssetDetail.MAX_FAUCET_AMOUNT_MINT, value: '50,000' },
         {
           key: AssetDetail.INFRASTRUCTURE_FEE_ACCOUNT_BALANCE,
-          value: '0.00000',
+          value: '0',
         },
       ],
     ],
@@ -166,10 +166,10 @@ describe('AssetDetailsDialog', () => {
         { key: AssetDetail.DECIMALS, value: '5' },
         { key: AssetDetail.QUANTUM, value: '1' },
         { key: AssetDetail.STATUS, value: 'Rejected' },
-        { key: AssetDetail.MAX_FAUCET_AMOUNT_MINT, value: '50,000.00000' },
+        { key: AssetDetail.MAX_FAUCET_AMOUNT_MINT, value: '50,000' },
         {
           key: AssetDetail.INFRASTRUCTURE_FEE_ACCOUNT_BALANCE,
-          value: '0.00000',
+          value: '0',
         },
       ],
     ],

libs/assets/src/lib/asset-details-table.spec.tsx

@@ -23,8 +23,8 @@ describe('AssetDetailsTable', () => {
         { key: AssetDetail.QUANTUM, value: '1' },
         { key: AssetDetail.STATUS, value: 'Enabled' },
         { key: AssetDetail.CONTRACT_ADDRESS, value: '0x123' },
-        { key: AssetDetail.WITHDRAWAL_THRESHOLD, value: '0.050' },
+        { key: AssetDetail.WITHDRAWAL_THRESHOLD, value: '0.05' },
-        { key: AssetDetail.LIFETIME_LIMIT, value: '123,000.000' },
+        { key: AssetDetail.LIFETIME_LIMIT, value: '123,000' },
         {
           key: AssetDetail.INFRASTRUCTURE_FEE_ACCOUNT_BALANCE,
           value: '0.001',
@@ -56,10 +56,10 @@ describe('AssetDetailsTable', () => {
         { key: AssetDetail.DECIMALS, value: '5' },
         { key: AssetDetail.QUANTUM, value: '1' },
         { key: AssetDetail.STATUS, value: 'Enabled' },
-        { key: AssetDetail.MAX_FAUCET_AMOUNT_MINT, value: '50,000.00000' },
+        { key: AssetDetail.MAX_FAUCET_AMOUNT_MINT, value: '50,000' },
         {
           key: AssetDetail.INFRASTRUCTURE_FEE_ACCOUNT_BALANCE,
-          value: '0.00000',
+          value: '0',
         },
       ],
     ],

libs/assets/src/lib/asset-details-table.tsx

@@ -1,4 +1,4 @@
-import { addDecimalsFormatNumber, t } from '@vegaprotocol/react-helpers';
+import { addDecimalsNormalizeNumber, t } from '@vegaprotocol/react-helpers';
 import type { Schema } from '@vegaprotocol/types';
 import type { KeyValueTableRowProps } from '@vegaprotocol/ui-toolkit';
 import {
@@ -43,7 +43,7 @@ type Mapping = { [key in string]: { value: string; tooltip: string } };
 
 const num = (asset: Asset, n: string | undefined | null) => {
   if (typeof n === 'undefined' || n == null) return '';
-  return addDecimalsFormatNumber(n, asset.decimals);
+  return addDecimalsNormalizeNumber(n, asset.decimals);
 };
 
 export const rows: Rows = [

libs/market-info/src/components/market-info/info-key-value-table.tsx

@@ -1,5 +1,5 @@
 import {
-  addDecimalsFormatNumber,
+  addDecimalsNormalizeNumber,
   formatNumber,
   formatNumberPercentage,
   t,
@@ -40,8 +40,9 @@ const Row = ({
       return value;
     }
     if (decimalPlaces) {
-      return `${parseFloat(
+      return `${addDecimalsNormalizeNumber(
-        addDecimalsFormatNumber(value, decimalPlaces)
+        value,
+        decimalPlaces
       )} ${assetSymbol}`;
     }
     if (asPercentage) {

libs/market-info/src/components/market-info/info-market.tsx

@@ -391,7 +391,7 @@ export const Info = ({ market, onSelect }: InfoProps) => {
               ''
             }
           >
-            {t('Propose a change to this market')}
+            {t('Propose a change to market')}
           </ExternalLink>
         </div>
       ),

libs/orders/src/lib/components/order-list/order-edit-dialog.tsx

@@ -1,10 +1,10 @@
 import {
   t,
-  addDecimalsFormatNumber,
   toDecimal,
   Size,
   getDateTimeFormat,
   addDecimal,
+  addDecimalsNormalizeNumber,
 } from '@vegaprotocol/react-helpers';
 import { Schema } from '@vegaprotocol/types';
 import {
@@ -57,22 +57,25 @@ export const OrderEditDialog = ({
       title={t('Edit order')}
       icon={<Icon name="edit" />}
     >
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
         {order.market && (
-          <div>
+          <div className="md:col-span-2">
             <p className={headerClassName}>{t(`Market`)}</p>
             <p>{t(`${order.market.tradableInstrument.instrument.name}`)}</p>
           </div>
         )}
         {order.type === Schema.OrderType.TYPE_LIMIT && order.market && (
-          <div>
+          <div className="md:col-span-1">
-            <p className={headerClassName}>{t(`Current price`)}</p>
+            <p className={headerClassName}>{t(`Price`)}</p>
             <p>
-              {addDecimalsFormatNumber(order.price, order.market.decimalPlaces)}
+              {addDecimalsNormalizeNumber(
+                order.price,
+                order.market.decimalPlaces
+              )}
             </p>
           </div>
         )}
-        <div>
+        <div className="md:col-span-1">
           <p className={headerClassName}>{t(`Size`)}</p>
           <p>
             {order.market && (

libs/positions/src/lib/close-position-dialog/requested.spec.tsx

@@ -77,7 +77,7 @@ describe('Close position dialog - Request', () => {
     );
     const closingOrderRow = closingOrderTable.getAllByRole('row');
     expect(closingOrderRow[0].children[0]).toHaveTextContent('test market');
-    expect(closingOrderRow[0].children[1]).toHaveTextContent('+0.10');
+    expect(closingOrderRow[0].children[1]).toHaveTextContent('+0.1');
     expect(closingOrderRow[0].children[2]).toHaveTextContent('~1.00 SYM');
 
     // orders
@@ -87,13 +87,13 @@ describe('Close position dialog - Request', () => {
     );
     const orderRows = ordersTable.getAllByRole('row');
     expect(orderRows).toHaveLength(orders.length);
-    expect(orderRows[0].children[0]).toHaveTextContent('+2.00');
+    expect(orderRows[0].children[0]).toHaveTextContent('+2');
     expect(orderRows[0].children[1]).toHaveTextContent('9.99 SYM');
     expect(orderRows[0].children[2]).toHaveTextContent(
       "Good 'til Cancelled (GTC)"
     );
 
-    expect(orderRows[1].children[0]).toHaveTextContent('-3.00');
+    expect(orderRows[1].children[0]).toHaveTextContent('-3');
     expect(orderRows[1].children[1]).toHaveTextContent('8.88 SYM');
     expect(orderRows[1].children[2]).toHaveTextContent(
       "Good 'til Cancelled (GTC)"

libs/react-helpers/src/lib/grid/size.tsx

@@ -1,7 +1,7 @@
 import { Schema } from '@vegaprotocol/types';
 import type { ICellRendererParams } from 'ag-grid-community';
 import classNames from 'classnames';
-import { addDecimalsFormatNumber } from '../format';
+import { addDecimalsNormalizeNumber } from '../format';
 
 export const Size = ({
   value,
@@ -26,7 +26,7 @@ export const Size = ({
         : side === Schema.Side.SIDE_SELL
         ? '-'
         : ''}
-      {addDecimalsFormatNumber(value, positionDecimalPlaces)}
+      {addDecimalsNormalizeNumber(value, positionDecimalPlaces)}
     </span>
   );
 };