Split DepositEtherModal into container and component files (#7565)

ui/app/components/app/modals/deposit-ether-modal.js

@@ -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()
-}

ui/app/components/app/modals/deposit-ether-modal/deposit-ether-modal.component.js

@@ -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>
+    )
+  }
+}

ui/app/components/app/modals/deposit-ether-modal/deposit-ether-modal.container.js

@@ -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)

ui/app/components/app/modals/deposit-ether-modal/index.js

@@ -0,0 +1 @@
+export { default } from './deposit-ether-modal.container'

ui/app/components/app/modals/modal.js

@@ -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')