Consume new receivingAddressSwap action creator and receivingAddress state, validate receiving address input using Validator class.

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

@@ -1,18 +1,39 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { DONATION_ADDRESSES_MAP } from 'config/data';
+import Validator from 'libs/validator';
 
 export default class YourReceiving extends Component {
   constructor(props) {
     super(props);
+    this.validator = new Validator();
+    this.state = {
+      validAddress: false
+    };
   }
 
   static propTypes = {
-    destinationKind: PropTypes.string.isRequired
+    destinationKind: PropTypes.string.isRequired,
+    receivingAddressSwap: PropTypes.func.isRequired,
+    receivingAddress: PropTypes.string
+  };
+
+  onChangeReceivingAddress = event => {
+    const value = event.target.value;
+    this.props.receivingAddressSwap(value);
+    let validAddress;
+    // TODO - find better pattern here once currencies move beyond BTC, ETH, REP
+    if (this.props.destinationKind === 'BTC') {
+      validAddress = this.validator.isValidBTCAddress(value);
+    } else {
+      validAddress = this.validator.isValidETHAddress(value);
+    }
+    this.setState({ validAddress });
   };
 
   render() {
-    const { destinationKind } = this.props;
+    const { destinationKind, receivingAddress } = this.props;
+    const { validAddress } = this.state;
     return (
       <article className="swap-start">
         <section className="swap-address block">
@@ -23,16 +44,20 @@ export default class YourReceiving extends Component {
                 <strong> ({destinationKind})</strong>
               </label>
               <input
-                className="form-control"
+                className={`form-control ${validAddress
+                  ? 'is-valid'
+                  : 'is-invalid'}`}
                 type="text"
+                value={receivingAddress}
+                onChange={this.onChangeReceivingAddress}
                 placeholder={DONATION_ADDRESSES_MAP[destinationKind]}
               />
             </div>
           </section>
           <section className="row text-center">
-            <a className="btn btn-primary btn-lg">
+            <button disabled={!validAddress} className="btn btn-primary btn-lg">
               <span>Start Swap</span>
-            </a>
+            </button>
           </section>
         </section>
       </article>

common/containers/Tabs/Swap/index.js

@@ -25,12 +25,14 @@ class Swap extends Component {
     destinationKind: PropTypes.string,
     destinationKindOptions: PropTypes.array,
     originKindOptions: PropTypes.array,
+    receivingAddress: PropTypes.string,
     originKindSwap: PropTypes.func,
     destinationKindSwap: PropTypes.func,
     originAmountSwap: PropTypes.func,
     destinationAmountSwap: PropTypes.func,
     updateBityRatesSwap: PropTypes.func,
-    partOneCompleteSwap: PropTypes.func
+    partOneCompleteSwap: PropTypes.func,
+    receivingAddressSwap: PropTypes.func
   };
 
   componentDidMount() {
@@ -62,7 +64,9 @@ class Swap extends Component {
       originAmountSwap,
       destinationAmountSwap,
       partOneComplete,
-      partOneCompleteSwap
+      partOneCompleteSwap,
+      receivingAddressSwap,
+      receivingAddress
     } = this.props;
 
     let wantToSwapMyProps = {
@@ -87,6 +91,12 @@ class Swap extends Component {
       destinationKind
     };
 
+    let yourReceivingProps = {
+      destinationKind,
+      receivingAddressSwap,
+      receivingAddress
+    };
+
     return (
       <section className="container" style={{ minHeight: '50%' }}>
         <div className="tab-content">
@@ -99,7 +109,7 @@ class Swap extends Component {
             {partOneComplete &&
               <div>
                 <YourInformation {...yourInformationProps} />
-                <YourReceiving destinationKind={destinationKind} />
+                <YourReceiving {...yourReceivingProps} />
               </div>}
           </main>
         </div>
@@ -110,6 +120,7 @@ class Swap extends Component {
 
 function mapStateToProps(state) {
   return {
+    receivingAddress: state.swap.receivingAddress,
     partOneComplete: state.swap.partOneComplete,
     originAmount: state.swap.originAmount,
     destinationAmount: state.swap.destinationAmount,