robosats/frontend/src/components/BottomBar.js

import React, { Component } from 'react'
import { withTranslation } from "react-i18next";
import {FormControlLabel, Link, Switch, CircularProgress, Badge, Tooltip, TextField, ListItemAvatar, Button, Avatar,Paper, Grid, IconButton, Typography, Select, MenuItem, List, ListItemText, ListItem, ListItemIcon, ListItemButton, Divider, Dialog, DialogContent} from "@mui/material";
import MediaQuery from 'react-responsive'
import { Link as LinkRouter } from 'react-router-dom'

// Icons
import SettingsIcon from '@mui/icons-material/Settings';
import PeopleIcon from '@mui/icons-material/People';
import InventoryIcon from '@mui/icons-material/Inventory';
import SellIcon from '@mui/icons-material/Sell';
import SmartToyIcon from '@mui/icons-material/SmartToy';
import PercentIcon from '@mui/icons-material/Percent';
import PriceChangeIcon from '@mui/icons-material/PriceChange';
import BoltIcon from '@mui/icons-material/Bolt';
import GitHubIcon from '@mui/icons-material/GitHub';
import EqualizerIcon from '@mui/icons-material/Equalizer';

import PublicIcon from '@mui/icons-material/Public';
import NumbersIcon from '@mui/icons-material/Numbers';
import PasswordIcon from '@mui/icons-material/Password';
import ContentCopy from "@mui/icons-material/ContentCopy";
import DnsIcon from '@mui/icons-material/Dns';
import WebIcon from '@mui/icons-material/Web';
import BookIcon from '@mui/icons-material/Book';
import PersonAddAltIcon from '@mui/icons-material/PersonAddAlt';
import EmojiEventsIcon from '@mui/icons-material/EmojiEvents';
import AmbossIcon from "./icons/AmbossIcon";
import FavoriteIcon from '@mui/icons-material/Favorite';

import CommunityDialog from './CommunityDialog';

import { getCookie } from "../utils/cookies";
import { pn } from "../utils/prettyNumbers";

class BottomBar extends Component {
    constructor(props) {
        super(props);
        this.state = {
            openStatsForNerds: false,
            openCommuniy: false,
            openExchangeSummary:false,
            openClaimRewards: 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,
            referral_code: '',
            earned_rewards: 0,
            rewardInvoice: null,
            badInvoice: false,
            showRewardsSpinner: false,
            withdrawn: false,
        };
    }

    componentDidMount() {
        this.getInfo();
    }

    getInfo() {
        this.setState(null)
        fetch('/api/info/')
          .then((response) => response.json())
          .then((data) => this.setState(data) & this.setState({active_order_id: data.active_order_id ? data.active_order_id : null})
          & this.props.setAppState({nickname:data.nickname, loading:false}));
      }

    handleClickOpenStatsForNerds = () => {
        this.setState({openStatsForNerds: true});
    };

    handleClickCloseStatsForNerds = () => {
        this.setState({openStatsForNerds: false});
    };

