m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Initial redo attempt of the buy view to look like vladt's desighn

Browse Source
This commit is contained in:
frankiebee 2017-04-18 18:21:24 +02:00
parent 83811910c8
commit ce03b7db51
6 changed files with 174 additions and 196 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

141
ui/app/components/buy-button-subview.js
View File

@ -6,12 +6,15 @@ const actions = require('../actions')
const CoinbaseForm = require('./coinbase-form')
const ShapeshiftForm = require('./shapeshift-form')
const Loading = require('./loading')
const TabBar = require('./tab-bar')
const AccountPanel = require('./account-panel')
const RadioList = require('./custom-radio-list')
module.exports = connect(mapStateToProps)(BuyButtonSubview)
function mapStateToProps (state) {
return {
identity: state.appState.identity,
account: state.metamask.accounts[state.appState.buyView.buyAddress],
warning: state.appState.warning,
buyView: state.appState.buyView,
network: state.metamask.network,
@ -31,7 +34,11 @@ BuyButtonSubview.prototype.render = function () {
const isLoading = props.isSubLoading
return (
h('.buy-eth-section', [
h('.buy-eth-section.flex-column', {
style: {
alignItems: 'center',
},
}, [
// back button
h('.flex-row', {
style: {
@ -46,58 +53,79 @@ BuyButtonSubview.prototype.render = function () {
left: '10px',
},
}),
h('h2.page-subtitle', 'Buy Eth'),
h('h2.text-transform-uppercase.flex-center', {
style: {
width: '100vw',
background: 'rgb(235, 235, 235)',
color: 'rgb(174, 174, 174)',
paddingTop: '4px',
paddingBottom: '4px',
},
}, 'Buy Eth'),
]),
h(Loading, { isLoading }),
h(TabBar, {
tabs: [
{
content: [
'Coinbase',
h('a', {
onClick: (event) => this.navigateTo('https://github.com/MetaMask/faq/blob/master/COINBASE.md'),
}, [
h('i.fa.fa-question-circle', {
style: {
margin: '0px 5px',
},
}),
]),
],
key: 'coinbase',
},
{
content: [
'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: {
margin: '0px 5px',
},
}),
]),
],
key: 'shapeshift',
},
],
defaultTab: 'coinbase',
tabSelected: (key) => {
switch (key) {
case 'coinbase':
props.dispatch(actions.coinBaseSubview())
break
case 'shapeshift':
props.dispatch(actions.shapeShiftSubview(props.provider.type))
break
}
h('div', {
style: {
position: 'absolute',
top: '57vh',
left: '49vw',
},
}),
}, [
h(Loading, {isLoading}),
]),
h('div', {
style: {
width: '80%',
},
}, [
h(AccountPanel, {
showFullAddress: true,
identity: props.identity,
account: props.account,
}),
]),
h('h3.text-transform-uppercase', {
style: {
paddingLeft: '15px',
fontFamily: 'Montserrat Light',
width: '100vw',
background: 'rgb(235, 235, 235)',
color: 'rgb(174, 174, 174)',
paddingTop: '4px',
paddingBottom: '4px',
},
}, 'Select Service'),
h('.flex-row.selected-exchange', {
style: {
position: 'relative',
right: '35px',
marginTop: '20px',
marginBottom: '20px',
},
}, [
h(RadioList, {
defaultFocus: props.buyView.subview,
lables: [
'Coinbase',
'ShapeShift',
],
subtext: {
'Coinbase': 'Crypto/FIAT (USA only)',
'ShapeShift': 'Crypto',
},
onClick: this.radioHandler.bind(this),
}),
]),
h('h3.text-transform-uppercase', {
style: {
paddingLeft: '15px',
fontFamily: 'Montserrat Light',
width: '100vw',
background: 'rgb(235, 235, 235)',
color: 'rgb(174, 174, 174)',
paddingTop: '4px',
paddingBottom: '4px',
},
}, props.buyView.subview),
this.formVersionSubview(),
])
)
@ -152,3 +180,12 @@ BuyButtonSubview.prototype.backButtonContext = function () {
this.props.dispatch(actions.goHome())
}
}
BuyButtonSubview.prototype.radioHandler = function (event) {
switch (event.target.title) {
case 'Coinbase':
return this.props.dispatch(actions.coinBaseSubview())
case 'ShapeShift':
return this.props.dispatch(actions.shapeShiftSubview(this.props.provider.type))
}
}

101
ui/app/components/coinbase-form.js
View File

