Small book optimizations (#462)

frontend/src/components/BookTable/index.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   Box,
@@ -42,6 +42,18 @@ const ClickThroughDataGrid = styled(DataGrid)({
   },
 });
 
+const premiumColor = function (baseColor: string, accentColor: string, point: number) {
+  const baseRGB = hexToRgb(baseColor);
+  const accentRGB = hexToRgb(accentColor);
+  const redDiff = accentRGB[0] - baseRGB[0];
+  const red = baseRGB[0] + redDiff * point;
+  const greenDiff = accentRGB[1] - baseRGB[1];
+  const green = baseRGB[1] + greenDiff * point;
+  const blueDiff = accentRGB[2] - baseRGB[2];
+  const blue = baseRGB[2] + blueDiff * point;
+  return `rgb(${Math.round(red)}, ${Math.round(green)}, ${Math.round(blue)}, ${0.7 + point * 0.3})`;
+};
+
 interface BookTableProps {
   orderList?: PublicOrder[];
   maxWidth: number;
@@ -106,21 +118,8 @@ const BookTable = ({
     });
   }, [book.loading, orders, defaultPageSize]);
 
-  const premiumColor = function (baseColor: string, accentColor: string, point: number) {
+  const localeText = useMemo(() => {
-    const baseRGB = hexToRgb(baseColor);
+    return {
-    const accentRGB = hexToRgb(accentColor);
-    const redDiff = accentRGB[0] - baseRGB[0];
-    const red = baseRGB[0] + redDiff * point;
-    const greenDiff = accentRGB[1] - baseRGB[1];
-    const green = baseRGB[1] + greenDiff * point;
-    const blueDiff = accentRGB[2] - baseRGB[2];
-    const blue = baseRGB[2] + blueDiff * point;
-    return `rgb(${Math.round(red)}, ${Math.round(green)}, ${Math.round(blue)}, ${
-      0.7 + point * 0.3
-    })`;
-  };
-
-  const localeText = {
       MuiTablePagination: { labelRowsPerPage: t('Orders per page:') },
       noResultsOverlayLabel: t('No results found.'),
       errorOverlayDefaultLabel: t('An error occurred.'),
@@ -169,8 +168,9 @@ const BookTable = ({
       booleanCellTrueLabel: t('yes'),
       booleanCellFalseLabel: t('no'),
     };
+  }, []);
 
-  const robotObj = function (width: number) {
+  const robotObj = useCallback((width: number) => {
     return {
       field: 'maker_nick',
       headerName: t('Robot'),
@@ -196,9 +196,9 @@ const BookTable = ({
         );
       },
     };
-  };
+  }, []);
 
-  const robotSmallObj = function (width: number) {
+  const robotSmallObj = useCallback((width: number) => {
     return {
       field: 'maker_nick',
       headerName: t('Robot'),
@@ -223,9 +223,9 @@ const BookTable = ({
         );
       },
     };
-  };
+  }, []);
 
-  const typeObj = function (width: number) {
+  const typeObj = useCallback((width: number) => {
     return {
       field: 'type',
       headerName: t('Is'),
@@ -235,9 +235,9 @@ const BookTable = ({
           ? t(fav.mode === 'fiat' ? 'Seller' : 'Swapping Out')
           : t(fav.mode === 'fiat' ? 'Buyer' : 'Swapping In'),
     };
-  };
+  }, []);
 
-  const amountObj = function (width: number) {
+  const amountObj = useCallback((width: number) => {
     return {
       field: 'amount',
       headerName: t('Amount'),
@@ -257,9 +257,9 @@ const BookTable = ({
         );
       },
     };
-  };
+  }, []);
 
-  const currencyObj = function (width: number) {
+  const currencyObj = useCallback((width: number) => {
     return {
       field: 'currency',
       headerName: t('Currency'),
@@ -282,9 +282,9 @@ const BookTable = ({
         );
       },
     };
-  };
+  }, []);
 
-  const paymentObj = function (width: number) {
+  const paymentObj = useCallback((width: number) => {
     return {
       field: 'payment_method',
       headerName: fav.mode === 'fiat' ? t('Payment Method') : t('Destination'),
@@ -302,9 +302,9 @@ const BookTable = ({
         );
       },
     };
-  };
+  }, []);
 
-  const paymentSmallObj = function (width: number) {
+  const paymentSmallObj = useCallback((width: number) => {
     return {
       field: 'payment_method',
       headerName: t('Pay'),
@@ -327,9 +327,9 @@ const BookTable = ({
         );
       },
     };
-  };
+  }, []);
 
-  const priceObj = function (width: number) {
+  const priceObj = useCallback((width: number) => {
     return {
       field: 'price',
       headerName: t('Price'),
@@ -342,9 +342,9 @@ const BookTable = ({
         );
       },
     };
-  };
+  }, []);
 
-  const premiumObj = function (width: number) {
+  const premiumObj = useCallback((width: number) => {
     // coloring premium texts based on 4 params:
     // Hardcoded: a sell order at 0% is an outstanding premium
     // Hardcoded: a buy order at 10% is an outstanding premium
@@ -391,9 +391,9 @@ const BookTable = ({
         );
       },
     };
-  };
+  }, []);
 
-  const timerObj = function (width: number) {
+  const timerObj = useCallback((width: number) => {
     return {
       field: 'escrow_duration',
       headerName: t('Timer'),
@@ -405,9 +405,9 @@ const BookTable = ({
         return <div style={{ cursor: 'pointer' }}>{hours > 0 ? `${hours}h` : `${minutes}m`}</div>;
       },
     };
-  };
+  }, []);
 
-  const expiryObj = function (width: number) {
+  const expiryObj = useCallback((width: number) => {
     return {
       field: 'expires_at',
       headerName: t('Expiry'),
@@ -448,9 +448,9 @@ const BookTable = ({
         );
       },
     };
-  };
+  }, []);
 
-  const satoshisObj = function (width: number) {
+  const satoshisObj = useCallback((width: number) => {
     return {
       field: 'satoshis_now',
       headerName: t('Sats now'),
@@ -466,9 +466,9 @@ const BookTable = ({
         );
       },
     };
-  };
+  }, []);
 
-  const idObj = function (width: number) {
+  const idObj = useCallback((width: number) => {
     return {
       field: 'id',
       headerName: 'Order ID',
@@ -483,9 +483,9 @@ const BookTable = ({
         );
       },
     };
-  };
+  }, []);
 
-  const bondObj = function (width: number) {
+  const bondObj = useCallback((width: number) => {
     return {
       field: 'bond_size',
       headerName: t('Bond'),
@@ -495,9 +495,10 @@ const BookTable = ({
         return <div style={{ cursor: 'pointer' }}>{`${Number(params.row.bond_size)}%`}</div>;
       },
     };
-  };
+  }, []);
 
-  const columnSpecs = {
+  const columnSpecs = useMemo(() => {
+    return {
       amount: {
         priority: 1,
         order: 4,
@@ -603,6 +604,7 @@ const BookTable = ({
         },
       },
     };
+  }, []);
 
   const filteredColumns = function (maxWidth: number) {
     const useSmall = maxWidth < 70;

frontend/src/contexts/AppContext.ts

@@ -212,7 +212,9 @@ export const useAppStore = () => {
   };
 
   const fetchBook = function () {
-    setBook({ ...book, loading: true });
+    setBook((book) => {
+      return { ...book, loading: true };
+    });
     apiClient.get(baseUrl, '/api/book/').then((data: any) =>
       setBook({
         loading: false,