    StatsDialog =() =>{
        const { t } = this.props;
    return(
        <Dialog
        open={this.state.openStatsForNerds}
        onClose={this.handleClickCloseStatsForNerds}
        aria-labelledby="stats-for-nerds-dialog-title"
        aria-describedby="stats-for-nerds-description"
        >
        <DialogContent>
            <Typography component="h5" variant="h5">{t("Stats For Nerds")}</Typography>
            <List dense>
                <Divider/>
                <ListItem>
                    <ListItemIcon><BoltIcon/></ListItemIcon>
                    <ListItemText primary={this.state.lnd_version} secondary={t("LND version")}/>
                </ListItem>

                <Divider/>
                {this.state.network == 'testnet'?
                <ListItem>
                    <ListItemIcon><DnsIcon/></ListItemIcon>
                    <ListItemText secondary={this.state.node_alias}>
                         <Link target="_blank" href={"https://1ml.com/testnet/node/"
                        + this.state.node_id}>{this.state.node_id.slice(0, 12)+"... (1ML)"}
                        </Link>
                    </ListItemText>
                </ListItem>
                :
                <ListItem>
                    <ListItemIcon><AmbossIcon/></ListItemIcon>
                    <ListItemText secondary={this.state.node_alias}>
                            <Link target="_blank" href={"https://amboss.space/node/"
                        + this.state.node_id}>{this.state.node_id.slice(0, 12)+"... (AMBOSS)"}
                        </Link>
                    </ListItemText>
                </ListItem>
                }

                <Divider/>
                <ListItem>
                    <ListItemIcon><WebIcon/></ListItemIcon>
                    <ListItemText secondary={this.state.alternative_name}>
                        <Link target="_blank" href={"http://"+this.state.alternative_site}>{this.state.alternative_site.slice(0, 12)+"...onion"}
                        </Link>
                    </ListItemText>
                </ListItem>

                <Divider/>
                <ListItem>
                    <ListItemIcon><GitHubIcon/></ListItemIcon>
                    <ListItemText secondary={t("Currently running commit hash")}>
                        <Link target="_blank" href={"https://github.com/Reckless-Satoshi/robosats/tree/"
                        + this.state.robosats_running_commit_hash}>{this.state.robosats_running_commit_hash.slice(0, 12)+"..."}
                        </Link>
                    </ListItemText>
                </ListItem>

                <Divider/>
                <ListItem>
                    <ListItemIcon><EqualizerIcon/></ListItemIcon>
                    <ListItemText primary={pn(this.state.last_day_volume)+" BTC"} secondary={t("24h contracted volume")}/>
                </ListItem>

                <Divider/>
                <ListItem>
                    <ListItemIcon><EqualizerIcon/></ListItemIcon>
                    <ListItemText primary={pn(this.state.lifetime_volume)+" BTC"} secondary={t("Lifetime contracted volume")}/>
                </ListItem>

                <Divider/>
                <ListItem>
                    <ListItemIcon><PublicIcon/></ListItemIcon>
                    <ListItemText primary={
                        <div style={{display:'flex', alignItems:'center', justifyContent:'left', flexWrap:'wrap'}}>
                            <span>{t("Made with")+" "}</span>
                            <FavoriteIcon sx={{ color: "#FF0000", height: '22px',width: '22px'}}/>
                            <span>{" "+t("and")+" "}</span>
                            <BoltIcon sx={{ color: "#fcba03", height: '23px',width: '23px'}}/>
                        </div>}
                        secondary={t("... somewhere on Earth!")}/>
                </ListItem>
            </List>

            </DialogContent>
        </Dialog>
    )
    }

    handleClickOpenCommunity = () => {
        this.setState({openCommuniy: true});
    };
    handleClickCloseCommunity = () => {
        this.setState({openCommuniy: false});
    };

    handleClickOpenProfile = () => {
        this.getInfo();
        this.setState({openProfile: true, profileShown: true});
    };
    handleClickCloseProfile = () => {
        this.setState({openProfile: false});
    };

    handleSubmitInvoiceClicked=()=>{
        this.setState({
            badInvoice:false,
            showRewardsSpinner: true,
        });

        const requestOptions = {
            method: 'POST',
            headers: {'Content-Type':'application/json', 'X-CSRFToken': getCookie('csrftoken'),},
            body: JSON.stringify({
              'invoice': this.state.rewardInvoice,
            }),
        };
        fetch('/api/reward/', requestOptions)
        .then((response) => response.json())
        .then((data) => console.log(data) & this.setState({
            badInvoice:data.bad_invoice,
            openClaimRewards: data.successful_withdrawal ? false : true,
            earned_rewards: data.successful_withdrawal ? 0 : this.state.earned_rewards,
            withdrawn: data.successful_withdrawal ? true : false,
            showRewardsSpinner: false,
        }));
    }

    getHost(){
        var url = (window.location != window.parent.location) ? this.getHost(document.referrer) : document.location.href;
        return url.split('/')[2]
      }

