From 78a8ab799dc33e8f8b8f14e22e155bbc7104c3a9 Mon Sep 17 00:00:00 2001
From: Reckless_Satoshi <reckless.satoshi@protonmail.com>
Date: Wed, 19 Oct 2022 02:11:03 -0700
Subject: [PATCH] Try out to revert depth chart

---
 frontend/src/components/BookPage/BookPage.tsx |  4 ++--
 .../components/Charts/DepthChart/index.tsx    | 20 +++++++++++--------
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/BookPage/BookPage.tsx b/frontend/src/components/BookPage/BookPage.tsx
index bff43c3f..70013709 100644
--- a/frontend/src/components/BookPage/BookPage.tsx
+++ b/frontend/src/components/BookPage/BookPage.tsx
@@ -193,7 +193,7 @@ const BookPage = ({
                 orders={book.orders}
                 lastDayPremium={lastDayPremium}
                 currency={fav.currency}
-                limitList={limits.list}
+                limits={limits.list}
                 maxWidth={chartWidthEm} // EM units
                 maxHeight={windowSize.height * 0.825 - 5} // EM units
               />
@@ -204,7 +204,7 @@ const BookPage = ({
             orders={book.orders}
             lastDayPremium={lastDayPremium}
             currency={fav.currency}
-            limitList={limits.list}
+            limits={limits.list}
             maxWidth={windowSize.width * 0.8} // EM units
             maxHeight={windowSize.height * 0.825 - 5} // EM units
           />
diff --git a/frontend/src/components/Charts/DepthChart/index.tsx b/frontend/src/components/Charts/DepthChart/index.tsx
index f8e093d7..79eef1ad 100644
--- a/frontend/src/components/Charts/DepthChart/index.tsx
+++ b/frontend/src/components/Charts/DepthChart/index.tsx
@@ -34,7 +34,7 @@ interface DepthChartProps {
   orders: Order[];
   lastDayPremium: number | undefined;
   currency: number;
-  limitList: LimitList;
+  limits: LimitList;
   maxWidth: number;
   maxHeight: number;
 }
@@ -43,7 +43,7 @@ const DepthChart: React.FC<DepthChartProps> = ({
   orders,
   lastDayPremium,
   currency,
-  limitList,
+  limits,
   maxWidth,
   maxHeight,
 }) => {
@@ -55,25 +55,29 @@ const DepthChart: React.FC<DepthChartProps> = ({
   const [rangeSteps, setRangeSteps] = useState<number>(8);
   const [xRange, setXRange] = useState<number>(8);
   const [xType, setXType] = useState<string>('premium');
+  const [currencyCode, setCurrencyCode] = useState<number>(1);
   const [center, setCenter] = useState<number>();
 
   const height = maxHeight < 20 ? 20 : maxHeight;
   const width = maxWidth < 20 ? 20 : maxWidth > 72.8 ? 72.8 : maxWidth;
 
   useEffect(() => {
-    if (Object.keys(limitList).length > 0) {
+    setCurrencyCode(currency === 0 ? 1 : currency);
+  }, [currency]);
+
+  useEffect(() => {
+    if (Object.keys(limits).length > 0) {
       const enriched = orders.map((order) => {
         // We need to transform all currencies to the same base (ex. USD), we don't have the exchange rate
         // for EUR -> USD, but we know the rate of both to BTC, so we get advantage of it and apply a
         // simple rule of three
         order.base_amount =
-          (order.price * limitList[currency === 0 ? 1 : currency].price) /
-          limitList[order.currency].price;
+          (order.price * limits[currencyCode].price) / limits[order.currency].price;
         return order;
       });
       setEnrichedOrders(enriched);
     }
-  }, [limitList, orders, currency]);
+  }, [limits, orders, currencyCode]);
 
   useEffect(() => {
     if (enrichedOrders.length > 0) {
@@ -98,7 +102,7 @@ const DepthChart: React.FC<DepthChartProps> = ({
       setXRange(8);
       setRangeSteps(0.5);
     }
-  }, [enrichedOrders, xType, lastDayPremium, currency]);
+  }, [enrichedOrders, xType, lastDayPremium, currencyCode]);
 
   const generateSeries: () => void = () => {
     const sortedOrders: Order[] =
@@ -323,7 +327,7 @@ const DepthChart: React.FC<DepthChartProps> = ({
                 <Grid item>
                   <Box justifyContent='center'>
                     {xType === 'base_amount'
-                      ? `${center} ${currencyDict[currency === 0 ? 1 : currency]}`
+                      ? `${center} ${currencyDict[currencyCode]}`
                       : `${center}%`}
                   </Box>
                 </Grid>