Merge branch 'master' into mascara-deploy

1 files changed, 202 insertions, 278 deletions

diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js
index 8c9686035..2270b8236 100644
--- a/ui/app/components/shapeshift-form.js
+++ b/ui/app/components/shapeshift-form.js
@@ -1,318 +1,242 @@
-const PersistentForm = require('../../lib/persistent-form')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
+const Component = require('react').Component
 const connect = require('react-redux').connect
-const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
-const actions = require('../actions')
-const Qr = require('./qr-code')
-const isValidAddress = require('../util').isValidAddress
-module.exports = connect(mapStateToProps)(ShapeshiftForm)
+const classnames = require('classnames')
+const { qrcode } = require('qrcode-npm')
+const { shapeShiftSubview, pairUpdate, buyWithShapeShift } = require('../actions')
+const { isValidAddress } = require('../util')
+const SimpleDropdown = require('./dropdowns/simple-dropdown')
 
 function mapStateToProps (state) {
+  const {
+    coinOptions,
+    tokenExchangeRates,
+    selectedAddress,
+  } = state.metamask
+  
   return {
-    warning: state.appState.warning,
-    isSubLoading: state.appState.isSubLoading,
-    qrRequested: state.appState.qrRequested,
+    coinOptions,
+    tokenExchangeRates,
+    selectedAddress,
   }
 }
 
-inherits(ShapeshiftForm, PersistentForm)
+function mapDispatchToProps (dispatch) {
+  return {
+    shapeShiftSubview: () => dispatch(shapeShiftSubview()),
+    pairUpdate: coin => dispatch(pairUpdate(coin)),
+    buyWithShapeShift: data => dispatch(buyWithShapeShift(data)),
+  }
+}
 
+module.exports = connect(mapStateToProps, mapDispatchToProps)(ShapeshiftForm)
+
+inherits(ShapeshiftForm, Component)
 function ShapeshiftForm () {
-  PersistentForm.call(this)
-  this.persistentFormParentId = 'shapeshift-buy-form'
+  Component.call(this)
+
+  this.state = {
+    depositCoin: 'btc',
+    refundAddress: '',
+    showQrCode: false,
+    depositAddress: '',
+    errorMessage: '',
+    isLoading: false,
+    bought: false,
+  }
 }
 
