Merge pull request #74 from Reckless-Satoshi/step-x-of-y

Implement X-of-Y steps in TradeBox, fixes #69

api/admin.py

@@ -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)

chat/admin.py

@@ -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",
@@ -18,3 +18,4 @@ class UserProfileAdmin(AdminChangeLinksMixin, admin.ModelAdmin):
         "room_group_name",
     )
     change_links = ["order","maker","taker"]
+    search_fields = ["id","maker__chat_maker"]

frontend/src/components/BottomBar.js

@@ -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'

frontend/src/components/Chat.js

@@ -81,7 +81,6 @@ 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}>
@@ -101,6 +100,7 @@ export default class Chat extends Component {
               </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}}}

frontend/src/components/TradeBox.js

@@ -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>

frontend/static/frontend/main.js.LICENSE.txt

@@ -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 ***!
   \******************************************************/