Mirror/robosats
1
0
Fork 0
mirror of https://github.com/RoboSats/robosats.git synced 2024-12-14 03:16:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Small cosmetic and usuability fixes

Browse Source
This commit is contained in:
Reckless_Satoshi 2022-04-01 07:52:44 -07:00
parent 7f07613060
commit 2c8dfdbff5
No known key found for this signature in database
GPG Key ID: 9C4585B561315571
5 changed files with 47 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/src/components/BookPage.js
View File

@ -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({
currencyCode: this.getCurrencyCode(e.target.value),
loading: true,
var currency = e.target.value;
this.setState({loading: true})
this.props.setAppState({
bookCurrency: currency,
bookCurrencyCode: this.getCurrencyCode(currency),
})
this.props.setAppState({currency: e.target.value})
this.getOrderDetails(this.props.type, e.target.value);
this.getOrderDetails(this.props.type, currency);
}
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/>

3
frontend/src/components/HomePage.js
View File

@ -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>

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

@ -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="Advanced" {...this.a11yProps(1)} />
<Tab label="Order" {...this.a11yProps(0)} />
<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))

21
frontend/src/components/autocompletePayments.js
View File

@ -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};
}
}
@ -228,12 +231,11 @@ export default function AutocompletePayments(props) {
if(a || a == null){props.onAutocompleteChange(optionsToString(value))}
return false
};
return (
<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>
<CheckIcon fontSize="small" />
<Button fullWidth={true} color='inherit' size="small" sx={{textTransform: "none"}} style={{justifyContent: "flex-start"}}>
<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)
}

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

File diff suppressed because one or more lines are too long