diff --git a/frontend/src/components/Dialogs/NoRobotDialog.tsx b/frontend/src/components/Dialogs/NoRobotDialog.tsx new file mode 100644 index 00000000..ab9577c0 --- /dev/null +++ b/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 ( + + + {t("You do not have a robot avatar")} + + + + + {t("You need to generate a robot avatar in order to become an order maker")} + + + + + + + + + + ) +} + +export default NoRobotDialog; diff --git a/frontend/src/components/Dialogs/StoreTokenDialog.tsx b/frontend/src/components/Dialogs/StoreTokenDialog.tsx new file mode 100644 index 00000000..4e0b4ac4 --- /dev/null +++ b/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 ( + + + {t("Store your robot token")} + + + + + {t("You might need to recover your robot avatar in the future: store it safely. You can simply copy it into another application.")} + +
+ + + + + + , + }} + /> + + + + + + + + + + ) +} + +export default StoreTokenDialog; diff --git a/frontend/src/components/Dialogs/index.ts b/frontend/src/components/Dialogs/index.ts index db438bc6..a89a89bb 100644 --- a/frontend/src/components/Dialogs/index.ts +++ b/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"; diff --git a/frontend/src/components/MakerPage.js b/frontend/src/components/MakerPage.js index 7ac4ccb1..5b73845c 100644 --- a/frontend/src/components/MakerPage.js +++ b/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( - this.setState({openStoreToken:false})} - > - - {t("Store your robot token")} - - - - {t("You might need to recover your robot avatar in the future: store it safely. You can simply copy it into another application.")} - -
- - - (navigator.clipboard.writeText(getCookie("robot_token")) & this.props.setAppState({copiedToken:true}))}> - - - , - }} - /> - - - - - - - - ) - }else{ - return( - this.setState({openStoreToken:false})} - > - - {t("You do not have a robot avatar")} - - - - {t("You need to generate a robot avatar in order to become an order maker")} - - - - - - - - ) - } - } - makeOrderBox=()=>{ const { t } = this.props; return( @@ -759,17 +692,26 @@ class MakerPage extends Component { render() { const { t } = this.props; return ( - - {/* - - ORDER MAKER - - */} - + + {getCookie("robot_token") ? + 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} + /> + : + this.setState({openStoreToken:false})} + /> + } - - {this.makeOrderBox()} - + + {this.makeOrderBox()} + {/* conditions to disable the make button */} diff --git a/frontend/src/components/OrderPage.js b/frontend/src/components/OrderPage.js index f610f315..c0f031a4 100644 --- a/frontend/src/components/OrderPage.js +++ b/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( {this.InactiveMakerDialog()} - {this.StoreTokenDialog()} + {this.tokenDialog()}
@@ -228,7 +227,7 @@ class OrderPage extends Component { return( <> {this.InactiveMakerDialog()} - {this.StoreTokenDialog()} + {this.tokenDialog()} - - - - ) - }else{ - return( - this.setState({openStoreToken:false})} - > - - {t("You do not have a robot avatar")} - - - - {t("You need to generate a robot avatar in order to become an order maker")} - - - - - - - - ) - } -} + tokenDialog = () =>{ + return(getCookie("robot_token") ? + 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()) + }/> + : + this.setState({openStoreToken:false})} + /> + ) + } handleClickConfirmCollaborativeCancelButton=()=>{ const requestOptions = {