1 files changed, 185 insertions, 78 deletions

diff --git a/ui/app/components/buy-button-subview.js b/ui/app/components/buy-button-subview.js
index 6810303e1..d5958787b 100644
--- a/ui/app/components/buy-button-subview.js
+++ b/ui/app/components/buy-button-subview.js
@@ -6,12 +6,16 @@ const actions = require('../actions')
 const CoinbaseForm = require('./coinbase-form')
 const ShapeshiftForm = require('./shapeshift-form')
 const Loading = require('./loading')
-const TabBar = require('./tab-bar')
+const AccountPanel = require('./account-panel')
+const RadioList = require('./custom-radio-list')
+const networkNames = require('../../../app/scripts/config.js').networkNames
 
 module.exports = connect(mapStateToProps)(BuyButtonSubview)
 
 function mapStateToProps (state) {
   return {
+    identity: state.appState.identity,
+    account: state.metamask.accounts[state.appState.buyView.buyAddress],
     warning: state.appState.warning,
     buyView: state.appState.buyView,
     network: state.metamask.network,
@@ -27,12 +31,30 @@ function BuyButtonSubview () {
 }
 
 BuyButtonSubview.prototype.render = function () {
+  return (
+    h('div', {
+      style: {
+        width: '100%',
+      },
+    }, [
+      this.headerSubview(),
+      this.primarySubview(),
+    ])
+  )
+}
+
+BuyButtonSubview.prototype.headerSubview = function () {
   const props = this.props
   const isLoading = props.isSubLoading
-
   return (
-    h('.buy-eth-section', [
-             // back button
+
+    h('.flex-column', {
+      style: {
+        alignItems: 'center',
+      },
+    }, [
+
+      // header bar (back button, label)
       h('.flex-row', {
         style: {
           alignItems: 'center',
@@ -46,60 +68,163 @@ BuyButtonSubview.prototype.render = function () {
             left: '10px',
           },
         }),
-        h('h2.page-subtitle', 'Buy Eth'),
+        h('h2.text-transform-uppercase.flex-center', {
+          style: {
+            width: '100vw',
+            background: 'rgb(235, 235, 235)',
+            color: 'rgb(174, 174, 174)',
+            paddingTop: '4px',
+            paddingBottom: '4px',
+          },
+        }, 'Deposit Eth'),
+      ]),
+
+      // loading indication
+      h('div', {
+        style: {
+          position: 'absolute',
+          top: '57vh',
+          left: '49vw',
+        },
+      }, [
+        isLoading && h(Loading),
+      ]),
+
+      // account panel
+      h('div', {
+        style: {
+          width: '80%',
+        },
+      }, [
+        h(AccountPanel, {
+          showFullAddress: true,
+          identity: props.identity,
+          account: props.account,
+        }),
+      ]),
+
+      h('.flex-row', {
+        style: {
+          alignItems: 'center',
+          justifyContent: 'center',
+        },
+      }, [
+        h('h3.text-transform-uppercase.flex-center', {
+          style: {
+            paddingLeft: '15px',
+            width: '100vw',
+            background: 'rgb(235, 235, 235)',
+            color: 'rgb(174, 174, 174)',
+            paddingTop: '4px',
+            paddingBottom: '4px',
+          },
+        }, 'Select Service'),
       ]),
 
-      h(Loading, { isLoading }),
-
-      h(TabBar, {
-        tabs: [
-          {
-            content: [
-              'Coinbase',
-              h('a', {
-                onClick: (event) => this.navigateTo('https://github.com/MetaMask/faq/blob/master/COINBASE.md'),
-              }, [
-                h('i.fa.fa-question-circle', {
-                  style: {
-                    margin: '0px 5px',
-                  },
-                }),
-              ]),
-            ],
-            key: 'coinbase',
+    ])
+
+  )
+}
+
+
+BuyButtonSubview.prototype.primarySubview = function () {
+  const props = this.props
+  const network = props.network
+
+  switch (network) {
+    case 'loading':
+      return
+
+    case '1':
+      return this.mainnetSubview()
+
+    // Ropsten, Rinkeby, Kovan
+    case '3':
+    case '4':
+    case '42':
+      const networkName = networkNames[network]
+      const label = `${networkName} Test Faucet`
+      return (
+        h('div.flex-column', {
+          style: {
+            alignItems: 'center',
+            margin: '20px 50px',
           },
-          {
-            content: [
-              '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: {
-                    margin: '0px 5px',
-                  },
-                }),
-              ]),
-            ],
-            key: 'shapeshift',
+        }, [
+          h('button.text-transform-uppercase', {
+            onClick: () => this.props.dispatch(actions.buyEth({ network })),
+            style: {
+              marginTop: '15px',
+            },
+          }, label),
+          // Kovan only: Dharma loans beta
+          network === '42' ? (
+            h('button.text-transform-uppercase', {
+              onClick: () => this.navigateTo('https://borrow.dharma.io/'),
+              style: {
+                marginTop: '15px',
+              },
+            }, 'Borrow With Dharma (Beta)')
+          ) : null,
+      ])
+    )
+
+    default:
+      return (
+        h('h2.error', 'Unknown network ID')
+      )
+
+  }
+}
+
+BuyButtonSubview.prototype.mainnetSubview = function () {
+  const props = this.props
+
+  return (
+
+    h('.flex-column', {
+      style: {
+        alignItems: 'center',
+      },
+    }, [
+
+      h('.flex-row.selected-exchange', {
+        style: {
+          position: 'relative',
+          right: '35px',
+          marginTop: '20px',
+          marginBottom: '20px',
+        },
+      }, [
+        h(RadioList, {
+          defaultFocus: props.buyView.subview,
+          labels: [
+            'Coinbase',
+            'ShapeShift',
+          ],
+          subtext: {
+            'Coinbase': 'Crypto/FIAT (USA only)',
+            'ShapeShift': 'Crypto',
           },
-        ],
-        defaultTab: 'coinbase',
-        tabSelected: (key) => {
-          switch (key) {
-            case 'coinbase':
-              props.dispatch(actions.coinBaseSubview())
-              break
-            case 'shapeshift':
-              props.dispatch(actions.shapeShiftSubview(props.provider.type))
-              break
-          }
+          onClick: this.radioHandler.bind(this),
+        }),
+      ]),
+
+      h('h3.text-transform-uppercase', {
+        style: {
+          paddingLeft: '15px',
+          fontFamily: 'Montserrat Light',
+          width: '100vw',
+          background: 'rgb(235, 235, 235)',
+          color: 'rgb(174, 174, 174)',
+          paddingTop: '4px',
+          paddingBottom: '4px',
         },
-      }),
+      }, props.buyView.subview),
 
       this.formVersionSubview(),
     ])
+
   )
 }
 
@@ -111,33 +236,6 @@ BuyButtonSubview.prototype.formVersionSubview = function () {
     } else if (this.props.buyView.formView.shapeshift) {
       return h(ShapeshiftForm, this.props)
     }
-  } else {
-    return h('div.flex-column', {
-      style: {
-        alignItems: 'center',
-        margin: '50px',
-      },
-    }, [
-      h('h3.text-transform-uppercase', {
-        style: {
-          width: '225px',
-          marginBottom: '15px',
-        },
-      }, 'In order to access this feature, please switch to the Main Network'),
-      ((network === '3') || (network === '42')) ? h('h3.text-transform-uppercase', 'or go to the') : null,
-      (network === '3') ? h('button.text-transform-uppercase', {
-        onClick: () => this.props.dispatch(actions.buyEth({ network })),
-        style: {
-          marginTop: '15px',
-        },
-      }, 'Ropsten Test Faucet') : null,
-      (network === '42') ? h('button.text-transform-uppercase', {
-        onClick: () => this.props.dispatch(actions.buyEth({ network })),
-        style: {
-          marginTop: '15px',
-        },
-      }, 'Kovan Test Faucet') : null,
-    ])
   }
 }
 
@@ -147,8 +245,17 @@ BuyButtonSubview.prototype.navigateTo = function (url) {
 
 BuyButtonSubview.prototype.backButtonContext = function () {
   if (this.props.context === 'confTx') {
-    this.props.dispatch(actions.showConfTxPage(false))
+    this.props.dispatch(actions.showConfTxPage({transForward: false}))
   } else {
     this.props.dispatch(actions.goHome())
   }
 }
+
+BuyButtonSubview.prototype.radioHandler = function (event) {
+  switch (event.target.title) {
+    case 'Coinbase':
+      return this.props.dispatch(actions.coinBaseSubview())
+    case 'ShapeShift':
+      return this.props.dispatch(actions.shapeShiftSubview(this.props.provider.type))
+  }
+}