Refactor confirmation Dialogs

frontend/src/basic/BookPage/index.tsx

@@ -1,15 +1,17 @@
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, Typography, Grid, ButtonGroup, Dialog, Box } from '@mui/material';
+import { Button, Grid, ButtonGroup, Dialog, Box } from '@mui/material';
 import { useHistory } from 'react-router-dom';
 import DepthChart from '../../components/Charts/DepthChart';
 
+import { NoRobotDialog } from '../../components/Dialogs';
+import MakerForm from '../../components/MakerForm';
+import BookTable from '../../components/BookTable';
+import { Page } from '../NavBar';
 import { Book, Favorites, LimitList, Maker } from '../../models';
 
 // Icons
 import { BarChart, FormatListBulleted } from '@mui/icons-material';
-import MakerForm from '../../components/MakerForm';
-import BookTable from '../../components/BookTable';
 
 interface BookPageProps {
   book: Book;
@@ -22,6 +24,9 @@ interface BookPageProps {
   lastDayPremium: number;
   maker: Maker;
   setMaker: (state: Maker) => void;
+  hasRobot: boolean;
+  setPage: (state: Page) => void;
+  setOrder: (state: number) => void;
 }
 
 const BookPage = ({
@@ -35,11 +40,15 @@ const BookPage = ({
   maker,
   setMaker,
   windowSize,
+  hasRobot = false,
+  setPage = () => null,
+  setOrder = () => null,
 }: BookPageProps): JSX.Element => {
   const { t } = useTranslation();
   const history = useHistory();
   const [view, setView] = useState<'list' | 'depth'>('list');
   const [openMaker, setOpenMaker] = useState<boolean>(false);
+  const [openNoRobot, setOpenNoRobot] = useState<boolean>(false);
 
   const doubleView = windowSize.width > 115;
   const width = windowSize.width * 0.9;
@@ -63,6 +72,16 @@ const BookPage = ({
     setFav({ ...fav, type: val });
   };
 
+  const onOrderClicked = function (id: number) {
+    if (hasRobot) {
+      history.push('/order/' + id);
+      setPage('order');
+      setOrder(id);
+    } else {
+      setOpenNoRobot(true);
+    }
+  };
+
   const NavButtons = function () {
     return (
       <ButtonGroup variant='contained' color='inherit'>
@@ -93,6 +112,7 @@ const BookPage = ({
   };
   return (
     <Grid container direction='column' alignItems='center' spacing={1} sx={{ minWidth: 400 }}>
+      <NoRobotDialog open={openNoRobot} onClose={() => setOpenNoRobot(false)} setPage={setPage} />
       {openMaker ? (
         <Dialog open={openMaker} onClose={() => setOpenMaker(false)}>
           <Box sx={{ maxWidth: '18em', padding: '0.5em' }}>
@@ -103,6 +123,8 @@ const BookPage = ({
               setMaker={setMaker}
               fav={fav}
               setFav={setFav}
+              setPage={setPage}
+              hasRobot={hasRobot}
             />
           </Box>
         </Dialog>
@@ -130,6 +152,7 @@ const BookPage = ({
                 defaultFullscreen={false}
                 onCurrencyChange={handleCurrencyChange}
                 onTypeChange={handleTypeChange}
+                onOrderClicked={onOrderClicked}
               />
             </Grid>
             <Grid item>
@@ -164,6 +187,7 @@ const BookPage = ({
             defaultFullscreen={false}
             onCurrencyChange={handleCurrencyChange}
             onTypeChange={handleTypeChange}
+            onOrderClicked={onOrderClicked}
           />
         )}
       </Grid>

frontend/src/basic/Main.tsx

@@ -60,9 +60,14 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
 
   const theme = useTheme();
   const history = useHistory();
+
   const Router = window.NativeRobosats != null ? HashRouter : BrowserRouter;
   const basename = window.NativeRobosats != null ? window.location.pathname : '';
-  const [page, setPage] = useState<Page>(window.location.pathname.split('/')[1]);
+  const [page, setPage] = useState<Page>(
+    window.location.pathname.split('/')[1] == ''
+      ? 'offers'
+      : window.location.pathname.split('/')[1],
+  );
   const [slideDirection, setSlideDirection] = useState<SlideDirection>({
     in: undefined,
     out: undefined,
@@ -145,7 +150,6 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
     };
 
     apiClient.post('/api/user/', requestBody).then((data: any) => {
-      console.log(data);
       setOrder(
         data.active_order_id
           ? data.active_order_id
@@ -182,12 +186,14 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
     }
   }, []);
 
+  console.log(page);
+
   return (
     <Router basename={basename}>
       {/* load robot avatar image, set avatarLoaded: true */}
       <RobotAvatar
         style={{ display: 'none' }}
-        nickname={robot.avatarLoaded ? robot.nickname : null}
+        nickname={robot.nickname}
         onLoad={() => setRobot({ ...robot, avatarLoaded: true })}
       />
       <Box
@@ -199,33 +205,30 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
         }}
       >
         <Switch>
-          <Route
-            exact
-            path='/'
-            render={(props: any) => (
-              <UserGenPage
-                setPage={setPage}
-                match={props.match}
-                theme={theme}
-                robot={robot}
-                setRobot={setRobot}
-              />
-            )}
-          />
           <Route
             path='/robot/:refCode?'
             render={(props: any) => (
+              <Slide
+                direction={page === 'robot' ? slideDirection.in : slideDirection.out}
+                in={page === 'robot'}
+                appear={slideDirection.in != undefined}
+              >
+                <div>
                   <UserGenPage
                     setPage={setPage}
+                    order={order}
+                    setOrder={setOrder}
                     match={props.match}
                     theme={theme}
                     robot={robot}
                     setRobot={setRobot}
                   />
+                </div>
+              </Slide>
             )}
           />
 
-          <Route path='/offers'>
+          <Route exact path={['/offers', '/']}>
             <Slide
               direction={page === 'offers' ? slideDirection.in : slideDirection.out}
               in={page === 'offers'}
@@ -244,6 +247,8 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
                   lastDayPremium={info.last_day_nonkyc_btc_premium}
                   windowSize={windowSize}
                   hasRobot={robot.avatarLoaded}
+                  setPage={setPage}
+                  setOrder={setOrder}
                 />
               </div>
             </Slide>
@@ -275,7 +280,17 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
 
           <Route
             path='/order/:orderId'
-            render={(props: any) => <OrderPage theme={theme} history={history} {...props} />}
+            render={(props: any) => (
+              <Slide
+                direction={page === 'order' ? slideDirection.in : slideDirection.out}
+                in={page === 'order'}
+                appear={slideDirection.in != undefined}
+              >
+                <div>
+                  <OrderPage theme={theme} history={history} {...props} />
+                </div>
+              </Slide>
+            )}
           />
 
           <Route path='/settings'>
@@ -296,7 +311,7 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
         </Switch>
       </Box>
       <NavBar
-        nickname={robot.nickname}
+        nickname={robot.avatarLoaded ? robot.nickname : null}
         width={windowSize.width}
         height={navbarHeight}
         page={page}

frontend/src/basic/MakerPage/index.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, Grid, Paper, Collapse, Typography } from '@mui/material';
+import { Grid, Paper, Collapse, Typography } from '@mui/material';
 
 import { LimitList, Maker, Book, Favorites } from '../../models';
 
@@ -8,6 +8,7 @@ import { filterOrders } from '../../utils';
 
 import MakerForm from '../../components/MakerForm';
 import BookTable from '../../components/BookTable';
+
 import { Page } from '../NavBar';
 
 interface MakerPageProps {
@@ -97,11 +98,13 @@ const MakerPage = ({
               setOrder(id);
               setPage('order');
             }}
+            hasRobot={hasRobot}
             disableRequest={matches.length > 0 && !showMatches}
             collapseAll={showMatches}
             onSubmit={() => setShowMatches(matches.length > 0)}
             onReset={() => setShowMatches(false)}
             submitButtonLabel={matches.length > 0 && !showMatches ? 'Submit' : 'Create order'}
+            setPage={setPage}
           />
         </Paper>
       </Grid>

frontend/src/basic/NavBar/NavBar.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useHistory } from 'react-router-dom';
-import { Tabs, Tab, Paper, useTheme } from '@mui/material';
+import { Tabs, Tab, Paper, useTheme, Tooltip } from '@mui/material';
 import MoreTooltip from './MoreTooltip';
 
 import { OpenDialogs } from '../MainDialogs';
@@ -24,7 +24,6 @@ interface NavBarProps {
   page: Page;
   nickname?: string | null;
   setPage: (state: Page) => void;
-  slideDirection: { in: Direction; out: Direction };
   setSlideDirection: (state: { in: Direction; out: Direction }) => void;
   width: number;
   height: number;
@@ -38,7 +37,6 @@ interface NavBarProps {
 const NavBar = ({
   page,
   setPage,
-  slideDirection,
   setSlideDirection,
   open,
   nickname = null,
@@ -54,8 +52,6 @@ const NavBar = ({
   const history = useHistory();
   const smallBar = width < 50;
 
-  const [newPage, setNewPage] = useState<Page>(history.location.pathname.split('/')[1]);
-
   const tabSx = smallBar
     ? { position: 'relative', bottom: nickname ? '0.8em' : '0em', minWidth: '1em' }
     : { position: 'relative', bottom: '1em', minWidth: '2em' };
@@ -80,7 +76,7 @@ const NavBar = ({
       return null;
     } else {
       handleSlideDirection(page, newPage);
-      setNewPage(newPage);
+      setPage(newPage);
       const param = newPage === 'order' ? order ?? '' : '';
       setTimeout(
         () => history.push(`/${newPage}/${param}`),
@@ -89,10 +85,6 @@ const NavBar = ({
     }
   };
 
-  useEffect(() => {
-    setPage(newPage);
-  }, [slideDirection, newPage]);
-
   useEffect(() => {
     setOpen(closeAll);
   }, [page]);
@@ -151,7 +143,7 @@ const NavBar = ({
           sx={tabSx}
           label={smallBar ? undefined : t('Order')}
           value='order'
-          disabled={!hasRobot}
+          disabled={!hasRobot || order == null}
           icon={<Assignment />}
           iconPosition='start'
         />
@@ -168,6 +160,7 @@ const NavBar = ({
           label={smallBar ? undefined : t('More')}
           value='none'
           onClick={(e) => {
+            console.log(e);
             open.more ? null : setOpen({ ...open, more: true });
           }}
           icon={

frontend/src/basic/NavBar/index.tsx

@@ -1,5 +1,4 @@
 import NavBar from './NavBar';
 
 export type Page = 'robot' | 'order' | 'create' | 'offers' | 'settings' | 'none';
-export type { OpenDialogs } from './MoreTooltip';
 export default NavBar;

frontend/src/basic/UserGenPage.js

@@ -70,10 +70,16 @@ class UserGenPage extends Component {
         ref_code: refCode,
       };
     });
-    requestBody.then((body) => console.log(body));
     requestBody.then((body) =>
       apiClient.post('/api/user/', body).then((data) => {
         this.setState({ found: data.found, bad_request: data.bad_request });
+        this.props.setOrder(
+          data.active_order_id
+            ? data.active_order_id
+            : data.last_order_id
+            ? data.last_order_id
+            : this.props.order,
+        );
         // Add nick and token to App state (token only if not a bad request)
         data.bad_request
           ? this.props.setRobot({

frontend/src/components/BookTable/index.tsx

@@ -29,7 +29,7 @@ import RobotAvatar from '../RobotAvatar';
 // Icons
 import { Fullscreen, FullscreenExit, Refresh } from '@mui/icons-material';
 
-interface Props {
+interface BookTableProps {
   clickRefresh?: () => void;
   book: Book;
   fav?: Favorites;
@@ -45,16 +45,17 @@ interface Props {
   showNoResults?: boolean;
   onCurrencyChange?: (e: any) => void;
   onTypeChange?: (mouseEvent: any, val: number) => void;
+  onOrderClicked?: (id: number) => void;
 }
 
 const BookTable = ({
   clickRefresh,
   book,
-  fav,
+  fav = { currency: 1, type: 0 },
-  maxWidth,
+  maxWidth = 100,
-  maxHeight,
+  maxHeight = 70,
-  fullWidth,
+  fullWidth = 100,
-  fullHeight,
+  fullHeight = 70,
   defaultFullscreen = false,
   elevation = 6,
   fillContainer = false,
@@ -63,7 +64,8 @@ const BookTable = ({
   showNoResults = true,
   onCurrencyChange,
   onTypeChange,
-}: Props): JSX.Element => {
+  onOrderClicked = () => null,
+}: BookTableProps): JSX.Element => {
   const { t } = useTranslation();
   const theme = useTheme();
   const history = useHistory();
@@ -753,7 +755,7 @@ const BookTable = ({
             setPageSize(newPageSize);
             setUseDefaultPageSize(false);
           }}
-          onRowClick={(params: any) => history.push('/order/' + params.row.id)} // Whole row is clickable, but the mouse only looks clickly in some places.
+          onRowClick={(params: any) => onOrderClicked(params.row.id)}
         />
       </Paper>
     );

frontend/src/components/Charts/DepthChart/index.tsx

@@ -36,7 +36,7 @@ interface DepthChartProps {
   maxWidth: number;
   maxHeight: number;
   fillContainer?: boolean;
-  elevation: number;
+  elevation?: number;
 }
 
 const DepthChart: React.FC<DepthChartProps> = ({

frontend/src/components/Dialogs/Confirmation.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { NoRobotDialog, StoreTokenDialog } from '.';
+import { Page } from '../../basic/NavBar';
+
+interface ConfirmationDialogProps {
+  open: boolean;
+  onClose: () => void;
+  setPage: (state: Page) => void;
+  onClickDone: () => void;
+  hasRobot: boolean;
+}
+
+const ConfirmationDialog = ({
+  open,
+  onClose,
+  hasRobot,
+  setPage,
+  onClickDone,
+}: ConfirmationDialogProps): JSX.Element => {
+  return hasRobot ? (
+    <StoreTokenDialog
+      open={open}
+      onClose={onClose}
+      onClickBack={onClose}
+      onClickDone={onClickDone}
+    />
+  ) : (
+    <NoRobotDialog open={open} onClose={onClose} setPage={setPage} />
+  );
+};
+
+export default ConfirmationDialog;

frontend/src/components/Dialogs/NoRobot.tsx

@@ -8,15 +8,24 @@ import {
   DialogContentText,
   Button,
 } from '@mui/material';
-import { Link } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
+import { Page } from '../../basic/NavBar';
 
 interface Props {
   open: boolean;
   onClose: () => void;
+  setPage: (state: Page) => void;
 }
 
-const NoRobotDialog = ({ open, onClose }: Props): JSX.Element => {
+const NoRobotDialog = ({ open, onClose, setPage }: Props): JSX.Element => {
   const { t } = useTranslation();
+  const history = useHistory();
+
+  const handleClickGenerate = function () {
+    onClose();
+    setPage('robot');
+    history.push('/robot');
+  };
 
   return (
     <Dialog open={open} onClose={onClose}>
@@ -24,17 +33,12 @@ const NoRobotDialog = ({ open, onClose }: Props): JSX.Element => {
 
       <DialogContent>
         <DialogContentText>
-          {t('You need to generate a robot avatar in order to become an order maker')}
+          {t('Generate a robot avatar first. Then create your own order.')}
         </DialogContentText>
       </DialogContent>
 
       <DialogActions>
-        <Button onClick={onClose} autoFocus>
+        <Button onClick={handleClickGenerate}>{t('Generate Robot')}</Button>
-          {t('Go back')}
-        </Button>
-        <Button onClick={onClose} to='/' component={Link}>
-          {t('Generate Robot')}
-        </Button>
       </DialogActions>
     </Dialog>
   );

frontend/src/components/Dialogs/StoreToken.tsx

@@ -18,20 +18,11 @@ import ContentCopy from '@mui/icons-material/ContentCopy';
 interface Props {
   open: boolean;
   onClose: () => void;
-  copyIconColor: string;
-  onClickCopy: () => void;
   onClickBack: () => void;
   onClickDone: () => void;
 }
 
-const StoreTokenDialog = ({
+const StoreTokenDialog = ({ open, onClose, onClickBack, onClickDone }: Props): JSX.Element => {
-  open,
-  onClose,
-  copyIconColor,
-  onClickCopy,
-  onClickBack,
-  onClickDone,
-}: Props): JSX.Element => {
   const { t } = useTranslation();
 
   return (
@@ -45,7 +36,7 @@ const StoreTokenDialog = ({
           )}
         </DialogContentText>
         <br />
-        <Grid align='center'>
+        <Grid container>
           <TextField
             sx={{ width: '100%', maxWidth: '550px' }}
             disabled
@@ -56,8 +47,12 @@ const StoreTokenDialog = ({
             InputProps={{
               endAdornment: (
                 <Tooltip disableHoverListener enterTouchDelay={0} title={t('Copied!')}>
-                  <IconButton onClick={onClickCopy}>
+                  <IconButton
-                    <ContentCopy color={copyIconColor} />
+                    onClick={() =>
+                      systemClient.copyToClipboard(systemClient.getCookie('robot_token'))
+                    }
+                  >
+                    <ContentCopy color='primary' />
                   </IconButton>
                 </Tooltip>
               ),

frontend/src/components/Dialogs/index.ts

@@ -4,6 +4,7 @@ export { default as InfoDialog } from './Info';
 export { default as LearnDialog } from './Learn';
 export { default as NoRobotDialog } from './NoRobot';
 export { default as StoreTokenDialog } from './StoreToken';
+export { default as ConfirmationDialog } from './Confirmation';
 export { default as CoordinatorSummaryDialog } from './CoordinatorSummary';
 export { default as ProfileDialog } from './Profile';
 export { default as StatsDialog } from './Stats';

frontend/src/components/MakerForm/MakerForm.tsx

@@ -29,7 +29,7 @@ import { LimitList, Maker, Favorites, defaultMaker } from '../../models';
 import { LocalizationProvider, TimePicker } from '@mui/x-date-pickers';
 import DateFnsUtils from '@date-io/date-fns';
 import { useHistory } from 'react-router-dom';
-import { StoreTokenDialog, NoRobotDialog } from '../Dialogs';
+import { StoreTokenDialog, NoRobotDialog, ConfirmationDialog } from '../Dialogs';
 import { apiClient } from '../../services/api';
 import { systemClient } from '../../services/System';
 
@@ -41,6 +41,7 @@ import { pn } from '../../utils';
 
 import { SelfImprovement, Lock, HourglassTop, DeleteSweep, Edit } from '@mui/icons-material';
 import { LoadingButton } from '@mui/lab';
+import { Page } from '../../basic/NavBar';
 
 interface MakerFormProps {
   limits: { list: LimitList; loading: boolean };
@@ -56,6 +57,8 @@ interface MakerFormProps {
   onReset?: () => void;
   submitButtonLabel?: string;
   onOrderCreated?: (id: number) => void;
+  hasRobot?: boolean;
+  setPage?: (state: Page) => void;
 }
 
 const MakerForm = ({
@@ -72,6 +75,8 @@ const MakerForm = ({
   onReset = () => {},
   submitButtonLabel = 'Create Order',
   onOrderCreated = () => null,
+  hasRobot = true,
+  setPage = () => null,
 }: MakerFormProps): JSX.Element => {
   const { t } = useTranslation();
   const theme = useTheme();
@@ -423,23 +428,15 @@ const MakerForm = ({
     );
   };
 
-  const ConfirmationDialogs = function () {
-    return systemClient.getCookie('robot_token') ? (
-      <StoreTokenDialog
-        open={openDialogs}
-        onClose={() => setOpenDialogs(false)}
-        onClickCopy={() => systemClient.copyToClipboard(systemClient.getCookie('robot_token'))}
-        copyIconColor={'primary'}
-        onClickBack={() => setOpenDialogs(false)}
-        onClickDone={handleCreateOrder}
-      />
-    ) : (
-      <NoRobotDialog open={openDialogs} onClose={() => setOpenDialogs(false)} />
-    );
-  };
   return (
     <Box>
-      <ConfirmationDialogs />
+      <ConfirmationDialog
+        open={openDialogs}
+        onClose={() => setOpenDialogs(false)}
+        setPage={setPage}
+        onClickDone={handleCreateOrder}
+        hasRobot={hasRobot}
+      />
       <Collapse in={limits.list.length == 0}>
         <div style={{ display: limits.list.length == 0 ? '' : 'none' }}>
           <LinearProgress />