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
2022-11-18 14:00:38 -05:00 · 2022-11-18 14:00:38 -05:00 · 0189b9c94e
commit 0189b9c94e
parent c7a0b126ad
14 changed files with 56 additions and 46 deletions
--- a/apps/trading-e2e/src/integration/market-info.cy.ts
+++ b/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(9, 'Lifetime limit', '1,230.00000');
+    validateMarketDataRow(8, 'Withdrawal threshold', '0.0005');
+    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');
  });
--- a/apps/trading-e2e/src/integration/trading-accounts.cy.ts
+++ b/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');
  });
 });
--- a/apps/trading/components/select-market/select-market-columns.tsx
+++ b/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,
--- a/libs/accounts/src/lib/accounts-table.spec.tsx
+++ b/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.00001,256.0000',
+      '1,256',
+      '1,2561,256',
      'Breakdown',
      'Deposit',
    ];
--- a/libs/accounts/src/lib/accounts-table.tsx
+++ b/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),
-    high: addDecimalsFormatNumber(mid.toString(), data.asset.decimals, 4),
+    low: addDecimalsNormalizeNumber(min.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}
          />
--- a/libs/accounts/src/lib/breakdown-table.spec.tsx
+++ b/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,256.00000',
-      '1,256.00000',
+      '1,2561,256',
+      '1,256',
+      '1,256',
    ];
    cells.forEach((cell, i) => {
      expect(cell).toHaveTextContent(expectedValues[i]);
--- a/libs/assets/src/lib/asset-details-dialog.spec.tsx
+++ b/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.LIFETIME_LIMIT, value: '123,000.000' },
+        { key: AssetDetail.WITHDRAWAL_THRESHOLD, value: '0.05' },
+        { 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',
        },
      ],
    ],
--- a/libs/assets/src/lib/asset-details-table.spec.tsx
+++ b/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.LIFETIME_LIMIT, value: '123,000.000' },
+        { key: AssetDetail.WITHDRAWAL_THRESHOLD, value: '0.05' },
+        { 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',
        },
      ],
    ],
--- a/libs/assets/src/lib/asset-details-table.tsx
+++ b/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 = [
--- a/libs/market-info/src/components/market-info/info-key-value-table.tsx
+++ b/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(
-        addDecimalsFormatNumber(value, decimalPlaces)
+      return `${addDecimalsNormalizeNumber(
+        value,
+        decimalPlaces
      )} ${assetSymbol}`;
    }
    if (asPercentage) {
--- a/libs/market-info/src/components/market-info/info-market.tsx
+++ b/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>
      ),
--- a/libs/orders/src/lib/components/order-list/order-edit-dialog.tsx
+++ b/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>
-            <p className={headerClassName}>{t(`Current price`)}</p>
+          <div className="md:col-span-1">
+            <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 && (
--- a/libs/positions/src/lib/close-position-dialog/requested.spec.tsx
+++ b/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)"
--- a/libs/react-helpers/src/lib/grid/size.tsx
+++ b/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>
  );
 };