Merge pull request #1885 from MetaMask/dharma

Feature - Add Dharma Loans Beta to kovan buy options

app/scripts/config.js

@@ -12,4 +12,9 @@ module.exports = {
     kovan: KOVAN_RPC_URL,
     rinkeby: RINKEBY_RPC_URL,
   },
+  networkNames: {
+    3: 'Ropsten',
+    4: 'Rinkeby',
+    42: 'Kovan',
+  },
 }

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

@@ -8,6 +8,7 @@ const ShapeshiftForm = require('./shapeshift-form')
 const Loading = require('./loading')
 const AccountPanel = require('./account-panel')
 const RadioList = require('./custom-radio-list')
+const networkNames = require('../../../app/scripts/config.js').networkNames
 
 module.exports = connect(mapStateToProps)(BuyButtonSubview)
 
@@ -30,16 +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.flex-column', {
+
+    h('.flex-column', {
       style: {
         alignItems: 'center',
       },
     }, [
-             // back button
+
+      // header bar (back button, label)
       h('.flex-row', {
         style: {
           alignItems: 'center',
@@ -63,6 +78,8 @@ BuyButtonSubview.prototype.render = function () {
           },
         }, 'Buy Eth'),
       ]),
+
+      // loading indication
       h('div', {
         style: {
           position: 'absolute',
@@ -70,8 +87,10 @@ BuyButtonSubview.prototype.render = function () {
           left: '49vw',
         },
       }, [
-        h(Loading, {isLoading}),
+        h(Loading, { isLoading }),
       ]),
+
+      // account panel
       h('div', {
         style: {
           width: '80%',
@@ -83,10 +102,16 @@ BuyButtonSubview.prototype.render = function () {
           account: props.account,
         }),
       ]),
-      h('h3.text-transform-uppercase', {
+
+      h('.flex-row', {
+        style: {
+          alignItems: 'center',
+          justifyContent: 'center',
+        },
+      }, [
+        h('h3.text-transform-uppercase.flex-center', {
           style: {
             paddingLeft: '15px',
-          fontFamily: 'Montserrat Light',
             width: '100vw',
             background: 'rgb(235, 235, 235)',
             color: 'rgb(174, 174, 174)',
@@ -94,6 +119,75 @@ BuyButtonSubview.prototype.render = function () {
             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()
+
+    // 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',
+          },
+        }, [
+          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',
@@ -115,6 +209,7 @@ BuyButtonSubview.prototype.render = function () {
           onClick: this.radioHandler.bind(this),
         }),
       ]),
+
       h('h3.text-transform-uppercase', {
         style: {
           paddingLeft: '15px',
@@ -126,8 +221,10 @@ BuyButtonSubview.prototype.render = function () {
           paddingBottom: '4px',
         },
       }, props.buyView.subview),
+
       this.formVersionSubview(),
     ])
+
   )
 }
 
@@ -139,39 +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: '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,
-    ])
   }
 }