Create StoreToken and NoRobot dialogs

frontend/src/components/Dialogs/NoRobotDialog.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import {
+  Dialog,
+  DialogTitle,
+  DialogActions,  
+  DialogContent,
+  DialogContentText,
+  Button, 
+} from "@mui/material"
+import { Link } from 'react-router-dom'
+
+type Props = {
+  open: boolean;
+  onClose: () => void;
+}
+
+const NoRobotDialog = ({
+  open, 
+  onClose,
+}: Props): JSX.Element => {
+  const { t } = useTranslation();
+
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      >
+      <DialogTitle>
+        {t("You do not have a robot avatar")}
+      </DialogTitle>
+
+      <DialogContent>
+        <DialogContentText>
+          {t("You need to generate a robot avatar in order to become an order maker")}
+        </DialogContentText>
+      </DialogContent>
+
+      <DialogActions>
+        <Button onClick={onClose} autoFocus>{t("Go back")}</Button>
+        <Button onClick={onClose} to="/" component={Link}>{t("Generate Robot")}</Button>
+      </DialogActions>
+
+    </Dialog>
+  )
+}
+
+export default NoRobotDialog;

frontend/src/components/Dialogs/StoreTokenDialog.tsx

@@ -0,0 +1,80 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import {
+  Dialog,
+  DialogTitle,
+  Tooltip, 
+  IconButton,
+  TextField,
+  DialogActions,  
+  DialogContent,
+  DialogContentText,
+  Button, 
+  Grid,
+} from "@mui/material"
+import { getCookie } from "../../utils/cookies";
+import ContentCopy from "@mui/icons-material/ContentCopy";
+
+type Props = {
+  open: boolean;
+  onClose: () => void;
+  copyIconColor: string;
+  onClickCopy: () => void;
+  onClickBack: () => void;
+  onClickDone: () => void;
+}
+
+const StoreTokenDialog = ({
+  open, 
+  onClose,
+  copyIconColor,
+  onClickCopy,
+  onClickBack,
+  onClickDone,
+}: Props): JSX.Element => {
+  const { t } = useTranslation();
+
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      >
+      <DialogTitle >
+        {t("Store your robot token")}
+      </DialogTitle>
+
+      <DialogContent>
+        <DialogContentText>
+          {t("You might need to recover your robot avatar in the future: store it safely. You can simply copy it into another application.")}
+        </DialogContentText>
+        <br/>
+        <Grid align="center">
+          <TextField
+            sx={{width:"100%", maxWidth:"550px"}}
+            disabled
+            label={t("Back it up!")}
+            value={getCookie("robot_token")}
+            variant='filled'
+            size='small'
+            InputProps={{
+              endAdornment:
+              <Tooltip disableHoverListener enterTouchDelay={0} title={t("Copied!")}>
+                <IconButton onClick={onClickCopy}>
+                  <ContentCopy color={copyIconColor}/>
+                </IconButton>
+              </Tooltip>,
+              }}
+            />
+        </Grid>
+      </DialogContent>
+
+      <DialogActions>
+        <Button onClick={onClickBack} autoFocus>{t("Go back")}</Button>
+        <Button onClick={onClickDone}>{t("Done")}</Button>
+      </DialogActions>
+
+    </Dialog>
+  )
+}
+
+export default StoreTokenDialog;

frontend/src/components/Dialogs/index.ts

@@ -1,2 +1,4 @@
 export { default as CommunityDialog } from "./CommunityDialog";
 export { default as InfoDialog } from "./InfoDialog";
+export { default as StoreTokenDialog } from "./StoreTokenDialog";
+export { default as NoRobotDialog } from "./NoRobotDialog";

frontend/src/components/MakerPage.js

@@ -5,6 +5,7 @@ import RangeSlider from "./RangeSlider";
 import { LocalizationProvider, TimePicker}  from '@mui/lab';
 import DateFnsUtils from "@date-io/date-fns";
 import { Link as LinkRouter } from 'react-router-dom'
