1 files changed, 74 insertions, 0 deletions
diff --git a/ui/app/components/buy-button-subview.js b/ui/app/components/buy-button-subview.js
new file mode 100644
index 000000000..b410630a9
--- /dev/null
+++ b/ui/app/components/buy-button-subview.js
@@ -0,0 +1,74 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const actions = require('../actions')
+const CoinbaseForm = require('./coinbase-form')
+const ShapeshiftForm = require('./shapeshift-form')
+
+module.exports = connect(mapStateToProps)(BuyButtonSubview)
+
+function mapStateToProps (state) {
+  return {
+    selectedAccount: state.selectedAccount,
+    warning: state.appState.warning,
+    network: state.metamask.network,
+    provider: state.metamask.provider,
+  }
+}
+
+inherits(BuyButtonSubview, Component)
+function BuyButtonSubview () {
+  Component.call(this)
+}
+
+BuyButtonSubview.prototype.render = function () {
+  const props = this.props
+  const currentForm = props.accountDetail.formView
+
+  return (
+    h('span', {key: 'buyForm'}, [
+      h('h3.flex-row.text-transform-uppercase', {
+        style: {
+          background: '#EBEBEB',
+          color: '#AEAEAE',
+          paddingTop: '4px',
+          justifyContent: 'space-around',
+        },
+      }, [
+        h(currentForm.coinbase ? '.activeForm' : '.inactiveForm', {
+          onClick: () => props.dispatch(actions.coinBaseSubview()),
+        }, 'Coinbase'),
+        h(currentForm.shapeshift ? '.activeForm' : '.inactiveForm', {
+          onClick: () => props.dispatch(actions.shapeShiftSubview(props.provider.type)),
+        }, 'Shapeshift'),
+      ]),
+      this.formVersionSubview(),
+    ])
+  )
+}
+
+BuyButtonSubview.prototype.formVersionSubview = function () {
+  if (this.props.network === '1') {
+    if (this.props.accountDetail.formView.coinbase) {
+      return h(CoinbaseForm, this.props)
+    } else if (this.props.accountDetail.formView.shapeshift) {
+      return h(ShapeshiftForm, this.props)
+    }
+  } else {
+    console.log(this.props.network)
+    return h('div.flex-column', {
+      style: {
+        alignItems: 'center',
+        margin: '50px',
+      },
+    }, [
+      h('h3.text-transform-uppercase', {
+        style: {
+          width: '225px',
+        },
+      }, 'In order to access this feature please switch too the Main Network'),
+    ])
+  }
+}
+