Fix match making table bug. Add styles

frontend/src/basic/Main.tsx

@@ -112,19 +112,21 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
         coordinatorVersion: versionInfo.coordinatorVersion,
         clientVersion: versionInfo.clientVersion,
       });
-      setRobot({
+      if (!robot.nickname) {
-        ...robot,
+        setRobot({
-        nickname: data.nickname,
+          ...robot,
-        loading: false,
+          nickname: data.nickname,
-        activeOrderId: data.active_order_id ?? null,
+          loading: false,
-        lastOrderId: data.last_order_id ?? null,
+          activeOrderId: data.active_order_id ?? null,
-        referralCode: data.referral_code,
+          lastOrderId: data.last_order_id ?? null,
-        tgEnabled: data.tg_enabled,
+          referralCode: data.referral_code,
-        tgBotName: data.tg_bot_name,
+          tgEnabled: data.tg_enabled,
-        tgToken: data.tg_token,
+          tgBotName: data.tg_bot_name,
-        earnedRewards: data.earned_rewards ?? 0,
+          tgToken: data.tg_token,
-        stealthInvoices: data.wants_stealth,
+          earnedRewards: data.earned_rewards ?? 0,
-      });
+          stealthInvoices: data.wants_stealth,
+        });
+      }
     });
   };
 
