mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-22 18:00:18 +01:00
Split DepositEtherModal into container and component files (#7565)
This commit is contained in:
Whymarrh Whitby
GitHub
parent
926c8848f1
commit
359be03db8
@ -1,213 +0,0 @@
|
||||
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('../../../store/actions')
|
||||
const { getNetworkDisplayName } = require('../../../../../app/scripts/controllers/network/util')
|
||||
|
||||
import Button from '../../ui/button'
|
||||
|
||||
let DIRECT_DEPOSIT_ROW_TITLE
|
||||
let DIRECT_DEPOSIT_ROW_TEXT
|
||||
let WYRE_ROW_TITLE
|
||||
let WYRE_ROW_TEXT
|
||||
let FAUCET_ROW_TITLE
|
||||
let COINSWITCH_ROW_TITLE
|
||||
let COINSWITCH_ROW_TEXT
|
||||
|
||||
function mapStateToProps (state) {
|
||||
return {
|
||||
network: state.metamask.network,
|
||||
address: state.metamask.selectedAddress,
|
||||
}
|
||||
}
|
||||
|
||||
function mapDispatchToProps (dispatch) {
|
||||
return {
|
||||
toWyre: (address) => {
|
||||
dispatch(actions.buyEth({ service: 'wyre', address, amount: 0 }))
|
||||
},
|
||||
toCoinSwitch: (address) => {
|
||||
dispatch(actions.buyEth({ service: 'coinswitch', address }))
|
||||
},
|
||||
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 (_, 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')
|
||||
WYRE_ROW_TITLE = context.t('buyWithWyre')
|
||||
WYRE_ROW_TEXT = context.t('buyWithWyreDescription')
|
||||
FAUCET_ROW_TITLE = context.t('testFaucet')
|
||||
COINSWITCH_ROW_TITLE = context.t('buyCoinSwitch')
|
||||
COINSWITCH_ROW_TEXT = context.t('buyCoinSwitchExplainer')
|
||||
}
|
||||
|
||||
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, {
|
||||
type: 'secondary',
|
||||
className: 'deposit-ether-modal__deposit-button',
|
||||
large: true,
|
||||
onClick: onButtonClick,
|
||||
}, [buttonLabel]),
|
||||
]),
|
||||
|
||||
])
|
||||
}
|
||||
|
||||
DepositEtherModal.prototype.render = function () {
|
||||
const { network, toWyre, toCoinSwitch, address, toFaucet } = this.props
|
||||
|
||||
const isTestNetwork = ['3', '4', '5', '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.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',
|
||||
style: {
|
||||
height: '75px',
|
||||
width: '75px',
|
||||
},
|
||||
}),
|
||||
title: DIRECT_DEPOSIT_ROW_TITLE,
|
||||
text: DIRECT_DEPOSIT_ROW_TEXT,
|
||||
buttonLabel: this.context.t('viewAccount'),
|
||||
onButtonClick: () => this.goToAccountDetailsModal(),
|
||||
}),
|
||||
|
||||
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,
|
||||
}),
|
||||
|
||||
this.renderRow({
|
||||
logo: h('div.deposit-ether-modal__logo', {
|
||||
style: {
|
||||
backgroundImage: 'url(\'./images/wyre.svg\')',
|
||||
height: '40px',
|
||||
},
|
||||
}),
|
||||
title: WYRE_ROW_TITLE,
|
||||
text: WYRE_ROW_TEXT,
|
||||
buttonLabel: this.context.t('continueToWyre'),
|
||||
onButtonClick: () => toWyre(address),
|
||||
hide: isTestNetwork,
|
||||
}),
|
||||
|
||||
this.renderRow({
|
||||
logo: h('div.deposit-ether-modal__logo', {
|
||||
style: {
|
||||
backgroundImage: 'url(\'./images/coinswitch_logo.png\')',
|
||||
height: '40px',
|
||||
},
|
||||
}),
|
||||
title: COINSWITCH_ROW_TITLE,
|
||||
text: COINSWITCH_ROW_TEXT,
|
||||
buttonLabel: this.context.t('continueToCoinSwitch'),
|
||||
onButtonClick: () => toCoinSwitch(address),
|
||||
hide: isTestNetwork,
|
||||
}),
|
||||
|
||||
]),
|
||||
|
||||
]),
|
||||
])
|
||||
}
|
||||
|
||||
DepositEtherModal.prototype.goToAccountDetailsModal = function () {
|
||||
this.props.hideWarning()
|
||||
this.props.hideModal()
|
||||
this.props.showAccountDetailModal()
|
||||
}
|
||||
@ -0,0 +1,167 @@
|
||||
import PropTypes from 'prop-types'
|
||||
import React, {Component} from 'react'
|
||||
import {getNetworkDisplayName} from '../../../../../../app/scripts/controllers/network/util'
|
||||
import Button from '../../../ui/button'
|
||||
|
||||
export default class DepositEtherModal extends Component {
|
||||
static contextTypes = {
|
||||
t: PropTypes.func,
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
network: PropTypes.string.isRequired,
|
||||
toWyre: PropTypes.func.isRequired,
|
||||
toCoinSwitch: PropTypes.func.isRequired,
|
||||
address: PropTypes.string.isRequired,
|
||||
toFaucet: PropTypes.func.isRequired,
|
||||
hideWarning: PropTypes.func.isRequired,
|
||||
hideModal: PropTypes.func.isRequired,
|
||||
showAccountDetailModal: PropTypes.func.isRequired,
|
||||
}
|
||||
|
||||
faucetRowText = (networkName) => {
|
||||
return this.context.t('getEtherFromFaucet', [networkName])
|
||||
}
|
||||
|
||||
goToAccountDetailsModal = () => {
|
||||
this.props.hideWarning()
|
||||
this.props.hideModal()
|
||||
this.props.showAccountDetailModal()
|
||||
}
|
||||
|
||||
renderRow ({
|
||||
logo,
|
||||
title,
|
||||
text,
|
||||
buttonLabel,
|
||||
onButtonClick,
|
||||
hide,
|
||||
className,
|
||||
hideButton,
|
||||
hideTitle,
|
||||
onBackClick,
|
||||
showBackButton,
|
||||
}) {
|
||||
if (hide) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={className || 'deposit-ether-modal__buy-row'}>
|
||||
{onBackClick && showBackButton && (
|
||||
<div className="deposit-ether-modal__buy-row__back" onClick={onBackClick}>
|
||||
<i className="fa fa-arrow-left cursor-pointer" />
|
||||
</div>
|
||||
)}
|
||||
<div className="deposit-ether-modal__buy-row__logo-container">{logo}</div>
|
||||
<div className="deposit-ether-modal__buy-row__description">
|
||||
{!hideTitle && (
|
||||
<div className="deposit-ether-modal__buy-row__description__title">{title}</div>
|
||||
)}
|
||||
<div className="deposit-ether-modal__buy-row__description__text">{text}</div>
|
||||
</div>
|
||||
{!hideButton && (
|
||||
<div className="deposit-ether-modal__buy-row__button">
|
||||
<Button
|
||||
type="secondary"
|
||||
className="deposit-ether-modal__deposit-button"
|
||||
large
|
||||
onClick={onButtonClick}
|
||||
>
|
||||
{buttonLabel}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
render () {
|
||||
const { network, toWyre, toCoinSwitch, address, toFaucet } = this.props
|
||||
|
||||
const isTestNetwork = ['3', '4', '5', '42'].find(n => n === network)
|
||||
const networkName = getNetworkDisplayName(network)
|
||||
|
||||
return (
|
||||
<div
|
||||
className="page-container page-container--full-width page-container--full-height">
|
||||
<div className="page-container__header">
|
||||
<div className="page-container__title">
|
||||
{this.context.t('depositEther')}
|
||||
</div>
|
||||
<div className="page-container__subtitle">
|
||||
{this.context.t('needEtherInWallet')}
|
||||
</div>
|
||||
<div
|
||||
className="page-container__header-close"
|
||||
onClick={() => {
|
||||
this.props.hideWarning()
|
||||
this.props.hideModal()
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="page-container__content">
|
||||
<div className="deposit-ether-modal__buy-rows">
|
||||
{this.renderRow({
|
||||
logo: (
|
||||
<img
|
||||
alt=""
|
||||
className="deposit-ether-modal__logo"
|
||||
src="./images/deposit-eth.svg"
|
||||
style={{
|
||||
height: '75px',
|
||||
width: '75px',
|
||||
}}
|
||||
/>
|
||||
),
|
||||
title: this.context.t('directDepositEther'),
|
||||
text: this.context.t('directDepositEtherExplainer'),
|
||||
buttonLabel: this.context.t('viewAccount'),
|
||||
onButtonClick: () => this.goToAccountDetailsModal(),
|
||||
})}
|
||||
{this.renderRow({
|
||||
logo: <i className="fa fa-tint fa-2x" />,
|
||||
title: this.context.t('testFaucet'),
|
||||
text: this.faucetRowText(networkName),
|
||||
buttonLabel: this.context.t('getEther'),
|
||||
onButtonClick: () => toFaucet(network),
|
||||
hide: !isTestNetwork,
|
||||
})}
|
||||
{this.renderRow({
|
||||
logo: (
|
||||
<div
|
||||
className="deposit-ether-modal__logo"
|
||||
style={{
|
||||
backgroundImage: "url('./images/wyre.svg')",
|
||||
height: '40px',
|
||||
}}
|
||||
/>
|
||||
),
|
||||
title: this.context.t('buyWithWyre'),
|
||||
text: this.context.t('buyWithWyreDescription'),
|
||||
buttonLabel: this.context.t('continueToWyre'),
|
||||
onButtonClick: () => toWyre(address),
|
||||
hide: isTestNetwork,
|
||||
})}
|
||||
{this.renderRow({
|
||||
logo: (
|
||||
<div
|
||||
className="deposit-ether-modal__logo"
|
||||
style={{
|
||||
backgroundImage: "url('./images/coinswitch_logo.png')",
|
||||
height: '40px',
|
||||
}}
|
||||
/>
|
||||
),
|
||||
title: this.context.t('buyCoinSwitch'),
|
||||
text: this.context.t('buyCoinSwitchExplainer'),
|
||||
buttonLabel: this.context.t('continueToCoinSwitch'),
|
||||
onButtonClick: () => toCoinSwitch(address),
|
||||
hide: isTestNetwork,
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,34 @@
|
||||
import { connect } from 'react-redux'
|
||||
import { buyEth, hideModal, showModal, hideWarning } from '../../../../store/actions'
|
||||
import DepositEtherModal from './deposit-ether-modal.component'
|
||||
|
||||
function mapStateToProps (state) {
|
||||
return {
|
||||
network: state.metamask.network,
|
||||
address: state.metamask.selectedAddress,
|
||||
}
|
||||
}
|
||||
|
||||
function mapDispatchToProps (dispatch) {
|
||||
return {
|
||||
toWyre: (address) => {
|
||||
dispatch(buyEth({ service: 'wyre', address, amount: 0 }))
|
||||
},
|
||||
toCoinSwitch: (address) => {
|
||||
dispatch(buyEth({ service: 'coinswitch', address }))
|
||||
},
|
||||
hideModal: () => {
|
||||
dispatch(hideModal())
|
||||
},
|
||||
hideWarning: () => {
|
||||
dispatch(hideWarning())
|
||||
},
|
||||
showAccountDetailModal: () => {
|
||||
dispatch(showModal({ name: 'ACCOUNT_DETAILS' }))
|
||||
},
|
||||
toFaucet: network => dispatch(buyEth({ network })),
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(DepositEtherModal)
|
||||
@ -0,0 +1 @@
|
||||
export { default } from './deposit-ether-modal.container'
|
||||
@ -10,7 +10,7 @@ const { getEnvironmentType } = require('../../../../../app/scripts/lib/util')
|
||||
const { ENVIRONMENT_TYPE_POPUP } = require('../../../../../app/scripts/lib/enums')
|
||||
|
||||
// Modal Components
|
||||
const DepositEtherModal = require('./deposit-ether-modal')
|
||||
import DepositEtherModal from './deposit-ether-modal'
|
||||
import AccountDetailsModal from './account-details-modal'
|
||||
const ExportPrivateKeyModal = require('./export-private-key-modal').default
|
||||
const HideTokenConfirmationModal = require('./hide-token-confirmation-modal')
|
||||
|
||||
Loading…
Reference in New Issue
Block a user