Skip to content

Commit ca3faba

Browse files
FlySwatterFlySwatter
authored
Merge pull request #1336 from MetaMask/buyButtonRedo
Buy button redo
2 parents 8d42037 + 79f8839 commit ca3faba

10 files changed

+216
-244
lines changed

‎ui/app/account-detail.js

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ const ExportAccountView = require('./components/account-export')
1616
const ethUtil = require('ethereumjs-util')
1717
const EditableLabel = require('./components/editable-label')
1818
const Tooltip = require('./components/tooltip')
19-
const BuyButtonSubview = require('./components/buy-button-subview')
2019
module.exports = connect(mapStateToProps)(AccountDetailScreen)
2120

2221
function mapStateToProps (state) {
@@ -238,8 +237,6 @@ AccountDetailScreen.prototype.subview = function () {
238237
case 'export':
239238
var state = extend({key: 'export'}, this.props)
240239
return h(ExportAccountView, state)
241-
case 'buyForm':
242-
return h(BuyButtonSubview, extend({key: 'buyForm'}, this.props))
243240
default:
244241
return this.transactionList()
245242
}
@@ -262,15 +259,3 @@ AccountDetailScreen.prototype.transactionList = function () {
262259
AccountDetailScreen.prototype.requestAccountExport = function () {
263260
this.props.dispatch(actions.requestExportAccount())
264261
}
265-
266-
267-
AccountDetailScreen.prototype.buyButtonDeligator = function () {
268-
var props = this.props
269-
var selected = props.address || Object.keys(props.accounts)[0]
270-
271-
if (this.props.accountDetail.subview === 'buyForm') {
272-
props.dispatch(actions.backToAccountDetail(props.address))
273-
} else {
274-
props.dispatch(actions.buyEthView(selected))
275-
}
276-
}

‎ui/app/actions.js

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -134,10 +134,6 @@ var actions = {
134134
buyEth: buyEth,
135135
buyEthView: buyEthView,
136136
BUY_ETH_VIEW: 'BUY_ETH_VIEW',
137-
UPDATE_COINBASE_AMOUNT: 'UPDATE_COIBASE_AMOUNT',
138-
updateCoinBaseAmount: updateCoinBaseAmount,
139-
UPDATE_BUY_ADDRESS: 'UPDATE_BUY_ADDRESS',
140-
updateBuyAddress: updateBuyAddress,
141137
COINBASE_SUBVIEW: 'COINBASE_SUBVIEW',
142138
coinBaseSubview: coinBaseSubview,
143139
SHAPESHIFT_SUBVIEW: 'SHAPESHIFT_SUBVIEW',
@@ -852,20 +848,6 @@ function buyEthView (address) {
852848
}
853849
}
854850

855-
function updateCoinBaseAmount (value) {
856-
return {
857-
type: actions.UPDATE_COINBASE_AMOUNT,
858-
value,
859-
}
860-
}
861-
862-
function updateBuyAddress (value) {
863-
return {
864-
type: actions.UPDATE_BUY_ADDRESS,
865-
value,
866-
}
867-
}
868-
869851
function coinBaseSubview () {
870852
return {
871853
type: actions.COINBASE_SUBVIEW,

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

Lines changed: 88 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,15 @@ const actions = require('../actions')
66
const CoinbaseForm = require('./coinbase-form')
77
const ShapeshiftForm = require('./shapeshift-form')
88
const Loading = require('./loading')
9-
const TabBar = require('./tab-bar')
9+
const AccountPanel = require('./account-panel')
10+
const RadioList = require('./custom-radio-list')
1011

1112
module.exports = connect(mapStateToProps)(BuyButtonSubview)
1213

1314
function mapStateToProps (state) {
1415
return {
16+
identity: state.appState.identity,
17+
account: state.metamask.accounts[state.appState.buyView.buyAddress],
1518
warning: state.appState.warning,
1619
buyView: state.appState.buyView,
1720
network: state.metamask.network,
@@ -31,7 +34,11 @@ BuyButtonSubview.prototype.render = function () {
3134
const isLoading = props.isSubLoading
3235

3336
return (
34-
h('.buy-eth-section', [
37+
h('.buy-eth-section.flex-column', {
38+
style: {
39+
alignItems: 'center',
40+
},
41+
}, [
3542
// back button
3643
h('.flex-row', {
3744
style: {
@@ -46,58 +53,79 @@ BuyButtonSubview.prototype.render = function () {
4653
left: '10px',
4754
},
4855
}),
49-
h('h2.page-subtitle', 'Buy Eth'),
50-
]),
51-
52-
h(Loading, { isLoading }),
53-
54-
h(TabBar, {
55-
tabs: [
56-
{
57-
content: [
58-
'Coinbase',
59-
h('a', {
60-
onClick: (event) => this.navigateTo('https://github.com/MetaMask/faq/blob/master/COINBASE.md'),
61-
}, [
62-
h('i.fa.fa-question-circle', {
63-
style: {
64-
margin: '0px 5px',
65-
},
66-
}),
67-
]),
68-
],
69-
key: 'coinbase',
56+
h('h2.text-transform-uppercase.flex-center', {
57+
style: {
58+
width: '100vw',
59+
background: 'rgb(235, 235, 235)',
60+
color: 'rgb(174, 174, 174)',
61+
paddingTop: '4px',
62+
paddingBottom: '4px',
7063
},
71-
{
72-
content: [
73-
'Shapeshift',
74-
h('a', {
75-
href: 'https://github.com/MetaMask/faq/blob/master/COINBASE.md',
76-
onClick: (event) => this.navigateTo('https://info.shapeshift.io/about'),
77-
}, [
78-
h('i.fa.fa-question-circle', {
79-
style: {
80-
margin: '0px 5px',
81-
},
82-
}),
83-
]),
84-
],
85-
key: 'shapeshift',
64+
}, 'Buy Eth'),
65+
]),
66+
h('div', {
67+
style: {
68+
position: 'absolute',
69+
top: '57vh',
70+
left: '49vw',
71+
},
72+
}, [
73+
h(Loading, {isLoading}),
74+
]),
75+
h('div', {
76+
style: {
77+
width: '80%',
78+
},
79+
}, [
80+
h(AccountPanel, {
81+
showFullAddress: true,
82+
identity: props.identity,
83+
account: props.account,
84+
}),
85+
]),
86+
h('h3.text-transform-uppercase', {
87+
style: {
88+
paddingLeft: '15px',
89+
fontFamily: 'Montserrat Light',
90+
width: '100vw',
91+
background: 'rgb(235, 235, 235)',
92+
color: 'rgb(174, 174, 174)',
93+
paddingTop: '4px',
94+
paddingBottom: '4px',
95+
},
96+
}, 'Select Service'),
97+
h('.flex-row.selected-exchange', {
98+
style: {
99+
position: 'relative',
100+
right: '35px',
101+
marginTop: '20px',
102+
marginBottom: '20px',
103+
},
104+
}, [
105+
h(RadioList, {
106+
defaultFocus: props.buyView.subview,
107+
labels: [
108+
'Coinbase',
109+
'ShapeShift',
110+
],
111+
subtext: {
112+
'Coinbase': 'Crypto/FIAT (USA only)',
113+
'ShapeShift': 'Crypto',
86114
},
87-
],
88-
defaultTab: 'coinbase',
89-
tabSelected: (key) => {
90-
switch (key) {
91-
case 'coinbase':
92-
props.dispatch(actions.coinBaseSubview())
93-
break
94-
case 'shapeshift':
95-
props.dispatch(actions.shapeShiftSubview(props.provider.type))
96-
break
97-
}
115+
onClick: this.radioHandler.bind(this),
116+
}),
117+
]),
118+
h('h3.text-transform-uppercase', {
119+
style: {
120+
paddingLeft: '15px',
121+
fontFamily: 'Montserrat Light',
122+
width: '100vw',
123+
background: 'rgb(235, 235, 235)',
124+
color: 'rgb(174, 174, 174)',
125+
paddingTop: '4px',
126+
paddingBottom: '4px',
98127
},
99-
}),
100-
128+
}, props.buyView.subview),
101129
this.formVersionSubview(),
102130
])
103131
)
@@ -152,3 +180,12 @@ BuyButtonSubview.prototype.backButtonContext = function () {
152180
this.props.dispatch(actions.goHome())
153181
}
154182
}
183+
184+
BuyButtonSubview.prototype.radioHandler = function (event) {
185+
switch (event.target.title) {
186+
case 'Coinbase':
187+
return this.props.dispatch(actions.coinBaseSubview())
188+
case 'ShapeShift':
189+
return this.props.dispatch(actions.shapeShiftSubview(this.props.provider.type))
190+
}
191+
}

‎ui/app/components/coinbase-form.js

Lines changed: 9 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ const inherits = require('util').inherits
44
const connect = require('react-redux').connect
55
const actions = require('../actions')
66

7-
const isValidAddress = require('../util').isValidAddress
87
module.exports = connect(mapStateToProps)(CoinbaseForm)
98

109
function mapStateToProps (state) {
@@ -21,105 +20,36 @@ function CoinbaseForm () {
2120

2221
CoinbaseForm.prototype.render = function () {
2322
var props = this.props
24-
var amount = props.buyView.amount
25-
var address = props.buyView.buyAddress
2623

2724
return h('.flex-column', {
2825
style: {
29-
// margin: '10px',
26+
marginTop: '35px',
3027
padding: '25px',
28+
width: '100%',
3129
},
3230
}, [
33-
h('.flex-column', {
34-
style: {
35-
alignItems: 'flex-start',
36-
},
37-
}, [
38-
h('.flex-row', [
39-
h('div', 'Address:'),
40-
h('.ellip-address', address),
41-
]),
42-
h('.flex-row', [
43-
h('div', 'Amount: $'),
44-
h('.input-container', [
45-
h('input.buy-inputs', {
46-
style: {
47-
width: '3em',
48-
boxSizing: 'border-box',
49-
},
50-
defaultValue: amount,
51-
onChange: this.handleAmount.bind(this),
52-
}),
53-
h('i.fa.fa-pencil-square-o.edit-text', {
54-
style: {
55-
fontSize: '12px',
56-
color: '#F7861C',
57-
position: 'relative',
58-
bottom: '5px',
59-
right: '11px',
60-
},
61-
}),
62-
]),
63-
]),
64-
]),
65-
66-
h('.info-gray', {
67-
style: {
68-
fontSize: '10px',
69-
fontFamily: 'Montserrat Light',
70-
margin: '15px',
71-
lineHeight: '13px',
72-
},
73-
},
74-
`there is a USD$ 15 a day max and a USD$ 50
75-
dollar limit per the life time of an account without a
76-
coinbase account. A fee of 3.75% will be aplied to debit/credit cards.`),
77-
78-
!props.warning ? h('div', {
79-
style: {
80-
width: '340px',
81-
height: '22px',
82-
},
83-
}) : props.warning && h('span.error.flex-center', props.warning),
84-
85-
8631
h('.flex-row', {
8732
style: {
8833
justifyContent: 'space-around',
8934
margin: '33px',
35+
marginTop: '0px',
9036
},
9137
}, [
92-
h('button', {
38+
h('button.btn-green', {
9339
onClick: this.toCoinbase.bind(this),
9440
}, 'Continue to Coinbase'),
9541

96-
h('button', {
42+
h('button.btn-red', {
9743
onClick: () => props.dispatch(actions.backTobuyView(props.accounts.address)),
9844
}, 'Cancel'),
9945
]),
10046
])
10147
}
102-
CoinbaseForm.prototype.handleAmount = function (event) {
103-
this.props.dispatch(actions.updateCoinBaseAmount(event.target.value))
104-
}
105-
CoinbaseForm.prototype.handleAddress = function (event) {
106-
this.props.dispatch(actions.updateBuyAddress(event.target.value))
107-
}
108-
CoinbaseForm.prototype.toCoinbase = function () {
109-
var props = this.props
110-
var amount = props.buyView.amount
111-
var address = props.buyView.buyAddress
112-
var message
11348

114-
if (isValidAddress(address) && isValidAmountforCoinBase(amount).valid) {
115-
props.dispatch(actions.buyEth({ network: '1', address, amount: props.buyView.amount }))
116-
} else if (!isValidAmountforCoinBase(amount).valid) {
117-
message = isValidAmountforCoinBase(amount).message
118-
return props.dispatch(actions.displayWarning(message))
119-
} else {
120-
message = 'Receiving address is invalid.'
121-
return props.dispatch(actions.displayWarning(message))
122-
}
49+
CoinbaseForm.prototype.toCoinbase = function () {
50+
const props = this.props
51+
const address = props.buyView.buyAddress
52+
props.dispatch(actions.buyEth({ network: '1', address, amount: 0 }))
12353
}
12454

12555
CoinbaseForm.prototype.renderLoading = function () {
@@ -131,29 +61,3 @@ CoinbaseForm.prototype.renderLoading = function () {
13161
src: 'images/loading.svg',
13262
})
13363
}
134-
135-
function isValidAmountforCoinBase (amount) {
136-
amount = parseFloat(amount)
137-
if (amount) {
138-
if (amount <= 15 && amount > 0) {
139-
return {
140-
valid: true,
141-
}
142-
} else if (amount > 15) {
143-
return {
144-
valid: false,
145-
message: 'The amount can not be greater then $15',
146-
}
147-
} else {
148-
return {
149-
valid: false,
150-
message: 'Can not buy amounts less then $0',
151-
}
152-
}
153-
} else {
154-
return {
155-
valid: false,
156-
message: 'The amount entered is not a number',
157-
}
158-
}
159-
}

0 commit comments

Comments
 (0)