import React, { Component } from 'react' import {Chip, 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 } 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 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'; // 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; } export default 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', referral_link: 'Loading...', 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.props.setAppState({nickname:data.nickname, loading:false})); } handleClickOpenStatsForNerds = () => { this.setState({openStatsForNerds: true}); }; handleClickCloseStatsForNerds = () => { this.setState({openStatsForNerds: false}); }; StatsDialog =() =>{ return( Stats For Nerds {this.state.network == 'testnet'? {this.state.node_id.slice(0, 12)+"... (1ML)"} : {this.state.node_id.slice(0, 12)+"... (1ML)"} } {this.state.alternative_site.slice(0, 12)+"...onion"} {this.state.robosats_running_commit_hash.slice(0, 12)+"..."} ) } handleClickOpenCommunity = () => { this.setState({openCommuniy: true}); }; handleClickCloseCommunity = () => { this.setState({openCommuniy: false}); }; CommunityDialog =() =>{ return( Community

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, })); } dialogProfile =() =>{ return( Your Profile {this.props.nickname ? "⚡"+this.props.nickname+"⚡" : ""} {this.state.active_order_id ? // TODO Link to router and do this.props.history.push : } {this.props.token ? navigator.clipboard.writeText(this.props.token)}> , }} /> : 'Cannot remember'} navigator.clipboard.writeText(this.state.referral_link)}> , }} /> {!this.state.openClaimRewards ? {this.state.earned_rewards+" Sats"} :
{ this.setState({ rewardInvoice: e.target.value }); }} />
}
{this.state.showRewardsSpinner?
:""} {this.state.withdrawn?
There it goes, thank you!🥇
:""}
) } bottomBarDesktop =()=>{ return(
0 ? true: false} title="You can claim satoshis!"> 0 & !this.state.profileShown & this.props.avatarLoaded) ? true: false} title="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}>
) } handleClickOpenExchangeSummary = () => { this.getInfo(); this.setState({openExchangeSummary: true}); }; handleClickCloseExchangeSummary = () => { this.setState({openExchangeSummary: false}); }; exchangeSummaryDialog =() =>{ return( Exchange Summary {(this.state.maker_fee*100).toFixed(3)}% {(this.state.taker_fee*100).toFixed(3)}% ) } bottomBarPhone =()=>{ return(
0 ? true: false} title="You can claim satoshis!"> 0 & !this.state.profileShown & this.props.avatarLoaded) ? true: false} title="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 (
) } }