From 2b44d32b01c0da5fc58ae0fbb4552e6e268a7f8e Mon Sep 17 00:00:00 2001
From: Reckless_Satoshi <reckless.satoshi@protonmail.com>
Date: Tue, 3 May 2022 13:21:04 -0700
Subject: [PATCH] Store robot token in cookies. Add renew order after success
 for makers.

---
 api/views.py                           | 12 ++++----
 frontend/src/components/BookPage.js    | 40 +++++++++++++-------------
 frontend/src/components/BottomBar.js   |  8 +++---
 frontend/src/components/HomePage.js    |  3 +-
 frontend/src/components/MakerPage.js   |  2 +-
 frontend/src/components/TradeBox.js    | 15 +++++++++-
 frontend/src/components/UserGenPage.js | 29 ++++++++++---------
 frontend/src/utils/cookies.js          |  4 +++
 8 files changed, 67 insertions(+), 46 deletions(-)

diff --git a/api/views.py b/api/views.py
index 1b8f8b31..50918732 100644
--- a/api/views.py
+++ b/api/views.py
@@ -384,15 +384,17 @@ class OrderView(viewsets.ViewSet):
                 # Add invoice amount once again if invoice was expired.
                 data["invoice_amount"] = Logics.payout_amount(order,request.user)[1]["invoice_amount"]
 
-        # 10) If status is 'Expired', add expiry reason.
-        elif (order.status == Order.Status.EXP):
-            data["expiry_reason"] = order.expiry_reason
-            data["expiry_message"] = Order.ExpiryReasons(order.expiry_reason).label
-            # other pieces of info useful to renew an identical order
+        # 10) If status is 'Expired', "Sending", "Finished" or "failed routing", add info for renewal:
+        elif order.status in [Order.Status.EXP, Order.Status.SUC, Order.Status.PAY,  Order.Status.FAI]:
             data["public_duration"] = order.public_duration
             data["bond_size"] = order.bond_size
             data["bondless_taker"] = order.bondless_taker
 
+            # If status is 'Expired' add expiry reason
+            if order.status == Order.Status.EXP:
+                data["expiry_reason"] = order.expiry_reason
+                data["expiry_message"] = Order.ExpiryReasons(order.expiry_reason).label
+            
         return Response(data, status.HTTP_200_OK)
 
     def take_update_confirm_dispute_cancel(self, request, format=None):
diff --git a/frontend/src/components/BookPage.js b/frontend/src/components/BookPage.js
index a7987092..afec3d64 100644
--- a/frontend/src/components/BookPage.js
+++ b/frontend/src/components/BookPage.js
@@ -26,7 +26,7 @@ class BookPage extends Component {
       pageSize: 6,
     };
 
-    if(this.props.orders.length == 0){
+    if(this.props.bookOrders.length == 0){
       this.getOrderDetails(2, 0)
     }
   }
