React 16 upgrade (#7476)

* Use arrow property initializer functions

* Use pure components where applicable

* Add UNSAFE_ prefix for deprecated lifecycle hooks

* Add allow UNSAFE_

* Removed unused "Component"

* Replace boron with 'fade-modal'

* Upgrade react/no-deprecated to an error

* Paste react-tooltip-component source directly

* Use arrow functions to bind `this`

* Add UNSAFE_ prefix

* Update react-redux, react-router-dom

* Remove things from inlined 'fade-modal'

* Adjust mountWithRouter to get unit tests passing again

* Remove domkit

* Add Wrapper to render-helpers

* Upgrade @storybook/addon-knobs

.eslintrc

@@ -51,7 +51,7 @@
     "arrow-spacing": [2, { "before": true, "after": true }],
     "block-spacing": [2, "always"],
     "brace-style": 2,
-    "camelcase": [2, { "properties": "never" }],
+    "camelcase": [2, { "properties": "never", "allow": ["^UNSAFE_"] }],
     "comma-dangle": [2, "always-multiline"],
     "comma-spacing": [2, { "before": false, "after": true }],
     "comma-style": [2, "last"],
@@ -157,7 +157,7 @@
     "react/jsx-boolean-value": 2,
     "react/jsx-curly-brace-presence": [2, { "props": "never", "children": "never" }],
     "react/jsx-equals-spacing": 2,
-    "react/no-deprecated": 0,
+    "react/no-deprecated": 2,
     "react/default-props-match-prop-types": 2,
     "react/jsx-closing-tag-location": 2,
     "react/jsx-no-duplicate-props": 2,

package.json

@@ -71,7 +71,6 @@
     "bip39": "^2.2.0",
     "bluebird": "^3.5.0",
     "bn.js": "^4.11.7",
-    "boron": "^0.2.3",
     "browser-passworder": "^2.0.3",
     "browserify-derequire": "^0.9.4",
     "browserify-unibabel": "^3.0.0",
@@ -150,16 +149,16 @@
     "punycode": "^2.1.1",
     "qrcode-generator": "1.4.1",
     "ramda": "^0.24.1",
-    "react": "^15.6.2",
+    "react": "^16.12.0",
     "react-dnd": "^3.0.2",
     "react-dnd-html5-backend": "^7.4.4",
-    "react-dom": "^15.6.2",
+    "react-dom": "^16.12.0",
     "react-hyperscript": "^3.0.0",
     "react-idle-timer": "^4.2.5",
     "react-inspector": "^2.3.0",
     "react-media": "^1.8.0",
-    "react-redux": "^5.0.5",
-    "react-router-dom": "^4.2.2",
+    "react-redux": "^7.1.3",
+    "react-router-dom": "^5.1.2",
     "react-select": "^1.0.0",
     "react-simple-file-input": "^2.0.0",
     "react-tippy": "^1.2.2",
@@ -167,7 +166,6 @@
     "react-tooltip-component": "^0.3.0",
     "react-transition-group": "^1.2.1",
     "react-trigger-change": "^1.0.2",
-    "reactify": "^1.1.1",
     "readable-stream": "^2.3.3",
     "recompose": "^0.25.0",
     "redux": "^3.0.5",
@@ -201,7 +199,7 @@
     "@sentry/cli": "^1.30.3",
     "@storybook/addon-actions": "^5.2.6",
     "@storybook/addon-info": "^5.1.1",
-    "@storybook/addon-knobs": "^3.4.2",
+    "@storybook/addon-knobs": "^5.1.1",
     "@storybook/react": "^5.1.1",
     "addons-linter": "1.14.0",
     "babel-eslint": "^10.0.2",
@@ -219,8 +217,8 @@
     "del": "^3.0.0",
     "deps-dump": "^1.1.0",
     "envify": "^4.0.0",
-    "enzyme": "^3.4.4",
-    "enzyme-adapter-react-15": "^1.0.6",
+    "enzyme": "^3.10.0",
+    "enzyme-adapter-react-16": "^1.15.1",
     "eslint": "^6.0.1",
     "eslint-plugin-chai": "0.0.1",
     "eslint-plugin-import": "^2.18.2",
@@ -278,8 +276,8 @@
     "qs": "^6.2.0",
     "qunitjs": "^2.4.1",
     "radgrad-jsdoc-template": "^1.1.3",
-    "react-devtools": "^3.6.1",
-    "react-test-renderer": "^15.6.2",
+    "react-devtools": "^4.2.1",
+    "react-test-renderer": "^16.12.0",
     "read-installed": "^4.0.3",
     "redux-mock-store": "^1.5.3",
     "redux-test-utils": "^0.2.2",

test/helper.js

@@ -1,7 +1,7 @@
 const Ganache = require('ganache-core')
 const nock = require('nock')
 import Enzyme from 'enzyme'
-import Adapter from 'enzyme-adapter-react-15'
+import Adapter from 'enzyme-adapter-react-16'
 
 nock.disableNetConnect()
 nock.enableNetConnect('localhost')

test/lib/render-helpers.js

@@ -1,4 +1,5 @@
 const { shallow, mount } = require('enzyme')
+import React from 'react'
 import { BrowserRouter } from 'react-router-dom'
 import { shape } from 'prop-types'
 
@@ -38,5 +39,11 @@ function mountWithRouter (node) {
     childContextTypes: { router: shape({}), t: () => {} },
   })
 