@ -4,7 +4,6 @@ const inherits = require('util').inherits
const connect = require('react-redux').connect
const actions = require('../actions')
const isValidAddress = require('../util').isValidAddress
module.exports = connect(mapStateToProps)(CoinbaseForm)
function mapStateToProps (state) {
@ -21,72 +20,19 @@ function CoinbaseForm () {
CoinbaseForm.prototype.render = function () {
var props = this.props
var amount = props.buyView.amount
var address = props.buyView.buyAddress
return h('.flex-column', {
style: {
// margin: '10px',
padding: '25px',
width: '100%',
},
}, [
h('.flex-column', {
style: {
alignItems: 'flex-start',
},
}, [
h('.flex-row', [
h('div', 'Address:'),
h('.ellip-address', address),
]),
h('.flex-row', [
h('div', 'Amount: $'),
h('.input-container', [
h('input.buy-inputs', {
style: {
width: '3em',
boxSizing: 'border-box',
},
defaultValue: amount,
onChange: this.handleAmount.bind(this),
}),
h('i.fa.fa-pencil-square-o.edit-text', {
style: {
fontSize: '12px',
color: '#F7861C',
position: 'relative',
bottom: '5px',
right: '11px',
},
}),
]),
]),
]),
h('.info-gray', {
style: {
fontSize: '10px',
fontFamily: 'Montserrat Light',
margin: '15px',
lineHeight: '13px',
},
},
`there is a USD$ 15 a day max and a USD$ 50
dollar limit per the life time of an account without a
coinbase account. A fee of 3.75% will be aplied to debit/credit cards.`),
!props.warning ? h('div', {
style: {
width: '340px',
height: '22px',
},
}) : props.warning && h('span.error.flex-center', props.warning),
h('.flex-row', {
style: {
justifyContent: 'space-around',
margin: '33px',
marginTop: '0px',
},
}, [
h('button', {
@ -106,20 +52,9 @@ CoinbaseForm.prototype.handleAddress = function (event) {
this.props.dispatch(actions.updateBuyAddress(event.target.value))
}
CoinbaseForm.prototype.toCoinbase = function () {
var props = this.props
var amount = props.buyView.amount
var address = props.buyView.buyAddress
var message
if (isValidAddress(address) && isValidAmountforCoinBase(amount).valid) {
props.dispatch(actions.buyEth({ network: '1', address, amount: props.buyView.amount }))
} else if (!isValidAmountforCoinBase(amount).valid) {
message = isValidAmountforCoinBase(amount).message
return props.dispatch(actions.displayWarning(message))
} else {
message = 'Receiving address is invalid.'
return props.dispatch(actions.displayWarning(message))
}
const props = this.props
const address = props.buyView.buyAddress
props.dispatch(actions.buyEth({ network: '1', address, amount: 0 }))
}
CoinbaseForm.prototype.renderLoading = function () {
@ -131,29 +66,3 @@ CoinbaseForm.prototype.renderLoading = function () {
src: 'images/loading.svg',
})
}
function isValidAmountforCoinBase (amount) {
amount = parseFloat(amount)
if (amount) {
if (amount <= 15 && amount > 0) {
return {
valid: true,
}
} else if (amount > 15) {
return {
valid: false,
message: 'The amount can not be greater then $15',
}
} else {
return {
valid: false,
message: 'Can not buy amounts less then $0',
}
}
} else {
return {
valid: false,
message: 'The amount entered is not a number',
}
}
}

49
ui/app/components/custom-radio-list.js
View File

@ -11,12 +11,11 @@ function RadioList () {
RadioList.prototype.render = function () {
const props = this.props
let activeClass = '.custom-radio-selected'
let inactiveClass = '.custom-radio-inactive'
let {
const activeClass = '.custom-radio-selected'
const inactiveClass = '.custom-radio-inactive'
const {
lables,
defaultFocus,
onClick,
} = props
@ -24,37 +23,37 @@ RadioList.prototype.render = function () {
h('.flex-row', {
style: {
fontSize: '12px',
}
},
}, [
h('.flex-column.custom-radios', {
style: {
marginRight: '5px',
}
h('.flex-column.custom-radios', {
style: {
marginRight: '5px',
},
lables.map((lable, i) => {
let isSelcted = (this.state !== null )
isSelcted = isSelcted ? (this.state.selected === lable) : (this.props.defaultFocus === lable)
return h(isSelcted ? activeClass : inactiveClass, {
title: lable,
onClick: (event) => {
this.setState({selected: event.target.title})
props.onClick(event)
}
})
}),
),
h('.text', {},
lables.map((lable) => {
},
lables.map((lable, i) => {
let isSelcted = (this.state !== null)
isSelcted = isSelcted ? (this.state.selected === lable) : (defaultFocus === lable)
return h(isSelcted ? activeClass : inactiveClass, {
title: lable,
onClick: (event) => {
this.setState({selected: event.target.title})
props.onClick(event)
},
})
})
),
h('.text', {},
lables.map((lable) => {
if (props.subtext) {
return h('.flex-row', {}, [
h('.radio-titles', lable),
h('.radio-titles-subtext', `- ${props.subtext[lable]}`)
h('.radio-titles-subtext', `- ${props.subtext[lable]}`),
])
} else {
return h('.radio-titles', lable)
}
})
)
),
])
)
}

24
ui/app/components/shapeshift-form.js
View File

@ -43,14 +43,18 @@ ShapeshiftForm.prototype.renderMain = function () {
style: {
// marginTop: '10px',
padding: '25px',
paddingTop: '5px',
width: '100%',
minHeight: '215px',
alignItems: 'center',
overflowY: 'auto',
},
}, [
h('.flex-row', {
style: {
justifyContent: 'center',
alignItems: 'baseline',
height: '42px',
},
}, [
h('img', {
@ -82,7 +86,6 @@ ShapeshiftForm.prototype.renderMain = function () {
style: {
fontSize: '12px',
color: '#F7861C',
position: 'relative',
bottom: '48px',
left: '106px',
},
@ -92,7 +95,6 @@ ShapeshiftForm.prototype.renderMain = function () {
h('.icon-control', [
h('i.fa.fa-refresh.fa-4.orange', {
style: {
position: 'relative',
bottom: '5px',
left: '5px',
color: '#F7861C',
@ -121,8 +123,6 @@ ShapeshiftForm.prototype.renderMain = function () {
},
}),
]),
this.props.isSubLoading ? this.renderLoading() : null,
h('.flex-column', {
style: {
alignItems: 'flex-start',
@ -138,17 +138,6 @@ ShapeshiftForm.prototype.renderMain = function () {
this.props.warning) : this.renderInfo(),
]),
h('.flex-row', {
style: {
padding: '10px',
paddingBottom: '2px',
width: '100%',
},
}, [
h('div', 'Receiving address:'),
h('.ellip-address', this.props.buyView.buyAddress),
]),
h(this.activeToggle('.input-container'), {
style: {
padding: '10px',
@ -156,6 +145,7 @@ ShapeshiftForm.prototype.renderMain = function () {
width: '100%',
},
}, [
h('div', `${coin} Address:`),
h('input#fromCoinAddress.buy-inputs', {
@ -190,6 +180,8 @@ ShapeshiftForm.prototype.renderMain = function () {
onClick: this.shift.bind(this),
style: {
marginTop: '10px',
position: 'relative',
bottom: '33px',
},
},
'Submit'),
@ -266,8 +258,6 @@ ShapeshiftForm.prototype.renderInfo = function () {
return h('span', {
style: {
marginTop: '10px',
marginBottom: '15px',
},
}, [
h('h3.flex-row.text-transform-uppercase', {

41
ui/app/css/index.css
View File

@ -489,6 +489,47 @@ input.large-input {
}
/* buy eth warning screen */
.custom-radios {
justify-content: space-around;
align-items: center;
}
.custom-radio-selected {
width: 17px;
height: 17px;
border: solid;
border-style: double;
border-radius: 15px;
border-width: 5px;
background: rgba(247, 134, 28, 1);
border-color: #F7F7F7;
}
.custom-radio-inactive {
width: 14px;
height: 14px;
border: solid;
border-width: 1px;
border-radius: 24px;
border-color: #AEAEAE;
}
.radio-titles {
color: rgba(247, 134, 28, 1);
}
.radio-titles-subtext {
}
.selected-exchange {
}
.buy-radio {
}
.eth-warning{
transition: opacity 400ms ease-in, transform 400ms ease-in;

14
ui/app/reducers/app.js
View File

@ -469,8 +469,10 @@ function reduceApp (state, action) {
name: 'buyEth',
context: appState.currentView.name,
},
identity: state.metamask.identities[action.value],
buyAddress: action.value,
buyView: {
subview: 'buyForm',
subview: 'Coinbase',
amount: '15.00',
buyAddress: action.value,
formView: {
@ -483,7 +485,7 @@ function reduceApp (state, action) {
case actions.UPDATE_BUY_ADDRESS:
return extend(appState, {
buyView: {
subview: 'buyForm',
subview: appState.subview,
formView: {
coinbase: appState.buyView.formView.coinbase,
shapeshift: appState.buyView.formView.shapeshift,
@ -496,7 +498,7 @@ function reduceApp (state, action) {
case actions.UPDATE_COINBASE_AMOUNT:
return extend(appState, {
buyView: {
subview: 'buyForm',
subview: 'Coinbase',
formView: {
coinbase: true,
shapeshift: false,
@ -509,7 +511,7 @@ function reduceApp (state, action) {
case actions.COINBASE_SUBVIEW:
return extend(appState, {
buyView: {
subview: 'buyForm',
subview: 'Coinbase',
formView: {
coinbase: true,
shapeshift: false,
@ -522,7 +524,7 @@ function reduceApp (state, action) {
case actions.SHAPESHIFT_SUBVIEW:
return extend(appState, {
buyView: {
subview: 'buyForm',
subview: 'ShapeShift',
formView: {
coinbase: false,
shapeshift: true,
@ -537,7 +539,7 @@ function reduceApp (state, action) {
case actions.PAIR_UPDATE:
return extend(appState, {
buyView: {
subview: 'buyForm',
subview: 'ShapeShift',
formView: {
coinbase: false,
shapeshift: true,