+import { StoreTokenDialog, NoRobotDialog } from "./Dialogs";
 
 import FlagWithProps from './FlagWithProps';
 import AutocompletePayments from './AutocompletePayments';
@@ -18,7 +19,6 @@ import BuySatsIcon from "./icons/BuySatsIcon";
 import BuySatsCheckedIcon from "./icons/BuySatsCheckedIcon";
 import SellSatsIcon from "./icons/SellSatsIcon";
 import SellSatsCheckedIcon from "./icons/SellSatsCheckedIcon";
-import ContentCopy from "@mui/icons-material/ContentCopy";
 
 import { getCookie } from "../utils/cookies";
 import { pn } from "../utils/prettyNumbers";
@@ -667,73 +667,6 @@ class MakerPage extends Component {
         )
     }
 
-    StoreTokenDialog = () =>{
-        const { t } = this.props;
-
-        // If there is a robot cookie, prompt user to store it
-        // Else, prompt user to generate a robot
-        if (getCookie("robot_token")){
-            return(
-                <Dialog
-                open={this.state.openStoreToken}
-                onClose={() => this.setState({openStoreToken:false})}
-                >
-                    <DialogTitle >
-                    {t("Store your robot token")}
-                    </DialogTitle>
-                    <DialogContent>
-                    <DialogContentText>
-                        {t("You might need to recover your robot avatar in the future: store it safely. You can simply copy it into another application.")}
-                    </DialogContentText>
-                    <br/>
-                    <Grid align="center">
-                        <TextField
-                            sx={{width:"100%", maxWidth:"550px"}}
-                            disabled
-                            label={t("Back it up!")}
-                            value={getCookie("robot_token") }
-                            variant='filled'
-                            size='small'
-                            InputProps={{
-                                endAdornment:
-                                <Tooltip disableHoverListener enterTouchDelay={0} title={t("Copied!")}>
-                                    <IconButton onClick= {()=> (navigator.clipboard.writeText(getCookie("robot_token")) & this.props.setAppState({copiedToken:true}))}>
-                                        <ContentCopy color={this.props.copiedToken ? "inherit" : "primary"}/>
-                                    </IconButton>
-                                </Tooltip>,
-                                }}
-                            />
-                    </Grid>
-                    </DialogContent>
-                    <DialogActions>
-                        <Button onClick={() => this.setState({openStoreToken:false})} autoFocus>{t("Go back")}</Button>
-                        <Button onClick={this.handleCreateOfferButtonPressed}>{t("Done")}</Button>
-                    </DialogActions>
-                </Dialog>
-            )
-        }else{
-            return(
-                <Dialog
-                open={this.state.openStoreToken}
-                onClose={() => this.setState({openStoreToken:false})}
-                >
-                    <DialogTitle>
-                        {t("You do not have a robot avatar")}
-                    </DialogTitle>
-                    <DialogContent>
-                        <DialogContentText>
-                            {t("You need to generate a robot avatar in order to become an order maker")}
-                        </DialogContentText>
-                    </DialogContent>
-                    <DialogActions>
-                        <Button onClick={() => this.setState({openStoreToken:false})} autoFocus>{t("Go back")}</Button>
-                        <Button onClick={() => this.setState({openStoreToken:false})} to="/" component={LinkRouter}>{t("Generate Robot")}</Button>
-                    </DialogActions>
-                </Dialog>
-            )
-        }
-  }
-
     makeOrderBox=()=>{
         const { t } = this.props;
         return(
@@ -759,17 +692,26 @@ class MakerPage extends Component {
   render() {
     const { t } = this.props;
     return (
-            <Grid container align="center" spacing={1} sx={{minWidth:380}}>
-                {/* <Grid item xs={12} align="center" sx={{minWidth:380}}>
-                    <Typography component="h4" variant="h4">
-                        ORDER MAKER
-                    </Typography>
-                </Grid> */}
-                <this.StoreTokenDialog/>
+        <Grid container align="center" spacing={1} sx={{minWidth:380}}>
+            {getCookie("robot_token") ?
+                <StoreTokenDialog
+                    open={this.state.openStoreToken}
+                    onClose={() => this.setState({openStoreToken:false})}
+                    onClickCopy={()=> (navigator.clipboard.writeText(getCookie("robot_token")) & this.props.setAppState({copiedToken:true}))}
+                    copyIconColor={this.props.copiedToken ? "inherit" : "primary"}
+                    onClickBack={() => this.setState({openStoreToken:false})}
+                    onClickDone={this.handleCreateOfferButtonPressed}
+                    />
+                :
+                <NoRobotDialog
+                    open={this.state.openStoreToken}
+                    onClose={() => this.setState({openStoreToken:false})}
+                    />
+            }
 
-                <Grid item xs={12} align="center">
-                    {this.makeOrderBox()}
-                </Grid>
+            <Grid item xs={12} align="center">
+                {this.makeOrderBox()}
+            </Grid>
 
             <Grid item xs={12} align="center">
                 {/* conditions to disable the make button */}

frontend/src/components/OrderPage.js

@@ -2,14 +2,14 @@ import React, { Component } from "react";
 import { withTranslation} from "react-i18next";
 import {TextField,Chip, Tooltip, IconButton, Badge, Tab, Tabs, Alert, Paper, CircularProgress, Button , Grid, Typography, List, ListItem, ListItemIcon, ListItemText, ListItemAvatar, Avatar, Divider, Box, LinearProgress, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle} from "@mui/material"
 import Countdown, { zeroPad } from 'react-countdown';
-import LinearDeterminate from './LinearDeterminate';
-import MediaQuery from 'react-responsive'
-import currencyDict from '../../static/assets/currencies.json';
-import { Link as LinkRouter } from 'react-router-dom'
+import { StoreTokenDialog, NoRobotDialog } from "./Dialogs";
 
+import currencyDict from '../../static/assets/currencies.json';
 import PaymentText from './PaymentText'
 import TradeBox from "./TradeBox";
 import FlagWithProps from './FlagWithProps'
+import LinearDeterminate from './LinearDeterminate';
+import MediaQuery from 'react-responsive'
 import { t } from "i18next";
 
 // icons
@@ -20,7 +20,6 @@ import PaymentsIcon from '@mui/icons-material/Payments';
 import ArticleIcon from '@mui/icons-material/Article';
 import SendReceiveIcon from "./icons/SendReceiveIcon";
 import HourglassTopIcon from '@mui/icons-material/HourglassTop';
-import ContentCopy from "@mui/icons-material/ContentCopy";
 
 import { getCookie } from "../utils/cookies";
 import { pn } from "../utils/prettyNumbers";
@@ -182,7 +181,7 @@ class OrderPage extends Component {
     return(
         <Grid container align="center" alignItems="stretch" justifyContent="center" style={{ display: "flex"}}>
           {this.InactiveMakerDialog()}
-          {this.StoreTokenDialog()}
+          {this.tokenDialog()}
           <div style={{maxWidth:120}}>
           <Tooltip placement="top" enterTouchDelay={500} enterDelay={700} enterNextDelay={2000} title={t("Enter amount of fiat to exchange for bitcoin")}>
             <Paper elevation={5} sx={{maxHeight:40}}>
@@ -228,7 +227,7 @@ class OrderPage extends Component {
       return(
         <>
         {this.InactiveMakerDialog()}
-        {this.StoreTokenDialog()}
+        {this.tokenDialog()}
         <Button sx={{height:38}} variant='contained' color='primary'
                 onClick={this.props.copiedToken ? (this.state.maker_status=='Inactive' ? this.handleClickOpenInactiveMakerDialog : this.takeOrder) : (() => this.setState({openStoreToken:true}))}>
                 {t("Take Order")}
@@ -355,72 +354,26 @@ class OrderPage extends Component {
     )
   }
 
-  StoreTokenDialog = () =>{
-    const { t } = this.props;
-
-    // If there is a robot cookie, prompt user to store it
-    // Else, prompt user to generate a robot
-    if (getCookie("robot_token")){
-        return(
-            <Dialog
-            open={this.state.openStoreToken}
-            onClose={() => this.setState({openStoreToken:false})}
-            >
-                <DialogTitle >
-                {t("Store your robot token")}
-                </DialogTitle>
-                <DialogContent>
-                <DialogContentText>
-                    {t("You might need to recover your robot avatar in the future: store it safely. You can simply copy it into another application.")}
-                </DialogContentText>
-                <br/>
-                <Grid align="center">
-                    <TextField
-                        sx={{width:"100%", maxWidth:"550px"}}
-                        disabled
-                        label={t("Back it up!")}
-                        value={getCookie("robot_token") }
-                        variant='filled'
-                        size='small'
-                        InputProps={{
-                            endAdornment:
-                            <Tooltip disableHoverListener enterTouchDelay={0} title={t("Copied!")}>
-                                <IconButton onClick= {()=> (navigator.clipboard.writeText(getCookie("robot_token")) & this.props.setAppState({copiedToken:true}))}>
-                                    <ContentCopy color={this.props.copiedToken ? "inherit" : "primary"}/>
-                                </IconButton>
-                            </Tooltip>,
-                            }}
-                        />
-                </Grid>
-                </DialogContent>
-                <DialogActions>
-                    <Button onClick={() => this.setState({openStoreToken:false})} autoFocus>{t("Go back")}</Button>
-                    <Button onClick={() => this.setState({openStoreToken:false}) & (this.state.maker_status=='Inactive' ? this.handleClickOpenInactiveMakerDialog() : this.takeOrder())}>{t("Done")}</Button>
-                </DialogActions>
-            </Dialog>
-        )
-    }else{
-        return(
-            <Dialog
-            open={this.state.openStoreToken}
-            onClose={() => this.setState({openStoreToken:false})}
-            >
-                <DialogTitle>
-                    {t("You do not have a robot avatar")}
-                </DialogTitle>
-                <DialogContent>
-                    <DialogContentText>
-                        {t("You need to generate a robot avatar in order to become an order maker")}
-                    </DialogContentText>
-                </DialogContent>
-                <DialogActions>
-                    <Button onClick={() => this.setState({openStoreToken:false})} autoFocus>{t("Go back")}</Button>
-                    <Button onClick={() => this.setState({openStoreToken:false})} to="/" component={LinkRouter}>{t("Generate Robot")}</Button>
-                </DialogActions>
-            </Dialog>
-        )
-    }
-}
+  tokenDialog = () =>{
+    return(getCookie("robot_token") ?
+      <StoreTokenDialog
+        open={this.state.openStoreToken}
+        onClose={() => this.setState({openStoreToken:false})}
+        onClickCopy={()=> (navigator.clipboard.writeText(getCookie("robot_token")) & this.props.setAppState({copiedToken:true}))}
+        copyIconColor={this.props.copiedToken ? "inherit" : "primary"}
+        onClickBack={() => this.setState({openStoreToken:false})}
+        onClickDone={() => this.setState({openStoreToken:false}) & 
+            (this.state.maker_status=='Inactive' ? 
+            this.handleClickOpenInactiveMakerDialog() 
+            : this.takeOrder())
+          }/>
+      :
+      <NoRobotDialog
+        open={this.state.openStoreToken}
+        onClose={() => this.setState({openStoreToken:false})}
+        />
+    )
+  }
 
   handleClickConfirmCollaborativeCancelButton=()=>{
       const requestOptions = {