Swap: Create components/adjust containers as neccesasary for part 2 of swap

common/containers/Tabs/Swap/components/wantToSwapMy.js

@@ -47,10 +47,13 @@ export default class WantToSwapMy extends Component {
     originKindSwap: PropTypes.func,
     destinationKindSwap: PropTypes.func,
     originAmountSwap: PropTypes.func,
-    destinationAmountSwap: PropTypes.func
+    destinationAmountSwap: PropTypes.func,
+    partOneCompleteSwap: PropTypes.func
   };
 
-  onClickStartSwap() {}
+  onClickStartSwap = () => {
+    this.props.partOneCompleteSwap(true);
+  };
 
   onChangeOriginAmount = amount => {
     let originAmountAsNumber = parseFloat(amount);

common/containers/Tabs/Swap/components/yourInformation.js

@@ -0,0 +1,73 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+export default class YourInformation extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  static propTypes = {
+    originAmount: PropTypes.number.isRequired,
+    destinationAmount: PropTypes.number.isRequired,
+    originKind: PropTypes.string.isRequired,
+    destinationKind: PropTypes.string.isRequired
+  };
+
+  computedOriginDestinationRatio = () => {
+    return this.props.destinationAmount / this.props.originAmount;
+  };
+
+  render() {
+    const {
+      originAmount,
+      originKind,
+      destinationAmount,
+      destinationKind
+    } = this.props;
+
+    return (
+      <article className="swap-start">
+        <section className="row">
+          <h5 className="col-xs-6 col-xs-offset-3">Your Information</h5>
+          <div className="col-xs-3">
+            <a
+              className="link"
+              href="https://bity.com/af/jshkb37v"
+              target="_blank"
+              rel="noopener"
+            >
+              {/* Todo - fix*/}
+              <img
+                className="pull-right"
+                src={'https://www.myetherwallet.com/images/logo-bity.svg'}
+                width={100}
+                height={38}
+              />
+            </a>
+          </div>
+        </section>
+        <section className="order-info-wrap row">
+          <div className="col-sm-4 order-info">
+            <h4>
+              {' '}{originAmount.toFixedIfLarger(6)} {originKind}{' '}
+            </h4>
+            <p>Amount to send</p>
+          </div>
+          <div className="col-sm-4 order-info">
+            <h4>
+              {' '}{destinationAmount.toFixedIfLarger(6)} {destinationKind}{' '}
+            </h4>
+            <p>Amount to receive</p>
+          </div>
+          <div className="col-sm-4 order-info">
+            <h4>
+              {' '}{this.computedOriginDestinationRatio().toFixedIfLarger(6)}{' '}
+              {originKind}/{destinationKind}{' '}
+            </h4>
+            <p>Your rate</p>
+          </div>
+        </section>
+      </article>
+    );
+  }
+}

common/containers/Tabs/Swap/components/yourReceiving.js

@@ -0,0 +1,41 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { DONATION_ADDRESSES_MAP } from 'config/data';
+
+export default class YourReceiving extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  static propTypes = {
+    destinationKind: PropTypes.string.isRequired
+  };
+
+  render() {
+    const { destinationKind } = this.props;
+    return (
+      <article className="swap-start">
+        <section className="swap-address block">
+          <section className="row">
+            <div className="col-sm-8 col-sm-offset-2 col-xs-12">
+              <label>
+                <span>Your Receiving Address</span>
+                <strong className="ng-binding"> ({destinationKind})</strong>
+              </label>
+              <input
+                className="form-control"
+                type="text"
+                placeholder={DONATION_ADDRESSES_MAP[destinationKind]}
+              />
+            </div>
+          </section>
+          <section className="row text-center">
+            <a className="btn btn-primary btn-lg">
+              <span>Start Swap</span>
+            </a>
+          </section>
+        </section>
+      </article>
+    );
+  }
+}

common/containers/Tabs/Swap/index.js

@@ -1,6 +1,9 @@
 import React, { Component } from 'react';
 import WantToSwapMy from './components/wantToSwapMy';
+import YourInformation from './components/yourInformation';
 import CurrentRates from './components/currentRates';
+import YourReceiving from './components/yourReceiving';
+
 import { connect } from 'react-redux';
 import * as swapActions from 'actions/swap';
 
@@ -18,6 +21,7 @@ class Swap extends Component {
     originAmount: PropTypes.any,
     destinationAmount: PropTypes.any,
     originKind: PropTypes.string,
+    partOneComplete: PropTypes.bool,
     destinationKind: PropTypes.string,
     destinationKindOptions: PropTypes.array,
     originKindOptions: PropTypes.array,
@@ -25,7 +29,8 @@ class Swap extends Component {
     destinationKindSwap: PropTypes.func,
     originAmountSwap: PropTypes.func,
     destinationAmountSwap: PropTypes.func,
-    updateBityRatesSwap: PropTypes.func
+    updateBityRatesSwap: PropTypes.func,
+    partOneCompleteSwap: PropTypes.func
   };
 
   componentDidMount() {
@@ -55,7 +60,9 @@ class Swap extends Component {
       originKindSwap,
       destinationKindSwap,
       originAmountSwap,
-      destinationAmountSwap
+      destinationAmountSwap,
+      partOneComplete,
+      partOneCompleteSwap
     } = this.props;
 
     let wantToSwapMyProps = {
@@ -69,15 +76,31 @@ class Swap extends Component {
       originKindSwap,
       destinationKindSwap,
       originAmountSwap,
-      destinationAmountSwap
+      destinationAmountSwap,
+      partOneCompleteSwap
+    };
+
+    let yourInformationProps = {
+      originAmount,
+      destinationAmount,
+      originKind,
+      destinationKind
     };
 
     return (
       <section className="container" style={{ minHeight: '50%' }}>
         <div className="tab-content">
           <main className="tab-pane swap-tab">
+            {!partOneComplete &&
+              <div>
                 <CurrentRates {...bityRates} />
                 <WantToSwapMy {...wantToSwapMyProps} />
+              </div>}
+            {partOneComplete &&
+              <div>
+                <YourInformation {...yourInformationProps} />
+                <YourReceiving destinationKind={destinationKind} />
+              </div>}
           </main>
         </div>
       </section>
@@ -87,6 +110,7 @@ class Swap extends Component {
 
 function mapStateToProps(state) {
   return {
+    partOneComplete: state.swap.partOneComplete,
     originAmount: state.swap.originAmount,
     destinationAmount: state.swap.destinationAmount,
     originKind: state.swap.originKind,