Add maker status on book page

api/logics.py

@@ -55,6 +55,14 @@ class Logics():
             return False, {'bad_request': 'Your order is too small. It is worth '+'{:,}'.format(order.t0_satoshis)+' Sats now, but the limit is '+'{:,}'.format(MIN_TRADE)+ ' Sats'}
         return True, None
 
+    def user_activity_status(last_seen):
+        if last_seen > (timezone.now() - timedelta(minutes=2)):
+            return 'Active'
+        elif last_seen > (timezone.now() - timedelta(minutes=10)):
+            return 'Seen recently'
+        else:
+            return 'Inactive'
+
     @classmethod    
     def take(cls, order, user):
         is_penalized, time_out = cls.is_penalized(user)

api/views.py

@@ -136,20 +136,9 @@ class OrderView(viewsets.ViewSet):
 
         # Add activity status of participants based on last_seen
         if order.taker_last_seen != None:
-            if order.taker_last_seen > (timezone.now() - timedelta(minutes=2)):
+            data['taker_status'] = Logics.user_activity_status(order.taker_last_seen)
-                data['taker_status'] = 'active'
-            elif order.taker_last_seen > (timezone.now() - timedelta(minutes=10)):
-                data['taker_status'] = 'seen_recently'
-            else:
-                data['taker_status'] = 'inactive'
-
         if order.maker_last_seen != None:
-            if order.maker_last_seen > (timezone.now() - timedelta(minutes=2)):
+            data['maker_status'] = Logics.user_activity_status(order.maker_last_seen)
-                data['maker_status'] = 'active'
-            elif order.maker_last_seen > (timezone.now() - timedelta(minutes=10)):
-                data['maker_status'] = 'seen_recently'
-            else:
-                data['maker_status'] = 'inactive'
 
         # 3.b If order is between public and WF2
         if order.status >= Order.Status.PUB and order.status < Order.Status.WF2:
@@ -157,7 +146,6 @@ class OrderView(viewsets.ViewSet):
 
              # 3. c) If maker and Public, add num robots in book, premium percentile and num similar orders.
             if data['is_maker'] and order.status == Order.Status.PUB:
-                data['robots_in_book'] = None       # TODO
                 data['premium_percentile'] = compute_premium_percentile(order)
                 data['num_similar_orders'] = len(Order.objects.filter(currency=order.currency, status=Order.Status.PUB))
         
@@ -484,7 +472,7 @@ class BookView(ListAPIView):
             
             # Compute current premium for those orders that are explicitly priced.
             data['price'], data['premium'] = Logics.price_and_premium_now(order)
-                
+            data['maker_status'] = Logics.user_activity_status(order.maker_last_seen)
             for key in ('status','taker'): # Non participants should not see the status or who is the taker
                 del data[key]
             

frontend/src/components/BookPage.js

@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { Tooltip, Paper, Button , CircularProgress, ListItemButton, Typography, Grid, Select, MenuItem, FormControl, FormHelperText, List, ListItem, ListItemText, Avatar, RouterLink, ListItemAvatar, IconButton} from "@mui/material";
+import { Badge, Tooltip, Paper, Button , CircularProgress, ListItemButton, Typography, Grid, Select, MenuItem, FormControl, FormHelperText, List, ListItem, ListItemText, Avatar, RouterLink, ListItemAvatar, IconButton} from "@mui/material";
 import { Link } from 'react-router-dom'
 import { DataGrid } from '@mui/x-data-grid';
 import MediaQuery from 'react-responsive'
@@ -70,6 +70,13 @@ export default class BookPage extends Component {
     return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
   }
   
