aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/components/buy-button-subview.js
blob: 19a6e251fae64255c14356a27e51a670ccb957c0 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
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')
const extension = require('../../../app/scripts/lib/extension')

module.exports = connect(mapStateToProps)(BuyButtonSubview)

function mapStateToProps (state) {
  return {
    selectedAccount: state.selectedAccount,
    warning: state.appState.warning,
    buyView: state.appState.buyView,
    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.buyView.formView

  return (
    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',
          color: '#AEAEAE',
          paddingTop: '4px',
          justifyContent: 'space-around',
        },
      }, [
        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(),
    ])
  )
}

BuyButtonSubview.prototype.formVersionSubview = function () {
  if (this.props.network === '1') {
    if (this.props.buyView.formView.coinbase) {
      return h(CoinbaseForm, this.props)
    } 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',
        },
      }, 'In order to access this feature please switch too the Main Network'),
      h('h3.text-transform-uppercase', 'or:'),
      this.props.network === '2' ? h('button.text-transform-uppercase', {
        onClick: () => this.props.dispatch(actions.buyEth()),
      }, 'Go To Test Faucet') : null,
    ])
  }
}

BuyButtonSubview.prototype.navigateTo = function (url) {
  extension.tabs.create({ url })
}