Mirror/robosats
1
0
Fork 0
mirror of https://github.com/RoboSats/robosats.git synced 2025-02-21 12:49:02 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Extract getCookie function into its own file (#94)

Browse Source 
The getCookie function was being implemented a couple of times across the pages. These changes create a single implementation and imports the helper function whenever needed.
This commit is contained in:
Fernando Porazzi 2022-04-15 18:22:49 +02:00 committed by GitHub
parent 22675ebaab
commit 7bca5ecdc7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 264 additions and 323 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

210
frontend/src/components/BottomBar.js
View File

@ -29,6 +29,8 @@ import EmojiEventsIcon from '@mui/icons-material/EmojiEvents';
import AmbossIcon from "./icons/AmbossIcon"; import AmbossIcon from "./icons/AmbossIcon";
import FavoriteIcon from '@mui/icons-material/Favorite'; import FavoriteIcon from '@mui/icons-material/Favorite';
import { getCookie } from "../utils/cookies";
// pretty numbers // pretty numbers
function pn(x) { function pn(x) {
if(x == null){ if(x == null){
@ -40,22 +42,6 @@ function pn(x) {
} }
} }
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 { class BottomBar extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
@ -124,11 +110,11 @@ class BottomBar extends Component {
</ListItem> </ListItem>
<Divider/> <Divider/>
{this.state.network == 'testnet'? {this.state.network == 'testnet'?
<ListItem> <ListItem>
<ListItemIcon><DnsIcon/></ListItemIcon> <ListItemIcon><DnsIcon/></ListItemIcon>
<ListItemText secondary={this.state.node_alias}> <ListItemText secondary={this.state.node_alias}>
<Link target="_blank" href={"https://1ml.com/testnet/node/" <Link target="_blank" href={"https://1ml.com/testnet/node/"
+ this.state.node_id}>{this.state.node_id.slice(0, 12)+"... (1ML)"} + this.state.node_id}>{this.state.node_id.slice(0, 12)+"... (1ML)"}
</Link> </Link>
</ListItemText> </ListItemText>
@ -137,7 +123,7 @@ class BottomBar extends Component {
<ListItem> <ListItem>
<ListItemIcon><AmbossIcon/></ListItemIcon> <ListItemIcon><AmbossIcon/></ListItemIcon>
<ListItemText secondary={this.state.node_alias}> <ListItemText secondary={this.state.node_alias}>
<Link target="_blank" href={"https://amboss.space/node/" <Link target="_blank" href={"https://amboss.space/node/"
+ this.state.node_id}>{this.state.node_id.slice(0, 12)+"... (AMBOSS)"} + this.state.node_id}>{this.state.node_id.slice(0, 12)+"... (AMBOSS)"}
</Link> </Link>
</ListItemText> </ListItemText>
@ -157,7 +143,7 @@ class BottomBar extends Component {
<ListItem> <ListItem>
<ListItemIcon><GitHubIcon/></ListItemIcon> <ListItemIcon><GitHubIcon/></ListItemIcon>
<ListItemText secondary={t("Currently running commit hash")}> <ListItemText secondary={t("Currently running commit hash")}>
<Link target="_blank" href={"https://github.com/Reckless-Satoshi/robosats/tree/" <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)+"..."} + this.state.robosats_running_commit_hash}>{this.state.robosats_running_commit_hash.slice(0, 12)+"..."}
</Link> </Link>
</ListItemText> </ListItemText>
@ -216,7 +202,7 @@ class BottomBar extends Component {
<Typography component="body2" variant="body2"> <Typography component="body2" variant="body2">
<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> <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>
</Typography> </Typography>
<List> <List>
<Divider/> <Divider/>
<ListItemButton component="a" target="_blank" href="https://t.me/robosats"> <ListItemButton component="a" target="_blank" href="https://t.me/robosats">
@ -247,7 +233,7 @@ class BottomBar extends Component {
<ListItemButton component="a" target="_blank" href="https://github.com/Reckless-Satoshi/robosats/issues"> <ListItemButton component="a" target="_blank" href="https://github.com/Reckless-Satoshi/robosats/issues">
<ListItemIcon><GitHubIcon/></ListItemIcon> <ListItemIcon><GitHubIcon/></ListItemIcon>
<ListItemText primary={t("Tell us about a new feature or a bug")} <ListItemText primary={t("Tell us about a new feature or a bug")}
secondary={t("Github Issues - The Robotic Satoshis Open Source Project")}/> secondary={t("Github Issues - The Robotic Satoshis Open Source Project")}/>
</ListItemButton> </ListItemButton>
@ -270,7 +256,7 @@ class BottomBar extends Component {
badInvoice:false, badInvoice:false,
showRewardsSpinner: true, showRewardsSpinner: true,
}); });
const requestOptions = { const requestOptions = {
method: 'POST', method: 'POST',
headers: {'Content-Type':'application/json', 'X-CSRFToken': getCookie('csrftoken'),}, headers: {'Content-Type':'application/json', 'X-CSRFToken': getCookie('csrftoken'),},
@ -281,7 +267,7 @@ class BottomBar extends Component {
fetch('/api/reward/', requestOptions) fetch('/api/reward/', requestOptions)
.then((response) => response.json()) .then((response) => response.json())
.then((data) => console.log(data) & this.setState({ .then((data) => console.log(data) & this.setState({
badInvoice:data.bad_invoice, badInvoice:data.bad_invoice,
openClaimRewards: data.successful_withdrawal ? false : true, openClaimRewards: data.successful_withdrawal ? false : true,
earned_rewards: data.successful_withdrawal ? 0 : this.state.earned_rewards, earned_rewards: data.successful_withdrawal ? 0 : this.state.earned_rewards,
withdrawn: data.successful_withdrawal ? true : false, withdrawn: data.successful_withdrawal ? true : false,
@ -289,7 +275,7 @@ class BottomBar extends Component {
})); }));
} }
getHost(){ getHost(){
var url = (window.location != window.parent.location) ? this.getHost(document.referrer) : document.location.href; var url = (window.location != window.parent.location) ? this.getHost(document.referrer) : document.location.href;
return url.split('/')[2] return url.split('/')[2]
} }
@ -310,7 +296,7 @@ class BottomBar extends Component {
<ListItem className="profileNickname"> <ListItem className="profileNickname">
<ListItemText secondary={t("Your robot")}> <ListItemText secondary={t("Your robot")}>
<Typography component="h6" variant="h6"> <Typography component="h6" variant="h6">
{this.props.nickname ? {this.props.nickname ?
<div style={{position:'relative',left:'-7px'}}> <div style={{position:'relative',left:'-7px'}}>
<div style={{display:'flex', alignItems:'center', justifyContent:'left', flexWrap:'wrap', width:300}}> <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'}}/> <BoltIcon sx={{ color: "#fcba03", height: '28px',width: '24px'}}/><a>{this.props.nickname}</a><BoltIcon sx={{ color: "#fcba03", height: '28px',width: '24px'}}/>
@ -320,19 +306,19 @@ class BottomBar extends Component {
</Typography> </Typography>
</ListItemText> </ListItemText>
<ListItemAvatar> <ListItemAvatar>
<Avatar className='profileAvatar' <Avatar className='profileAvatar'
sx={{ width: 65, height:65 }} sx={{ width: 65, height:65 }}
alt={this.props.nickname} alt={this.props.nickname}
src={this.props.nickname ? window.location.origin +'/static/assets/avatars/' + this.props.nickname + '.png' : null} src={this.props.nickname ? window.location.origin +'/static/assets/avatars/' + this.props.nickname + '.png' : null}
/> />
</ListItemAvatar> </ListItemAvatar>
</ListItem> </ListItem>
<Divider/> <Divider/>
{this.state.active_order_id ? {this.state.active_order_id ?
<ListItemButton onClick={this.handleClickCloseProfile} to={'/order/'+this.state.active_order_id} component={LinkRouter}> <ListItemButton onClick={this.handleClickCloseProfile} to={'/order/'+this.state.active_order_id} component={LinkRouter}>
<ListItemIcon> <ListItemIcon>
<Badge badgeContent="" color="primary"> <Badge badgeContent="" color="primary">
<NumbersIcon color="primary"/> <NumbersIcon color="primary"/>
</Badge> </Badge>
</ListItemIcon> </ListItemIcon>
@ -344,13 +330,13 @@ class BottomBar extends Component {
<ListItemText primary={t("No active orders")} secondary={t("Your current order")}/> <ListItemText primary={t("No active orders")} secondary={t("Your current order")}/>
</ListItem> </ListItem>
} }
<ListItem> <ListItem>
<ListItemIcon> <ListItemIcon>
<PasswordIcon/> <PasswordIcon/>
</ListItemIcon> </ListItemIcon>
<ListItemText secondary={t("Your token (will not remain here)")}> <ListItemText secondary={t("Your token (will not remain here)")}>
{this.props.token ? {this.props.token ?
<TextField <TextField
disabled disabled
label={t("Back it up!")} label={t("Back it up!")}
@ -366,22 +352,22 @@ class BottomBar extends Component {
</Tooltip>, </Tooltip>,
}} }}
/> />
: :
t("Cannot remember")} t("Cannot remember")}
</ListItemText> </ListItemText>
</ListItem> </ListItem>
<Divider/> <Divider/>
<Grid spacing={1} align="center"> <Grid spacing={1} align="center">
<FormControlLabel labelPlacement="start"control={ <FormControlLabel labelPlacement="start"control={
<Switch <Switch
checked={this.state.showRewards} checked={this.state.showRewards}
onChange={()=> this.setState({showRewards: !this.state.showRewards})}/>} onChange={()=> this.setState({showRewards: !this.state.showRewards})}/>}
label={t("Rewards and compensations")} label={t("Rewards and compensations")}
/> />
</Grid> </Grid>
<div style={{ display: this.state.showRewards ? '':'none'}}> <div style={{ display: this.state.showRewards ? '':'none'}}>
<ListItem> <ListItem>
<ListItemIcon> <ListItemIcon>
@ -403,7 +389,7 @@ class BottomBar extends Component {
/> />
</ListItemText> </ListItemText>
</ListItem> </ListItem>
<ListItem> <ListItem>
<ListItemIcon> <ListItemIcon>
<EmojiEventsIcon/> <EmojiEventsIcon/>
@ -447,7 +433,7 @@ class BottomBar extends Component {
<CircularProgress/> <CircularProgress/>
</div> </div>
:""} :""}
{this.state.withdrawn? {this.state.withdrawn?
<div style={{display: 'flex', justifyContent: 'center'}}> <div style={{display: 'flex', justifyContent: 'center'}}>
<Typography color="primary" variant="body2"><b>{t("There it goes, thank you!🥇")}</b></Typography> <Typography color="primary" variant="body2"><b>{t("There it goes, thank you!🥇")}</b></Typography>
@ -457,7 +443,7 @@ class BottomBar extends Component {
</div> </div>
</List> </List>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
) )
} }
@ -473,7 +459,7 @@ bottomBarDesktop =()=>{
<Grid container xs={12}> <Grid container xs={12}>
<Grid item xs={1.9}> <Grid item xs={1.9}>
<div style={{display: this.props.avatarLoaded ? '':'none'}}> <div style={{display: this.props.avatarLoaded ? '':'none'}}>
<ListItemButton onClick={this.handleClickOpenProfile} > <ListItemButton onClick={this.handleClickOpenProfile} >
<Tooltip open={this.state.earned_rewards > 0 ? true: false} title={t("You can claim satoshis!")}> <Tooltip open={this.state.earned_rewards > 0 ? true: false} title={t("You can claim satoshis!")}>
<Tooltip open={(this.state.active_order_id > 0 & !this.state.profileShown & this.props.avatarLoaded) ? true: false} <Tooltip open={(this.state.active_order_id > 0 & !this.state.profileShown & this.props.avatarLoaded) ? true: false}
@ -481,10 +467,10 @@ bottomBarDesktop =()=>{
<ListItemAvatar sx={{ width: 30, height: 30 }} > <ListItemAvatar sx={{ width: 30, height: 30 }} >
<Badge badgeContent={(this.state.active_order_id > 0 & !this.state.profileShown) ? "": null} color="primary"> <Badge badgeContent={(this.state.active_order_id > 0 & !this.state.profileShown) ? "": null} color="primary">
<Avatar className='flippedSmallAvatar' sx={{margin: 0, top: -13}} <Avatar className='flippedSmallAvatar' sx={{margin: 0, top: -13}}
alt={this.props.nickname} alt={this.props.nickname}
imgProps={{ imgProps={{
onLoad:() => this.props.setAppState({avatarLoaded: true}), onLoad:() => this.props.setAppState({avatarLoaded: true}),
}} }}
src={this.props.nickname ? window.location.origin +'/static/assets/avatars/' + this.props.nickname + '.png' : null} src={this.props.nickname ? window.location.origin +'/static/assets/avatars/' + this.props.nickname + '.png' : null}
/> />
</Badge> </Badge>
@ -501,10 +487,10 @@ bottomBarDesktop =()=>{
<ListItemIcon size="small"> <ListItemIcon size="small">
<IconButton onClick={this.handleClickOpenExchangeSummary}><InventoryIcon/></IconButton> <IconButton onClick={this.handleClickOpenExchangeSummary}><InventoryIcon/></IconButton>
</ListItemIcon> </ListItemIcon>
<ListItemText <ListItemText
primaryTypographyProps={{fontSize: '14px'}} primaryTypographyProps={{fontSize: '14px'}}
secondaryTypographyProps={{fontSize: '12px'}} secondaryTypographyProps={{fontSize: '12px'}}
primary={this.state.num_public_buy_orders} primary={this.state.num_public_buy_orders}
secondary={t("Public Buy Orders")} /> secondary={t("Public Buy Orders")} />
</ListItem> </ListItem>
</Grid> </Grid>
@ -514,10 +500,10 @@ bottomBarDesktop =()=>{
<ListItemIcon size="small"> <ListItemIcon size="small">
<IconButton onClick={this.handleClickOpenExchangeSummary}><SellIcon/></IconButton> <IconButton onClick={this.handleClickOpenExchangeSummary}><SellIcon/></IconButton>
</ListItemIcon> </ListItemIcon>
<ListItemText <ListItemText
primaryTypographyProps={{fontSize: '14px'}} primaryTypographyProps={{fontSize: '14px'}}
secondaryTypographyProps={{fontSize: '12px'}} secondaryTypographyProps={{fontSize: '12px'}}
primary={this.state.num_public_sell_orders} primary={this.state.num_public_sell_orders}
secondary={t("Public Sell Orders")} /> secondary={t("Public Sell Orders")} />
</ListItem> </ListItem>
</Grid> </Grid>
@ -527,10 +513,10 @@ bottomBarDesktop =()=>{
<ListItemIcon size="small"> <ListItemIcon size="small">
<IconButton onClick={this.handleClickOpenExchangeSummary}><SmartToyIcon/></IconButton> <IconButton onClick={this.handleClickOpenExchangeSummary}><SmartToyIcon/></IconButton>
</ListItemIcon> </ListItemIcon>
<ListItemText <ListItemText
primaryTypographyProps={{fontSize: '14px'}} primaryTypographyProps={{fontSize: '14px'}}
secondaryTypographyProps={{fontSize: '12px'}} secondaryTypographyProps={{fontSize: '12px'}}
primary={this.state.active_robots_today} primary={this.state.active_robots_today}
secondary={t("Today Active Robots")}/> secondary={t("Today Active Robots")}/>
</ListItem> </ListItem>
</Grid> </Grid>
@ -540,10 +526,10 @@ bottomBarDesktop =()=>{
<ListItemIcon size="small"> <ListItemIcon size="small">
<IconButton onClick={this.handleClickOpenExchangeSummary}><PriceChangeIcon/></IconButton> <IconButton onClick={this.handleClickOpenExchangeSummary}><PriceChangeIcon/></IconButton>
</ListItemIcon> </ListItemIcon>
<ListItemText <ListItemText
primaryTypographyProps={{fontSize: '14px'}} primaryTypographyProps={{fontSize: '14px'}}
secondaryTypographyProps={{fontSize: '12px'}} secondaryTypographyProps={{fontSize: '12px'}}
primary={this.state.last_day_nonkyc_btc_premium+"%"} primary={this.state.last_day_nonkyc_btc_premium+"%"}
secondary={t("24h Avg Premium")} /> secondary={t("24h Avg Premium")} />
</ListItem> </ListItem>
</Grid> </Grid>
@ -553,10 +539,10 @@ bottomBarDesktop =()=>{
<ListItemIcon size="small"> <ListItemIcon size="small">
< IconButton onClick={this.handleClickOpenExchangeSummary}><PercentIcon/></IconButton> < IconButton onClick={this.handleClickOpenExchangeSummary}><PercentIcon/></IconButton>
</ListItemIcon> </ListItemIcon>
<ListItemText <ListItemText
primaryTypographyProps={{fontSize: '14px'}} primaryTypographyProps={{fontSize: '14px'}}
secondaryTypographyProps={{fontSize: '12px'}} secondaryTypographyProps={{fontSize: '12px'}}
primary={(this.state.maker_fee + this.state.taker_fee)*100} primary={(this.state.maker_fee + this.state.taker_fee)*100}
secondary={t("Trade Fee")} /> secondary={t("Trade Fee")} />
</ListItem> </ListItem>
</Grid> </Grid>
@ -567,18 +553,18 @@ bottomBarDesktop =()=>{
</Grid> </Grid>
<Grid item xs={3}> <Grid item xs={3}>
<Tooltip enterTouchDelay="250" title={t("Show community and support links")}> <Tooltip enterTouchDelay="250" title={t("Show community and support links")}>
<IconButton <IconButton
color="primary" color="primary"
aria-label="Community" aria-label="Community"
onClick={this.handleClickOpenCommunity} > onClick={this.handleClickOpenCommunity} >
<PeopleIcon /> <PeopleIcon />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
</Grid> </Grid>
<Grid item xs={3}> <Grid item xs={3}>
<Tooltip enterTouchDelay="250" title={t("Show stats for nerds")}> <Tooltip enterTouchDelay="250" title={t("Show stats for nerds")}>
<IconButton color="primary" <IconButton color="primary"
aria-label="Stats for Nerds" aria-label="Stats for Nerds"
onClick={this.handleClickOpenStatsForNerds} > onClick={this.handleClickOpenStatsForNerds} >
<SettingsIcon /> <SettingsIcon />
</IconButton> </IconButton>
@ -598,13 +584,13 @@ bottomBarDesktop =()=>{
LangSelect = () => { LangSelect = () => {
const { i18n} = this.props; const { i18n} = this.props;
return( return(
<Select <Select
size = 'small' size = 'small'
value = {i18n.resolvedLanguage.substring(0,2)} value = {i18n.resolvedLanguage.substring(0,2)}
inputProps={{ inputProps={{
style: {textAlign:"center"} style: {textAlign:"center"}
}} }}
onChange={this.handleChangeLang}> onChange={this.handleChangeLang}>
<MenuItem value={'en'}>EN</MenuItem> <MenuItem value={'en'}>EN</MenuItem>
<MenuItem value={'es'}>ES</MenuItem> <MenuItem value={'es'}>ES</MenuItem>
<MenuItem disabled={true} value={'de'}>DE</MenuItem> <MenuItem disabled={true} value={'de'}>DE</MenuItem>
@ -613,7 +599,7 @@ bottomBarDesktop =()=>{
</Select> </Select>
) )
} }
handleClickOpenExchangeSummary = () => { handleClickOpenExchangeSummary = () => {
this.getInfo(); this.getInfo();
this.setState({openExchangeSummary: true}); this.setState({openExchangeSummary: true});
@ -638,10 +624,10 @@ bottomBarDesktop =()=>{
<ListItemIcon size="small"> <ListItemIcon size="small">
<InventoryIcon/> <InventoryIcon/>
</ListItemIcon> </ListItemIcon>
<ListItemText <ListItemText
primaryTypographyProps={{fontSize: '14px'}} primaryTypographyProps={{fontSize: '14px'}}
secondaryTypographyProps={{fontSize: '12px'}} secondaryTypographyProps={{fontSize: '12px'}}
primary={this.state.num_public_buy_orders} primary={this.state.num_public_buy_orders}
secondary={t("Public buy orders")} /> secondary={t("Public buy orders")} />
</ListItem> </ListItem>
<Divider/> <Divider/>
@ -650,10 +636,10 @@ bottomBarDesktop =()=>{
<ListItemIcon size="small"> <ListItemIcon size="small">
<SellIcon/> <SellIcon/>
</ListItemIcon> </ListItemIcon>
<ListItemText <ListItemText
primaryTypographyProps={{fontSize: '14px'}} primaryTypographyProps={{fontSize: '14px'}}
secondaryTypographyProps={{fontSize: '12px'}} secondaryTypographyProps={{fontSize: '12px'}}
primary={this.state.num_public_sell_orders} primary={this.state.num_public_sell_orders}
secondary={t("Public sell orders")} /> secondary={t("Public sell orders")} />
</ListItem> </ListItem>
<Divider/> <Divider/>
@ -662,10 +648,10 @@ bottomBarDesktop =()=>{
<ListItemIcon size="small"> <ListItemIcon size="small">
<BookIcon/> <BookIcon/>
</ListItemIcon> </ListItemIcon>
<ListItemText <ListItemText
primaryTypographyProps={{fontSize: '14px'}} primaryTypographyProps={{fontSize: '14px'}}
secondaryTypographyProps={{fontSize: '12px'}} secondaryTypographyProps={{fontSize: '12px'}}
primary={pn(this.state.book_liquidity)+" Sats"} primary={pn(this.state.book_liquidity)+" Sats"}
secondary={t("Book liquidity")}/> secondary={t("Book liquidity")}/>
</ListItem> </ListItem>
<Divider/> <Divider/>
@ -674,10 +660,10 @@ bottomBarDesktop =()=>{
<ListItemIcon size="small"> <ListItemIcon size="small">
<SmartToyIcon/> <SmartToyIcon/>
</ListItemIcon> </ListItemIcon>
<ListItemText <ListItemText
primaryTypographyProps={{fontSize: '14px'}} primaryTypographyProps={{fontSize: '14px'}}
secondaryTypographyProps={{fontSize: '12px'}} secondaryTypographyProps={{fontSize: '12px'}}
primary={this.state.active_robots_today} primary={this.state.active_robots_today}
secondary={t("Today active robots")} /> secondary={t("Today active robots")} />
</ListItem> </ListItem>
<Divider/> <Divider/>
@ -686,10 +672,10 @@ bottomBarDesktop =()=>{
<ListItemIcon size="small"> <ListItemIcon size="small">
<PriceChangeIcon/> <PriceChangeIcon/>
</ListItemIcon> </ListItemIcon>
<ListItemText <ListItemText
primaryTypographyProps={{fontSize: '14px'}} primaryTypographyProps={{fontSize: '14px'}}
secondaryTypographyProps={{fontSize: '12px'}} secondaryTypographyProps={{fontSize: '12px'}}
primary={this.state.last_day_nonkyc_btc_premium+"%"} primary={this.state.last_day_nonkyc_btc_premium+"%"}
secondary={t("24h non-KYC bitcoin premium")} /> secondary={t("24h non-KYC bitcoin premium")} />
</ListItem> </ListItem>
<Divider/> <Divider/>
@ -700,17 +686,17 @@ bottomBarDesktop =()=>{
</ListItemIcon> </ListItemIcon>
<Grid container xs={12}> <Grid container xs={12}>
<Grid item xs={6}> <Grid item xs={6}>
<ListItemText <ListItemText
primaryTypographyProps={{fontSize: '14px'}} primaryTypographyProps={{fontSize: '14px'}}
secondaryTypographyProps={{fontSize: '12px'}} secondaryTypographyProps={{fontSize: '12px'}}
secondary={t("Maker fee")}> secondary={t("Maker fee")}>
{(this.state.maker_fee*100).toFixed(3)}% {(this.state.maker_fee*100).toFixed(3)}%
</ListItemText> </ListItemText>
</Grid> </Grid>
<Grid item xs={6}> <Grid item xs={6}>
<ListItemText <ListItemText
primaryTypographyProps={{fontSize: '14px'}} primaryTypographyProps={{fontSize: '14px'}}
secondaryTypographyProps={{fontSize: '12px'}} secondaryTypographyProps={{fontSize: '12px'}}
secondary={t("Taker fee")}> secondary={t("Taker fee")}>
{(this.state.taker_fee*100).toFixed(3)}% {(this.state.taker_fee*100).toFixed(3)}%
</ListItemText> </ListItemText>
@ -718,7 +704,7 @@ bottomBarDesktop =()=>{
</Grid> </Grid>
</ListItem> </ListItem>
</List> </List>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
) )
@ -742,12 +728,12 @@ bottomBarPhone =()=>{
<IconButton onClick={this.handleClickOpenProfile} sx={{margin: 0, bottom: 17, right: 8}} > <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"> <Badge badgeContent={(this.state.active_order_id >0 & !this.state.profileShown) ? "": null} color="primary">
<Avatar className='phoneFlippedSmallAvatar' <Avatar className='phoneFlippedSmallAvatar'
sx={{ width: 55, height:55 }} sx={{ width: 55, height:55 }}
alt={this.props.nickname} alt={this.props.nickname}
imgProps={{ imgProps={{
onLoad:() => this.props.setAppState({avatarLoaded: true}), onLoad:() => this.props.setAppState({avatarLoaded: true}),
}} }}
src={this.props.nickname ? window.location.origin +'/static/assets/avatars/' + this.props.nickname + '.png' : null} src={this.props.nickname ? window.location.origin +'/static/assets/avatars/' + this.props.nickname + '.png' : null}
/> />
</Badge> </Badge>
</IconButton> </IconButton>
@ -757,13 +743,13 @@ bottomBarPhone =()=>{
</Grid> </Grid>
<Grid item xs={1.6} align="center"> <Grid item xs={1.6} align="center">
<Tooltip enterTouchDelay="300" title={t("Number of public BUY orders")}> <Tooltip enterTouchDelay="300" title={t("Number of public BUY orders")}>
<IconButton onClick={this.handleClickOpenExchangeSummary} > <IconButton onClick={this.handleClickOpenExchangeSummary} >
<Badge badgeContent={this.state.num_public_buy_orders} color="action"> <Badge badgeContent={this.state.num_public_buy_orders} color="action">
<InventoryIcon /> <InventoryIcon />
</Badge> </Badge>
</IconButton> </IconButton>
</Tooltip> </Tooltip>
</Grid> </Grid>
<Grid item xs={1.6} align="center"> <Grid item xs={1.6} align="center">
@ -787,7 +773,7 @@ bottomBarPhone =()=>{
</Grid> </Grid>
<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 onClick={this.handleClickOpenExchangeSummary} > <IconButton onClick={this.handleClickOpenExchangeSummary} >
<Badge badgeContent={this.state.last_day_nonkyc_btc_premium+"%"} color="action"> <Badge badgeContent={this.state.last_day_nonkyc_btc_premium+"%"} color="action">
<PriceChangeIcon /> <PriceChangeIcon />
@ -802,9 +788,9 @@ bottomBarPhone =()=>{
</Grid> </Grid>
<Grid item xs={3}> <Grid item xs={3}>
<Tooltip enterTouchDelay="250" title={t("Show community and support links")}> <Tooltip enterTouchDelay="250" title={t("Show community and support links")}>
<IconButton <IconButton
color="primary" color="primary"
aria-label="Community" aria-label="Community"
onClick={this.handleClickOpenCommunity} > onClick={this.handleClickOpenCommunity} >
<PeopleIcon /> <PeopleIcon />
</IconButton> </IconButton>
@ -812,8 +798,8 @@ bottomBarPhone =()=>{
</Grid> </Grid>
<Grid item xs={3}> <Grid item xs={3}>
<Tooltip enterTouchDelay="250" title={t("Show stats for nerds")}> <Tooltip enterTouchDelay="250" title={t("Show stats for nerds")}>
<IconButton color="primary" <IconButton color="primary"
aria-label="Stats for Nerds" aria-label="Stats for Nerds"
onClick={this.handleClickOpenStatsForNerds} > onClick={this.handleClickOpenStatsForNerds} >
<SettingsIcon /> <SettingsIcon />
</IconButton> </IconButton>
@ -840,4 +826,4 @@ bottomBarPhone =()=>{
) )
} }
} }
export default withTranslation()(BottomBar); export default withTranslation()(BottomBar);

143
frontend/src/components/MakerPage.js
View File

@ -14,22 +14,7 @@ import LockIcon from '@mui/icons-material/Lock';
import HourglassTopIcon from '@mui/icons-material/HourglassTop'; import HourglassTopIcon from '@mui/icons-material/HourglassTop';
import currencyDict from '../../static/assets/currencies.json'; import currencyDict from '../../static/assets/currencies.json';
function getCookie(name) { import { getCookie } from "../utils/cookies";
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;
}
const csrftoken = getCookie('csrftoken');
// pretty numbers // pretty numbers
function pn(x) { function pn(x) {
@ -38,7 +23,7 @@ function pn(x) {
} }
var parts = x.toString().split("."); var parts = x.toString().split(".");
parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ","); parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
return parts.join("."); return parts.join(".");
} }
class MakerPage extends Component { class MakerPage extends Component {
@ -55,7 +40,7 @@ class MakerPage extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state={ this.state={
is_explicit: false, is_explicit: false,
type: 0, type: 0,
currency: this.defaultCurrency, currency: this.defaultCurrency,
currencyCode: this.defaultCurrencyCode, currencyCode: this.defaultCurrencyCode,
@ -80,9 +65,9 @@ class MakerPage extends Component {
fetch('/api/limits/') fetch('/api/limits/')
.then((response) => response.json()) .then((response) => response.json())
.then((data) => this.setState({ .then((data) => this.setState({
limits:data, limits:data,
loadingLimits:false, loadingLimits:false,
minAmount: this.state.amount ? parseFloat((this.state.amount/2).toPrecision(2)) : parseFloat(Number(data[this.state.currency]['max_amount']*0.25).toPrecision(2)), minAmount: this.state.amount ? parseFloat((this.state.amount/2).toPrecision(2)) : parseFloat(Number(data[this.state.currency]['max_amount']*0.25).toPrecision(2)),
maxAmount: this.state.amount ? this.state.amount : parseFloat(Number(data[this.state.currency]['max_amount']*0.75).toPrecision(2)), maxAmount: this.state.amount ? this.state.amount : parseFloat(Number(data[this.state.currency]['max_amount']*0.75).toPrecision(2)),
})); }));
} }
@ -96,7 +81,7 @@ class MakerPage extends Component {
handleTypeChange=(e)=>{ handleTypeChange=(e)=>{
this.setState({ this.setState({
type: e.target.value, type: e.target.value,
}); });
} }
handleCurrencyChange=(e)=>{ handleCurrencyChange=(e)=>{
@ -106,24 +91,24 @@ class MakerPage extends Component {
}); });
if(this.state.enableAmountRange){ if(this.state.enableAmountRange){
this.setState({ this.setState({
minAmount: parseFloat(Number(this.state.limits[e.target.value]['max_amount']*0.25).toPrecision(2)), minAmount: parseFloat(Number(this.state.limits[e.target.value]['max_amount']*0.25).toPrecision(2)),
maxAmount: parseFloat(Number(this.state.limits[e.target.value]['max_amount']*0.75).toPrecision(2)), maxAmount: parseFloat(Number(this.state.limits[e.target.value]['max_amount']*0.75).toPrecision(2)),
}) })
} }
} }
handleAmountChange=(e)=>{ handleAmountChange=(e)=>{
this.setState({ this.setState({
amount: e.target.value, amount: e.target.value,
}); });
} }
handleMinAmountChange=(e)=>{ handleMinAmountChange=(e)=>{
this.setState({ this.setState({
minAmount: parseFloat(Number(e.target.value).toPrecision(e.target.value < 100 ? 2 : 3)), minAmount: parseFloat(Number(e.target.value).toPrecision(e.target.value < 100 ? 2 : 3)),
}); });
} }
handleMaxAmountChange=(e)=>{ handleMaxAmountChange=(e)=>{
this.setState({ this.setState({
maxAmount: parseFloat(Number(e.target.value).toPrecision(e.target.value < 100 ? 2 : 3)), maxAmount: parseFloat(Number(e.target.value).toPrecision(e.target.value < 100 ? 2 : 3)),
}); });
} }
@ -155,7 +140,7 @@ class MakerPage extends Component {
lowerValue = upperValue/maxRange lowerValue = upperValue/maxRange
} }
} }
this.setState({ this.setState({
minAmount: parseFloat(Number(lowerValue).toPrecision(lowerValue < 100 ? 2 : 3)), minAmount: parseFloat(Number(lowerValue).toPrecision(lowerValue < 100 ? 2 : 3)),
maxAmount: parseFloat(Number(upperValue).toPrecision(upperValue < 100 ? 2 : 3)), maxAmount: parseFloat(Number(upperValue).toPrecision(upperValue < 100 ? 2 : 3)),
@ -165,12 +150,12 @@ class MakerPage extends Component {
handlePaymentMethodChange=(value)=>{ handlePaymentMethodChange=(value)=>{
if (value.length > 50){ if (value.length > 50){
this.setState({ this.setState({
badPaymentMethod: true, badPaymentMethod: true,
}); });
}else{ }else{
this.setState({ this.setState({
payment_method: value.substring(0,53), payment_method: value.substring(0,53),
badPaymentMethod: value.length > 50, badPaymentMethod: value.length > 50,
}); });
} }
} }
@ -188,7 +173,7 @@ class MakerPage extends Component {
this.setState({ this.setState({
premium: e.target.value, premium: e.target.value,
badPremium: bad_premium, badPremium: bad_premium,
}); });
} }
@ -203,20 +188,20 @@ class MakerPage extends Component {
this.setState({ this.setState({
satoshis: e.target.value, satoshis: e.target.value,
badSatoshis: bad_sats, badSatoshis: bad_sats,
}); });
} }
handleClickRelative=(e)=>{ handleClickRelative=(e)=>{
this.setState({ this.setState({
is_explicit: false, is_explicit: false,
}); });
this.handlePremiumChange(); this.handlePremiumChange();
} }
handleClickExplicit=(e)=>{ handleClickExplicit=(e)=>{
if(!this.state.enableAmountRange){ if(!this.state.enableAmountRange){
this.setState({ this.setState({
is_explicit: true, is_explicit: true,
}); });
this.handleSatoshisChange(); this.handleSatoshisChange();
} }
@ -268,14 +253,14 @@ class MakerPage extends Component {
{t("Buy or Sell Bitcoin?")} {t("Buy or Sell Bitcoin?")}
</FormHelperText> </FormHelperText>
<RadioGroup row defaultValue="0" onChange={this.handleTypeChange}> <RadioGroup row defaultValue="0" onChange={this.handleTypeChange}>
<FormControlLabel <FormControlLabel
value="0" value="0"
control={<Radio color="primary"/>} control={<Radio color="primary"/>}
label={t("Buy")} label={t("Buy")}
labelPlacement="Top" labelPlacement="Top"
/> />
<FormControlLabel <FormControlLabel
value="1" value="1"
control={<Radio color="secondary"/>} control={<Radio color="secondary"/>}
label={t("Sell")} label={t("Sell")}
labelPlacement="Top" labelPlacement="Top"
@ -284,21 +269,21 @@ class MakerPage extends Component {
</FormControl> </FormControl>
</div> </div>
</Grid> </Grid>
<Grid containter xs={12} alignItems="stretch" style={{ display: "flex" }}> <Grid containter xs={12} alignItems="stretch" style={{ display: "flex" }}>
<div style={{maxWidth:150}}> <div style={{maxWidth:150}}>
<Tooltip placement="top" enterTouchDelay="500" enterDelay="700" enterNextDelay="2000" title={t("Amount of fiat to exchange for bitcoin")}> <Tooltip placement="top" enterTouchDelay="500" enterDelay="700" enterNextDelay="2000" title={t("Amount of fiat to exchange for bitcoin")}>
<TextField <TextField
disabled = {this.state.enableAmountRange} disabled = {this.state.enableAmountRange}
variant = {this.state.enableAmountRange ? 'filled' : 'outlined'} variant = {this.state.enableAmountRange ? 'filled' : 'outlined'}
error={this.state.amount <= 0 & this.state.amount != "" } error={this.state.amount <= 0 & this.state.amount != "" }
helperText={this.state.amount <= 0 & this.state.amount != "" ? t("Invalid") : null} helperText={this.state.amount <= 0 & this.state.amount != "" ? t("Invalid") : null}
label={t("Amount")} label={t("Amount")}
type="number" type="number"
required="true" required="true"
value={this.state.amount} value={this.state.amount}
inputProps={{ inputProps={{
min:0 , min:0 ,
style: {textAlign:"center"} style: {textAlign:"center"}
}} }}
onChange={this.handleAmountChange} onChange={this.handleAmountChange}
@ -308,8 +293,8 @@ class MakerPage extends Component {
<div > <div >
<Select <Select
sx={{width:'120px'}} sx={{width:'120px'}}
required="true" required="true"
defaultValue={this.defaultCurrency} defaultValue={this.defaultCurrency}
inputProps={{ inputProps={{
style: {textAlign:"center"} style: {textAlign:"center"}
}} }}
@ -345,8 +330,8 @@ class MakerPage extends Component {
</FormHelperText> </FormHelperText>
<RadioGroup row defaultValue="relative"> <RadioGroup row defaultValue="relative">
<Tooltip placement="top" enterTouchDelay="0" enterDelay="1000" enterNextDelay="2000" title={t("Let the price move with the market")}> <Tooltip placement="top" enterTouchDelay="0" enterDelay="1000" enterNextDelay="2000" title={t("Let the price move with the market")}>
<FormControlLabel <FormControlLabel
value="relative" value="relative"
control={<Radio color="primary"/>} control={<Radio color="primary"/>}
label={t("Relative")} label={t("Relative")}
labelPlacement="Top" labelPlacement="Top"
@ -355,8 +340,8 @@ class MakerPage extends Component {
</Tooltip> </Tooltip>
<Tooltip placement="top" enterTouchDelay="0" enterDelay="1000" enterNextDelay="2000" title={t("Set a fix amount of satoshis")}> <Tooltip placement="top" enterTouchDelay="0" enterDelay="1000" enterNextDelay="2000" title={t("Set a fix amount of satoshis")}>
<FormControlLabel <FormControlLabel
disabled={this.state.enableAmountRange} disabled={this.state.enableAmountRange}
value="explicit" value="explicit"
control={<Radio color="secondary"/>} control={<Radio color="secondary"/>}
label={t("Explicit")} label={t("Explicit")}
labelPlacement="Top" labelPlacement="Top"
@ -374,27 +359,27 @@ class MakerPage extends Component {
label={t("Satoshis")} label={t("Satoshis")}
error={this.state.badSatoshis} error={this.state.badSatoshis}
helperText={this.state.badSatoshis} helperText={this.state.badSatoshis}
type="number" type="number"
required="true" required="true"
value={this.state.satoshis} value={this.state.satoshis}
inputProps={{ inputProps={{
min:this.minTradeSats , min:this.minTradeSats ,
max:this.maxTradeSats , max:this.maxTradeSats ,
style: {textAlign:"center"} style: {textAlign:"center"}
}} }}
onChange={this.handleSatoshisChange} onChange={this.handleSatoshisChange}
/> />
</div> </div>
<div style={{display: this.state.is_explicit ? 'none':''}}> <div style={{display: this.state.is_explicit ? 'none':''}}>
<TextField <TextField
sx={{width:240}} sx={{width:240}}
error={this.state.badPremium} error={this.state.badPremium}
helperText={this.state.badPremium} helperText={this.state.badPremium}
label={t("Premium over Market (%)")} label={t("Premium over Market (%)")}
type="number" type="number"
inputProps={{ inputProps={{
min: -100, min: -100,
max: 999, max: 999,
style: {textAlign:"center"} style: {textAlign:"center"}
}} }}
onChange={this.handlePremiumChange} onChange={this.handlePremiumChange}
@ -409,16 +394,16 @@ class MakerPage extends Component {
let d = new Date(date), let d = new Date(date),
hours = d.getHours(), hours = d.getHours(),
minutes = d.getMinutes(); minutes = d.getMinutes();
var total_secs = hours*60*60 + minutes * 60; var total_secs = hours*60*60 + minutes * 60;
this.setState({ this.setState({
changedPublicExpiryTime: true, changedPublicExpiryTime: true,
publicExpiryTime: date, publicExpiryTime: date,
publicDuration: total_secs, publicDuration: total_secs,
badDuration: false, badDuration: false,
}); });
} }
getMaxAmount = () => { getMaxAmount = () => {
@ -470,7 +455,7 @@ class MakerPage extends Component {
height: 3, height: 3,
}, },
})); }));
RangeThumbComponent(props) { RangeThumbComponent(props) {
const { children, ...other } = props; const { children, ...other } = props;
return ( return (
@ -497,7 +482,7 @@ class MakerPage extends Component {
<span style={{width: 40}}>{t("From")}</span> <span style={{width: 40}}>{t("From")}</span>
<TextField <TextField
variant="standard" variant="standard"
type="number" type="number"
size="small" size="small"
value={this.state.minAmount} value={this.state.minAmount}
onChange={this.handleMinAmountChange} onChange={this.handleMinAmountChange}
@ -508,7 +493,7 @@ class MakerPage extends Component {
<TextField <TextField
variant="standard" variant="standard"
size="small" size="small"
type="number" type="number"
value={this.state.maxAmount} value={this.state.maxAmount}
error={this.maxAmountError()} error={this.maxAmountError()}
onChange={this.handleMaxAmountChange} onChange={this.handleMaxAmountChange}
@ -524,7 +509,7 @@ class MakerPage extends Component {
const { t } = this.props; const { t } = this.props;
return( return(
<Paper elevation={12} style={{ padding: 8, width:'280px', align:'center'}}> <Paper elevation={12} style={{ padding: 8, width:'280px', align:'center'}}>
<Grid container xs={12} spacing={1}> <Grid container xs={12} spacing={1}>
<Grid item xs={12} align="center" spacing={1}> <Grid item xs={12} align="center" spacing={1}>
@ -653,7 +638,7 @@ class MakerPage extends Component {
<Tab label={t("Customize")} {...this.a11yProps(1)} /> <Tab label={t("Customize")} {...this.a11yProps(1)} />
</Tabs> </Tabs>
</Box> </Box>
<Grid item xs={12} align="center" spacing={1}> <Grid item xs={12} align="center" spacing={1}>
<div style={{ display: this.state.showAdvanced == false ? '':'none'}}> <div style={{ display: this.state.showAdvanced == false ? '':'none'}}>
<this.StandardMakerOptions/> <this.StandardMakerOptions/>
@ -680,10 +665,10 @@ class MakerPage extends Component {
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
{/* conditions to disable the make button */} {/* conditions to disable the make button */}
{(this.state.amount == null & (this.state.enableAmountRange == false || this.state.loadingLimits) || {(this.state.amount == null & (this.state.enableAmountRange == false || this.state.loadingLimits) ||
this.state.enableAmountRange & (this.minAmountError() || this.maxAmountError()) || this.state.enableAmountRange & (this.minAmountError() || this.maxAmountError()) ||
this.state.amount <= 0 & !this.state.enableAmountRange || this.state.amount <= 0 & !this.state.enableAmountRange ||
(this.state.is_explicit & (this.state.badSatoshis != null || this.state.satoshis == null)) || (this.state.is_explicit & (this.state.badSatoshis != null || this.state.satoshis == null)) ||
(!this.state.is_explicit & this.state.badPremium != null)) (!this.state.is_explicit & this.state.badPremium != null))
? ?
<Tooltip enterTouchDelay="0" title={t("You must fill the order correctly")}> <Tooltip enterTouchDelay="0" title={t("You must fill the order correctly")}>
@ -691,8 +676,8 @@ class MakerPage extends Component {
</Tooltip> </Tooltip>
: :
<Button color="primary" variant="contained" onClick={this.handleCreateOfferButtonPressed}>{t("Create Order")}</Button> <Button color="primary" variant="contained" onClick={this.handleCreateOfferButtonPressed}>{t("Create Order")}</Button>
} }
</Grid> </Grid>
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
{this.state.badRequest ? {this.state.badRequest ?
@ -702,21 +687,21 @@ class MakerPage extends Component {
: ""} : ""}
<Typography component="subtitle2" variant="subtitle2"> <Typography component="subtitle2" variant="subtitle2">
<div align='center'> <div align='center'>
{this.state.type==0 ? {this.state.type==0 ?
t("Create a BTC buy order for ") t("Create a BTC buy order for ")
: :
t("Create a BTC sell order for ") t("Create a BTC sell order for ")
} }
{this.state.enableAmountRange & this.state.minAmount != null? {this.state.enableAmountRange & this.state.minAmount != null?
this.state.minAmount+"-"+this.state.maxAmount this.state.minAmount+"-"+this.state.maxAmount
: :
pn(this.state.amount)} pn(this.state.amount)}
{" " + this.state.currencyCode} {" " + this.state.currencyCode}
{this.state.is_explicit ? {this.state.is_explicit ?
t(" of {{satoshis}} Satoshis",{satoshis: pn(this.state.satoshis)}) t(" of {{satoshis}} Satoshis",{satoshis: pn(this.state.satoshis)})
: :
(this.state.premium == 0 ? t(" at market price") : (this.state.premium == 0 ? t(" at market price") :
(this.state.premium > 0 ? (this.state.premium > 0 ?
t(" at a {{premium}}% premium", {premium: this.state.premium}) t(" at a {{premium}}% premium", {premium: this.state.premium})
: :
t(" at a {{discount}}% discount", {discount: -this.state.premium})) t(" at a {{discount}}% discount", {discount: -this.state.premium}))
@ -735,4 +720,4 @@ class MakerPage extends Component {
} }
} }
export default withTranslation()(MakerPage); export default withTranslation()(MakerPage);

109
frontend/src/components/OrderPage.js
View File

@ -17,22 +17,7 @@ import PaymentsIcon from '@mui/icons-material/Payments';
import ArticleIcon from '@mui/icons-material/Article'; import ArticleIcon from '@mui/icons-material/Article';
import { t } from "i18next"; import { t } from "i18next";
function getCookie(name) { import { getCookie } from "../utils/cookies";
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;
}
const csrftoken = getCookie('csrftoken');
// pretty numbers // pretty numbers
function pn(x) { function pn(x) {
@ -126,7 +111,7 @@ class OrderPage extends Component {
this.getOrderDetails(); this.getOrderDetails();
} }
// Countdown Renderer callback with condition // Countdown Renderer callback with condition
countdownRenderer = ({ total, hours, minutes, seconds, completed }) => { countdownRenderer = ({ total, hours, minutes, seconds, completed }) => {
const { t } = this.props; const { t } = this.props;
if (completed) { if (completed) {
@ -148,20 +133,20 @@ class OrderPage extends Component {
} }
}; };
// Countdown Renderer callback with condition // Countdown Renderer callback with condition
countdownPenaltyRenderer = ({ minutes, seconds, completed }) => { countdownPenaltyRenderer = ({ minutes, seconds, completed }) => {
const { t } = this.props; const { t } = this.props;
if (completed) { if (completed) {
// Render a completed state // Render a completed state
return (<span> {t("Penalty lifted, good to go!")}</span>); return (<span> {t("Penalty lifted, good to go!")}</span>);
} else { } else {
return ( return (
<span> {t("You cannot take an order yet! Wait {{timeMin}}m {{timeSec}}s",{timeMin: zeroPad(minutes), timeSec: zeroPad(seconds) })} </span> <span> {t("You cannot take an order yet! Wait {{timeMin}}m {{timeSec}}s",{timeMin: zeroPad(minutes), timeSec: zeroPad(seconds) })} </span>
); );
} }
}; };
handleTakeAmountChange = (e) => { handleTakeAmountChange = (e) => {
if (e.target.value != "" & e.target.value != null){ if (e.target.value != "" & e.target.value != null){
this.setState({takeAmount: parseFloat(e.target.value)}) this.setState({takeAmount: parseFloat(e.target.value)})
@ -191,16 +176,16 @@ class OrderPage extends Component {
<Tooltip placement="top" enterTouchDelay="500" enterDelay="700" enterNextDelay="2000" title={t("Enter amount of fiat to exchange for bitcoin")}> <Tooltip placement="top" enterTouchDelay="500" enterDelay="700" enterNextDelay="2000" title={t("Enter amount of fiat to exchange for bitcoin")}>
<Paper elevation={5} sx={{maxHeight:40}}> <Paper elevation={5} sx={{maxHeight:40}}>
<TextField <TextField
error={(this.state.takeAmount < this.state.min_amount || this.state.takeAmount > this.state.max_amount) & this.state.takeAmount != "" } error={(this.state.takeAmount < this.state.min_amount || this.state.takeAmount > this.state.max_amount) & this.state.takeAmount != "" }
helperText={this.amountHelperText()} helperText={this.amountHelperText()}
label={t("Amount {{currencyCode}}", {currencyCode: this.state.currencyCode})} label={t("Amount {{currencyCode}}", {currencyCode: this.state.currencyCode})}
size="small" size="small"
type="number" type="number"
required="true" required="true"
value={this.state.takeAmount} value={this.state.takeAmount}
inputProps={{ inputProps={{
min:this.state.min_amount , min:this.state.min_amount ,
max:this.state.max_amount , max:this.state.max_amount ,
style: {textAlign:"center"} style: {textAlign:"center"}
}} }}
onChange={this.handleTakeAmountChange} onChange={this.handleTakeAmountChange}
@ -211,7 +196,7 @@ class OrderPage extends Component {
<div style={{height:38, top:'1px', position:'relative', display: (this.state.takeAmount < this.state.min_amount || this.state.takeAmount > this.state.max_amount || this.state.takeAmount == "" || this.state.takeAmount == null) ? '':'none'}}> <div style={{height:38, top:'1px', position:'relative', display: (this.state.takeAmount < this.state.min_amount || this.state.takeAmount > this.state.max_amount || this.state.takeAmount == "" || this.state.takeAmount == null) ? '':'none'}}>
<Tooltip placement="top" enterTouchDelay="0" enterDelay="500" enterNextDelay="1200" title={t("You must specify an amount first")}> <Tooltip placement="top" enterTouchDelay="0" enterDelay="500" enterNextDelay="1200" title={t("You must specify an amount first")}>
<Paper elevation={4}> <Paper elevation={4}>
<Button sx={{height:38}} variant='contained' color='primary' <Button sx={{height:38}} variant='contained' color='primary'
disabled={true}> disabled={true}>
{t("Take Order")} {t("Take Order")}
</Button> </Button>
@ -220,7 +205,7 @@ class OrderPage extends Component {
</div> </div>
<div style={{height:38, top:'1px', position:'relative', display: (this.state.takeAmount < this.state.min_amount || this.state.takeAmount > this.state.max_amount || this.state.takeAmount == "" || this.state.takeAmount == null) ? 'none':''}}> <div style={{height:38, top:'1px', position:'relative', display: (this.state.takeAmount < this.state.min_amount || this.state.takeAmount > this.state.max_amount || this.state.takeAmount == "" || this.state.takeAmount == null) ? 'none':''}}>
<Paper elevation={4}> <Paper elevation={4}>
<Button sx={{height:38}} variant='contained' color='primary' <Button sx={{height:38}} variant='contained' color='primary'
onClick={this.state.maker_status=='Inactive' ? this.handleClickOpenInactiveMakerDialog : this.takeOrder}> onClick={this.state.maker_status=='Inactive' ? this.handleClickOpenInactiveMakerDialog : this.takeOrder}>
{t("Take Order")} {t("Take Order")}
</Button> </Button>
@ -232,7 +217,7 @@ class OrderPage extends Component {
return( return(
<> <>
<this.InactiveMakerDialog/> <this.InactiveMakerDialog/>
<Button variant='contained' color='primary' <Button variant='contained' color='primary'
onClick={this.state.maker_status=='Inactive' ? this.handleClickOpenInactiveMakerDialog : this.takeOrder}> onClick={this.state.maker_status=='Inactive' ? this.handleClickOpenInactiveMakerDialog : this.takeOrder}>
{t("Take Order")} {t("Take Order")}
</Button> </Button>
@ -256,7 +241,7 @@ class OrderPage extends Component {
LinearDeterminate =()=> { LinearDeterminate =()=> {
const [progress, setProgress] = React.useState(0); const [progress, setProgress] = React.useState(0);
React.useEffect(() => { React.useEffect(() => {
const timer = setInterval(() => { const timer = setInterval(() => {
setProgress((oldProgress) => { setProgress((oldProgress) => {
@ -264,12 +249,12 @@ class OrderPage extends Component {
return (left / this.state.total_secs_exp) * 100; return (left / this.state.total_secs_exp) * 100;
}); });
}, 1000); }, 1000);
return () => { return () => {
clearInterval(timer); clearInterval(timer);
}; };
}, []); }, []);
return ( return (
<Box sx={{ width: '100%' }}> <Box sx={{ width: '100%' }}>
<LinearProgress variant="determinate" value={progress} /> <LinearProgress variant="determinate" value={progress} />
@ -291,14 +276,14 @@ class OrderPage extends Component {
.then((response) => response.json()) .then((response) => response.json())
.then((data) => this.completeSetState(data)); .then((data) => this.completeSetState(data));
} }
// set delay to the one matching the order status. If null order status, delay goes to 9999999. // set delay to the one matching the order status. If null order status, delay goes to 9999999.
setDelay = (status)=>{ setDelay = (status)=>{
return status >= 0 ? this.statusToDelay[status.toString()] : 99999999; return status >= 0 ? this.statusToDelay[status.toString()] : 99999999;
} }
getCurrencyCode(val){ getCurrencyCode(val){
let code = val ? currencyDict[val.toString()] : "" let code = val ? currencyDict[val.toString()] : ""
return code return code
} }
@ -441,7 +426,7 @@ class OrderPage extends Component {
CancelButton = () => { CancelButton = () => {
const { t } = this.props; const { t } = this.props;
// If maker and Waiting for Bond. Or if taker and Waiting for bond. // If maker and Waiting for Bond. Or if taker and Waiting for bond.
// Simply allow to cancel without showing the cancel dialog. // Simply allow to cancel without showing the cancel dialog.
if ((this.state.is_maker & [0,1].includes(this.state.status)) || this.state.is_taker & this.state.status == 3){ if ((this.state.is_maker & [0,1].includes(this.state.status)) || this.state.is_taker & this.state.status == 3){
return( return(
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
@ -459,9 +444,9 @@ class OrderPage extends Component {
</Grid> </Grid>
</div> </div>
)} )}
// If the escrow is Locked, show the collaborative cancel button. // If the escrow is Locked, show the collaborative cancel button.
if ([8,9].includes(this.state.status)){ if ([8,9].includes(this.state.status)){
return( return(
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
@ -498,8 +483,8 @@ class OrderPage extends Component {
<Tooltip placement="top" enterTouchDelay="0" title={t(this.state.maker_status)} > <Tooltip placement="top" enterTouchDelay="0" title={t(this.state.maker_status)} >
<Badge variant="dot" overlap="circular" badgeContent="" color={this.statusBadgeColor(this.state.maker_status)}> <Badge variant="dot" overlap="circular" badgeContent="" color={this.statusBadgeColor(this.state.maker_status)}>
<Avatar className="flippedSmallAvatar" <Avatar className="flippedSmallAvatar"
alt={this.state.maker_nick} alt={this.state.maker_nick}
src={window.location.origin +'/static/assets/avatars/' + this.state.maker_nick + '.png'} src={window.location.origin +'/static/assets/avatars/' + this.state.maker_nick + '.png'}
/> />
</Badge> </Badge>
</Tooltip> </Tooltip>
@ -514,18 +499,18 @@ class OrderPage extends Component {
<Divider /> <Divider />
<ListItem align="left"> <ListItem align="left">
<ListItemText primary={this.state.taker_nick + (this.state.type ? " "+t("(Buyer)") : " "+t("(Seller)"))} secondary={t("Order taker")}/> <ListItemText primary={this.state.taker_nick + (this.state.type ? " "+t("(Buyer)") : " "+t("(Seller)"))} secondary={t("Order taker")}/>
<ListItemAvatar > <ListItemAvatar >
<Tooltip enterTouchDelay="0" title={t(this.state.taker_status)} > <Tooltip enterTouchDelay="0" title={t(this.state.taker_status)} >
<Badge variant="dot" overlap="circular" badgeContent="" color={this.statusBadgeColor(this.state.taker_status)}> <Badge variant="dot" overlap="circular" badgeContent="" color={this.statusBadgeColor(this.state.taker_status)}>
<Avatar className="smallAvatar" <Avatar className="smallAvatar"
alt={this.state.taker_nick} alt={this.state.taker_nick}
src={window.location.origin +'/static/assets/avatars/' + this.state.taker_nick + '.png'} src={window.location.origin +'/static/assets/avatars/' + this.state.taker_nick + '.png'}
/> />
</Badge> </Badge>
</Tooltip> </Tooltip>
</ListItemAvatar> </ListItemAvatar>
</ListItem> </ListItem>
</>: </>:
"" ""
} }
<Divider><Chip label={t("Order Details")}/></Divider> <Divider><Chip label={t("Order Details")}/></Divider>
@ -539,7 +524,7 @@ class OrderPage extends Component {
</> </>
:<Divider><Chip label={t("Order Details")}/></Divider> :<Divider><Chip label={t("Order Details")}/></Divider>
} }
<ListItem> <ListItem>
<ListItemIcon> <ListItemIcon>
<div style={{zoom:1.25,opacity: 0.7, '-ms-zoom': 1.25, '-webkit-zoom': 1.25,'-moz-transform': 'scale(1.25,1.25)', '-moz-transform-origin': 'left center'}}> <div style={{zoom:1.25,opacity: 0.7, '-ms-zoom': 1.25, '-webkit-zoom': 1.25,'-moz-transform': 'scale(1.25,1.25)', '-moz-transform-origin': 'left center'}}>
@ -570,15 +555,15 @@ class OrderPage extends Component {
<ListItemIcon> <ListItemIcon>
<PriceChangeIcon/> <PriceChangeIcon/>
</ListItemIcon> </ListItemIcon>
{this.state.price_now? {this.state.price_now?
<ListItemText primary={t("{{price}} {{currencyCode}}/BTC - Premium: {{premium}}%", {price: pn(this.state.price_now), currencyCode:this.state.currencyCode, premium: this.state.premium_now})} secondary={t("Price and Premium")}/> <ListItemText primary={t("{{price}} {{currencyCode}}/BTC - Premium: {{premium}}%", {price: pn(this.state.price_now), currencyCode:this.state.currencyCode, premium: this.state.premium_now})} secondary={t("Price and Premium")}/>
: :
(this.state.is_explicit ? (this.state.is_explicit ?
<ListItemText primary={pn(this.state.satoshis)} secondary={t("Amount of Satoshis")}/> <ListItemText primary={pn(this.state.satoshis)} secondary={t("Amount of Satoshis")}/>
: :
<ListItemText primary={parseFloat(parseFloat(this.state.premium).toFixed(2))+"%"} secondary={t("Premium over market price")}/> <ListItemText primary={parseFloat(parseFloat(this.state.premium).toFixed(2))+"%"} secondary={t("Premium over market price")}/>
) )
} }
</ListItem> </ListItem>
<Divider /> <Divider />
@ -599,53 +584,53 @@ class OrderPage extends Component {
</ListItem> </ListItem>
<this.LinearDeterminate /> <this.LinearDeterminate />
</List> </List>
{/* If the user has a penalty/limit */} {/* If the user has a penalty/limit */}
{this.state.penalty ? {this.state.penalty ?
<> <>
<Divider /> <Divider />
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<Alert severity="warning" sx={{maxWidth:360}}> <Alert severity="warning" sx={{maxWidth:360}}>
<Countdown date={new Date(this.state.penalty)} renderer={this.countdownPenaltyRenderer} /> <Countdown date={new Date(this.state.penalty)} renderer={this.countdownPenaltyRenderer} />
</Alert> </Alert>
</Grid> </Grid>
</> </>
: null} : null}
{/* If the counterparty asked for collaborative cancel */} {/* If the counterparty asked for collaborative cancel */}
{this.state.pending_cancel ? {this.state.pending_cancel ?
<> <>
<Divider /> <Divider />
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<Alert severity="warning" sx={{maxWidth:360}}> <Alert severity="warning" sx={{maxWidth:360}}>
{t("{{nickname}} is asking for a collaborative cancel", {nickname: this.state.is_maker ? this.state.taker_nick : this.state.maker_nick})} {t("{{nickname}} is asking for a collaborative cancel", {nickname: this.state.is_maker ? this.state.taker_nick : this.state.maker_nick})}
</Alert> </Alert>
</Grid> </Grid>
</> </>
: null} : null}
{/* If the user has asked for a collaborative cancel */} {/* If the user has asked for a collaborative cancel */}
{this.state.asked_for_cancel ? {this.state.asked_for_cancel ?
<> <>
<Divider /> <Divider />
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<Alert severity="warning" sx={{maxWidth:360}}> <Alert severity="warning" sx={{maxWidth:360}}>
{t("You asked for a collaborative cancellation")} {t("You asked for a collaborative cancellation")}
</Alert> </Alert>
</Grid> </Grid>
</> </>
: null} : null}
</Paper> </Paper>
</Grid> </Grid>
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
{/* Participants can see the "Cancel" Button, but cannot see the "Back" or "Take Order" buttons */} {/* Participants can see the "Cancel" Button, but cannot see the "Back" or "Take Order" buttons */}
{this.state.is_participant ? {this.state.is_participant ?
<> <>
<this.CancelButton/> <this.CancelButton/>
<this.BackButton/> <this.BackButton/>
</> </>
: :
<Grid container spacing={1}> <Grid container spacing={1}>
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
@ -660,7 +645,7 @@ class OrderPage extends Component {
</Grid> </Grid>
) )
} }
doubleOrderPageDesktop=()=>{ doubleOrderPageDesktop=()=>{
return( return(
<Grid container xs={12} align="center" spacing={2} > <Grid container xs={12} align="center" spacing={2} >
@ -673,7 +658,7 @@ class OrderPage extends Component {
</Grid> </Grid>
) )
} }
a11yProps(index) { a11yProps(index) {
return { return {
id: `simple-tab-${index}`, id: `simple-tab-${index}`,
@ -724,7 +709,7 @@ class OrderPage extends Component {
<Button variant='contained' color='secondary' onClick={this.props.history.goBack}>{t("Back")}</Button> <Button variant='contained' color='secondary' onClick={this.props.history.goBack}>{t("Back")}</Button>
</div> </div>
: :
(this.state.is_participant ? (this.state.is_participant ?
<> <>
{/* Desktop View */} {/* Desktop View */}
<MediaQuery minWidth={920}> <MediaQuery minWidth={920}>
@ -744,11 +729,11 @@ class OrderPage extends Component {
} }
render (){ render (){
return ( return (
// Only so nothing shows while requesting the first batch of data // Only so nothing shows while requesting the first batch of data
this.state.loading ? <CircularProgress /> : this.orderDetailsPage() this.state.loading ? <CircularProgress /> : this.orderDetailsPage()
); );
} }
} }
export default withTranslation()(OrderPage); export default withTranslation()(OrderPage);

87
frontend/src/components/TradeBox.js
View File

@ -17,22 +17,7 @@ import LockOpenIcon from '@mui/icons-material/LockOpen';
import BalanceIcon from '@mui/icons-material/Balance'; import BalanceIcon from '@mui/icons-material/Balance';
import ContentCopy from "@mui/icons-material/ContentCopy"; import ContentCopy from "@mui/icons-material/ContentCopy";
function getCookie(name) { import { getCookie } from "../utils/cookies";
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;
}
const csrftoken = getCookie('csrftoken');
// pretty numbers // pretty numbers
function pn(x) { function pn(x) {
@ -54,7 +39,7 @@ class TradeBox extends Component {
} }
} }
Sound = ({soundFileName}) => ( Sound = ({soundFileName}) => (
// Four filenames: "locked-invoice", "taker-found", "open-chat", "successful" // Four filenames: "locked-invoice", "taker-found", "open-chat", "successful"
@ -209,7 +194,7 @@ class TradeBox extends Component {
{t("Lock {{amountSats}} Sats to PUBLISH order", {amountSats: pn(this.props.data.bond_satoshis)})} {t("Lock {{amountSats}} Sats to PUBLISH order", {amountSats: pn(this.props.data.bond_satoshis)})}
</b> {" " + this.stepXofY()} </b> {" " + this.stepXofY()}
</Typography> </Typography>
: :
<Typography color="primary" component="subtitle1" variant="subtitle1"> <Typography color="primary" component="subtitle1" variant="subtitle1">
<b> <b>
{t("Lock {{amountSats}} Sats to TAKE order", {amountSats: pn(this.props.data.bond_satoshis)})} {t("Lock {{amountSats}} Sats to TAKE order", {amountSats: pn(this.props.data.bond_satoshis)})}
@ -224,13 +209,13 @@ class TradeBox extends Component {
<Tooltip disableHoverListener enterTouchDelay="0" title={t("Copied!")}> <Tooltip disableHoverListener enterTouchDelay="0" title={t("Copied!")}>
<Button size="small" color="inherit" onClick={() => {navigator.clipboard.writeText(this.props.data.bond_invoice)}} align="center"> <ContentCopy/>{t("Copy to clipboard")}</Button> <Button size="small" color="inherit" onClick={() => {navigator.clipboard.writeText(this.props.data.bond_invoice)}} align="center"> <ContentCopy/>{t("Copy to clipboard")}</Button>
</Tooltip> </Tooltip>
</Grid> </Grid>
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<TextField <TextField
hiddenLabel hiddenLabel
variant="standard" variant="standard"
size="small" size="small"
defaultValue={this.props.data.bond_invoice} defaultValue={this.props.data.bond_invoice}
disabled="true" disabled="true"
helperText={t("This is a hold invoice, it will freeze in your wallet. It will be charged only if you cancel or lose a dispute.")} helperText={t("This is a hold invoice, it will freeze in your wallet. It will be charged only if you cancel or lose a dispute.")}
color = "secondary" color = "secondary"
@ -302,13 +287,13 @@ class TradeBox extends Component {
<Tooltip disableHoverListener enterTouchDelay="0" title={t("Copied!")}> <Tooltip disableHoverListener enterTouchDelay="0" title={t("Copied!")}>
<Button size="small" color="inherit" onClick={() => {navigator.clipboard.writeText(this.props.data.escrow_invoice)}} align="center"> <ContentCopy/>Copy to clipboard</Button> <Button size="small" color="inherit" onClick={() => {navigator.clipboard.writeText(this.props.data.escrow_invoice)}} align="center"> <ContentCopy/>Copy to clipboard</Button>
</Tooltip> </Tooltip>
</Grid> </Grid>
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<TextField <TextField
hiddenLabel hiddenLabel
variant="filled" variant="filled"
size="small" size="small"
defaultValue={this.props.data.escrow_invoice} defaultValue={this.props.data.escrow_invoice}
disabled="true" disabled="true"
helperText={t("This is a hold invoice, it will freeze in your wallet. It will be released to the buyer once you confirm to have received the {{currencyCode}}.",{currencyCode: this.props.data.currencyCode})} helperText={t("This is a hold invoice, it will freeze in your wallet. It will be released to the buyer once you confirm to have received the {{currencyCode}}.",{currencyCode: this.props.data.currencyCode})}
color = "secondary" color = "secondary"
@ -397,7 +382,7 @@ class TradeBox extends Component {
<ListItem> <ListItem>
<Typography component="body2" variant="body2" align="left"> <Typography component="body2" variant="body2" align="left">
<p>{t("Be patient while robots check the book. It might take some time. This box will ring 🔊 once a robot takes your order.")} </p> <p>{t("Be patient while robots check the book. It might take some time. This box will ring 🔊 once a robot takes your order.")} </p>
<p>{t("Please note that if your premium is excessive or your currency or payment methods are not popular, your order might expire untaken. Your bond will return to you (no action needed).")}</p> <p>{t("Please note that if your premium is excessive or your currency or payment methods are not popular, your order might expire untaken. Your bond will return to you (no action needed).")}</p>
</Typography> </Typography>
</ListItem> </ListItem>
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
@ -416,13 +401,13 @@ class TradeBox extends Component {
</ListItemIcon> </ListItemIcon>
<ListItemText primary={this.props.data.num_similar_orders} secondary={t("Public orders for {{currencyCode}}",{currencyCode: this.props.data.currencyCode})}/> <ListItemText primary={this.props.data.num_similar_orders} secondary={t("Public orders for {{currencyCode}}",{currencyCode: this.props.data.currencyCode})}/>
</ListItem> </ListItem>
<Divider/> <Divider/>
<ListItem> <ListItem>
<ListItemIcon> <ListItemIcon>
<PercentIcon/> <PercentIcon/>
</ListItemIcon> </ListItemIcon>
<ListItemText primary={t("Premium rank") +" "+this.props.data.premium_percentile*100+"%"} <ListItemText primary={t("Premium rank") +" "+this.props.data.premium_percentile*100+"%"}
secondary={t("Among public {{currencyCode}} orders (higher is cheaper)",{ currencyCode: this.props.data.currencyCode })}/> secondary={t("Among public {{currencyCode}} orders (higher is cheaper)",{ currencyCode: this.props.data.currencyCode })}/>
</ListItem> </ListItem>
<Divider/> <Divider/>
@ -437,7 +422,7 @@ class TradeBox extends Component {
handleInputInvoiceChanged=(e)=>{ handleInputInvoiceChanged=(e)=>{
this.setState({ this.setState({
invoice: e.target.value, invoice: e.target.value,
badInvoice: false, badInvoice: false,
}); });
} }
@ -461,7 +446,7 @@ class TradeBox extends Component {
handleInputDisputeChanged=(e)=>{ handleInputDisputeChanged=(e)=>{
this.setState({ this.setState({
statement: e.target.value, statement: e.target.value,
badStatement: false, badStatement: false,
}); });
} }
@ -512,17 +497,17 @@ class TradeBox extends Component {
</Grid> </Grid>
<Grid item xs={12} align="left"> <Grid item xs={12} align="left">
<Typography component="body2" variant="body2"> <Typography component="body2" variant="body2">
{t("The taker is committed! Before letting you send {{amountFiat}} {{currencyCode}}, we want to make sure you are able to receive the BTC. Please provide a valid invoice for {{amountSats}} Satoshis.", {t("The taker is committed! Before letting you send {{amountFiat}} {{currencyCode}}, we want to make sure you are able to receive the BTC. Please provide a valid invoice for {{amountSats}} Satoshis.",
{amountFiat: parseFloat(parseFloat(this.props.data.amount).toFixed(4)), {amountFiat: parseFloat(parseFloat(this.props.data.amount).toFixed(4)),
currencyCode: this.props.data.currencyCode, currencyCode: this.props.data.currencyCode,
amountSats: pn(this.props.data.invoice_amount)} amountSats: pn(this.props.data.invoice_amount)}
) )
} }
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<TextField <TextField
error={this.state.badInvoice} error={this.state.badInvoice}
helperText={this.state.badInvoice ? this.state.badInvoice : "" } helperText={this.state.badInvoice ? this.state.badInvoice : "" }
label={t("Payout Lightning Invoice")} label={t("Payout Lightning Invoice")}
@ -580,9 +565,9 @@ class TradeBox extends Component {
) )
}else{ }else{
return ( return (
// TODO Option to upload files // TODO Option to upload files
<Grid container spacing={1}> <Grid container spacing={1}>
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<Typography color="primary" component="subtitle1" variant="subtitle1"> <Typography color="primary" component="subtitle1" variant="subtitle1">
@ -594,9 +579,9 @@ class TradeBox extends Component {
{t("Please, submit your statement. Be clear and specific about what happened and provide the necessary evidence. You MUST provide a contact method: burner email, XMPP or telegram username to follow up with the staff. Disputes are solved at the discretion of real robots (aka humans), so be as helpful as possible to ensure a fair outcome. Max 5000 chars.")} {t("Please, submit your statement. Be clear and specific about what happened and provide the necessary evidence. You MUST provide a contact method: burner email, XMPP or telegram username to follow up with the staff. Disputes are solved at the discretion of real robots (aka humans), so be as helpful as possible to ensure a fair outcome. Max 5000 chars.")}
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<TextField <TextField
error={this.state.badStatement} error={this.state.badStatement}
helperText={this.state.badStatement ? this.state.badStatement : "" } helperText={this.state.badStatement ? this.state.badStatement : "" }
label={t("Submit dispute statement")} label={t("Submit dispute statement")}
@ -818,7 +803,7 @@ handleRatingRobosatsChange=(e)=>{
var showReveiceButton=false; var showReveiceButton=false;
var showDisputeButton=true; var showDisputeButton=true;
} }
//In Chatroom - Fiat sent - showChat(showSendButton, showReveiceButton, showDisputeButton) //In Chatroom - Fiat sent - showChat(showSendButton, showReveiceButton, showDisputeButton)
if(this.props.data.is_buyer & this.props.data.status == 10){ if(this.props.data.is_buyer & this.props.data.status == 10){
var showSendButton=false; var showSendButton=false;
@ -829,8 +814,8 @@ handleRatingRobosatsChange=(e)=>{
var showSendButton=false; var showSendButton=false;
var showReveiceButton=true; var showReveiceButton=true;
var showDisputeButton=true; var showDisputeButton=true;
} }
return( return(
<Grid container spacing={1}> <Grid container spacing={1}>
{/* Make confirmation sound for Chat Open. */} {/* Make confirmation sound for Chat Open. */}
@ -841,7 +826,7 @@ handleRatingRobosatsChange=(e)=>{
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
{this.props.data.is_seller ? {this.props.data.is_seller ?
<Typography component="body2" variant="body2" align="center"> <Typography component="body2" variant="body2" align="center">
{this.props.data.status == 9? {this.props.data.status == 9?
t("Say hi! Be helpful and concise. Let them know how to send you {{currencyCode}}.",{currencyCode: this.props.data.currencyCode}) t("Say hi! Be helpful and concise. Let them know how to send you {{currencyCode}}.",{currencyCode: this.props.data.currencyCode})
@ -909,13 +894,13 @@ handleRatingRobosatsChange=(e)=>{
{this.state.rating_platform!=5 & this.state.rating_platform!=null ? {this.state.rating_platform!=5 & this.state.rating_platform!=null ?
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<Typography component="body2" variant="body2" align="center"> <Typography component="body2" variant="body2" align="center">
<p><b>{t("Thank you for using Robosats!")}</b></p> <p><b>{t("Thank you for using Robosats!")}</b></p>
<p><Trans i18nKey="let_us_know_hot_to_improve">Let us know how the platform could improve (<Link target='_blank' href="https://t.me/robosats">Telegram</Link> / <Link target='_blank' href="https://github.com/Reckless-Satoshi/robosats/issues">Github</Link>)</Trans></p> <p><Trans i18nKey="let_us_know_hot_to_improve">Let us know how the platform could improve (<Link target='_blank' href="https://t.me/robosats">Telegram</Link> / <Link target='_blank' href="https://github.com/Reckless-Satoshi/robosats/issues">Github</Link>)</Trans></p>
</Typography> </Typography>
</Grid> </Grid>
: null} : null}
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<Button color='primary' onClick={() => {this.props.push('/')}}>{t("Start Again")}</Button> <Button color='primary' onClick={() => {this.props.push('/')}}>{t("Start Again")}</Button>
</Grid> </Grid>
{this.showBondIsReturned()} {this.showBondIsReturned()}
</Grid> </Grid>
@ -944,13 +929,13 @@ handleRatingRobosatsChange=(e)=>{
) )
} }
// Countdown Renderer callback with condition // Countdown Renderer callback with condition
countdownRenderer = ({ minutes, seconds, completed }) => { countdownRenderer = ({ minutes, seconds, completed }) => {
const { t } = this.props; const { t } = this.props;
if (completed) { if (completed) {
// Render a completed state // Render a completed state
return (<div align="center"><span> {t("Retrying!")} </span><br/><CircularProgress/></div> ); return (<div align="center"><span> {t("Retrying!")} </span><br/><CircularProgress/></div> );
} else { } else {
return ( return (
<span>{zeroPad(minutes)}m {zeroPad(seconds)}s </span> <span>{zeroPad(minutes)}m {zeroPad(seconds)}s </span>
@ -970,7 +955,7 @@ handleRatingRobosatsChange=(e)=>{
</Grid> </Grid>
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<Typography component="body2" variant="body2" align="center"> <Typography component="body2" variant="body2" align="center">
{t("Your invoice has expired or more than 3 payment attempts have been made. Muun wallet is not recommended. ")} {t("Your invoice has expired or more than 3 payment attempts have been made. Muun wallet is not recommended. ")}
<Link href="https://github.com/Reckless-Satoshi/robosats/issues/44"> {t("Check the list of compatible wallets")}</Link> <Link href="https://github.com/Reckless-Satoshi/robosats/issues/44"> {t("Check the list of compatible wallets")}</Link>
</Typography> </Typography>
</Grid> </Grid>
@ -980,7 +965,7 @@ handleRatingRobosatsChange=(e)=>{
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<TextField <TextField
error={this.state.badInvoice} error={this.state.badInvoice}
helperText={this.state.badInvoice ? this.state.badInvoice : "" } helperText={this.state.badInvoice ? this.state.badInvoice : "" }
label={t("Payout Lightning Invoice")} label={t("Payout Lightning Invoice")}
@ -1084,4 +1069,4 @@ handleRatingRobosatsChange=(e)=>{
} }
} }
export default withTranslation()(TradeBox); export default withTranslation()(TradeBox);

23
frontend/src/components/UserGenPage.js
View File

@ -11,22 +11,7 @@ import ContentCopy from "@mui/icons-material/ContentCopy";
import RoboSatsNoTextIcon from "./icons/RoboSatsNoTextIcon" import RoboSatsNoTextIcon from "./icons/RoboSatsNoTextIcon"
import BoltIcon from '@mui/icons-material/Bolt'; import BoltIcon from '@mui/icons-material/Bolt';
function getCookie(name) { import { getCookie } from "../utils/cookies";
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;
}
const csrftoken = getCookie('csrftoken');
class UserGenPage extends Component { class UserGenPage extends Component {
constructor(props) { constructor(props) {
@ -59,7 +44,7 @@ class UserGenPage extends Component {
// sort of cryptographically strong function to generate Base62 token client-side // sort of cryptographically strong function to generate Base62 token client-side
genBase62Token(length) genBase62Token(length)
{ {
return window.btoa(Array.from( return window.btoa(Array.from(
window.crypto.getRandomValues( window.crypto.getRandomValues(
new Uint8Array(length * 2))) new Uint8Array(length * 2)))
@ -161,7 +146,7 @@ class UserGenPage extends Component {
<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>{this.state.nickname ? <b>{this.state.nickname ?
<div style={{display:'flex', alignItems:'center', justifyContent:'center', flexWrap:'wrap', height:'45px'}}> <div style={{display:'flex', alignItems:'center', justifyContent:'center', flexWrap:'wrap', height:'45px'}}>
<BoltIcon sx={{ color: "#fcba03", height: '33px',width: '33px'}}/><a>{this.state.nickname}</a><BoltIcon sx={{ color: "#fcba03", height: '33px',width: '33px'}}/> <BoltIcon sx={{ color: "#fcba03", height: '33px',width: '33px'}}/><a>{this.state.nickname}</a><BoltIcon sx={{ color: "#fcba03", height: '33px',width: '33px'}}/>
</div> </div>
@ -273,4 +258,4 @@ class UserGenPage extends Component {
} }
} }
export default withTranslation()(UserGenPage); export default withTranslation()(UserGenPage);

15
frontend/src/utils/cookies.js Normal file
View File

@ -0,0 +1,15 @@
export const 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;
};