Fix book table object updates (#1078)

* Get favorites from context

* Rerender objects on favorite mode change

* Format sats amount in millionths
This commit is contained in:
aftermath 2024-01-22 09:25:04 +00:00 committed by GitHub
parent 180f79acad
commit e94ae012f0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 12 additions and 18 deletions

View File

@ -1,4 +1,4 @@
import React, { useEffect, useMemo, useState } 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: () => void;
}
const BookControl = ({
width,
fav,
setFav,
paymentMethod,
setPaymentMethods,
}: BookControlProps): JSX.Element => {
const { fav, setFav } = useContext<UseAppStoreType>(AppContext);
const { t, i18n } = useTranslation();
const theme = useTheme();

View File

@ -103,7 +103,7 @@ const BookTable = ({
showNoResults = true,
onOrderClicked = () => null,
}: BookTableProps): JSX.Element => {
const { book, fetchBook, fav, setFav, baseUrl } = useContext<UseAppStoreType>(AppContext);
const { book, fetchBook, fav, baseUrl } = useContext<UseAppStoreType>(AppContext);
const { t } = useTranslation();
const theme = useTheme();
@ -255,7 +255,7 @@ const BookTable = ({
? t(fav.mode === 'fiat' ? 'Seller' : 'Swapping Out')
: t(fav.mode === 'fiat' ? 'Buyer' : 'Swapping In'),
};
}, []);
}, [fav.mode]);
const amountObj = useCallback((width: number) => {
return {
@ -264,20 +264,20 @@ 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' }}>
{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 {
@ -322,7 +322,7 @@ const BookTable = ({
);
},
};
}, []);
}, [fav.mode]);
const paymentSmallObj = useCallback((width: number) => {
return {
@ -797,8 +797,6 @@ const BookTable = ({
componentsProps={{
toolbar: {
width,
fav,
setFav,
paymentMethod: paymentMethods,
setPaymentMethods,
},
@ -834,8 +832,6 @@ const BookTable = ({
componentsProps={{
toolbar: {
width,
fav,
setFav,
paymentMethod: paymentMethods,
setPaymentMethods,
},