@@ -168,7 +170,7 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
             path='/make'
             render={() => (
               <MakerPage
-                orders={book.orders}
+                book={book}
                 limits={limits}
                 fetchLimits={fetchLimits}
                 maker={maker}

frontend/src/basic/MakerPage/index.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { useHistory } from 'react-router-dom';
 import { Button, Grid, Paper, Collapse, Typography } from '@mui/material';
 
-import { LimitList, Maker, Order, Favorites } from '../../models';
+import { LimitList, Maker, Book, Favorites } from '../../models';
 
 import filterOrders from '../../utils/filterOrders';
 
@@ -13,7 +13,7 @@ import BookTable from '../../components/BookTable';
 interface MakerPageProps {
   limits: { list: LimitList; loading: boolean };
   fetchLimits: () => void;
-  orders: Order[];
+  book: Book;
   fav: Favorites;
   maker: Maker;
   setFav: (state: Favorites) => void;
@@ -24,7 +24,7 @@ interface MakerPageProps {
 const MakerPage = ({
   limits,
   fetchLimits,
-  orders,
+  book,
   fav,
   maker,
   setFav,
@@ -38,7 +38,7 @@ const MakerPage = ({
   const [showMatches, setShowMatches] = useState<boolean>(false);
 
   const matches = filterOrders({
-    orders,
+    orders: book.orders,
     baseFilter: { currency: fav.currency === 0 ? 1 : fav.currency, type: fav.type },
     paymentMethods: maker.paymentMethods,
     amountFilter: {
@@ -59,15 +59,13 @@ const MakerPage = ({
             </Grid>
             <Grid item>
               <BookTable
-                book={{
+                book={book}
-                  orders: matches.slice(0, matches.length > 4 ? 4 : matches.length),
-                  loading: false,
-                }}
                 maxWidth={Math.min(windowSize.width, 60)} // EM units
-                maxHeight={Math.min(matches.length * 3.25 + 3.575, 16.575)} // EM units
+                maxHeight={Math.min(matches.length * 3.25 + 3.25, 16)} // EM units
                 defaultFullscreen={false}
                 showControls={false}
                 showFooter={false}
+                showNoResults={false}
               />
             </Grid>
           </Grid>

frontend/src/components/BookTable/index.tsx

@@ -45,6 +45,7 @@ interface Props {
   fillContainer?: boolean;
   showControls?: boolean;
   showFooter?: boolean;
+  showNoResults?: boolean;
   onCurrencyChange?: (e: any) => void;
   onTypeChange?: (mouseEvent: any, val: number) => void;
 }
@@ -62,6 +63,7 @@ const BookTable = ({
   fillContainer = false,
   showControls = true,
   showFooter = true,
+  showNoResults = true,
   onCurrencyChange,
   onTypeChange,
 }: Props): JSX.Element => {
@@ -706,10 +708,12 @@ const BookTable = ({
   const gridComponents = function () {
     const components: GridComponentProps = {
       LoadingOverlay: LinearProgress,
-      NoResultsOverlay,
-      NoRowsOverlay: NoResultsOverlay,
     };
 
+    if (showNoResults) {
+      components.NoResultsOverlay = NoResultsOverlay;
+      components.NoRowsOverlay = NoResultsOverlay;
+    }
     if (showFooter) {
       components.Footer = Footer;
     }

frontend/src/pro/Main.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import GridLayout, { Layout } from 'react-grid-layout';
-import { Grid, useTheme } from '@mui/material';
+import { Grid, styled, useTheme } from '@mui/material';
 import { apiClient } from '../services/api';
 import checkVer from '../utils/checkVer';
 
@@ -34,20 +34,36 @@ interface MainProps {
   setSettings: (state: Settings) => void;
 }
 
+// To Do. Add dotted grid when layout is not frozen
+// ${freeze ?
+//   `background: radial-gradient(${theme.palette.text.disabled} 1px, transparent 0px);
+//   background-size: ${gridCellSize}em ${gridCellSize}em;
+//   background-position: left 1em bottom 1.5em;`
+// :''}
+
+const StyledRGL = styled(GridLayout)(
+  ({ theme, gridCellSize, height, width, freeze }) => `
+  height: ${height}em;
+  width: ${width}px;
+  max-height: ${height}em;
+  `,
+);
+
 const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
   const theme = useTheme();
-  const em = theme.typography.fontSize;
+  const em: number = theme.typography.fontSize;
-  const toolbarHeight = 3;
+  const toolbarHeight: number = 3;
+  const gridCellSize: number = 2;
 
   const defaultLayout: Layout = [
-    { i: 'Maker', w: 6, h: 13, x: 42, y: 0, minW: 6, maxW: 12, minH: 9, maxH: 18 },
+    { i: 'Maker', w: 10, h: 16, x: 67, y: 0, minW: 8, maxW: 22, minH: 10, maxH: 28 },
-    { i: 'Book', w: 27, h: 13, x: 21, y: 13, minW: 6, maxW: 40, minH: 9, maxH: 15 },
+    { i: 'Book', w: 43, h: 15, x: 34, y: 16, minW: 6, maxW: 70, minH: 9, maxH: 25 },
-    { i: 'DepthChart', w: 8, h: 9, x: 13, y: 13, minW: 6, maxW: 12, minH: 9, maxH: 15 },
+    { i: 'DepthChart', w: 15, h: 10, x: 19, y: 16, minW: 6, maxW: 22, minH: 9, maxH: 25 },
-    { i: 'robots', w: 33, h: 13, x: 0, y: 0, minW: 15, maxW: 48, minH: 8, maxH: 20 },
+    { i: 'Garage', w: 52, h: 16, x: 0, y: 0, minW: 15, maxW: 78, minH: 8, maxH: 30 },
-    { i: 'history', w: 7, h: 9, x: 6, y: 13, minW: 6, maxW: 12, minH: 9, maxH: 15 },
+    { i: 'History', w: 10, h: 10, x: 9, y: 16, minW: 6, maxW: 22, minH: 9, maxH: 25 },
-    { i: 'trade', w: 9, h: 13, x: 33, y: 0, minW: 6, maxW: 12, minH: 9, maxH: 15 },
+    { i: 'Trade', w: 15, h: 16, x: 52, y: 0, minW: 6, maxW: 22, minH: 9, maxH: 25 },
-    { i: 'settings', w: 6, h: 13, x: 0, y: 13, minW: 6, maxW: 12, minH: 9, maxH: 15 },
+    { i: 'Settings', w: 9, h: 15, x: 0, y: 16, minW: 6, maxW: 22, minH: 9, maxH: 25 },
-    { i: 'other', w: 15, h: 4, x: 6, y: 22, minW: 2, maxW: 30, minH: 4, maxH: 15 },
+    { i: 'Other', w: 25, h: 5, x: 9, y: 26, minW: 2, maxW: 50, minH: 4, maxH: 25 },
   ];
 
   // All app data structured
@@ -115,7 +131,8 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
       });
     });
   };
-  console.log(windowSize);
+
+  console.log(layout);
   return (
     <Grid container direction='column' sx={{ width: `${windowSize.width}em` }}>
       <Grid item>
@@ -124,15 +141,19 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
       </Grid>
 
       <Grid item>
-        <GridLayout
+        <StyledRGL
+          height={windowSize.height - toolbarHeight}
+          width={Number((windowSize.width / gridCellSize).toFixed()) * gridCellSize * em}
+          theme={theme}
+          freeze={!settings.freezeViewports}
+          gridCellSize={gridCellSize}
           className='layout'
           layout={layout}
-          cols={48} // 48 cols in display regardless of window size
+          cols={Number((windowSize.width / gridCellSize).toFixed())} // cols are 2em wide
           margin={[0.5 * em, 0.5 * em]}
           isDraggable={!settings.freezeViewports}
           isResizable={!settings.freezeViewports}
-          rowHeight={((windowSize.height - toolbarHeight) / 32) * em} // 32 rows in display regardless of window size
+          rowHeight={gridCellSize * em} // rows are 2em high
-          width={windowSize.width * em}
           autoSize={true}
           onLayoutChange={(layout: Layout) => setLayout(layout)}
         >
@@ -150,6 +171,7 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
             <BookWidget
               book={book}
               layout={layout[1]}
+              gridCellSize={gridCellSize}
               fetchBook={fetchBook}
               fav={fav}
               setFav={setFav}
@@ -159,28 +181,29 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
           <div key='DepthChart'>
             <DepthChartWidget
               orders={book.orders}
+              gridCellSize={gridCellSize}
               limitList={limits.list}
               layout={layout[2]}
               currency={fav.currency}
               windowSize={windowSize}
             />
           </div>
-          <div key='robots'>
+          <div key='Garage'>
             <PlaceholderWidget label='Robot Garage' />
           </div>
-          <div key='history'>
+          <div key='History'>
             <PlaceholderWidget label='Garage History' />
           </div>
-          <div key='trade'>
+          <div key='Trade'>
             <PlaceholderWidget label='Trade Box' />
           </div>
-          <div key='settings'>
+          <div key='Settings'>
             <PlaceholderWidget label='Settings' />
           </div>
-          <div key='other'>
+          <div key='Other'>
             <PlaceholderWidget label='Other' />
           </div>
-        </GridLayout>
+        </StyledRGL>
       </Grid>
     </Grid>
   );

frontend/src/pro/Widgets/Book.tsx

@@ -6,6 +6,7 @@ import BookTable from '../../components/BookTable';
 
 interface BookWidgetProps {
   layout: any;
+  gridCellSize?: number;
   book: Book;
   fetchBook: () => void;
   fav: Favorites;
@@ -22,6 +23,7 @@ const BookWidget = React.forwardRef(
   (
     {
       layout,
+      gridCellSize = 2,
       book,
       fetchBook,
       fav,
@@ -45,8 +47,8 @@ const BookWidget = React.forwardRef(
             book={book}
             fav={fav}
             fillContainer={true}
-            maxWidth={(windowSize.width / 48) * layout.w} // EM units
+            maxWidth={layout.w * gridCellSize} // EM units
-            maxHeight={(layout.h * theme.typography.fontSize * 2.5) / theme.typography.fontSize} // EM units
+            maxHeight={layout.h * gridCellSize} // EM units
             fullWidth={windowSize.width} // EM units
             fullHeight={windowSize.height} // EM units
             defaultFullscreen={false}

frontend/src/pro/Widgets/Depth.tsx

@@ -6,6 +6,7 @@ import DepthChart from '../../components/Charts/DepthChart';
 
 interface DepthChartWidgetProps {
   layout: any;
+  gridCellSize: number;
   orders: Order[];
   currency: number;
   limitList: LimitList;
@@ -21,6 +22,7 @@ const DepthChartWidget = React.forwardRef(
   (
     {
       layout,
+      gridCellSize,
       limitList,
       orders,
       currency,
@@ -42,8 +44,8 @@ const DepthChartWidget = React.forwardRef(
             orders={orders}
             currency={currency}
             limits={limitList}
-            maxWidth={(windowSize.width / 48) * layout.w} // EM units
+            maxWidth={layout.w * gridCellSize} // EM units
-            maxHeight={(layout.h * theme.typography.fontSize * 2.5) / theme.typography.fontSize} // EM units
+            maxHeight={layout.h * gridCellSize} // EM units
             fillContainer={true}
           />
         </Paper>