-ShapeshiftForm.prototype.render = function () {
-  return h(ReactCSSTransitionGroup, {
-    className: 'css-transition-group',
-    transitionName: 'main',
-    transitionEnterTimeout: 300,
-    transitionLeaveTimeout: 300,
-  }, [
-    this.props.qrRequested ? h(Qr, {key: 'qr'}) : this.renderMain(),
-  ])
+ShapeshiftForm.prototype.componentWillMount = function () {
+  this.props.shapeShiftSubview()
 }
 
-ShapeshiftForm.prototype.renderMain = function () {
-  const marketinfo = this.props.buyView.formView.marketinfo
-  const coinOptions = this.props.buyView.formView.coinOptions
-  var coin = marketinfo.pair.split('_')[0].toUpperCase()
-
-  return h('.flex-column', {
-    style: {
-      // marginTop: '10px',
-      padding: '25px',
-      width: '100%',
-      alignItems: 'center',
-    },
-  }, [
-    h('.flex-row', {
-      style: {
-        justifyContent: 'center',
-        alignItems: 'baseline',
-      },
-    }, [
-      h('img', {
-        src: coinOptions[coin].image,
-        width: '25px',
-        height: '25px',
-        style: {
-          marginRight: '5px',
-        },
-      }),
-
-      h('.input-container', [
-        h('input#fromCoin.buy-inputs.ex-coins', {
-          type: 'text',
-          list: 'coinList',
-          dataset: {
-            persistentFormId: 'input-coin',
-          },
-          style: {
-            boxSizing: 'border-box',
-          },
-          onChange: this.handleLiveInput.bind(this),
-          defaultValue: 'BTC',
-        }),
-
-        this.renderCoinList(),
+ShapeshiftForm.prototype.onCoinChange = function (e) {
+  const coin = e.target.value
+  this.setState({
+    depositCoin: coin,
+    errorMessage: '',
+  })
+  this.props.pairUpdate(coin)
+}
 
-        h('i.fa.fa-pencil-square-o.edit-text', {
-          style: {
-            fontSize: '12px',
-            color: '#F7861C',
-            position: 'relative',
-            bottom: '48px',
-            left: '106px',
-          },
-        }),
-      ]),
+ShapeshiftForm.prototype.onBuyWithShapeShift = function () {
+  this.setState({
+    isLoading: true,
+    showQrCode: true,
+  })
 
-      h('.icon-control', [
-        h('i.fa.fa-refresh.fa-4.orange', {
-          style: {
-            position: 'relative',
-            bottom: '5px',
-            left: '5px',
-            color: '#F7861C',
-          },
-          onClick: this.updateCoin.bind(this),
-        }),
-        h('i.fa.fa-chevron-right.fa-4.orange', {
-          style: {
-            position: 'relative',
-            bottom: '26px',
-            left: '10px',
-            color: '#F7861C',
-          },
-          onClick: this.updateCoin.bind(this),
-        }),
-      ]),
+  const {
+    buyWithShapeShift,
+    selectedAddress: withdrawal,
+  } = this.props
+  const {
+    refundAddress: returnAddress,
+    depositCoin,
+  } = this.state
+  const pair = `${depositCoin}_eth`
+  const data = {
+    withdrawal,
+    pair,
+    returnAddress,
+    //  Public api key
+    'apiKey': '803d1f5df2ed1b1476e4b9e6bcd089e34d8874595dda6a23b67d93c56ea9cc2445e98a6748b219b2b6ad654d9f075f1f1db139abfa93158c04e825db122c14b6',
+  }
 
-      h('#toCoin.ex-coins', marketinfo.pair.split('_')[1].toUpperCase()),
+  if (isValidAddress(withdrawal)) {
+    buyWithShapeShift(data)
+      .then(d => this.setState({
+        showQrCode: true,
+        depositAddress: d.deposit,
+        isLoading: false,
+      }))
+      .catch(() => this.setState({
+        showQrCode: false,
+        errorMessage: 'Invalid Request',
+        isLoading: false,
+      }))
+  }
+}
 
-      h('img', {
-        src: coinOptions[marketinfo.pair.split('_')[1].toUpperCase()].image,
-        width: '25px',
-        height: '25px',
-        style: {
-          marginLeft: '5px',
-        },
-      }),
-    ]),
+ShapeshiftForm.prototype.renderMetadata = function (label, value) {
+  return h('div', {className: 'shapeshift-form__metadata-wrapper'}, [
 
-    this.props.isSubLoading ? this.renderLoading() : null,
-    h('.flex-column', {
-      style: {
-        alignItems: 'flex-start',
-      },
-    }, [
-      this.props.warning ? this.props.warning && h('span.error.flex-center', {
-        style: {
-          textAlign: 'center',
-          width: '229px',
-          height: '82px',
-        },
-      },
-        this.props.warning) : this.renderInfo(),
+    h('div.shapeshift-form__metadata-label', {}, [
+      h('span', `${label}:`),
     ]),
 
-    h('.flex-row', {
-      style: {
-        padding: '10px',
-        paddingBottom: '2px',
-        width: '100%',
-      },
-    }, [
-      h('div', 'Receiving address:'),
-      h('.ellip-address', this.props.buyView.buyAddress),
+    h('div.shapeshift-form__metadata-value', {}, [
+      h('span', value),
     ]),
 
-    h(this.activeToggle('.input-container'), {
-      style: {
-        padding: '10px',
-        paddingTop: '0px',
-        width: '100%',
-      },
-    }, [
-      h('div', `${coin} Address:`),
-
-      h('input#fromCoinAddress.buy-inputs', {
-        type: 'text',
-        placeholder: `Your ${coin} Refund Address`,
-        dataset: {
-          persistentFormId: 'refund-address',
-        },
-        style: {
-          boxSizing: 'border-box',
-          width: '278px',
-          height: '20px',
-          padding: ' 5px ',
-        },
-      }),
-
-      h('i.fa.fa-pencil-square-o.edit-text', {
-        style: {
-          fontSize: '12px',
-          color: '#F7861C',
-          position: 'relative',
-          bottom: '5px',
-          right: '11px',
-        },
-      }),
-      h('.flex-row', {
-        style: {
-          justifyContent: 'flex-end',
-        },
-      }, [
-        h('button', {
-          onClick: this.shift.bind(this),
-          style: {
-            marginTop: '10px',
-          },
-        },
-        'Submit'),
-      ]),
-    ]),
   ])
 }
 
-ShapeshiftForm.prototype.shift = function () {
-  var props = this.props
-  var withdrawal = this.props.buyView.buyAddress
-  var returnAddress = document.getElementById('fromCoinAddress').value
-  var pair = this.props.buyView.formView.marketinfo.pair
-  var data = {
-    'withdrawal': withdrawal,
-    'pair': pair,
-    'returnAddress': returnAddress,
-    //  Public api key
-    'apiKey': '803d1f5df2ed1b1476e4b9e6bcd089e34d8874595dda6a23b67d93c56ea9cc2445e98a6748b219b2b6ad654d9f075f1f1db139abfa93158c04e825db122c14b6',
-  }
-  var message = [
-    `Deposit Limit: ${props.buyView.formView.marketinfo.limit}`,
-    `Deposit Minimum:${props.buyView.formView.marketinfo.minimum}`,
-  ]
-  if (isValidAddress(withdrawal)) {
-    this.props.dispatch(actions.coinShiftRquest(data, message))
-  }
-}
+ShapeshiftForm.prototype.renderMarketInfo = function () {
+  const { depositCoin } = this.state
+  const coinPair = `${depositCoin}_eth`
+  const { tokenExchangeRates } = this.props
+  const {
+    limit,
+    rate,
+    minimum,
+  } = tokenExchangeRates[coinPair] || {}
 
-ShapeshiftForm.prototype.renderCoinList = function () {
-  var list = Object.keys(this.props.buyView.formView.coinOptions).map((item) => {
-    return h('option', {
-      value: item,
-    }, item)
-  })
+  return h('div.shapeshift-form__metadata', {}, [
 
-  return h('datalist#coinList', {
-    onClick: (event) => {
-      event.preventDefault()
-    },
-  }, list)
-}
+    this.renderMetadata('Status', limit ? 'Available' : 'Unavailable'),
+    this.renderMetadata('Limit', limit),
+    this.renderMetadata('Exchange Rate', rate),
+    this.renderMetadata('Minimum', minimum),
 
-ShapeshiftForm.prototype.updateCoin = function (event) {
-  event.preventDefault()
-  const props = this.props
-  var coinOptions = this.props.buyView.formView.coinOptions
-  var coin = document.getElementById('fromCoin').value
-
-  if (!coinOptions[coin.toUpperCase()] || coin.toUpperCase() === 'ETH') {
-    var message = 'Not a valid coin'
-    return props.dispatch(actions.displayWarning(message))
-  } else {
-    return props.dispatch(actions.pairUpdate(coin))
-  }
+  ])
 }
 
-ShapeshiftForm.prototype.handleLiveInput = function () {
-  const props = this.props
-  var coinOptions = this.props.buyView.formView.coinOptions
-  var coin = document.getElementById('fromCoin').value
+ShapeshiftForm.prototype.renderQrCode = function () {
+  const { depositAddress, isLoading } = this.state
+  const qrImage = qrcode(4, 'M')
+  qrImage.addData(depositAddress)
+  qrImage.make()
 
-  if (!coinOptions[coin.toUpperCase()] || coin.toUpperCase() === 'ETH') {
-    return null
-  } else {
-    return props.dispatch(actions.pairUpdate(coin))
-  }
-}
+  return h('div.shapeshift-form', {}, [
+
+    h('div.shapeshift-form__deposit-instruction', [
+      'Deposit your BTC to the address below:',
+    ]),
+
+    h('div', depositAddress),
+
+    h('div.shapeshift-form__qr-code', [
+      isLoading
+        ? h('img', {
+          src: 'images/loading.svg',
+          style: { width: '60px'},
+        })
+        : h('div', {
+          dangerouslySetInnerHTML: { __html: qrImage.createTableTag(4) },
+        }),
+    ]),
+
+    this.renderMarketInfo(),
 
-ShapeshiftForm.prototype.renderInfo = function () {
-  const marketinfo = this.props.buyView.formView.marketinfo
-  const coinOptions = this.props.buyView.formView.coinOptions
-  var coin = marketinfo.pair.split('_')[0].toUpperCase()
-
-  return h('span', {
-    style: {
-      marginTop: '10px',
-      marginBottom: '15px',
-    },
-  }, [
-    h('h3.flex-row.text-transform-uppercase', {
-      style: {
-        color: '#868686',
-        paddingTop: '4px',
-        justifyContent: 'space-around',
-        textAlign: 'center',
-        fontSize: '17px',
-      },
-    }, `Market Info for ${marketinfo.pair.replace('_', ' to ').toUpperCase()}:`),
-    h('.marketinfo', ['Status : ', `${coinOptions[coin].status}`]),
-    h('.marketinfo', ['Exchange Rate: ', `${marketinfo.rate}`]),
-    h('.marketinfo', ['Limit: ', `${marketinfo.limit}`]),
-    h('.marketinfo', ['Minimum : ', `${marketinfo.minimum}`]),
   ])
 }
 
-ShapeshiftForm.prototype.handleAddress = function (event) {
-  this.props.dispatch(actions.updateBuyAddress(event.target.value))
-}
 
-ShapeshiftForm.prototype.activeToggle = function (elementType) {
-  if (!this.props.buyView.formView.response || this.props.warning) return elementType
-  return `${elementType}.inactive`
-}
+ShapeshiftForm.prototype.render = function () {
+  const { coinOptions, btnClass } = this.props
+  const { depositCoin, errorMessage, showQrCode, depositAddress } = this.state
+  const coinPair = `${depositCoin}_eth`
+  const { tokenExchangeRates } = this.props
+  const token = tokenExchangeRates[coinPair]
 
-ShapeshiftForm.prototype.renderLoading = function () {
-  return h('span', {
-    style: {
-      position: 'absolute',
-      left: '70px',
-      bottom: '194px',
-      background: 'transparent',
-      width: '229px',
-      height: '82px',
-      display: 'flex',
-      justifyContent: 'center',
-    },
-  }, [
-    h('img', {
-      style: {
-        width: '60px',
-      },
-      src: 'images/loading.svg',
-    }),
-  ])
+  return h('div.shapeshift-form-wrapper', [
+    showQrCode
+      ? this.renderQrCode()
+      : h('div.shapeshift-form', [
+          h('div.shapeshift-form__selectors', [
+
+            h('div.shapeshift-form__selector', [
+
+              h('div.shapeshift-form__selector-label', 'Deposit'),
+
+              h(SimpleDropdown, {
+                selectedOption: this.state.depositCoin,
+                onSelect: this.onCoinChange,
+                options: Object.entries(coinOptions).map(([coin]) => ({
+                  value: coin.toLowerCase(),
+                  displayValue: coin,
+                })),
+              }),
+
+            ]),
+
+            h('div.icon.shapeshift-form__caret', {
+              style: { backgroundImage: 'url(images/caret-right.svg)'},
+            }),
+
+            h('div.shapeshift-form__selector', [
+
+              h('div.shapeshift-form__selector-label', [
+                'Receive',
+              ]),
+
+              h('div.shapeshift-form__selector-input', ['ETH']),
+
+            ]),
+
+          ]),
+
+          h('div', {
+            className: classnames('shapeshift-form__address-input-wrapper', {
+              'shapeshift-form__address-input-wrapper--error': errorMessage,
+            }),
+          }, [
+
+            h('div.shapeshift-form__address-input-label', [
+              'Your Refund Address',
+            ]),
+
+            h('input.shapeshift-form__address-input', {
+              type: 'text',
+              onChange: e => this.setState({
+                refundAddress: e.target.value,
+                errorMessage: '',
+              }),
+            }),
+
+            h('divshapeshift-form__address-input-error-message', [errorMessage]),
+          ]),
+
+          this.renderMarketInfo(),
+
+      ]),
+
+      !depositAddress && h('button.shapeshift-form__shapeshift-buy-btn', {
+        className: btnClass,
+        disabled: !token,
+        onClick: () => this.onBuyWithShapeShift(),
+      }, ['Buy']),
+
+    ])
 }