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

Work on tradebox. Chat bugs and copy to clipboard

Browse Source
This commit is contained in:
Reckless_Satoshi 2022-01-13 12:41:48 -08:00
parent 64df2c7ce6
commit 18a8038466
No known key found for this signature in database
GPG Key ID: 9C4585B561315571
2 changed files with 56 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -58,18 +58,32 @@ export default class Chat extends Component {
<Container component="main" maxWidth="xs"> <Container component="main" maxWidth="xs">
<Paper style={{ height: 300, maxHeight: 300, overflow: 'auto', boxShadow: 'none', }}> <Paper style={{ height: 300, maxHeight: 300, overflow: 'auto', boxShadow: 'none', }}>
{this.state.messages.map(message => <> {this.state.messages.map(message => <>
{/* {message.userNick == this.props.data.urNick ? align='right' : align='left'} */} <Card elevation={5} align="left" >
<Card align="left"> {/* If message sender is not our nick, gray color, if it is our nick, green color */}
{message.userNick == this.props.data.urNick ?
<CardHeader <CardHeader
avatar={ avatar={
<Avatar <Avatar
alt={message.userNick} alt={message.userNick}
src={window.location.origin +'/static/assets/avatars/' + message.userNick + '.png'} src={window.location.origin +'/static/assets/avatars/' + message.userNick + '.png'}
/> />
} }
title={message.userNick} style={{backgroundColor: '#e8ffe6'}}
subheader={message.msg} title={message.userNick}
/> subheader={message.msg}
/>
:
<CardHeader
avatar={
<Avatar
alt={message.userNick}
src={window.location.origin +'/static/assets/avatars/' + message.userNick + '.png'}
/>
}
style={{backgroundColor: '#fcfcfc'}}
title={message.userNick}
subheader={message.msg}
/>}
</Card> </Card>
</>)} </>)}
</Paper> </Paper>

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

@ -55,17 +55,19 @@ export default class TradeBox extends Component {
</Grid> </Grid>
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<QRCode value={this.props.data.bondInvoice} size={305}/> <QRCode value={this.props.data.bondInvoice} size={305}/>
<Button size="small" color="inherit" onClick={() => {navigator.clipboard.writeText(this.props.data.bondInvoice)}} align="center"> 📋Copy to clipboard</Button>
</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.bondInvoice} defaultValue={this.props.data.bondInvoice}
disabled="true" disabled="true"
helperText="This is a hold invoice. It will not be charged if the order succeeds or expires. helperText="This is a hold invoice. It will simply freeze in your wallet.
It will be charged if the order is cancelled or you lose a dispute." It will be charged only if you cancel the order or lose a dispute."
color = "secondary" color = "secondary"
onClick = {this.copyCodeToClipboard}
/> />
</Grid> </Grid>
</Grid> </Grid>
@ -92,6 +94,7 @@ export default class TradeBox extends Component {
</Grid> </Grid>
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<QRCode value={this.props.data.escrowInvoice} size={305}/> <QRCode value={this.props.data.escrowInvoice} size={305}/>
<Button size="small" color="inherit" onClick={() => {navigator.clipboard.writeText(this.props.data.escrowInvoice)}} align="center"> 📋Copy to clipboard</Button>
</Grid> </Grid>
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<TextField <TextField
@ -100,7 +103,7 @@ export default class TradeBox extends Component {
size="small" size="small"
defaultValue={this.props.data.escrowInvoice} defaultValue={this.props.data.escrowInvoice}
disabled="true" disabled="true"
helperText="This is a hold LN invoice. It will be charged once the buyer confirms he sent the fiat." helperText="This is a hold invoice. It will simply freeze in your wallet. It will be charged once the buyer confirms he sent the fiat."
color = "secondary" color = "secondary"
/> />
</Grid> </Grid>
@ -220,22 +223,24 @@ export default class TradeBox extends Component {
valid invoice for {pn(this.props.data.invoiceAmount)} Satoshis. valid invoice for {pn(this.props.data.invoiceAmount)} Satoshis.
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={12} align="center"> <form noValidate onSubmit={this.handleClickSubmitInvoiceButton}>
<TextField <Grid item xs={12} align="center">
error={this.state.badInvoice} <TextField
helperText={this.state.badInvoice ? this.state.badInvoice : "" } error={this.state.badInvoice}
label={"Payout Lightning Invoice"} helperText={this.state.badInvoice ? this.state.badInvoice : "" }
required label={"Payout Lightning Invoice"}
inputProps={{ required
style: {textAlign:"center"} inputProps={{
}} style: {textAlign:"center"}
multiline }}
onChange={this.handleInputInvoiceChanged} multiline
/> onChange={this.handleInputInvoiceChanged}
</Grid> />
<Grid item xs={12} align="center"> </Grid>
<Button variant='contained' color='primary' onClick={this.handleClickSubmitInvoiceButton}>Submit</Button> <Grid item xs={12} align="center">
</Grid> <Button variant='contained' color='primary'>Submit</Button>
</Grid>
</form>
{this.showBondIsLocked()} {this.showBondIsLocked()}
</Grid> </Grid>
) )
@ -359,16 +364,17 @@ handleRatingChange=(e)=>{
<b>Chatting with {this.props.data.isMaker ? this.props.data.takerNick : this.props.data.makerNick}</b> <b>Chatting with {this.props.data.isMaker ? this.props.data.takerNick : this.props.data.makerNick}</b>
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={12} align="left"> <Grid item xs={12} align="center">
{this.props.data.isSeller ? {this.props.data.isSeller ?
<Typography component="body2" variant="body2"> <Typography component="body2" variant="body2" align="center">
Say hi to your peer robot! Be helpful and concise. Let him know how to send you {this.props.data.currencyCode}. Say hi! Be helpful and concise. Let him know how to send you {this.props.data.currencyCode}.
</Typography> </Typography>
: :
<Typography component="body2" variant="body2"> <Typography component="body2" variant="body2" align="center">
Say hi to your peer robot! Ask for payment details and click 'Confirm {this.props.data.currencyCode} sent' as soon as you send the payment. Say hi! Ask for payment details and click "Confirm Sent" as soon as the payment is sent.
</Typography> </Typography>
} }
<Divider/>
</Grid> </Grid>
<Chat data={this.props.data}/> <Chat data={this.props.data}/>