fix: 1863 market info reference price should be formatted with asset dp (#1864)

* fix: #1863 Market info reference price should be formatted with asset dp

* fix: #1863 Market info reference price should be formatted with asset dp

* fix: format numbers in orders-list

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

@@ -1,19 +1,20 @@
 import {
-  t,
   addDecimalsFormatNumber,
-  formatNumberPercentage,
   formatNumber,
+  formatNumberPercentage,
+  t,
 } from '@vegaprotocol/react-helpers';
 import {
-  KeyValueTableRow,
   KeyValueTable,
+  KeyValueTableRow,
   Tooltip,
 } from '@vegaprotocol/ui-toolkit';
 import BigNumber from 'bignumber.js';
 import startCase from 'lodash/startCase';
-import type { ReactNode } from 'react';
+
 import { tooltipMapping } from './tooltip-mapping';
 
+import type { ReactNode } from 'react';
 interface RowProps {
   field: string;
   value: unknown;
@@ -39,7 +40,9 @@ const Row = ({
       return value;
     }
     if (decimalPlaces) {
-      return `${addDecimalsFormatNumber(value, decimalPlaces)} ${assetSymbol}`;
+      return `${parseFloat(
+        addDecimalsFormatNumber(value, decimalPlaces)
+      )} ${assetSymbol}`;
     }
     if (asPercentage) {
       return formatNumberPercentage(new BigNumber(value).times(100));

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

@@ -1,31 +1,36 @@
-import { useMemo } from 'react';
+import { AssetDetailsTable, useAssetDataProvider } from '@vegaprotocol/assets';
+import { useEnvironment } from '@vegaprotocol/environment';
+import { totalFeesPercentage } from '@vegaprotocol/market-list';
 import {
   formatNumber,
   t,
   useDataProvider,
   useYesterday,
 } from '@vegaprotocol/react-helpers';
-import { AsyncRenderer, Splash, Accordion } from '@vegaprotocol/ui-toolkit';
-import pick from 'lodash/pick';
-import BigNumber from 'bignumber.js';
-import { totalFeesPercentage } from '@vegaprotocol/market-list';
 import {
   AccountType,
   Interval,
   MarketStateMapping,
   MarketTradingModeMapping,
 } from '@vegaprotocol/types';
-import { MarketInfoTable } from './info-key-value-table';
+import {
-import { ExternalLink } from '@vegaprotocol/ui-toolkit';
+  Accordion,
-import { generatePath } from 'react-router-dom';
+  AsyncRenderer,
-import { useEnvironment } from '@vegaprotocol/environment';
+  ExternalLink,
-import { Link as UiToolkitLink } from '@vegaprotocol/ui-toolkit';
+  Link as UiToolkitLink,
+  Splash,
+} from '@vegaprotocol/ui-toolkit';
+import BigNumber from 'bignumber.js';
+import pick from 'lodash/pick';
 import Link from 'next/link';
-import { marketInfoDataProvider } from './market-info-data-provider';
+import { useMemo } from 'react';
-import { AssetDetailsTable, useAssetDataProvider } from '@vegaprotocol/assets';
+import { generatePath } from 'react-router-dom';
-import type { MarketInfoQuery } from './__generated___/MarketInfo';
-import { getMarketExpiryDateFormatted } from '../market-expires';
 
+import { getMarketExpiryDateFormatted } from '../market-expires';
+import { MarketInfoTable } from './info-key-value-table';
+import { marketInfoDataProvider } from './market-info-data-provider';
+
+import type { MarketInfoQuery } from './__generated___/MarketInfo';
 const Links = {
   PROPOSAL_PAGE: ':tokenUrl/governance/:proposalId',
 };
@@ -271,7 +276,20 @@ export const Info = ({ market, onSelect }: InfoProps) => {
     ...(market.data?.priceMonitoringBounds || []).map((trigger, i) => ({
       title: t(`Price monitoring bound ${i + 1}`),
       content: (
-        <MarketInfoTable data={trigger} decimalPlaces={market.decimalPlaces} />
+        <>
+          <MarketInfoTable
+            data={trigger}
+            decimalPlaces={market.decimalPlaces}
+            omits={['referencePrice', '__typename']}
+          />
+          <MarketInfoTable
+            data={{ referencePrice: trigger.referencePrice }}
+            decimalPlaces={
+              market?.tradableInstrument.instrument.product?.settlementAsset
+                .decimals
+            }
+          />
+        </>
       ),
     })),
     {

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

@@ -1,5 +1,5 @@
 import {
-  addDecimal,
+  addDecimalsFormatNumber,
   getDateTimeFormat,
   isNumeric,
   negativeClassNames,
@@ -157,7 +157,8 @@ export const OrderListTable = forwardRef<AgGridReact, OrderListTableProps>(
                 : '-'
               : '';
             return (
-              prefix + addDecimal(value, data.market.positionDecimalPlaces)
+              prefix +
+              addDecimalsFormatNumber(value, data.market.positionDecimalPlaces)
             );
           }}
         />
@@ -204,10 +205,10 @@ export const OrderListTable = forwardRef<AgGridReact, OrderListTableProps>(
             const size = new BigNumber(data.size);
             const remaining = new BigNumber(value);
             const fills = size.minus(remaining);
-            return `${addDecimal(fills.toString(), dps)}/${addDecimal(
+            return `${addDecimalsFormatNumber(
-              size.toString(),
+              fills.toString(),
               dps
-            )}`;
+            )}/${addDecimalsFormatNumber(size.toString(), dps)}`;
           }}
         />
         <AgGridColumn
@@ -225,7 +226,7 @@ export const OrderListTable = forwardRef<AgGridReact, OrderListTableProps>(
             ) {
               return '-';
             }
-            return addDecimal(value, data.market.decimalPlaces);
+            return addDecimalsFormatNumber(value, data.market.decimalPlaces);
           }}
         />
         <AgGridColumn