mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
216 lines
6.1 KiB
JavaScript
216 lines
6.1 KiB
JavaScript
const Component = require('react').Component
|
|
const PropTypes = require('prop-types')
|
|
const h = require('react-hyperscript')
|
|
const inherits = require('util').inherits
|
|
const connect = require('react-redux').connect
|
|
const actions = require('../../actions')
|
|
const { getNetworkDisplayName } = require('../../../../app/scripts/controllers/network/util')
|
|
const ShapeshiftForm = require('../shapeshift-form')
|
|
|
|
let DIRECT_DEPOSIT_ROW_TITLE
|
|
let DIRECT_DEPOSIT_ROW_TEXT
|
|
let COINBASE_ROW_TITLE
|
|
let COINBASE_ROW_TEXT
|
|
let SHAPESHIFT_ROW_TITLE
|
|
let SHAPESHIFT_ROW_TEXT
|
|
let FAUCET_ROW_TITLE
|
|
|
|
function mapStateToProps (state) {
|
|
return {
|
|
network: state.metamask.network,
|
|
address: state.metamask.selectedAddress,
|
|
}
|
|
}
|
|
|
|
function mapDispatchToProps (dispatch) {
|
|
return {
|
|
toCoinbase: (address) => {
|
|
dispatch(actions.buyEth({ network: '1', address, amount: 0 }))
|
|
},
|
|
hideModal: () => {
|
|
dispatch(actions.hideModal())
|
|
},
|
|
hideWarning: () => {
|
|
dispatch(actions.hideWarning())
|
|
},
|
|
showAccountDetailModal: () => {
|
|
dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' }))
|
|
},
|
|
toFaucet: network => dispatch(actions.buyEth({ network })),
|
|
}
|
|
}
|
|
|
|
inherits(DepositEtherModal, Component)
|
|
function DepositEtherModal (props, context) {
|
|
Component.call(this)
|
|
|
|
// need to set after i18n locale has loaded
|
|
DIRECT_DEPOSIT_ROW_TITLE = context.t('directDepositEther')
|
|
DIRECT_DEPOSIT_ROW_TEXT = context.t('directDepositEtherExplainer')
|
|
COINBASE_ROW_TITLE = context.t('buyCoinbase')
|
|
COINBASE_ROW_TEXT = context.t('buyCoinbaseExplainer')
|
|
SHAPESHIFT_ROW_TITLE = context.t('depositShapeShift')
|
|
SHAPESHIFT_ROW_TEXT = context.t('depositShapeShiftExplainer')
|
|
FAUCET_ROW_TITLE = context.t('testFaucet')
|
|
|
|
this.state = {
|
|
buyingWithShapeshift: false,
|
|
}
|
|
}
|
|
|
|
DepositEtherModal.contextTypes = {
|
|
t: PropTypes.func,
|
|
}
|
|
|
|
module.exports = connect(mapStateToProps, mapDispatchToProps)(DepositEtherModal)
|
|
|
|
|
|
DepositEtherModal.prototype.facuetRowText = function (networkName) {
|
|
return this.context.t('getEtherFromFaucet', [networkName])
|
|
}
|
|
|
|
DepositEtherModal.prototype.renderRow = function ({
|
|
logo,
|
|
title,
|
|
text,
|
|
buttonLabel,
|
|
onButtonClick,
|
|
hide,
|
|
className,
|
|
hideButton,
|
|
hideTitle,
|
|
onBackClick,
|
|
showBackButton,
|
|
}) {
|
|
if (hide) {
|
|
return null
|
|
}
|
|
|
|
return h('div', {
|
|
className: className || 'deposit-ether-modal__buy-row',
|
|
}, [
|
|
|
|
onBackClick && showBackButton && h('div.deposit-ether-modal__buy-row__back', {
|
|
onClick: onBackClick,
|
|
}, [
|
|
|
|
h('i.fa.fa-arrow-left.cursor-pointer'),
|
|
|
|
]),
|
|
|
|
h('div.deposit-ether-modal__buy-row__logo-container', [logo]),
|
|
|
|
h('div.deposit-ether-modal__buy-row__description', [
|
|
|
|
!hideTitle && h('div.deposit-ether-modal__buy-row__description__title', [title]),
|
|
|
|
h('div.deposit-ether-modal__buy-row__description__text', [text]),
|
|
|
|
]),
|
|
|
|
!hideButton && h('div.deposit-ether-modal__buy-row__button', [
|
|
h('button.btn-primary.btn--large.deposit-ether-modal__deposit-button', {
|
|
onClick: onButtonClick,
|
|
}, [buttonLabel]),
|
|
]),
|
|
|
|
])
|
|
}
|
|
|
|
DepositEtherModal.prototype.render = function () {
|
|
const { network, toCoinbase, address, toFaucet } = this.props
|
|
const { buyingWithShapeshift } = this.state
|
|
|
|
const isTestNetwork = ['3', '4', '42'].find(n => n === network)
|
|
const networkName = getNetworkDisplayName(network)
|
|
|
|
return h('div.page-container.page-container--full-width.page-container--full-height', {}, [
|
|
|
|
h('div.page-container__header', [
|
|
|
|
h('div.page-container__title', [this.context.t('depositEther')]),
|
|
|
|
h('div.page-container__subtitle', [
|
|
this.context.t('needEtherInWallet'),
|
|
]),
|
|
|
|
h('div.page-container__header-close', {
|
|
onClick: () => {
|
|
this.setState({ buyingWithShapeshift: false })
|
|
this.props.hideWarning()
|
|
this.props.hideModal()
|
|
},
|
|
}),
|
|
|
|
]),
|
|
|
|
h('.page-container__content', {}, [
|
|
|
|
h('div.deposit-ether-modal__buy-rows', [
|
|
|
|
this.renderRow({
|
|
logo: h('img.deposit-ether-modal__logo', {
|
|
src: './images/deposit-eth.svg',
|
|
}),
|
|
title: DIRECT_DEPOSIT_ROW_TITLE,
|
|
text: DIRECT_DEPOSIT_ROW_TEXT,
|
|
buttonLabel: this.context.t('viewAccount'),
|
|
onButtonClick: () => this.goToAccountDetailsModal(),
|
|
hide: buyingWithShapeshift,
|
|
}),
|
|
|
|
this.renderRow({
|
|
logo: h('i.fa.fa-tint.fa-2x'),
|
|
title: FAUCET_ROW_TITLE,
|
|
text: this.facuetRowText(networkName),
|
|
buttonLabel: this.context.t('getEther'),
|
|
onButtonClick: () => toFaucet(network),
|
|
hide: !isTestNetwork || buyingWithShapeshift,
|
|
}),
|
|
|
|
this.renderRow({
|
|
logo: h('div.deposit-ether-modal__logo', {
|
|
style: {
|
|
backgroundImage: 'url(\'./images/coinbase logo.png\')',
|
|
height: '40px',
|
|
},
|
|
}),
|
|
title: COINBASE_ROW_TITLE,
|
|
text: COINBASE_ROW_TEXT,
|
|
buttonLabel: this.context.t('continueToCoinbase'),
|
|
onButtonClick: () => toCoinbase(address),
|
|
hide: isTestNetwork || buyingWithShapeshift,
|
|
}),
|
|
|
|
this.renderRow({
|
|
logo: h('div.deposit-ether-modal__logo', {
|
|
style: {
|
|
backgroundImage: 'url(\'./images/shapeshift logo.png\')',
|
|
},
|
|
}),
|
|
title: SHAPESHIFT_ROW_TITLE,
|
|
text: SHAPESHIFT_ROW_TEXT,
|
|
buttonLabel: this.context.t('shapeshiftBuy'),
|
|
onButtonClick: () => this.setState({ buyingWithShapeshift: true }),
|
|
hide: isTestNetwork,
|
|
hideButton: buyingWithShapeshift,
|
|
hideTitle: buyingWithShapeshift,
|
|
onBackClick: () => this.setState({ buyingWithShapeshift: false }),
|
|
showBackButton: this.state.buyingWithShapeshift,
|
|
className: buyingWithShapeshift && 'deposit-ether-modal__buy-row__shapeshift-buy',
|
|
}),
|
|
|
|
buyingWithShapeshift && h(ShapeshiftForm),
|
|
|
|
]),
|
|
|
|
]),
|
|
])
|
|
}
|
|
|
|
DepositEtherModal.prototype.goToAccountDetailsModal = function () {
|
|
this.props.hideWarning()
|
|
this.props.hideModal()
|
|
this.props.showAccountDetailModal()
|
|
}
|