Robosats/robosats
1
0
Fork 0
mirror of https://github.com/RoboSats/robosats.git synced 2025-07-19 17:23:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix warnings in Tradebox and Chat

Browse Source
This commit is contained in:
Reckless_Satoshi
2022-05-08 09:46:27 -07:00
parent 9af2e722be
commit 6112e64b61
3 changed files with 132 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

161
frontend/src/components/Chat.js
View File

@ -84,87 +84,88 @@ class Chat extends Component {
const { t } = this.props; const { t } = this.props;
return ( return (
<Container component="main" maxWidth="xs" > <Container component="main" maxWidth="xs" >
<Grid container xs={12} spacing={0.5}> <Grid container spacing={0.5}>
<Grid item xs={0.3}/> <Grid item xs={0.3}/>
<Grid item xs={5.5}> <Grid item xs={5.5}>
<Paper elevation={1} style={this.state.connected ? {backgroundColor: '#e8ffe6'}: {backgroundColor: '#FFF1C5'}}> <Paper elevation={1} style={this.state.connected ? {backgroundColor: '#e8ffe6'}: {backgroundColor: '#FFF1C5'}}>
<Typography variant='caption' sx={{color: '#111111'}}> <Typography variant='caption' sx={{color: '#111111'}}>
{t("You")+": "}{this.state.connected ? t("connected"): t("disconnected")} {t("You")+": "}{this.state.connected ? t("connected"): t("disconnected")}
</Typography> </Typography>
</Paper>
</Grid>
<Grid item xs={0.4}/>
<Grid item xs={5.5}>
<Paper elevation={1} style={this.state.peer_connected ? {backgroundColor: '#e8ffe6'}: {backgroundColor: '#FFF1C5'}}>
<Typography variant='caption' sx={{color: '#111111'}}>
{t("Peer")+": "}{this.state.peer_connected ? t("connected"): t("disconnected")}
</Typography>
</Paper>
</Grid>
<Grid item xs={0.3}/>
</Grid>
<Paper elevation={1} style={{ height: '300px', maxHeight: '300px' , width: '280px' ,overflow: 'auto', backgroundColor: '#F7F7F7' }}>
{this.state.messages.map(message => <>
<Card elevation={5} align="left" >
{/* If message sender is not our nick, gray color, if it is our nick, green color */}
{message.userNick == this.props.ur_nick ?
<CardHeader sx={{color: '#111111'}}
avatar={
<Badge variant="dot" overlap="circular" badgeContent="" color={this.state.connected ? "success" : "error"}>
<Avatar className="flippedSmallAvatar"
alt={message.userNick}
src={window.location.origin +'/static/assets/avatars/' + message.userNick + '.png'}
/>
</Badge>
}
style={{backgroundColor: '#eeeeee'}}
title={message.userNick}
subheader={message.msg}
subheaderTypographyProps={{sx: {wordWrap: "break-word", width: '200px', color: '#444444'}}}
/>
:
<CardHeader sx={{color: '#111111'}}
avatar={
<Badge variant="dot" overlap="circular" badgeContent="" color={this.state.peer_connected ? "success" : "error"}>
<Avatar className="flippedSmallAvatar"
alt={message.userNick}
src={window.location.origin +'/static/assets/avatars/' + message.userNick + '.png'}
/>
</Badge>
}
style={{backgroundColor: '#fafafa'}}
title={message.userNick}
subheader={message.msg}
subheaderTypographyProps={{sx: {wordWrap: "break-word", width: '200px', color: '#444444'}}}
/>}
</Card>
</>)}
<div style={{ float:"left", clear: "both" }} ref={(el) => { this.messagesEnd = el; }}></div>
</Paper> </Paper>
<form noValidate onSubmit={this.onButtonClicked}> </Grid>
<Grid containter alignItems="stretch" style={{ display: "flex" }}> <Grid item xs={0.4}/>
<Grid item alignItems="stretch" style={{ display: "flex"}}> <Grid item xs={5.5}>
<TextField <Paper elevation={1} style={this.state.peer_connected ? {backgroundColor: '#e8ffe6'}: {backgroundColor: '#FFF1C5'}}>
label={t("Type a message")} <Typography variant='caption' sx={{color: '#111111'}}>
variant="standard" {t("Peer")+": "}{this.state.peer_connected ? t("connected"): t("disconnected")}
size="small" </Typography>
helperText={this.state.connected ? null : t("Connecting...")} </Paper>
value={this.state.value} </Grid>
onChange={e => { <Grid item xs={0.3}/>
this.setState({ value: e.target.value }); </Grid>
this.value = this.state.value; <Paper elevation={1} style={{ height: '300px', maxHeight: '300px' , width: '280px' ,overflow: 'auto', backgroundColor: '#F7F7F7' }}>
}} {this.state.messages.map((message, index) =>
sx={{width: 214}} <li style={{listStyleType:"none"}} key={index}>
/> <Card elevation={5} align="left" >
</Grid> {/* If message sender is not our nick, gray color, if it is our nick, green color */}
<Grid item alignItems="stretch" style={{ display: "flex" }}> {message.userNick == this.props.ur_nick ?
<Button sx={{'width':68}} disabled={!this.state.connected} type="submit" variant="contained" color="primary">{t("Send")} </Button> <CardHeader sx={{color: '#111111'}}
</Grid> avatar={
</Grid> <Badge variant="dot" overlap="circular" badgeContent="" color={this.state.connected ? "success" : "error"}>
</form> <Avatar className="flippedSmallAvatar"
<FormHelperText> alt={message.userNick}
{t("The chat has no memory: if you leave, messages are lost.")} <Link target="_blank" href={t("PGP_guide_url")}> {t("Learn easy PGP encryption.")}</Link> src={window.location.origin +'/static/assets/avatars/' + message.userNick + '.png'}
</FormHelperText> />
</Badge>
}
style={{backgroundColor: '#eeeeee'}}
title={message.userNick}
subheader={message.msg}
subheaderTypographyProps={{sx: {wordWrap: "break-word", width: '200px', color: '#444444'}}}
/>
:
<CardHeader sx={{color: '#111111'}}
avatar={
<Badge variant="dot" overlap="circular" badgeContent="" color={this.state.peer_connected ? "success" : "error"}>
<Avatar className="flippedSmallAvatar"
alt={message.userNick}
src={window.location.origin +'/static/assets/avatars/' + message.userNick + '.png'}
/>
</Badge>
}
style={{backgroundColor: '#fafafa'}}
title={message.userNick}
subheader={message.msg}
subheaderTypographyProps={{sx: {wordWrap: "break-word", width: '200px', color: '#444444'}}}
/>}
</Card>
</li>)}
<div style={{ float:"left", clear: "both" }} ref={(el) => { this.messagesEnd = el; }}></div>
</Paper>
<form noValidate onSubmit={this.onButtonClicked}>
<Grid alignItems="stretch" style={{ display: "flex" }}>
<Grid item alignItems="stretch" style={{ display: "flex"}}>
<TextField
label={t("Type a message")}
variant="standard"
size="small"
helperText={this.state.connected ? null : t("Connecting...")}
value={this.state.value}
onChange={e => {
this.setState({ value: e.target.value });
this.value = this.state.value;
}}
sx={{width: 214}}
/>
</Grid>
<Grid item alignItems="stretch" style={{ display: "flex" }}>
<Button sx={{'width':68}} disabled={!this.state.connected} type="submit" variant="contained" color="primary">{t("Send")} </Button>
</Grid>
</Grid>
</form>
<FormHelperText>
{t("The chat has no memory: if you leave, messages are lost.")} <Link target="_blank" href={t("PGP_guide_url")}> {t("Learn easy PGP encryption.")}</Link>
</FormHelperText>
</Container> </Container>
) )
} }

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

