Convert ConfirmTxScreen to an ES6 class (#7790)

Co-authored-by: Mark Stacey <markjstacey@gmail.com>

ui/app/pages/confirm-transaction/conf-tx.js

@@ -1,5 +1,5 @@
+import PropTypes from 'prop-types'
 import React, { Component } from 'react'
-import { inherits } from 'util'
 import { connect } from 'react-redux'
 import { withRouter } from 'react-router-dom'
 import { compose } from 'recompose'
@@ -12,11 +12,6 @@ import SignatureRequestOriginal from '../../components/app/signature-request-ori
 import Loading from '../../components/ui/loading-screen'
 import { DEFAULT_ROUTE } from '../../helpers/constants/routes'
 
-export default compose(
-  withRouter,
-  connect(mapStateToProps)
-)(ConfirmTxScreen)
-
 function mapStateToProps (state) {
   const { metamask } = state
   const {
@@ -45,12 +40,35 @@ function mapStateToProps (state) {
   }
 }
 
-inherits(ConfirmTxScreen, Component)
+class ConfirmTxScreen extends Component {
-function ConfirmTxScreen () {
+  static propTypes = {
-  Component.call(this)
+    unapprovedMsgCount: PropTypes.number,
-}
+    unapprovedPersonalMsgCount: PropTypes.number,
+    unapprovedTypedMessagesCount: PropTypes.number,
+    network: PropTypes.string,
+    index: PropTypes.number,
+    unapprovedTxs: PropTypes.object,
+    unapprovedMsgs: PropTypes.object,
+    unapprovedPersonalMsgs: PropTypes.object,
+    unapprovedTypedMessages: PropTypes.object,
+    match: PropTypes.shape({
+      params: PropTypes.shape({
+        id: PropTypes.number,
+      }),
+    }),
 
-ConfirmTxScreen.prototype.getUnapprovedMessagesTotal = function () {
+    selectedAddressTxList: PropTypes.array,
+    currentCurrency: PropTypes.string,
+    blockGasLimit: PropTypes.string,
+    history: PropTypes.object,
+    identities: PropTypes.object,
+    dispatch: PropTypes.func.isRequired,
+    send: PropTypes.shape({
+      to: PropTypes.string,
+    }).isRequired,
+  }
+
+  getUnapprovedMessagesTotal () {
     const {
       unapprovedMsgCount = 0,
       unapprovedPersonalMsgCount = 0,
@@ -58,9 +76,92 @@ ConfirmTxScreen.prototype.getUnapprovedMessagesTotal = function () {
     } = this.props
 
     return unapprovedTypedMessagesCount + unapprovedMsgCount + unapprovedPersonalMsgCount
-}
+  }
 
-ConfirmTxScreen.prototype.componentDidMount = function () {
+  getTxData () {
+    const {
+      network,
+      index,
+      unapprovedTxs,
+      unapprovedMsgs,
+      unapprovedPersonalMsgs,
+      unapprovedTypedMessages,
+      match: { params: { id: transactionId } = {} },
+    } = this.props
+
+    const unconfTxList = txHelper(
+      unapprovedTxs,
+      unapprovedMsgs,
+      unapprovedPersonalMsgs,
+      unapprovedTypedMessages,
+      network
+    )
+
+    log.info(`rendering a combined ${unconfTxList.length} unconf msgs & txs`)
+
+    return transactionId
+      ? R.find(({ id }) => id + '' === transactionId)(unconfTxList)
+      : unconfTxList[index]
+  }
+
+  signatureSelect (type, version) {
+    // Temporarily direct only v3 and v4 requests to new code.
+    if (type === 'eth_signTypedData' && (version === 'V3' || version === 'V4')) {
+      return SignatureRequest
+    }
+
+    return SignatureRequestOriginal
+  }
+
+  signMessage (msgData, event) {
+    log.info('conf-tx.js: signing message')
+    const params = msgData.msgParams
+    params.metamaskId = msgData.id
+    this.stopPropagation(event)
+    return this.props.dispatch(actions.signMsg(params))
+  }
+
+  stopPropagation (event) {
+    if (event.stopPropagation) {
+      event.stopPropagation()
+    }
+  }
+
+  signPersonalMessage (msgData, event) {
+    log.info('conf-tx.js: signing personal message')
+    const params = msgData.msgParams
+    params.metamaskId = msgData.id
+    this.stopPropagation(event)
+    return this.props.dispatch(actions.signPersonalMsg(params))
+  }
+
+  signTypedMessage (msgData, event) {
+    log.info('conf-tx.js: signing typed message')
+    const params = msgData.msgParams
+    params.metamaskId = msgData.id
+    this.stopPropagation(event)
+    return this.props.dispatch(actions.signTypedMsg(params))
+  }
+
+  cancelMessage (msgData, event) {
+    log.info('canceling message')
+    this.stopPropagation(event)
+    return this.props.dispatch(actions.cancelMsg(msgData))
+  }
+
+  cancelPersonalMessage (msgData, event) {
+    log.info('canceling personal message')
+    this.stopPropagation(event)
+    return this.props.dispatch(actions.cancelPersonalMsg(msgData))
+  }
+
+  cancelTypedMessage (msgData, event) {
+    log.info('canceling typed message')
+    this.stopPropagation(event)
+    return this.props.dispatch(actions.cancelTypedMsg(msgData))
+  }
+
+  componentDidMount () {
     const {
       unapprovedTxs = {},
       network,
@@ -71,9 +172,9 @@ ConfirmTxScreen.prototype.componentDidMount = function () {
     if (unconfTxList.length === 0 && !send.to && this.getUnapprovedMessagesTotal() === 0) {
       this.props.history.push(DEFAULT_ROUTE)
     }
-}
+  }
 
-ConfirmTxScreen.prototype.componentDidUpdate = function (prevProps) {
+  componentDidUpdate (prevProps) {
     const {
       unapprovedTxs = {},
       network,
@@ -108,48 +209,12 @@ ConfirmTxScreen.prototype.componentDidUpdate = function (prevProps) {
     if (unconfTxList.length === 0 && !send.to && this.getUnapprovedMessagesTotal() === 0) {
       this.props.history.push(DEFAULT_ROUTE)
     }
-}
-
-ConfirmTxScreen.prototype.getTxData = function () {
-  const {
-    network,
-    index,
-    unapprovedTxs,
-    unapprovedMsgs,
-    unapprovedPersonalMsgs,
-    unapprovedTypedMessages,
-    match: { params: { id: transactionId } = {} },
-  } = this.props
-
-  const unconfTxList = txHelper(
-    unapprovedTxs,
-    unapprovedMsgs,
-    unapprovedPersonalMsgs,
-    unapprovedTypedMessages,
-    network
-  )
-
-  log.info(`rendering a combined ${unconfTxList.length} unconf msgs & txs`)
-
-  return transactionId
-    ? R.find(({ id }) => id + '' === transactionId)(unconfTxList)
-    : unconfTxList[index]
-}
-
-ConfirmTxScreen.prototype.signatureSelect = function (type, version) {
-  // Temporarily direct only v3 and v4 requests to new code.
-  if (type === 'eth_signTypedData' && (version === 'V3' || version === 'V4')) {
-    return SignatureRequest
   }
 
-  return SignatureRequestOriginal
+  render () {
-}
-
-ConfirmTxScreen.prototype.render = function () {
     const {
       currentCurrency,
       blockGasLimit,
-    conversionRate,
     } = this.props
 
     const txData = this.getTxData() || {}
@@ -167,10 +232,7 @@ ConfirmTxScreen.prototype.render = function () {
       <SigComponent
         txData={txData}
         key={txData.id}
-      selectedAddress={this.props.selectedAddress}
-      accounts={this.props.accounts}
         identities={this.props.identities}
-      conversionRate={conversionRate}
         currentCurrency={currentCurrency}
         blockGasLimit={blockGasLimit}
         signMessage={this.signMessage.bind(this, txData)}
@@ -181,52 +243,10 @@ ConfirmTxScreen.prototype.render = function () {
         cancelTypedMessage={this.cancelTypedMessage.bind(this, txData)}
       />
     )
-}
-
-ConfirmTxScreen.prototype.signMessage = function (msgData, event) {
-  log.info('conf-tx.js: signing message')
-  const params = msgData.msgParams
-  params.metamaskId = msgData.id
-  this.stopPropagation(event)
-  return this.props.dispatch(actions.signMsg(params))
-}
-
-ConfirmTxScreen.prototype.stopPropagation = function (event) {
-  if (event.stopPropagation) {
-    event.stopPropagation()
   }
 }
 
-ConfirmTxScreen.prototype.signPersonalMessage = function (msgData, event) {
+export default compose(
-  log.info('conf-tx.js: signing personal message')
+  withRouter,
-  const params = msgData.msgParams
+  connect(mapStateToProps)
-  params.metamaskId = msgData.id
+)(ConfirmTxScreen)
-  this.stopPropagation(event)
-  return this.props.dispatch(actions.signPersonalMsg(params))
-}
-
-ConfirmTxScreen.prototype.signTypedMessage = function (msgData, event) {
-  log.info('conf-tx.js: signing typed message')
-  const params = msgData.msgParams
-  params.metamaskId = msgData.id
-  this.stopPropagation(event)
-  return this.props.dispatch(actions.signTypedMsg(params))
-}
-
-ConfirmTxScreen.prototype.cancelMessage = function (msgData, event) {
-  log.info('canceling message')
-  this.stopPropagation(event)
-  return this.props.dispatch(actions.cancelMsg(msgData))
-}
-
-ConfirmTxScreen.prototype.cancelPersonalMessage = function (msgData, event) {
-  log.info('canceling personal message')
-  this.stopPropagation(event)
-  return this.props.dispatch(actions.cancelPersonalMsg(msgData))
-}
-
-ConfirmTxScreen.prototype.cancelTypedMessage = function (msgData, event) {
-  log.info('canceling typed message')
-  this.stopPropagation(event)
-  return this.props.dispatch(actions.cancelTypedMsg(msgData))
-}