    dialogProfile =() =>{
        const { t } = this.props;
        return(
        <Dialog
        open={this.state.openProfile}
        onClose={this.handleClickCloseProfile}
        aria-labelledby="profile-title"
        aria-describedby="profile-description"
        >
            <DialogContent>
            <Typography component="h5" variant="h5">{t("Your Profile")}</Typography>
            <List>
                <Divider/>
                <ListItem className="profileNickname">
                    <ListItemText secondary={t("Your robot")}>
                    <Typography component="h6" variant="h6">
                    {this.props.nickname ?
                    <div style={{position:'relative',left:'-7px'}}>
                    <div style={{display:'flex', alignItems:'center', justifyContent:'left', flexWrap:'wrap', width:300}}>
                        <BoltIcon sx={{ color: "#fcba03", height: '28px',width: '24px'}}/><a>{this.props.nickname}</a><BoltIcon sx={{ color: "#fcba03", height: '28px',width: '24px'}}/>
                    </div>
                    </div>
                    : ""}
                    </Typography>
                    </ListItemText>
                    <ListItemAvatar>
                    <Avatar className='profileAvatar'
                        sx={{ width: 65, height:65 }}
                        alt={this.props.nickname}
                        src={this.props.nickname ? window.location.origin +'/static/assets/avatars/' + this.props.nickname + '.png' : null}
                        />
                    </ListItemAvatar>
                </ListItem>

                <Divider/>
                {this.state.active_order_id ?
                <ListItemButton onClick={this.handleClickCloseProfile} to={'/order/'+this.state.active_order_id} component={LinkRouter}>
                    <ListItemIcon>
                        <Badge badgeContent="" color="primary">
                            <NumbersIcon color="primary"/>
                        </Badge>
                    </ListItemIcon>
                    <ListItemText primary={t("One active order #{{orderID}}",{orderID: this.state.active_order_id})} secondary={t("Your current order")}/>
                </ListItemButton>
                :
                <ListItem>
                    <ListItemIcon><NumbersIcon/></ListItemIcon>
                    <ListItemText primary={t("No active orders")} secondary={t("Your current order")}/>
                </ListItem>
                }

                <ListItem>
                    <ListItemIcon>
                        <PasswordIcon/>
                    </ListItemIcon>
                    <ListItemText secondary={t("Your token (will not remain here)")}>
                    {getCookie("robot_token") ?
                    <TextField
                        disabled
                        sx={{width:"100%", maxWidth:"450px"}}
                        label={t("Back it up!")}
                        value={getCookie("robot_token") }
                        variant='filled'
                        size='small'
                        InputProps={{
                            endAdornment:
                            <Tooltip disableHoverListener enterTouchDelay={0} title={t("Copied!")}>
                                <IconButton onClick= {()=> (navigator.clipboard.writeText(getCookie("robot_token")) & this.props.setAppState({copiedToken:true}))}>
                                    <ContentCopy color={this.props.copiedToken ? "inherit" : "primary"}/>
                                </IconButton>
                            </Tooltip>,
                            }}
                        />
                    :
                    t("Cannot remember")}
                </ListItemText>
                </ListItem>

                <Divider/>

                <Grid spacing={1} align="center" container>
                    <FormControlLabel labelPlacement="start"control={
                        <Switch
                        checked={this.state.showRewards}
                        onChange={()=> this.setState({showRewards: !this.state.showRewards})}/>}
                        label={t("Rewards and compensations")}
                        />
                </Grid>

                <div style={{ display: this.state.showRewards ? '':'none'}}>
                    <ListItem>
                        <ListItemIcon>
                            <PersonAddAltIcon/>
                        </ListItemIcon>
                        <ListItemText secondary={t("Share to earn 100 Sats per trade")}>
                        <TextField
                            label={t("Your referral link")}
                            value={this.getHost()+'/ref/'+this.state.referral_code}
                            size='small'
                            InputProps={{
                                endAdornment:
                                <Tooltip disableHoverListener enterTouchDelay={0} title={t("Copied!")}>
                                    <IconButton onClick= {()=>navigator.clipboard.writeText('http://'+this.getHost()+'/ref/'+this.state.referral_code)}>
                                        <ContentCopy />
                                    </IconButton>
                                </Tooltip>,
                                }}
                            />
                    </ListItemText>
                    </ListItem>

                    <ListItem>
                        <ListItemIcon>
                            <EmojiEventsIcon/>
                        </ListItemIcon>
                        {!this.state.openClaimRewards ?
                        <ListItemText secondary={t("Your earned rewards")}>
                            <Grid container>
                                <Grid item xs={9}>
                                    <Typography>{this.state.earned_rewards+" Sats"}</Typography>
                                </Grid>
                                <Grid item xs={3}>
                                    <Button disabled={this.state.earned_rewards==0? true : false} onClick={() => this.setState({openClaimRewards:true})} variant="contained" size="small">{t("Claim")}</Button>
                                </Grid>
                            </Grid>
                        </ListItemText>
                        :
                        <form style={{maxWidth: 270}}>
                            <Grid alignItems="stretch" style={{ display: "flex"}} align="center">
                                <Grid item alignItems="stretch" style={{ display: "flex" }} align="center">
                                <TextField
                                    error={this.state.badInvoice}
                                    helperText={this.state.badInvoice ? this.state.badInvoice : "" }
                                    label={t("Invoice for {{amountSats}} Sats", {amountSats: this.state.earned_rewards})}
                                    size="small"
                                    value={this.state.rewardInvoice}
                                    onChange={e => {
                                    this.setState({ rewardInvoice: e.target.value });
                                    }}
                                />
                                </Grid>
                                <Grid item alignItems="stretch" style={{ display: "flex" }}>
                                    <Button sx={{maxHeight:38}} onClick={this.handleSubmitInvoiceClicked} variant="contained" color="primary" size="small">{t("Submit")}</Button>
                                </Grid>
                            </Grid>
                        </form>
                        }
                    </ListItem>

                    {this.state.showRewardsSpinner?
                    <div style={{display: 'flex', justifyContent: 'center'}}>
                        <CircularProgress/>
                    </div>
                    :""}

                    {this.state.withdrawn?
                    <div style={{display: 'flex', justifyContent: 'center'}}>
                        <Typography color="primary" variant="body2"><b>{t("There it goes, thank you!🥇")}</b></Typography>
                    </div>
                    :""}

                </div>
            </List>
            </DialogContent>

        </Dialog>
    )
    }

bottomBarDesktop =()=>{
    const { t } = this.props;
    var hasRewards = this.state.earned_rewards > 0 ? true: false;
    var hasOrder = this.state.active_order_id > 0 & !this.state.profileShown & this.props.avatarLoaded ? true : false;

    return(
        <Paper elevation={6} style={{height:40}}>
                {this.StatsDialog()}
                {this.dialogProfile()}
                {this.exchangeSummaryDialog()}
                <Grid container>

                    <Grid item xs={1.9}>
                        <div style={{display: this.props.avatarLoaded ? '':'none'}}>
                        <ListItemButton onClick={this.handleClickOpenProfile} >
                            <Tooltip 
                                open={hasRewards || hasOrder} 
                                title={(hasRewards ? t("You can claim satoshis!")+" ": "" )+
                                    (hasOrder ? t("You have an active order"):"")}>
                                <ListItemAvatar sx={{ width: 30, height: 30 }} >
                                    <Badge badgeContent={(this.state.active_order_id > 0 & !this.state.profileShown) ? "": null} color="primary">
                                    <Avatar className='flippedSmallAvatar' sx={{margin: 0, top: -13}}
                                    alt={this.props.nickname}
                                    imgProps={{
                                        onLoad:() => this.props.setAppState({avatarLoaded: true}),
                                    }}
                                    src={this.props.nickname ? window.location.origin +'/static/assets/avatars/' + this.props.nickname + '.png' : null}
                                    />
                                    </Badge>
                                </ListItemAvatar>
                            </Tooltip>
                            <ListItemText primary={this.props.nickname}/>
                        </ListItemButton>
                        </div>
                    </Grid>

                    <Grid item xs={1.9}>
                        <ListItem className="bottomItem">
                            <ListItemIcon size="small">
                                <IconButton onClick={this.handleClickOpenExchangeSummary}><InventoryIcon/></IconButton>
                            </ListItemIcon>
                            <ListItemText
                                primaryTypographyProps={{fontSize: '14px'}}
                                secondaryTypographyProps={{fontSize: '12px'}}
                                primary={this.state.num_public_buy_orders}
                                secondary={t("Public Buy Orders")} />
                        </ListItem>
                    </Grid>

                    <Grid item xs={1.9}>
                        <ListItem className="bottomItem">
                            <ListItemIcon size="small">
                            <IconButton onClick={this.handleClickOpenExchangeSummary}><SellIcon/></IconButton>
                            </ListItemIcon>
                            <ListItemText
                                primaryTypographyProps={{fontSize: '14px'}}
                                secondaryTypographyProps={{fontSize: '12px'}}
                                primary={this.state.num_public_sell_orders}
                                secondary={t("Public Sell Orders")} />
                        </ListItem>
                    </Grid>

                    <Grid item xs={1.9}>
                        <ListItem className="bottomItem">
                            <ListItemIcon size="small">
                            <IconButton onClick={this.handleClickOpenExchangeSummary}><SmartToyIcon/></IconButton>
                            </ListItemIcon>
                            <ListItemText
                                primaryTypographyProps={{fontSize: '14px'}}
                                secondaryTypographyProps={{fontSize: '12px'}}
                                primary={this.state.active_robots_today}
                                secondary={t("Today Active Robots")}/>
                        </ListItem>
                    </Grid>

                    <Grid item xs={1.9}>
                        <ListItem className="bottomItem">
                            <ListItemIcon size="small">
                                <IconButton onClick={this.handleClickOpenExchangeSummary}><PriceChangeIcon/></IconButton>
                            </ListItemIcon>
                            <ListItemText
                                primaryTypographyProps={{fontSize: '14px'}}
                                secondaryTypographyProps={{fontSize: '12px'}}
                                primary={this.state.last_day_nonkyc_btc_premium+"%"}
                                secondary={t("24h Avg Premium")} />
                        </ListItem>
                    </Grid>

                    <Grid item xs={1.5}>
                        <ListItem className="bottomItem">
                            <ListItemIcon size="small">
                            <   IconButton onClick={this.handleClickOpenExchangeSummary}><PercentIcon/></IconButton>
                            </ListItemIcon>
                            <ListItemText
                                primaryTypographyProps={{fontSize: '14px'}}
                                secondaryTypographyProps={{fontSize: '12px'}}
                                primary={(this.state.maker_fee + this.state.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} >
                                    <SettingsIcon />
                                </IconButton>
                            </Tooltip>
                        </Grid>

                    </Grid>
                </Grid>
            </Paper>
    )
}
    handleChangeLang=(e)=>{
        const { i18n } = this.props;
        i18n.changeLanguage(e.target.value)
    }

    LangSelect = () => {
        const { i18n} = this.props;
        return(
            <Select
                size = 'small'
                value = {i18n.resolvedLanguage.substring(0,2)}
                inputProps={{
                    style: {textAlign:"center"}
                }}
                onChange={this.handleChangeLang}>
                    <MenuItem value={'en'}>EN</MenuItem>
                    <MenuItem value={'es'}>ES</MenuItem>
                    <MenuItem value={'de'}>DE</MenuItem>
                    <MenuItem value={'pl'}>PL</MenuItem>
                    <MenuItem value={'fr'}>FR</MenuItem>
                    <MenuItem disabled={true} value={'ru'}>RU</MenuItem>
                    <MenuItem disabled={true} value={'zh'}>ZH</MenuItem>
                </Select>
        )
    }

    handleClickOpenExchangeSummary = () => {
        this.getInfo();
        this.setState({openExchangeSummary: true});
    };
    handleClickCloseExchangeSummary = () => {
        this.setState({openExchangeSummary: false});
    };

    exchangeSummaryDialog =() =>{
        const { t } = this.props;
        return(
        <Dialog
        open={this.state.openExchangeSummary}
        onClose={this.handleClickCloseExchangeSummary}
        aria-labelledby="exchange-summary-title"
        aria-describedby="exchange-summary-description"
        >
        <DialogContent>
            <Typography component="h5" variant="h5">{t("Exchange Summary")}</Typography>
            <List dense>
                <ListItem >
                    <ListItemIcon size="small">
                        <InventoryIcon/>
                    </ListItemIcon>
                    <ListItemText
                        primaryTypographyProps={{fontSize: '14px'}}
                        secondaryTypographyProps={{fontSize: '12px'}}
                        primary={this.state.num_public_buy_orders}
                        secondary={t("Public buy orders")} />
                </ListItem>
                <Divider/>

                <ListItem >
                    <ListItemIcon size="small">
                        <SellIcon/>
                    </ListItemIcon>
                    <ListItemText
                        primaryTypographyProps={{fontSize: '14px'}}
                        secondaryTypographyProps={{fontSize: '12px'}}
                        primary={this.state.num_public_sell_orders}
                        secondary={t("Public sell orders")} />
                </ListItem>
                <Divider/>

                <ListItem >
                    <ListItemIcon size="small">
                        <BookIcon/>
                    </ListItemIcon>
                    <ListItemText
                        primaryTypographyProps={{fontSize: '14px'}}
                        secondaryTypographyProps={{fontSize: '12px'}}
                        primary={pn(this.state.book_liquidity)+" Sats"}
                        secondary={t("Book liquidity")}/>
                </ListItem>
                <Divider/>

                <ListItem >
                    <ListItemIcon size="small">
                        <SmartToyIcon/>
                    </ListItemIcon>
                    <ListItemText
                        primaryTypographyProps={{fontSize: '14px'}}
                        secondaryTypographyProps={{fontSize: '12px'}}
                        primary={this.state.active_robots_today}
                        secondary={t("Today active robots")} />
                </ListItem>
                <Divider/>

                <ListItem >
                    <ListItemIcon size="small">
                        <PriceChangeIcon/>
                    </ListItemIcon>
                    <ListItemText
                        primaryTypographyProps={{fontSize: '14px'}}
                        secondaryTypographyProps={{fontSize: '12px'}}
                        primary={this.state.last_day_nonkyc_btc_premium+"%"}
                        secondary={t("24h non-KYC bitcoin premium")} />
                </ListItem>
                <Divider/>

                <ListItem >
                    <ListItemIcon size="small">
                        <PercentIcon/>
                    </ListItemIcon>
                    <Grid container >
                        <Grid item xs={6}>
                            <ListItemText
                                primaryTypographyProps={{fontSize: '14px'}}
                                secondaryTypographyProps={{fontSize: '12px'}}
                                secondary={t("Maker fee")}>
                                {(this.state.maker_fee*100).toFixed(3)}%
                            </ListItemText>
                        </Grid>
                        <Grid item xs={6}>
                            <ListItemText
                                primaryTypographyProps={{fontSize: '14px'}}
                                secondaryTypographyProps={{fontSize: '12px'}}
                                secondary={t("Taker fee")}>
                                {(this.state.taker_fee*100).toFixed(3)}%
                            </ListItemText>
                        </Grid>
                    </Grid>
                </ListItem>
                </List>

            </DialogContent>
        </Dialog>
    )
    }

bottomBarPhone =()=>{
    const { t } = this.props;
    var hasRewards = this.state.earned_rewards > 0 ? true: false;
    var hasOrder = this.state.active_order_id > 0 & !this.state.profileShown & this.props.avatarLoaded ? true : false;
    return(
        <Paper elevation={6} style={{height:40}}>
                {this.StatsDialog()}
                {this.exchangeSummaryDialog()}
                {this.dialogProfile()}
                <Grid container>

                    <Grid item xs={1.6}>
                    <div style={{display: this.props.avatarLoaded ? '':'none'}}>
                    <Tooltip open={hasRewards || hasOrder} 
                            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}} >
                            <Badge badgeContent={(this.state.active_order_id >0 & !this.state.profileShown) ? "": null} color="primary">
                                <Avatar className='phoneFlippedSmallAvatar'
                                sx={{ width: 55, height:55 }}
                                alt={this.props.nickname}
                                imgProps={{
                                    onLoad:() => this.props.setAppState({avatarLoaded: true}),
                                }}
                                src={this.props.nickname ? window.location.origin +'/static/assets/avatars/' + this.props.nickname + '.png' : null}
                                />
                            </Badge>
                        </IconButton>
                    </Tooltip>
                    </div>
                    </Grid>

                    <Grid item xs={1.6} align="center">
                        <Tooltip enterTouchDelay={300} title={t("Number of public BUY orders")}>
                            <IconButton onClick={this.handleClickOpenExchangeSummary} >
                            <Badge badgeContent={this.state.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 onClick={this.handleClickOpenExchangeSummary} >
                            <Badge badgeContent={this.state.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 onClick={this.handleClickOpenExchangeSummary} >
                            <Badge badgeContent={this.state.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 onClick={this.handleClickOpenExchangeSummary} >
                            <Badge badgeContent={this.state.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.handleClickOpenStatsForNerds} >
                                <SettingsIcon />
                            </IconButton>
                        </Tooltip>
                        </Grid>

                    </Grid>
                </Grid>
            </Paper>
    )
}

    render() {
        return (
            <div>
                <CommunityDialog
                    isOpen={this.state.openCommuniy}
                    handleClickCloseCommunity={this.handleClickCloseCommunity}
                />
                <MediaQuery minWidth={1200}>
                    {this.bottomBarDesktop()}
                </MediaQuery>

                <MediaQuery maxWidth={1199}>
                    {this.bottomBarPhone()}
                </MediaQuery>
            </div>
        )
    }
}

export default withTranslation()(BottomBar);