Add old UserGen and BottomBar to new main.tsx

This commit is contained in:
Reckless_Satoshi 2022-10-18 09:43:03 -07:00
parent 1e257d1924
commit fa3e60208f
No known key found for this signature in database
GPG Key ID: 9C4585B561315571
13 changed files with 263 additions and 304 deletions

View File

@ -4,7 +4,6 @@ import {
Badge, Badge,
Tooltip, Tooltip,
ListItemAvatar, ListItemAvatar,
Avatar,
Paper, Paper,
Grid, Grid,
IconButton, IconButton,
@ -42,99 +41,38 @@ import {
UpdateClientDialog, UpdateClientDialog,
} from './Dialogs'; } from './Dialogs';
import checkVer from '../utils/checkVer';
class BottomBar extends Component { class BottomBar extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = {
openStatsForNerds: false,
openCommuniy: false,
openExchangeSummary: false,
openClaimRewards: false,
openUpdateClient: false,
num_public_buy_orders: 0,
num_public_sell_orders: 0,
book_liquidity: 0,
active_robots_today: 0,
maker_fee: 0,
taker_fee: 0,
last_day_nonkyc_btc_premium: 0,
last_day_volume: 0,
lifetime_volume: 0,
robosats_running_commit_hash: '000000000000000',
openProfile: false,
profileShown: false,
alternative_site: 'robosats...',
node_id: '00000000',
showRewards: false,
rewardInvoice: null,
badInvoice: false,
showRewardsSpinner: false,
withdrawn: false,
};
}
componentDidMount() {
this.getInfo();
}
getInfo() {
this.setState(null);
apiClient.get('/api/info/').then((data) => {
const versionInfo = checkVer(data.version.major, data.version.minor, data.version.patch);
this.setState({
...data,
openUpdateClient: versionInfo.updateAvailable,
coordinatorVersion: versionInfo.coordinatorVersion,
clientVersion: versionInfo.clientVersion,
});
this.props.setAppState({
nickname: data.nickname,
loading: false,
activeOrderId: data.active_order_id ? data.active_order_id : null,
lastOrderId: data.last_order_id ? data.last_order_id : null,
referralCode: data.referral_code,
tgEnabled: data.tg_enabled,
tgBotName: data.tg_bot_name,
tgToken: data.tg_token,
earnedRewards: data.earned_rewards,
lastDayPremium: data.last_day_nonkyc_btc_premium,
stealthInvoices: data.wants_stealth,
});
});
} }
handleClickOpenStatsForNerds = () => { handleClickOpenStatsForNerds = () => {
this.setState({ openStatsForNerds: true }); this.props.setInfo({ ...this.props.info, openStatsForNerds: true });
}; };
handleClickCloseStatsForNerds = () => { handleClickCloseStatsForNerds = () => {
this.setState({ openStatsForNerds: false }); this.props.setInfo({ ...this.props.info, openStatsForNerds: false });
}; };
handleClickOpenCommunity = () => { handleClickOpenCommunity = () => {
this.setState({ openCommuniy: true }); this.props.setInfo({ ...this.props.info, openCommunity: true });
}; };
handleClickCloseCommunity = () => { handleClickCloseCommunity = () => {
this.setState({ openCommuniy: false }); this.props.setInfo({ ...this.props.info, openCommunity: false });
}; };
handleClickOpenProfile = () => { handleClickOpenProfile = () => {
this.getInfo(); this.props.fetchInfo();
this.setState({ openProfile: true, profileShown: true }); this.props.setInfo({ ...this.props.info, openProfile: true, profileShown: true });
}; };
handleClickCloseProfile = () => { handleClickCloseProfile = () => {
this.setState({ openProfile: false }); this.props.setInfo({ ...this.props.info, openProfile: false });
}; };
handleSubmitInvoiceClicked = (e, rewardInvoice) => { handleSubmitInvoiceClicked = (e, rewardInvoice) => {
this.setState({ this.props.setInfo({ ...this.props.info, badInvoice: false, showRewardsSpinner: true });
badInvoice: false,
showRewardsSpinner: true,
});
apiClient apiClient
.post('/api/reward/', { .post('/api/reward/', {
@ -142,14 +80,16 @@ class BottomBar extends Component {
}) })
.then( .then(
(data) => (data) =>
this.setState({ this.props.setInfo({
...this.props.info,
badInvoice: data.bad_invoice, badInvoice: data.bad_invoice,
openClaimRewards: !data.successful_withdrawal, openClaimRewards: !data.successful_withdrawal,
withdrawn: !!data.successful_withdrawal, withdrawn: !!data.successful_withdrawal,
showRewardsSpinner: false, showRewardsSpinner: false,
}) & }) &
this.props.setAppState({ this.props.setRobot({
earnedRewards: data.successful_withdrawal ? 0 : this.props.earnedRewards, ...this.props.robot,
earnedRewards: data.successful_withdrawal ? 0 : this.props.robot.earnedRewards,
}), }),
); );
e.preventDefault(); e.preventDefault();
@ -158,7 +98,9 @@ class BottomBar extends Component {
handleSetStealthInvoice = (wantsStealth) => { handleSetStealthInvoice = (wantsStealth) => {
apiClient apiClient
.put('/api/stealth/', { wantsStealth }) .put('/api/stealth/', { wantsStealth })
.then((data) => this.props.setAppState({ stealthInvoices: data?.wantsStealth })); .then((data) =>
this.props.setRobot({ ...this.props.robot, stealthInvoices: data?.wantsStealth }),
);
}; };
getHost() { getHost() {
@ -171,19 +113,21 @@ class BottomBar extends Component {
showProfileButton = () => { showProfileButton = () => {
return ( return (
this.props.avatarLoaded && this.props.robot.avatarLoaded &&
(this.props.token ? systemClient.getCookie('robot_token') === this.props.token : true) && (this.props.robot.token
? systemClient.getCookie('robot_token') === this.props.robot.token
: true) &&
systemClient.getCookie('sessionid') systemClient.getCookie('sessionid')
); );
}; };
bottomBarDesktop = () => { bottomBarDesktop = () => {
const { t } = this.props; const { t } = this.props;
const hasRewards = this.props.earnedRewards > 0; const hasRewards = this.props.robot.earnedRewards > 0;
const hasOrder = !!( const hasOrder = !!(
(this.props.activeOrderId > 0) & (this.props.robot.activeOrderId > 0) &
!this.state.profileShown & !this.props.infoprofileShown &
this.props.avatarLoaded this.props.robot.avatarLoaded
); );
const fontSize = this.props.theme.typography.fontSize; const fontSize = this.props.theme.typography.fontSize;
const fontSizeFactor = fontSize / 14; // default fontSize is 14 const fontSizeFactor = fontSize / 14; // default fontSize is 14
@ -208,16 +152,18 @@ class BottomBar extends Component {
<RobotAvatar <RobotAvatar
style={{ marginTop: -13 }} style={{ marginTop: -13 }}
statusColor={ statusColor={
(this.props.activeOrderId > 0) & !this.props.profileShown (this.props.robot.activeOrderId > 0) & !this.props.robot.profileShown
? 'primary' ? 'primary'
: undefined : undefined
} }
nickname={this.props.nickname} nickname={this.props.robot.nickname}
onLoad={() => this.props.setAppState({ avatarLoaded: true })} onLoad={() =>
this.props.setRobot({ ...this.props.robot, avatarLoaded: true })
}
/> />
</ListItemAvatar> </ListItemAvatar>
</Tooltip> </Tooltip>
<ListItemText primary={this.props.nickname} /> <ListItemText primary={this.props.robot.nickname} />
</ListItemButton> </ListItemButton>
</div> </div>
</Grid> </Grid>
@ -228,10 +174,6 @@ class BottomBar extends Component {
<IconButton <IconButton
disabled={!this.showProfileButton()} disabled={!this.showProfileButton()}
color='primary' color='primary'
onClick={() =>
this.props.setAppState({ buyChecked: false, sellChecked: true, type: 0 }) &
this.getInfo()
}
to={`/book/`} to={`/book/`}
component={LinkRouter} component={LinkRouter}
> >
@ -240,7 +182,7 @@ class BottomBar extends Component {
</ListItemIcon> </ListItemIcon>
<ListItemText <ListItemText
{...typographyProps} {...typographyProps}
primary={this.state.num_public_buy_orders} primary={this.props.info.num_public_buy_orders}
secondary={t('Public Buy Orders')} secondary={t('Public Buy Orders')}
/> />
</ListItem> </ListItem>
@ -252,10 +194,6 @@ class BottomBar extends Component {
<IconButton <IconButton
disabled={!this.showProfileButton()} disabled={!this.showProfileButton()}
color='primary' color='primary'
onClick={() =>
this.props.setAppState({ buyChecked: true, sellChecked: false, type: 1 }) &
this.getInfo()
}
to={`/book/`} to={`/book/`}
component={LinkRouter} component={LinkRouter}
> >
@ -264,7 +202,7 @@ class BottomBar extends Component {
</ListItemIcon> </ListItemIcon>
<ListItemText <ListItemText
{...typographyProps} {...typographyProps}
primary={this.state.num_public_sell_orders} primary={this.props.info.num_public_sell_orders}
secondary={t('Public Sell Orders')} secondary={t('Public Sell Orders')}
/> />
</ListItem> </ListItem>
@ -276,7 +214,6 @@ class BottomBar extends Component {
<IconButton <IconButton
disabled={!this.showProfileButton()} disabled={!this.showProfileButton()}
color='primary' color='primary'
onClick={() => this.getInfo()}
to={`/`} to={`/`}
component={LinkRouter} component={LinkRouter}
> >
@ -285,7 +222,7 @@ class BottomBar extends Component {
</ListItemIcon> </ListItemIcon>
<ListItemText <ListItemText
{...typographyProps} {...typographyProps}
primary={this.state.active_robots_today} primary={this.props.info.active_robots_today}
secondary={t('Today Active Robots')} secondary={t('Today Active Robots')}
/> />
</ListItem> </ListItem>
@ -300,7 +237,7 @@ class BottomBar extends Component {
</ListItemIcon> </ListItemIcon>
<ListItemText <ListItemText
{...typographyProps} {...typographyProps}
primary={this.state.last_day_nonkyc_btc_premium + '%'} primary={this.props.info.last_day_nonkyc_btc_premium + '%'}
secondary={t('24h Avg Premium')} secondary={t('24h Avg Premium')}
/> />
</ListItem> </ListItem>
@ -315,7 +252,7 @@ class BottomBar extends Component {
</ListItemIcon> </ListItemIcon>
<ListItemText <ListItemText
{...typographyProps} {...typographyProps}
primary={(this.state.maker_fee + this.state.taker_fee) * 100} primary={(this.props.info.maker_fee + this.props.info.taker_fee) * 100}
secondary={t('Trade Fee')} secondary={t('Trade Fee')}
/> />
</ListItem> </ListItem>
@ -471,24 +408,20 @@ class BottomBar extends Component {
}; };
handleClickOpenExchangeSummary = () => { handleClickOpenExchangeSummary = () => {
// avoid calling getInfo while sessionid not yet set. Temporary fix. this.props.setInfo({ ...this.props.info, openExchangeSummary: true });
if (systemClient.getCookie('sessionid')) {
this.getInfo();
}
this.setState({ openExchangeSummary: true });
}; };
handleClickCloseExchangeSummary = () => { handleClickCloseExchangeSummary = () => {
this.setState({ openExchangeSummary: false }); this.props.setInfo({ ...this.props.info, openExchangeSummary: false });
}; };
bottomBarPhone = () => { bottomBarPhone = () => {
const { t } = this.props; const { t } = this.props;
const hasRewards = this.props.earnedRewards > 0; const hasRewards = this.props.robot.earnedRewards > 0;
const hasOrder = !!( const hasOrder = !!(
(this.state.active_order_id > 0) & (this.props.info.active_order_id > 0) &
!this.state.profileShown & !this.props.info.profileShown &
this.props.avatarLoaded this.props.robot.avatarLoaded
); );
return ( return (
<Paper elevation={6} style={{ height: '2.85em', width: '100%' }}> <Paper elevation={6} style={{ height: '2.85em', width: '100%' }}>
@ -534,7 +467,7 @@ class BottomBar extends Component {
to={`/book/`} to={`/book/`}
component={LinkRouter} component={LinkRouter}
> >
<Badge badgeContent={this.state.num_public_buy_orders} color='action'> <Badge badgeContent={this.props.info.num_public_buy_orders} color='action'>
<InventoryIcon /> <InventoryIcon />
</Badge> </Badge>
</IconButton> </IconButton>
@ -553,7 +486,7 @@ class BottomBar extends Component {
to={`/book/`} to={`/book/`}
component={LinkRouter} component={LinkRouter}
> >
<Badge badgeContent={this.state.num_public_sell_orders} color='action'> <Badge badgeContent={this.props.info.num_public_sell_orders} color='action'>
<SellIcon /> <SellIcon />
</Badge> </Badge>
</IconButton> </IconButton>
@ -569,7 +502,7 @@ class BottomBar extends Component {
to={`/`} to={`/`}
component={LinkRouter} component={LinkRouter}
> >
<Badge badgeContent={this.state.active_robots_today} color='action'> <Badge badgeContent={this.props.info.active_robots_today} color='action'>
<SmartToyIcon /> <SmartToyIcon />
</Badge> </Badge>
</IconButton> </IconButton>
@ -579,7 +512,10 @@ class BottomBar extends Component {
<Grid item xs={1.8} align='center'> <Grid item xs={1.8} align='center'>
<Tooltip enterTouchDelay={300} title={t('24h non-KYC bitcoin premium')}> <Tooltip enterTouchDelay={300} title={t('24h non-KYC bitcoin premium')}>
<IconButton color='primary' onClick={this.handleClickOpenExchangeSummary}> <IconButton color='primary' onClick={this.handleClickOpenExchangeSummary}>
<Badge badgeContent={this.state.last_day_nonkyc_btc_premium + '%'} color='action'> <Badge
badgeContent={this.props.info.last_day_nonkyc_btc_premium + '%'}
color='action'
>
<PriceChangeIcon /> <PriceChangeIcon />
</Badge> </Badge>
</IconButton> </IconButton>
@ -622,65 +558,65 @@ class BottomBar extends Component {
return ( return (
<div> <div>
<CommunityDialog <CommunityDialog
isOpen={this.state.openCommuniy} open={this.props.info.openCommunity}
handleClickCloseCommunity={this.handleClickCloseCommunity} handleClickCloseCommunity={this.handleClickCloseCommunity}
/> />
<UpdateClientDialog <UpdateClientDialog
open={this.state.openUpdateClient} open={this.props.info.openUpdateClient}
coordinatorVersion={this.state.coordinatorVersion} coordinatorVersion={this.props.info.coordinatorVersion}
clientVersion={this.state.clientVersion} clientVersion={this.props.info.clientVersion}
handleClickClose={() => this.setState({ openUpdateClient: false })} handleClickClose={() => this.setState({ openUpdateClient: false })}
/> />
<ExchangeSummaryDialog <ExchangeSummaryDialog
isOpen={this.state.openExchangeSummary} open={this.props.info.openExchangeSummary}
handleClickCloseExchangeSummary={this.handleClickCloseExchangeSummary} handleClickCloseExchangeSummary={this.handleClickCloseExchangeSummary}
numPublicBuyOrders={this.state.num_public_buy_orders} numPublicBuyOrders={this.props.info.num_public_buy_orders}
numPublicSellOrders={this.state.num_public_sell_orders} numPublicSellOrders={this.props.info.num_public_sell_orders}
bookLiquidity={this.state.book_liquidity} bookLiquidity={this.props.info.book_liquidity}
activeRobotsToday={this.state.active_robots_today} activeRobotsToday={this.props.info.active_robots_today}
lastDayNonkycBtcPremium={this.state.last_day_nonkyc_btc_premium} lastDayNonkycBtcPremium={this.props.info.last_day_nonkyc_btc_premium}
makerFee={this.state.maker_fee} makerFee={this.props.info.maker_fee}
takerFee={this.state.taker_fee} takerFee={this.props.info.taker_fee}
swapFeeRate={this.state.current_swap_fee_rate} swapFeeRate={this.props.info.current_swap_fee_rate}
/> />
<ProfileDialog <ProfileDialog
isOpen={this.state.openProfile} open={this.props.info.openProfile}
handleClickCloseProfile={this.handleClickCloseProfile} handleClickCloseProfile={this.handleClickCloseProfile}
nickname={this.props.nickname} nickname={this.props.robot.nickname}
activeOrderId={this.props.activeOrderId} activeOrderId={this.props.robot.activeOrderId}
lastOrderId={this.props.lastOrderId} lastOrderId={this.props.robotlastOrderId}
referralCode={this.props.referralCode} referralCode={this.props.robot.referralCode}
tgEnabled={this.props.tgEnabled} tgEnabled={this.props.robot.tgEnabled}
tgBotName={this.props.tgBotName} tgBotName={this.props.robot.tgBotName}
tgToken={this.props.tgToken} tgToken={this.props.robot.tgToken}
handleSubmitInvoiceClicked={this.handleSubmitInvoiceClicked} handleSubmitInvoiceClicked={this.handleSubmitInvoiceClicked}
host={this.getHost()} host={this.getHost()}
showRewardsSpinner={this.state.showRewardsSpinner} showRewardsSpinner={this.props.info.showRewardsSpinner}
withdrawn={this.state.withdrawn} withdrawn={this.props.info.withdrawn}
badInvoice={this.state.badInvoice} badInvoice={this.props.info.badInvoice}
earnedRewards={this.props.earnedRewards} earnedRewards={this.props.robot.earnedRewards}
setAppState={this.props.setAppState} updateRobot={(newParams) => this.props.setRobot({ ...robot, ...newParams })}
stealthInvoices={this.props.stealthInvoices} stealthInvoices={this.props.stealthInvoices}
handleSetStealthInvoice={this.handleSetStealthInvoice} handleSetStealthInvoice={this.handleSetStealthInvoice}
/> />
<StatsDialog <StatsDialog
isOpen={this.state.openStatsForNerds} open={this.props.info.openStatsForNerds}
handleClickCloseStatsForNerds={this.handleClickCloseStatsForNerds} handleClickCloseStatsForNerds={this.handleClickCloseStatsForNerds}
coordinatorVersion={this.state.coordinatorVersion} coordinatorVersion={this.props.info.coordinatorVersion}
clientVersion={this.state.clientVersion} clientVersion={this.props.info.clientVersion}
lndVersion={this.state.lnd_version} lndVersion={this.props.info.lnd_version}
network={this.state.network} network={this.props.info.network}
nodeAlias={this.state.node_alias} nodeAlias={this.props.info.node_alias}
nodeId={this.state.node_id} nodeId={this.props.info.node_id}
alternativeName={this.state.alternative_name} alternativeName={this.props.info.alternative_name}
alternativeSite={this.state.alternative_site} alternativeSite={this.props.info.alternative_site}
commitHash={this.state.robosats_running_commit_hash} commitHash={this.props.info.robosats_running_commit_hash}
lastDayVolume={this.state.last_day_volume} lastDayVolume={this.props.info.last_day_volume}
lifetimeVolume={this.state.lifetime_volume} lifetimeVolume={this.props.info.lifetime_volume}
/> />
<MediaQuery minWidth={1200}>{this.bottomBarDesktop()}</MediaQuery> <MediaQuery minWidth={1200}>{this.bottomBarDesktop()}</MediaQuery>

View File

@ -20,11 +20,11 @@ import RedditIcon from '@mui/icons-material/Reddit';
import Flags from 'country-flag-icons/react/3x2'; import Flags from 'country-flag-icons/react/3x2';
interface Props { interface Props {
isOpen: boolean; open: boolean;
handleClickCloseCommunity: () => void; handleClickCloseCommunity: () => void;
} }
const CommunityDialog = ({ isOpen, handleClickCloseCommunity }: Props): JSX.Element => { const CommunityDialog = ({ open = false, handleClickCloseCommunity }: Props): JSX.Element => {
const { t } = useTranslation(); const { t } = useTranslation();
const flagProps = { const flagProps = {
@ -38,7 +38,7 @@ const CommunityDialog = ({ isOpen, handleClickCloseCommunity }: Props): JSX.Elem
return ( return (
<Dialog <Dialog
open={isOpen} open={open}
onClose={handleClickCloseCommunity} onClose={handleClickCloseCommunity}
aria-labelledby='community-dialog-title' aria-labelledby='community-dialog-title'
aria-describedby='community-description' aria-describedby='community-description'

View File

@ -24,7 +24,7 @@ import LinkIcon from '@mui/icons-material/Link';
import { pn } from '../../utils/prettyNumbers'; import { pn } from '../../utils/prettyNumbers';
interface Props { interface Props {
isOpen: boolean; open: boolean;
handleClickCloseExchangeSummary: () => void; handleClickCloseExchangeSummary: () => void;
numPublicBuyOrders: number; numPublicBuyOrders: number;
numPublicSellOrders: number; numPublicSellOrders: number;
@ -37,7 +37,7 @@ interface Props {
} }
const ExchangeSummaryDialog = ({ const ExchangeSummaryDialog = ({
isOpen, open = false,
handleClickCloseExchangeSummary, handleClickCloseExchangeSummary,
numPublicBuyOrders, numPublicBuyOrders,
numPublicSellOrders, numPublicSellOrders,
@ -55,7 +55,7 @@ const ExchangeSummaryDialog = ({
return ( return (
<Dialog <Dialog
open={isOpen} open={open}
onClose={handleClickCloseExchangeSummary} onClose={handleClickCloseExchangeSummary}
aria-labelledby='exchange-summary-title' aria-labelledby='exchange-summary-title'
aria-describedby='exchange-summary-description' aria-describedby='exchange-summary-description'

View File

@ -41,7 +41,7 @@ import { getWebln } from '../../utils/webln';
import RobotAvatar from '../Robots/RobotAvatar'; import RobotAvatar from '../Robots/RobotAvatar';
interface Props { interface Props {
isOpen: boolean; open: boolean;
handleClickCloseProfile: () => void; handleClickCloseProfile: () => void;
nickname: string; nickname: string;
activeOrderId: string | number; activeOrderId: string | number;
@ -58,11 +58,11 @@ interface Props {
earnedRewards: number; earnedRewards: number;
stealthInvoices: boolean; stealthInvoices: boolean;
handleSetStealthInvoice: (stealth: boolean) => void; handleSetStealthInvoice: (stealth: boolean) => void;
setAppState: (state: any) => void; // TODO: move to a ContextProvider updateRobot: (state: any) => void; // TODO: move to a ContextProvider
} }
const ProfileDialog = ({ const ProfileDialog = ({
isOpen, open = false,
handleClickCloseProfile, handleClickCloseProfile,
nickname, nickname,
activeOrderId, activeOrderId,
@ -77,7 +77,7 @@ const ProfileDialog = ({
withdrawn, withdrawn,
badInvoice, badInvoice,
earnedRewards, earnedRewards,
setAppState, updateRobot,
stealthInvoices, stealthInvoices,
handleSetStealthInvoice, handleSetStealthInvoice,
}: Props): JSX.Element => { }: Props): JSX.Element => {
@ -101,7 +101,7 @@ const ProfileDialog = ({
if (robotToken) { if (robotToken) {
systemClient.copyToClipboard(robotToken); systemClient.copyToClipboard(robotToken);
setAppState({ copiedToken: true }); updateRobot({ copiedToken: true });
} }
}; };
@ -128,7 +128,7 @@ const ProfileDialog = ({
return ( return (
<Dialog <Dialog
open={isOpen} open={open}
onClose={handleClickCloseProfile} onClose={handleClickCloseProfile}
aria-labelledby='profile-title' aria-labelledby='profile-title'
aria-describedby='profile-description' aria-describedby='profile-description'

View File

@ -26,7 +26,7 @@ import { AmbossIcon, BitcoinSignIcon, RoboSatsNoTextIcon } from '../Icons';
import { pn } from '../../utils/prettyNumbers'; import { pn } from '../../utils/prettyNumbers';
interface Props { interface Props {
isOpen: boolean; open: boolean;
handleClickCloseStatsForNerds: () => void; handleClickCloseStatsForNerds: () => void;
lndVersion: string; lndVersion: string;
coordinatorVersion: string; coordinatorVersion: string;
@ -42,7 +42,7 @@ interface Props {
} }
const StatsDialog = ({ const StatsDialog = ({
isOpen, open = false,
handleClickCloseStatsForNerds, handleClickCloseStatsForNerds,
lndVersion, lndVersion,
coordinatorVersion, coordinatorVersion,
@ -60,7 +60,7 @@ const StatsDialog = ({
return ( return (
<Dialog <Dialog
open={isOpen} open={open}
onClose={handleClickCloseStatsForNerds} onClose={handleClickCloseStatsForNerds}
aria-labelledby='stats-for-nerds-dialog-title' aria-labelledby='stats-for-nerds-dialog-title'
aria-describedby='stats-for-nerds-description' aria-describedby='stats-for-nerds-description'

View File

@ -75,7 +75,7 @@ class Chat extends Component {
this.setState({ connected: false }); this.setState({ connected: false });
}); });
this.setState({ connected: true, connection: connection }); this.setState({ connected: true, connection });
}); });
} }

View File

@ -9,6 +9,7 @@ import OrderPage from './OrderPage';
import BottomBar from './BottomBar'; import BottomBar from './BottomBar';
import { apiClient } from '../services/api'; import { apiClient } from '../services/api';
import checkVer from '../utils/checkVer';
import { import {
Book, Book,
@ -24,11 +25,19 @@ import {
defaultSettings, defaultSettings,
} from '../models'; } from '../models';
const getWindowSize = function (fontSize: number) {
// returns window size in EM units
return {
width: window.innerWidth / fontSize,
height: window.innerHeight / fontSize,
};
};
const Main = (): JSX.Element => { const Main = (): JSX.Element => {
const theme = useTheme(); const theme = useTheme();
const history = useHistory(); const history = useHistory();
const Router = window.NativeRobosats ? HashRouter : BrowserRouter; const Router = window.NativeRobosats != null ? HashRouter : BrowserRouter;
const basename = window.NativeRobosats ? window.location.pathname : ''; const basename = window.NativeRobosats != null ? window.location.pathname : '';
// All app data structured // All app data structured
const [book, setBook] = useState<Book>({ orders: [], loading: true }); const [book, setBook] = useState<Book>({ orders: [], loading: true });
@ -42,13 +51,8 @@ const Main = (): JSX.Element => {
const [fav, setFav] = useState<Favorites>({ type: null, currency: 0 }); const [fav, setFav] = useState<Favorites>({ type: null, currency: 0 });
const [settings, setSettings] = useState<Settings>(defaultSettings); const [settings, setSettings] = useState<Settings>(defaultSettings);
console.log(info);
const initialWindowSize = {
width: window.innerWidth / theme.typography.fontSize,
height: window.innerHeight / theme.typography.fontSize,
}; // EM values
const [windowSize, setWindowSize] = useState<{ width: number; height: number }>( const [windowSize, setWindowSize] = useState<{ width: number; height: number }>(
initialWindowSize, getWindowSize(theme.typography.fontSize),
); );
useEffect(() => { useEffect(() => {
@ -57,6 +61,7 @@ const Main = (): JSX.Element => {
} }
fetchBook(); fetchBook();
fetchLimits(); fetchLimits();
fetchInfo();
return () => { return () => {
if (typeof window !== undefined) { if (typeof window !== undefined) {
window.removeEventListener('resize', onResize); window.removeEventListener('resize', onResize);
@ -65,15 +70,12 @@ const Main = (): JSX.Element => {
}, []); }, []);
const onResize = function () { const onResize = function () {
setWindowSize({ setWindowSize(getWindowSize(theme.typography.fontSize));
width: window.innerWidth / theme.typography.fontSize,
height: window.innerHeight / theme.typography.fontSize,
});
}; };
const fetchBook = function () { const fetchBook = function () {
setBook({ ...book, loading: true }); setBook({ ...book, loading: true });
apiClient.get('/api/book/').then((data) => apiClient.get('/api/book/').then((data: any) =>
setBook({ setBook({
loading: false, loading: false,
orders: data.not_found ? [] : data, orders: data.not_found ? [] : data,
@ -81,43 +83,57 @@ const Main = (): JSX.Element => {
); );
}; };
const fetchLimits = () => { const fetchLimits = async () => {
setLimits({ ...limits, loading: true }); setLimits({ ...limits, loading: true });
const data = apiClient.get('/api/limits/').then((data) => { const data = apiClient.get('/api/limits/').then((data) => {
setLimits({ list: data, loading: false }); setLimits({ list: data, loading: false });
return data; return data;
}); });
return data; return await data;
};
const fetchInfo = function () {
apiClient.get('/api/info/').then((data: any) => {
const versionInfo: any = checkVer(data.version.major, data.version.minor, data.version.patch);
setInfo({
...data,
openUpdateClient: versionInfo.updateAvailable,
coordinatorVersion: versionInfo.coordinatorVersion,
clientVersion: versionInfo.clientVersion,
});
setRobot({
...robot,
nickname: data.nickname,
loading: false,
activeOrderId: data.active_order_id ? data.active_order_id : null,
lastOrderId: data.last_order_id ? data.last_order_id : null,
referralCode: data.referral_code,
tgEnabled: data.tg_enabled,
tgBotName: data.tg_bot_name,
tgToken: data.tg_token,
earnedRewards: data.earned_rewards,
stealthInvoices: data.wants_stealth,
});
});
}; };
return ( return (
<Router basename={basename}> <Router basename={basename}>
<div className='appCenter'> <div className='appCenter'>
<Switch> <Switch>
{/*
<Route <Route
exact exact
path='/' path='/'
render={(props) => ( render={(props: any) => (
<UserGenPage <UserGenPage match={props.match} theme={theme} robot={robot} setRobot={setRobot} />
{...props}
{...this.state}
{...this.props}
setAppState={this.setAppState}
/>
)} )}
/> />
<Route <Route
path='/ref/:refCode' path='/ref/:refCode'
render={(props) => ( render={(props: any) => (
<UserGenPage <UserGenPage match={props.match} theme={theme} robot={robot} setRobot={setRobot} />
{...props}
{...this.state}
{...this.props}
setAppState={this.setAppState}
/>
)} )}
/> */} />
<Route <Route
path='/make' path='/make'
render={() => ( render={() => (
@ -150,29 +166,30 @@ const Main = (): JSX.Element => {
/> />
)} )}
/> />
{/* <Route <Route
path='/order/:orderId' path='/order/:orderId'
render={(props) => ( render={(props) => <OrderPage theme={theme} history={history} {...props} />}
<OrderPage
{...props}
{...this.state}
{...this.props}
setAppState={this.setAppState}
/>
)}
/> />
*/}
</Switch> </Switch>
</div> </div>
{/* <div <div
className='bottomBar'
style={{ style={{
height: '2.857em', height: '2.857em',
width: `${(windowSize.width / 16) * 14}em`, width: `${(windowSize.width / 16) * 14}em`,
position: 'fixed',
bottom: 0,
}} }}
> >
<BottomBar redirectTo={(location) => history.push(location)} info={info} /> <BottomBar
</div> */} theme={theme}
redirectTo={(location: string) => history.push(location)}
robot={robot}
setRobot={setRobot}
info={info}
setInfo={setInfo}
fetchInfo={fetchInfo}
/>
</div>
</Router> </Router>
); );
}; };

View File

@ -525,10 +525,7 @@ class OrderPage extends Component {
<StoreTokenDialog <StoreTokenDialog
open={this.state.openStoreToken} open={this.state.openStoreToken}
onClose={() => this.setState({ openStoreToken: false })} onClose={() => this.setState({ openStoreToken: false })}
onClickCopy={() => onClickCopy={() => systemClient.copyToClipboard(systemClient.getCookie('robot_token'))}
systemClient.copyToClipboard(systemClient.getCookie('robot_token')) &
this.props.setAppState({ copiedToken: true })
}
copyIconColor={this.props.copiedToken ? 'inherit' : 'primary'} copyIconColor={this.props.copiedToken ? 'inherit' : 'primary'}
onClickBack={() => this.setState({ openStoreToken: false })} onClickBack={() => this.setState({ openStoreToken: false })}
onClickDone={() => onClickDone={() =>

View File

@ -11,7 +11,6 @@ import {
IconButton, IconButton,
} from '@mui/material'; } from '@mui/material';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import SmoothImage from 'react-smooth-image';
import { InfoDialog } from './Dialogs'; import { InfoDialog } from './Dialogs';
import SmartToyIcon from '@mui/icons-material/SmartToy'; import SmartToyIcon from '@mui/icons-material/SmartToy';
@ -44,19 +43,18 @@ class UserGenPage extends Component {
componentDidMount() { componentDidMount() {
// Checks in parent HomePage if there is already a nick and token // Checks in parent HomePage if there is already a nick and token
// Displays the existing one // Displays the existing one
if (this.props.nickname != null) { if (this.props.robot.nickname != null) {
this.setState({ this.setState({
token: this.props.token ? this.props.token : '', inputToken: this.props.robot.token ? this.props.robot.token : '',
loadingRobot: false,
}); });
} else if (window.NativeRobosats && systemClient.getCookie('robot_token')) { } else if (window.NativeRobosats && systemClient.getCookie('robot_token')) {
const token = systemClient.getCookie('robot_token'); const token = systemClient.getCookie('robot_token');
this.setState({ token }); this.setState({ inputToken: token });
this.getGeneratedUser(token); this.getGeneratedUser(token);
} else { } else {
const newToken = genBase62Token(36); const newToken = genBase62Token(36);
this.setState({ this.setState({
token: newToken, inputToken: newToken,
}); });
this.getGeneratedUser(newToken); this.getGeneratedUser(newToken);
} }
@ -65,6 +63,7 @@ class UserGenPage extends Component {
getGeneratedUser = (token) => { getGeneratedUser = (token) => {
const strength = tokenStrength(token); const strength = tokenStrength(token);
const refCode = this.refCode; const refCode = this.refCode;
this.props.setRobot({ ...this.props.robot, loading: true });
const requestBody = genKey(token).then(function (key) { const requestBody = genKey(token).then(function (key) {
return { return {
@ -79,46 +78,48 @@ class UserGenPage extends Component {
}); });
requestBody.then((body) => requestBody.then((body) =>
apiClient.post('/api/user/', body).then((data) => { apiClient.post('/api/user/', body).then((data) => {
this.setState({ this.props.setRobot({
bit_entropy: data.token_bits_entropy, bit_entropy: data.token_bits_entropy,
shannon_entropy: data.token_shannon_entropy, shannon_entropy: data.token_shannon_entropy,
bad_request: data.bad_request, bad_request: data.bad_request,
found: data.found, found: data.found,
loadingRobot: false, loading: false,
stealthInvoices: data.wants_stealth, stealthInvoices: data.wants_stealth,
}) & });
// Add nick and token to App state (token only if not a bad request) // Add nick and token to App state (token only if not a bad request)
(data.bad_request data.bad_request
? this.props.setAppState({ ? this.props.setRobot({
nickname: data.nickname, ...this.props.robot,
avatarLoaded: false, nickname: data.nickname,
activeOrderId: data.active_order_id ? data.active_order_id : null, avatarLoaded: false,
referralCode: data.referral_code, activeOrderId: data.active_order_id ? data.active_order_id : null,
earnedRewards: data.earned_rewards, referralCode: data.referral_code,
lastOrderId: data.last_order_id ? data.last_order_id : null, earnedRewards: data.earned_rewards,
stealthInvoices: data.wants_stealth, lastOrderId: data.last_order_id ? data.last_order_id : null,
}) stealthInvoices: data.wants_stealth,
: this.props.setAppState({ })
nickname: data.nickname, : this.props.setRobot({
token, ...this.props.robot,
avatarLoaded: false, nickname: data.nickname,
activeOrderId: data.active_order_id ? data.active_order_id : null, token,
lastOrderId: data.last_order_id ? data.last_order_id : null, avatarLoaded: false,
referralCode: data.referral_code, activeOrderId: data.active_order_id ? data.active_order_id : null,
earnedRewards: data.earned_rewards, lastOrderId: data.last_order_id ? data.last_order_id : null,
stealthInvoices: data.wants_stealth, referralCode: data.referral_code,
tgEnabled: data.tg_enabled, earnedRewards: data.earned_rewards,
tgBotName: data.tg_bot_name, stealthInvoices: data.wants_stealth,
tgToken: data.tg_token, tgEnabled: data.tg_enabled,
}) & tgBotName: data.tg_bot_name,
systemClient.setCookie('robot_token', token) & tgToken: data.tg_token,
systemClient.setCookie('pub_key', data.public_key.split('\n').join('\\')) & }) &
systemClient.setCookie( systemClient.setCookie('robot_token', token) &
'enc_priv_key', systemClient.setCookie('pub_key', data.public_key.split('\n').join('\\')) &
data.encrypted_private_key.split('\n').join('\\'), systemClient.setCookie(
)) & 'enc_priv_key',
// If the robot has been found (recovered) we assume the token is backed up data.encrypted_private_key.split('\n').join('\\'),
(data.found ? this.props.setAppState({ copiedToken: true }) : null); );
// If the robot has been found (recovered) we assume the token is backed up
data.found ? this.props.setRobot({ ...this.props.robot, copiedToken: true }) : null;
}), }),
); );
}; };
@ -133,26 +134,27 @@ class UserGenPage extends Component {
} }
handleClickNewRandomToken = () => { handleClickNewRandomToken = () => {
const token = genBase62Token(36); const inputToken = genBase62Token(36);
this.setState({ this.setState({
token, inputToken,
tokenHasChanged: true, tokenHasChanged: true,
}); });
this.props.setAppState({ copiedToken: true }); this.props.setRobot({ ...this.props.robot, copiedToken: true });
}; };
handleChangeToken = (e) => { handleChangeToken = (e) => {
this.setState({ this.setState({
token: e.target.value.split(' ').join(''), inputToken: e.target.value.split(' ').join(''),
tokenHasChanged: true, tokenHasChanged: true,
}); });
}; };
handleClickSubmitToken = () => { handleClickSubmitToken = () => {
this.delGeneratedUser(); this.delGeneratedUser();
this.getGeneratedUser(this.state.token); this.getGeneratedUser(this.state.inputToken);
this.setState({ loadingRobot: true, tokenHasChanged: false }); this.setState({ tokenHasChanged: false });
this.props.setAppState({ this.props.setRobot({
...this.props.robot,
avatarLoaded: false, avatarLoaded: false,
nickname: null, nickname: null,
token: null, token: null,
@ -181,6 +183,10 @@ class UserGenPage extends Component {
}; };
render() { render() {
console.log(systemClient.getCookie('robot_token'));
console.log(this.props.robot.token);
console.log(systemClient.getCookie('robot_token') === this.props.robot.token);
const { t, i18n } = this.props; const { t, i18n } = this.props;
const fontSize = this.props.theme.typography.fontSize; const fontSize = this.props.theme.typography.fontSize;
const fontSizeFactor = fontSize / 14; // to scale sizes, default fontSize is 14 const fontSizeFactor = fontSize / 14; // to scale sizes, default fontSize is 14
@ -195,12 +201,12 @@ class UserGenPage extends Component {
align='center' align='center'
sx={{ width: 370 * fontSizeFactor, height: 260 * fontSizeFactor }} sx={{ width: 370 * fontSizeFactor, height: 260 * fontSizeFactor }}
> >
{this.props.avatarLoaded && this.props.nickname ? ( {this.props.robot.avatarLoaded && this.props.robot.nickname ? (
<div> <div>
<Grid item xs={12} align='center'> <Grid item xs={12} align='center'>
<Typography component='h5' variant='h5'> <Typography component='h5' variant='h5'>
<b> <b>
{this.props.nickname && systemClient.getCookie('sessionid') ? ( {this.props.robot.nickname && systemClient.getCookie('sessionid') ? (
<div <div
style={{ style={{
display: 'flex', display: 'flex',
@ -217,7 +223,7 @@ class UserGenPage extends Component {
width: 33 * fontSizeFactor, width: 33 * fontSizeFactor,
}} }}
/> />
<a>{this.props.nickname}</a> <a>{this.props.robot.nickname}</a>
<BoltIcon <BoltIcon
sx={{ sx={{
color: '#fcba03', color: '#fcba03',
@ -234,7 +240,7 @@ class UserGenPage extends Component {
</Grid> </Grid>
<Grid item xs={12} align='center'> <Grid item xs={12} align='center'>
<RobotAvatar <RobotAvatar
nickname={this.props.nickname} nickname={this.props.robot.nickname}
smooth={true} smooth={true}
style={{ maxWidth: 203 * fontSizeFactor, maxHeight: 203 * fontSizeFactor }} style={{ maxWidth: 203 * fontSizeFactor, maxHeight: 203 * fontSizeFactor }}
imageStyle={{ imageStyle={{
@ -271,7 +277,7 @@ class UserGenPage extends Component {
error={!!this.state.bad_request} error={!!this.state.bad_request}
label={t('Store your token safely')} label={t('Store your token safely')}
required={true} required={true}
value={this.state.token} value={this.state.inputToken}
variant='standard' variant='standard'
helperText={this.state.bad_request} helperText={this.state.bad_request}
size='small' size='small'
@ -301,11 +307,14 @@ class UserGenPage extends Component {
<IconButton <IconButton
color='primary' color='primary'
disabled={ disabled={
!this.props.avatarLoaded || !this.props.robot.avatarLoaded ||
!(systemClient.getCookie('robot_token') === this.state.token) !(systemClient.getCookie('robot_token') === this.state.inputToken)
} }
onClick={() => onClick={() =>
saveAsJson(this.props.nickname + '.json', this.createJsonFile()) saveAsJson(
this.props.robot.nickname + '.json',
this.createJsonFile(),
)
} }
> >
<DownloadIcon <DownloadIcon
@ -318,14 +327,14 @@ class UserGenPage extends Component {
<Grid item xs={6}> <Grid item xs={6}>
<Tooltip disableHoverListener enterTouchDelay={0} title={t('Copied!')}> <Tooltip disableHoverListener enterTouchDelay={0} title={t('Copied!')}>
<IconButton <IconButton
color={this.props.copiedToken ? 'inherit' : 'primary'} color={this.props.robot.copiedToken ? 'inherit' : 'primary'}
disabled={ disabled={
!this.props.avatarLoaded || !this.props.robot.avatarLoaded ||
!(systemClient.getCookie('robot_token') === this.state.token) !(systemClient.getCookie('robot_token') === this.state.inputToken)
} }
onClick={() => onClick={() =>
systemClient.copyToClipboard(systemClient.getCookie('robot_token')) & systemClient.copyToClipboard(systemClient.getCookie('robot_token')) &
this.props.setAppState({ copiedToken: true }) this.props.setRobot({ ...this.props.robot, copiedToken: true })
} }
> >
<ContentCopy <ContentCopy
@ -351,7 +360,7 @@ class UserGenPage extends Component {
</Grid> </Grid>
</Grid> </Grid>
<Grid item xs={12} align='center'> <Grid item xs={12} align='center'>
{this.state.tokenHasChanged ? ( {this.state.inputTokenHasChanged ? (
<Button type='submit' size='small' onClick={this.handleClickSubmitToken}> <Button type='submit' size='small' onClick={this.handleClickSubmitToken}>
<SmartToyIcon sx={{ width: 18 * fontSizeFactor, height: 18 * fontSizeFactor }} /> <SmartToyIcon sx={{ width: 18 * fontSizeFactor, height: 18 * fontSizeFactor }} />
<span> {t('Generate Robot')}</span> <span> {t('Generate Robot')}</span>
@ -376,9 +385,9 @@ class UserGenPage extends Component {
<ButtonGroup variant='contained' aria-label='outlined primary button group'> <ButtonGroup variant='contained' aria-label='outlined primary button group'>
<Button <Button
disabled={ disabled={
this.state.loadingRobot !== false || this.props.robot.loading ||
!(this.props.token !(this.props.robot.token
? systemClient.getCookie('robot_token') === this.props.token ? systemClient.getCookie('robot_token') === this.props.robot.token
: true) : true)
} }
color='primary' color='primary'
@ -397,9 +406,9 @@ class UserGenPage extends Component {
/> />
<Button <Button
disabled={ disabled={
this.state.loadingRobot !== false || this.props.robot.loading ||
!(this.props.token !(this.props.robot.token
? systemClient.getCookie('robot_token') === this.props.token ? systemClient.getCookie('robot_token') === this.props.robot.token
: true) : true)
} }
color='secondary' color='secondary'
@ -411,11 +420,11 @@ class UserGenPage extends Component {
</ButtonGroup> </ButtonGroup>
</Grid> </Grid>
<Grid item xs={12} align='center' sx={{ width: 370 * fontSizeFactor }}> <Grid item xs={12} align='center' sx={{ width: '26.43em' }}>
<Grid item> <Grid item>
<div style={{ height: 30 * fontSizeFactor }} /> <div style={{ height: '2.143em' }} />
</Grid> </Grid>
<div style={{ width: 370 * fontSizeFactor, left: 30 * fontSizeFactor }}> <div style={{ width: '26.43em', left: '2.143em' }}>
<Grid container align='center'> <Grid container align='center'>
<Grid item xs={0.8} /> <Grid item xs={0.8} />
<Grid item xs={7.5} align='right'> <Grid item xs={7.5} align='right'>
@ -424,10 +433,7 @@ class UserGenPage extends Component {
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={2.5} align='left'> <Grid item xs={2.5} align='left'>
<RoboSatsNoTextIcon <RoboSatsNoTextIcon color='primary' sx={{ height: '5.143em', width: '5.143em' }} />
color='primary'
sx={{ height: 72 * fontSizeFactor, width: 72 * fontSizeFactor }}
/>
</Grid> </Grid>
</Grid> </Grid>
</div> </div>

View File

@ -17,16 +17,16 @@ export interface Info {
taker_fee: number; taker_fee: number;
bond_size: number; bond_size: number;
current_swap_fee_rate: number; current_swap_fee_rate: number;
// Other keys that do not belong here. TODO on NavBar PR.
coordinatorVersion: string; coordinatorVersion: string;
clientVersion: string; clientVersion: string;
openUpdateClient: boolean;
// Other keys that do not belong here. TODO on NavBar PR.
profileShown: boolean; profileShown: boolean;
openStatsForNerds: boolean; openStatsForNerds: boolean;
openCommuniy: boolean; openCommunity: boolean;
openExchangeSummary: boolean; openExchangeSummary: boolean;
openClaimRewards: boolean; openClaimRewards: boolean;
openUpdateClient: boolean;
openProfile: boolean; openProfile: boolean;
showRewards: boolean; showRewards: boolean;
rewardInvoice: string | null; rewardInvoice: string | null;
@ -54,16 +54,16 @@ export const defaultInfo: Info = {
taker_fee: 0, taker_fee: 0,
bond_size: 0, bond_size: 0,
current_swap_fee_rate: 0, current_swap_fee_rate: 0,
// Other keys that do not belong here. TODO on NavBar PR.
coordinatorVersion: 'v?.?.?', coordinatorVersion: 'v?.?.?',
clientVersion: 'v?.?.?', clientVersion: 'v?.?.?',
openUpdateClient: false,
// Other keys that do not belong here. TODO on NavBar PR.
profileShown: false, profileShown: false,
openStatsForNerds: false, openStatsForNerds: false,
openCommuniy: false, openCommunity: false,
openExchangeSummary: false, openExchangeSummary: false,
openClaimRewards: false, openClaimRewards: false,
openUpdateClient: false,
openProfile: false, openProfile: false,
showRewards: false, showRewards: false,
rewardInvoice: null, rewardInvoice: null,

View File

@ -8,7 +8,11 @@ export interface Robot {
lastOrderId: number | null; lastOrderId: number | null;
earnedRewards: number; earnedRewards: number;
referralCode: string; referralCode: string;
tgEnabled: boolean;
tgBotName: string;
tgToken: string;
loading: boolean; loading: boolean;
avatarLoaded: boolean;
copiedToken: boolean; copiedToken: boolean;
} }
@ -22,7 +26,11 @@ export const defaultRobot: Robot = {
lastOrderId: null, lastOrderId: null,
earnedRewards: 0, earnedRewards: 0,
referralCode: '', referralCode: '',
tgEnabled: false,
tgBotName: 'unknown',
tgToken: 'unknown',
loading: true, loading: true,
avatarLoaded: false,
copiedToken: false, copiedToken: false,
}; };

View File

@ -11,8 +11,8 @@ export const checkVer: (
return { updateAvailable: null }; return { updateAvailable: null };
} }
const semver = packageJson.version.split('.'); const semver = packageJson.version.split('.');
const updateAvailable = major > Number(semver[0]) || minor > Number(semver[1]); const updateAvailable: boolean = major > Number(semver[0]) || minor > Number(semver[1]);
const patchAvailable = !updateAvailable && patch > Number(semver[2]); const patchAvailable: boolean = !updateAvailable && patch > Number(semver[2]);
return { return {
updateAvailable, updateAvailable,

View File

@ -79,11 +79,6 @@ input[type='number'] {
-moz-appearance: textfield; -moz-appearance: textfield;
} }
.bottomBar {
position: fixed;
bottom: 0;
}
.amboss { .amboss {
fill: url(#SVGID_1_); fill: url(#SVGID_1_);
} }