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

9 files changed, 256 insertions, 184 deletions

diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js
index cf65cbb7d..0053935f5 100644
--- a/ui/app/account-detail.js
+++ b/ui/app/account-detail.js
@@ -172,7 +172,7 @@ AccountDetailScreen.prototype.render = function () {
           }),
 
           h('button', {
-            onClick: this.buyButtonDeligator.bind(this),
+            onClick: () => props.dispatch(actions.buyEthView(selected)),
             style: {
               marginBottom: '20px',
               marginRight: '8px',
@@ -264,6 +264,6 @@ AccountDetailScreen.prototype.buyButtonDeligator = function () {
   if (this.props.accountDetail.subview === 'buyForm') {
     props.dispatch(actions.backToAccountDetail(props.address))
   } else {
-    props.dispatch(actions.buyEthSubview())
+    props.dispatch(actions.buyEthView())
   }
 }
diff --git a/ui/app/actions.js b/ui/app/actions.js
index 52c03f16f..b6b5e684b 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -113,8 +113,8 @@ var actions = {
   // buy Eth with coinbase
   BUY_ETH: 'BUY_ETH',
   buyEth: buyEth,
-  buyEthSubview: buyEthSubview,
-  BUY_ETH_SUBVIEW: 'BUY_ETH_SUBVIEW',
+  buyEthView: buyEthView,
+  BUY_ETH_VIEW: 'BUY_ETH_VIEW',
   UPDATE_COINBASE_AMOUNT: 'UPDATE_COIBASE_AMOUNT',
   updateCoinBaseAmount: updateCoinBaseAmount,
   UPDATE_BUY_ADDRESS: 'UPDATE_BUY_ADDRESS',
@@ -125,12 +125,14 @@ var actions = {
   shapeShiftSubview: shapeShiftSubview,
   PAIR_UPDATE: 'PAIR_UPDATE',
   pairUpdate: pairUpdate,
-  COIN_SHIFT_REQUEST: 'COIN_SHIFT_REQUEST',
   coinShiftRquest: coinShiftRquest,
   SHOW_SUB_LOADING_INDICATION: 'SHOW_SUB_LOADING_INDICATION',
   showSubLoadingIndication: showSubLoadingIndication,
   HIDE_SUB_LOADING_INDICATION: 'HIDE_SUB_LOADING_INDICATION',
   hideSubLoadingIndication: hideSubLoadingIndication,
+// QR STUFF:
+  SHOW_QR: 'SHOW_QR',
+  getQr: getQr,
 }
 
 module.exports = actions
@@ -625,9 +627,10 @@ function buyEth (address, amount) {
   }
 }
 
-function buyEthSubview () {
+function buyEthView (address) {
   return {
-    type: actions.BUY_ETH_SUBVIEW,
+    type: actions.BUY_ETH_VIEW,
+    value: address,
   }
 }
 
@@ -691,19 +694,32 @@ function shapeShiftSubview (network) {
 
 function coinShiftRquest (data) {
   return (dispatch) => {
-    dispatch(actions.showSubLoadingIndication())
+    dispatch(actions.showLoadingIndication())
     shapeShiftRequest('shift', { method: 'POST', data}, (response) => {
-      dispatch(actions.hideSubLoadingIndication())
+      if (response.error) return dispatch(actions.showWarning(response.error))
+      var message = `Deposit your ${response.depositType} to the address bellow:`
+      dispatch(actions.getQr(response.deposit, '125x125', message))
+    })
+  }
+}
+
+function getQr (data, size, message) {
+  return (dispatch) => {
+    qrRequest(data, size, (response) => {
+      dispatch(actions.hideLoadingIndication())
       if (response.error) return dispatch(actions.showWarning(response.error))
       dispatch({
-        type: actions.COIN_SHIFT_REQUEST,
+        type: actions.SHOW_QR,
         value: {
-          response: response,
+          qr: response,
+          message: message,
+          data: data,
         },
       })
     })
   }
 }
+
 function shapeShiftRequest (query, options, cb) {
   var queryResponse, method
   !options ? options = {} : null
@@ -727,3 +743,15 @@ function shapeShiftRequest (query, options, cb) {
     return shapShiftReq.send()
   }
 }
+
+function qrRequest (data, size, cb) {
+  var requestListner = function (request) {
+    cb ? cb(this.responseText) : null
+    return this.responseText
+  }
+
+  var qrReq = new XMLHttpRequest()
+  qrReq.addEventListener('load', requestListner)
+  qrReq.open('GET', `https://api.qrserver.com/v1/create-qr-code/?size=${size}&format=svg&data=${data}`, true)
+  qrReq.send()
+}
diff --git a/ui/app/app.js b/ui/app/app.js
index cc616fb7c..4cc32bf9b 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -28,7 +28,7 @@ const DropMenuItem = require('./components/drop-menu-item')
 const NetworkIndicator = require('./components/network')
 const Tooltip = require('./components/tooltip')
 const EthStoreWarning = require('./eth-store-warning')
-
+const BuyView = require('./components/buy-button-subview')
 module.exports = connect(mapStateToProps)(App)
 
 inherits(App, Component)
@@ -366,6 +366,8 @@ App.prototype.renderPrimary = function () {
 
     case 'createVault':
       return h(CreateVaultScreen, {key: 'createVault'})
+    case 'buyEth':
+      return h(BuyView, {key: 'buyEthView'})
 
     default:
       return h(AccountDetailScreen, {key: 'account-detail'})
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',
diff --git a/ui/app/css/index.css b/ui/app/css/index.css
index f31bf5aaa..3b385ad85 100644
--- a/ui/app/css/index.css
+++ b/ui/app/css/index.css
@@ -573,3 +573,12 @@ input.large-input {
     background: #AEAEAE;
     color: white;
 }
+
+.ellip-address {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 5em;
+  font-size: 14px;
+  font-family: "Montserrat Light";
+  margin-left: 5px;
+}
diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js
index 3b23ce005..95b60f929 100644
--- a/ui/app/reducers/app.js
+++ b/ui/app/reducers/app.js
@@ -378,17 +378,17 @@ function reduceApp (state, action) {
         },
       })
 
-    case actions.BUY_ETH_SUBVIEW:
+    case actions.BUY_ETH_VIEW:
       return extend(appState, {
         transForward: true,
         currentView: {
-          name: 'accountDetail',
+          name: 'buyEth',
           context: appState.currentView.context,
         },
-        accountDetail: {
+        buyView: {
           subview: 'buyForm',
           amount: '5.00',
-          buyAddress: appState.currentView.context,
+          buyAddress: action.value,
           formView: {
             coinbase: true,
             shapeshift: false,
@@ -398,46 +398,46 @@ function reduceApp (state, action) {
 
     case actions.UPDATE_BUY_ADDRESS:
       return extend(appState, {
-        accountDetail: {
+        buyView: {
           subview: 'buyForm',
           formView: {
-            coinbase: true,
-            shapeshift: false,
+            coinbase: appState.buyView.formView.coinbase,
+            shapeshift: appState.buyView.formView.shapeshift,
           },
           buyAddress: action.value,
-          amount: appState.accountDetail.amount,
+          amount: appState.buyView.amount,
         },
       })
 
     case actions.UPDATE_COINBASE_AMOUNT:
       return extend(appState, {
-        accountDetail: {
+        buyView: {
           subview: 'buyForm',
           formView: {
             coinbase: true,
             shapeshift: false,
           },
-          buyAddress: appState.accountDetail.buyAddress,
+          buyAddress: appState.buyView.buyAddress,
           amount: action.value,
         },
       })
 
     case actions.COINBASE_SUBVIEW:
       return extend(appState, {
-        accountDetail: {
+        buyView: {
           subview: 'buyForm',
           formView: {
             coinbase: true,
             shapeshift: false,
           },
-          buyAddress: appState.accountDetail.buyAddress,
-          amount: appState.accountDetail.amount,
+          buyAddress: appState.buyView.buyAddress,
+          amount: appState.buyView.amount,
         },
       })
 
     case actions.SHAPESHIFT_SUBVIEW:
       return extend(appState, {
-        accountDetail: {
+        buyView: {
           subview: 'buyForm',
           formView: {
             coinbase: false,
@@ -445,41 +445,35 @@ function reduceApp (state, action) {
             marketinfo: action.value.marketinfo,
             coinOptions: action.value.coinOptions,
           },
-          buyAddress: appState.accountDetail.buyAddress,
-          amount: appState.accountDetail.amount,
+          buyAddress: appState.buyView.buyAddress,
+          amount: appState.buyView.amount,
         },
       })
 
     case actions.PAIR_UPDATE:
       return extend(appState, {
-        accountDetail: {
+        buyView: {
           subview: 'buyForm',
           formView: {
             coinbase: false,
             shapeshift: true,
             marketinfo: action.value.marketinfo,
-            coinOptions: appState.accountDetail.formView.coinOptions,
+            coinOptions: appState.buyView.formView.coinOptions,
           },
-          buyAddress: appState.accountDetail.buyAddress,
-          amount: appState.accountDetail.amount,
+          buyAddress: appState.buyView.buyAddress,
+          amount: appState.buyView.amount,
           warning: null,
         },
       })
 
-    case actions.COIN_SHIFT_REQUEST:
+    case actions.SHOW_QR:
       return extend(appState, {
-        accountDetail: {
-          subview: 'buyForm',
-          formView: {
-            coinbase: false,
-            shapeshift: true,
-            marketinfo: appState.accountDetail.formView.marketinfo,
-            coinOptions: appState.accountDetail.formView.coinOptions,
-            response: action.value.response,
-          },
-          buyAddress: appState.accountDetail.buyAddress,
-          amount: appState.accountDetail.amount,
-          warning: null,
+        qrRequested: true,
+        transForward: true,
+        Qr: {
+          message: action.value.message,
+          image: action.value.qr,
+          data: action.value.data,
         },
       })
     default: