diff --git a/common/actions/swap.js b/common/actions/swap.js index 79c37555..b4ae9437 100644 --- a/common/actions/swap.js +++ b/common/actions/swap.js @@ -5,7 +5,9 @@ import { SWAP_ORIGIN_KIND, SWAP_UPDATE_BITY_RATES, SWAP_PART_ONE_COMPLETE, - SWAP_RECEIVING_ADDRESS + SWAP_PART_TWO_COMPLETE, + SWAP_DESTINATION_ADDRESS, + SWAP_RESTART } from './swapConstants'; export const originKindSwap = value => { @@ -50,9 +52,22 @@ export const partOneCompleteSwap = (value: boolean) => { }; }; -export const receivingAddressSwap = value => { +export const partTwoCompleteSwap = (value: boolean) => { return { - type: SWAP_RECEIVING_ADDRESS, + type: SWAP_PART_TWO_COMPLETE, value }; }; + +export const destinationAddressSwap = value => { + return { + type: SWAP_DESTINATION_ADDRESS, + value + }; +}; + +export const restartSwap = () => { + return { + type: SWAP_RESTART + }; +}; diff --git a/common/actions/swapConstants.js b/common/actions/swapConstants.js index ecf0fb4a..a1c5a718 100644 --- a/common/actions/swapConstants.js +++ b/common/actions/swapConstants.js @@ -4,4 +4,6 @@ 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_PART_ONE_COMPLETE = 'SWAP_PART_ONE_COMPLETE'; -export const SWAP_RECEIVING_ADDRESS = 'SWAP_RECEIVING_ADDRESS'; +export const SWAP_PART_TWO_COMPLETE = 'SWAP_PART_TWO_COMPLETE'; +export const SWAP_DESTINATION_ADDRESS = 'SWAP_DESTINATION_ADDRESS'; +export const SWAP_RESTART = 'SWAP_RESTART'; diff --git a/common/containers/Tabs/Swap/components/currencySwap.js b/common/containers/Tabs/Swap/components/currencySwap.js index be58f129..2090c1b4 100644 --- a/common/containers/Tabs/Swap/components/currencySwap.js +++ b/common/containers/Tabs/Swap/components/currencySwap.js @@ -4,8 +4,8 @@ import translate from 'translations'; import { combineAndUpper } from 'api/bity'; class CoinTypeDropDown extends Component { - constructor(props, context) { - super(props, context); + constructor(props) { + super(props); } static propTypes = { @@ -34,6 +34,9 @@ class CoinTypeDropDown extends Component { export default class CurrencySwap extends Component { constructor(props) { super(props); + this.state = { + disabled: false + }; } static propTypes = { @@ -146,9 +149,13 @@ export default class CurrencySwap extends Component { />
- +
); diff --git a/common/containers/Tabs/Swap/components/onGoingSwapInformation.js b/common/containers/Tabs/Swap/components/onGoingSwapInformation.js new file mode 100644 index 00000000..f23bd26b --- /dev/null +++ b/common/containers/Tabs/Swap/components/onGoingSwapInformation.js @@ -0,0 +1,87 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { toFixedIfLarger } from 'utils/formatters'; +import translate from 'translations'; + +export default class OnGoingSwapInformation extends Component { + constructor(props) { + super(props); + } + + static propTypes = { + referenceNumber: PropTypes.string.isRequired, + timeRemaining: PropTypes.any, // FIXME + originAmount: PropTypes.number.isRequired, + originKind: PropTypes.string.isRequired, + destinationKind: PropTypes.string.isRequired, + destinationAmount: PropTypes.number.isRequired, + restartSwap: PropTypes.func.isRequired + }; + + computedOriginDestinationRatio = () => { + return toFixedIfLarger( + this.props.destinationAmount / this.props.originAmount, + 6 + ); + }; + + render() { + const { + referenceNumber, + timeRemaining, + originAmount, + originKind, + destinationKind, + restartSwap + } = this.props; + return ( +
+
+
+ +
+
{translate('SWAP_information')}
+
+ + + +
+
+
+
+

{referenceNumber}

+

{translate('SWAP_ref_num')}

+
+
+

{timeRemaining}

+

+ {translate('SWAP_time')} +

+
+
+

{originAmount} {originKind}

+

{translate('SWAP_rec_amt')}

+
+
+

+ {`${this.computedOriginDestinationRatio()} ${destinationKind}/${originKind}`} +

+

{translate('SWAP_your_rate')}

+
+
+
+ ); + } +} diff --git a/common/containers/Tabs/Swap/components/receivingAddress.js b/common/containers/Tabs/Swap/components/receivingAddress.js index c2bc37a8..485e50c0 100644 --- a/common/containers/Tabs/Swap/components/receivingAddress.js +++ b/common/containers/Tabs/Swap/components/receivingAddress.js @@ -15,13 +15,14 @@ export default class ReceivingAddress extends Component { static propTypes = { destinationKind: PropTypes.string.isRequired, - receivingAddressSwap: PropTypes.func.isRequired, - receivingAddress: PropTypes.string + destinationAddressSwap: PropTypes.func.isRequired, + destinationAddress: PropTypes.string, + partTwoCompleteSwap: PropTypes.func }; - onChangeReceivingAddress = event => { + onChangeDestinationAddress = event => { const value = event.target.value; - this.props.receivingAddressSwap(value); + this.props.destinationAddressSwap(value); let validAddress; // TODO - find better pattern here once currencies move beyond BTC, ETH, REP if (this.props.destinationKind === 'BTC') { @@ -32,8 +33,12 @@ export default class ReceivingAddress extends Component { this.setState({ validAddress }); }; + onClickPartTwoComplete = () => { + this.props.partTwoCompleteSwap(true); + }; + render() { - const { destinationKind, receivingAddress } = this.props; + const { destinationKind, destinationAddress } = this.props; const { validAddress } = this.state; return (
@@ -49,14 +54,18 @@ export default class ReceivingAddress extends Component { ? 'is-valid' : 'is-invalid'}`} type="text" - value={receivingAddress} - onChange={this.onChangeReceivingAddress} + value={destinationAddress} + onChange={this.onChangeDestinationAddress} placeholder={DONATION_ADDRESSES_MAP[destinationKind]} />
-
diff --git a/common/containers/Tabs/Swap/components/swapProgress.js b/common/containers/Tabs/Swap/components/swapProgress.js new file mode 100644 index 00000000..d5d51e0b --- /dev/null +++ b/common/containers/Tabs/Swap/components/swapProgress.js @@ -0,0 +1,56 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +// import { toFixedIfLarger } from 'utils/formatters'; +// import translate from 'translations'; + +export default class SwapProgress extends Component { + constructor(props) { + super(props); + } + + static propTypes = { + numberOfConfirmations: PropTypes.number, + destinationKind: PropTypes.string, + originKind: PropTypes.string, + activeStep: PropTypes.number + }; + + render() { + const { numberOfConfirmations, destinationKind, originKind } = this.props; + return ( +
+
+
+
1
+

Order Initiated

+
+
+
2
+

+ Waiting for your {originKind}... +

+
+
+
3
+

+ ETH Received! +

+
+
+
4
+

+ destination your{' '} + {destinationKind}
+ + Waiting for {numberOfConfirmations} confirmations... + +

+
+
+
5
+

Order Complete

+
+
+ ); + } +} diff --git a/common/containers/Tabs/Swap/index.js b/common/containers/Tabs/Swap/index.js index e54bb613..76da12ec 100644 --- a/common/containers/Tabs/Swap/index.js +++ b/common/containers/Tabs/Swap/index.js @@ -3,7 +3,8 @@ import CurrencySwap from './components/currencySwap'; import SwapInformation from './components/swapInformation'; import CurrentRates from './components/currentRates'; import ReceivingAddress from './components/receivingAddress'; - +import SwapProgress from './components/swapProgress'; +import OnGoingSwapInformation from './components/onGoingSwapInformation'; import { connect } from 'react-redux'; import * as swapActions from 'actions/swap'; @@ -25,14 +26,17 @@ class Swap extends Component { destinationKind: PropTypes.string, destinationKindOptions: PropTypes.array, originKindOptions: PropTypes.array, - receivingAddress: PropTypes.string, + destinationAddress: PropTypes.string, originKindSwap: PropTypes.func, destinationKindSwap: PropTypes.func, originAmountSwap: PropTypes.func, destinationAmountSwap: PropTypes.func, updateBityRatesSwap: PropTypes.func, partOneCompleteSwap: PropTypes.func, - receivingAddressSwap: PropTypes.func + destinationAddressSwap: PropTypes.func, + restartSwap: PropTypes.func, + partTwoCompleteSwap: PropTypes.func, + partTwoComplete: PropTypes.bool }; componentDidMount() { @@ -65,8 +69,11 @@ class Swap extends Component { destinationAmountSwap, partOneComplete, partOneCompleteSwap, - receivingAddressSwap, - receivingAddress + destinationAddressSwap, + destinationAddress, + restartSwap, + partTwoCompleteSwap, + partTwoComplete } = this.props; let wantToSwapMyProps = { @@ -91,10 +98,26 @@ class Swap extends Component { destinationKind }; - let yourReceivingProps = { + let receivingAddressProps = { destinationKind, - receivingAddressSwap, - receivingAddress + destinationAddressSwap, + destinationAddress, + partTwoCompleteSwap + }; + + const referenceNumber = '2341asdfads'; + const timeRemaining = '2:30'; + + let onGoingSwapInformationProps = { + // from bity + referenceNumber: referenceNumber, + timeRemaining: timeRemaining, + + originAmount, + originKind, + destinationKind, + destinationAmount, + restartSwap }; return ( @@ -102,14 +125,22 @@ class Swap extends Component {
{!partOneComplete && + !partTwoComplete &&
} {partOneComplete && + !partTwoComplete &&
- + +
} + {partOneComplete && + partTwoComplete && +
+ +
}
@@ -120,7 +151,8 @@ class Swap extends Component { function mapStateToProps(state) { return { - receivingAddress: state.swap.receivingAddress, + partTwoComplete: state.swap.partTwoComplete, + destinationAddress: state.swap.destinationAddress, partOneComplete: state.swap.partOneComplete, originAmount: state.swap.originAmount, destinationAmount: state.swap.destinationAmount, diff --git a/common/reducers/swap.js b/common/reducers/swap.js index 3de1b101..cc655e56 100644 --- a/common/reducers/swap.js +++ b/common/reducers/swap.js @@ -5,7 +5,9 @@ import { SWAP_ORIGIN_KIND, SWAP_UPDATE_BITY_RATES, SWAP_PART_ONE_COMPLETE, - SWAP_RECEIVING_ADDRESS + SWAP_DESTINATION_ADDRESS, + SWAP_RESTART, + SWAP_PART_TWO_COMPLETE } from 'actions/swapConstants'; import { combineAndUpper } from 'api/bity'; @@ -23,8 +25,9 @@ const initialState = { element => element !== 'REP' ), partOneComplete: false, + partTwoComplete: false, bityRates: {}, - receivingAddress: '' + destinationAddress: '' }; const buildDestinationAmount = ( @@ -103,10 +106,21 @@ export function swap(state = initialState, action) { ...state, partOneComplete: action.value }; - case SWAP_RECEIVING_ADDRESS: + case SWAP_PART_TWO_COMPLETE: return { ...state, - receivingAddress: action.value + partTwoComplete: action.value + }; + case SWAP_DESTINATION_ADDRESS: + return { + ...state, + destinationAddress: action.value + }; + case SWAP_RESTART: + return { + ...state, + ...initialState, + bityRates: state.bityRates }; default: return state;