Add time picker and fidelity bond slider to advanced options

frontend/src/components/MakerPage.js

@@ -1,10 +1,13 @@
 import React, { Component } from 'react';
-import { Checkbox, Switch, Tooltip, Paper, Button , Grid, Typography, TextField, Select, FormHelperText, MenuItem, FormControl, Radio, FormControlLabel, RadioGroup} from "@mui/material"
+import { Checkbox, InputAdornment, Input, Slider, Switch, Tooltip, Paper, Button , Grid, Typography, TextField, Select, FormHelperText, MenuItem, FormControl, Radio, FormControlLabel, RadioGroup} from "@mui/material"
-import { AdapterDateFns, LocalizationProvider, DateTimePicker}  from '@mui/lab';
+import { LocalizationProvider, TimePicker}  from '@mui/lab';
 import DateFnsUtils from "@date-io/date-fns";
 import { Link } from 'react-router-dom'
 import getFlags from './getFlags'
 
+import LockIcon from '@mui/icons-material/Lock';
+import PercentIcon from '@mui/icons-material/Percent';
+
 function getCookie(name) {
     let cookieValue = null;
     if (document.cookie && document.cookie !== '') {
@@ -39,7 +42,8 @@ export default class MakerPage extends Component {
   defaultPremium = 0;
   minTradeSats = 20000;
   maxTradeSats = 800000;
-  
+  maxBondlessSats = 50000;
+
   constructor(props) {
     super(props);
     this.state={
@@ -54,6 +58,8 @@ export default class MakerPage extends Component {
         showAdvanced: false,
         allowBondless: false,
         publicExpiryTime: Date.now() + 86400000,
+        minAmount: null,
+        bondSize: 1,
     }
     this.getCurrencyDict()
   }
@@ -157,6 +163,23 @@ export default class MakerPage extends Component {
         return this.state.currencies_dict[val.toString()]
     }
 
+    handleBlur = () => {
+    if (this.state.bondSize < 0) {
+        this.setState({bondSize:0});
+    } else if (this.state.bondSize > 100) {
+        this.setState({bondSize:20});
+    }
+    };
+
+    
+    handleSliderBondSizeChange = (event, newValue) => {
+        this.setState({bondSize: newValue});
+    };
+
+    handleInputBondSizeChange = (event) => {
+        this.setState({bondSize: event.target.value === '' ? 1 : Number(event.target.value)});
+    };
+
     StandardMakerOptions = () => {
         return(
             <Paper elevation={12} style={{ padding: 8, width:240, align:'center'}}>
@@ -306,35 +329,80 @@ export default class MakerPage extends Component {
 
     AdvancedMakerOptions = () => {
         return(
-            <Paper elevation={12} style={{ padding: 8, width:300, align:'center'}}>
+            <Paper elevation={12} style={{ padding: 8, width:280, align:'center'}}>
+            <br/>
+            <Grid container xs={12}  spacing={1}>
 
-            <Grid item xs={12} align="center" spacing={1}>
+                <Grid item xs={12} align="center" spacing={1}>
-                <LocalizationProvider dateAdapter={DateFnsUtils}>
+                    <LocalizationProvider dateAdapter={DateFnsUtils}>
-                    <DateTimePicker
+                        <TimePicker
-                    renderInput={(props) => <TextField {...props} />}
+                        renderInput={(props) => <TextField {...props} />}
-                    label="Public Order Expiry Time"
+                        label="Public Order Expiry Time"
-                    value={this.state.publicExpiryTime}
+                        value={this.state.publicExpiryTime}
-                    onChange={(newValue) => {this.setState({publicExpiryTime: newValue})}}
+                        onChange={(newValue) => {this.setState({publicExpiryTime: newValue})}}
-                    />
-            </LocalizationProvider>
-            </Grid>
-
-            <Grid item xs={12} align="center" spacing={1}>
-                <Tooltip enterTouchDelay="0" title="Takers will not have to lock a bond. High risk! Only small stakes allowed!">
-                    <FormControlLabel
-                        label={<a>Allow bondless taker (<a href="https://git.robosats.com" target="_blank">Read More</a>)</a>}
-                        control={
-                            <Checkbox
-                                disabled={this.state.type==0}
-                                color="secondary"
-                                checked={this.state.allowBondless}
-                                onChange={()=> this.setState({allowBondless: !this.state.allowBondless})}
-                                />
-                        }
                         />
-                </Tooltip>
+                </LocalizationProvider>
+                </Grid>
+                
+                <Grid item xs={12} align="center" spacing={1}>
+                    <FormControl align="center">
+                        <FormHelperText>
+                            <div align="center" style={{display:'flex',flexWrap:'wrap', transform: 'translate(20%, 0)'}}>
+                                <LockIcon sx={{height:20,width:20}}/> Fidelity Bond Size 
+                            </div>
+                        </FormHelperText>
+                        {/* <Grid container xs={12} align="center">
+                        <Grid item xs={0.5}/>
+                        <Grid item xs={8} align="right"> */}
+                        <Slider
+                            sx={{width:220, align:"center"}}
+                            aria-label="Bond Size (%)"
+                            defaultValue={1}
+                            getAriaValueText={this.bondSizeText}
+                            valueLabelDisplay="auto"
+                            step={1}
+                            marks={[{value: 1,label: '1%'},{value: 5,label: '5%'},{value: 10,label: '10%'},{value: 15,label: '15%'},{value: 20,label: '20%'}]}
+                            min={1}
+                            max={20}
+                            onChange={this.handleSliderBondSizeChange}
+                        />
+                        {/*</Grid>
+                         <Grid item xs={0.5}/>
+                        <Grid item xs={2.5} align="right">
+                        <Input
+                            value={this.state.bondSize}
+                            size="small"
+                            onChange={this.handleInputBondSizeChange}
+                            onBlur={this.handleBlur}
+                            endAdornment={<InputAdornment><PercentIcon/></InputAdornment>}
+                            inputProps={{
+                                min: 1,
+                                max: 20,
+                                type: 'tel',
+                                style: { textAlign: 'center' },
+                            }}
+                        />
+                        </Grid>
+                        </Grid> */}
+                    </FormControl>
+                </Grid>
+
+                <Grid item xs={12} align="center" spacing={1}>
+                    <Tooltip enterTouchDelay="0" title={"High risk! Limited to "+ this.state.maxBondlessSats/1000 +"K Sats"}>
+                        <FormControlLabel
+                            label={<a>Allow bondless taker (<a href="https://git.robosats.com" target="_blank">info</a>)</a>}
+                            control={
+                                <Checkbox
+                                    disabled={this.state.type==0}
+                                    color="secondary"
+                                    checked={this.state.allowBondless}
+                                    onChange={()=> this.setState({allowBondless: !this.state.allowBondless})}
+                                    />
+                            }
+                            />
+                    </Tooltip>
+                </Grid>
             </Grid>
-            
             </Paper>
         )
     }
@@ -348,9 +416,9 @@ export default class MakerPage extends Component {
                 </Grid> */}
                 <Grid item xs={12} align="center">
                     <div className="advancedSwitch">
-                    <Tooltip enterTouchDelay="0" title="Comming soon">
+                    <Tooltip enterTouchDelay="0" title="Coming soon">
                         <FormControlLabel
-                            labelPlacement="start"control={
+                            labelPlacement="start" control={
                             <Switch
                                 //disabled
                                 checked={this.state.showAdvanced} 

frontend/static/css/index.css

@@ -39,6 +39,7 @@ body {
   margin-right: 0;
   margin-left: auto;
 }
+
 .bottomItem {
   margin: 0;
   top: -14px;

frontend/static/frontend/main.js.LICENSE.txt

@@ -450,6 +450,10 @@
   !*** ./node_modules/@mui/lab/ClockPicker/Clock.js ***!
   \****************************************************/
 
+/*!****************************************************!*\
+  !*** ./node_modules/@mui/lab/TimePicker/shared.js ***!
+  \****************************************************/
+
 /*!****************************************************!*\
   !*** ./node_modules/@mui/material/colors/green.js ***!
   \****************************************************/
@@ -554,6 +558,10 @@
   !*** ./node_modules/@mui/material/Select/Select.js ***!
   \*****************************************************/
 
+/*!*****************************************************!*\
+  !*** ./node_modules/@mui/material/Slider/Slider.js ***!
+  \*****************************************************/
+
 /*!*****************************************************!*\
   !*** ./node_modules/@mui/material/Switch/Switch.js ***!
   \*****************************************************/
@@ -839,11 +847,11 @@
   \********************************************************/
 
 /*!********************************************************!*\
-  !*** ./node_modules/@mui/lab/DateTimePicker/shared.js ***!
+  !*** ./node_modules/@mui/lab/PickersDay/PickersDay.js ***!
   \********************************************************/
 
 /*!********************************************************!*\
-  !*** ./node_modules/@mui/lab/PickersDay/PickersDay.js ***!
+  !*** ./node_modules/@mui/lab/TimePicker/TimePicker.js ***!
   \********************************************************/
 
 /*!********************************************************!*\
@@ -1078,10 +1086,6 @@
   !*** ./node_modules/@mui/lab/MonthPicker/MonthPicker.js ***!
   \**********************************************************/
 
-/*!**********************************************************!*\
-  !*** ./node_modules/@mui/lab/internal/svg-icons/Time.js ***!
-  \**********************************************************/
-
 /*!**********************************************************!*\
   !*** ./node_modules/@mui/material/Alert/alertClasses.js ***!
   \**********************************************************/
@@ -1554,6 +1558,10 @@
   !*** ./node_modules/@mui/base/ModalUnstyled/ModalUnstyled.js ***!
   \***************************************************************/
 
+/*!***************************************************************!*\
+  !*** ./node_modules/@mui/lab/TimePicker/TimePickerToolbar.js ***!
+  \***************************************************************/
+
 /*!***************************************************************!*\
   !*** ./node_modules/@mui/lab/YearPicker/yearPickerClasses.js ***!
   \***************************************************************/
@@ -1562,10 +1570,6 @@
   !*** ./node_modules/@mui/lab/internal/svg-icons/ArrowLeft.js ***!
   \***************************************************************/
 
-/*!***************************************************************!*\
-  !*** ./node_modules/@mui/lab/internal/svg-icons/DateRange.js ***!
-  \***************************************************************/
-
 /*!***************************************************************!*\
   !*** ./node_modules/@mui/material/ButtonGroup/ButtonGroup.js ***!
   \***************************************************************/
@@ -1658,10 +1662,6 @@
   !*** ./node_modules/@mui/lab/CalendarPicker/CalendarPicker.js ***!
   \****************************************************************/
 
-/*!****************************************************************!*\
-  !*** ./node_modules/@mui/lab/DateTimePicker/DateTimePicker.js ***!
-  \****************************************************************/
-
 /*!****************************************************************!*\
   !*** ./node_modules/@mui/lab/internal/svg-icons/ArrowRight.js ***!
   \****************************************************************/
@@ -1754,6 +1754,10 @@
   !*** ./node_modules/@mui/base/PopperUnstyled/PopperUnstyled.js ***!
   \*****************************************************************/
 
+/*!*****************************************************************!*\
+  !*** ./node_modules/@mui/base/SliderUnstyled/SliderUnstyled.js ***!
+  \*****************************************************************/
+
 /*!*****************************************************************!*\
   !*** ./node_modules/@mui/base/composeClasses/composeClasses.js ***!
   \*****************************************************************/
@@ -2071,7 +2075,7 @@
   \********************************************************************/
 
 /*!********************************************************************!*\
-  !*** ./node_modules/@mui/lab/DateTimePicker/DateTimePickerTabs.js ***!
+  !*** ./node_modules/@mui/lab/MobileTimePicker/MobileTimePicker.js ***!
   \********************************************************************/
 
 /*!********************************************************************!*\
@@ -2314,6 +2318,10 @@
   !*** ./node_modules/@mui/base/ModalUnstyled/modalUnstyledClasses.js ***!
   \**********************************************************************/
 
+/*!**********************************************************************!*\
+  !*** ./node_modules/@mui/lab/DesktopTimePicker/DesktopTimePicker.js ***!
+  \**********************************************************************/
+
 /*!**********************************************************************!*\
   !*** ./node_modules/@mui/lab/internal/pickers/PickersModalDialog.js ***!
   \**********************************************************************/
@@ -2466,10 +2474,6 @@
   !*** ./node_modules/@mui/lab/CalendarPicker/PickersCalendarHeader.js ***!
   \***********************************************************************/
 
-/*!***********************************************************************!*\
-  !*** ./node_modules/@mui/lab/DateTimePicker/DateTimePickerToolbar.js ***!
-  \***********************************************************************/
-
 /*!***********************************************************************!*\
   !*** ./node_modules/@mui/lab/internal/pickers/hooks/useValidation.js ***!
   \***********************************************************************/
@@ -2550,6 +2554,10 @@
   !*** ./node_modules/@material-ui/core/esm/utils/requirePropFactory.js ***!
   \************************************************************************/
 
+/*!************************************************************************!*\
+  !*** ./node_modules/@mui/base/SliderUnstyled/sliderUnstyledClasses.js ***!
+  \************************************************************************/
+
 /*!************************************************************************!*\
   !*** ./node_modules/@mui/lab/CalendarPicker/PickersSlideTransition.js ***!
   \************************************************************************/
@@ -2694,6 +2702,10 @@
   !*** ./node_modules/@material-ui/styles/esm/mergeClasses/mergeClasses.js ***!
   \***************************************************************************/
 
+/*!***************************************************************************!*\
+  !*** ./node_modules/@mui/base/SliderUnstyled/SliderValueLabelUnstyled.js ***!
+  \***************************************************************************/
+
 /*!***************************************************************************!*\
   !*** ./node_modules/@mui/base/generateUtilityClass/ClassNameGenerator.js ***!
   \***************************************************************************/
@@ -2738,10 +2750,6 @@
   !*** ./node_modules/@mui/lab/LocalizationProvider/LocalizationProvider.js ***!
   \****************************************************************************/
 
-/*!****************************************************************************!*\
-  !*** ./node_modules/@mui/lab/MobileDateTimePicker/MobileDateTimePicker.js ***!
-  \****************************************************************************/
-
 /*!****************************************************************************!*\
   !*** ./node_modules/@mui/lab/internal/pickers/hooks/date-helpers-hooks.js ***!
   \****************************************************************************/
@@ -2810,10 +2818,6 @@
   !*** ./node_modules/hoist-non-react-statics/node_modules/react-is/index.js ***!
   \*****************************************************************************/
 
-/*!******************************************************************************!*\
-  !*** ./node_modules/@mui/lab/DesktopDateTimePicker/DesktopDateTimePicker.js ***!
-  \******************************************************************************/
-
 /*!******************************************************************************!*\
   !*** ./node_modules/@mui/material/TabScrollButton/tabScrollButtonClasses.js ***!
   \******************************************************************************/