-  return mount(node, createContext())
+  const Wrapper = () => (
+    <BrowserRouter>
+      {node}
+    </BrowserRouter>
+  )
+
+  return mount(<Wrapper />, createContext())
 }

ui/app/components/app/customize-gas-modal/index.js

@@ -117,7 +117,7 @@ CustomizeGasModal.contextTypes = {
 
 module.exports = connect(mapStateToProps, mapDispatchToProps)(CustomizeGasModal)
 
-CustomizeGasModal.prototype.componentWillReceiveProps = function (nextProps) {
+CustomizeGasModal.prototype.UNSAFE_componentWillReceiveProps = function (nextProps) {
   const currentState = getFreshState(this.props)
   const {
     gasPrice: currentGasPrice,

ui/app/components/app/menu-droppo.js

@@ -12,21 +12,21 @@ function MenuDroppoComponent () {
 }
 
 MenuDroppoComponent.prototype.render = function () {
-  const { containerClassName = '' } = this.props
+  const { containerClassName = '', style } = this.props
   const speed = this.props.speed || '300ms'
   const useCssTransition = this.props.useCssTransition
   const zIndex = ('zIndex' in this.props) ? this.props.zIndex : 0
 
   this.manageListeners()
 
-  const style = this.props.style || {}
-  if (!('position' in style)) {
-    style.position = 'fixed'
-  }
-  style.zIndex = zIndex
+  const baseStyle = Object.assign(
+    { position: 'fixed' },
+    style,
+    { zIndex },
+  )
 
   return (
-    <div style={style} className={`menu-droppo-container ${containerClassName}`}>
+    <div style={baseStyle} className={`menu-droppo-container ${containerClassName}`}>
       <style>{`
           .menu-droppo-enter {
             transition: transform ${speed} ease-in-out;

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

@@ -0,0 +1,289 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+let index = 0
+let extraSheet
+
+const insertRule = css => {
+
+  if (!extraSheet) {
+    // First time, create an extra stylesheet for adding rules
+    extraSheet = document.createElement('style')
+    document.getElementsByTagName('head')[0].appendChild(extraSheet)
+    // Keep reference to actual StyleSheet object (`styleSheet` for IE < 9)
+    extraSheet = extraSheet.sheet || extraSheet.styleSheet
+  }
+
+  const index = (extraSheet.cssRules || extraSheet.rules).length
+  extraSheet.insertRule(css, index)
+
+  return extraSheet
+}
+
+const insertKeyframesRule = keyframes => {
+  // random name
+  const name = 'anim_' + (++index) + (+new Date())
+  let css = '@' + 'keyframes ' + name + ' {'
+
+  for (const key in keyframes) {
+    css += key + ' {'
+
+    for (const property in keyframes[key]) {
+      const part = ':' + keyframes[key][property] + ';'
+      css += property + part
+    }
+
+    css += '}'
+  }
+
+  css += '}'
+
+  insertRule(css)
+
+  return name
+}
+
+const animation = {
+  show: {
+    animationDuration: '0.3s',
+    animationTimingFunction: 'ease-out',
+  },
+  hide: {
+    animationDuration: '0.3s',
+    animationTimingFunction: 'ease-out',
+  },
+  showContentAnimation: insertKeyframesRule({
+    '0%': {
+      opacity: 0,
+    },
+    '100%': {
+      opacity: 1,
+    },
+  }),
+  hideContentAnimation: insertKeyframesRule({
+    '0%': {
+      opacity: 1,
+    },
+    '100%': {
+      opacity: 0,
+    },
+  }),
+  showBackdropAnimation: insertKeyframesRule({
+    '0%': {
+      opacity: 0,
+    },
+    '100%': {
+      opacity: 0.9,
+    },
+  }),
+  hideBackdropAnimation: insertKeyframesRule({
+    '0%': {
+      opacity: 0.9,
+    },
+    '100%': {
+      opacity: 0,
+    },
+  }),
+}
+
+const endEvents = ['transitionend', 'animationend']
+
+function addEventListener (node, eventName, eventListener) {
+  node.addEventListener(eventName, eventListener, false)
+}
+
+function removeEventListener (node, eventName, eventListener) {
+  node.removeEventListener(eventName, eventListener, false)
+}
+
+const removeEndEventListener = (node, eventListener) => {
+  if (endEvents.length === 0) {
+    return
+  }
+  endEvents.forEach(function (endEvent) {
+    removeEventListener(node, endEvent, eventListener)
+  })
+}
+
+const addEndEventListener = (node, eventListener) => {
+  if (endEvents.length === 0) {
+    // If CSS transitions are not supported, trigger an "end animation"
+    // event immediately.
+    window.setTimeout(eventListener, 0)
+    return
+  }
+  endEvents.forEach(function (endEvent) {
+    addEventListener(node, endEvent, eventListener)
+  })
+}
+
+class FadeModal extends Component {
+  content = null
+
+  static propTypes = {
+    backdrop: PropTypes.bool,
+    backdropStyle: PropTypes.object,
+    closeOnClick: PropTypes.bool,
+    contentStyle: PropTypes.object,
+    keyboard: PropTypes.bool,
+    modalStyle: PropTypes.object,
+    onShow: PropTypes.func,
+    onHide: PropTypes.func,
+    children: PropTypes.oneOfType([
+      PropTypes.arrayOf(PropTypes.node),
+      PropTypes.node,
+    ]),
+  }
+
+  static defaultProps = {
+    onShow: function () {},
+    onHide: function () {},
+    keyboard: true,
+    backdrop: true,
+    closeOnClick: true,
+    modalStyle: {},
+    backdropStyle: {},
+    contentStyle: {},
+    children: [],
+  }
+
+  state = {
+    willHide: true,
+    hidden: true,
+  }
+
+  addTransitionListener = (node, handle) => {
+    if (node) {
+      const endListener = function (e) {
+        if (e && e.target !== node) {
+          return
+        }
+        removeEndEventListener(node, endListener)
+        handle()
+      }
+      addEndEventListener(node, endListener)
+    }
+  }
+
+  handleBackdropClick = () => {
+    if (this.props.closeOnClick) {
+      this.hide()
+    }
+  }
+
+  hasHidden = () => {
+    return this.state.hidden
+  }
+
+  render () {
+    if (this.state.hidden) {
+      return null
+    }
+
+    const { willHide } = this.state
+    const { modalStyle } = this.props
+    const backdropStyle = Object.assign({}, {
+      animationName: willHide ? animation.hideBackdropAnimation : animation.showBackdropAnimation,
+      animationTimingFunction: (willHide ? animation.hide : animation.show).animationTimingFunction,
+    }, this.props.backdropStyle)
+    const contentStyle = Object.assign({}, {
+      animationDuration: (willHide ? animation.hide : animation.show).animationDuration,
+      animationName: willHide ? animation.hideContentAnimation : animation.showContentAnimation,
+      animationTimingFunction: (willHide ? animation.hide : animation.show).animationTimingFunction,
+    }, this.props.contentStyle)
+
+    const backdrop = this.props.backdrop
+      ? (
+        <div
+          className="backdrop"
+          style={backdropStyle}
+          onClick={this.props.closeOnClick
+            ? this.handleBackdropClick
+            : null}
+        />
+      ) : undefined
+
+    if (willHide) {
+      this.addTransitionListener(this.content, this.leave)
+    }
+
+    return (
+      <span>
+        <div className="modal" style={modalStyle}>
+          <div
+            className="content"
+            ref={el => (this.content = el)}
+            tabIndex="-1"
+            style={contentStyle}
+          >
+            {this.props.children}
+          </div>
+        </div>
+        {backdrop}
+      </span>
+    )
+
+  }
+
+  leave = () => {
+    this.setState({
+      hidden: true,
+    })
+    this.props.onHide(this.state.hideSource)
+  }
+
+  enter = () => {
+    this.props.onShow()
+  }
+
+  show = () => {
+    if (!this.state.hidden) {
+      return
+    }
+
+    this.setState({
+      willHide: false,
+      hidden: false,
+    })
+
+    setTimeout(function () {
+      this.addTransitionListener(this.content, this.enter)
+    }.bind(this), 0)
+  }
+
+  hide = () => {
+    if (this.hasHidden()) {
+      return
+    }
+
+    this.setState({
+      willHide: true,
+    })
+  }
+
+  listenKeyboard = (event) => {
+    if (typeof this.props.keyboard === 'function') {
+      this.props.keyboard(event)
+    } else {
+      this.closeOnEsc(event)
+    }
+  }
+
+  closeOnEsc = (event) => {
+    if (this.props.keyboard &&
+      (event.key === 'Escape' ||
+        event.keyCode === 27)) {
+      this.hide()
+    }
+  }
+
+  UNSAFE_componentDidMount = () => {
+    window.addEventListener('keydown', this.listenKeyboard, true)
+  }
+
+  UNSAFE_componentWillUnmount = () => {
+    window.removeEventListener('keydown', this.listenKeyboard, true)
+  }
+}
+
+export default FadeModal

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

@@ -2,7 +2,6 @@ import React, { Component } from 'react'
 
 const inherits = require('util').inherits
 const connect = require('react-redux').connect
-const FadeModal = require('boron').FadeModal
 const actions = require('../../../store/actions')
 const { resetCustomData: resetCustomGasData } = require('../../../ducks/gas/gas.duck')
 const isMobileView = require('../../../../lib/is-mobile-view')
@@ -22,6 +21,7 @@ import ConfirmResetAccount from './confirm-reset-account'
 import TransactionConfirmed from './transaction-confirmed'
 import CancelTransaction from './cancel-transaction'
 
+import FadeModal from './fade-modal'
 import MetaMetricsOptInModal from './metametrics-opt-in-modal'
 import RejectTransactions from './reject-transactions'
 import ConfirmCustomizeGasModal from '../gas-customization/gas-modal-page-container'
@@ -480,7 +480,6 @@ Modal.prototype.render = function () {
 
   return (
     <FadeModal
-      className="modal"
       keyboard={false}
       onHide={() => {
         if (modal.onHide) {
@@ -501,7 +500,7 @@ Modal.prototype.render = function () {
   )
 }
 
-Modal.prototype.componentWillReceiveProps = function (nextProps) {
+Modal.prototype.UNSAFE_componentWillReceiveProps = function (nextProps) {
   if (nextProps.active) {
     this.show()
   } else if (this.props.active) {

ui/app/components/app/permission-page-container/permission-page-container-header/permission-page-container-header.component.js

@@ -1,12 +1,12 @@
-import React, { PureComponent } from 'react'
+import React from 'react'
 import NetworkDisplay from '../../network-display'
 
-export default class PermissionPageContainerHeader extends PureComponent {
-  render () {
-    return (
-      <div className="permission-approval-container__header">
-        <NetworkDisplay colored={false} />
-      </div>
-    )
-  }
+const ProviderPageContainerHeader = () => {
+  return (
+    <div className="provider-approval-container__header">
+      <NetworkDisplay colored={false} />
+    </div>
+  )
 }
+
+export default ProviderPageContainerHeader

ui/app/components/app/tab-bar.js

@@ -1,31 +1,29 @@
-import React, { Component } from 'react'
+import React from 'react'
 const PropTypes = require('prop-types')
 const classnames = require('classnames')
 
-class TabBar extends Component {
-  render () {
-    const { tabs = [], onSelect, isActive } = this.props
+const TabBar = props => {
+  const { tabs = [], onSelect, isActive } = props
 
-    return (
-      <div className="tab-bar">
-        {tabs.map(({ key, content, description }) => (
-          <div
-            key={key}
-            className={classnames('tab-bar__tab pointer', {
-              'tab-bar__tab--active': isActive(key, content),
-            })}
-            onClick={() => onSelect(key)}
-          >
-            <div className="tab-bar__tab__content">
-              <div className="tab-bar__tab__content__title">{content}</div>
-              <div className="tab-bar__tab__content__description">{description}</div>
-            </div>
-            <div className="tab-bar__tab__caret" />
+  return (
+    <div className="tab-bar">
+      {tabs.map(({ key, content, description }) => (
+        <div
+          key={key}
+          className={classnames('tab-bar__tab pointer', {
+            'tab-bar__tab--active': isActive(key, content),
+          })}
+          onClick={() => onSelect(key)}
+        >
+          <div className="tab-bar__tab__content">
+            <div className="tab-bar__tab__content__title">{content}</div>
+            <div className="tab-bar__tab__content__description">{description}</div>
           </div>
-        ))}
-      </div>
-    )
-  }
+          <div className="tab-bar__tab__caret" />
+        </div>
+      ))}
+    </div>
+  )
 }
 
 TabBar.propTypes = {

ui/app/components/ui/alert/index.js

@@ -9,7 +9,7 @@ class Alert extends Component {
     className: '',
   }
 
-  componentWillReceiveProps (nextProps) {
+  UNSAFE_componentWillReceiveProps (nextProps) {
     if (!this.props.visible && nextProps.visible) {
       this.animateIn(nextProps)
     } else if (this.props.visible && !nextProps.visible) {

ui/app/components/ui/tooltip.js

@@ -1,6 +1,171 @@
 import PropTypes from 'prop-types'
-import React from 'react'
-import ReactTooltip from 'react-tooltip-component'
+import React, { Component } from 'react'
+import ReactDOM from 'react-dom'
+
+class ReactTooltip extends Component {
+  static propTypes = {
+    container: PropTypes.any,
+    children: PropTypes.node.isRequired,
+    title: PropTypes.string.isRequired,
+    position: PropTypes.oneOf(['left', 'top', 'right', 'bottom']),
+    fixed: PropTypes.bool,
+    space: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  };
+
+  static defaultProps = {
+    container: document.body,
+    position: 'top',
+    fixed: true,
+    space: 5,
+  };
+
+  componentDidMount = () => {
+    this.container = this.props.container || document.body
+    /* eslint-disable react/no-find-dom-node */
+    this.componentEl = ReactDOM.findDOMNode(this)
+    this.tooltipEl = document.createElement('div')
+
+    const tooltipArrowEl = document.createElement('div')
+    tooltipArrowEl.className = 'tooltip-arrow'
+
+    const tooltipContentEl = document.createElement('div')
+    tooltipContentEl.className = 'tooltip-inner'
+    tooltipContentEl.textContent = this.props.title
+
+    this.tooltipEl.appendChild(tooltipArrowEl)
+    this.tooltipEl.appendChild(tooltipContentEl)
+    this.tooltipEl.className = 'tooltip ' + this.props.position
+    this.container.appendChild(this.tooltipEl)
+    this.resetTooltip()
+
+    this.componentEl.addEventListener(this.props.fixed ? 'mouseenter' : 'mousemove', this.handleMouseMove)
+    this.componentEl.addEventListener('mouseleave', this.handleMouseOut)
+  };
+
+  componentDidUpdate = () => {
+    this.tooltipEl.className = 'tooltip ' + this.props.position
+    this.tooltipEl.childNodes[1].textContent = this.props.title
+  };
+
+
+  componentWillUnmount = () => {
+    this.componentEl.removeEventListener(this.props.fixed ? 'mouseenter' : 'mousemove', this.handleMouseMove)
+    this.componentEl.removeEventListener('mouseleave', this.handleMouseOut)
+    this.container.removeChild(this.tooltipEl)
+  };
+
+  resetTooltip = () => {
+    this.tooltipEl.style.transition = 'opacity 0.4s'
+    this.tooltipEl.style.left = '-500px'
+    this.tooltipEl.style.top = '-500px'
+    this.tooltipEl.style.opacity = 0
+  };
+
+  handleMouseMove = (e) => {
+    if (this.props.title === '') {
+      return
+    }
+
+    const tooltipPosition = this.getTooltipPosition(e)
+    const tooltipOffset = this.getTooltipOffset()
+
+    this.tooltipEl.style.left = tooltipPosition.x + tooltipOffset.x + 'px'
+    this.tooltipEl.style.top = tooltipPosition.y + tooltipOffset.y + 'px'
+    this.tooltipEl.style.opacity = 1
+  };
+
+  handleMouseOut = () => {
+    this.resetTooltip()
+  };
+
+  getTooltipPosition = (e) => {
+    let pointX
+    let pointY
+    const bodyRect = document.body.getBoundingClientRect()
+    const containerRect = this.container.getBoundingClientRect()
+    const containerOffsetX = containerRect.left - bodyRect.left
+    const containerOffsetY = containerRect.top - bodyRect.top
+    if (this.props.fixed) {
+      const componentRect = this.componentEl.getBoundingClientRect()
+      const componentOffsetX = componentRect.left - containerOffsetX
+      const componentOffsetY = componentRect.top - containerOffsetY
+      const componentWidth = this.componentEl.offsetWidth
+      const componentHeight = this.componentEl.offsetHeight
+      let cOffsetX = 0
+      let cOffsetY = 0
+      switch (this.props.position) {
+        case 'top':
+          cOffsetX = componentWidth / 2
+          cOffsetY = 0
+          break
+        case 'right':
+          cOffsetX = componentWidth
+          cOffsetY = componentHeight / 2
+          break
+        case 'bottom':
+          cOffsetX = componentWidth / 2
+          cOffsetY = componentHeight
+          break
+        case 'left':
+          cOffsetX = 0
+          cOffsetY = componentHeight / 2
+          break
+        default:
+          cOffsetX = componentWidth / 2
+          cOffsetY = 0
+          break
+      }
+      pointX = componentOffsetX + cOffsetX + (window.scrollX || window.pageXOffset)
+      pointY = componentOffsetY + cOffsetY + (window.scrollY || window.pageYOffset)
+    } else {
+      const clientX = e.clientX
+      const clientY = e.clientY
+      pointX = clientX - containerOffsetX + (window.scrollX || window.pageXOffset)
+      pointY = clientY - containerOffsetY + (window.scrollY || window.pageYOffset)
+    }
+    return {
+      x: pointX,
+      y: pointY,
+    }
+  };
+
+  getTooltipOffset = () => {
+    const tooltipW = this.tooltipEl.offsetWidth
+    const tooltipH = this.tooltipEl.offsetHeight
+    let offsetX = 0
+    let offsetY = 0
+    switch (this.props.position) {
+      case 'top':
+        offsetX = -(tooltipW / 2)
+        offsetY = -(tooltipH + Number(this.props.space))
+        break
+      case 'right':
+        offsetX = Number(this.props.space)
+        offsetY = -(tooltipH / 2)
+        break
+      case 'bottom':
+        offsetX = -(tooltipW / 2)
+        offsetY = Number(this.props.space)
+        break
+      case 'left':
+        offsetX = -(tooltipW + Number(this.props.space))
+        offsetY = -(tooltipH / 2)
+        break
+      default:
+        offsetX = -(tooltipW + Number(this.props.space))
+        offsetY = -(tooltipH / 2)
+        break
+    }
+    return {
+      x: offsetX,
+      y: offsetY,
+    }
+  };
+
+  render () {
+    return this.props.children
+  }
+}
 
 function Tooltip ({ position, title, children }) {
   return (

ui/app/css/itcss/components/modal.scss

@@ -1,3 +1,30 @@
+.modal {
+  z-index: 1050;
+  position: fixed;
+  width: 500px;
+  transform: translate3d(-50%, -50%, 0);
+  top: 50%;
+  left: 50%;
+
+  .content {
+    margin: 0;
+    background-color: white;
+    animation-fill-mode: forwards;
+  }
+}
+
+.backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1040;
+  background-color: #373A47;
+  animation-fill-mode: forwards;
+  animation-duration: 0.3s;
+}
+
 .modal > div:focus {
   outline: none !important;
 }

ui/app/helpers/higher-order-components/with-token-tracker/with-token-tracker.component.js

@@ -20,8 +20,6 @@ export default function withTokenTracker (WrappedComponent) {
       }
 
       this.tracker = null
-      this.updateBalance = this.updateBalance.bind(this)
-      this.setError = this.setError.bind(this)
     }
 
     componentDidMount () {
@@ -71,11 +69,11 @@ export default function withTokenTracker (WrappedComponent) {
         .catch(error => this.setState({ error: error.message }))
     }
 
-    setError (error) {
+    setError = error => {
       this.setState({ error })
     }
 
-    updateBalance (tokens = []) {
+    updateBalance = (tokens = []) => {
       if (!this.tracker.running) {
         return
       }

ui/app/pages/create-account/connect-hardware/index.js

@@ -21,7 +21,7 @@ class ConnectHardwareForm extends Component {
     }
   }
 
-  componentWillReceiveProps (nextProps) {
+  UNSAFE_componentWillReceiveProps (nextProps) {
     const { accounts } = nextProps
     const newAccounts = this.state.accounts.map(a => {
       const normalizedAddress = a.address.toLowerCase()

ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js

@@ -49,7 +49,7 @@ export default class ImportWithSeedPhrase extends PureComponent {
     return words.join(' ')
   }
 
-  componentWillMount () {
+  UNSAFE_componentWillMount () {
     this._onBeforeUnload = () => this.context.metricsEvent({
       eventOpts: {
         category: 'Onboarding',

ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/draggable-seed.component.js

@@ -28,7 +28,7 @@ class DraggableSeed extends Component {
     onClick: undefined,
   }
 
-  componentWillReceiveProps (nextProps) {
+  UNSAFE_componentWillReceiveProps (nextProps) {
     const { isOver, setHoveringIndex } = this.props
     if (isOver && !nextProps.isOver) {
       setHoveringIndex(-1)

ui/app/pages/home/home.component.js

@@ -45,7 +45,7 @@ export default class Home extends PureComponent {
     firstPermissionsRequestId: PropTypes.string,
   }
 
-  componentWillMount () {
+  UNSAFE_componentWillMount () {
     const {
       history,
       unconfirmedTransactionsCount = 0,

ui/app/pages/index.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React from 'react'
 const PropTypes = require('prop-types')
 const { Provider } = require('react-redux')
 const { HashRouter } = require('react-router-dom')
@@ -6,22 +6,20 @@ const Routes = require('./routes')
 const I18nProvider = require('../helpers/higher-order-components/i18n-provider')
 const MetaMetricsProvider = require('../helpers/higher-order-components/metametrics/metametrics.provider')
 
-class Index extends Component {
-  render () {
-    const { store } = this.props
+const Index = props => {
+  const { store } = props
 
-    return (
-      <Provider store={store}>
-        <HashRouter hashType="noslash">
-          <MetaMetricsProvider>
-            <I18nProvider>
-              <Routes />
-            </I18nProvider>
-          </MetaMetricsProvider>
-        </HashRouter>
-      </Provider>
-    )
-  }
+  return (
+    <Provider store={store}>
+      <HashRouter hashType="noslash">
+        <MetaMetricsProvider>
+          <I18nProvider>
+            <Routes />
+          </I18nProvider>
+        </MetaMetricsProvider>
+      </HashRouter>
+    </Provider>
+  )
 }
 
 Index.propTypes = {

ui/app/pages/routes/index.js

@@ -85,7 +85,7 @@ import {
 } from '../../../../app/scripts/lib/enums'
 
 class Routes extends Component {
-  componentWillMount () {
+  UNSAFE_componentWillMount () {
     const { currentCurrency, setCurrentCurrencyToUSD } = this.props
 
     if (!currentCurrency) {

ui/app/pages/send/send.component.js

@@ -76,7 +76,7 @@ export default class SendTransactionScreen extends PersistentForm {
     this.dValidate = debounce(this.validate, 1000)
   }
 
-  componentWillReceiveProps (nextProps) {
+  UNSAFE_componentWillReceiveProps (nextProps) {
     if (nextProps.qrCodeData) {
       if (nextProps.qrCodeData.type === 'address') {
         const scannedAddress = nextProps.qrCodeData.values.address.toLowerCase()
@@ -184,7 +184,7 @@ export default class SendTransactionScreen extends PersistentForm {
       })
   }
 
-  componentWillMount () {
+  UNSAFE_componentWillMount () {
     this.updateSendToken()
 
     // Show QR Scanner modal  if ?scan=true

ui/app/pages/settings/contact-list-tab/add-contact/add-contact.component.js

@@ -35,7 +35,7 @@ export default class AddContact extends PureComponent {
     this.dValidate = debounce(this.validate, 1000)
   }
 
-  componentWillReceiveProps (nextProps) {
+  UNSAFE_componentWillReceiveProps (nextProps) {
     if (nextProps.qrCodeData) {
       if (nextProps.qrCodeData.type === 'address') {
         const scannedAddress = nextProps.qrCodeData.values.address.toLowerCase()

ui/app/pages/settings/networks-tab/networks-tab.component.js

@@ -31,7 +31,7 @@ export default class NetworksTab extends PureComponent {
     networkDefaultedToProvider: PropTypes.bool,
   }
 
-  componentWillMount () {
+  UNSAFE_componentWillMount () {
     this.props.setSelectedSettingsRpcUrl(null)
   }
 

ui/app/pages/unlock-page/unlock-page.component.js

@@ -35,7 +35,7 @@ export default class UnlockPage extends Component {
     this.animationEventEmitter = new EventEmitter()
   }
 
-  componentWillMount () {
+  UNSAFE_componentWillMount () {
     const { isUnlocked, history } = this.props
 
     if (isUnlocked) {