2022-01-14 16:21:42 +00:00
import React , { Component } from 'react'
2022-04-05 14:25:53 +00:00
import { withTranslation , Trans } from "react-i18next" ;
2022-03-24 13:41:32 +00:00
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" ;
2022-01-28 14:30:45 +00:00
import MediaQuery from 'react-responsive'
2022-03-24 13:41:32 +00:00
import { Link as LinkRouter } from 'react-router-dom'
2022-04-05 14:25:53 +00:00
import Flags from 'country-flag-icons/react/3x2'
2022-01-14 16:21:42 +00:00
// Icons
import SettingsIcon from '@mui/icons-material/Settings' ;
2022-01-15 10:21:36 +00:00
import PeopleIcon from '@mui/icons-material/People' ;
2022-01-14 16:21:42 +00:00
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' ;
2022-01-14 17:35:27 +00:00
import PriceChangeIcon from '@mui/icons-material/PriceChange' ;
2022-01-15 00:28:19 +00:00
import BoltIcon from '@mui/icons-material/Bolt' ;
import GitHubIcon from '@mui/icons-material/GitHub' ;
import EqualizerIcon from '@mui/icons-material/Equalizer' ;
2022-01-15 10:21:36 +00:00
import SendIcon from '@mui/icons-material/Send' ;
2022-01-15 15:45:44 +00:00
import PublicIcon from '@mui/icons-material/Public' ;
2022-01-29 19:51:26 +00:00
import NumbersIcon from '@mui/icons-material/Numbers' ;
2022-01-29 20:17:30 +00:00
import PasswordIcon from '@mui/icons-material/Password' ;
2022-01-30 15:18:03 +00:00
import ContentCopy from "@mui/icons-material/ContentCopy" ;
2022-02-12 13:59:59 +00:00
import DnsIcon from '@mui/icons-material/Dns' ;
import WebIcon from '@mui/icons-material/Web' ;
2022-03-05 11:05:41 +00:00
import BookIcon from '@mui/icons-material/Book' ;
2022-03-05 11:48:11 +00:00
import PersonAddAltIcon from '@mui/icons-material/PersonAddAlt' ;
2022-03-05 17:32:27 +00:00
import EmojiEventsIcon from '@mui/icons-material/EmojiEvents' ;
2022-03-27 15:23:00 +00:00
import AmbossIcon from "./icons/AmbossIcon" ;
import FavoriteIcon from '@mui/icons-material/Favorite' ;
2022-01-14 16:21:42 +00:00
2022-04-15 16:22:49 +00:00
import { getCookie } from "../utils/cookies" ;
2022-04-20 19:32:41 +00:00
import { pn } from "../utils/prettyNumbers" ;
2022-01-26 18:45:24 +00:00
2022-04-05 14:25:53 +00:00
class BottomBar extends Component {
2022-01-14 16:21:42 +00:00
constructor ( props ) {
super ( props ) ;
this . state = {
2022-01-15 00:28:19 +00:00
openStatsForNerds : false ,
2022-01-15 10:21:36 +00:00
openCommuniy : false ,
2022-01-28 14:30:45 +00:00
openExchangeSummary : false ,
2022-03-06 11:45:06 +00:00
openClaimRewards : false ,
2022-01-18 17:52:48 +00:00
num _public _buy _orders : 0 ,
num _public _sell _orders : 0 ,
2022-03-05 11:05:41 +00:00
book _liquidity : 0 ,
2022-01-18 17:52:48 +00:00
active _robots _today : 0 ,
2022-03-03 12:47:55 +00:00
maker _fee : 0 ,
taker _fee : 0 ,
2022-03-13 12:00:21 +00:00
last _day _nonkyc _btc _premium : 0 ,
last _day _volume : 0 ,
2022-02-19 17:18:47 +00:00
lifetime _volume : 0 ,
2022-01-27 22:51:57 +00:00
robosats _running _commit _hash : '000000000000000' ,
2022-01-29 19:51:26 +00:00
openProfile : false ,
profileShown : false ,
2022-02-12 13:59:59 +00:00
alternative _site : 'robosats...' ,
node _id : '00000000' ,
2022-03-15 18:20:57 +00:00
showRewards : false ,
2022-03-19 16:33:01 +00:00
referral _code : '' ,
2022-03-05 17:32:27 +00:00
earned _rewards : 0 ,
2022-03-06 11:45:06 +00:00
rewardInvoice : null ,
2022-03-06 16:08:28 +00:00
badInvoice : false ,
showRewardsSpinner : false ,
withdrawn : false ,
2022-01-14 16:21:42 +00:00
} ;
this . getInfo ( ) ;
}
2022-01-29 19:51:26 +00:00
2022-01-14 16:21:42 +00:00
getInfo ( ) {
this . setState ( null )
fetch ( '/api/info/' )
. then ( ( response ) => response . json ( ) )
2022-03-24 13:41:32 +00:00
. 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 } ) ) ;
2022-01-14 16:21:42 +00:00
}
2022-01-15 00:28:19 +00:00
handleClickOpenStatsForNerds = ( ) => {
2022-01-15 10:21:36 +00:00
this . setState ( { openStatsForNerds : true } ) ;
2022-01-15 00:28:19 +00:00
} ;
2022-01-27 22:51:57 +00:00
2022-01-15 00:28:19 +00:00
handleClickCloseStatsForNerds = ( ) => {
2022-01-15 10:21:36 +00:00
this . setState ( { openStatsForNerds : false } ) ;
2022-01-15 00:28:19 +00:00
} ;
StatsDialog = ( ) => {
2022-04-05 14:25:53 +00:00
const { t } = this . props ;
2022-01-15 00:28:19 +00:00
return (
< Dialog
open = { this . state . openStatsForNerds }
onClose = { this . handleClickCloseStatsForNerds }
aria - labelledby = "stats-for-nerds-dialog-title"
aria - describedby = "stats-for-nerds-description"
>
< DialogContent >
2022-04-05 14:25:53 +00:00
< Typography component = "h5" variant = "h5" > { t ( "Stats For Nerds" ) } < / T y p o g r a p h y >
2022-01-26 18:45:24 +00:00
< List dense >
2022-01-15 00:28:19 +00:00
< Divider / >
< ListItem >
< ListItemIcon > < BoltIcon / > < / L i s t I t e m I c o n >
2022-04-05 14:25:53 +00:00
< ListItemText primary = { this . state . lnd _version } secondary = { t ( "LND version" ) } / >
2022-01-15 00:28:19 +00:00
< / L i s t I t e m >
2022-01-15 15:45:44 +00:00
2022-02-12 13:59:59 +00:00
< Divider / >
2022-04-15 16:22:49 +00:00
{ this . state . network == 'testnet' ?
2022-02-12 13:59:59 +00:00
< ListItem >
< ListItemIcon > < DnsIcon / > < / L i s t I t e m I c o n >
< ListItemText secondary = { this . state . node _alias } >
2022-04-15 16:22:49 +00:00
< Link target = "_blank" href = { "https://1ml.com/testnet/node/"
2022-02-12 13:59:59 +00:00
+ this . state . node _id } > { this . state . node _id . slice ( 0 , 12 ) + "... (1ML)" }
2022-03-24 13:41:32 +00:00
< / L i n k >
2022-02-12 13:59:59 +00:00
< / L i s t I t e m T e x t >
2022-03-14 17:57:06 +00:00
< / L i s t I t e m >
:
< ListItem >
2022-03-16 15:55:48 +00:00
< ListItemIcon > < AmbossIcon / > < / L i s t I t e m I c o n >
2022-02-12 13:59:59 +00:00
< ListItemText secondary = { this . state . node _alias } >
2022-04-15 16:22:49 +00:00
< Link target = "_blank" href = { "https://amboss.space/node/"
2022-03-14 17:57:06 +00:00
+ this . state . node _id } > { this . state . node _id . slice ( 0 , 12 ) + "... (AMBOSS)" }
2022-03-24 13:41:32 +00:00
< / L i n k >
2022-02-12 13:59:59 +00:00
< / L i s t I t e m T e x t >
< / L i s t I t e m >
2022-03-14 17:57:06 +00:00
}
2022-02-12 13:59:59 +00:00
< Divider / >
< ListItem >
< ListItemIcon > < WebIcon / > < / L i s t I t e m I c o n >
< ListItemText secondary = { this . state . alternative _name } >
2022-03-24 13:41:32 +00:00
< Link target = "_blank" href = { "http://" + this . state . alternative _site } > { this . state . alternative _site . slice ( 0 , 12 ) + "...onion" }
< / L i n k >
2022-02-12 13:59:59 +00:00
< / L i s t I t e m T e x t >
< / L i s t I t e m >
2022-01-15 00:28:19 +00:00
< Divider / >
< ListItem >
< ListItemIcon > < GitHubIcon / > < / L i s t I t e m I c o n >
2022-04-05 14:25:53 +00:00
< ListItemText secondary = { t ( "Currently running commit hash" ) } >
2022-04-15 16:22:49 +00:00
< Link target = "_blank" href = { "https://github.com/Reckless-Satoshi/robosats/tree/"
2022-01-27 22:51:57 +00:00
+ this . state . robosats _running _commit _hash } > { this . state . robosats _running _commit _hash . slice ( 0 , 12 ) + "..." }
2022-03-24 13:41:32 +00:00
< / L i n k >
2022-01-15 00:28:19 +00:00
< / L i s t I t e m T e x t >
< / L i s t I t e m >
2022-01-15 15:45:44 +00:00
2022-01-15 00:28:19 +00:00
< Divider / >
< ListItem >
< ListItemIcon > < EqualizerIcon / > < / L i s t I t e m I c o n >
2022-05-01 18:09:17 +00:00
< ListItemText primary = { pn ( this . state . last _day _volume ) + " BTC" } secondary = { t ( "24h contracted volume" ) } / >
2022-01-15 00:28:19 +00:00
< / L i s t I t e m >
2022-01-15 15:45:44 +00:00
2022-01-26 18:45:24 +00:00
< Divider / >
< ListItem >
< ListItemIcon > < EqualizerIcon / > < / L i s t I t e m I c o n >
2022-04-05 14:25:53 +00:00
< ListItemText primary = { pn ( this . state . lifetime _volume ) + " BTC" } secondary = { t ( "Lifetime contracted volume" ) } / >
2022-01-26 18:45:24 +00:00
< / L i s t I t e m >
2022-01-15 15:45:44 +00:00
< Divider / >
< ListItem >
< ListItemIcon > < PublicIcon / > < / L i s t I t e m I c o n >
2022-03-27 15:23:00 +00:00
< ListItemText primary = {
< div style = { { display : 'flex' , alignItems : 'center' , justifyContent : 'left' , flexWrap : 'wrap' } } >
2022-04-05 14:25:53 +00:00
< span > { t ( "Made with" ) + " " } < / s p a n >
2022-03-27 15:23:00 +00:00
< FavoriteIcon sx = { { color : "#FF0000" , height : '22px' , width : '22px' } } / >
2022-04-05 14:25:53 +00:00
< span > { " " + t ( "and" ) + " " } < / s p a n >
2022-03-27 15:23:00 +00:00
< BoltIcon sx = { { color : "#fcba03" , height : '23px' , width : '23px' } } / >
< / d i v > }
2022-04-05 14:25:53 +00:00
secondary = { t ( "... somewhere on Earth!" ) } / >
2022-01-15 15:45:44 +00:00
< / L i s t I t e m >
2022-01-15 00:28:19 +00:00
< / L i s t >
2022-01-15 15:45:44 +00:00
2022-01-15 00:28:19 +00:00
< / D i a l o g C o n t e n t >
< / D i a l o g >
)
}
2022-01-15 10:21:36 +00:00
handleClickOpenCommunity = ( ) => {
this . setState ( { openCommuniy : true } ) ;
} ;
handleClickCloseCommunity = ( ) => {
this . setState ( { openCommuniy : false } ) ;
} ;
CommunityDialog = ( ) => {
2022-04-05 14:25:53 +00:00
const { t } = this . props ;
2022-01-28 14:30:45 +00:00
2022-01-15 10:21:36 +00:00
return (
< Dialog
open = { this . state . openCommuniy }
onClose = { this . handleClickCloseCommunity }
aria - labelledby = "community-dialog-title"
aria - describedby = "community-description"
>
< DialogContent >
2022-04-05 14:25:53 +00:00
< Typography component = "h5" variant = "h5" > { t ( "Community" ) } < / T y p o g r a p h y >
2022-01-15 10:21:36 +00:00
< Typography component = "body2" variant = "body2" >
2022-04-05 14:25:53 +00:00
< p > { 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!" ) } < / p >
2022-01-15 10:21:36 +00:00
< / T y p o g r a p h y >
2022-04-15 16:22:49 +00:00
< List >
2022-01-15 10:21:36 +00:00
< Divider / >
2022-02-21 10:05:19 +00:00
< ListItemButton component = "a" target = "_blank" href = "https://t.me/robosats" >
2022-01-15 10:21:36 +00:00
< ListItemIcon > < SendIcon / > < / L i s t I t e m I c o n >
2022-04-05 14:25:53 +00:00
< ListItemText primary = { t ( "Join the RoboSats group" ) }
secondary = { t ( "Telegram (English / Main)" ) } / >
2022-01-15 10:21:36 +00:00
< / L i s t I t e m B u t t o n >
< Divider / >
2022-04-05 14:25:53 +00:00
< ListItem >
2022-01-15 10:21:36 +00:00
< ListItemIcon > < SendIcon / > < / L i s t I t e m I c o n >
2022-04-05 14:25:53 +00:00
< ListItemText secondary = { t ( "RoboSats Telegram Communities" ) } >
< Tooltip title = { t ( "Join RoboSats Spanish speaking community!" ) } >
< IconButton component = "a" target = "_blank" href = "https://t.me/robosats_es" > < Flags . ES width = { 30 } height = { 30 } style = { { filter : 'drop-shadow(2px 2px 2px #444444)' } } / > < / I c o n B u t t o n >
< / T o o l t i p >
< Tooltip title = { t ( "Join RoboSats Russian speaking community!" ) } >
< IconButton component = "a" target = "_blank" href = "https://t.me/robosats_ru" > < Flags . RU width = { 30 } height = { 30 } style = { { filter : 'drop-shadow(2px 2px 2px #444444)' } } / > < / I c o n B u t t o n >
< / T o o l t i p >
< Tooltip title = { t ( "Join RoboSats Chinese speaking community!" ) } >
< IconButton component = "a" target = "_blank" href = "https://t.me/robosats_cn" > < Flags . CN width = { 30 } height = { 30 } style = { { filter : 'drop-shadow(2px 2px 2px #444444)' } } / > < / I c o n B u t t o n >
< / T o o l t i p >
< Tooltip title = { t ( "Join RoboSats English speaking community!" ) } >
< IconButton component = "a" target = "_blank" href = "https://t.me/robosats" > < Flags . US width = { 30 } height = { 30 } style = { { filter : 'drop-shadow(2px 2px 2px #444444)' } } / > < / I c o n B u t t o n >
< / T o o l t i p >
< / L i s t I t e m T e x t >
< / L i s t I t e m >
2022-01-15 10:21:36 +00:00
< Divider / >
2022-02-21 10:05:19 +00:00
< ListItemButton component = "a" target = "_blank" href = "https://github.com/Reckless-Satoshi/robosats/issues" >
2022-01-15 10:21:36 +00:00
< ListItemIcon > < GitHubIcon / > < / L i s t I t e m I c o n >
2022-04-15 16:22:49 +00:00
< ListItemText primary = { t ( "Tell us about a new feature or a bug" ) }
2022-04-05 14:25:53 +00:00
secondary = { t ( "Github Issues - The Robotic Satoshis Open Source Project" ) } / >
2022-01-15 10:21:36 +00:00
< / L i s t I t e m B u t t o n >
< / L i s t >
< / D i a l o g C o n t e n t >
< / D i a l o g >
)
}
2022-01-29 19:51:26 +00:00
handleClickOpenProfile = ( ) => {
this . getInfo ( ) ;
this . setState ( { openProfile : true , profileShown : true } ) ;
} ;
handleClickCloseProfile = ( ) => {
this . setState ( { openProfile : false } ) ;
} ;
2022-03-06 16:08:28 +00:00
handleSubmitInvoiceClicked = ( ) => {
this . setState ( {
badInvoice : false ,
showRewardsSpinner : true ,
} ) ;
2022-04-15 16:22:49 +00:00
2022-03-06 16:08:28 +00:00
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 ( {
2022-04-15 16:22:49 +00:00
badInvoice : data . bad _invoice ,
2022-03-06 16:08:28 +00:00
openClaimRewards : data . successful _withdrawal ? false : true ,
earned _rewards : data . successful _withdrawal ? 0 : this . state . earned _rewards ,
withdrawn : data . successful _withdrawal ? true : false ,
showRewardsSpinner : false ,
} ) ) ;
2022-03-06 11:45:06 +00:00
}
2022-04-15 16:22:49 +00:00
getHost ( ) {
2022-03-19 16:33:01 +00:00
var url = ( window . location != window . parent . location ) ? this . getHost ( document . referrer ) : document . location . href ;
return url . split ( '/' ) [ 2 ]
}
2022-01-29 19:51:26 +00:00
dialogProfile = ( ) => {
2022-04-05 14:25:53 +00:00
const { t } = this . props ;
2022-01-29 19:51:26 +00:00
return (
< Dialog
open = { this . state . openProfile }
onClose = { this . handleClickCloseProfile }
aria - labelledby = "profile-title"
aria - describedby = "profile-description"
>
< DialogContent >
2022-04-05 14:25:53 +00:00
< Typography component = "h5" variant = "h5" > { t ( "Your Profile" ) } < / T y p o g r a p h y >
2022-01-29 19:51:26 +00:00
< List >
< Divider / >
< ListItem className = "profileNickname" >
2022-04-05 14:25:53 +00:00
< ListItemText secondary = { t ( "Your robot" ) } >
2022-01-29 19:51:26 +00:00
< Typography component = "h6" variant = "h6" >
2022-04-15 16:22:49 +00:00
{ this . props . nickname ?
2022-03-27 15:23:00 +00:00
< 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'}}/ >
< / d i v >
< / d i v >
: "" }
2022-01-29 19:51:26 +00:00
< / T y p o g r a p h y >
< / L i s t I t e m T e x t >
< ListItemAvatar >
2022-04-15 16:22:49 +00:00
< Avatar className = 'profileAvatar'
2022-01-29 19:51:26 +00:00
sx = { { width : 65 , height : 65 } }
2022-02-01 19:43:33 +00:00
alt = { this . props . nickname }
2022-04-15 16:22:49 +00:00
src = { this . props . nickname ? window . location . origin + '/static/assets/avatars/' + this . props . nickname + '.png' : null }
2022-01-29 19:51:26 +00:00
/ >
< / L i s t I t e m A v a t a r >
< / L i s t I t e m >
2022-03-05 11:48:11 +00:00
2022-01-29 19:51:26 +00:00
< Divider / >
2022-04-15 16:22:49 +00:00
{ this . state . active _order _id ?
2022-03-24 13:41:32 +00:00
< ListItemButton onClick = { this . handleClickCloseProfile } to = { '/order/' + this . state . active _order _id } component = { LinkRouter } >
2022-01-29 19:51:26 +00:00
< ListItemIcon >
2022-04-15 16:22:49 +00:00
< Badge badgeContent = "" color = "primary" >
2022-01-30 13:18:32 +00:00
< NumbersIcon color = "primary" / >
< / B a d g e >
2022-01-29 19:51:26 +00:00
< / L i s t I t e m I c o n >
2022-04-05 14:25:53 +00:00
< ListItemText primary = { t ( "One active order #{{orderID}}" , { orderID : this . state . active _order _id } ) } secondary = { t ( "Your current order" ) } / >
2022-01-29 19:51:26 +00:00
< / L i s t I t e m B u t t o n >
:
< ListItem >
< ListItemIcon > < NumbersIcon / > < / L i s t I t e m I c o n >
2022-04-05 14:25:53 +00:00
< ListItemText primary = { t ( "No active orders" ) } secondary = { t ( "Your current order" ) } / >
2022-01-29 19:51:26 +00:00
< / L i s t I t e m >
}
2022-04-15 16:22:49 +00:00
2022-01-29 20:17:30 +00:00
< ListItem >
< ListItemIcon >
< PasswordIcon / >
< / L i s t I t e m I c o n >
2022-04-05 14:25:53 +00:00
< ListItemText secondary = { t ( "Your token (will not remain here)" ) } >
2022-05-03 20:21:04 +00:00
{ getCookie ( "robot_token" ) ?
2022-01-29 20:17:30 +00:00
< TextField
disabled
2022-05-05 13:58:13 +00:00
sx = { { width : "100%" , maxWidth : "450px" } }
2022-04-05 14:25:53 +00:00
label = { t ( "Back it up!" ) }
2022-05-03 20:21:04 +00:00
value = { getCookie ( "robot_token" ) }
2022-01-29 20:17:30 +00:00
variant = 'filled'
2022-01-30 15:18:03 +00:00
size = 'small'
InputProps = { {
endAdornment :
2022-04-05 14:25:53 +00:00
< Tooltip disableHoverListener enterTouchDelay = "0" title = { t ( "Copied!" ) } >
2022-05-03 20:21:04 +00:00
< IconButton onClick = { ( ) => ( navigator . clipboard . writeText ( getCookie ( "robot_token" ) ) & this . props . setAppState ( { copiedToken : true } ) ) } >
< ContentCopy color = { this . props . copiedToken ? "inherit" : "primary" } / >
2022-03-05 11:48:11 +00:00
< / I c o n B u t t o n >
< / T o o l t i p > ,
2022-01-30 15:18:03 +00:00
} }
/ >
2022-04-15 16:22:49 +00:00
:
2022-04-05 14:25:53 +00:00
t ( "Cannot remember" ) }
2022-03-05 11:48:11 +00:00
< / L i s t I t e m T e x t >
< / L i s t I t e m >
2022-04-15 16:22:49 +00:00
2022-03-15 18:20:57 +00:00
< Divider / >
< Grid spacing = { 1 } align = "center" >
< FormControlLabel labelPlacement = "start" control = {
< Switch
2022-04-15 16:22:49 +00:00
checked = { this . state . showRewards }
onChange = { ( ) => this . setState ( { showRewards : ! this . state . showRewards } ) } / > }
2022-04-05 14:25:53 +00:00
label = { t ( "Rewards and compensations" ) }
2022-03-05 11:48:11 +00:00
/ >
2022-03-15 18:20:57 +00:00
< / G r i d >
2022-04-15 16:22:49 +00:00
2022-03-15 18:20:57 +00:00
< div style = { { display : this . state . showRewards ? '' : 'none' } } >
< ListItem >
< ListItemIcon >
< PersonAddAltIcon / >
< / L i s t I t e m I c o n >
2022-04-05 14:25:53 +00:00
< ListItemText secondary = { t ( "Share to earn 100 Sats per trade" ) } >
2022-03-15 18:20:57 +00:00
< TextField
2022-04-05 14:25:53 +00:00
label = { t ( "Your referral link" ) }
2022-03-19 16:33:01 +00:00
value = { this . getHost ( ) + '/ref/' + this . state . referral _code }
2022-03-15 18:20:57 +00:00
size = 'small'
InputProps = { {
endAdornment :
2022-04-05 14:25:53 +00:00
< Tooltip disableHoverListener enterTouchDelay = "0" title = { t ( "Copied!" ) } >
2022-03-19 16:33:01 +00:00
< IconButton onClick = { ( ) => navigator . clipboard . writeText ( 'http://' + this . getHost ( ) + '/ref/' + this . state . referral _code ) } >
2022-03-15 18:20:57 +00:00
< ContentCopy / >
< / I c o n B u t t o n >
< / T o o l t i p > ,
2022-03-06 11:45:06 +00:00
} }
/ >
2022-03-15 18:20:57 +00:00
< / L i s t I t e m T e x t >
< / L i s t I t e m >
2022-04-15 16:22:49 +00:00
2022-03-15 18:20:57 +00:00
< ListItem >
< ListItemIcon >
< EmojiEventsIcon / >
< / L i s t I t e m I c o n >
{ ! this . state . openClaimRewards ?
2022-04-05 14:25:53 +00:00
< ListItemText secondary = { t ( "Your earned rewards" ) } >
2022-03-15 18:20:57 +00:00
< Grid container xs = { 12 } >
< Grid item xs = { 9 } >
< Typography > { this . state . earned _rewards + " Sats" } < / T y p o g r a p h y >
< / G r i d >
< Grid item xs = { 3 } >
2022-04-05 14:25:53 +00:00
< Button disabled = { this . state . earned _rewards == 0 ? true : false } onClick = { ( ) => this . setState ( { openClaimRewards : true } ) } variant = "contained" size = "small" > { t ( "Claim" ) } < / B u t t o n >
2022-03-15 18:20:57 +00:00
< / G r i d >
2022-03-06 11:45:06 +00:00
< / G r i d >
2022-03-15 18:20:57 +00:00
< / L i s t I t e m T e x t >
:
< 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 : "" }
2022-04-05 14:25:53 +00:00
label = { t ( "Invoice for {{amountSats}} Sats" , { amountSats : this . state . earned _rewards } ) }
2022-03-15 18:20:57 +00:00
size = "small"
value = { this . state . rewardInvoice }
onChange = { e => {
this . setState ( { rewardInvoice : e . target . value } ) ;
} }
/ >
< / G r i d >
< Grid item alignItems = "stretch" style = { { display : "flex" } } >
2022-04-05 14:25:53 +00:00
< Button sx = { { maxHeight : 38 } } onClick = { this . handleSubmitInvoiceClicked } variant = "contained" color = "primary" size = "small" > { t ( "Submit" ) } < / B u t t o n >
2022-03-15 18:20:57 +00:00
< / G r i d >
2022-03-06 11:45:06 +00:00
< / G r i d >
2022-03-15 18:20:57 +00:00
< / f o r m >
}
< / L i s t I t e m >
2022-01-29 20:17:30 +00:00
2022-03-15 18:20:57 +00:00
{ this . state . showRewardsSpinner ?
< div style = { { display : 'flex' , justifyContent : 'center' } } >
< CircularProgress / >
< / d i v >
: "" }
2022-04-15 16:22:49 +00:00
2022-03-15 18:20:57 +00:00
{ this . state . withdrawn ?
< div style = { { display : 'flex' , justifyContent : 'center' } } >
2022-04-05 14:25:53 +00:00
< Typography color = "primary" variant = "body2" > < b > { t ( "There it goes, thank you!🥇" ) } < / b > < / T y p o g r a p h y >
2022-03-15 18:20:57 +00:00
< / d i v >
: "" }
2022-03-06 16:08:28 +00:00
2022-03-15 18:20:57 +00:00
< / d i v >
2022-01-29 19:51:26 +00:00
< / L i s t >
< / D i a l o g C o n t e n t >
2022-04-15 16:22:49 +00:00
2022-01-29 19:51:26 +00:00
< / D i a l o g >
)
}
2022-01-15 10:21:36 +00:00
2022-01-28 14:30:45 +00:00
bottomBarDesktop = ( ) => {
2022-04-05 14:25:53 +00:00
const { t } = this . props ;
2022-01-28 14:30:45 +00:00
return (
< Paper elevation = { 6 } style = { { height : 40 } } >
2022-01-15 00:28:19 +00:00
< this . StatsDialog / >
2022-01-15 10:21:36 +00:00
< this . CommunityDialog / >
2022-01-29 19:51:26 +00:00
< this . dialogProfile / >
2022-03-03 15:40:56 +00:00
< this . exchangeSummaryDialog / >
2022-01-14 16:21:42 +00:00
< Grid container xs = { 12 } >
2022-01-14 17:35:27 +00:00
2022-03-02 23:36:11 +00:00
< Grid item xs = { 1.9 } >
2022-04-15 16:22:49 +00:00
< div style = { { display : this . props . avatarLoaded ? '' : 'none' } } >
2022-01-29 19:51:26 +00:00
< ListItemButton onClick = { this . handleClickOpenProfile } >
2022-04-05 14:25:53 +00:00
< Tooltip open = { this . state . earned _rewards > 0 ? true : false } title = { t ( "You can claim satoshis!" ) } >
2022-02-01 22:05:49 +00:00
< Tooltip open = { ( this . state . active _order _id > 0 & ! this . state . profileShown & this . props . avatarLoaded ) ? true : false }
2022-04-05 14:25:53 +00:00
title = { t ( "You have an active order" ) } >
2022-01-29 19:51:26 +00:00
< ListItemAvatar sx = { { width : 30 , height : 30 } } >
2022-01-30 13:18:32 +00:00
< Badge badgeContent = { ( this . state . active _order _id > 0 & ! this . state . profileShown ) ? "" : null } color = "primary" >
2022-01-30 15:18:03 +00:00
< Avatar className = 'flippedSmallAvatar' sx = { { margin : 0 , top : - 13 } }
2022-04-15 16:22:49 +00:00
alt = { this . props . nickname }
2022-02-01 22:05:49 +00:00
imgProps = { {
onLoad : ( ) => this . props . setAppState ( { avatarLoaded : true } ) ,
2022-04-15 16:22:49 +00:00
} }
2022-02-01 22:05:49 +00:00
src = { this . props . nickname ? window . location . origin + '/static/assets/avatars/' + this . props . nickname + '.png' : null }
2022-01-29 19:51:26 +00:00
/ >
< / B a d g e >
< / L i s t I t e m A v a t a r >
2022-02-01 22:05:49 +00:00
< / T o o l t i p >
2022-03-10 21:35:16 +00:00
< / T o o l t i p >
2022-02-01 22:05:49 +00:00
< ListItemText primary = { this . props . nickname } / >
< / L i s t I t e m B u t t o n >
< / d i v >
2022-01-14 16:21:42 +00:00
< / G r i d >
2022-01-14 17:35:27 +00:00
2022-03-02 23:36:11 +00:00
< Grid item xs = { 1.9 } >
2022-01-14 16:21:42 +00:00
< ListItem className = "bottomItem" >
< ListItemIcon size = "small" >
2022-03-03 15:40:56 +00:00
< IconButton onClick = { this . handleClickOpenExchangeSummary } > < InventoryIcon / > < / I c o n B u t t o n >
2022-01-14 16:21:42 +00:00
< / L i s t I t e m I c o n >
2022-04-15 16:22:49 +00:00
< ListItemText
primaryTypographyProps = { { fontSize : '14px' } }
secondaryTypographyProps = { { fontSize : '12px' } }
primary = { this . state . num _public _buy _orders }
2022-04-05 14:25:53 +00:00
secondary = { t ( "Public Buy Orders" ) } / >
2022-01-14 16:21:42 +00:00
< / L i s t I t e m >
< / G r i d >
2022-01-14 17:35:27 +00:00
2022-03-02 23:36:11 +00:00
< Grid item xs = { 1.9 } >
2022-01-14 16:21:42 +00:00
< ListItem className = "bottomItem" >
< ListItemIcon size = "small" >
2022-03-03 15:40:56 +00:00
< IconButton onClick = { this . handleClickOpenExchangeSummary } > < SellIcon / > < / I c o n B u t t o n >
2022-01-14 16:21:42 +00:00
< / L i s t I t e m I c o n >
2022-04-15 16:22:49 +00:00
< ListItemText
primaryTypographyProps = { { fontSize : '14px' } }
secondaryTypographyProps = { { fontSize : '12px' } }
primary = { this . state . num _public _sell _orders }
2022-04-05 14:25:53 +00:00
secondary = { t ( "Public Sell Orders" ) } / >
2022-01-14 16:21:42 +00:00
< / L i s t I t e m >
< / G r i d >
2022-01-14 17:35:27 +00:00
2022-03-02 23:36:11 +00:00
< Grid item xs = { 1.9 } >
2022-01-14 16:21:42 +00:00
< ListItem className = "bottomItem" >
< ListItemIcon size = "small" >
2022-03-03 15:40:56 +00:00
< IconButton onClick = { this . handleClickOpenExchangeSummary } > < SmartToyIcon / > < / I c o n B u t t o n >
2022-01-14 16:21:42 +00:00
< / L i s t I t e m I c o n >
2022-04-15 16:22:49 +00:00
< ListItemText
primaryTypographyProps = { { fontSize : '14px' } }
secondaryTypographyProps = { { fontSize : '12px' } }
primary = { this . state . active _robots _today }
2022-04-05 14:25:53 +00:00
secondary = { t ( "Today Active Robots" ) } / >
2022-01-14 16:21:42 +00:00
< / L i s t I t e m >
< / G r i d >
2022-01-14 17:35:27 +00:00
2022-03-02 23:36:11 +00:00
< Grid item xs = { 1.9 } >
2022-01-14 16:21:42 +00:00
< ListItem className = "bottomItem" >
< ListItemIcon size = "small" >
2022-03-03 15:40:56 +00:00
< IconButton onClick = { this . handleClickOpenExchangeSummary } > < PriceChangeIcon / > < / I c o n B u t t o n >
2022-01-14 16:21:42 +00:00
< / L i s t I t e m I c o n >
2022-04-15 16:22:49 +00:00
< ListItemText
primaryTypographyProps = { { fontSize : '14px' } }
secondaryTypographyProps = { { fontSize : '12px' } }
primary = { this . state . last _day _nonkyc _btc _premium + "%" }
2022-04-05 14:25:53 +00:00
secondary = { t ( "24h Avg Premium" ) } / >
2022-01-14 16:21:42 +00:00
< / L i s t I t e m >
< / G r i d >
2022-01-14 17:35:27 +00:00
2022-03-02 23:36:11 +00:00
< Grid item xs = { 1.5 } >
2022-01-14 17:35:27 +00:00
< ListItem className = "bottomItem" >
< ListItemIcon size = "small" >
2022-03-03 15:40:56 +00:00
< IconButton onClick = { this . handleClickOpenExchangeSummary } > < PercentIcon / > < / I c o n B u t t o n >
2022-01-14 17:35:27 +00:00
< / L i s t I t e m I c o n >
2022-04-15 16:22:49 +00:00
< ListItemText
primaryTypographyProps = { { fontSize : '14px' } }
secondaryTypographyProps = { { fontSize : '12px' } }
primary = { ( this . state . maker _fee + this . state . taker _fee ) * 100 }
2022-04-05 14:25:53 +00:00
secondary = { t ( "Trade Fee" ) } / >
2022-01-14 17:35:27 +00:00
< / L i s t I t e m >
< / G r i d >
2022-01-14 16:21:42 +00:00
< Grid container item xs = { 1 } >
2022-01-29 19:51:26 +00:00
< Grid item xs = { 6 } >
2022-04-05 14:25:53 +00:00
< this . LangSelect / >
2022-01-14 16:21:42 +00:00
< / G r i d >
2022-01-29 19:51:26 +00:00
< Grid item xs = { 3 } >
2022-04-05 14:25:53 +00:00
< Tooltip enterTouchDelay = "250" title = { t ( "Show community and support links" ) } >
2022-04-15 16:22:49 +00:00
< IconButton
color = "primary"
aria - label = "Community"
2022-01-15 10:21:36 +00:00
onClick = { this . handleClickOpenCommunity } >
< PeopleIcon / >
2022-01-14 16:21:42 +00:00
< / I c o n B u t t o n >
2022-02-01 22:05:49 +00:00
< / T o o l t i p >
2022-01-14 16:21:42 +00:00
< / G r i d >
2022-04-15 16:22:49 +00:00
< Grid item xs = { 3 } >
2022-04-05 14:25:53 +00:00
< Tooltip enterTouchDelay = "250" title = { t ( "Show stats for nerds" ) } >
2022-04-15 16:22:49 +00:00
< IconButton color = "primary"
aria - label = "Stats for Nerds"
2022-02-01 22:05:49 +00:00
onClick = { this . handleClickOpenStatsForNerds } >
< SettingsIcon / >
< / I c o n B u t t o n >
< / T o o l t i p >
2022-01-29 19:51:26 +00:00
< / G r i d >
2022-01-14 17:35:27 +00:00
2022-01-14 16:21:42 +00:00
< / G r i d >
< / G r i d >
< / P a p e r >
2022-01-28 14:30:45 +00:00
)
}
2022-04-05 14:25:53 +00:00
handleChangeLang = ( e ) => {
2022-04-17 19:14:22 +00:00
const { i18n } = this . props ;
2022-04-05 14:25:53 +00:00
i18n . changeLanguage ( e . target . value )
}
2022-04-17 19:14:22 +00:00
2022-04-05 14:25:53 +00:00
LangSelect = ( ) => {
const { i18n } = this . props ;
return (
2022-04-15 16:22:49 +00:00
< Select
2022-04-05 14:25:53 +00:00
size = 'small'
value = { i18n . resolvedLanguage . substring ( 0 , 2 ) }
inputProps = { {
style : { textAlign : "center" }
} }
2022-04-15 16:22:49 +00:00
onChange = { this . handleChangeLang } >
2022-04-05 14:25:53 +00:00
< MenuItem value = { 'en' } > EN < / M e n u I t e m >
Spanish translation (#96)
* Translate tp Spanish (#93)
* update_es.json
* Update es.json
Translate eng to esp from line 222 to end
Co-authored-by: mamifiero <99733022+mamifiero@users.noreply.github.com>
* Fit book and maker UI for variable length text
* Correction and style of the Spanish translation (#95)
* Correction and style of the Spanish translation
The following terms have been unified and adjusted only in Spanish, but can be done in English base too:
* Satoshis, satoshis, sats = Sats (in honour of RoboSats)
* Robot (always first capital letter in honour of RoboSats)
* Lightning, lightning, LN, Lightning Network = Lightningç
* Telegram, TG = Telegram
* Trade, Swap = Trade (Intercambio)
* Trade counterpart, Peer, Trading peer = Peer (Compañero)
* Hold invoice, Bond & Fidelity Bond = Bond (Fianza)
* Trade collateral, Collateral, Trade escrow, Escrow = Collateral (Colateral)
* Burner contact method, Burner email = Burner contact method (Método de contacto de usar y tirar)
* Hidden service (deprecated), Onion services, .onion site = Onion site (sitio cebolla)
https://tb-manual.torproject.org/es/onion-services/
* Tor Browser (Navegador Tor)
https://tb-manual.torproject.org/es/about/
* Craiglist is not common on spanish countries, so now inserted WallaPop
* Update es.json
Co-authored-by: decentralized.b <58108487+decentralizedb@users.noreply.github.com>
Co-authored-by: mamifiero <99733022+mamifiero@users.noreply.github.com>
Co-authored-by: ibertario <68381662+ibertario@users.noreply.github.com>
2022-04-15 16:15:57 +00:00
< MenuItem value = { 'es' } > ES < / M e n u I t e m >
2022-04-29 19:26:33 +00:00
< MenuItem value = { 'de' } > DE < / M e n u I t e m >
2022-04-24 19:32:08 +00:00
< MenuItem value = { 'pl' } > PL < / M e n u I t e m >
2022-04-29 19:26:33 +00:00
< MenuItem value = { 'fr' } > FR < / M e n u I t e m >
2022-04-05 14:25:53 +00:00
< MenuItem disabled = { true } value = { 'ru' } > RU < / M e n u I t e m >
< MenuItem disabled = { true } value = { 'zh' } > ZH < / M e n u I t e m >
< / S e l e c t >
)
}
2022-04-15 16:22:49 +00:00
2022-01-28 14:30:45 +00:00
handleClickOpenExchangeSummary = ( ) => {
2022-01-29 19:51:26 +00:00
this . getInfo ( ) ;
2022-01-28 14:30:45 +00:00
this . setState ( { openExchangeSummary : true } ) ;
} ;
handleClickCloseExchangeSummary = ( ) => {
this . setState ( { openExchangeSummary : false } ) ;
} ;
2022-03-03 15:40:56 +00:00
exchangeSummaryDialog = ( ) => {
2022-04-05 14:25:53 +00:00
const { t } = this . props ;
2022-01-28 14:30:45 +00:00
return (
< Dialog
open = { this . state . openExchangeSummary }
onClose = { this . handleClickCloseExchangeSummary }
aria - labelledby = "exchange-summary-title"
aria - describedby = "exchange-summary-description"
>
< DialogContent >
2022-04-05 14:25:53 +00:00
< Typography component = "h5" variant = "h5" > { t ( "Exchange Summary" ) } < / T y p o g r a p h y >
2022-01-28 14:30:45 +00:00
< List dense >
< ListItem >
< ListItemIcon size = "small" >
< InventoryIcon / >
< / L i s t I t e m I c o n >
2022-04-15 16:22:49 +00:00
< ListItemText
primaryTypographyProps = { { fontSize : '14px' } }
secondaryTypographyProps = { { fontSize : '12px' } }
primary = { this . state . num _public _buy _orders }
2022-04-05 14:25:53 +00:00
secondary = { t ( "Public buy orders" ) } / >
2022-01-28 14:30:45 +00:00
< / L i s t I t e m >
< Divider / >
< ListItem >
< ListItemIcon size = "small" >
< SellIcon / >
< / L i s t I t e m I c o n >
2022-04-15 16:22:49 +00:00
< ListItemText
primaryTypographyProps = { { fontSize : '14px' } }
secondaryTypographyProps = { { fontSize : '12px' } }
primary = { this . state . num _public _sell _orders }
2022-04-05 14:25:53 +00:00
secondary = { t ( "Public sell orders" ) } / >
2022-01-28 14:30:45 +00:00
< / L i s t I t e m >
< Divider / >
2022-03-05 11:05:41 +00:00
< ListItem >
< ListItemIcon size = "small" >
< BookIcon / >
< / L i s t I t e m I c o n >
2022-04-15 16:22:49 +00:00
< ListItemText
primaryTypographyProps = { { fontSize : '14px' } }
secondaryTypographyProps = { { fontSize : '12px' } }
primary = { pn ( this . state . book _liquidity ) + " Sats" }
2022-04-05 14:25:53 +00:00
secondary = { t ( "Book liquidity" ) } / >
2022-03-05 11:05:41 +00:00
< / L i s t I t e m >
< Divider / >
2022-01-28 14:30:45 +00:00
< ListItem >
< ListItemIcon size = "small" >
< SmartToyIcon / >
< / L i s t I t e m I c o n >
2022-04-15 16:22:49 +00:00
< ListItemText
primaryTypographyProps = { { fontSize : '14px' } }
secondaryTypographyProps = { { fontSize : '12px' } }
primary = { this . state . active _robots _today }
2022-04-05 14:25:53 +00:00
secondary = { t ( "Today active robots" ) } / >
2022-01-28 14:30:45 +00:00
< / L i s t I t e m >
< Divider / >
< ListItem >
< ListItemIcon size = "small" >
< PriceChangeIcon / >
< / L i s t I t e m I c o n >
2022-04-15 16:22:49 +00:00
< ListItemText
primaryTypographyProps = { { fontSize : '14px' } }
secondaryTypographyProps = { { fontSize : '12px' } }
primary = { this . state . last _day _nonkyc _btc _premium + "%" }
2022-04-05 14:25:53 +00:00
secondary = { t ( "24h non-KYC bitcoin premium" ) } / >
2022-01-28 14:30:45 +00:00
< / L i s t I t e m >
< Divider / >
< ListItem >
< ListItemIcon size = "small" >
< PercentIcon / >
< / L i s t I t e m I c o n >
2022-03-07 21:46:52 +00:00
< Grid container xs = { 12 } >
< Grid item xs = { 6 } >
2022-04-15 16:22:49 +00:00
< ListItemText
primaryTypographyProps = { { fontSize : '14px' } }
secondaryTypographyProps = { { fontSize : '12px' } }
2022-04-05 14:25:53 +00:00
secondary = { t ( "Maker fee" ) } >
2022-03-07 21:46:52 +00:00
{ ( this . state . maker _fee * 100 ) . toFixed ( 3 ) } %
< / L i s t I t e m T e x t >
< / G r i d >
< Grid item xs = { 6 } >
2022-04-15 16:22:49 +00:00
< ListItemText
primaryTypographyProps = { { fontSize : '14px' } }
secondaryTypographyProps = { { fontSize : '12px' } }
2022-04-05 14:25:53 +00:00
secondary = { t ( "Taker fee" ) } >
2022-03-07 21:46:52 +00:00
{ ( this . state . taker _fee * 100 ) . toFixed ( 3 ) } %
< / L i s t I t e m T e x t >
< / G r i d >
< / G r i d >
2022-01-28 14:30:45 +00:00
< / L i s t I t e m >
< / L i s t >
2022-04-15 16:22:49 +00:00
2022-01-28 14:30:45 +00:00
< / D i a l o g C o n t e n t >
< / D i a l o g >
)
}
bottomBarPhone = ( ) => {
2022-04-05 14:25:53 +00:00
const { t } = this . props ;
2022-01-28 14:30:45 +00:00
return (
< Paper elevation = { 6 } style = { { height : 40 } } >
< this . StatsDialog / >
< this . CommunityDialog / >
2022-03-03 15:40:56 +00:00
< this . exchangeSummaryDialog / >
2022-01-29 19:51:26 +00:00
< this . dialogProfile / >
2022-01-28 14:30:45 +00:00
< Grid container xs = { 12 } >
2022-01-29 19:51:26 +00:00
< Grid item xs = { 1.6 } >
2022-02-01 19:43:33 +00:00
< div style = { { display : this . props . avatarLoaded ? '' : 'none' } } >
2022-04-05 14:25:53 +00:00
< Tooltip open = { this . state . earned _rewards > 0 ? true : false } title = { t ( "You can claim satoshis!" ) } >
2022-03-10 21:35:16 +00:00
< Tooltip open = { ( this . state . active _order _id > 0 & ! this . state . profileShown & this . props . avatarLoaded ) ? true : false }
2022-04-05 14:25:53 +00:00
title = { t ( "You have an active order" ) } >
2022-02-02 09:29:05 +00:00
< IconButton onClick = { this . handleClickOpenProfile } sx = { { margin : 0 , bottom : 17 , right : 8 } } >
2022-02-01 22:05:49 +00:00
< Badge badgeContent = { ( this . state . active _order _id > 0 & ! this . state . profileShown ) ? "" : null } color = "primary" >
< Avatar className = 'phoneFlippedSmallAvatar'
2022-04-15 16:22:49 +00:00
sx = { { width : 55 , height : 55 } }
alt = { this . props . nickname }
2022-02-01 22:05:49 +00:00
imgProps = { {
onLoad : ( ) => this . props . setAppState ( { avatarLoaded : true } ) ,
2022-04-15 16:22:49 +00:00
} }
src = { this . props . nickname ? window . location . origin + '/static/assets/avatars/' + this . props . nickname + '.png' : null }
2022-02-01 22:05:49 +00:00
/ >
< / B a d g e >
< / I c o n B u t t o n >
< / T o o l t i p >
2022-03-10 21:35:16 +00:00
< / T o o l t i p >
2022-02-01 19:43:33 +00:00
< / d i v >
2022-01-28 14:30:45 +00:00
< / G r i d >
2022-01-29 19:51:26 +00:00
< Grid item xs = { 1.6 } align = "center" >
2022-04-15 16:22:49 +00:00
< Tooltip enterTouchDelay = "300" title = { t ( "Number of public BUY orders" ) } >
2022-02-01 22:05:49 +00:00
< IconButton onClick = { this . handleClickOpenExchangeSummary } >
< Badge badgeContent = { this . state . num _public _buy _orders } color = "action" >
< InventoryIcon / >
< / B a d g e >
< / I c o n B u t t o n >
2022-04-15 16:22:49 +00:00
< / T o o l t i p >
2022-01-28 14:30:45 +00:00
< / G r i d >
2022-01-29 19:51:26 +00:00
< Grid item xs = { 1.6 } align = "center" >
2022-04-05 14:25:53 +00:00
< Tooltip enterTouchDelay = "300" title = { t ( "Number of public SELL orders" ) } >
2022-02-01 22:05:49 +00:00
< IconButton onClick = { this . handleClickOpenExchangeSummary } >
< Badge badgeContent = { this . state . num _public _sell _orders } color = "action" >
< SellIcon / >
< / B a d g e >
< / I c o n B u t t o n >
< / T o o l t i p >
2022-01-28 14:30:45 +00:00
< / G r i d >
2022-01-29 19:51:26 +00:00
< Grid item xs = { 1.6 } align = "center" >
2022-04-05 14:25:53 +00:00
< Tooltip enterTouchDelay = "300" title = { t ( "Today active robots" ) } >
2022-02-01 22:05:49 +00:00
< IconButton onClick = { this . handleClickOpenExchangeSummary } >
< Badge badgeContent = { this . state . active _robots _today } color = "action" >
< SmartToyIcon / >
< / B a d g e >
< / I c o n B u t t o n >
< / T o o l t i p >
2022-01-28 14:30:45 +00:00
< / G r i d >
2022-01-29 19:51:26 +00:00
< Grid item xs = { 1.8 } align = "center" >
2022-04-15 16:22:49 +00:00
< Tooltip enterTouchDelay = "300" title = { t ( "24h non-KYC bitcoin premium" ) } >
2022-02-01 22:05:49 +00:00
< IconButton onClick = { this . handleClickOpenExchangeSummary } >
2022-03-13 12:00:21 +00:00
< Badge badgeContent = { this . state . last _day _nonkyc _btc _premium + "%" } color = "action" >
2022-02-01 22:05:49 +00:00
< PriceChangeIcon / >
< / B a d g e >
< / I c o n B u t t o n >
< / T o o l t i p >
2022-01-28 14:30:45 +00:00
< / G r i d >
2022-01-29 19:51:26 +00:00
< Grid container item xs = { 3.8 } >
< Grid item xs = { 6 } >
2022-04-05 14:25:53 +00:00
< this . LangSelect / >
2022-01-28 14:30:45 +00:00
< / G r i d >
2022-01-29 19:51:26 +00:00
< Grid item xs = { 3 } >
2022-04-05 14:25:53 +00:00
< Tooltip enterTouchDelay = "250" title = { t ( "Show community and support links" ) } >
2022-04-15 16:22:49 +00:00
< IconButton
color = "primary"
aria - label = "Community"
2022-01-28 14:30:45 +00:00
onClick = { this . handleClickOpenCommunity } >
< PeopleIcon / >
< / I c o n B u t t o n >
2022-02-01 22:05:49 +00:00
< / T o o l t i p >
< / G r i d >
< Grid item xs = { 3 } >
2022-04-05 14:25:53 +00:00
< Tooltip enterTouchDelay = "250" title = { t ( "Show stats for nerds" ) } >
2022-04-15 16:22:49 +00:00
< IconButton color = "primary"
aria - label = "Stats for Nerds"
2022-02-01 22:05:49 +00:00
onClick = { this . handleClickOpenStatsForNerds } >
< SettingsIcon / >
< / I c o n B u t t o n >
< / T o o l t i p >
2022-01-28 14:30:45 +00:00
< / G r i d >
< / G r i d >
< / G r i d >
< / P a p e r >
)
}
render ( ) {
return (
< div >
< MediaQuery minWidth = { 1200 } >
< this . bottomBarDesktop / >
< / M e d i a Q u e r y >
< MediaQuery maxWidth = { 1199 } >
< this . bottomBarPhone / >
< / M e d i a Q u e r y >
< / d i v >
2022-01-14 16:21:42 +00:00
)
}
}
2022-04-15 16:22:49 +00:00
export default withTranslation ( ) ( BottomBar ) ;