Mirror/robosats
1
0
Fork 0
mirror of https://github.com/RoboSats/robosats.git synced 2025-01-18 20:21:35 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add time picker and fidelity bond slider to advanced options

Browse Source
This commit is contained in:
Reckless_Satoshi 2022-03-15 16:33:58 -07:00
parent 5c5e7918e8
commit fce2bbd818
No known key found for this signature in database
GPG Key ID: 9C4585B561315571
4 changed files with 132 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
frontend/src/components/MakerPage.js
View File

@ -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 { AdapterDateFns, LocalizationProvider, DateTimePicker} from '@mui/lab';
import { Checkbox, InputAdornment, Input, Slider, Switch, Tooltip, Paper, Button , Grid, Typography, TextField, Select, FormHelperText, MenuItem, FormControl, Radio, FormControlLabel, RadioGroup} from "@mui/material"
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,6 +42,7 @@ export default class MakerPage extends Component {
defaultPremium = 0;
minTradeSats = 20000;
maxTradeSats = 800000;
maxBondlessSats = 50000;
constructor(props) {
super(props);
@ -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}>
<LocalizationProvider dateAdapter={DateFnsUtils}>
<DateTimePicker
renderInput={(props) => <TextField {...props} />}
label="Public Order Expiry Time"
value={this.state.publicExpiryTime}
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})}
/>
}
<Grid item xs={12} align="center" spacing={1}>
<LocalizationProvider dateAdapter={DateFnsUtils}>
<TimePicker
renderInput={(props) => <TextField {...props} />}
label="Public Order Expiry Time"
value={this.state.publicExpiryTime}
onChange={(newValue) => {this.setState({publicExpiryTime: newValue})}}
/>
</Tooltip>
</Grid>
</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}

1
frontend/static/css/index.css
View File

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

2
frontend/static/frontend/main.js
View File

File diff suppressed because one or more lines are too long

58
frontend/static/frontend/main.js.LICENSE.txt
View File

@ -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 ***!
\******************************************************************************/