diff --git a/src/components/input/index.js b/src/components/input/index.js index 125d593..181525c 100644 --- a/src/components/input/index.js +++ b/src/components/input/index.js @@ -17,11 +17,6 @@ const styles = theme => ({ }); class Input extends React.Component { - constructor(props) { - super(props); - this.state = { value: props.value ? props.value : 0 }; - } - static getDerivedStateFromProps = nextProps => { if (nextProps.value && nextProps.disable) { return { value: nextProps.value }; @@ -35,7 +30,8 @@ class Input extends React.Component { }; render() { - const { classes, style, disable, min, step, max } = this.props; + const { classes, style, disable, min, max, value, step } = this.props; + return ( this.onChange(e)} - value={this.state.value} + value={value} type={'number'} /> ); diff --git a/src/components/swaptab/index.js b/src/components/swaptab/index.js index 8648d94..113f2a8 100644 --- a/src/components/swaptab/index.js +++ b/src/components/swaptab/index.js @@ -95,73 +95,95 @@ const styles = theme => ({ }); class SwapTab extends React.Component { - rate = {}; - quoteAmount = 0; - - state = { - error: false, - base: 'LTC', - quote: 'BTC', - baseAmount: MIN, - quoteAmount: 0, + constructor(props) { + super(props); + + this.state = { + error: false, + base: 'LTC', + quote: 'BTC', + baseAmount: MIN, + quoteAmount: 0, + }; + } + + componentDidUpdate = (prevProps, prevState) => { + // Update the rate if the request finished or the currencies changed + if ( + prevProps.loading || + prevState.base !== this.state.base || + prevState.quote !== this.state.quote + ) { + this.setState({ + rate: this.props.rates[`${this.state.base}/${this.state.quote}`], + }); + } + }; + + checkBaseAmount = baseAmount => { + const valid = baseAmount <= MAX && baseAmount >= MIN; + + if (!valid) { + this.setState({ + error: true, + }); + } + return valid; }; - setSwapData = baseAmount => { - if (baseAmount <= MAX && baseAmount >= MIN) { + updateBaseAmount = quoteAmount => { + const newBaseAmount = (quoteAmount / this.state.rate.rate).toFixed(8); + + if (this.checkBaseAmount(newBaseAmount)) { this.setState({ - baseAmount, - quoteAmount: this.calculateQuoteAmount(baseAmount), + quoteAmount: Number.parseFloat(quoteAmount).toFixed(8), + baseAmount: newBaseAmount, error: false, }); - } else { + } + }; + + updateQuoteAmount = baseAmount => { + const newQuoteAmount = (baseAmount * this.state.rate.rate).toFixed(8); + + if (this.checkBaseAmount(baseAmount)) { this.setState({ - error: true, + quoteAmount: newQuoteAmount, + baseAmount: Number.parseFloat(baseAmount).toFixed(8), + error: false, }); } }; shouldSubmit = () => { - const { error } = this.state; + const { error, rate } = this.state; - if (error !== undefined && this.rate !== 'Not found') { + if (error === false && this.rate !== 'Not found') { const state = { ...this.state, - pair: this.rate.pair, + pair: rate.pair, }; - if (this.state.quoteAmount === 0) { - this.props.onPress({ - ...state, - quoteAmount: this.quoteAmount, - }); - } else { - this.props.onPress(state); - } + this.props.onPress(state); } }; - getRate = (rates, pairId) => { - const rate = rates[pairId]; + getRate = () => { + const rate = this.state.rate; if (rate) { - this.rate = rate; return rate.rate.toFixed(5); } else { return 'Not found'; } }; - calculateQuoteAmount = baseAmount => { - return (Number.parseFloat(baseAmount) * this.rate.rate).toFixed(8); - }; - render() { const { classes, rates, currencies, loading } = this.props; - let { error, base, quote, baseAmount, quoteAmount } = this.state; + let { error, base, quote, baseAmount, quoteAmount, rate } = this.state; - if (quoteAmount === 0) { - this.quoteAmount = this.calculateQuoteAmount(baseAmount); - quoteAmount = this.quoteAmount; + if (quoteAmount === 0 && rate !== undefined) { + this.updateQuoteAmount(baseAmount); } return loading ? ( @@ -180,10 +202,7 @@ class SwapTab extends React.Component { - + @@ -194,7 +213,7 @@ class SwapTab extends React.Component { step={MIN} error={error} value={baseAmount} - onChange={e => this.setSwapData(e)} + onChange={e => this.updateQuoteAmount(e)} /> - + this.updateBaseAmount(e)} + /> { return dispatch => { const { pair, invoice, keys } = swapInfo; - console.log({ - pairId: pair.id, - orderSide: pair.orderSide, - invoice: invoice, - refundPublicKey: keys.publicKey, - }); - dispatch(swapRequest()); axios .post(url, {