diff --git a/frontend/src/basic/BookPage/index.tsx b/frontend/src/basic/BookPage/index.tsx index e09b0bfa..a4c21645 100644 --- a/frontend/src/basic/BookPage/index.tsx +++ b/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(false); + const [openNoRobot, setOpenNoRobot] = useState(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 ( @@ -93,6 +112,7 @@ const BookPage = ({ }; return ( + setOpenNoRobot(false)} setPage={setPage} /> {openMaker ? ( setOpenMaker(false)}> @@ -103,6 +123,8 @@ const BookPage = ({ setMaker={setMaker} fav={fav} setFav={setFav} + setPage={setPage} + hasRobot={hasRobot} /> @@ -130,6 +152,7 @@ const BookPage = ({ defaultFullscreen={false} onCurrencyChange={handleCurrencyChange} onTypeChange={handleTypeChange} + onOrderClicked={onOrderClicked} /> @@ -164,6 +187,7 @@ const BookPage = ({ defaultFullscreen={false} onCurrencyChange={handleCurrencyChange} onTypeChange={handleTypeChange} + onOrderClicked={onOrderClicked} /> )} diff --git a/frontend/src/basic/Main.tsx b/frontend/src/basic/Main.tsx index b96f754a..e8466ad0 100644 --- a/frontend/src/basic/Main.tsx +++ b/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(window.location.pathname.split('/')[1]); + const [page, setPage] = useState( + window.location.pathname.split('/')[1] == '' + ? 'offers' + : window.location.pathname.split('/')[1], + ); const [slideDirection, setSlideDirection] = useState({ 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 ( {/* load robot avatar image, set avatarLoaded: true */} setRobot({ ...robot, avatarLoaded: true })} /> { }} > - ( - - )} - /> ( - + +
+ +
+
)} /> - + { lastDayPremium={info.last_day_nonkyc_btc_premium} windowSize={windowSize} hasRobot={robot.avatarLoaded} + setPage={setPage} + setOrder={setOrder} /> @@ -275,7 +280,17 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => { } + render={(props: any) => ( + +
+ +
+
+ )} /> @@ -296,7 +311,7 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
0 && !showMatches} collapseAll={showMatches} onSubmit={() => setShowMatches(matches.length > 0)} onReset={() => setShowMatches(false)} submitButtonLabel={matches.length > 0 && !showMatches ? 'Submit' : 'Create order'} + setPage={setPage} /> diff --git a/frontend/src/basic/NavBar/NavBar.tsx b/frontend/src/basic/NavBar/NavBar.tsx index 5f9f3f79..931fffd9 100644 --- a/frontend/src/basic/NavBar/NavBar.tsx +++ b/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(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={} 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={ diff --git a/frontend/src/basic/NavBar/index.tsx b/frontend/src/basic/NavBar/index.tsx index 70f2e10c..8f6018ef 100644 --- a/frontend/src/basic/NavBar/index.tsx +++ b/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; diff --git a/frontend/src/basic/UserGenPage.js b/frontend/src/basic/UserGenPage.js index 02a3b4ff..0de1232b 100644 --- a/frontend/src/basic/UserGenPage.js +++ b/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({ diff --git a/frontend/src/components/BookTable/index.tsx b/frontend/src/components/BookTable/index.tsx index c0c74cc2..ed8c38ac 100644 --- a/frontend/src/components/BookTable/index.tsx +++ b/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, - maxWidth, - maxHeight, - fullWidth, - fullHeight, + fav = { currency: 1, type: 0 }, + maxWidth = 100, + maxHeight = 70, + fullWidth = 100, + 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)} /> ); diff --git a/frontend/src/components/Charts/DepthChart/index.tsx b/frontend/src/components/Charts/DepthChart/index.tsx index bf214c8c..077853e4 100644 --- a/frontend/src/components/Charts/DepthChart/index.tsx +++ b/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 = ({ diff --git a/frontend/src/components/Dialogs/Confirmation.tsx b/frontend/src/components/Dialogs/Confirmation.tsx new file mode 100644 index 00000000..27b1841e --- /dev/null +++ b/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 ? ( + + ) : ( + + ); +}; + +export default ConfirmationDialog; diff --git a/frontend/src/components/Dialogs/NoRobot.tsx b/frontend/src/components/Dialogs/NoRobot.tsx index bfb66ae3..98e7a677 100644 --- a/frontend/src/components/Dialogs/NoRobot.tsx +++ b/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 ( @@ -24,17 +33,12 @@ const NoRobotDialog = ({ open, onClose }: Props): JSX.Element => { - {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.')} - - + ); diff --git a/frontend/src/components/Dialogs/StoreToken.tsx b/frontend/src/components/Dialogs/StoreToken.tsx index ebf13f02..f8e05f36 100644 --- a/frontend/src/components/Dialogs/StoreToken.tsx +++ b/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 = ({ - open, - onClose, - copyIconColor, - onClickCopy, - onClickBack, - onClickDone, -}: Props): JSX.Element => { +const StoreTokenDialog = ({ open, onClose, onClickBack, onClickDone }: Props): JSX.Element => { const { t } = useTranslation(); return ( @@ -45,7 +36,7 @@ const StoreTokenDialog = ({ )}
- + - - + + systemClient.copyToClipboard(systemClient.getCookie('robot_token')) + } + > + ), diff --git a/frontend/src/components/Dialogs/index.ts b/frontend/src/components/Dialogs/index.ts index 2f2152c2..18b35e56 100644 --- a/frontend/src/components/Dialogs/index.ts +++ b/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'; diff --git a/frontend/src/components/MakerForm/MakerForm.tsx b/frontend/src/components/MakerForm/MakerForm.tsx index ded49a20..1d383688 100644 --- a/frontend/src/components/MakerForm/MakerForm.tsx +++ b/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') ? ( - setOpenDialogs(false)} - onClickCopy={() => systemClient.copyToClipboard(systemClient.getCookie('robot_token'))} - copyIconColor={'primary'} - onClickBack={() => setOpenDialogs(false)} - onClickDone={handleCreateOrder} - /> - ) : ( - setOpenDialogs(false)} /> - ); - }; return ( - + setOpenDialogs(false)} + setPage={setPage} + onClickDone={handleCreateOrder} + hasRobot={hasRobot} + />