Merge branch 'swap_part_2_more' into swap_part_2

common/actions/swap.js

@@ -4,7 +4,8 @@ import {
   SWAP_ORIGIN_AMOUNT,
   SWAP_ORIGIN_KIND,
   SWAP_UPDATE_BITY_RATES,
-  SWAP_PART_ONE_COMPLETE
+  SWAP_PART_ONE_COMPLETE,
+  SWAP_RECEIVING_ADDRESS
 } from './swapConstants';
 
 export const originKindSwap = value => {
@@ -48,3 +49,10 @@ export const partOneCompleteSwap = (value: boolean) => {
     value
   };
 };
+
+export const receivingAddressSwap = value => {
+  return {
+    type: SWAP_RECEIVING_ADDRESS,
+    value
+  };
+};

common/actions/swapConstants.js

@@ -4,3 +4,4 @@ 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';

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,

common/libs/validator.js

@@ -0,0 +1,16 @@
+import WalletAddressValidator from 'wallet-address-validator';
+import ethUtil from 'ethereumjs-util';
+
+export default class Validator {
+  isValidETHAddress = function(address) {
+    if (address && address === '0x0000000000000000000000000000000000000000')
+      return false;
+    if (address) {
+      return ethUtil.isValidAddress(address);
+    }
+    return false;
+  };
+  isValidBTCAddress = function(address) {
+    return WalletAddressValidator.validate(address, 'BTC');
+  };
+}

common/reducers/swap.js

@@ -4,7 +4,8 @@ import {
   SWAP_ORIGIN_AMOUNT,
   SWAP_ORIGIN_KIND,
   SWAP_UPDATE_BITY_RATES,
-  SWAP_PART_ONE_COMPLETE
+  SWAP_PART_ONE_COMPLETE,
+  SWAP_RECEIVING_ADDRESS
 } from 'actions/swapConstants';
 import { combineAndUpper } from 'api/bity';
 
@@ -22,7 +23,8 @@ const initialState = {
     element => element !== 'REP'
   ),
   partOneComplete: false,
-  bityRates: {}
+  bityRates: {},
+  receivingAddress: ''
 };
 
 const buildDestinationAmount = (
@@ -101,6 +103,11 @@ export function swap(state = initialState, action) {
         ...state,
         partOneComplete: action.value
       };
+    case SWAP_RECEIVING_ADDRESS:
+      return {
+        ...state,
+        receivingAddress: action.value
+      };
     default:
       return state;
   }

package.json

@@ -5,6 +5,7 @@
   "description": "MyEtherWallet v4",
   "dependencies": {
     "axios": "^0.16.2",
+    "ethereumjs-util": "^5.1.2",
     "lodash": "^4.17.4",
     "prop-types": "^15.5.8",
     "react": "^15.4.2",
@@ -17,6 +18,7 @@
     "redux-logger": "^3.0.1",
     "redux-saga": "^0.15.3",
     "store2": "^2.5.0",
+    "wallet-address-validator": "^0.1.0",
     "whatwg-fetch": "^2.0.2"
   },
   "devDependencies": {