Implement X-of-Y steps in TradeBox

This commit is contained in:
Reckless_Satoshi 2022-03-11 06:33:07 -08:00
parent 73a767d68a
commit 11ab92016f
No known key found for this signature in database
GPG Key ID: 9C4585B561315571
7 changed files with 126 additions and 44 deletions

View File

@ -65,7 +65,7 @@ class OrderAdmin(AdminChangeLinksMixin, admin.ModelAdmin):
"trade_escrow",
)
list_filter = ("is_disputed", "is_fiat_sent", "type", "currency", "status")
search_fields = ["id","amount"]
@admin.register(LNPayment)
class LNPaymentAdmin(AdminChangeLinksMixin, admin.ModelAdmin):
@ -95,6 +95,7 @@ class LNPaymentAdmin(AdminChangeLinksMixin, admin.ModelAdmin):
)
list_filter = ("type", "concept", "status")
ordering = ("-expires_at", )
search_fields = ["payment_hash","num_satoshis"]
@admin.register(Profile)

View File

@ -5,7 +5,7 @@ from chat.models import ChatRoom
@admin.register(ChatRoom)
class UserProfileAdmin(AdminChangeLinksMixin, admin.ModelAdmin):
class ChatRoomAdmin(AdminChangeLinksMixin, admin.ModelAdmin):
list_display = (
"id",
"order_link",
@ -17,4 +17,5 @@ class UserProfileAdmin(AdminChangeLinksMixin, admin.ModelAdmin):
"taker_connect_date",
"room_group_name",
)
change_links = ["order","maker","taker"]
change_links = ["order","maker","taker"]
search_fields = ["id","maker__chat_maker"]

View File

@ -315,11 +315,11 @@ export default class BottomBar extends Component {
<ListItemIcon>
<PasswordIcon/>
</ListItemIcon>
<ListItemText secondary="Back it up now. It will not remain here.">
<ListItemText secondary="It will not remain here">
{this.props.token ?
<TextField
disabled
label='Your Token'
label='Your Token, back it up!'
value={this.props.token }
variant='filled'
size='small'

View File

@ -80,27 +80,27 @@ export default class Chat extends Component {
render() {
return (
<Container component="main" maxWidth="xs">
<Paper elevation={1} style={{ height: 300, maxHeight: 300, overflow: 'auto', backgroundColor: '#F7F7F7' }}>
<Grid container xs={12} spacing={0.5}>
<Grid item xs={0.3}/>
<Grid item xs={5.5}>
<Paper elevation={1} style={this.state.connected ? {backgroundColor: '#e8ffe6'}: {backgroundColor: '#FFF1C5'}}>
<Typography variant='caption' >
You: {this.state.connected ? 'connected': 'disconnected'}
</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'>
Peer: {this.state.peer_connected ? 'connected': 'disconnected'}
</Typography>
</Paper>
</Grid>
<Grid item xs={0.3}/>
<Container component="main" maxWidth="xs" >
<Grid container xs={12} spacing={0.5}>
<Grid item xs={0.3}/>
<Grid item xs={5.5}>
<Paper elevation={1} style={this.state.connected ? {backgroundColor: '#e8ffe6'}: {backgroundColor: '#FFF1C5'}}>
<Typography variant='caption' >
You: {this.state.connected ? 'connected': 'disconnected'}
</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'>
Peer: {this.state.peer_connected ? 'connected': 'disconnected'}
</Typography>
</Paper>
</Grid>
<Grid item xs={0.3}/>
</Grid>
<Paper elevation={1} style={{ height: 300, maxHeight: 300, width:280,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 */}
@ -114,7 +114,7 @@ export default class Chat extends Component {
/>
</Badge>
}
style={{backgroundColor: '#e8ffe6'}}
style={{backgroundColor: '#eeeeee'}}
title={message.userNick}
subheader={message.msg}
subheaderTypographyProps={{sx: {wordWrap: "break-word", width: 200}}}
@ -129,7 +129,7 @@ export default class Chat extends Component {
/>
</Badge>
}
style={{backgroundColor: '#fcfcfc'}}
style={{backgroundColor: '#fafafa'}}
title={message.userNick}
subheader={message.msg}
subheaderTypographyProps={{sx: {wordWrap: "break-word", width: 200}}}

View File

@ -11,6 +11,10 @@ import PercentIcon from '@mui/icons-material/Percent';
import BookIcon from '@mui/icons-material/Book';
import QrCodeScannerIcon from '@mui/icons-material/QrCodeScanner';
import SendIcon from '@mui/icons-material/Send';
import LockIcon from '@mui/icons-material/Lock';
import LockOpenIcon from '@mui/icons-material/LockOpen';
import BalanceIcon from '@mui/icons-material/Balance';
import ContentCopy from "@mui/icons-material/ContentCopy";
function getCookie(name) {
let cookieValue = null;
@ -60,6 +64,49 @@ export default class TradeBox extends Component {
});
}
stepXofY = () => {
// set y value
var x = null
var y = null
var status = this.props.data.status
if(this.props.data.is_maker){y = 5}
if(this.props.data.is_taker){y = 4}
// set x values
if(this.props.data.is_maker){
if (status == 0){
x = 1
} else if ([1,3].includes(status)){
x = 2
} else if ([6,7,8].includes(status)){
x = 3
} else if(status == 9){
x = 4
} else if(status == 10){
x = 5
}
}
if(this.props.data.is_taker){
if(status == 3){
x = 1
}else if([6,7,8].includes(status)){
x = 2
}else if(status == 9){
x = 3
}else if(status == 10){
x = 4
}
}
// Return "(x/y)"
if(x != null & y != null){
return "("+x+"/"+y+")"
}else{
return ''
}
}
handleClickOpenConfirmDispute = () => {
this.setState({openConfirmDispute: true});
};
@ -158,17 +205,19 @@ export default class TradeBox extends Component {
<Grid item xs={12} align="center">
{this.props.data.is_maker ?
<Typography color="primary" component="subtitle1" variant="subtitle1">
<b>Lock {pn(this.props.data.bond_satoshis)} Sats to PUBLISH order </b>
<b>Lock {pn(this.props.data.bond_satoshis)} Sats to PUBLISH order </b> {" " + this.stepXofY()}
</Typography>
:
<Typography color="primary" component="subtitle1" variant="subtitle1">
<b>Lock {pn(this.props.data.bond_satoshis)} Sats to TAKE the order </b>
<b>Lock {pn(this.props.data.bond_satoshis)} Sats to TAKE the order </b> {" " + this.stepXofY()}
</Typography>
}
</Grid>
<Grid item xs={12} align="center">
<QRCode value={this.props.data.bond_invoice} size={305}/>
<Button size="small" color="inherit" onClick={() => {navigator.clipboard.writeText(this.props.data.bond_invoice)}} align="center"> 📋Copy to clipboard</Button>
<Tooltip disableHoverListener enterTouchDelay="0" title="Copied!">
<Button size="small" color="inherit" onClick={() => {navigator.clipboard.writeText(this.props.data.bond_invoice)}} align="center"> <ContentCopy/> Copy to clipboard</Button>
</Tooltip>
</Grid>
<Grid item xs={12} align="center">
<TextField
@ -189,7 +238,10 @@ export default class TradeBox extends Component {
return (
<Grid item xs={12} align="center">
<Typography color="primary" component="subtitle1" variant="subtitle1" align="center">
🔒 Your {this.props.data.is_maker ? 'maker' : 'taker'} bond is locked
<div style={{display:'flex', alignItems:'center', justifyContent:'center', flexWrap:'wrap'}}>
<LockIcon/>
{" Your " + (this.props.data.is_maker ? 'maker' : 'taker')+" bond is locked"}
</div>
</Typography>
</Grid>
);
@ -199,7 +251,10 @@ export default class TradeBox extends Component {
return (
<Grid item xs={12} align="center">
<Typography color="error" component="subtitle1" variant="subtitle1" align="center">
Your {this.props.data.is_maker ? 'maker' : 'taker'} bond was settled
<div style={{display:'flex',alignItems:'center', justifyContent:'center', flexWrap:'wrap', align:"center"}} align="center">
<BalanceIcon/>
{" Your " + (this.props.data.is_maker ? 'maker' : 'taker')+" bond was settled"}
</div>
</Typography>
</Grid>
);
@ -209,7 +264,10 @@ export default class TradeBox extends Component {
return (
<Grid item xs={12} align="center">
<Typography color="green" component="subtitle1" variant="subtitle1" align="center">
🔓 Your {this.props.data.is_maker ? 'maker' : 'taker'} bond was unlocked
<div style={{display:'flex',alignItems:'center', justifyContent:'center', flexWrap:'wrap'}}>
<LockOpenIcon/>
{" Your " + (this.props.data.is_maker ? 'maker' : 'taker')+" bond was unlocked"}
</div>
</Typography>
</Grid>
);
@ -222,12 +280,14 @@ export default class TradeBox extends Component {
<this.Sound soundFileName="locked-invoice"/>
<Grid item xs={12} align="center">
<Typography color="green" component="subtitle1" variant="subtitle1">
<b>Deposit {pn(this.props.data.escrow_satoshis)} Sats as trade collateral </b>
<b>Lock {pn(this.props.data.escrow_satoshis)} Sats as collateral </b> {" " + this.stepXofY()}
</Typography>
</Grid>
<Grid item xs={12} align="center">
<QRCode value={this.props.data.escrow_invoice} size={305}/>
<Button size="small" color="inherit" onClick={() => {navigator.clipboard.writeText(this.props.data.escrow_invoice)}} align="center"> 📋Copy to clipboard</Button>
<Tooltip disableHoverListener enterTouchDelay="0" title="Copied!">
<Button size="small" color="inherit" onClick={() => {navigator.clipboard.writeText(this.props.data.escrow_invoice)}} align="center"> <ContentCopy/>Copy to clipboard</Button>
</Tooltip>
</Grid>
<Grid item xs={12} align="center">
<TextField
@ -252,7 +312,7 @@ export default class TradeBox extends Component {
<this.Sound soundFileName="taker-found"/>
<Grid item xs={12} align="center">
<Typography component="subtitle1" variant="subtitle1">
<b>A taker has been found! </b>
<b>A taker has been found! </b> {" " + this.stepXofY()}
</Typography>
</Grid>
<Divider/>
@ -314,7 +374,7 @@ export default class TradeBox extends Component {
<this.EnableTelegramDialog/>
<Grid item xs={12} align="center">
<Typography component="subtitle1" variant="subtitle1">
<b> Your order is public. Wait for a taker. </b>
<b> Your order is public </b> {" " + this.stepXofY()}
</Typography>
</Grid>
<Grid item xs={12} align="center">
@ -435,7 +495,7 @@ export default class TradeBox extends Component {
{/* Make confirmation sound for HTLC received. */}
<this.Sound soundFileName="locked-invoice"/>
<Typography color="primary" component="subtitle1" variant="subtitle1">
<b> Submit a LN invoice for {pn(this.props.data.invoice_amount)} Sats </b>
<b> Submit an invoice for {pn(this.props.data.invoice_amount)} Sats </b> {" " + this.stepXofY()}
</Typography>
</Grid>
<Grid item xs={12} align="left">
@ -620,7 +680,7 @@ export default class TradeBox extends Component {
<Grid container spacing={1}>
<Grid item xs={12} align="center">
<Typography component="subtitle1" variant="subtitle1">
<b>Your invoice looks good!🎉</b>
<b>Your invoice looks good!🎉</b> {" " + this.stepXofY()}
</Typography>
</Grid>
<Grid item xs={12} align="center">
@ -643,7 +703,7 @@ export default class TradeBox extends Component {
<this.Sound soundFileName="locked-invoice"/>
<Grid item xs={12} align="center">
<Typography component="subtitle1" variant="subtitle1">
<b>The trade collateral is locked! 🎉 </b>
<b>The trade collateral is locked! 🎉 </b> {" " + this.stepXofY()}
</Typography>
</Grid>
<Grid item xs={12} align="center">
@ -777,17 +837,25 @@ handleRatingRobosatsChange=(e)=>{
<this.Sound soundFileName="chat-open"/>
<Grid item xs={12} align="center">
<Typography component="subtitle1" variant="subtitle1">
<b>Chatting with {this.props.data.is_maker ? this.props.data.taker_nick : this.props.data.maker_nick}</b>
<b>Chat with the {this.props.data.is_seller ? 'buyer': 'seller'}</b> {" " + this.stepXofY()}
</Typography>
</Grid>
<Grid item xs={12} align="center">
{this.props.data.is_seller ?
<Typography component="body2" variant="body2" align="center">
Say hi! Be helpful and concise. Let them know how to send you {this.props.data.currencyCode}.
{this.props.data.status == 9?
"Say hi! Be helpful and concise. Let them know how to send you "+this.props.data.currencyCode+"."
:
"The buyer has sent the fiat. Click 'Confirm Received' once you receive it."
}
</Typography>
:
<Typography component="body2" variant="body2" align="center">
Say hi! Ask for payment details and click "Confirm Sent" as soon as the payment is sent.
{this.props.data.status == 9?
"Say hi! Ask for payment details and click 'Confirm Sent' as soon as the payment is sent."
:
"Wait for the seller to confirm he has received the payment."
}
</Typography>
}
</Grid>

File diff suppressed because one or more lines are too long

View File

@ -290,6 +290,10 @@
!*** ./node_modules/@mui/icons-material/Book.js ***!
\**************************************************/
/*!**************************************************!*\
!*** ./node_modules/@mui/icons-material/Lock.js ***!
\**************************************************/
/*!**************************************************!*\
!*** ./node_modules/@mui/icons-material/Sell.js ***!
\**************************************************/
@ -446,6 +450,10 @@
!*** ./node_modules/@mui/icons-material/Article.js ***!
\*****************************************************/
/*!*****************************************************!*\
!*** ./node_modules/@mui/icons-material/Balance.js ***!
\*****************************************************/
/*!*****************************************************!*\
!*** ./node_modules/@mui/icons-material/Numbers.js ***!
\*****************************************************/
@ -530,6 +538,10 @@
!*** ./node_modules/webrtc-adapter/src/js/utils.js ***!
\*****************************************************/
/*!******************************************************!*\
!*** ./node_modules/@mui/icons-material/LockOpen.js ***!
\******************************************************/
/*!******************************************************!*\
!*** ./node_modules/@mui/icons-material/Password.js ***!
\******************************************************/