Merge branch 'NewUI-flat' into cb-372

1 files changed, 308 insertions, 0 deletions

diff --git a/old-ui/app/components/shapeshift-form.js b/old-ui/app/components/shapeshift-form.js
new file mode 100644
index 000000000..a54987c04
--- /dev/null
+++ b/old-ui/app/components/shapeshift-form.js
@@ -0,0 +1,308 @@
+const PersistentForm = require('../../lib/persistent-form')
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const actions = require('../../../ui/app/actions')
+const Qr = require('./qr-code')
+const isValidAddress = require('../util').isValidAddress
+module.exports = connect(mapStateToProps)(ShapeshiftForm)
+
+function mapStateToProps (state) {
+  return {
+    warning: state.appState.warning,
+    isSubLoading: state.appState.isSubLoading,
+    qrRequested: state.appState.qrRequested,
+  }
+}
+
+inherits(ShapeshiftForm, PersistentForm)
+
+function ShapeshiftForm () {
+  PersistentForm.call(this)
+  this.persistentFormParentId = 'shapeshift-buy-form'
+}
+
+ShapeshiftForm.prototype.render = function () {
+  return this.props.qrRequested ? h(Qr, {key: 'qr'}) : this.renderMain()
+}
+
+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: {
+      position: 'relative',
+      padding: '25px',
+      paddingTop: '5px',
+      width: '90%',
+      minHeight: '215px',
+      alignItems: 'center',
+      overflowY: 'auto',
+    },
+  }, [
+    h('.flex-row', {
+      style: {
+        justifyContent: 'center',
+        alignItems: 'baseline',
+        height: '42px',
+      },
+    }, [
+      h('img', {
+        src: coinOptions[coin].image,
+        width: '25px',
+        height: '25px',
+        style: {
+          marginRight: '5px',
+        },
+      }),
+
+      h('.input-container', {
+        position: 'relative',
+      }, [
+        h('input#fromCoin.buy-inputs.ex-coins', {
+          type: 'text',
+          list: 'coinList',
+          autoFocus: true,
+          dataset: {
+            persistentFormId: 'input-coin',
+          },
+          style: {
+            boxSizing: 'border-box',
+          },
+          onChange: this.handleLiveInput.bind(this),
+          defaultValue: 'BTC',
+        }),
+
+        this.renderCoinList(),
+
+        h('i.fa.fa-pencil-square-o.edit-text', {
+          style: {
+            fontSize: '12px',
+            color: '#F7861C',
+            position: 'absolute',
+          },
+        }),
+      ]),
+
+      h('.icon-control', {
+        style: {
+          position: 'relative',
+        },
+      }, [
+        // Not visible on the screen, can't see it on master.
+
+        // h('i.fa.fa-refresh.fa-4.orange', {
+        //   style: {
+        //     bottom: '5px',
+        //     left: '5px',
+        //     color: '#F7861C',
+        //   },
+        //   onClick: this.updateCoin.bind(this),
+        // }),
+        h('i.fa.fa-chevron-right.fa-4.orange', {
+          style: {
+            position: 'absolute',
+            bottom: '35%',
+            left: '0%',
+            color: '#F7861C',
+          },
+          onClick: this.updateCoin.bind(this),
+        }),
+      ]),
+
+      h('#toCoin.ex-coins', marketinfo.pair.split('_')[1].toUpperCase()),
+
+      h('img', {
+        src: coinOptions[marketinfo.pair.split('_')[1].toUpperCase()].image,
+        width: '25px',
+        height: '25px',
+        style: {
+          marginLeft: '5px',
+        },
+      }),
+    ]),
+
+    h('.flex-column', {
+      style: {
+        marginTop: '1%',
+        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(),
+
+      this.renderRefundAddressForCoin(coin),
+    ]),
+
+  ])
+}
+
+ShapeshiftForm.prototype.renderRefundAddressForCoin = function (coin) {
+  return h(this.activeToggle('.input-container'), {
+    style: {
+      marginTop: '1%',
+    },
+  }, [
+
+    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: '227px',
+        height: '30px',
+        padding: ' 5px ',
+      },
+    }),
+
+    h('i.fa.fa-pencil-square-o.edit-text', {
+      style: {
+        fontSize: '12px',
+        color: '#F7861C',
+        position: 'absolute',
+      },
+    }),
+    h('div.flex-row', {
+      style: {
+        justifyContent: 'flex-start',
+      },
+    }, [
+      h('button', {
+        onClick: this.shift.bind(this),
+        style: {
+          marginTop: '1%',
+        },
+      },
+      '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.renderCoinList = function () {
+  var list = Object.keys(this.props.buyView.formView.coinOptions).map((item) => {
+    return h('option', {
+      value: item,
+    }, item)
+  })
+
+  return h('datalist#coinList', {
+    onClick: (event) => {
+      event.preventDefault()
+    },
+  }, list)
+}
+
+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
+
+  if (!coinOptions[coin.toUpperCase()] || coin.toUpperCase() === 'ETH') {
+    return null
+  } else {
+    return props.dispatch(actions.pairUpdate(coin))
+  }
+}
+
+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: {
+    },
+  }, [
+    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.activeToggle = function (elementType) {
+  if (!this.props.buyView.formView.response || this.props.warning) return elementType
+  return `${elementType}.inactive`
+}
+
+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',
+    }),
+  ])
+}