Fix cancel lnpayment at WFM. Add svgs, BTC currency flag. Fix pretty numbers

api/logics.py

@@ -405,6 +405,7 @@ class Logics():
         '''The order never shows up on the book and order 
         status becomes "cancelled" '''
         if order.status == Order.Status.WFB and order.maker == user:
+            cls.cancel_bond(order.maker_bond)
             order.status = Order.Status.UCA
             order.save()
             return True, None

api/models.py

@@ -24,7 +24,7 @@ class Currency(models.Model):
     currency_choices = [(int(val), label) for val, label in list(currency_dict.items())]
 
     currency = models.PositiveSmallIntegerField(choices=currency_choices, null=False, unique=True)
-    exchange_rate = models.DecimalField(max_digits=20, decimal_places=8, default=None, null=True, validators=[MinValueValidator(0)])
+    exchange_rate = models.DecimalField(max_digits=14, decimal_places=4, default=None, null=True, validators=[MinValueValidator(0)])
     timestamp = models.DateTimeField(auto_now_add=True)
 
     def __str__(self):

frontend/src/components/BookPage.js

@@ -67,7 +67,9 @@ export default class BookPage extends Component {
 
   // pretty numbers
   pn(x) {
-    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+      var parts = x.toString().split(".");
+      parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+      return parts.join(".");
   }
   
   // Colors for the status badges
@@ -88,7 +90,7 @@ export default class BookPage extends Component {
               robot: order.maker_nick, 
               robot_status: order.maker_status,
               type: order.type ? "Seller": "Buyer",
-              amount: parseFloat(parseFloat(order.amount).toFixed(4)),
+              amount: parseFloat(parseFloat(order.amount).toFixed(5)),
               currency: this.getCurrencyCode(order.currency),
               payment_method: order.payment_method,
               price: order.price,
@@ -121,10 +123,13 @@ export default class BookPage extends Component {
             );
           } },
           { field: 'type', headerName: 'Is', width: 60 },
