ui - buy button view - refactor

ui/app/components/buy-button-subview.js

@@ -8,6 +8,11 @@ const ShapeshiftForm = require('./shapeshift-form')
 const Loading = require('./loading')
 const AccountPanel = require('./account-panel')
 const RadioList = require('./custom-radio-list')
+const networkNames = {
+  3: 'Ropsten',
+  4: 'Rinkeby',
+  42: 'Kovan',
+}
 
 module.exports = connect(mapStateToProps)(BuyButtonSubview)
 
@@ -30,16 +35,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.flex-column', {
+
+    h('.flex-column', {
       style: {
         alignItems: 'center',
       },
     }, [
-             // back button
+
+      // header bar (back button, label)
       h('.flex-row', {
         style: {
           alignItems: 'center',
@@ -63,6 +82,8 @@ BuyButtonSubview.prototype.render = function () {
           },
         }, 'Buy Eth'),
       ]),
+
+      // loading indication
       h('div', {
         style: {
           position: 'absolute',
@@ -70,8 +91,10 @@ BuyButtonSubview.prototype.render = function () {
           left: '49vw',
         },
       }, [
-        h(Loading, {isLoading}),
+        h(Loading, { isLoading }),
       ]),
+
+      // account panel
       h('div', {
         style: {
           width: '80%',
@@ -83,17 +106,82 @@ BuyButtonSubview.prototype.render = function () {
           account: props.account,
         }),
       ]),
-      h('h3.text-transform-uppercase', {
+
+      h('.flex-row', {
         style: {
-          paddingLeft: '15px',
-          fontFamily: 'Montserrat Light',
-          width: '100vw',
-          background: 'rgb(235, 235, 235)',
-          color: 'rgb(174, 174, 174)',
-          paddingTop: '4px',
-          paddingBottom: '4px',
+          alignItems: 'center',
+          justifyContent: 'center',
         },
-      }, 'Select Service'),
+      }, [
+        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'),
+      ]),
+
+    ])
+
+  )
+}
+
+
+BuyButtonSubview.prototype.primarySubview = function () {
+  const props = this.props
+  const network = props.network
+
+  switch (network) {
+    case 'loading':
+      return
+      
+    case '1':
+      return this.mainnetSubview()
+
+    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',
+          },
+        }, [
+          h('button.text-transform-uppercase', {
+            onClick: () => this.props.dispatch(actions.buyEth({ network })),
+            style: {
+              marginTop: '15px',
+            },
+          }, label),
+        ])
+      )
+
+    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',
@@ -115,6 +203,7 @@ BuyButtonSubview.prototype.render = function () {
           onClick: this.radioHandler.bind(this),
         }),
       ]),
+
       h('h3.text-transform-uppercase', {
         style: {
           paddingLeft: '15px',
@@ -126,8 +215,10 @@ BuyButtonSubview.prototype.render = function () {
           paddingBottom: '4px',
         },
       }, props.buyView.subview),
+
       this.formVersionSubview(),
     ])
+
   )
 }
 
@@ -139,39 +230,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: '20px 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 === '4') || (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 === '4') ? h('button.text-transform-uppercase', {
-        onClick: () => this.props.dispatch(actions.buyEth({ network })),
-        style: {
-          marginTop: '15px',
-        },
-      }, 'Rinkeby Test Faucet') : null,
-      (network === '42') ? h('button.text-transform-uppercase', {
-        onClick: () => this.props.dispatch(actions.buyEth({ network })),
-        style: {
-          marginTop: '15px',
-        },
-      }, 'Kovan Test Faucet') : null,
-    ])
   }
 }