mirror of
https://github.com/RoboSats/robosats.git
synced 2024-12-14 03:16:24 +00:00
Improve connection of UI between Make and Book
This commit is contained in:
Reckless_Satoshi
parent
dc80581401
commit
30300c7e4f
@ -49,7 +49,7 @@ class BookPage extends Component {
|
||||
handleCurrencyChange=(e)=>{
|
||||
var currency = e.target.value;
|
||||
this.props.setAppState({
|
||||
bookCurrency: currency,
|
||||
currency: currency,
|
||||
bookCurrencyCode: this.getCurrencyCode(currency),
|
||||
})
|
||||
}
|
||||
@ -85,8 +85,8 @@ class BookPage extends Component {
|
||||
<div style={{ height: 422, width: '100%' }}>
|
||||
<DataGrid
|
||||
rows={
|
||||
this.props.bookOrders.filter(order => order.type == this.props.bookType || this.props.bookType == 2)
|
||||
.filter(order => order.currency == this.props.bookCurrency || this.props.bookCurrency == 0)
|
||||
this.props.bookOrders.filter(order => order.type == this.props.type || this.props.type == 2)
|
||||
.filter(order => order.currency == this.props.currency || this.props.currency == 0)
|
||||
.map((order) =>
|
||||
({id: order.id,
|
||||
avatar: window.location.origin +'/static/assets/avatars/' + order.maker_nick + '.png',
|
||||
@ -186,8 +186,8 @@ class BookPage extends Component {
|
||||
<DataGrid
|
||||
loading={this.props.bookLoading}
|
||||
rows={
|
||||
this.props.bookOrders.filter(order => order.type == this.props.bookType || this.props.bookType == 2)
|
||||
.filter(order => order.currency == this.props.bookCurrency || this.props.bookCurrency == 0)
|
||||
this.props.bookOrders.filter(order => order.type == this.props.type || this.props.type == 2)
|
||||
.filter(order => order.currency == this.props.currency || this.props.currency == 0)
|
||||
.map((order) =>
|
||||
({id: order.id,
|
||||
avatar: window.location.origin +'/static/assets/avatars/' + order.maker_nick + '.png',
|
||||
@ -294,7 +294,7 @@ class BookPage extends Component {
|
||||
} else if (sellChecked) {
|
||||
var type = 0
|
||||
}
|
||||
this.props.setAppState({bookType: type})
|
||||
this.props.setAppState({type: type})
|
||||
}
|
||||
|
||||
handleClickBuy=(e)=>{
|
||||
@ -316,7 +316,7 @@ class BookPage extends Component {
|
||||
<Grid item xs={12} align="center">
|
||||
<Grid item xs={12} align="center">
|
||||
<Typography component="h5" variant="h5">
|
||||
{this.props.bookType == 0 ?
|
||||
{this.props.type == 0 ?
|
||||
t("No orders found to sell BTC for {{currencyCode}}",{currencyCode:this.props.bookCurrencyCode})
|
||||
:
|
||||
t("No orders found to buy BTC for {{currencyCode}}",{currencyCode:this.props.bookCurrencyCode})
|
||||
@ -328,7 +328,7 @@ class BookPage extends Component {
|
||||
<Button size="large" variant="contained" color='primary' to='/make/' component={Link}>{t("Make Order")}</Button>
|
||||
</Grid>
|
||||
<Typography color="primary" variant="body1">
|
||||
{t("Be the first one to create an order")}
|
||||
<b>{t("Be the first one to create an order")}</b>
|
||||
<br/>
|
||||
<br/>
|
||||
</Typography>
|
||||
@ -389,14 +389,14 @@ class BookPage extends Component {
|
||||
<Grid item xs={6} align="left">
|
||||
<FormControl align="center">
|
||||
<FormHelperText align="center" sx={{textAlign:"center", position:"relative", left:"-5px"}}>
|
||||
{this.props.bookType == 0 ? t("and receive") : (this.props.bookType == 1 ? t("and pay with") : t("and use") )}
|
||||
{this.props.type == 0 ? t("and receive") : (this.props.type == 1 ? t("and pay with") : t("and use") )}
|
||||
</FormHelperText>
|
||||
<Select
|
||||
//autoWidth={true}
|
||||
sx={{width:120}}
|
||||
label={t("Select Payment Currency")}
|
||||
required={true}
|
||||
value={this.props.bookCurrency}
|
||||
value={this.props.currency}
|
||||
inputProps={{
|
||||
style: {textAlign:"center"}
|
||||
}}
|
||||
@ -412,10 +412,10 @@ class BookPage extends Component {
|
||||
{ this.props.bookNotFound ? "" :
|
||||
<Grid item xs={12} align="center">
|
||||
<Typography component="h5" variant="h5">
|
||||
{this.props.bookType == 0 ?
|
||||
{this.props.type == 0 ?
|
||||
t("You are SELLING BTC for {{currencyCode}}",{currencyCode:this.props.bookCurrencyCode})
|
||||
:
|
||||
(this.props.bookType == 1 ?
|
||||
(this.props.type == 1 ?
|
||||
t("You are BUYING BTC for {{currencyCode}}",{currencyCode:this.props.bookCurrencyCode})
|
||||
:
|
||||
t("You are looking at all")
|
||||
@ -426,7 +426,7 @@ class BookPage extends Component {
|
||||
}
|
||||
|
||||
{ this.props.bookNotFound ?
|
||||
<this.NoOrdersFound/>
|
||||
this.NoOrdersFound()
|
||||
:
|
||||
<Grid item xs={12} align="center">
|
||||
{/* Desktop Book */}
|
||||
@ -445,9 +445,13 @@ class BookPage extends Component {
|
||||
</Grid>
|
||||
}
|
||||
<Grid item xs={12} align="center">
|
||||
<Button color="secondary" variant="contained" to="/" component={Link}>
|
||||
{t("Back")}
|
||||
</Button>
|
||||
{ !this.props.bookNotFound ?
|
||||
<Button variant="contained" color='primary' to='/make/' component={Link}>{t("Make Order")}</Button>
|
||||
: null
|
||||
}
|
||||
<Button color="secondary" variant="contained" to="/" component={Link}>
|
||||
{t("Back")}
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
);
|
||||
|
||||
@ -17,8 +17,8 @@ export default class HomePage extends Component {
|
||||
avatarLoaded: false,
|
||||
buyChecked: false,
|
||||
sellChecked: false,
|
||||
bookType:2,
|
||||
bookCurrency:0,
|
||||
type:2,
|
||||
currency:0,
|
||||
bookCurrencyCode:'ANY',
|
||||
bookOrders:new Array(),
|
||||
bookLoading: true,
|
||||
|
||||
@ -66,8 +66,13 @@ class MakerPage extends Component {
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.getLimits()
|
||||
}
|
||||
this.getLimits()
|
||||
// if currency or type have changed in HomePage state, change in MakerPage state too.
|
||||
this.setState({
|
||||
currency: !this.props.currency === 0 ? this.props.currency : this.state.currency,
|
||||
type: !this.props.type === 2 ? this.props.type : this.state.type,
|
||||
})
|
||||
}
|
||||
|
||||
getLimits() {
|
||||
this.setState({loadingLimits:true})
|
||||
@ -94,13 +99,26 @@ class MakerPage extends Component {
|
||||
handleTypeChange=(e)=>{
|
||||
this.setState({
|
||||
type: e.target.value,
|
||||
});
|
||||
})
|
||||
// Share state with HomePage and OrderPage
|
||||
this.props.setAppState({
|
||||
type: e.target.value,
|
||||
buyChecked: e.target.value == 0 ? true: false,
|
||||
sellChecked: e.target.value == 1 ? true: false,
|
||||
})
|
||||
;
|
||||
}
|
||||
handleCurrencyChange=(e)=>{
|
||||
var currencyCode = this.getCurrencyCode(e.target.value)
|
||||
this.setState({
|
||||
currency: e.target.value,
|
||||
currencyCode: this.getCurrencyCode(e.target.value),
|
||||
currencyCode: currencyCode,
|
||||
});
|
||||
this.props.setAppState({
|
||||
type: e.target.value,
|
||||
currency: e.target.value,
|
||||
bookCurrencyCode: currencyCode,
|
||||
})
|
||||
if(this.state.enableAmountRange){
|
||||
this.setState({
|
||||
minAmount: parseFloat(Number(this.state.limits[e.target.value]['max_amount']*0.25).toPrecision(2)),
|
||||
@ -231,7 +249,7 @@ class MakerPage extends Component {
|
||||
has_range: this.state.enableAmountRange,
|
||||
min_amount: this.state.minAmount,
|
||||
max_amount: this.state.maxAmount,
|
||||
payment_method: this.state.payment_method,
|
||||
payment_method: this.state.payment_method === ""? this.defaultPaymentMethod: this.state.payment_method,
|
||||
is_explicit: this.state.is_explicit,
|
||||
premium: this.state.is_explicit ? null: this.state.premium,
|
||||
satoshis: this.state.is_explicit ? this.state.satoshis: null,
|
||||
@ -384,7 +402,7 @@ class MakerPage extends Component {
|
||||
<TextField
|
||||
sx={{width:240}}
|
||||
label={t("Satoshis")}
|
||||
error={this.state.badSatoshis}
|
||||
error={this.state.badSatoshis ? true : false}
|
||||
helperText={this.state.badSatoshis}
|
||||
type="number"
|
||||
required={true}
|
||||
@ -493,7 +511,7 @@ class MakerPage extends Component {
|
||||
const { t } = this.props;
|
||||
return (
|
||||
<div style={{display:'flex',alignItems:'center', flexWrap:'wrap'}}>
|
||||
<span style={{width: 40}}>{t("From")}</span>
|
||||
<span style={{width: t("From").length*8+2, textAlign:"left"}}>{t("From")}</span>
|
||||
<TextField
|
||||
variant="standard"
|
||||
type="number"
|
||||
@ -503,7 +521,7 @@ class MakerPage extends Component {
|
||||
error={this.minAmountError()}
|
||||
sx={{width: this.state.minAmount.toString().length * 9, maxWidth: 40}}
|
||||
/>
|
||||
<span style={{width: t("to").length*8, align:"center"}}>{t("to")}</span>
|
||||
<span style={{width: t("to").length*8, textAlign:"center"}}>{t("to")}</span>
|
||||
<TextField
|
||||
variant="standard"
|
||||
size="small"
|
||||
@ -513,7 +531,7 @@ class MakerPage extends Component {
|
||||
onChange={this.handleMaxAmountChange}
|
||||
sx={{width: this.state.maxAmount.toString().length * 9, maxWidth: 50}}
|
||||
/>
|
||||
<span style={{width: this.state.currencyCode.length*9+4, align:"right"}}>{this.state.currencyCode}</span>
|
||||
<span style={{width: this.state.currencyCode.length*9+3, textAlign:"right"}}>{this.state.currencyCode}</span>
|
||||
</div>
|
||||
)
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user