@@ -85,8 +85,8 @@ class BookPage extends Component {
       <div style={{ height: 422, width: '100%' }}>
       <DataGrid
         rows={
-            this.props.orders.filter(order => order.type == this.props.type || this.props.type == 2)
-            .filter(order => order.currency == this.props.currency || this.props.currency == 0)
+            this.props.bookOrders.filter(order => order.type == this.props.bookType || this.props.bookType == 2)
+            .filter(order => order.currency == this.props.bookCurrency || this.props.bookCurrency == 0)
             .map((order) =>
             ({id: order.id,
               avatar: window.location.origin +'/static/assets/avatars/' + order.maker_nick + '.png',
@@ -103,7 +103,7 @@ class BookPage extends Component {
               premium: order.premium,
             })
           )}
-        loading={this.props.loading}
+        loading={this.props.bookLoading}
         columns={[
           // { field: 'id', headerName: 'ID', width: 40 },
           { field: 'robot', headerName: t("Robot"), width: 240, 
@@ -166,7 +166,7 @@ class BookPage extends Component {
             </Stack>
           )
         }}
-        pageSize={this.props.loading ? 0 : this.state.pageSize}
+        pageSize={this.props.bookLoading ? 0 : this.state.pageSize}
         rowsPerPageOptions={[6,20,50]}
         onPageSizeChange={(newPageSize) => this.setState({pageSize:newPageSize})}
         onRowClick={(params) => this.handleRowClick(params.row.id)} // Whole row is clickable, but the mouse only looks clickly in some places.
@@ -180,10 +180,10 @@ class BookPage extends Component {
     return (
       <div style={{ height: 422, width: '100%' }}>
       <DataGrid
-        loading={this.props.loading}
+        loading={this.props.bookLoading}
         rows={
-          this.props.orders.filter(order => order.type == this.props.type || this.props.type == 2)
-          .filter(order => order.currency == this.props.currency || this.props.currency == 0)
+          this.props.bookOrders.filter(order => order.type == this.props.bookType || this.props.bookType == 2)
+          .filter(order => order.currency == this.props.bookCurrency || this.props.bookCurrency == 0)
           .map((order) =>
             ({id: order.id,
               avatar: window.location.origin +'/static/assets/avatars/' + order.maker_nick + '.png',
@@ -267,7 +267,7 @@ class BookPage extends Component {
             </Stack>
           )
         }}
-        pageSize={this.props.loading ? 0 : this.state.pageSize}
+        pageSize={this.props.bookLoading ? 0 : this.state.pageSize}
         rowsPerPageOptions={[6,20,50]}
         onPageSizeChange={(newPageSize) => this.setState({pageSize:newPageSize})}
         onRowClick={(params) => this.handleRowClick(params.row.id)} // Whole row is clickable, but the mouse only looks clickly in some places.
@@ -308,10 +308,10 @@ class BookPage extends Component {
       <Grid item xs={12} align="center">
         <Grid item xs={12} align="center">
           <Typography component="h5" variant="h5">
-            {this.props.type == 0 ?
-              t("No orders found to sell BTC for {{currencyCode}}",{currencyCode:this.props.currencyCode})
+            {this.props.bookType == 0 ?
+              t("No orders found to sell BTC for {{currencyCode}}",{currencyCode:this.props.bookCurrencyCode})
             :
-              t("No orders found to buy BTC for {{currencyCode}}",{currencyCode:this.props.currencyCode})
+              t("No orders found to buy BTC for {{currencyCode}}",{currencyCode:this.props.bookCurrencyCode})
             }
           </Typography>
         </Grid>
@@ -382,7 +382,7 @@ class BookPage extends Component {
             <FormControl align="center">
               <FormHelperText align="center">
                 <div style={{textAlign:"center", position:"relative", left:"-5px"}}>
-                  {this.props.type == 0 ? t("and receive") : (this.props.type == 1 ? t("and pay with") : t("and use") )}
+                  {this.props.bookType == 0 ? t("and receive") : (this.props.bookType == 1 ? t("and pay with") : t("and use") )}
                 </div>
               </FormHelperText>
               <Select
@@ -390,7 +390,7 @@ class BookPage extends Component {
                   sx={{width:120}}
                   label={t("Select Payment Currency")}
                   required="true" 
-                  value={this.props.currency} 
+                  value={this.props.bookCurrency} 
                   inputProps={{
                       style: {textAlign:"center"}
                   }}
@@ -403,14 +403,14 @@ class BookPage extends Component {
               </Select>
             </FormControl>
           </Grid>
-        { this.props.notFound ? "" :
+        { this.props.bookNotFound ? "" :
           <Grid item xs={12} align="center">
             <Typography component="h5" variant="h5">
-               {this.props.type == 0 ? 
-                t("You are SELLING BTC for {{currencyCode}}",{currencyCode:this.props.currencyCode}) 
+               {this.props.bookType == 0 ? 
+                t("You are SELLING BTC for {{currencyCode}}",{currencyCode:this.props.bookCurrencyCode}) 
                : 
-                (this.props.type == 1 ? 
-                  t("You are BUYING BTC for {{currencyCode}}",{currencyCode:this.props.currencyCode})
+                (this.props.bookType == 1 ? 
+                  t("You are BUYING BTC for {{currencyCode}}",{currencyCode:this.props.bookCurrencyCode})
                 :
                   t("You are looking at all")
                 )
@@ -419,7 +419,7 @@ class BookPage extends Component {
           </Grid>
           }
 
-        { this.props.notFound ?
+        { this.props.bookNotFound ?
           <this.NoOrdersFound/>
           : 
           <Grid item xs={12} align="center">
diff --git a/frontend/src/components/BottomBar.js b/frontend/src/components/BottomBar.js
index 25b568e3..7d402b18 100644
--- a/frontend/src/components/BottomBar.js
+++ b/frontend/src/components/BottomBar.js
@@ -326,18 +326,18 @@ class BottomBar extends Component {
                         <PasswordIcon/>
                     </ListItemIcon>
                     <ListItemText secondary={t("Your token (will not remain here)")}>
-                    {this.props.token ?
+                    {getCookie("robot_token") ?
                     <TextField
                         disabled
                         label={t("Back it up!")}
-                        value={this.props.token }
+                        value={getCookie("robot_token") }
                         variant='filled'
                         size='small'
                         InputProps={{
                             endAdornment:
                             <Tooltip disableHoverListener enterTouchDelay="0" title={t("Copied!")}>
-                                <IconButton onClick= {()=>navigator.clipboard.writeText(this.props.token)}>
-                                    <ContentCopy />
+                                <IconButton onClick= {()=> (navigator.clipboard.writeText(getCookie("robot_token")) & this.props.setAppState({copiedToken:true}))}>
+                                    <ContentCopy color={this.props.copiedToken ? "inherit" : "primary"}/>
                                 </IconButton>
                             </Tooltip>,
                             }}
diff --git a/frontend/src/components/HomePage.js b/frontend/src/components/HomePage.js
index 451dea6b..d6fb25d5 100644
--- a/frontend/src/components/HomePage.js
+++ b/frontend/src/components/HomePage.js
@@ -13,6 +13,7 @@ export default class HomePage extends Component {
       this.state = {
         nickname: null,
         token: null,
+        copiedToken: false,
         avatarLoaded: false,
         buyChecked: false,
         sellChecked: false,
@@ -40,7 +41,7 @@ export default class HomePage extends Component {
                         <Route exact path='/' render={(props) => <UserGenPage {...props} {...this.state} setAppState={this.setAppState}/>}/>
                         <Route path='/ref/:refCode' render={(props) => <UserGenPage {...props} {...this.state} setAppState={this.setAppState}/>}/>
                         <Route path='/make' component={MakerPage}/>
-                        <Route path='/book' render={(props) => <BookPage {...props} buyChecked={this.state.buyChecked} sellChecked={this.state.sellChecked} orders={this.state.bookOrders} loading={this.state.bookLoading} notFound={this.state.bookNotFound} type={this.state.bookType} currencyCode={this.state.bookCurrencyCode} currency={this.state.bookCurrency} setAppState={this.setAppState} />}/>
+                        <Route path='/book' render={(props) => <BookPage {...props} {...this.state} setAppState={this.setAppState} />}/>
                         <Route path="/order/:orderId" component={OrderPage}/>
                     </Switch>
                   </div>
diff --git a/frontend/src/components/MakerPage.js b/frontend/src/components/MakerPage.js
index a303eefe..ef33c6ef 100644
--- a/frontend/src/components/MakerPage.js
+++ b/frontend/src/components/MakerPage.js
@@ -276,7 +276,7 @@ class MakerPage extends Component {
                         />
                         <FormControlLabel
                             value="1"
-                            control={<Radio icon={<SellSatsIcon sx={{width:"30px",height:"30px"}} color="text.secondary"/>} checkedIcon={<SellSatsCheckedIcon sx={{width:"30px",height:"30px"}} color="secondary"/>}/>}
+                            control={<Radio color="secondary" icon={<SellSatsIcon sx={{width:"30px",height:"30px"}} color="text.secondary"/>} checkedIcon={<SellSatsCheckedIcon sx={{width:"30px",height:"30px"}} color="secondary"/>}/>}
                             label={this.state.type == 1 ? <Typography color="secondary"><b>{t("Sell")}</b></Typography>: <Typography color="text.secondary">{t("Sell")}</Typography>}
                             labelPlacement="end"
                         />
diff --git a/frontend/src/components/TradeBox.js b/frontend/src/components/TradeBox.js
index 0eb1327e..8c495689 100644
--- a/frontend/src/components/TradeBox.js
+++ b/frontend/src/components/TradeBox.js
@@ -446,7 +446,7 @@ class TradeBox extends Component {
               <ListItemIcon>
                 <PercentIcon/>
               </ListItemIcon>
-                <ListItemText primary={t("Premium rank") +" "+Number(this.props.data.premium_percentile*100).toPrecision(2)+"%"}
+                <ListItemText primary={t("Premium rank") +" "+parseInt(this.props.data.premium_percentile*100)+"%"}
                   secondary={t("Among public {{currencyCode}} orders (higher is cheaper)",{ currencyCode: this.props.data.currencyCode })}/>
               </ListItem>
             <Divider/>
@@ -984,6 +984,8 @@ handleRatingRobosatsChange=(e)=>{
 
   showRateSelect(){
     const { t } = this.props;
+    var show_renew = this.props.data.is_maker;
+
     return(
       <Grid container spacing={1}>
         {/* Make confirmation sound for Chat Open. */}
@@ -1028,6 +1030,17 @@ handleRatingRobosatsChange=(e)=>{
         <Grid item xs={12} align="center">
           <Button color='primary' onClick={() => {this.props.push('/')}}>{t("Start Again")}</Button>
         </Grid>
+
+        {show_renew ?
+          <Grid item xs={12} align="center">
+          {this.state.renewLoading ?
+              <CircularProgress/>
+            :
+              <Button color='primary' onClick={this.handleRenewOrderButtonPressed}>{t("Renew Order")}</Button>
+          }
+          </Grid>
+        : null}
+
       {this.showBondIsReturned()}
     </Grid>
     )
diff --git a/frontend/src/components/UserGenPage.js b/frontend/src/components/UserGenPage.js
index 3e5954f3..da03a34a 100644
--- a/frontend/src/components/UserGenPage.js
+++ b/frontend/src/components/UserGenPage.js
@@ -11,7 +11,7 @@ import ContentCopy from "@mui/icons-material/ContentCopy";
 import RoboSatsNoTextIcon from "./icons/RoboSatsNoTextIcon"
 import BoltIcon from '@mui/icons-material/Bolt';
 
-import { getCookie } from "../utils/cookies";
+import { getCookie, writeCookie } from "../utils/cookies";
 
 class UserGenPage extends Component {
   constructor(props) {
@@ -37,7 +37,7 @@ class UserGenPage extends Component {
       var newToken = this.genBase62Token(36)
       this.state = {
         token: newToken
-      }
+      };
       this.getGeneratedUser(newToken);
     }
   }
@@ -73,14 +73,14 @@ class UserGenPage extends Component {
           avatarLoaded: false,
         })
         :
-        this.props.setAppState({
+        (console.log(token) & this.props.setAppState({
           nickname: data.nickname,
-          token: this.state.token,
+          token: token,
           avatarLoaded: false,
-      }));
-      });
+      })) & writeCookie("robot_token",token))
+     });
   }
-
+  
   delGeneratedUser() {
     const requestOptions = {
       method: 'DELETE',
@@ -91,11 +91,12 @@ class UserGenPage extends Component {
   }
 
   handleClickNewRandomToken=()=>{
+    var token = this.genBase62Token(36);
     this.setState({
-      token: this.genBase62Token(36),
+      token: token,
       tokenHasChanged: true,
-      copied: true,
     });
+    this.props.setAppState({copiedToken: true})
   }
 
   handleChangeToken=(e)=>{
@@ -108,8 +109,8 @@ class UserGenPage extends Component {
   handleClickSubmitToken=()=>{
     this.delGeneratedUser();
     this.getGeneratedUser(this.state.token);
-    this.setState({loadingRobot: true, tokenHasChanged: false, copied: false});
-    this.props.setAppState({avatarLoaded: false, nickname: null, token: null});
+    this.setState({loadingRobot: true, tokenHasChanged: false});
+    this.props.setAppState({avatarLoaded: false, nickname: null, token: null, copiedToken: false});
   }
 
   handleClickOpenInfo = () => {
@@ -196,9 +197,9 @@ class UserGenPage extends Component {
                 }}
                 InputProps={{
                   startAdornment:
-                  <Tooltip disableHoverListener open={this.state.copied} enterTouchDelay="0" title={t("Copied!")}>
-                    <IconButton  onClick= {()=> (navigator.clipboard.writeText(this.state.token) & this.setState({copied:true}))}>
-                      <ContentCopy color={this.props.avatarLoaded & !this.state.copied & !this.state.bad_request ? 'primary' : 'inherit' } sx={{width:18, height:18}}/>
+                  <Tooltip disableHoverListener enterTouchDelay="0" title={t("Copied!")}>
+                    <IconButton  onClick= {()=> (navigator.clipboard.writeText(this.state.token) & this.props.setAppState({copiedToken:true}))}>
+                      <ContentCopy color={this.props.avatarLoaded & !this.props.copiedToken & !this.state.bad_request ? 'primary' : 'inherit' } sx={{width:18, height:18}}/>
                     </IconButton>
                   </Tooltip>,
                   endAdornment:
diff --git a/frontend/src/utils/cookies.js b/frontend/src/utils/cookies.js
index 02021002..110e9114 100644
--- a/frontend/src/utils/cookies.js
+++ b/frontend/src/utils/cookies.js
@@ -13,3 +13,7 @@ export const getCookie = (name) => {
   }
   return cookieValue;
 };
+
+export const writeCookie = (key,value) => {
+  document.cookie=key+"="+value;
+}