Small cosmetic and usuability fixes

frontend/src/components/BookPage.js

@@ -12,15 +12,12 @@ export default class BookPage extends Component {
     super(props);
     this.state = {
       orders: new Array({id:0,}),
-      currency: this.props.currency ? this.props.currency : 0,
-      type: this.props.type ? this.props.type : 2,
       currencies_dict: {"0":"ANY"},
       loading: true,
       pageSize: 6,
     };
     this.getCurrencyDict()
     this.getOrderDetails(this.props.type, this.props.currency)
-    this.state.currencyCode = this.getCurrencyCode(this.props.currency)
   }
 
   getOrderDetails(type, currency) {
@@ -41,16 +38,17 @@ export default class BookPage extends Component {
     this.setState({
         loading: true,     
     });
-    this.props.setAppState({type: e.target.value})
+    this.props.setAppState({bookType: e.target.value})
     this.getOrderDetails(e.target.value,this.props.currency);
   }
   handleCurrencyChange=(e)=>{
-    this.setState({
+    var currency = e.target.value;
-        currencyCode: this.getCurrencyCode(e.target.value),
+    this.setState({loading: true})
-        loading: true,
+    this.props.setAppState({
+      bookCurrency: currency,
+      bookCurrencyCode: this.getCurrencyCode(currency),
     })
-    this.props.setAppState({currency: e.target.value})
+    this.getOrderDetails(this.props.type, currency);
-    this.getOrderDetails(this.props.type, e.target.value);
   }
   
   getCurrencyDict() {
@@ -64,7 +62,9 @@ export default class BookPage extends Component {
 
   getCurrencyCode(val){
     if (val){
-      return this.state.currencies_dict[val.toString()]
+      return val == 0 ? 'ANY' : this.state.currencies_dict[val.toString()]
+    }else{
+      return 'ANY'
     }
   }
 
@@ -309,7 +309,7 @@ export default class BookPage extends Component {
         { this.state.not_found ? "" :
           <Grid item xs={12} align="center">
             <Typography component="h5" variant="h5">
-              You are {this.props.type == 0 ? <b> selling </b> : (this.props.type == 1 ? <b> buying </b> :" looking at all ")} BTC for {this.state.currencyCode ? this.state.currencyCode : 'ANY'}
+              You are {this.props.type == 0 ? <b> selling </b> : (this.props.type == 1 ? <b> buying </b> :" looking at all ")} BTC for {this.props.currencyCode}
             </Typography>
           </Grid>
           }
@@ -318,14 +318,14 @@ export default class BookPage extends Component {
           (<Grid item xs={12} align="center">
             <Grid item xs={12} align="center">
               <Typography component="h5" variant="h5">
-                No orders found to {this.props.type == 0 ? ' sell ' :' buy ' } BTC for {this.state.currencyCode}
+                No orders found to {this.props.type == 0 ? ' sell ' :' buy ' } BTC for {this.props.currencyCode}
               </Typography>
             </Grid>
             <br/>
             <Grid item>
-              <Button variant="contained" color='primary' to='/make/' component={Link}>Make Order</Button>
+              <Button size="large" variant="contained" color='primary' to='/make/' component={Link}>Make Order</Button>
             </Grid>
-              <Typography component="body1" variant="body1">
+              <Typography color="primary" component="body1" variant="body1">
                 Be the first one to create an order
                 <br/>
                 <br/>

frontend/src/components/HomePage.js

@@ -16,6 +16,7 @@ export default class HomePage extends Component {
         avatarLoaded: false,
         bookType:2,
         bookCurrency:0,
+        bookCurrencyCode:'ANY',
       }
     }
   
@@ -35,7 +36,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} type={this.state.bookType} currency={this.state.bookCurrency} setAppState={this.setAppState} />}/>
+                        <Route path='/book' render={(props) => <BookPage {...props} type={this.state.bookType} currencyCode={this.state.bookCurrencyCode} currency={this.state.bookCurrency} setAppState={this.setAppState} />}/>
                         <Route path="/order/:orderId" component={OrderPage}/>
                     </Switch>
                   </div>

frontend/src/components/MakerPage.js

@@ -484,6 +484,13 @@ export default class MakerPage extends Component {
         );
     }
 
+    minAmountError=()=>{
+        return this.state.minAmount < this.getMinAmount() || this.state.maxAmount < this.state.minAmount || this.state.minAmount < this.state.maxAmount/(this.maxRangeAmountMultiple+0.15) || this.state.minAmount*(this.minRangeAmountMultiple-0.1) > this.state.maxAmount
+    }
+    maxAmountError=()=>{
+        return this.state.maxAmount > this.getMaxAmount() || this.state.maxAmount < this.state.minAmount || this.state.minAmount < this.state.maxAmount/(this.maxRangeAmountMultiple+0.15) || this.state.minAmount*(this.minRangeAmountMultiple-0.1) > this.state.maxAmount
+    }
+
     rangeText =()=> {
         
         return (
@@ -495,7 +502,7 @@ export default class MakerPage extends Component {
                     size="small"
                     value={this.state.minAmount}
                     onChange={this.handleMinAmountChange}
-                    error={this.state.minAmount < this.getMinAmount() || this.state.maxAmount < this.state.minAmount || this.state.minAmount < this.state.maxAmount/(this.maxRangeAmountMultiple+0.15) || this.state.minAmount*(this.minRangeAmountMultiple-0.1) > this.state.maxAmount}
+                    error={this.minAmountError()}
                     sx={{width: this.state.minAmount.toString().length * 9, maxWidth: 40}}
                   />
                 <span style={{width: 20}}>to</span>
@@ -504,7 +511,7 @@ export default class MakerPage extends Component {
                     size="small"
                     type="number" 
                     value={this.state.maxAmount}
-                    error={this.state.maxAmount > this.getMaxAmount() || this.state.maxAmount < this.state.minAmount || this.state.minAmount < this.state.maxAmount/(this.maxRangeAmountMultiple+0.15) || this.state.minAmount*(this.minRangeAmountMultiple-0.1) > this.state.maxAmount}
+                    error={this.maxAmountError()}
                     onChange={this.handleMaxAmountChange}
                     sx={{width: this.state.maxAmount.toString().length * 9, maxWidth: 50}}
                   />
@@ -642,8 +649,8 @@ export default class MakerPage extends Component {
             <Box sx={{width: this.state.showAdvanced? '270px':'252px'}}>
                     <Box sx={{ borderBottom: 1, borderColor: 'divider', position:'relative',left:'5px'}}>
                         <Tabs value={value? value:0} onChange={handleChange} variant="fullWidth" >
-                            <Tab label="Basic" {...this.a11yProps(0)} />
+                            <Tab label="Order" {...this.a11yProps(0)} />
-                            <Tab label="Advanced" {...this.a11yProps(1)} />
+                            <Tab label="Customize" {...this.a11yProps(1)} />
                         </Tabs>
                     </Box>
                             
@@ -659,7 +666,6 @@ export default class MakerPage extends Component {
         )
     }
   render() {
-
     return (
             <Grid container xs={12} align="center" spacing={1} sx={{minWidth:380}}>
                 {/* <Grid item xs={12} align="center" sx={{minWidth:380}}>
@@ -673,7 +679,8 @@ export default class MakerPage extends Component {
 
             <Grid item xs={12} align="center">
                 {/* conditions to disable the make button */}
-                {(this.state.amount == null & (this.state.enableAmountRange == false & this.state.minAmount == null) || 
+                {(this.state.amount == null & (this.state.enableAmountRange == false || this.state.loadingLimits) || 
+                    this.state.enableAmountRange & (this.minAmountError() || this.maxAmountError()) ||
                     this.state.amount <= 0 & !this.state.enableAmountRange || 
                     (this.state.is_explicit & (this.state.badSatoshis != null || this.state.satoshis == null)) || 
                     (!this.state.is_explicit & this.state.badPremium != null))

frontend/src/components/autocompletePayments.js

@@ -6,7 +6,9 @@ import CloseIcon from '@mui/icons-material/Close';
 import { styled } from '@mui/material/styles';
 import PaymentIcon from './PaymentIcons';
 import {Button} from "@mui/material";
+
 import DashboardCustomizeIcon from '@mui/icons-material/DashboardCustomize';
+import AddIcon from '@mui/icons-material/Add';
 
 const Root = styled('div')(
   ({ theme }) => `
@@ -164,6 +166,7 @@ const Listbox = styled('ul')(
     & svg {
       color: transparent;
     }
+
   }
 
   & li[aria-selected='true'] {
@@ -171,7 +174,7 @@ const Listbox = styled('ul')(
     font-weight: 600;
 
     & svg {
-      color: #1890ff;
+      color: ${theme.palette.primary.main};
     }
   }
 
@@ -233,7 +236,6 @@ 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) => (
@@ -249,13 +251,18 @@ export default function AutocompletePayments(props) {
             </div>
           {groupedOptions.map((option, index) => (
             <li {...getOptionProps({ option, index })}>
-              <span style={{textAlign: 'left'}}>{option.name}</span>
+              <Button fullWidth={true} color='inherit' size="small" sx={{textTransform: "none"}} style={{justifyContent: "flex-start"}}>
-              <CheckIcon fontSize="small" />
+                  <div style={{position:'relative', right: '4px', top:'4px'}}>
+                    <AddIcon style={{color : '#1976d2'}} sx={{width:18,height:18}} />
+                  </div>
+                  {option.name}
+              </Button>
+              <div style={{position:'relative', top: '5px'}}><CheckIcon/></div>
             </li>
           ))}
           {val != null?
               (val.length > 2 ?
-                  <Button size="small" sx={{width:'240px'}} onClick={() => handleAddNew(getInputProps())}><DashboardCustomizeIcon sx={{width:18,height:18}}/>Add</Button>
+                  <Button size="small" fullWidth={true} onClick={() => handleAddNew(getInputProps())}><DashboardCustomizeIcon sx={{width:18,height:18}}/>Add New</Button>
               :null)
             :null}
         </Listbox>
@@ -263,7 +270,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 sx={{width:20,height:20}}/>Add</Button>
+          <Button fullWidth={true} onClick={() => handleAddNew(getInputProps())}><DashboardCustomizeIcon sx={{width:20,height:20}}/>Add New</Button>
         </Listbox>
         :null)
       }