@ -36,6 +36,7 @@ class OrderPage extends Component {
openCancel: false, openCancel: false,
openCollaborativeCancel: false, openCollaborativeCancel: false,
openInactiveMaker: false, openInactiveMaker: false,
openStoreToken: false,
tabValue: 1, tabValue: 1,
orderId: this.props.match.params.orderId, orderId: this.props.match.params.orderId,
}; };
@ -180,8 +181,8 @@ class OrderPage extends Component {
if(this.state.has_range){ if(this.state.has_range){
return( return(
<Grid container align="center" alignItems="stretch" justifyContent="center" style={{ display: "flex"}}> <Grid container align="center" alignItems="stretch" justifyContent="center" style={{ display: "flex"}}>
<this.InactiveMakerDialog/> {this.InactiveMakerDialog()}
<this.StoreTokenDialog/> {this.StoreTokenDialog()}
<div style={{maxWidth:120}}> <div style={{maxWidth:120}}>
<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}}>
@ -226,8 +227,8 @@ class OrderPage extends Component {
}else{ }else{
return( return(
<> <>
<this.InactiveMakerDialog/> {this.InactiveMakerDialog()}
<this.StoreTokenDialog/> {this.StoreTokenDialog()}
<Button sx={{height:38}} variant='contained' color='primary' <Button sx={{height:38}} variant='contained' color='primary'
onClick={this.props.copiedToken ? (this.state.maker_status=='Inactive' ? this.handleClickOpenInactiveMakerDialog : this.takeOrder) : (() => this.setState({openStoreToken:true}))}> onClick={this.props.copiedToken ? (this.state.maker_status=='Inactive' ? this.handleClickOpenInactiveMakerDialog : this.takeOrder) : (() => this.setState({openStoreToken:true}))}>
{t("Take Order")} {t("Take Order")}
@ -383,7 +384,7 @@ class OrderPage extends Component {
size='small' size='small'
InputProps={{ InputProps={{
endAdornment: endAdornment:
<Tooltip disableHoverListener enterTouchDelay="0" title={t("Copied!")}> <Tooltip disableHoverListener enterTouchDelay={0} title={t("Copied!")}>
<IconButton onClick= {()=> (navigator.clipboard.writeText(getCookie("robot_token")) & this.props.setAppState({copiedToken:true}))}> <IconButton onClick= {()=> (navigator.clipboard.writeText(getCookie("robot_token")) & this.props.setAppState({copiedToken:true}))}>
<ContentCopy color={this.props.copiedToken ? "inherit" : "primary"}/> <ContentCopy color={this.props.copiedToken ? "inherit" : "primary"}/>
</IconButton> </IconButton>
@ -532,7 +533,7 @@ class OrderPage extends Component {
{t("Order Box")} {t("Order Box")}
</Typography> </Typography>
</MediaQuery> </MediaQuery>
<Paper elevation={12} style={{ padding: 8,}}> <Paper elevation={12} >
<List dense={true}> <List dense={true}>
<ListItem > <ListItem >
<ListItemAvatar sx={{ width: 56, height: 56 }}> <ListItemAvatar sx={{ width: 56, height: 56 }}>

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

@ -636,11 +636,21 @@ class TradeBox extends Component {
<b> {t("We have received your statement")} </b> <b> {t("We have received your statement")} </b>
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={12} align="left"> <Grid item xs={12} align="center">
<Typography variant="body2"> <List dense={true}>
<p>{t("We are waiting for your trade counterpart statement. If you are hesitant about the state of the dispute or want to add more information, contact robosats@protonmail.com.")}</p> <Divider/>
<p>{t("Please, save the information needed to identify your order and your payments: order ID; payment hashes of the bonds or escrow (check on your lightning wallet); exact amount of satoshis; and robot nickname. You will have to identify yourself as the user involved in this trade via email (or other contact methods).")}</p> <ListItem>
</Typography> <Typography variant="body2">
{t("We are waiting for your trade counterpart statement. If you are hesitant about the state of the dispute or want to add more information, contact robosats@protonmail.com.")}
</Typography>
</ListItem>
<ListItem>
<Typography variant="body2">
{t("Please, save the information needed to identify your order and your payments: order ID; payment hashes of the bonds or escrow (check on your lightning wallet); exact amount of satoshis; and robot nickname. You will have to identify yourself as the user involved in this trade via email (or other contact methods).")}
</Typography>
</ListItem>
<Divider/>
</List>
</Grid> </Grid>
{this.showBondIsSettled()} {this.showBondIsSettled()}
</Grid> </Grid>
@ -752,10 +762,20 @@ class TradeBox extends Component {
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<Typography variant="body2" align="left"> <List dense={true}>
<p>{t("We are waiting for the seller lock the trade amount.")}</p> <Divider/>
<p>{t("Just hang on for a moment. If the seller does not deposit, you will get your bond back automatically. In addition, you will receive a compensation (check the rewards in your profile).")}</p> <ListItem>
</Typography> <Typography variant="body2" align="left">
{t("We are waiting for the seller lock the trade amount.")}
</Typography>
</ListItem>
<ListItem>
<Typography variant="body2" align="left">
{t("Just hang on for a moment. If the seller does not deposit, you will get your bond back automatically. In addition, you will receive a compensation (check the rewards in your profile).")}
</Typography>
</ListItem>
<Divider/>
</List>
</Grid> </Grid>
{this.showBondIsLocked()} {this.showBondIsLocked()}
</Grid> </Grid>
@ -774,10 +794,21 @@ class TradeBox extends Component {
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<Typography variant="body2" align="left"> <List dense={true}>
<p>{t("We are waiting for the buyer to post a lightning invoice. Once he does, you will be able to directly communicate the fiat payment details.")} </p> <Divider/>
<p>{t("Just hang on for a moment. If the buyer does not cooperate, you will get back the trade collateral and your bond automatically. In addition, you will receive a compensation (check the rewards in your profile).")}</p> <ListItem>
</Typography> <Typography variant="body2" align="left">
{t("We are waiting for the buyer to post a lightning invoice. Once he does, you will be able to directly communicate the fiat payment details.")}
</Typography>
</ListItem>
<ListItem>
<Typography variant="body2" align="left">
{t("Just hang on for a moment. If the buyer does not cooperate, you will get back the trade collateral and your bond automatically. In addition, you will receive a compensation (check the rewards in your profile).")}
</Typography>
</ListItem>
<Divider/>
</List>
</Grid> </Grid>
{this.showBondIsLocked()} {this.showBondIsLocked()}
</Grid> </Grid>