mirror of
https://github.com/RoboSats/robosats.git
synced 2024-12-14 11:26:24 +00:00
Small cosmetic and usuability fixes
This commit is contained in:
parent
7f07613060
commit
2c8dfdbff5
@ -12,15 +12,12 @@ export default class BookPage extends Component {
|
|||||||
super(props);
|
super(props);
|
||||||
this.state = {
|
this.state = {
|
||||||
orders: new Array({id:0,}),
|
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"},
|
currencies_dict: {"0":"ANY"},
|
||||||
loading: true,
|
loading: true,
|
||||||
pageSize: 6,
|
pageSize: 6,
|
||||||
};
|
};
|
||||||
this.getCurrencyDict()
|
this.getCurrencyDict()
|
||||||
this.getOrderDetails(this.props.type, this.props.currency)
|
this.getOrderDetails(this.props.type, this.props.currency)
|
||||||
this.state.currencyCode = this.getCurrencyCode(this.props.currency)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
getOrderDetails(type, currency) {
|
getOrderDetails(type, currency) {
|
||||||
@ -41,16 +38,17 @@ export default class BookPage extends Component {
|
|||||||
this.setState({
|
this.setState({
|
||||||
loading: true,
|
loading: true,
|
||||||
});
|
});
|
||||||
this.props.setAppState({type: e.target.value})
|
this.props.setAppState({bookType: e.target.value})
|
||||||
this.getOrderDetails(e.target.value,this.props.currency);
|
this.getOrderDetails(e.target.value,this.props.currency);
|
||||||
}
|
}
|
||||||
handleCurrencyChange=(e)=>{
|
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() {
|
getCurrencyDict() {
|
||||||
@ -64,7 +62,9 @@ export default class BookPage extends Component {
|
|||||||
|
|
||||||
getCurrencyCode(val){
|
getCurrencyCode(val){
|
||||||
if (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 ? "" :
|
{ this.state.not_found ? "" :
|
||||||
<Grid item xs={12} align="center">
|
<Grid item xs={12} align="center">
|
||||||
<Typography component="h5" variant="h5">
|
<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>
|
</Typography>
|
||||||
</Grid>
|
</Grid>
|
||||||
}
|
}
|
||||||
@ -318,14 +318,14 @@ export default class BookPage extends Component {
|
|||||||
(<Grid item xs={12} align="center">
|
(<Grid item xs={12} align="center">
|
||||||
<Grid item xs={12} align="center">
|
<Grid item xs={12} align="center">
|
||||||
<Typography component="h5" variant="h5">
|
<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>
|
</Typography>
|
||||||
</Grid>
|
</Grid>
|
||||||
<br/>
|
<br/>
|
||||||
<Grid item>
|
<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>
|
</Grid>
|
||||||
<Typography component="body1" variant="body1">
|
<Typography color="primary" component="body1" variant="body1">
|
||||||
Be the first one to create an order
|
Be the first one to create an order
|
||||||
<br/>
|
<br/>
|
||||||
<br/>
|
<br/>
|
||||||
|
@ -16,6 +16,7 @@ export default class HomePage extends Component {
|
|||||||
avatarLoaded: false,
|
avatarLoaded: false,
|
||||||
bookType:2,
|
bookType:2,
|
||||||
bookCurrency:0,
|
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 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='/ref/:refCode' render={(props) => <UserGenPage {...props} {...this.state} setAppState={this.setAppState}/>}/>
|
||||||
<Route path='/make' component={MakerPage}/>
|
<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}/>
|
<Route path="/order/:orderId" component={OrderPage}/>
|
||||||
</Switch>
|
</Switch>
|
||||||
</div>
|
</div>
|
||||||
|
@ -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 =()=> {
|
rangeText =()=> {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -495,7 +502,7 @@ export default class MakerPage extends Component {
|
|||||||
size="small"
|
size="small"
|
||||||
value={this.state.minAmount}
|
value={this.state.minAmount}
|
||||||
onChange={this.handleMinAmountChange}
|
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}}
|
sx={{width: this.state.minAmount.toString().length * 9, maxWidth: 40}}
|
||||||
/>
|
/>
|
||||||
<span style={{width: 20}}>to</span>
|
<span style={{width: 20}}>to</span>
|
||||||
@ -504,7 +511,7 @@ export default class MakerPage extends Component {
|
|||||||
size="small"
|
size="small"
|
||||||
type="number"
|
type="number"
|
||||||
value={this.state.maxAmount}
|
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}
|
onChange={this.handleMaxAmountChange}
|
||||||
sx={{width: this.state.maxAmount.toString().length * 9, maxWidth: 50}}
|
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={{width: this.state.showAdvanced? '270px':'252px'}}>
|
||||||
<Box sx={{ borderBottom: 1, borderColor: 'divider', position:'relative',left:'5px'}}>
|
<Box sx={{ borderBottom: 1, borderColor: 'divider', position:'relative',left:'5px'}}>
|
||||||
<Tabs value={value? value:0} onChange={handleChange} variant="fullWidth" >
|
<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>
|
</Tabs>
|
||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
@ -659,7 +666,6 @@ export default class MakerPage extends Component {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
render() {
|
render() {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Grid container xs={12} align="center" spacing={1} sx={{minWidth:380}}>
|
<Grid container xs={12} align="center" spacing={1} sx={{minWidth:380}}>
|
||||||
{/* <Grid item xs={12} align="center" 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">
|
<Grid item xs={12} align="center">
|
||||||
{/* conditions to disable the make button */}
|
{/* 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.amount <= 0 & !this.state.enableAmountRange ||
|
||||||
(this.state.is_explicit & (this.state.badSatoshis != null || this.state.satoshis == null)) ||
|
(this.state.is_explicit & (this.state.badSatoshis != null || this.state.satoshis == null)) ||
|
||||||
(!this.state.is_explicit & this.state.badPremium != null))
|
(!this.state.is_explicit & this.state.badPremium != null))
|
||||||
|
@ -6,7 +6,9 @@ import CloseIcon from '@mui/icons-material/Close';
|
|||||||
import { styled } from '@mui/material/styles';
|
import { styled } from '@mui/material/styles';
|
||||||
import PaymentIcon from './PaymentIcons';
|
import PaymentIcon from './PaymentIcons';
|
||||||
import {Button} from "@mui/material";
|
import {Button} from "@mui/material";
|
||||||
|
|
||||||
import DashboardCustomizeIcon from '@mui/icons-material/DashboardCustomize';
|
import DashboardCustomizeIcon from '@mui/icons-material/DashboardCustomize';
|
||||||
|
import AddIcon from '@mui/icons-material/Add';
|
||||||
|
|
||||||
const Root = styled('div')(
|
const Root = styled('div')(
|
||||||
({ theme }) => `
|
({ theme }) => `
|
||||||
@ -164,6 +166,7 @@ const Listbox = styled('ul')(
|
|||||||
& svg {
|
& svg {
|
||||||
color: transparent;
|
color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
& li[aria-selected='true'] {
|
& li[aria-selected='true'] {
|
||||||
@ -171,7 +174,7 @@ const Listbox = styled('ul')(
|
|||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
|
||||||
& svg {
|
& svg {
|
||||||
color: #1890ff;
|
color: ${theme.palette.primary.main};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -233,7 +236,6 @@ export default function AutocompletePayments(props) {
|
|||||||
<Root>
|
<Root>
|
||||||
<div style={{height:'5px'}}></div>
|
<div style={{height:'5px'}}></div>
|
||||||
<div {...getRootProps()} >
|
<div {...getRootProps()} >
|
||||||
|
|
||||||
<Label {...getInputLabelProps()} error={props.error}>{props.label}</Label>
|
<Label {...getInputLabelProps()} error={props.error}>{props.label}</Label>
|
||||||
<InputWrapper ref={setAnchorEl} error={props.error} className={focused ? 'focused' : ''}>
|
<InputWrapper ref={setAnchorEl} error={props.error} className={focused ? 'focused' : ''}>
|
||||||
{value.map((option, index) => (
|
{value.map((option, index) => (
|
||||||
@ -249,13 +251,18 @@ export default function AutocompletePayments(props) {
|
|||||||
</div>
|
</div>
|
||||||
{groupedOptions.map((option, index) => (
|
{groupedOptions.map((option, index) => (
|
||||||
<li {...getOptionProps({ 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>
|
</li>
|
||||||
))}
|
))}
|
||||||
{val != null?
|
{val != null?
|
||||||
(val.length > 2 ?
|
(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)
|
||||||
:null}
|
:null}
|
||||||
</Listbox>
|
</Listbox>
|
||||||
@ -263,7 +270,7 @@ export default function AutocompletePayments(props) {
|
|||||||
//Here goes what happens if there is no groupedOptions
|
//Here goes what happens if there is no groupedOptions
|
||||||
(getInputProps().value.length > 0 ?
|
(getInputProps().value.length > 0 ?
|
||||||
<Listbox {...getListboxProps()}>
|
<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>
|
</Listbox>
|
||||||
:null)
|
:null)
|
||||||
}
|
}
|
||||||
|
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user