Change buy forms so that they are their own view and add Qr-code

4 files changed, 178 insertions, 139 deletions

diff --git a/ui/app/components/buy-button-subview.js b/ui/app/components/buy-button-subview.js
index b410630a9..3f13878df 100644
--- a/ui/app/components/buy-button-subview.js
+++ b/ui/app/components/buy-button-subview.js
@@ -5,6 +5,7 @@ const connect = require('react-redux').connect
 const actions = require('../actions')
 const CoinbaseForm = require('./coinbase-form')
 const ShapeshiftForm = require('./shapeshift-form')
+const extension = require('../../../app/scripts/lib/extension')
 
 module.exports = connect(mapStateToProps)(BuyButtonSubview)
 
@@ -12,6 +13,7 @@ function mapStateToProps (state) {
   return {
     selectedAccount: state.selectedAccount,
     warning: state.appState.warning,
+    buyView: state.appState.buyView,
     network: state.metamask.network,
     provider: state.metamask.provider,
   }
@@ -24,10 +26,26 @@ function BuyButtonSubview () {
 
 BuyButtonSubview.prototype.render = function () {
   const props = this.props
-  const currentForm = props.accountDetail.formView
+  const currentForm = props.buyView.formView
 
   return (
-    h('span', {key: 'buyForm'}, [
+    h('.buy-eth-section', [
+             // back button
+      h('.flex-row', {
+        style: {
+          alignItems: 'center',
+          justifyContent: 'center',
+        },
+      }, [
+        h('i.fa.fa-arrow-left.fa-lg.cursor-pointer.color-orange', {
+          onClick: () => props.dispatch(actions.backToAccountDetail(props.selectedAccount)),
+          style: {
+            position: 'absolute',
+            left: '10px',
+          },
+        }),
+        h('h2.page-subtitle', 'Buy Eth'),
+      ]),
       h('h3.flex-row.text-transform-uppercase', {
         style: {
           background: '#EBEBEB',
@@ -39,9 +57,31 @@ BuyButtonSubview.prototype.render = function () {
         h(currentForm.coinbase ? '.activeForm' : '.inactiveForm', {
           onClick: () => props.dispatch(actions.coinBaseSubview()),
         }, 'Coinbase'),
+        h('a', {
+          onClick: (event) => this.navigateTo('https://github.com/MetaMask/faq/blob/master/COINBASE.md'),
+        }, [
+          h('i.fa.fa-question-circle', {
+            style: {
+              position: 'relative',
+              right: '33px',
+            },
+          }),
+        ]),
         h(currentForm.shapeshift ? '.activeForm' : '.inactiveForm', {
           onClick: () => props.dispatch(actions.shapeShiftSubview(props.provider.type)),
         }, 'Shapeshift'),
+
+        h('a', {
+          href: 'https://github.com/MetaMask/faq/blob/master/COINBASE.md',
+          onClick: (event) => this.navigateTo('https://info.shapeshift.io/about'),
+        }, [
+          h('i.fa.fa-question-circle', {
+            style: {
+              position: 'relative',
+              right: '28px',
+            },
+          }),
+        ]),
       ]),
       this.formVersionSubview(),
     ])
@@ -50,9 +90,9 @@ BuyButtonSubview.prototype.render = function () {
 
 BuyButtonSubview.prototype.formVersionSubview = function () {
   if (this.props.network === '1') {
-    if (this.props.accountDetail.formView.coinbase) {
+    if (this.props.buyView.formView.coinbase) {
       return h(CoinbaseForm, this.props)
-    } else if (this.props.accountDetail.formView.shapeshift) {
+    } else if (this.props.buyView.formView.shapeshift) {
       return h(ShapeshiftForm, this.props)
     }
   } else {
@@ -72,3 +112,6 @@ BuyButtonSubview.prototype.formVersionSubview = function () {
   }
 }
 
+BuyButtonSubview.prototype.navigateTo = function (url) {
+  extension.tabs.create({ url })
+}
diff --git a/ui/app/components/coinbase-form.js b/ui/app/components/coinbase-form.js
index 5ab6b507a..efd05ec96 100644
--- a/ui/app/components/coinbase-form.js
+++ b/ui/app/components/coinbase-form.js
@@ -22,12 +22,13 @@ function CoinbaseForm() {
 
 CoinbaseForm.prototype.render = function () {
   var props = this.props
-  var amount = props.accountDetail.amount
-  var address = props.accountDetail.buyAddress
+  var amount = props.buyView.amount
+  var address = props.buyView.buyAddress
 
   return h('.flex-column', {
     style: {
-      margin: '10px',
+      // margin: '10px',
+      padding: '25px',
     },
   }, [
     h('.flex-column', {
@@ -35,35 +36,10 @@ CoinbaseForm.prototype.render = function () {
         alignItems: 'flex-start',
       },
     }, [
-      h('.flex-column', [
+      h('.flex-row', [
         h('div', 'Address:'),
-        h('.input-container', {
-          style: {},
-        }, [
-          h('input.buy-inputs', {
-            type: 'text',
-            style: {
-              boxSizing: 'border-box',
-              width: '317px',
-              height: '20px',
-              padding: ' 12px 0px 12px 1px ',
-            },
-            defaultValue: address,
-            onChange: this.handleAddress.bind(this),
-          }),
-          h('i.fa.fa-pencil-square-o.edit-text', {
-            style: {
-              fontSize: '12px',
-              color: '#F7861C',
-              position: 'relative',
-              bottom: '8px',
-              right: '11px',
-            },
-          }),
-
-        ]),
+        h('.ellip-address', address),
       ]),
-
       h('.flex-row', [
         h('div', 'Amount: $'),
         h('.input-container', [
@@ -119,7 +95,7 @@ CoinbaseForm.prototype.render = function () {
       }, 'Continue to Coinbase'),
 
       h('button', {
-        onClick: () => props.dispatch(actions.backToAccountDetail(props.accounts.address)),
+        onClick: () => props.dispatch(actions.backTobuyView(props.accounts.address)),
       }, 'Cancel'),
     ]),
   ])
@@ -132,12 +108,12 @@ CoinbaseForm.prototype.handleAddress = function (event) {
 }
 CoinbaseForm.prototype.toCoinbase = function () {
   var props = this.props
-  var amount = props.accountDetail.amount
-  var address = props.accountDetail.buyAddress
+  var amount = props.buyView.amount
+  var address = props.buyView.buyAddress
   var message
 
   if (isValidAddress(address) && isValidAmountforCoinBase(amount).valid) {
-    props.dispatch(actions.buyEth(address, props.accountDetail.amount))
+    props.dispatch(actions.buyEth(address, props.buyView.amount))
   } else if (!isValidAmountforCoinBase(amount).valid) {
     message = isValidAmountforCoinBase(amount).message
     return props.dispatch(actions.showWarning(message))
diff --git a/ui/app/components/qr-code.js b/ui/app/components/qr-code.js
new file mode 100644
index 000000000..765322239
--- /dev/null
+++ b/ui/app/components/qr-code.js
@@ -0,0 +1,50 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const CopyButton = require('./copyButton')
+
+module.exports = connect(mapStateToProps)(QrCodeView)
+
+function mapStateToProps (state) {
+  return {
+    Qr: state.appState.Qr,
+    buyView: state.appState.buyView,
+  }
+}
+
+inherits(QrCodeView, Component)
+
+function QrCodeView () {
+  Component.call(this)
+}
+
+QrCodeView.prototype.render = function () {
+  var props = this.props
+  var Qr = props.Qr
+  return h('.main-container.flex-column', {
+    style: {
+      justifyContent: 'center',
+      padding: '45px',
+      alignItems: 'center',
+    },
+  }, [
+    h('h3', Qr.message),
+    h('#qr-container.flex-column', {
+      key: 'qr',
+      style: {
+        marginTop: '25px',
+        marginBottom: '15px',
+      },
+      dangerouslySetInnerHTML: {
+        __html: Qr.image,
+      },
+    }),
+    h('.flex-row', [
+      h('h3.ellip-address', Qr.data),
+      h(CopyButton, {
+        value: Qr.data,
+      }),
+    ]),
+  ])
+}
diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js
index 9c9ec2a05..52bacf798 100644
--- a/ui/app/components/shapeshift-form.js
+++ b/ui/app/components/shapeshift-form.js
@@ -2,9 +2,9 @@ const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const connect = require('react-redux').connect
+const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
 const actions = require('../actions')
-const CopyButton = require('./copyButton')
-
+const Qr = require('./qr-code')
 const isValidAddress = require('../util').isValidAddress
 module.exports = connect(mapStateToProps)(ShapeshiftForm)
 
@@ -13,23 +13,36 @@ function mapStateToProps(state) {
     selectedAccount: state.selectedAccount,
     warning: state.appState.warning,
     isSubLoading: state.appState.isSubLoading,
+    qrRequested: state.appState.qrRequested,
   }
 }
 
 inherits(ShapeshiftForm, Component)
 
-function ShapeshiftForm() {
+function ShapeshiftForm () {
   Component.call(this)
 }
-
 ShapeshiftForm.prototype.render = function () {
-  const marketinfo = this.props.accountDetail.formView.marketinfo
-  const coinOptions = this.props.accountDetail.formView.coinOptions
+  return h(ReactCSSTransitionGroup, {
+    className: 'css-transition-group',
+    transitionName: 'main',
+    transitionEnterTimeout: 300,
+    transitionLeaveTimeout: 300,
+  }, [
+    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: {
-      marginTop: '10px',
+      // marginTop: '10px',
+      padding: '25px',
       width: '100%',
       alignItems: 'center',
     },
@@ -67,8 +80,8 @@ ShapeshiftForm.prototype.render = function () {
             fontSize: '12px',
             color: '#F7861C',
             position: 'relative',
-            bottom: '23px',
-            right: '11px',
+            bottom: '48px',
+            left: '106px',
           },
         }),
       ]),
@@ -78,7 +91,7 @@ ShapeshiftForm.prototype.render = function () {
           style: {
             position: 'relative',
             bottom: '5px',
-            right: '5px',
+            left: '5px',
             color: '#F7861C',
           },
           onClick: this.updateCoin.bind(this),
@@ -86,8 +99,8 @@ ShapeshiftForm.prototype.render = function () {
         h('i.fa.fa-chevron-right.fa-4.orange', {
           style: {
             position: 'relative',
-            bottom: '5px',
-            right: '15px',
+            bottom: '26px',
+            left: '10px',
             color: '#F7861C',
           },
           onClick: this.updateCoin.bind(this),
@@ -107,7 +120,6 @@ ShapeshiftForm.prototype.render = function () {
     ]),
 
     this.props.isSubLoading ? this.renderLoading() : null,
-
     h('.flex-column', {
       style: {
         width: '235px',
@@ -124,40 +136,21 @@ ShapeshiftForm.prototype.render = function () {
         this.props.warning) : this.renderInfo(),
     ]),
 
-    h(this.activeToggle('.input-container'), {
+    h('.flex-row', {
       style: {
         padding: '10px',
-        paddingBottom: '0px',
+        paddingBottom: '2px',
         width: '100%',
       },
     }, [
       h('div', 'Receiving address:'),
-
-      h('input.buy-inputs', {
-        type: 'text',
-        value: this.props.accountDetail.buyAddress,
-        onChange: this.handleAddress.bind(this),
-        style: {
-          boxSizing: 'border-box',
-          width: '325px',
-          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('.ellip-address', this.props.buyView.buyAddress),
     ]),
+
     h(this.activeToggle('.input-container'), {
       style: {
         padding: '10px',
+        paddingTop: '0px',
         width: '100%',
       },
     }, [
@@ -168,7 +161,7 @@ ShapeshiftForm.prototype.render = function () {
         placeholder: `Your ${coin} Refund Address`,
         style: {
           boxSizing: 'border-box',
-          width: '235px',
+          width: '278px',
           height: '20px',
           padding: ' 5px ',
         },
@@ -183,19 +176,27 @@ ShapeshiftForm.prototype.render = function () {
           right: '11px',
         },
       }),
-
-      h('button', {
-        onClick: this.shift.bind(this),
-      },
-      'Submit'),
+      h('.flex-row', {
+        style: {
+          justifyContent: 'flex-end',
+        },
+      }, [
+        h('button', {
+          onClick: this.shift.bind(this),
+          style: {
+            marginTop: '10px',
+          },
+        },
+        'Submit'),
+      ]),
     ]),
   ])
 }
 
 ShapeshiftForm.prototype.shift = function () {
-  var withdrawal = this.props.accountDetail.buyAddress
+  var withdrawal = this.props.buyView.buyAddress
   var returnAddress = document.getElementById('fromCoinAddress').value
-  var pair = this.props.accountDetail.formView.marketinfo.pair
+  var pair = this.props.buyView.formView.marketinfo.pair
   var data = {
     'withdrawal': withdrawal,
     'pair': pair,
@@ -208,7 +209,7 @@ ShapeshiftForm.prototype.shift = function () {
 }
 
 ShapeshiftForm.prototype.renderCoinList = function () {
-  var list = Object.keys(this.props.accountDetail.formView.coinOptions).map((item) => {
+  var list = Object.keys(this.props.buyView.formView.coinOptions).map((item) => {
     return h('option', {
       value: item,
     }, item)
@@ -224,7 +225,7 @@ ShapeshiftForm.prototype.renderCoinList = function () {
 ShapeshiftForm.prototype.updateCoin = function (event) {
   event.preventDefault()
   const props = this.props
-  var coinOptions = this.props.accountDetail.formView.coinOptions
+  var coinOptions = this.props.buyView.formView.coinOptions
   var coin = document.getElementById('fromCoin').value
 
   if (!coinOptions[coin.toUpperCase()] || coin.toUpperCase() === 'ETH') {
@@ -237,7 +238,7 @@ ShapeshiftForm.prototype.updateCoin = function (event) {
 
 ShapeshiftForm.prototype.handleLiveInput = function () {
   const props = this.props
-  var coinOptions = this.props.accountDetail.formView.coinOptions
+  var coinOptions = this.props.buyView.formView.coinOptions
   var coin = document.getElementById('fromCoin').value
 
   if (!coinOptions[coin.toUpperCase()] || coin.toUpperCase() === 'ETH') {
@@ -248,61 +249,30 @@ ShapeshiftForm.prototype.handleLiveInput = function () {
 }
 
 ShapeshiftForm.prototype.renderInfo = function () {
-  const marketinfo = this.props.accountDetail.formView.marketinfo
-  const coinOptions = this.props.accountDetail.formView.coinOptions
+  const marketinfo = this.props.buyView.formView.marketinfo
+  const coinOptions = this.props.buyView.formView.coinOptions
   var coin = marketinfo.pair.split('_')[0].toUpperCase()
-  const request = this.props.accountDetail.formView.response
 
-  if (!request) {
-    return h('span', [
-      h('h3.flex-row.text-transform-uppercase', {
-        style: {
-          color: '#AEAEAE',
-          paddingTop: '4px',
-          justifyContent: 'space-around',
-          textAlign: 'center',
-          fontSize: '14px',
-        },
-      }, `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}`]),
-    ])
-  } else {
-    return h('.flex-column', {
+  return h('span', {
+    style: {
+      marginTop: '15px',
+      marginBottom: '15px',
+    },
+  }, [
+    h('h3.flex-row.text-transform-uppercase', {
       style: {
-        width: '229px',
-        height: '82px',
+        color: '#AEAEAE',
+        paddingTop: '4px',
+        justifyContent: 'space-around',
+        textAlign: 'center',
+        fontSize: '14px',
       },
-    }, [
-      h('.marketinfo', ['Limit: ', `${marketinfo.limit}`]),
-      h('.marketinfo', ['Minimum : ', `${marketinfo.minimum}`]),
-      h('div', {
-        style: {
-          fontSize: '12px',
-          lineHeight: '16px',
-          marginTop: '4px',
-          color: '#F7861C',
-        },
-      }, `Deposit your ${request.depositType} to the address bellow:`),
-      h('.flex-row', {
-        style: {
-          position: 'relative',
-          right: '38px',
-        },
-      }, [
-        h('div', {
-          style: {
-            fontSize: '13px',
-          },
-        }, request.deposit),
-        h(CopyButton, {
-          value: request.deposit,
-        }),
-      ]),
-    ])
-  }
+    }, `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) {
@@ -310,7 +280,7 @@ ShapeshiftForm.prototype.handleAddress = function (event) {
 }
 
 ShapeshiftForm.prototype.activeToggle = function (elementType) {
-  if (!this.props.accountDetail.formView.response || this.props.warning) return elementType
+  if (!this.props.buyView.formView.response || this.props.warning) return elementType
   return `${elementType}.inactive`
 }
 
@@ -319,7 +289,7 @@ ShapeshiftForm.prototype.renderLoading = function () {
     style: {
       position: 'absolute',
       left: '70px',
-      bottom: '138px',
+      bottom: '194px',
       background: 'transparent',
       width: '229px',
       height: '82px',