Swap Part 3 WIP

2025-01-11 03:26:14 +00:00 · 2017-07-02 00:45:22 -05:00 · 2017-07-02 00:45:22 -05:00 · b623a3efe9
commit b623a3efe9
parent afe2adbb5a
8 changed files with 252 additions and 30 deletions
--- 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
+  };
+};
--- 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';
--- 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 {
        />

        <div className="col-xs-12 clearfix text-center">
-          <a onClick={this.onClickStartSwap} className="btn btn-info btn-lg">
+          <button
+            disabled={this.state.disabled}
+            onClick={this.onClickStartSwap}
+            className="btn btn-info btn-lg"
+          >
            <span>{translate('SWAP_init_CTA')}</span>
-          </a>
+          </button>
        </div>
      </article>
    );
--- a/common/containers/Tabs/Swap/components/onGoingSwapInformation.js
+++ 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 (
+      <div>
+        <section className="row text-center">
+          <div className="col-xs-3 text-left">
+            <button className="btn btn-danger btn-xs" onClick={restartSwap}>
+              Start New Swap
+            </button>
+          </div>
+          <h5 className="col-xs-6 ng-scope">{translate('SWAP_information')}</h5>
+          <div className="col-xs-3">
+            <a
+              className="link"
+              href="https://bity.com/af/jshkb37v"
+              target="_blank"
+              rel="noopener"
+            >
+              <img
+                className="pull-right"
+                src={'https://www.myetherwallet.com/images/logo-bity.svg'}
+                width={100}
+                height={38}
+              />
+            </a>
+          </div>
+        </section>
+        <section className="row order-info-wrap">
+          <div className="col-sm-3 order-info">
+            <h4>{referenceNumber}</h4>
+            <p>{translate('SWAP_ref_num')}</p>
+          </div>
+          <div className="col-sm-3 order-info">
+            <h4>{timeRemaining}</h4>
+            <p>
+              {translate('SWAP_time')}
+            </p>
+          </div>
+          <div className="col-sm-3 order-info">
+            <h4>{originAmount} {originKind}</h4>
+            <p>{translate('SWAP_rec_amt')}</p>
+          </div>
+          <div className="col-sm-3 order-info">
+            <h4>
+              {`${this.computedOriginDestinationRatio()} ${destinationKind}/${originKind}`}
+            </h4>
+            <p>{translate('SWAP_your_rate')}</p>
+          </div>
+        </section>
+      </div>
+    );
+  }
+}
--- 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 (
      <article className="swap-start">
@ -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]}
              />
            </div>
          </section>
          <section className="row text-center">
-            <button disabled={!validAddress} className="btn btn-primary btn-lg">
+            <button
+              disabled={!validAddress}
+              onClick={this.onClickPartTwoComplete}
+              className="btn btn-primary btn-lg"
+            >
              <span>{translate('SWAP_start_CTA')}</span>
            </button>
          </section>
--- a/common/containers/Tabs/Swap/components/swapProgress.js
+++ 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 (
+      <section className="row swap-progress">
+        <div className="sep" />
+        <div className="progress-item  progress-true">
+          <div className="progress-circle"><i>1</i></div>
+          <p className="ng-scope">Order Initiated</p>
+        </div>
+        <div className="progress-item progress-true">
+          <div className="progress-circle"><i>2</i></div>
+          <p>
+            <span className="ng-scope">Waiting for your </span>{originKind}...
+          </p>
+        </div>
+        <div className="progress-item progress-active">
+          <div className="progress-circle"><i>3</i></div>
+          <p>
+            ETH <span className="ng-scope">Received!</span>
+          </p>
+        </div>
+        <div className="progress-item">
+          <div className="progress-circle"><i>4</i></div>
+          <p>
+            <span className="ng-scope">destination your</span>{' '}
+            {destinationKind} <br />
+            <small>
+              Waiting for {numberOfConfirmations} confirmations...
+            </small>
+          </p>
+        </div>
+        <div className="progress-item">
+          <div className="progress-circle"><i>5</i></div>
+          <p className="ng-scope">Order Complete</p>
+        </div>
+      </section>
+    );
+  }
+}
--- 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 {
        <div className="tab-content">
          <main className="tab-pane swap-tab">
            {!partOneComplete &&
+              !partTwoComplete &&
              <div>
                <CurrentRates {...bityRates} />
                <CurrencySwap {...wantToSwapMyProps} />
              </div>}
            {partOneComplete &&
+              !partTwoComplete &&
              <div>
                <SwapInformation {...yourInformationProps} />
-                <ReceivingAddress {...yourReceivingProps} />
+                <ReceivingAddress {...receivingAddressProps} />
+              </div>}
+            {partOneComplete &&
+              partTwoComplete &&
+              <div>
+                <OnGoingSwapInformation {...onGoingSwapInformationProps} />
+                <SwapProgress {...onGoingSwapInformationProps} />
              </div>}
          </main>
        </div>
@ -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,
--- 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;