Fix payment method delete bug, improve viz (better icons, better shadows)

api/logics.py

@@ -362,7 +362,6 @@ class Logics:
         # Make order public again
         order.taker = None
         order.taker_bond = None
-        order.last_satoshis = cls.satoshis_now(order)
         cls.publish_order(order)
         return True
 
@@ -710,12 +709,14 @@ class Logics:
         order.save()
         return
 
-    def publish_order(order):
+    @classmethod
+    def publish_order(cls, order):
         order.status = Order.Status.PUB
         order.expires_at = order.created_at + timedelta(
             seconds=order.t_to_expire(Order.Status.PUB))
         if order.has_range:
             order.amount = None
+            order.last_satoshis = cls.satoshis_now(order)
         order.save()
         # send_message.delay(order.id,'order_published') # too spammy
         return

frontend/src/components/BookPage.js

@@ -233,7 +233,7 @@ export default class BookPage extends Component {
           { field: 'payment_method', headerName: 'Payment Method', width: 180, hide:'true'},
           { field: 'payment_icons', headerName: 'Pay', width: 75 ,
           renderCell: (params) => {return (
-            <div style={{position:'relative', left:'-5px', cursor: "pointer", align:"center"}}><PaymentText size={16} text={params.row.payment_method}/></div>
+            <div style={{position:'relative', left:'-8px', cursor: "pointer", align:"center"}}><PaymentText size={16} text={params.row.payment_method}/></div>
           )} },
           { field: 'price', headerName: 'Price', type: 'number', width: 140, hide:'true',
           renderCell: (params) => {return (

frontend/src/components/MakerPage.js

@@ -160,14 +160,14 @@ export default class MakerPage extends Component {
     }
 
     handlePaymentMethodChange=(value)=>{
-        if (value.length > 65){
+        if (value.length > 50){
             this.setState({
                 badPaymentMethod: true,    
             });
         }else{
         this.setState({
-            payment_method: value.substring(0,68),
-            badPaymentMethod: value.length > 65,    
+            payment_method: value.substring(0,53),
+            badPaymentMethod: value.length > 50,    
         });
     }
     }

frontend/src/components/PaymentText.js

@@ -56,7 +56,7 @@ export default class PaymentText extends Component {
                 custom_methods = custom_methods.replace(method.name,'')
                 rows.push(
                     <Tooltip placement="top" enterTouchDelay="0" title={method.name} >
-                        <div style={{display: 'inline-block', width: this.props.size+1, height: this.props.size}}>
+                        <div style={{display: 'inline-block', width: this.props.size+2, height: this.props.size}}>
                             <PaymentIcon width={this.props.size} height={this.props.size} icon={method.icon}/>
                         </div>
                     </Tooltip>
@@ -68,20 +68,19 @@ export default class PaymentText extends Component {
         var words = this.props.text.match(/\b(\w+)\b/g)
         var custom = false
         words.forEach((word, i) =>{
-            console.log(word);
             if(!someMethods.map(item => item.name).includes(word)){ custom=true;}
         });
 
         if(custom==true){rows.push(
             <Tooltip placement="top" enterTouchDelay="0" title={this.props.verbose ? "Others": "Other: "+ custom_methods} >
-                <div style={{position:'relative', display: 'inline-block',width: this.props.size+1, maxHeight: this.props.size, top:'1px'}}>
+                <div style={{position:'relative', display: 'inline-block',width: this.props.size+2, maxHeight: this.props.size, top:'1px'}}>
                     <PaymentIcon width={this.props.size*1.1} height={this.props.size*1.1} icon={"custom"}/>
                 </div>
             </Tooltip>
             )}
 
         if(this.props.verbose){
-            return (<>{rows} <span>{custom_methods}</span> </>)
+            return (<>{rows} <span>{custom_methods}</span></>)
         }else{
             return rows
         }
@@ -89,7 +88,9 @@ export default class PaymentText extends Component {
 
     render() {
       return ( 
-        <div style={{position:'flex',alignItems:'center', flexWrap:'wrap'}}> {this.parseText()}</div>
+        <div style={{position:'flex',alignItems:'center', flexWrap:'wrap'}}>
+            {this.parseText()}
+        </div>
       )
     }
   };

frontend/src/components/autocompletePayments.js

@@ -204,7 +204,7 @@ export default function AutocompletePayments(props) {
     multiple: true,
     options: props.optionsType=="fiat" ? somePaymentMethods : someSwapDestinations,
     getOptionLabel: (option) => option.name,
-    onInputChange: (e) => setVal(e.target.value),
+    onInputChange: (e) => setVal(e ? (e.target.value ? e.target.value : "") : ""),
     onChange: (event, value) => props.onAutocompleteChange(optionsToString(value)),
     onClose: () => (setVal(() => "")),
   });
@@ -233,6 +233,7 @@ export default function AutocompletePayments(props) {
     <Root>
       <div style={{height:'5px'}}></div>
       <div {...getRootProps()} >
+        
         <Label {...getInputLabelProps()} error={props.error}>{props.label}</Label>
         <InputWrapper ref={setAnchorEl} error={props.error} className={focused ? 'focused' : ''}>
           {value.map((option, index) => (
@@ -246,9 +247,16 @@ export default function AutocompletePayments(props) {
             <div style={{position:'fixed', minHeight:'20px',  marginLeft: '53px', marginTop: '-13px'}}>
                 <ListHeader><i>You can add any method </i></ListHeader>
             </div>
+            {val != null?
+              (val.length > 2 ?
+                <div style={{position:'relative',top:'3px'}}>
+                  <Button size="small" sx={{width:'240px'}} onClick={() => handleAddNew(getInputProps())}><DashboardCustomizeIcon sx={{width:18,height:18}}/>Add</Button>
+                </div>
+              :null)
+            :null}
           {groupedOptions.map((option, index) => (
             <li {...getOptionProps({ option, index })}>
-              <span align="left">{option.name}</span>
+              <span style={{textAlign: 'left'}}>{option.name}</span>
               <CheckIcon fontSize="small" />
             </li>
           ))}
@@ -257,7 +265,7 @@ export default function AutocompletePayments(props) {
       //Here goes what happens if there is no groupedOptions
       (getInputProps().value.length > 0 ?
         <Listbox {...getListboxProps()}>
-          <Button sx={{width:'240px'}} onClick={() => handleAddNew(getInputProps())}><DashboardCustomizeIcon/>Add</Button>
+          <Button sx={{width:'240px'}} onClick={() => handleAddNew(getInputProps())}><DashboardCustomizeIcon sx={{width:20,height:20}}/>Add</Button>
         </Listbox>
         :null)
       }