Convert Modal component to ES6 class (#7783)

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

@@ -1,6 +1,6 @@
+import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 
-import { inherits } from 'util'
 import { connect } from 'react-redux'
 import * as actions from '../../../store/actions'
 import { resetCustomData as resetCustomGasData } from '../../../ducks/gas/gas.duck'
@@ -464,15 +464,31 @@ function mapDispatchToProps (dispatch) {
   }
 }
 
-// Global Modal Component
-inherits(Modal, Component)
-function Modal () {
-  Component.call(this)
-}
+class Modal extends Component {
+  static propTypes = {
+    active: PropTypes.bool.isRequired,
+    hideModal: PropTypes.func.isRequired,
+    hideWarning: PropTypes.func.isRequired,
+    modalState: PropTypes.object.isRequired,
+  }
 
-export default connect(mapStateToProps, mapDispatchToProps)(Modal)
+  hide () {
+    this.modalRef.hide()
+  }
+
+  show () {
+    this.modalRef.show()
+  }
+
+  UNSAFE_componentWillReceiveProps (nextProps, _) {
+    if (nextProps.active) {
+      this.show()
+    } else if (this.props.active) {
+      this.hide()
+    }
+  }
 
-Modal.prototype.render = function () {
+  render () {
     const modal = MODALS[this.props.modalState.name || 'DEFAULT']
     const { contents: children, disableBackdropClick = false } = modal
     const modalStyle = modal[isMobileView() ? 'mobileModalStyle' : 'laptopModalStyle']
@@ -483,9 +499,11 @@ Modal.prototype.render = function () {
         keyboard={false}
         onHide={() => {
           if (modal.onHide) {
-          modal.onHide(this.props)
+            modal.onHide({
+              hideWarning: this.props.hideWarning,
+            })
           }
-        this.onHide(modal.customOnHideOpts)
+          this.props.hideModal(modal.customOnHideOpts)
         }}
         ref={(ref) => {
           this.modalRef = ref
@@ -498,27 +516,7 @@ Modal.prototype.render = function () {
         {children}
       </FadeModal>
     )
-}
-
-Modal.prototype.UNSAFE_componentWillReceiveProps = function (nextProps) {
-  if (nextProps.active) {
-    this.show()
-  } else if (this.props.active) {
-    this.hide()
   }
 }
 
-Modal.prototype.onHide = function (customOnHideOpts) {
-  if (this.props.onHideCallback) {
-    this.props.onHideCallback()
-  }
-  this.props.hideModal(customOnHideOpts)
-}
-
-Modal.prototype.hide = function () {
-  this.modalRef.hide()
-}
-
-Modal.prototype.show = function () {
-  this.modalRef.show()
-}
+export default connect(mapStateToProps, mapDispatchToProps)(Modal)