ShapeShift Integration

1 files changed, 217 insertions, 0 deletions

diff --git a/mascara/src/app/shapeshift-form/index.js b/mascara/src/app/shapeshift-form/index.js
new file mode 100644
index 000000000..15c7e95e1
--- /dev/null
+++ b/mascara/src/app/shapeshift-form/index.js
@@ -0,0 +1,217 @@
+import React, {Component, PropTypes} from 'react'
+import classnames from 'classnames'
+import {qrcode} from 'qrcode-npm'
+import {connect} from 'react-redux'
+import {shapeShiftSubview, pairUpdate, buyWithShapeShift} from '../../../../ui/app/actions'
+import {isValidAddress} from '../../../../ui/app/util'
+
+export class ShapeShiftForm extends Component {
+  static propTypes = {
+    selectedAddress: PropTypes.string.isRequired,
+    btnClass: PropTypes.string.isRequired,
+    tokenExchangeRates: PropTypes.object.isRequired,
+    coinOptions: PropTypes.object.isRequired,
+    shapeShiftSubview: PropTypes.func.isRequired,
+    pairUpdate: PropTypes.func.isRequired,
+    buyWithShapeShift: PropTypes.func.isRequired,
+  };
+
+  state = {
+    depositCoin: 'btc',
+    refundAddress: '',
+    showQrCode: false,
+    depositAddress: '',
+    errorMessage: '',
+    isLoading: false,
+  };
+
+  componentWillMount () {
+    this.props.shapeShiftSubview()
+  }
+
+  onCoinChange = e => {
+    const coin = e.target.value
+    this.setState({
+      depositCoin: coin,
+      errorMessage: '',
+    })
+    this.props.pairUpdate(coin)
+  }
+
+  onBuyWithShapeShift = () => {
+    this.setState({
+      isLoading: true,
+      showQrCode: true,
+    })
+
+    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',
+    }
+
+    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,
+        }))
+    }
+  }
+
+  renderMetadata (label, value) {
+    return (
+      <div className='shapeshift-form__metadata-wrapper'>
+        <div className='shapeshift-form__metadata-label'>
+          {label}:
+        </div>
+        <div className='shapeshift-form__metadata-value'>
+          {value}
+        </div>
+      </div>
+    )
+  }
+
+  renderMarketInfo () {
+    const { depositCoin } = this.state
+    const coinPair = `${depositCoin}_eth`
+    const { tokenExchangeRates } = this.props
+    const {
+      limit,
+      rate,
+      minimum,
+    } = tokenExchangeRates[coinPair] || {}
+
+    return (
+      <div className='shapeshift-form__metadata'>
+        {this.renderMetadata('Status', limit ? 'Available' : 'Unavailable')}
+        {this.renderMetadata('Limit', limit)}
+        {this.renderMetadata('Exchange Rate', rate)}
+        {this.renderMetadata('Minimum', minimum)}
+      </div>
+    )
+  }
+
+  renderQrCode () {
+    const { depositAddress, isLoading } = this.state
+    const qrImage = qrcode(4, 'M')
+    qrImage.addData(depositAddress)
+    qrImage.make()
+
+    return (
+      <div className='shapeshift-form'>
+        <div className='shapeshift-form__deposit-instruction'>
+          Deposit your BTC to the address bellow:
+        </div>
+        <div className='shapeshift-form__qr-code'>
+          {isLoading
+            ? <img src='images/loading.svg' style={{ width: '60px' }} />
+            : <div dangerouslySetInnerHTML={{ __html: qrImage.createTableTag(4) }} />
+          }
+        </div>
+        {this.renderMarketInfo()}
+      </div>
+    )
+  }
+
+  render () {
+    const { coinOptions, btnClass } = this.props
+    const { depositCoin, errorMessage, showQrCode } = this.state
+    const coinPair = `${depositCoin}_eth`
+    const { tokenExchangeRates } = this.props
+    const token = tokenExchangeRates[coinPair]
+
+    return showQrCode ? this.renderQrCode() : (
+      <div>
+        <div className='shapeshift-form'>
+          <div className='shapeshift-form__selectors'>
+            <div className='shapeshift-form__selector'>
+              <div className='shapeshift-form__selector-label'>
+                Deposit
+              </div>
+              <select
+                className='shapeshift-form__selector-input'
+                value={this.state.depositCoin}
+                onChange={this.onCoinChange}
+              >
+                {Object.entries(coinOptions).map(([coin]) => (
+                  <option key={coin} value={coin.toLowerCase()}>
+                    {coin}
+                  </option>
+                ))}
+              </select>
+            </div>
+            <div
+              className='icon shapeshift-form__caret'
+              style={{ backgroundImage: 'url(images/caret-right.svg)'}}
+            />
+            <div className='shapeshift-form__selector'>
+              <div className='shapeshift-form__selector-label'>
+                Receive
+              </div>
+              <div className='shapeshift-form__selector-input'>
+                ETH
+              </div>
+            </div>
+          </div>
+          <div
+            className={classnames('shapeshift-form__address-input-wrapper', {
+              'shapeshift-form__address-input-wrapper--error': errorMessage,
+            })}
+          >
+            <div className='shapeshift-form__address-input-label'>
+              Your Refund Address
+            </div>
+            <input
+              type='text'
+              className='shapeshift-form__address-input'
+              onChange={e => this.setState({
+                refundAddress: e.target.value,
+                errorMessage: '',
+              })}
+            />
+            <div className='shapeshift-form__address-input-error-message'>
+              {errorMessage}
+            </div>
+          </div>
+          {this.renderMarketInfo()}
+        </div>
+        <button
+          className={btnClass}
+          disabled={!token}
+          onClick={this.onBuyWithShapeShift}
+        >
+          Buy
+        </button>
+      </div>
+    )
+  }
+}
+
+export default connect(
+  ({ metamask: { coinOptions, tokenExchangeRates, selectedAddress } }) => ({
+    coinOptions, tokenExchangeRates, selectedAddress,
+  }),
+  dispatch => ({
+    shapeShiftSubview: () => dispatch(shapeShiftSubview()),
+    pairUpdate: coin => dispatch(pairUpdate(coin)),
+    buyWithShapeShift: data => dispatch(buyWithShapeShift(data)),
+  })
+)(ShapeShiftForm)