mirror of
https://github.com/RoboSats/robosats.git
synced 2025-01-18 20:21:35 +00:00
Add range amount slider
This commit is contained in:
Reckless_Satoshi
parent
fce2bbd818
commit
2e5d2ff6d5
@ -1,8 +1,7 @@
|
||||
import React, { Component } from "react";
|
||||
import { render } from "react-dom";
|
||||
|
||||
import HomePage from "./HomePage";
|
||||
import BottomBar from "./BottomBar";
|
||||
import { ThemeProvider, createTheme } from '@mui/material/styles';
|
||||
|
||||
export default class App extends Component {
|
||||
constructor(props) {
|
||||
@ -10,6 +9,7 @@ export default class App extends Component {
|
||||
this.state = {
|
||||
nickname: null,
|
||||
token: null,
|
||||
dark: false,
|
||||
}
|
||||
}
|
||||
|
||||
@ -17,11 +17,23 @@ export default class App extends Component {
|
||||
this.setState(newState)
|
||||
}
|
||||
|
||||
lightTheme = createTheme({
|
||||
});
|
||||
|
||||
darkTheme = createTheme({
|
||||
palette: {
|
||||
mode: 'dark',
|
||||
background: {
|
||||
default: "#222222"
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
<HomePage setAppState={this.setAppState}/>
|
||||
</>
|
||||
<ThemeProvider theme={this.state.dark ? this.darkTheme : this.lightTheme}>
|
||||
<HomePage setAppState={this.setAppState}/>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -62,7 +62,8 @@ export default class InfoDialog extends Component {
|
||||
<p>At no point, AnonymousAlice01 and BafflingBob02 have to trust the
|
||||
bitcoin funds to each other. In case they have a conflict, <i>RoboSats</i> staff
|
||||
will help resolving the dispute. You can find a step-by-step
|
||||
description of the trade pipeline in <a href='https://github.com/Reckless-Satoshi/robosats/blob/main/README.md#how-it-works'>How it works</a></p>
|
||||
description of the trade pipeline in <a href='https://github.com/Reckless-Satoshi/robosats/blob/main/README.md#how-it-works'>How it works</a>
|
||||
You can also check the full guide in <a href='https://github.com/Reckless-Satoshi/robosats/blob/main/docs/how-to-use.md'>How to use</a></p>
|
||||
</Typography>
|
||||
|
||||
<Typography component="h5" variant="h5">What payment methods are accepted?</Typography>
|
||||
|
||||
@ -6,7 +6,7 @@ import { Link } from 'react-router-dom'
|
||||
import getFlags from './getFlags'
|
||||
|
||||
import LockIcon from '@mui/icons-material/Lock';
|
||||
import PercentIcon from '@mui/icons-material/Percent';
|
||||
import HdrWeakIcon from '@mui/icons-material/HdrWeak';
|
||||
|
||||
function getCookie(name) {
|
||||
let cookieValue = null;
|
||||
@ -43,6 +43,7 @@ export default class MakerPage extends Component {
|
||||
minTradeSats = 20000;
|
||||
maxTradeSats = 800000;
|
||||
maxBondlessSats = 50000;
|
||||
minAmountFraction = 0.2;
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
@ -58,6 +59,7 @@ export default class MakerPage extends Component {
|
||||
showAdvanced: false,
|
||||
allowBondless: false,
|
||||
publicExpiryTime: Date.now() + 86400000,
|
||||
enableAmountRange: false,
|
||||
minAmount: null,
|
||||
bondSize: 1,
|
||||
}
|
||||
@ -80,6 +82,13 @@ export default class MakerPage extends Component {
|
||||
amount: e.target.value,
|
||||
});
|
||||
}
|
||||
|
||||
handleMinAmountChange=(e)=>{
|
||||
this.setState({
|
||||
minAmount: e.target.value,
|
||||
});
|
||||
}
|
||||
|
||||
handlePaymentMethodChange=(e)=>{
|
||||
this.setState({
|
||||
payment_method: e.target.value,
|
||||
@ -330,9 +339,50 @@ export default class MakerPage extends Component {
|
||||
AdvancedMakerOptions = () => {
|
||||
return(
|
||||
<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}>
|
||||
<FormControl align="center">
|
||||
<FormHelperText>
|
||||
<Tooltip enterTouchDelay="0" title={"Let the taker chose an amount within the range"}>
|
||||
<div align="center">
|
||||
Amount Range
|
||||
</div>
|
||||
</Tooltip>
|
||||
</FormHelperText>
|
||||
<Grid container xs={12} align="center">
|
||||
<Grid item xs={2} align="center">
|
||||
<Checkbox
|
||||
disabled={this.state.amount == null}
|
||||
onChange={()=>this.setState({enableAmountRange:!this.state.enableAmountRange})}/>
|
||||
</Grid>
|
||||
<Grid xs={1}/>
|
||||
<Grid item xs={9} align="center">
|
||||
<Slider
|
||||
sx={{width:180, align:"center"}}
|
||||
disabled={!this.state.enableAmountRange}
|
||||
aria-label="Amount Range"
|
||||
defaultValue={this.state.amount}
|
||||
track="inverted"
|
||||
value={this.state.minAmount ? this.state.minAmount : this.state.amount}
|
||||
step={this.state.amount/100}
|
||||
getAriaValueText={this.bondSizeText}
|
||||
valueLabelDisplay="auto"
|
||||
valueLabelFormat={(x) => (x+" "+this.state.currencyCode)}
|
||||
marks={this.state.amount == null ?
|
||||
null
|
||||
:
|
||||
[{value: this.state.amount*this.minAmountFraction,label: pn(this.state.amount*this.minAmountFraction)+" "+ this.state.currencyCode},
|
||||
{value: this.state.amount,label: this.state.amount+" "+this.state.currencyCode}]}
|
||||
min={this.state.amount*this.minAmountFraction}
|
||||
max={this.state.amount}
|
||||
onChange={this.handleMinAmountChange}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} align="center" spacing={1}>
|
||||
<LocalizationProvider dateAdapter={DateFnsUtils}>
|
||||
<TimePicker
|
||||
@ -347,48 +397,33 @@ export default class MakerPage extends Component {
|
||||
<Grid item xs={12} align="center" spacing={1}>
|
||||
<FormControl align="center">
|
||||
<FormHelperText>
|
||||
<Tooltip enterTouchDelay="0" title={"Increase to ensure counterpart good behaviour"}>
|
||||
<div align="center" style={{display:'flex',flexWrap:'wrap', transform: 'translate(20%, 0)'}}>
|
||||
<LockIcon sx={{height:20,width:20}}/> Fidelity Bond Size
|
||||
</div>
|
||||
</Tooltip>
|
||||
</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"
|
||||
valueLabelFormat={(x) => (x+'%')}
|
||||
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"}>
|
||||
<Tooltip enterTouchDelay="0" title={"High risk! Limited to "+ this.maxBondlessSats/1000 +"K Sats"}>
|
||||
<FormControlLabel
|
||||
label={<a>Allow bondless taker (<a href="https://git.robosats.com" target="_blank">info</a>)</a>}
|
||||
control={
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -2022,6 +2022,10 @@
|
||||
!*** ./node_modules/@mui/material/utils/createChainedFunction.js ***!
|
||||
\*******************************************************************/
|
||||
|
||||
/*!*******************************************************************!*\
|
||||
!*** ./node_modules/@mui/private-theming/ThemeProvider/nested.js ***!
|
||||
\*******************************************************************/
|
||||
|
||||
/*!*******************************************************************!*\
|
||||
!*** ./node_modules/@mui/system/esm/createTheme/createSpacing.js ***!
|
||||
\*******************************************************************/
|
||||
@ -2234,6 +2238,10 @@
|
||||
!*** ./node_modules/@mui/material/internal/svg-icons/StarBorder.js ***!
|
||||
\*********************************************************************/
|
||||
|
||||
/*!*********************************************************************!*\
|
||||
!*** ./node_modules/@mui/system/esm/ThemeProvider/ThemeProvider.js ***!
|
||||
\*********************************************************************/
|
||||
|
||||
/*!*********************************************************************!*\
|
||||
!*** ./node_modules/@mui/system/esm/useThemeProps/getThemeProps.js ***!
|
||||
\*********************************************************************/
|
||||
@ -2678,6 +2686,10 @@
|
||||
!*** ./node_modules/@mui/material/internal/svg-icons/SuccessOutlined.js ***!
|
||||
\**************************************************************************/
|
||||
|
||||
/*!**************************************************************************!*\
|
||||
!*** ./node_modules/@mui/private-theming/ThemeProvider/ThemeProvider.js ***!
|
||||
\**************************************************************************/
|
||||
|
||||
/*!**************************************************************************!*\
|
||||
!*** ./node_modules/@popperjs/core/lib/dom-utils/getWindowScrollBarX.js ***!
|
||||
\**************************************************************************/
|
||||
|
||||
Loading…
Reference in New Issue
Block a user