From d6b362805e7968bfe02c77e362af97647b756c3e Mon Sep 17 00:00:00 2001
From: John Walley <john@walley.org.uk>
Date: Wed, 24 Aug 2022 18:23:05 +0100
Subject: [PATCH] fix(#1134): pass correct price and volume formatters to depth
 chart (#1135)

---
 libs/market-depth/src/lib/depth-chart.tsx | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/libs/market-depth/src/lib/depth-chart.tsx b/libs/market-depth/src/lib/depth-chart.tsx
index 41c10c6da..e052017b3 100644
--- a/libs/market-depth/src/lib/depth-chart.tsx
+++ b/libs/market-depth/src/lib/depth-chart.tsx
@@ -4,8 +4,8 @@ import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
 import {
   useDataProvider,
   addDecimal,
-  addDecimalsFormatNumber,
   ThemeContext,
+  getNumberFormat,
 } from '@vegaprotocol/react-helpers';
 import dataProvider from './market-depth-data-provider';
 import {
@@ -175,18 +175,25 @@ export const DepthChartContainer = ({ marketId }: DepthChartManagerProps) => {
     setPositionDecimalPlaces(data.positionDecimalPlaces);
   }, [data]);
 
+  const volumeFormat = useCallback(
+    (volume: number) =>
+      getNumberFormat(data?.positionDecimalPlaces || 0).format(volume),
+    [data?.positionDecimalPlaces]
+  );
+
+  const priceFormat = useCallback(
+    (price: number) => getNumberFormat(data?.decimalPlaces || 0).format(price),
+    [data?.decimalPlaces]
+  );
+
   return (
     <AsyncRenderer loading={loading} error={error} data={data}>
       {depthData && (
         <DepthChart
           {...depthData}
           theme={theme}
-          volumeFormat={(volume) =>
-            addDecimalsFormatNumber(volume, data?.positionDecimalPlaces || 0)
-          }
-          priceFormat={(price) =>
-            addDecimalsFormatNumber(price, data?.decimalPlaces || 0)
-          }
+          volumeFormat={volumeFormat}
+          priceFormat={priceFormat}
         />
       )}
     </AsyncRenderer>