import React, { Component } from 'react' import { withTranslation, Trans} 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' import Flags from 'country-flag-icons/react/3x2' // 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 SendIcon from '@mui/icons-material/Send'; 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'; // pretty numbers function pn(x) { if(x == null){ return 'null' }else{ var parts = x.toString().split("."); parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ","); return parts.join("."); } } function getCookie(name) { let cookieValue = null; if (document.cookie && document.cookie !== '') { const cookies = document.cookie.split(';'); for (let i = 0; i < cookies.length; i++) { const cookie = cookies[i].trim(); // Does this cookie string begin with the name we want? if (cookie.substring(0, name.length + 1) === (name + '=')) { cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); break; } } } return cookieValue; } 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, }; 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( {t("Stats For Nerds")} {this.state.network == 'testnet'? {this.state.node_id.slice(0, 12)+"... (1ML)"} : {this.state.node_id.slice(0, 12)+"... (AMBOSS)"} } {this.state.alternative_site.slice(0, 12)+"...onion"} {this.state.robosats_running_commit_hash.slice(0, 12)+"..."} {t("Made with")+" "} {" "+t("and")+" "} } secondary={t("... somewhere on Earth!")}/> ) } handleClickOpenCommunity = () => { this.setState({openCommuniy: true}); }; handleClickCloseCommunity = () => { this.setState({openCommuniy: false}); }; CommunityDialog =() =>{ const { t } = this.props; return( {t("Community")}

{t("Support is only offered via public channels. Join our Telegram community if you have questions or want to hang out with other cool robots. Please, use our Github Issues if you find a bug or want to see new features!")}

 ) } 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( {t("Your Profile")} {this.props.nickname ? : ""} {this.state.active_order_id ? : } {this.props.token ? navigator.clipboard.writeText(this.props.token)}> , }} /> : t("Cannot remember")} this.setState({showRewards: !this.state.showRewards})}/>} label={t("Rewards and compensations")} />
navigator.clipboard.writeText('http://'+this.getHost()+'/ref/'+this.state.referral_code)}> , }} /> {!this.state.openClaimRewards ? {this.state.earned_rewards+" Sats"} :
{ this.setState({ rewardInvoice: e.target.value }); }} />
} {this.state.showRewardsSpinner?
:""} {this.state.withdrawn?
{t("There it goes, thank you!🥇")}
:""}
) } bottomBarDesktop =()=>{ const { t } = this.props; return(
0 ? true: false} title={t("You can claim satoshis!")}> 0 & !this.state.profileShown & this.props.avatarLoaded) ? true: false} title={t("You have an active order")}> 0 & !this.state.profileShown) ? "": null} color="primary"> this.props.setAppState({avatarLoaded: true}), }} src={this.props.nickname ? window.location.origin +'/static/assets/avatars/' + this.props.nickname + '.png' : null} />
< IconButton onClick={this.handleClickOpenExchangeSummary}> ) } handleChangeLang=(e)=>{ const { i18n} = this.props; console.log(i18n) i18n.changeLanguage(e.target.value) } LangSelect = () => { const { i18n} = this.props; return( ) } handleClickOpenExchangeSummary = () => { this.getInfo(); this.setState({openExchangeSummary: true}); }; handleClickCloseExchangeSummary = () => { this.setState({openExchangeSummary: false}); }; exchangeSummaryDialog =() =>{ const { t } = this.props; return( {t("Exchange Summary")} {(this.state.maker_fee*100).toFixed(3)}% {(this.state.taker_fee*100).toFixed(3)}% ) } bottomBarPhone =()=>{ const { t } = this.props; return(
0 ? true: false} title={t("You can claim satoshis!")}> 0 & !this.state.profileShown & this.props.avatarLoaded) ? true: false} title={t("You have an active order")}> 0 & !this.state.profileShown) ? "": null} color="primary"> this.props.setAppState({avatarLoaded: true}), }} src={this.props.nickname ? window.location.origin +'/static/assets/avatars/' + this.props.nickname + '.png' : null} />
) } render() { return (
) } } export default withTranslation()(BottomBar);