From 5cdaf93908f810f2337a277cbbf32957930daa42 Mon Sep 17 00:00:00 2001
From: aftermath <131321480+aftermath2@users.noreply.github.com>
Date: Mon, 22 Jan 2024 09:27:02 +0000
Subject: [PATCH] Fix book table in the v0.6.0 version (#1083)

* Get favorites from context

* Rerender objects on favorite mode change

* Format sats amount in millionths
---
 .../src/components/BookTable/BookControl.tsx  | 10 ++++------
 frontend/src/components/BookTable/index.tsx   | 20 ++++++++-----------
 2 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/BookTable/BookControl.tsx b/frontend/src/components/BookTable/BookControl.tsx
index 64a9acfd..e92c7a87 100644
--- a/frontend/src/components/BookTable/BookControl.tsx
+++ b/frontend/src/components/BookTable/BookControl.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useContext, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   Typography,
@@ -16,26 +16,24 @@ import { useTheme } from '@mui/system';
 import { AutocompletePayments } from '../MakerForm';
 import { fiatMethods, swapMethods, PaymentIcon } from '../PaymentMethods';
 import { FlagWithProps } from '../Icons';
+import { AppContext, type UseAppStoreType } from '../../contexts/AppContext';
 
 import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
-import { type Favorites } from '../../models';
 import SwapCalls from '@mui/icons-material/SwapCalls';
 
 interface BookControlProps {
   width: number;
-  fav: Favorites;
-  setFav: (state: Favorites) => void;
   paymentMethod: string[];
   setPaymentMethods: (state: string[]) => void;
 }
 
 const BookControl = ({
   width,
-  fav,
-  setFav,
   paymentMethod,
   setPaymentMethods,
 }: BookControlProps): JSX.Element => {
+  const { fav, setFav } = useContext<UseAppStoreType>(AppContext);
+
   const { t, i18n } = useTranslation();
   const theme = useTheme();
 
diff --git a/frontend/src/components/BookTable/index.tsx b/frontend/src/components/BookTable/index.tsx
index 1010bc53..42f104ae 100644
--- a/frontend/src/components/BookTable/index.tsx
+++ b/frontend/src/components/BookTable/index.tsx
@@ -106,7 +106,7 @@ const BookTable = ({
   showNoResults = true,
   onOrderClicked = () => null,
 }: BookTableProps): JSX.Element => {
-  const { fav, setFav, setOpen } = useContext<UseAppStoreType>(AppContext);
+  const { fav, setOpen } = useContext<UseAppStoreType>(AppContext);
   const { federation, coordinatorUpdatedAt } =
     useContext<UseFederationStoreType>(FederationContext);
 
@@ -312,7 +312,7 @@ const BookTable = ({
         );
       },
     };
-  }, []);
+  }, [fav.mode]);
 
   const amountObj = useCallback((width: number) => {
     return {
@@ -321,11 +321,11 @@ const BookTable = ({
       type: 'number',
       width: width * fontSize,
       renderCell: (params: any) => {
-        const amount = fav.mode === 'swap' ? params.row.amount * 100000 : params.row.amount;
+        const amount = fav.mode === 'swap' ? params.row.amount * 100 : params.row.amount;
         const minAmount =
-          fav.mode === 'swap' ? params.row.min_amount * 100000 : params.row.min_amount;
+          fav.mode === 'swap' ? params.row.min_amount * 100 : params.row.min_amount;
         const maxAmount =
-          fav.mode === 'swap' ? params.row.max_amount * 100000 : params.row.max_amount;
+          fav.mode === 'swap' ? params.row.max_amount * 100 : params.row.max_amount;
         return (
           <div
             style={{ cursor: 'pointer' }}
@@ -334,12 +334,12 @@ const BookTable = ({
             }}
           >
             {amountToString(amount, params.row.has_range, minAmount, maxAmount) +
-              (fav.mode === 'swap' ? 'K Sats' : '')}
+              (fav.mode === 'swap' ? 'M Sats' : '')}
           </div>
         );
       },
     };
-  }, []);
+  }, [fav.mode]);
 
   const currencyObj = useCallback((width: number) => {
     return {
@@ -392,7 +392,7 @@ const BookTable = ({
         );
       },
     };
-  }, []);
+  }, [fav.mode]);
 
   const paymentSmallObj = useCallback((width: number) => {
     return {
@@ -928,8 +928,6 @@ const BookTable = ({
           componentsProps={{
             toolbar: {
               width,
-              fav,
-              setFav,
               paymentMethod: paymentMethods,
               setPaymentMethods,
             },
@@ -966,8 +964,6 @@ const BookTable = ({
             componentsProps={{
               toolbar: {
                 width,
-                fav,
-                setFav,
                 paymentMethod: paymentMethods,
                 setPaymentMethods,
               },