-          { field: 'amount', headerName: 'Amount', type: 'number', width: 80 },
+          { field: 'amount', headerName: 'Amount', type: 'number', width: 80,
+          renderCell: (params) => {return (
+            <div style={{ cursor: "pointer" }}>{this.pn(params.row.amount)}</div>
+          )}},
           { field: 'currency', headerName: 'Currency', width: 100, 
           renderCell: (params) => {return (
-            <div style={{ cursor: "pointer" }}>{params.row.currency+" "+getFlags(params.row.currency)}</div>)
+            <div style={{ cursor: "pointer" }}>{params.row.currency+" "}{getFlags(params.row.currency)}</div>)
           }},
           { field: 'payment_method', headerName: 'Payment Method', width: 180 },
           { field: 'price', headerName: 'Price', type: 'number', width: 140,
@@ -232,8 +237,8 @@ export default class BookPage extends Component {
           </Grid> */}
 
           <Grid item xs={6} align="right">
-            <FormControl >
+            <FormControl align="center">
-              <FormHelperText>
+              <FormHelperText align="center">
                 I want to 
               </FormHelperText>
               <Select
@@ -252,9 +257,9 @@ export default class BookPage extends Component {
           </Grid>
 
           <Grid item xs={6} align="left">
-            <FormControl >
+            <FormControl align="center">
-              <FormHelperText>
+              <FormHelperText align="center">
-                And pay with 
+                and {this.state.type == 0 ? ' receive' : (this.state.type == 1 ? ' pay with' : ' use' )} 
               </FormHelperText>
               <Select
                   label="Select Payment Currency"
@@ -267,7 +272,7 @@ export default class BookPage extends Component {
               >     <MenuItem value={0}>🌍 ANY</MenuItem>
                     {
                       Object.entries(this.state.currencies_dict)
-                      .map( ([key, value]) => <MenuItem value={parseInt(key)}>{getFlags(value) + " " + value}</MenuItem> )
+                      .map( ([key, value]) => <MenuItem value={parseInt(key)}>{getFlags(value)} {" " + value}</MenuItem> )
                     }
               </Select>
             </FormControl>

frontend/src/components/BottomBar.js

@@ -24,7 +24,9 @@ import WebIcon from '@mui/icons-material/Web';
 
 // pretty numbers
 function pn(x) {
-    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+    var parts = x.toString().split(".");
+    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+    return parts.join(".");
 }
 
 export default class BottomBar extends Component {

frontend/src/components/MakerPage.js

@@ -25,7 +25,9 @@ function pn(x) {
     if(x==null){
         return(null)
     }
-    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+    var parts = x.toString().split(".");
+    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+    return parts.join(".");  
   }
 
 export default class MakerPage extends Component {
@@ -209,7 +211,7 @@ export default class MakerPage extends Component {
                                     onChange={this.handleCurrencyChange}>
                                         {Object.entries(this.state.currencies_dict)
                                         .map( ([key, value]) => <MenuItem value={parseInt(key)}>
-                                            {getFlags(value) + " " + value}
+                                            {getFlags(value)}{" " + value}
                                             </MenuItem> )}
                                 </Select>
                             </div>

frontend/src/components/OrderPage.js

@@ -32,7 +32,9 @@ const csrftoken = getCookie('csrftoken');
 
 // pretty numbers
 function pn(x) {
-  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  var parts = x.toString().split(".");
+  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  return parts.join(".");
 }
 
 export default class OrderPage extends Component {

frontend/src/components/TradeBox.js

@@ -30,7 +30,9 @@ const csrftoken = getCookie('csrftoken');
 
 // pretty numbers
 function pn(x) {
-  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  var parts = x.toString().split(".");
+  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  return parts.join(".");
 }
 
 export default class TradeBox extends Component {

frontend/src/components/getFlags.js

@@ -1,3 +1,6 @@
+import React, { Component } from 'react';
+import SvgIcon from '@mui/material/SvgIcon';
+
 export default function getFlags(code){
     if(code == 'AUD') return '🇦🇺';
     if(code == 'ARS') return '🇦🇷';
@@ -34,6 +37,6 @@ export default function getFlags(code){
     if(code == 'UYU') return '🇺🇾';
     if(code == 'PYG') return '🇵🇾';
     if(code == 'BOB') return '🇧🇴';
-    if(code == 'BTC') return '₿';
+    if(code == 'BTC') return <SvgIcon className='svg-icon' xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="96px" height="96px"><path fill="#f5bc00" d="M24,44L24,44c11.045,0,20-8.955,20-20l0,0c0-11.045-8.955-20-20-20l0,0C12.955,4,4,12.955,4,24l0,0 C4,35.047,12.953,44,24,44z"/><path fill="#fae56b" d="M33,20c0-2.608-1.672-4.831-4-5.657V11h-4v3h-3v-3h-4v3h-3v4h3v12h-3v4h3v3h4v-3h3v3h4v-3.343	c2.328-0.825,4-3.049,4-5.657c0-1.535-0.58-2.938-1.532-4C32.42,22.938,33,21.535,33,20z M22,18h5c1.103,0,2,0.897,2,2s-0.897,2-2,2	h-5V18z M27,30h-5v-4h5c1.103,0,2,0.897,2,2S28.103,30,27,30z"/><rect width="4" height="4" x="18" y="14" fill="#fff3b8"/><rect width="4" height="4" x="18" y="30" fill="#fff3b8"/></SvgIcon>;
     return '🏳';
 };

frontend/static/css/index.css

@@ -89,3 +89,8 @@ body {
   border: 0.3px solid #555; 
   filter: drop-shadow(0.5px 0.5px 0.5px #000000);
 }
+
+.svg-icon {
+  position: relative;
+  top: 4px;
+}

setup.md

@@ -1,4 +1,5 @@
 # Set up
+*Attention: to use RoboSats you do not need to run the stack, simply visit the webapp. This setup guide is intended for developer cotributors and platform operators.*
 # The easy way
 ## With Docker (-dev containers running on testnet)
 Spinning up docker for the first time
@@ -12,6 +13,33 @@ docker-compose restart
 ```
 Copy the `.env-sample` file into `.env` and check the settings are of your liking.
 
+### (optional, if error) Install LND python dependencies
+Depending on your setup your environment is good to go. But it might happen that mounting when "." into "/src/usr/robosats" in the docker-compose.yml, it deletes the lnd grpc files that where generated during the docker build. If that is the case, run the following:
+```
+cd api/lightning
+pip install grpcio grpcio-tools googleapis-common-protos
+git clone https://github.com/googleapis/googleapis.git
+curl -o lightning.proto -s https://raw.githubusercontent.com/lightningnetwork/lnd/master/lnrpc/lightning.proto
+python3 -m grpc_tools.protoc --proto_path=googleapis:. --python_out=. --grpc_python_out=. lightning.proto
+```
+We also use the *Invoices* and *Router* subservices for invoice validation and payment routing.
+```
+curl -o invoices.proto -s https://raw.githubusercontent.com/lightningnetwork/lnd/master/lnrpc/invoicesrpc/invoices.proto
+python3 -m grpc_tools.protoc --proto_path=googleapis:. --python_out=. --grpc_python_out=. invoices.proto
+curl -o router.proto -s https://raw.githubusercontent.com/lightningnetwork/lnd/master/lnrpc/routerrpc/router.proto
+python3 -m grpc_tools.protoc --proto_path=googleapis:. --python_out=. --grpc_python_out=. router.proto
+```
+Generated files can be automatically patched for relative imports like this:
+```
+sed -i 's/^import .*_pb2 as/from . \0/' api/lightning/router_pb2.py
+sed -i 's/^import .*_pb2 as/from . \0/' api/lightning/invoices_pb2.py
+sed -i 's/^import .*_pb2 as/from . \0/' api/lightning/router_pb2_grpc.py
+sed -i 's/^import .*_pb2 as/from . \0/' api/lightning/lightning_pb2_grpc.py
+sed -i 's/^import .*_pb2 as/from . \0/' api/lightning/invoices_pb2_grpc.py
+```
+
+All set!
+
 Spinning up any other time:
 `docker-compose up -d`
 
@@ -41,6 +69,7 @@ Connect
 Open channel
 `docker exec -it lnd-dev lncli --network=testnet openchannel node_id --local_amt LOCAL_AMT --push_amt PUSH_AMT`
 
+RoboSats webapp should be accessible on localhost:8000
 # The harder way
 ## Django development environment
 ### Install Python and pip