Mirror/robosats
1
0
Fork 0
mirror of https://github.com/RoboSats/robosats.git synced 2024-12-13 10:56:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add show more and Dialogs

Browse Source
This commit is contained in:
Reckless_Satoshi 2022-10-28 05:41:48 -07:00
parent da8b70091b
commit 20b2b3dcd6
No known key found for this signature in database
GPG Key ID: 9C4585B561315571
12 changed files with 887 additions and 789 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
frontend/src/basic/Main.tsx
View File

@ -1,13 +1,14 @@
import React, { useEffect, useState } from 'react';
import { HashRouter, BrowserRouter, Switch, Route, useHistory } from 'react-router-dom';
import { useTheme, IconButton, Box, Slide } from '@mui/material';
import { useTheme, Box, Slide } from '@mui/material';
import UserGenPage from './UserGenPage';
import MakerPage from './MakerPage';
import BookPage from './BookPage';
import OrderPage from './OrderPage';
import SettingsPage from './SettingsPage';
import NavBar from './NavBar';
import { LearnDialog } from '../components/Dialogs';
import MainDialogs, { OpenDialogs } from './MainDialogs';
import { apiClient } from '../services/api';
import { checkVer } from '../utils';
@ -25,12 +26,6 @@ import {
defaultInfo,
} from '../models';
// Icons
import DarkModeIcon from '@mui/icons-material/DarkMode';
import LightModeIcon from '@mui/icons-material/LightMode';
import SchoolIcon from '@mui/icons-material/School';
import SettingsPage from './SettingsPage';
const getWindowSize = function (fontSize: number) {
// returns window size in EM units
return {
@ -73,7 +68,16 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
});
const navbarHeight = 2.5;
const [openLearn, setOpenLearn] = useState<boolean>(false);
const closeAll = {
more: false,
learn: false,
community: false,
info: false,
coordinator: false,
stats: false,
update: false,
};
const [open, setOpen] = useState<OpenDialogs>(closeAll);
const [windowSize, setWindowSize] = useState<{ width: number; height: number }>(
getWindowSize(theme.typography.fontSize),
@ -146,16 +150,6 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
console.log(page, slideDirection);
return (
<Router basename={basename}>
<div className='temporaryUpperIcons'>
<LearnDialog open={openLearn} onClose={() => setOpenLearn(false)} />
<IconButton
color='inherit'
sx={{ position: 'fixed', right: '34px', color: 'text.secondary' }}
onClick={() => setOpenLearn(true)}
>
<SchoolIcon />
</IconButton>
</div>
<Box
style={{
position: 'absolute',
@ -233,7 +227,6 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
direction={page === 'settings' ? slideDirection.in : slideDirection.out}
in={page === 'settings'}
appear={slideDirection.in != undefined}
mountOnEnter
>
<div>
<SettingsPage
@ -251,6 +244,9 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
height={navbarHeight}
page={page}
setPage={setPage}
open={open}
setOpen={setOpen}
closeAll={closeAll}
setSlideDirection={setSlideDirection}
robot={robot}
setRobot={setRobot}
@ -258,6 +254,7 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
setInfo={setInfo}
fetchInfo={fetchInfo}
/>
<MainDialogs open={open} setOpen={setOpen} info={info} closeAll={closeAll} />
</Router>
);
};

90
frontend/src/basic/MainDialogs/index.tsx Normal file
View File

@ -0,0 +1,90 @@
import React, { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useTheme, styled, Grid, IconButton } from '@mui/material';
import { Info } from '../../models';
import {
CommunityDialog,
CoordinatorSummaryDialog,
InfoDialog,
LearnDialog,
StatsDialog,
UpdateClientDialog,
} from '../../components/Dialogs';
export interface OpenDialogs {
more: boolean;
learn: boolean;
community: boolean;
info: boolean;
coordinator: boolean;
stats: boolean;
update: boolean;
}
interface MainDialogsProps {
open: OpenDialogs;
setOpen: (state: OpenDialogs) => void;
info: Info;
closeAll: OpenDialogs;
}
const MainDialogs = ({ open, setOpen, info, closeAll }: MainDialogsProps): JSX.Element => {
const { t } = useTranslation();
const theme = useTheme();
useEffect(() => {
if (info.openUpdateClient) {
setOpen({ ...closeAll, update: true });
}
}, [info]);
return (
<>
<UpdateClientDialog
open={open.update}
coordinatorVersion={info.coordinatorVersion}
clientVersion={info.clientVersion}
onClose={() => setOpen({ ...open, update: false })}
/>
<InfoDialog
open={open.info}
maxAmount='4,000,000'
onClose={() => setOpen({ ...open, info: false })}
/>
<LearnDialog open={open.learn} onClose={() => setOpen({ ...open, learn: false })} />
<CommunityDialog
open={open.community}
onClose={() => setOpen({ ...open, community: false })}
/>
<CoordinatorSummaryDialog
open={open.coordinator}
onClose={() => setOpen({ ...open, coordinator: false })}
numPublicBuyOrders={info.num_public_buy_orders}
numPublicSellOrders={info.num_public_sell_orders}
bookLiquidity={info.book_liquidity}
activeRobotsToday={info.active_robots_today}
lastDayNonkycBtcPremium={info.last_day_nonkyc_btc_premium}
makerFee={info.maker_fee}
takerFee={info.taker_fee}
swapFeeRate={info.current_swap_fee_rate}
/>
<StatsDialog
open={open.stats}
onClose={() => setOpen({ ...open, stats: false })}
coordinatorVersion={info.coordinatorVersion}
clientVersion={info.clientVersion}
lndVersion={info.lnd_version}
network={info.network}
nodeAlias={info.node_alias}
nodeId={info.node_id}
alternativeName={info.alternative_name}
alternativeSite={info.alternative_site}
commitHash={info.robosats_running_commit_hash}
lastDayVolume={info.last_day_volume}
lifetimeVolume={info.lifetime_volume}
/>
</>
);
};
export default MainDialogs;

131
frontend/src/basic/NavBar/MoreTooltip.tsx Normal file
View File

@ -0,0 +1,131 @@
import React, { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useTheme, styled, Grid, IconButton } from '@mui/material';
import Tooltip, { TooltipProps, tooltipClasses } from '@mui/material/Tooltip';
import { OpenDialogs } from '../MainDialogs';
import { BubbleChart, Info, People, PriceChange, School } from '@mui/icons-material';
const StyledTooltip = styled(({ className, ...props }: TooltipProps) => (
<Tooltip {...props} classes={{ popper: className }} />
))(({ theme }) => ({
[`& .${tooltipClasses.tooltip}`]: {
backgroundColor: theme.palette.background.paper,
color: theme.palette.text.primary,
boxShadow: theme.shadows[1],
fontSize: theme.typography.fontSize,
borderRadius: '2em',
},
}));
export interface OpenDialogs {
more: boolean;
learn: boolean;
community: boolean;
info: boolean;
coordinator: boolean;
stats: boolean;
update: boolean;
}
interface MoreTooltipProps {
open: OpenDialogs;
setOpen: (state: OpenDialogs) => void;
closeAll: OpenDialogs;
children: JSX.Element;
}
const MoreTooltip = ({ open, setOpen, closeAll, children }: MoreTooltipProps): JSX.Element => {
const { t } = useTranslation();
const theme = useTheme();
return (
<StyledTooltip
open={open.more}
title={
<Grid
container
direction='column'
padding={0}
sx={{ width: '2em', padding: '0em' }}
justifyContent='center'
>
<Grid item sx={{ position: 'relative', right: '0.4em' }}>
<Tooltip enterTouchDelay={250} placement='left' title={t('RoboSats information')}>
<IconButton
sx={{
color: open.info ? theme.palette.primary.main : theme.palette.text.secondary,
}}
onClick={() => setOpen({ ...closeAll, more: true, info: !open.info })}
>
<Info />
</IconButton>
</Tooltip>
</Grid>
<Grid item sx={{ position: 'relative', right: '0.4em' }}>
<Tooltip enterTouchDelay={250} placement='left' title={t('Learn RoboSats')}>
<IconButton
sx={{
color: open.learn ? theme.palette.primary.main : theme.palette.text.secondary,
}}
onClick={() => setOpen({ ...closeAll, more: true, learn: !open.learn })}
>
<School />
</IconButton>
</Tooltip>
</Grid>
<Grid item sx={{ position: 'relative', right: '0.4em' }}>
<Tooltip
enterTouchDelay={250}
placement='left'
title={t('Community and public support')}
>
<IconButton
sx={{
color: open.community ? theme.palette.primary.main : theme.palette.text.secondary,
}}
onClick={() => setOpen({ ...closeAll, more: true, community: !open.community })}
>
<People />
</IconButton>
</Tooltip>
</Grid>
<Grid item sx={{ position: 'relative', right: '0.4em' }}>
<Tooltip enterTouchDelay={250} placement='left' title={t('Coordinator summary')}>
<IconButton
sx={{
color: open.coordinator
? theme.palette.primary.main
: theme.palette.text.secondary,
}}
onClick={() => setOpen({ ...closeAll, more: true, coordinator: !open.coordinator })}
>
<PriceChange />
</IconButton>
</Tooltip>
</Grid>
<Grid item sx={{ position: 'relative', right: '0.4em' }}>
<Tooltip enterTouchDelay={250} placement='left' title={t('Stats for nerds')}>
<IconButton
sx={{
color: open.stats ? theme.palette.primary.main : theme.palette.text.secondary,
}}
onClick={() => setOpen({ ...closeAll, more: true, stats: !open.stats })}
>
<BubbleChart />
</IconButton>
</Tooltip>
</Grid>
</Grid>
}
>
{children}
</StyledTooltip>
);
};
export default MoreTooltip;

625
frontend/src/basic/NavBar/NavBar.tsx Normal file
View File

@ -0,0 +1,625 @@
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 RobotAvatar from '../../components/RobotAvatar';
import MoreTooltip from './MoreTooltip';
import { OpenDialogs } from '../MainDialogs';
import {
SettingsApplications,
SmartToy,
Storefront,
AddBox,
Assignment,
MoreHoriz,
} from '@mui/icons-material';
type Page = 'robot' | 'offers' | 'create' | 'order' | 'settings' | 'none';
type Direction = 'left' | 'right' | undefined;
interface NavBarProps {
page: Page;
setPage: (state: Page) => void;
slideDirection: { in: Direction; out: Direction };
setSlideDirection: (state: { in: Direction; out: Direction }) => void;
width: number;
height: number;
open: OpenDialogs;
setOpen: (state: OpenDialogs) => void;
closeAll: OpenDialogs;
}
const NavBar = ({
page,
setPage,
slideDirection,
setSlideDirection,
open,
setOpen,
closeAll,
width,
height,
}: NavBarProps): JSX.Element => {
const theme = useTheme();
const { t } = useTranslation();
const history = useHistory();
const smallBar = width < 50;
const tabWidth = smallBar ? 1 : 12;
const [newPage, setNewPage] = useState<Page>(history.location.pathname.split('/')[1]);
const tabSx = smallBar ? {} : { position: 'relative', bottom: '1em' };
const pagesPosition = {
robot: 1,
offers: 2,
create: 3,
order: 4,
settings: 5,
};
const handleSlideDirection = function (oldPage: Page, newPage: Page) {
const oldPos: number = pagesPosition[oldPage];
const newPos: number = pagesPosition[newPage];
setSlideDirection(
newPos > oldPos ? { in: 'left', out: 'right' } : { in: 'right', out: 'left' },
);
};
const changePage = function (mouseEvent: any, newPage: Page) {
if (newPage === 'none') {
return null;
} else {
handleSlideDirection(page, newPage);
setNewPage(newPage);
setTimeout(() => history.push(`/${newPage}`), theme.transitions.duration.leavingScreen * 3);
}
};
useEffect(() => {
setPage(newPage);
}, [slideDirection, newPage]);
useEffect(() => {
setOpen(closeAll);
}, [page]);
return (
<Paper
elevation={6}
sx={{ height: `${height}em`, width: `${width * 0.9}em`, position: 'fixed', bottom: 0 }}
>
<Tabs
TabIndicatorProps={{ sx: { height: '0.3em', position: 'absolute', top: 0 } }}
variant={smallBar ? 'scrollable' : 'fullWidth'}
centered={!smallBar}
allowScrollButtonsMobile
scrollButtons={smallBar}
value={page}
onChange={changePage}
>
<Tab
label={smallBar ? undefined : t('Robot')}
sx={tabSx}
value='robot'
icon={<SmartToy />}
iconPosition='start'
/>
<Tab
sx={tabSx}
label={smallBar ? undefined : t('Offers')}
value='offers'
icon={<Storefront />}
iconPosition='start'
/>
<Tab
sx={tabSx}
label={smallBar ? undefined : t('Create')}
value='create'
icon={<AddBox />}
iconPosition='start'
/>
<Tab
sx={tabSx}
label={smallBar ? undefined : t('Order')}
value='order/1'
icon={<Assignment />}
iconPosition='start'
/>
<Tab
sx={tabSx}
label={smallBar ? undefined : t('Settings')}
value='settings'
icon={<SettingsApplications />}
iconPosition='start'
/>
<MoreTooltip open={open} setOpen={setOpen} closeAll={closeAll}>
<Tab
sx={tabSx}
label={smallBar ? undefined : t('More')}
value={'none'}
onClick={() => {
setOpen(open.more ? closeAll : { ...open, more: true });
}}
icon={<MoreHoriz />}
iconPosition='start'
/>
</MoreTooltip>
</Tabs>
</Paper>
);
};
export default NavBar;
// constructor(props) {
// super(props);
// this.state = {
// profileShown: false,
// openStatsForNerds: false,
// openCommunity: false,
// openExchangeSummary: false,
// openClaimRewards: false,
// openProfile: false,
// showRewards: false,
// rewardInvoice: null,
// badInvoice: false,
// showRewardsSpinner: false,
// withdrawn: false,
// };
// }
// handleClickOpenStatsForNerds = () => {
// this.setState({ openStatsForNerds: true });
// };
// handleClickCloseStatsForNerds = () => {
// this.setState({ openStatsForNerds: false });
// };
// handleClickOpenCommunity = () => {
// this.setState({ openCommunity: true });
// };
// handleClickCloseCommunity = () => {
// this.setState({ openCommunity: false });
// };
// handleClickOpenProfile = () => {
// this.setState({ openProfile: true, profileShown: true });
// };
// handleClickCloseProfile = () => {
// this.setState({ openProfile: false });
// };
// handleClickOpenExchangeSummary = () => {
// this.setState({ openExchangeSummary: true });
// };
// handleClickCloseExchangeSummary = () => {
// this.setState({ openExchangeSummary: false });
// };
// handleSubmitInvoiceClicked = (e, rewardInvoice) => {
// this.setState({ badInvoice: false, showRewardsSpinner: true });
// apiClient
// .post('/api/reward/', {
// invoice: rewardInvoice,
// })
// .then((data) => {
// this.setState({ badInvoice: data.bad_invoice, showRewardsSpinner: false });
// this.props.setInfo({
// ...this.props.info,
// badInvoice: data.bad_invoice,
// openClaimRewards: !data.successful_withdrawal,
// withdrawn: !!data.successful_withdrawal,
// showRewardsSpinner: false,
// });
// this.props.setRobot({
// ...this.props.robot,
// earnedRewards: data.successful_withdrawal ? 0 : this.props.robot.earnedRewards,
// });
// });
// e.preventDefault();
// };
// handleSetStealthInvoice = (wantsStealth) => {
// apiClient
// .put('/api/stealth/', { wantsStealth })
// .then((data) =>
// this.props.setRobot({ ...this.props.robot, stealthInvoices: data?.wantsStealth }),
// );
// };
// showProfileButton = () => {
// return (
// this.props.robot.avatarLoaded &&
// (this.props.robot.token
// ? systemClient.getCookie('robot_token') === this.props.robot.token
// : true) &&
// systemClient.getCookie('sessionid')
// );
// };
// bottomBarDesktop = () => {
// const { t } = this.props;
// const hasRewards = this.props.robot.earnedRewards > 0;
// const hasOrder = !!(
// (this.props.robot.activeOrderId > 0) &
// !this.state.profileShown &
// this.props.robot.avatarLoaded
// );
// const fontSize = this.props.theme.typography.fontSize;
// const fontSizeFactor = fontSize / 14; // default fontSize is 14
// const typographyProps = {
// primaryTypographyProps: { fontSize },
// secondaryTypographyProps: { fontSize: (fontSize * 12) / 14 },
// };
// return (
// <Paper
// elevation={6}
// style={{ height: '2.5em', width: `${(this.props.windowSize.width / 16) * 14}em` }}
// >
// <Grid container>
// <Grid item xs={1.9}>
// <div style={{ display: this.showProfileButton() ? '' : 'none' }}>
// <ListItemButton onClick={this.handleClickOpenProfile}>
// <Tooltip
// open={(hasRewards || hasOrder) && this.showProfileButton()}
// title={
// (hasRewards ? t('You can claim satoshis!') + ' ' : '') +
// (hasOrder ? t('You have an active order') : '')
// }
// >
// <ListItemAvatar sx={{ width: 30 * fontSizeFactor, height: 30 * fontSizeFactor }}>
// <RobotAvatar
// style={{ marginTop: -13 }}
// statusColor={
// (this.props.robot.activeOrderId > 0) & !this.state.profileShown
// ? 'primary'
// : undefined
// }
// nickname={this.props.robot.nickname}
// onLoad={() =>
// this.props.setRobot({ ...this.props.robot, avatarLoaded: true })
// }
// />
// </ListItemAvatar>
// </Tooltip>
// <ListItemText primary={this.props.robot.nickname} />
// </ListItemButton>
// </div>
// </Grid>
// <Grid item xs={1.9}>
// <ListItem className='bottomItem'>
// <ListItemIcon size='small'>
// <IconButton
// disabled={!this.showProfileButton()}
// color='primary'
// to={`/book/`}
// component={LinkRouter}
// >
// <InventoryIcon />
// </IconButton>
// </ListItemIcon>
// <ListItemText
// {...typographyProps}
// primary={this.props.info.num_public_buy_orders}
// secondary={t('Public Buy Orders')}
// />
// </ListItem>
// </Grid>
// <Grid item xs={1.9}>
// <ListItem className='bottomItem'>
// <ListItemIcon size='small'>
// <IconButton
// disabled={!this.showProfileButton()}
// color='primary'
// to={`/book/`}
// component={LinkRouter}
// >
// <SellIcon />
// </IconButton>
// </ListItemIcon>
// <ListItemText
// {...typographyProps}
// primary={this.props.info.num_public_sell_orders}
// secondary={t('Public Sell Orders')}
// />
// </ListItem>
// </Grid>
// <Grid item xs={1.9}>
// <ListItem className='bottomItem'>
// <ListItemIcon size='small'>
// <IconButton
// disabled={!this.showProfileButton()}
// color='primary'
// to={`/`}
// component={LinkRouter}
// >
// <SmartToyIcon />
// </IconButton>
// </ListItemIcon>
// <ListItemText
// {...typographyProps}
// primary={this.props.info.active_robots_today}
// secondary={t('Today Active Robots')}
// />
// </ListItem>
// </Grid>
// <Grid item xs={1.9}>
// <ListItem className='bottomItem'>
// <ListItemIcon size='small'>
// <IconButton color='primary' onClick={this.handleClickOpenExchangeSummary}>
// <PriceChangeIcon />
// </IconButton>
// </ListItemIcon>
// <ListItemText
// {...typographyProps}
// primary={this.props.info.last_day_nonkyc_btc_premium + '%'}
// secondary={t('24h Avg Premium')}
// />
// </ListItem>
// </Grid>
// <Grid item xs={1.5}>
// <ListItem className='bottomItem'>
// <ListItemIcon size='small'>
// <IconButton color='primary' onClick={this.handleClickOpenExchangeSummary}>
// <PercentIcon />
// </IconButton>
// </ListItemIcon>
// <ListItemText
// {...typographyProps}
// primary={(this.props.info.maker_fee + this.props.info.taker_fee) * 100}
// secondary={t('Trade Fee')}
// />
// </ListItem>
// </Grid>
// <Grid container item xs={1}>
// <Grid item xs={6}>
// {this.LangSelect()}
// </Grid>
// <Grid item xs={3}>
// <Tooltip enterTouchDelay={250} title={t('Show community and support links')}>
// <IconButton
// color='primary'
// aria-label='Community'
// onClick={this.handleClickOpenCommunity}
// >
// <PeopleIcon />
// </IconButton>
// </Tooltip>
// </Grid>
// <Grid item xs={3}>
// <Tooltip enterTouchDelay={250} title={t('Show stats for nerds')}>
// <IconButton
// color='primary'
// aria-label='Stats for Nerds'
// onClick={this.handleClickOpenStatsForNerds}
// >
// <BarChartIcon />
// </IconButton>
// </Tooltip>
// </Grid>
// </Grid>
// </Grid>
// </Paper>
// );
// };
// bottomBarPhone = () => {
// const { t } = this.props;
// const hasRewards = this.props.robot.earnedRewards > 0;
// const hasOrder = !!(
// (this.props.info.active_order_id > 0) &
// !this.state.profileShown &
// this.props.robot.avatarLoaded
// );
// return (
// <Paper
// elevation={6}
// style={{ height: '2.85em', width: `${(this.props.windowSize.width / 16) * 14}em` }}
// >
// <Grid container>
// <Grid item xs={1.6}>
// <div style={{ display: this.showProfileButton() ? '' : 'none' }}>
// <Tooltip
// open={(hasRewards || hasOrder) && this.showProfileButton()}
// title={
// (hasRewards ? t('You can claim satoshis!') + ' ' : '') +
// (hasOrder ? t('You have an active order') : '')
// }
// >
// <IconButton
// onClick={this.handleClickOpenProfile}
// sx={{ margin: 0, bottom: 17, right: 8 }}
// >
// <RobotAvatar
// style={{ width: 55, height: 55 }}
// avatarClass='phoneFlippedSmallAvatar'
// statusColor={
// (this.props.activeOrderId > 0) & !this.state.profileShown
// ? 'primary'
// : undefined
// }
// nickname={this.props.robot.nickname}
// onLoad={() => this.props.setRobot({ ...this.props.robot, avatarLoaded: true })}
// />
// </IconButton>
// </Tooltip>
// </div>
// </Grid>
// <Grid item xs={1.6} align='center'>
// <Tooltip enterTouchDelay={300} title={t('Number of public BUY orders')}>
// <IconButton
// disabled={!this.showProfileButton()}
// color='primary'
// to={`/book/`}
// component={LinkRouter}
// >
// <Badge badgeContent={this.props.info.num_public_buy_orders} color='action'>
// <InventoryIcon />
// </Badge>
// </IconButton>
// </Tooltip>
// </Grid>
// <Grid item xs={1.6} align='center'>
// <Tooltip enterTouchDelay={300} title={t('Number of public SELL orders')}>
// <IconButton
// disabled={!this.showProfileButton()}
// color='primary'
// to={`/book/`}
// component={LinkRouter}
// >
// <Badge badgeContent={this.props.info.num_public_sell_orders} color='action'>
// <SellIcon />
// </Badge>
// </IconButton>
// </Tooltip>
// </Grid>
// <Grid item xs={1.6} align='center'>
// <Tooltip enterTouchDelay={300} title={t('Today active robots')}>
// <IconButton
// disabled={!this.showProfileButton()}
// color='primary'
// to={`/`}
// component={LinkRouter}
// >
// <Badge badgeContent={this.props.info.active_robots_today} color='action'>
// <SmartToyIcon />
// </Badge>
// </IconButton>
// </Tooltip>
// </Grid>
// <Grid item xs={1.8} align='center'>
// <Tooltip enterTouchDelay={300} title={t('24h non-KYC bitcoin premium')}>
// <IconButton color='primary' onClick={this.handleClickOpenExchangeSummary}>
// <Badge
// badgeContent={this.props.info.last_day_nonkyc_btc_premium + '%'}
// color='action'
// >
// <PriceChangeIcon />
// </Badge>
// </IconButton>
// </Tooltip>
// </Grid>
// <Grid container item xs={3.8}>
// <Grid item xs={6}>
// {this.LangSelect()}
// </Grid>
// <Grid item xs={3}>
// <Tooltip enterTouchDelay={250} title={t('Show community and support links')}>
// <IconButton
// color='primary'
// aria-label='Community'
// onClick={this.handleClickOpenCommunity}
// >
// <PeopleIcon />
// </IconButton>
// </Tooltip>
// </Grid>
// <Grid item xs={3}>
// <Tooltip enterTouchDelay={250} title={t('Show stats for nerds')}>
// <IconButton
// color='primary'
// aria-label='Stats for Nerds'
// onClick={() => this.props.fetchInfo()}
// onClick={this.handleClickOpenStatsForNerds}
// >
// <BarChartIcon />
// </IconButton>
// </Tooltip>
// </Grid>
// </Grid>
// </Grid>
// </Paper>
// );
// };
// render() {
// return (
// <div>
// <UpdateClientDialog
// open={this.state.openUpdateClient}
// coordinatorVersion={this.props.info.coordinatorVersion}
// clientVersion={this.props.info.clientVersion}
// handleClickClose={() =>
// this.props.setInfo({ ...this.props.info, openUpdateClient: false })
// }
// />
// <ExchangeSummaryDialog
// open={this.state.openExchangeSummary}
// handleClickCloseExchangeSummary={this.handleClickCloseExchangeSummary}
// numPublicBuyOrders={this.props.info.num_public_buy_orders}
// numPublicSellOrders={this.props.info.num_public_sell_orders}
// bookLiquidity={this.props.info.book_liquidity}
// activeRobotsToday={this.props.info.active_robots_today}
// lastDayNonkycBtcPremium={this.props.info.last_day_nonkyc_btc_premium}
// makerFee={this.props.info.maker_fee}
// takerFee={this.props.info.taker_fee}
// swapFeeRate={this.props.info.current_swap_fee_rate}
// />
// <ProfileDialog
// open={this.state.openProfile}
// handleClickCloseProfile={this.handleClickCloseProfile}
// nickname={this.props.robot.nickname}
// activeOrderId={this.props.robot.activeOrderId}
// lastOrderId={this.props.robot.lastOrderId}
// referralCode={this.props.robot.referralCode}
// tgEnabled={this.props.robot.tgEnabled}
// tgBotName={this.props.robot.tgBotName}
// tgToken={this.props.robot.tgToken}
// handleSubmitInvoiceClicked={this.handleSubmitInvoiceClicked}
// showRewardsSpinner={this.state.showRewardsSpinner}
// withdrawn={this.props.info.withdrawn}
// badInvoice={this.props.info.badInvoice}
// earnedRewards={this.props.robot.earnedRewards}
// updateRobot={(newParam) => this.props.setRobot({ ...robot, ...newParam })}
// stealthInvoices={this.props.robot.stealthInvoices}
// handleSetStealthInvoice={this.handleSetStealthInvoice}
// />
// <StatsDialog
// open={this.state.openStatsForNerds}
// handleClickCloseStatsForNerds={this.handleClickCloseStatsForNerds}
// coordinatorVersion={this.props.info.coordinatorVersion}
// clientVersion={this.props.info.clientVersion}
// lndVersion={this.props.info.lnd_version}
// network={this.props.info.network}
// nodeAlias={this.props.info.node_alias}
// nodeId={this.props.info.node_id}
// alternativeName={this.props.info.alternative_name}
// alternativeSite={this.props.info.alternative_site}
// commitHash={this.props.info.robosats_running_commit_hash}
// lastDayVolume={this.props.info.last_day_volume}
// lifetimeVolume={this.props.info.lifetime_volume}
// />
// <MediaQuery minWidth={1200}>{this.bottomBarDesktop()}</MediaQuery>
// <MediaQuery maxWidth={1199}>{this.bottomBarPhone()}</MediaQuery>
// </div>
// );
// }
// }
// export default NavBar;

729
frontend/src/basic/NavBar/index.tsx
View File

@ -1,729 +1,4 @@
import React, { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useHistory } from 'react-router-dom';
import { Tabs, Tab, Paper, Button, useTheme } from '@mui/material';
import RobotAvatar from '../../components/RobotAvatar';
import {
SettingsApplications,
SmartToy,
Storefront,
AddBox,
Assignment,
MoreHoriz,
} from '@mui/icons-material';
type Page = 'robot' | 'offers' | 'create' | 'order' | 'settings' | 'none';
type Direction = 'left' | 'right' | 'none';
interface NavBarProps {
page: Page;
setPage: (state: Page) => void;
slideDirection: { in: Direction; out: Direction };
setSlideDirection: (state: { in: Direction; out: Direction }) => void;
width: number;
height: number;
}
const NavBar = ({
page,
setPage,
slideDirection,
setSlideDirection,
width,
height,
}: NavBarProps): JSX.Element => {
const theme = useTheme();
const { t } = useTranslation();
const history = useHistory();
const smallBar = width < 50;
const tabWidth = smallBar ? 1 : 1;
const [showMore, setShowMore] = useState<boolean>(false);
const [newPage, setNewPage] = useState<Page>(history.location.pathname.split('/')[1]);
const pagesPosition = {
robot: 1,
offers: 2,
create: 3,
order: 4,
settings: 5,
};
const handleSlideDirection = function (oldPage: Page, newPage: Page) {
const oldPos: number = pagesPosition[oldPage];
const newPos: number = pagesPosition[newPage];
setSlideDirection(
newPos > oldPos ? { in: 'left', out: 'right' } : { in: 'right', out: 'left' },
);
};
const changePage = function (mouseEvent: any, newPage: Page) {
if (newPage === 'none') {
return null;
} else {
handleSlideDirection(page, newPage);
setNewPage(newPage);
setTimeout(() => history.push(`/${newPage}`), theme.transitions.duration.leavingScreen * 3);
}
};
useEffect(() => {
setPage(newPage);
}, [slideDirection, newPage]);
return (
<Paper
elevation={6}
sx={{ height: `${height}em`, width: `${width * 0.9}em`, position: 'fixed', bottom: 0 }}
>
<Tabs
TabIndicatorProps={{ sx: { height: '0.3em', position: 'absolute', top: 0 } }}
variant={smallBar ? 'scrollable' : 'fullWidth'}
centered={!smallBar}
allowScrollButtonsMobile
scrollButtons={smallBar}
value={page}
onChange={changePage}
aria-label='navigation bar'
>
<Tab
sx={{ maxWidth: `${tabWidth}em` }}
label={smallBar ? undefined : t('Robot')}
value='robot'
icon={<SmartToy />}
iconPosition='start'
/>
<Tab
sx={{ maxWidth: `${tabWidth}em` }}
label={smallBar ? undefined : t('Offers')}
value='offers'
icon={<Storefront />}
iconPosition='start'
/>
<Tab
sx={{ maxWidth: `${tabWidth}em` }}
label={smallBar ? undefined : t('Create')}
value='create'
icon={<AddBox />}
iconPosition='start'
/>
<Tab
sx={{ maxWidth: `${tabWidth}em` }}
label={smallBar ? undefined : t('Order')}
value='order/1'
icon={<Assignment />}
iconPosition='start'
/>
<Tab
sx={{ maxWidth: `${tabWidth}em` }}
label={smallBar ? undefined : t('Settings')}
value='settings'
icon={<SettingsApplications />}
iconPosition='start'
/>
<Tab
sx={{ maxWidth: `${tabWidth}em` }}
label={smallBar ? undefined : t('More')}
value={'none'}
onClick={() => {
setShowMore(!showMore);
}}
icon={<MoreHoriz />}
iconPosition='start'
/>
</Tabs>
</Paper>
);
};
import NavBar from './NavBar';
export type { OpenDialogs } from './MoreTooltip';
export default NavBar;
// constructor(props) {
// super(props);
// this.state = {
// profileShown: false,
// openStatsForNerds: false,
// openCommunity: false,
// openExchangeSummary: false,
// openClaimRewards: false,
// openProfile: false,
// showRewards: false,
// rewardInvoice: null,
// badInvoice: false,
// showRewardsSpinner: false,
// withdrawn: false,
// };
// }
// handleClickOpenStatsForNerds = () => {
// this.setState({ openStatsForNerds: true });
// };
// handleClickCloseStatsForNerds = () => {
// this.setState({ openStatsForNerds: false });
// };
// handleClickOpenCommunity = () => {
// this.setState({ openCommunity: true });
// };
// handleClickCloseCommunity = () => {
// this.setState({ openCommunity: false });
// };
// handleClickOpenProfile = () => {
// this.setState({ openProfile: true, profileShown: true });
// };
// handleClickCloseProfile = () => {
// this.setState({ openProfile: false });
// };
// handleClickOpenExchangeSummary = () => {
// this.setState({ openExchangeSummary: true });
// };
// handleClickCloseExchangeSummary = () => {
// this.setState({ openExchangeSummary: false });
// };
// handleSubmitInvoiceClicked = (e, rewardInvoice) => {
// this.setState({ badInvoice: false, showRewardsSpinner: true });
// apiClient
// .post('/api/reward/', {
// invoice: rewardInvoice,
// })
// .then((data) => {
// this.setState({ badInvoice: data.bad_invoice, showRewardsSpinner: false });
// this.props.setInfo({
// ...this.props.info,
// badInvoice: data.bad_invoice,
// openClaimRewards: !data.successful_withdrawal,
// withdrawn: !!data.successful_withdrawal,
// showRewardsSpinner: false,
// });
// this.props.setRobot({
// ...this.props.robot,
// earnedRewards: data.successful_withdrawal ? 0 : this.props.robot.earnedRewards,
// });
// });
// e.preventDefault();
// };
// handleSetStealthInvoice = (wantsStealth) => {
// apiClient
// .put('/api/stealth/', { wantsStealth })
// .then((data) =>
// this.props.setRobot({ ...this.props.robot, stealthInvoices: data?.wantsStealth }),
// );
// };
// showProfileButton = () => {
// return (
// this.props.robot.avatarLoaded &&
// (this.props.robot.token
// ? systemClient.getCookie('robot_token') === this.props.robot.token
// : true) &&
// systemClient.getCookie('sessionid')
// );
// };
// bottomBarDesktop = () => {
// const { t } = this.props;
// const hasRewards = this.props.robot.earnedRewards > 0;
// const hasOrder = !!(
// (this.props.robot.activeOrderId > 0) &
// !this.state.profileShown &
// this.props.robot.avatarLoaded
// );
// const fontSize = this.props.theme.typography.fontSize;
// const fontSizeFactor = fontSize / 14; // default fontSize is 14
// const typographyProps = {
// primaryTypographyProps: { fontSize },
// secondaryTypographyProps: { fontSize: (fontSize * 12) / 14 },
// };
// return (
// <Paper
// elevation={6}
// style={{ height: '2.5em', width: `${(this.props.windowSize.width / 16) * 14}em` }}
// >
// <Grid container>
// <Grid item xs={1.9}>
// <div style={{ display: this.showProfileButton() ? '' : 'none' }}>
// <ListItemButton onClick={this.handleClickOpenProfile}>
// <Tooltip
// open={(hasRewards || hasOrder) && this.showProfileButton()}
// title={
// (hasRewards ? t('You can claim satoshis!') + ' ' : '') +
// (hasOrder ? t('You have an active order') : '')
// }
// >
// <ListItemAvatar sx={{ width: 30 * fontSizeFactor, height: 30 * fontSizeFactor }}>
// <RobotAvatar
// style={{ marginTop: -13 }}
// statusColor={
// (this.props.robot.activeOrderId > 0) & !this.state.profileShown
// ? 'primary'
// : undefined
// }
// nickname={this.props.robot.nickname}
// onLoad={() =>
// this.props.setRobot({ ...this.props.robot, avatarLoaded: true })
// }
// />
// </ListItemAvatar>
// </Tooltip>
// <ListItemText primary={this.props.robot.nickname} />
// </ListItemButton>
// </div>
// </Grid>
// <Grid item xs={1.9}>
// <ListItem className='bottomItem'>
// <ListItemIcon size='small'>
// <IconButton
// disabled={!this.showProfileButton()}
// color='primary'
// to={`/book/`}
// component={LinkRouter}
// >
// <InventoryIcon />
// </IconButton>
// </ListItemIcon>
// <ListItemText
// {...typographyProps}
// primary={this.props.info.num_public_buy_orders}
// secondary={t('Public Buy Orders')}
// />
// </ListItem>
// </Grid>
// <Grid item xs={1.9}>
// <ListItem className='bottomItem'>
// <ListItemIcon size='small'>
// <IconButton
// disabled={!this.showProfileButton()}
// color='primary'
// to={`/book/`}
// component={LinkRouter}
// >
// <SellIcon />
// </IconButton>
// </ListItemIcon>
// <ListItemText
// {...typographyProps}
// primary={this.props.info.num_public_sell_orders}
// secondary={t('Public Sell Orders')}
// />
// </ListItem>
// </Grid>
// <Grid item xs={1.9}>
// <ListItem className='bottomItem'>
// <ListItemIcon size='small'>
// <IconButton
// disabled={!this.showProfileButton()}
// color='primary'
// to={`/`}
// component={LinkRouter}
// >
// <SmartToyIcon />
// </IconButton>
// </ListItemIcon>
// <ListItemText
// {...typographyProps}
// primary={this.props.info.active_robots_today}
// secondary={t('Today Active Robots')}
// />
// </ListItem>
// </Grid>
// <Grid item xs={1.9}>
// <ListItem className='bottomItem'>
// <ListItemIcon size='small'>
// <IconButton color='primary' onClick={this.handleClickOpenExchangeSummary}>
// <PriceChangeIcon />
// </IconButton>
// </ListItemIcon>
// <ListItemText
// {...typographyProps}
// primary={this.props.info.last_day_nonkyc_btc_premium + '%'}
// secondary={t('24h Avg Premium')}
// />
// </ListItem>
// </Grid>
// <Grid item xs={1.5}>
// <ListItem className='bottomItem'>
// <ListItemIcon size='small'>
// <IconButton color='primary' onClick={this.handleClickOpenExchangeSummary}>
// <PercentIcon />
// </IconButton>
// </ListItemIcon>
// <ListItemText
// {...typographyProps}
// primary={(this.props.info.maker_fee + this.props.info.taker_fee) * 100}
// secondary={t('Trade Fee')}
// />
// </ListItem>
// </Grid>
// <Grid container item xs={1}>
// <Grid item xs={6}>
// {this.LangSelect()}
// </Grid>
// <Grid item xs={3}>
// <Tooltip enterTouchDelay={250} title={t('Show community and support links')}>
// <IconButton
// color='primary'
// aria-label='Community'
// onClick={this.handleClickOpenCommunity}
// >
// <PeopleIcon />
// </IconButton>
// </Tooltip>
// </Grid>
// <Grid item xs={3}>
// <Tooltip enterTouchDelay={250} title={t('Show stats for nerds')}>
// <IconButton
// color='primary'
// aria-label='Stats for Nerds'
// onClick={this.handleClickOpenStatsForNerds}
// >
// <BarChartIcon />
// </IconButton>
// </Tooltip>
// </Grid>
// </Grid>
// </Grid>
// </Paper>
// );
// };
// handleChangeLang = (e) => {
// const { i18n } = this.props;
// i18n.changeLanguage(e.target.value);
// };
// LangSelect = () => {
// const { i18n } = this.props;
// const lang = i18n.resolvedLanguage == null ? 'en' : i18n.resolvedLanguage.substring(0, 2);
// const flagProps = {
// width: 20,
// height: 20,
// };
// return (
// <Select
// size='small'
// value={lang}
// inputProps={{
// style: { textAlign: 'center' },
// }}
// renderValue={(value) => value.toUpperCase()}
// onChange={this.handleChangeLang}
// >
// <MenuItem value={'en'}>
// <div style={{ width: 24, position: 'relative', top: 3 }}>
// <Flags.US {...flagProps} />
// </div>
// EN
// </MenuItem>
// <MenuItem value={'es'}>
// <div style={{ width: 24, position: 'relative', top: 3 }}>
// <Flags.ES {...flagProps} />
// </div>
// ES
// </MenuItem>
// <MenuItem value={'de'}>
// <div style={{ width: 24, position: 'relative', top: 3 }}>
// <Flags.DE {...flagProps} />
// </div>
// DE
// </MenuItem>
// <MenuItem value={'pl'}>
// <div style={{ width: 24, position: 'relative', top: 3 }}>
// <Flags.PL {...flagProps} />
// </div>
// PL
// </MenuItem>
// <MenuItem value={'fr'}>
// <div style={{ width: 24, position: 'relative', top: 3 }}>
// <Flags.FR {...flagProps} />
// </div>
// FR
// </MenuItem>
// <MenuItem value={'ru'}>
// <div style={{ width: 24, position: 'relative', top: 3 }}>
// <Flags.RU {...flagProps} />
// </div>
// RU
// </MenuItem>
// <MenuItem value={'it'}>
// <div style={{ width: 24, position: 'relative', top: 3 }}>
// <Flags.IT {...flagProps} />
// </div>
// IT
// </MenuItem>
// <MenuItem value={'pt'}>
// <div style={{ width: 24, position: 'relative', top: 3 }}>
// <Flags.BR {...flagProps} />
// </div>
// PT
// </MenuItem>
// <MenuItem value={'zh-si'}>
// <div style={{ width: 24, position: 'relative', top: 3 }}>
// <Flags.CN {...flagProps} />
// </div>
// 简体
// </MenuItem>
// <MenuItem value={'zh-tr'}>
// <div style={{ width: 24, position: 'relative', top: 3 }}>
// <Flags.CN {...flagProps} />
// </div>
// 繁體
// </MenuItem>
// <MenuItem value={'sv'}>
// <div style={{ width: 24, position: 'relative', top: 3 }}>
// <Flags.SE {...flagProps} />
// </div>
// SV
// </MenuItem>
// <MenuItem value={'cs'}>
// <div style={{ width: 24, position: 'relative', top: 3 }}>
// <Flags.CZ {...flagProps} />
// </div>
// CS
// </MenuItem>
// <MenuItem value={'th'}>
// <div style={{ width: 24, position: 'relative', top: 3 }}>
// <Flags.TH {...flagProps} />
// </div>
// TH
// </MenuItem>
// <MenuItem value={'ca'}>
// <div style={{ width: 24, position: 'relative', top: 3 }}>
// <CataloniaFlag {...flagProps} />
// </div>
// CA
// </MenuItem>
// <MenuItem value={'eu'}>
// <div style={{ width: 24, position: 'relative', top: 3 }}>
// <BasqueCountryFlag {...flagProps} />
// </div>
// EU
// </MenuItem>
// </Select>
// );
// };
// bottomBarPhone = () => {
// const { t } = this.props;
// const hasRewards = this.props.robot.earnedRewards > 0;
// const hasOrder = !!(
// (this.props.info.active_order_id > 0) &
// !this.state.profileShown &
// this.props.robot.avatarLoaded
// );
// return (
// <Paper
// elevation={6}
// style={{ height: '2.85em', width: `${(this.props.windowSize.width / 16) * 14}em` }}
// >
// <Grid container>
// <Grid item xs={1.6}>
// <div style={{ display: this.showProfileButton() ? '' : 'none' }}>
// <Tooltip
// open={(hasRewards || hasOrder) && this.showProfileButton()}
// title={
// (hasRewards ? t('You can claim satoshis!') + ' ' : '') +
// (hasOrder ? t('You have an active order') : '')
// }
// >
// <IconButton
// onClick={this.handleClickOpenProfile}
// sx={{ margin: 0, bottom: 17, right: 8 }}
// >
// <RobotAvatar
// style={{ width: 55, height: 55 }}
// avatarClass='phoneFlippedSmallAvatar'
// statusColor={
// (this.props.activeOrderId > 0) & !this.state.profileShown
// ? 'primary'
// : undefined
// }
// nickname={this.props.robot.nickname}
// onLoad={() => this.props.setRobot({ ...this.props.robot, avatarLoaded: true })}
// />
// </IconButton>
// </Tooltip>
// </div>
// </Grid>
// <Grid item xs={1.6} align='center'>
// <Tooltip enterTouchDelay={300} title={t('Number of public BUY orders')}>
// <IconButton
// disabled={!this.showProfileButton()}
// color='primary'
// to={`/book/`}
// component={LinkRouter}
// >
// <Badge badgeContent={this.props.info.num_public_buy_orders} color='action'>
// <InventoryIcon />
// </Badge>
// </IconButton>
// </Tooltip>
// </Grid>
// <Grid item xs={1.6} align='center'>
// <Tooltip enterTouchDelay={300} title={t('Number of public SELL orders')}>
// <IconButton
// disabled={!this.showProfileButton()}
// color='primary'
// to={`/book/`}
// component={LinkRouter}
// >
// <Badge badgeContent={this.props.info.num_public_sell_orders} color='action'>
// <SellIcon />
// </Badge>
// </IconButton>
// </Tooltip>
// </Grid>
// <Grid item xs={1.6} align='center'>
// <Tooltip enterTouchDelay={300} title={t('Today active robots')}>
// <IconButton
// disabled={!this.showProfileButton()}
// color='primary'
// to={`/`}
// component={LinkRouter}
// >
// <Badge badgeContent={this.props.info.active_robots_today} color='action'>
// <SmartToyIcon />
// </Badge>
// </IconButton>
// </Tooltip>
// </Grid>
// <Grid item xs={1.8} align='center'>
// <Tooltip enterTouchDelay={300} title={t('24h non-KYC bitcoin premium')}>
// <IconButton color='primary' onClick={this.handleClickOpenExchangeSummary}>
// <Badge
// badgeContent={this.props.info.last_day_nonkyc_btc_premium + '%'}
// color='action'
// >
// <PriceChangeIcon />
// </Badge>
// </IconButton>
// </Tooltip>
// </Grid>
// <Grid container item xs={3.8}>
// <Grid item xs={6}>
// {this.LangSelect()}
// </Grid>
// <Grid item xs={3}>
// <Tooltip enterTouchDelay={250} title={t('Show community and support links')}>
// <IconButton
// color='primary'
// aria-label='Community'
// onClick={this.handleClickOpenCommunity}
// >
// <PeopleIcon />
// </IconButton>
// </Tooltip>
// </Grid>
// <Grid item xs={3}>
// <Tooltip enterTouchDelay={250} title={t('Show stats for nerds')}>
// <IconButton
// color='primary'
// aria-label='Stats for Nerds'
// onClick={() => this.props.fetchInfo()}
// onClick={this.handleClickOpenStatsForNerds}
// >
// <BarChartIcon />
// </IconButton>
// </Tooltip>
// </Grid>
// </Grid>
// </Grid>
// </Paper>
// );
// };
// render() {
// return (
// <div>
// <CommunityDialog
// open={this.state.openCommunity}
// handleClickCloseCommunity={this.handleClickCloseCommunity}
// />
// <UpdateClientDialog
// open={this.state.openUpdateClient}
// coordinatorVersion={this.props.info.coordinatorVersion}
// clientVersion={this.props.info.clientVersion}
// handleClickClose={() =>
// this.props.setInfo({ ...this.props.info, openUpdateClient: false })
// }
// />
// <ExchangeSummaryDialog
// open={this.state.openExchangeSummary}
// handleClickCloseExchangeSummary={this.handleClickCloseExchangeSummary}
// numPublicBuyOrders={this.props.info.num_public_buy_orders}
// numPublicSellOrders={this.props.info.num_public_sell_orders}
// bookLiquidity={this.props.info.book_liquidity}
// activeRobotsToday={this.props.info.active_robots_today}
// lastDayNonkycBtcPremium={this.props.info.last_day_nonkyc_btc_premium}
// makerFee={this.props.info.maker_fee}
// takerFee={this.props.info.taker_fee}
// swapFeeRate={this.props.info.current_swap_fee_rate}
// />
// <ProfileDialog
// open={this.state.openProfile}
// handleClickCloseProfile={this.handleClickCloseProfile}
// nickname={this.props.robot.nickname}
// activeOrderId={this.props.robot.activeOrderId}
// lastOrderId={this.props.robot.lastOrderId}
// referralCode={this.props.robot.referralCode}
// tgEnabled={this.props.robot.tgEnabled}
// tgBotName={this.props.robot.tgBotName}
// tgToken={this.props.robot.tgToken}
// handleSubmitInvoiceClicked={this.handleSubmitInvoiceClicked}
// showRewardsSpinner={this.state.showRewardsSpinner}
// withdrawn={this.props.info.withdrawn}
// badInvoice={this.props.info.badInvoice}
// earnedRewards={this.props.robot.earnedRewards}
// updateRobot={(newParam) => this.props.setRobot({ ...robot, ...newParam })}
// stealthInvoices={this.props.robot.stealthInvoices}
// handleSetStealthInvoice={this.handleSetStealthInvoice}
// />
// <StatsDialog
// open={this.state.openStatsForNerds}
// handleClickCloseStatsForNerds={this.handleClickCloseStatsForNerds}
// coordinatorVersion={this.props.info.coordinatorVersion}
// clientVersion={this.props.info.clientVersion}
// lndVersion={this.props.info.lnd_version}
// network={this.props.info.network}
// nodeAlias={this.props.info.node_alias}
// nodeId={this.props.info.node_id}
// alternativeName={this.props.info.alternative_name}
// alternativeSite={this.props.info.alternative_site}
// commitHash={this.props.info.robosats_running_commit_hash}
// lastDayVolume={this.props.info.last_day_volume}
// lifetimeVolume={this.props.info.lifetime_volume}
// />
// <MediaQuery minWidth={1200}>{this.bottomBarDesktop()}</MediaQuery>
// <MediaQuery maxWidth={1199}>{this.bottomBarPhone()}</MediaQuery>
// </div>
// );
// }
// }
// export default NavBar;

17
frontend/src/basic/UserGenPage.js
View File

@ -31,7 +31,6 @@ class UserGenPage extends Component {
constructor(props) {
super(props);
this.state = {
openInfo: false,
tokenHasChanged: false,
inputToken: '',
found: false,
@ -155,14 +154,6 @@ class UserGenPage extends Component {
});
};
handleClickOpenInfo = () => {
this.setState({ openInfo: true });
};
handleCloseInfo = () => {
this.setState({ openInfo: false });
};
createJsonFile = () => {
return {
token: this.props.robot.token,
@ -383,14 +374,6 @@ class UserGenPage extends Component {
>
{t('Make Order')}
</Button>
<Button color='inherit' style={{ color: '#111111' }} onClick={this.handleClickOpenInfo}>
{t('Info')}
</Button>
<InfoDialog
open={Boolean(this.state.openInfo)}
maxAmount='4,000,000'
onClose={this.handleCloseInfo}
/>
<Button
disabled={
this.props.robot.loading ||

6
frontend/src/components/Dialogs/Community.tsx
View File

@ -21,10 +21,10 @@ import Flags from 'country-flag-icons/react/3x2';
interface Props {
open: boolean;
handleClickCloseCommunity: () => void;
onClose: () => void;
}
const CommunityDialog = ({ open = false, handleClickCloseCommunity }: Props): JSX.Element => {
const CommunityDialog = ({ open = false, onClose }: Props): JSX.Element => {
const { t } = useTranslation();
const flagProps = {
@ -39,7 +39,7 @@ const CommunityDialog = ({ open = false, handleClickCloseCommunity }: Props): JS
return (
<Dialog
open={open}
onClose={handleClickCloseCommunity}
onClose={onClose}
aria-labelledby='community-dialog-title'
aria-describedby='community-description'
>

17
frontend/src/components/Dialogs/ExchangeSummary.tsx → frontend/src/components/Dialogs/CoordinatorSummary.tsx
View File

@ -25,7 +25,7 @@ import { pn } from '../../utils';
interface Props {
open: boolean;
handleClickCloseExchangeSummary: () => void;
onClose: () => void;
numPublicBuyOrders: number;
numPublicSellOrders: number;
bookLiquidity: number;
@ -36,9 +36,9 @@ interface Props {
swapFeeRate: number;
}
const ExchangeSummaryDialog = ({
const CoordinatorSummaryDialog = ({
open = false,
handleClickCloseExchangeSummary,
onClose,
numPublicBuyOrders,
numPublicSellOrders,
bookLiquidity,
@ -54,15 +54,10 @@ const ExchangeSummaryDialog = ({
}
return (
<Dialog
open={open}
onClose={handleClickCloseExchangeSummary}
aria-labelledby='exchange-summary-title'
aria-describedby='exchange-summary-description'
>
<Dialog open={open} onClose={onClose}>
<DialogContent>
<Typography component='h5' variant='h5'>
{t('Exchange Summary')}
{t('Coordinator Summary')}
</Typography>
<List dense>
@ -189,4 +184,4 @@ const ExchangeSummaryDialog = ({
);
};
export default ExchangeSummaryDialog;
export default CoordinatorSummaryDialog;

8
frontend/src/components/Dialogs/Stats.tsx
View File

@ -27,11 +27,11 @@ import { pn } from '../../utils';
interface Props {
open: boolean;
handleClickCloseStatsForNerds: () => void;
onClose: () => void;
lndVersion: string;
coordinatorVersion: string;
clientVersion: string;
network: string;
network: string | undefined;
nodeAlias: string;
nodeId: string;
alternativeName: string;
@ -43,7 +43,7 @@ interface Props {
const StatsDialog = ({
open = false,
handleClickCloseStatsForNerds,
onClose,
lndVersion,
coordinatorVersion,
clientVersion,
@ -61,7 +61,7 @@ const StatsDialog = ({
return (
<Dialog
open={open}
onClose={handleClickCloseStatsForNerds}
onClose={onClose}
aria-labelledby='stats-for-nerds-dialog-title'
aria-describedby='stats-for-nerds-description'
>

9
frontend/src/components/Dialogs/UpdateClient.tsx
View File

@ -9,7 +9,6 @@ import {
Divider,
List,
ListItemText,
ListItem,
ListItemIcon,
ListItemButton,
Typography,
@ -23,19 +22,19 @@ interface Props {
open: boolean;
clientVersion: string;
coordinatorVersion: string;
handleClickClose: () => void;
onClose: () => void;
}
const UpdateClientDialog = ({
open = false,
clientVersion,
coordinatorVersion,
handleClickClose,
onClose,
}: Props): JSX.Element => {
const { t } = useTranslation();
return (
<Dialog open={open} onClose={handleClickClose}>
<Dialog open={open} onClose={onClose}>
<DialogContent>
<Typography component='h5' variant='h5'>
{t('Update your RoboSats client')}
@ -103,7 +102,7 @@ const UpdateClientDialog = ({
</ListItemButton>
<DialogActions>
<Button onClick={handleClickClose}>{t('Go away!')}</Button>
<Button onClick={onClose}>{t('Go away!')}</Button>
</DialogActions>
</List>
</DialogContent>

2
frontend/src/components/Dialogs/index.ts
View File

@ -4,7 +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 ExchangeSummaryDialog } from './ExchangeSummary';
export { default as CoordinatorSummaryDialog } from './CoordinatorSummary';
export { default as ProfileDialog } from './Profile';
export { default as StatsDialog } from './Stats';
export { default as EnableTelegramDialog } from './EnableTelegram';

5
frontend/src/models/Info.model.ts
View File

@ -23,6 +23,9 @@ export interface Info {
openUpdateClient: boolean;
}
import packageJson from '../../package.json';
const semver = packageJson.version.split('.');
export const defaultInfo: Info = {
num_public_buy_orders: 0,
num_public_sell_orders: 0,
@ -44,7 +47,7 @@ export const defaultInfo: Info = {
current_swap_fee_rate: 0,
network: undefined,
coordinatorVersion: 'v?.?.?',
clientVersion: 'v?.?.?',
clientVersion: `v${semver[0]}.${semver[1]}.${semver[2]}`,
openUpdateClient: false,
};