Mirror/robosats
1
0
Fork 0
mirror of https://github.com/RoboSats/robosats.git synced 2024-12-13 19:06:26 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Improve connection of UI between Make and Book

Browse Source
This commit is contained in:
Reckless_Satoshi 2022-05-16 04:37:30 -07:00
parent dc80581401
commit 30300c7e4f
No known key found for this signature in database
GPG Key ID: 9C4585B561315571
3 changed files with 49 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -49,7 +49,7 @@ class BookPage extends Component {
handleCurrencyChange=(e)=>{ handleCurrencyChange=(e)=>{
var currency = e.target.value; var currency = e.target.value;
this.props.setAppState({ this.props.setAppState({
bookCurrency: currency, currency: currency,
bookCurrencyCode: this.getCurrencyCode(currency), bookCurrencyCode: this.getCurrencyCode(currency),
}) })
} }
@ -85,8 +85,8 @@ class BookPage extends Component {
<div style={{ height: 422, width: '100%' }}> <div style={{ height: 422, width: '100%' }}>
<DataGrid <DataGrid
rows={ rows={
this.props.bookOrders.filter(order => order.type == this.props.bookType || this.props.bookType == 2) this.props.bookOrders.filter(order => order.type == this.props.type || this.props.type == 2)
.filter(order => order.currency == this.props.bookCurrency || this.props.bookCurrency == 0) .filter(order => order.currency == this.props.currency || this.props.currency == 0)
.map((order) => .map((order) =>
({id: order.id, ({id: order.id,
avatar: window.location.origin +'/static/assets/avatars/' + order.maker_nick + '.png', avatar: window.location.origin +'/static/assets/avatars/' + order.maker_nick + '.png',
@ -186,8 +186,8 @@ class BookPage extends Component {
<DataGrid <DataGrid
loading={this.props.bookLoading} loading={this.props.bookLoading}
rows={ rows={
this.props.bookOrders.filter(order => order.type == this.props.bookType || this.props.bookType == 2) this.props.bookOrders.filter(order => order.type == this.props.type || this.props.type == 2)
.filter(order => order.currency == this.props.bookCurrency || this.props.bookCurrency == 0) .filter(order => order.currency == this.props.currency || this.props.currency == 0)
.map((order) => .map((order) =>
({id: order.id, ({id: order.id,
avatar: window.location.origin +'/static/assets/avatars/' + order.maker_nick + '.png', avatar: window.location.origin +'/static/assets/avatars/' + order.maker_nick + '.png',
@ -294,7 +294,7 @@ class BookPage extends Component {
} else if (sellChecked) { } else if (sellChecked) {
var type = 0 var type = 0
} }
this.props.setAppState({bookType: type}) this.props.setAppState({type: type})
} }
handleClickBuy=(e)=>{ handleClickBuy=(e)=>{
@ -316,7 +316,7 @@ 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">
{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 sell BTC for {{currencyCode}}",{currencyCode:this.props.bookCurrencyCode})
: :
t("No orders found to buy 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> <Button size="large" variant="contained" color='primary' to='/make/' component={Link}>{t("Make Order")}</Button>
</Grid> </Grid>
<Typography color="primary" variant="body1"> <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/>
<br/> <br/>
</Typography> </Typography>
@ -389,14 +389,14 @@ class BookPage extends Component {
<Grid item xs={6} align="left"> <Grid item xs={6} align="left">
<FormControl align="center"> <FormControl align="center">
<FormHelperText align="center" sx={{textAlign:"center", position:"relative", left:"-5px"}}> <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> </FormHelperText>
<Select <Select
//autoWidth={true} //autoWidth={true}
sx={{width:120}} sx={{width:120}}
label={t("Select Payment Currency")} label={t("Select Payment Currency")}
required={true} required={true}
value={this.props.bookCurrency} value={this.props.currency}
inputProps={{ inputProps={{
style: {textAlign:"center"} style: {textAlign:"center"}
}} }}
@ -412,10 +412,10 @@ class BookPage extends Component {
{ this.props.bookNotFound ? "" : { this.props.bookNotFound ? "" :
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<Typography component="h5" variant="h5"> <Typography component="h5" variant="h5">
{this.props.bookType == 0 ? {this.props.type == 0 ?
t("You are SELLING BTC for {{currencyCode}}",{currencyCode:this.props.bookCurrencyCode}) 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 BUYING BTC for {{currencyCode}}",{currencyCode:this.props.bookCurrencyCode})
: :
t("You are looking at all") t("You are looking at all")
@ -426,7 +426,7 @@ class BookPage extends Component {
} }
{ this.props.bookNotFound ? { this.props.bookNotFound ?
<this.NoOrdersFound/> this.NoOrdersFound()
: :
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
{/* Desktop Book */} {/* Desktop Book */}
@ -445,6 +445,10 @@ class BookPage extends Component {
</Grid> </Grid>
} }
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
{ !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}> <Button color="secondary" variant="contained" to="/" component={Link}>
{t("Back")} {t("Back")}
</Button> </Button>

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

@ -17,8 +17,8 @@ export default class HomePage extends Component {
avatarLoaded: false, avatarLoaded: false,
buyChecked: false, buyChecked: false,
sellChecked: false, sellChecked: false,
bookType:2, type:2,
bookCurrency:0, currency:0,
bookCurrencyCode:'ANY', bookCurrencyCode:'ANY',
bookOrders:new Array(), bookOrders:new Array(),
bookLoading: true, bookLoading: true,

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

@ -67,6 +67,11 @@ class MakerPage extends Component {
componentDidMount() { 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() { getLimits() {
@ -94,13 +99,26 @@ class MakerPage extends Component {
handleTypeChange=(e)=>{ handleTypeChange=(e)=>{
this.setState({ this.setState({
type: e.target.value, 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)=>{ handleCurrencyChange=(e)=>{
var currencyCode = this.getCurrencyCode(e.target.value)
this.setState({ this.setState({
currency: e.target.value, 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){ if(this.state.enableAmountRange){
this.setState({ this.setState({
minAmount: parseFloat(Number(this.state.limits[e.target.value]['max_amount']*0.25).toPrecision(2)), 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, has_range: this.state.enableAmountRange,
min_amount: this.state.minAmount, min_amount: this.state.minAmount,
max_amount: this.state.maxAmount, 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, is_explicit: this.state.is_explicit,
premium: this.state.is_explicit ? null: this.state.premium, premium: this.state.is_explicit ? null: this.state.premium,
satoshis: this.state.is_explicit ? this.state.satoshis: null, satoshis: this.state.is_explicit ? this.state.satoshis: null,
@ -384,7 +402,7 @@ class MakerPage extends Component {
<TextField <TextField
sx={{width:240}} sx={{width:240}}
label={t("Satoshis")} label={t("Satoshis")}
error={this.state.badSatoshis} error={this.state.badSatoshis ? true : false}
helperText={this.state.badSatoshis} helperText={this.state.badSatoshis}
type="number" type="number"
required={true} required={true}
@ -493,7 +511,7 @@ class MakerPage extends Component {
const { t } = this.props; const { t } = this.props;
return ( return (
<div style={{display:'flex',alignItems:'center', flexWrap:'wrap'}}> <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 <TextField
variant="standard" variant="standard"
type="number" type="number"
@ -503,7 +521,7 @@ class MakerPage extends Component {
error={this.minAmountError()} 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: t("to").length*8, align:"center"}}>{t("to")}</span> <span style={{width: t("to").length*8, textAlign:"center"}}>{t("to")}</span>
<TextField <TextField
variant="standard" variant="standard"
size="small" size="small"
@ -513,7 +531,7 @@ class MakerPage extends Component {
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}}
/> />
<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> </div>
) )