diff --git a/common/actions/swap.js b/common/actions/swap.js index c4825565..f1d1b007 100644 --- a/common/actions/swap.js +++ b/common/actions/swap.js @@ -3,7 +3,7 @@ export const SWAP_DESTINATION_KIND = 'SWAP_DESTINATION_KIND'; export const SWAP_ORIGIN_AMOUNT = 'SWAP_ORIGIN_AMOUNT'; export const SWAP_DESTINATION_AMOUNT = 'SWAP_DESTINATION_AMOUNT'; export const SWAP_UPDATE_BITY_RATES = 'SWAP_UPDATE_BITY_RATES'; - +export const SWAP_DESTINATION_KIND_OPTIONS = 'SWAP_DESTINATION_KIND_OPTIONS' export const SWAP_ORIGIN_KIND_TO = (value) => { return { @@ -39,3 +39,6 @@ export const SWAP_UPDATE_BITY_RATES_TO = (value) => { value } }; + + + diff --git a/common/containers/Tabs/Swap/components/wantToSwapMy.js b/common/containers/Tabs/Swap/components/wantToSwapMy.js index 5a6ec8c3..fa9c1b24 100644 --- a/common/containers/Tabs/Swap/components/wantToSwapMy.js +++ b/common/containers/Tabs/Swap/components/wantToSwapMy.js @@ -3,14 +3,10 @@ import PropTypes from 'prop-types'; import translate from 'translations'; import {combineAndUpper} from 'api/bity'; -function sleep(ms) { - return new Promise(resolve => setTimeout(resolve, ms)); -} - class CoinTypeDropDown extends Component { - constructor(props) { - super(props) + constructor(props, context) { + super(props, context) } static propTypes = { @@ -37,8 +33,8 @@ class CoinTypeDropDown extends Component { } export default class WantToSwapMy extends Component { - constructor(props) { - super(props) + constructor(props, context) { + super(props, context) } static propTypes = { @@ -52,7 +48,9 @@ export default class WantToSwapMy extends Component { swapOriginKindTo: PropTypes.func, swapDestinationKindTo: PropTypes.func, swapOriginAmountTo: PropTypes.func, - swapDestinationAmountTo: PropTypes.func + swapDestinationAmountTo: PropTypes.func, + swapOriginKindAndDestinationKindAndDestinationOptionsTo: PropTypes.func + }; onClickStartSwap() { @@ -86,23 +84,19 @@ export default class WantToSwapMy extends Component { } async onChangeDestinationKind(event) { - let toKind = event.target.value; - this.props.swapDestinationKindTo(toKind); - // TODO - can't find a way around this without bringing in annoying deps. Even though redux action is sync, - // it seems it happens in the background and values don't get updated in time - await sleep(100); - let pairName = combineAndUpper(this.props.destinationKind, this.props.originKind); + let newDestinationKind = event.target.value; + this.props.swapDestinationKindTo(newDestinationKind); + let pairName = combineAndUpper(this.props.originKind, newDestinationKind); let bityRate = this.props.bityRates[pairName]; - this.props.swapOriginAmountTo(parseFloat(this.props.destinationAmount) * bityRate) + this.props.swapDestinationAmountTo(parseFloat(this.props.originAmount) * bityRate) } async onChangeOriginKind(event) { - let toKind = event.target.value; - this.props.swapOriginKindTo(toKind); - // TODO - can't find a way around this without bringing in annoying deps. Even though redux action is sync, - // it seems it happens in the background and values don't get updated in time - await sleep(100); - let pairName = combineAndUpper(this.props.originKind, this.props.destinationKind); + let newOriginKind = event.target.value; + this.props.swapOriginKindTo(newOriginKind); + // https://github.com/reactjs/redux/issues/1543#issuecomment-201399259 + let destinationKind = store.getState().swap.destinationKind; + let pairName = combineAndUpper(newOriginKind, destinationKind); let bityRate = this.props.bityRates[pairName]; this.props.swapDestinationAmountTo(parseFloat(this.props.originAmount) * bityRate) } @@ -126,7 +120,9 @@ export default class WantToSwapMy extends Component { placeholder="Amount" onChange={(e) => this.onChangeOriginAmount(e.target.value)} value={originAmount}/> -

{translate('SWAP_init_2')}

@@ -137,7 +133,9 @@ export default class WantToSwapMy extends Component { placeholder="Amount" value={destinationAmount} onChange={(e) => this.onChangeDestinationAmount(e.target.value)}/> -
diff --git a/common/containers/Tabs/Swap/index.js b/common/containers/Tabs/Swap/index.js index 5042e031..1858dde5 100644 --- a/common/containers/Tabs/Swap/index.js +++ b/common/containers/Tabs/Swap/index.js @@ -7,7 +7,8 @@ import { SWAP_DESTINATION_KIND_TO, SWAP_ORIGIN_AMOUNT_TO, SWAP_ORIGIN_KIND_TO, - SWAP_UPDATE_BITY_RATES_TO + SWAP_UPDATE_BITY_RATES_TO, + SWAP_ORIGIN_KIND_AND_DESTINATION_KIND_AND_DESTINATION_OPTIONS_TO } from 'actions/swap'; import PropTypes from 'prop-types'; @@ -31,8 +32,8 @@ class Swap extends Component { swapDestinationKindTo: PropTypes.func, swapOriginAmountTo: PropTypes.func, swapDestinationAmountTo: PropTypes.func, - swapUpdateBityRatesTo: PropTypes.func - + swapUpdateBityRatesTo: PropTypes.func, + swapOriginKindAndDestinationKindAndDestinationOptionsTo: PropTypes.func }; render() { @@ -47,7 +48,8 @@ class Swap extends Component { swapOriginKindTo, swapDestinationKindTo, swapOriginAmountTo, - swapDestinationAmountTo + swapDestinationAmountTo, + swapOriginKindAndDestinationKindAndDestinationOptionsTo } = this.props; let wantToSwapMyProps = { @@ -61,7 +63,8 @@ class Swap extends Component { swapOriginKindTo, swapDestinationKindTo, swapOriginAmountTo, - swapDestinationAmountTo + swapDestinationAmountTo, + swapOriginKindAndDestinationKindAndDestinationOptionsTo }; @@ -113,6 +116,10 @@ function mapDispatchToProps(dispatch) { }, swapUpdateBityRatesTo: (bityRates) => { dispatch(SWAP_UPDATE_BITY_RATES_TO(bityRates)) + }, + swapOriginKindAndDestinationKindAndDestinationOptionsTo: (originKind, destinationKind) => { + dispatch(SWAP_ORIGIN_KIND_AND_DESTINATION_KIND_AND_DESTINATION_OPTIONS_TO(originKind, destinationKind)) + } } } diff --git a/common/reducers/swap.js b/common/reducers/swap.js index a40d133b..c6690c61 100644 --- a/common/reducers/swap.js +++ b/common/reducers/swap.js @@ -6,16 +6,16 @@ import { SWAP_UPDATE_BITY_RATES } from 'actions/swap'; -import without from 'lodash/without'; -const ALL_CRYPTO_KIND_OPTIONS = ['BTC', 'ETH', 'REP']; +export const ALL_CRYPTO_KIND_OPTIONS = ['BTC', 'ETH', 'REP']; + const initialState = { originAmount: 0, destinationAmount: 0, originKind: 'BTC', destinationKind: 'ETH', - destinationKindOptions: without(ALL_CRYPTO_KIND_OPTIONS, 'BTC'), - originKindOptions: without(ALL_CRYPTO_KIND_OPTIONS, 'REP'), + destinationKindOptions: ALL_CRYPTO_KIND_OPTIONS.filter(element => element !== 'BTC'), + originKindOptions: ALL_CRYPTO_KIND_OPTIONS.filter(element => element !== 'REP'), bityRates: {} }; @@ -26,8 +26,8 @@ export function swap(state = initialState, action) { return { ...state, originKind: action.value, - destinationKindOptions: without(ALL_CRYPTO_KIND_OPTIONS, action.value), - destinationKind: without(ALL_CRYPTO_KIND_OPTIONS, action.value)[0] + destinationKind: action.value === state.destinationKind ? ALL_CRYPTO_KIND_OPTIONS.filter(element => element !== action.value)[0] : state.destinationKind, + destinationKindOptions: ALL_CRYPTO_KIND_OPTIONS.filter(element => element !== action.value) }; } case SWAP_DESTINATION_KIND: {