+  // Colors for the status badges
+  statusBadgeColor(status){
+    if(status=='Active'){return("success")}
+    if(status=='Seen recently'){return("warning")}
+    if(status=='Inactive'){return('error')}
+  }
+
   bookListTableDesktop=()=>{
     return (
       <div style={{ height: 475, width: '100%' }}>
@@ -78,7 +85,8 @@ export default class BookPage extends Component {
             this.state.orders.map((order) =>
             ({id: order.id,
               avatar: window.location.origin +'/static/assets/avatars/' + order.maker_nick + '.png',
-              robosat: order.maker_nick, 
+              robot: order.maker_nick, 
+              robot_status: order.maker_status,
               type: order.type ? "Seller": "Buyer",
               amount: parseFloat(parseFloat(order.amount).toFixed(4)),
               currency: this.getCurrencyCode(order.currency),
@@ -90,21 +98,25 @@ export default class BookPage extends Component {
 
         columns={[
           // { field: 'id', headerName: 'ID', width: 40 },
-          { field: 'robosat', headerName: 'RoboSat', width: 240, 
+          { field: 'robot', headerName: 'Robot', width: 240, 
             renderCell: (params) => {return (
               <ListItemButton style={{ cursor: "pointer" }}>
                 <ListItemAvatar>
-                  <div style={{ width: 48, height: 48 }}>
+                <Tooltip placement="right" enterTouchDelay="0" title={params.row.robot_status}>
+                  <Badge variant="dot" overlap="circular" badgeContent="" color={this.statusBadgeColor(params.row.robot_status)}>
+                    <div style={{ width: 45, height: 45 }}>
                       <Image className='bookAvatar' 
                           disableError='true'
                           disableSpinner='true'
                           color='null'
-                        alt={params.row.robosat}
+                          alt={params.row.robot}
                           src={params.row.avatar}
                       />
                     </div>
+                  </Badge>
+                </Tooltip>
                 </ListItemAvatar>
-                <ListItemText primary={params.row.robosat}/>
+                <ListItemText primary={params.row.robot}/>
               </ListItemButton>
             );
           } },
@@ -141,7 +153,8 @@ export default class BookPage extends Component {
             this.state.orders.map((order) =>
             ({id: order.id,
               avatar: window.location.origin +'/static/assets/avatars/' + order.maker_nick + '.png',
-              robosat: order.maker_nick, 
+              robot: order.maker_nick, 
+              robot_status: order.maker_status,
               type: order.type ? "Seller": "Buyer",
               amount: parseFloat(parseFloat(order.amount).toFixed(4)),
               currency: this.getCurrencyCode(order.currency),
@@ -153,23 +166,30 @@ export default class BookPage extends Component {
 
         columns={[
           // { field: 'id', headerName: 'ID', width: 40 },
-          { field: 'robosat', headerName: 'Robot', width: 80, 
+          { field: 'robot', headerName: 'Robot', width: 80, 
             renderCell: (params) => {return (
-              <Tooltip placement="right" enterTouchDelay="0" title={params.row.robosat+" ("+params.row.type+")"}>
+              <Tooltip placement="right" enterTouchDelay="0" title={params.row.robot+" ("+params.row.robot_status+")"}>
+                <Badge variant="dot" overlap="circular" badgeContent="" color={this.statusBadgeColor(params.row.robot_status)}>
                   <div style={{ width: 45, height: 45 }}>
                     <Image className='bookAvatar' 
                         disableError='true'
                         disableSpinner='true'
                         color='null'
-                        alt={params.row.robosat}
+                        alt={params.row.robot}
                         src={params.row.avatar}
                     />
                   </div>
+                </Badge>
               </Tooltip>
             );
           } },
           { field: 'type', headerName: 'Is', width: 60, hide:'true'},
-          { field: 'amount', headerName: 'Amount', type: 'number', width: 80 },
+          { field: 'amount', headerName: 'Amount', type: 'number', width: 80, 
+          renderCell: (params) => {return (
+            <Tooltip placement="right" enterTouchDelay="0" title={params.row.type}>
+              <div style={{ cursor: "pointer" }}>{this.pn(params.row.amount)}</div>
+            </Tooltip>
+          )} },
           { field: 'currency', headerName: 'Currency', width: 100, 
           renderCell: (params) => {return (
             <Tooltip placement="left" enterTouchDelay="0" title={params.row.payment_method}>

frontend/src/components/OrderPage.js

@@ -355,16 +355,9 @@ export default class OrderPage extends Component {
 
   // Colors for the status badges
   statusBadgeColor(status){
-    if(status=='active'){return("success")}
+    if(status=='Active'){return("success")}
-    if(status=='seen_recently'){return("warning")}
+    if(status=='Seen recently'){return("warning")}
-    if(status=='inactive'){return('error')}
+    if(status=='Inactive'){return('error')}
-  }
-
-  // Colors for the status badges
-  statusTooltip(status){
-    if(status=='active'){return("Active")}
-    if(status=='seen_recently'){return("Seen recently")}
-    if(status=='inactive'){return('Inactive')}
   }
 
   orderBox=()=>{
@@ -380,8 +373,8 @@ export default class OrderPage extends Component {
           <List dense="true">
             <ListItem >
               <ListItemAvatar sx={{ width: 56, height: 56 }}>
-              <Tooltip placement="top" enterTouchDelay="0" title={this.statusTooltip(this.state.maker_status)} >
+              <Tooltip placement="top" enterTouchDelay="0" title={this.state.maker_status} >
-                <Badge variant="dot" badgeContent="" color={this.statusBadgeColor(this.state.maker_status)}>
+                <Badge variant="dot" overlap="circular" badgeContent="" color={this.statusBadgeColor(this.state.maker_status)}>
                   <Avatar className="flippedSmallAvatar"
                     alt={this.state.maker_nick} 
                     src={window.location.origin +'/static/assets/avatars/' + this.state.maker_nick + '.png'} 
@@ -401,7 +394,7 @@ export default class OrderPage extends Component {
                       <ListItemText primary={this.state.taker_nick + (this.state.type ? " (Buyer)" : " (Seller)")} secondary="Order taker"/>
                       <ListItemAvatar > 
                       <Tooltip enterTouchDelay="0" title={this.statusTooltip(this.state.taker_status)} >
-                        <Badge variant="dot" badgeContent="" color={this.statusBadgeColor(this.state.taker_status)}>
+                        <Badge variant="dot" overlap="circular" badgeContent="" color={this.statusBadgeColor(this.state.taker_status)}>
                           <Avatar className="smallAvatar"
                             alt={this.state.taker_nick} 
                             src={window.location.origin +'/static/assets/avatars/' + this.state.taker_nick + '.png'}