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 (
+
+
+
+
+
2
+
+ Waiting for your {originKind}...
+
+
+
+
3
+
+ ETH Received!
+
+
+
+
4
+
+ destination your{' '}
+ {destinationKind}
+
+ Waiting for {numberOfConfirmations} confirmations...
+
+
+
+
+
+ );
+ }
+}
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;