From 8b90b1d1b12bdae4f1fa06caec5cd5619dc83437 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Tue, 6 Feb 2018 22:03:37 -0800
Subject: [PATCH] Remove accessing PropTypes from main React package

---
 mascara/src/app/buy-ether-widget/index.js     |  3 +-
 .../app/first-time/backup-phrase-screen.js    |  7 +++--
 mascara/src/app/first-time/breadcrumbs.js     |  5 +--
 .../src/app/first-time/buy-ether-screen.js    |  3 +-
 .../app/first-time/create-password-screen.js  | 31 ++++++++++---------
 .../app/first-time/import-account-screen.js   |  3 +-
 .../first-time/import-seed-phrase-screen.js   |  3 +-
 mascara/src/app/first-time/index.js           |  3 +-
 mascara/src/app/first-time/loading-screen.js  | 10 ++++--
 mascara/src/app/first-time/notice-screen.js   | 28 +++++++++--------
 .../src/app/first-time/unique-image-screen.js |  3 +-
 mascara/src/app/shapeshift-form/index.js      |  3 +-
 old-ui/app/components/account-dropdowns.js    |  2 +-
 old-ui/app/components/dropdown.js             |  2 +-
 ui/app/components/account-dropdowns.js        |  2 +-
 .../dropdowns/components/account-dropdowns.js |  2 +-
 .../dropdowns/components/dropdown.js          |  2 +-
 .../components/dropdowns/simple-dropdown.js   |  2 +-
 ui/app/components/loading.js                  |  2 +-
 ui/app/components/tab-bar.js                  |  2 +-
 20 files changed, 68 insertions(+), 50 deletions(-)

diff --git a/mascara/src/app/buy-ether-widget/index.js b/mascara/src/app/buy-ether-widget/index.js
index 9fe659daa..c60221a0a 100644
--- a/mascara/src/app/buy-ether-widget/index.js
+++ b/mascara/src/app/buy-ether-widget/index.js
@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import {connect} from 'react-redux'
 import {qrcode} from 'qrcode-npm'
diff --git a/mascara/src/app/first-time/backup-phrase-screen.js b/mascara/src/app/first-time/backup-phrase-screen.js
index c68dacea2..9db61f3ab 100644
--- a/mascara/src/app/first-time/backup-phrase-screen.js
+++ b/mascara/src/app/first-time/backup-phrase-screen.js
@@ -1,5 +1,6 @@
-import React, {Component, PropTypes} from 'react'
-import {connect} from 'react-redux';
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import {connect} from 'react-redux'
 import classnames from 'classnames'
 import shuffle from 'lodash.shuffle'
 import {compose, onlyUpdateForPropTypes} from 'recompose'
@@ -194,7 +195,7 @@ class BackupPhraseScreen extends Component {
           </button>
         </div>
       </div>
-    ) 
+    )
   }
 
   renderBack () {
diff --git a/mascara/src/app/first-time/breadcrumbs.js b/mascara/src/app/first-time/breadcrumbs.js
index f8460d200..b81a9fb9b 100644
--- a/mascara/src/app/first-time/breadcrumbs.js
+++ b/mascara/src/app/first-time/breadcrumbs.js
@@ -1,10 +1,11 @@
-import React, {Component, PropTypes} from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 
 export default class Breadcrumbs extends Component {
 
   static propTypes = {
     total: PropTypes.number,
-    currentIndex: PropTypes.number
+    currentIndex: PropTypes.number,
   };
 
   render() {
diff --git a/mascara/src/app/first-time/buy-ether-screen.js b/mascara/src/app/first-time/buy-ether-screen.js
index 45b2df1c8..c5a560638 100644
--- a/mascara/src/app/first-time/buy-ether-screen.js
+++ b/mascara/src/app/first-time/buy-ether-screen.js
@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import {connect} from 'react-redux'
 import {qrcode} from 'qrcode-npm'
diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js
index 0b36c6815..d1a2ec70f 100644
--- a/mascara/src/app/first-time/create-password-screen.js
+++ b/mascara/src/app/first-time/create-password-screen.js
@@ -1,6 +1,7 @@
 import EventEmitter from 'events'
-import React, {Component, PropTypes} from 'react'
-import {connect} from 'react-redux';
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import {connect} from 'react-redux'
 import {createNewVaultAndKeychain} from '../../../../ui/app/actions'
 import LoadingScreen from './loading-screen'
 import Breadcrumbs from './breadcrumbs'
@@ -12,12 +13,12 @@ class CreatePasswordScreen extends Component {
     createAccount: PropTypes.func.isRequired,
     goToImportWithSeedPhrase: PropTypes.func.isRequired,
     goToImportAccount: PropTypes.func.isRequired,
-    next: PropTypes.func.isRequired
+    next: PropTypes.func.isRequired,
   }
 
   state = {
     password: '',
-    confirmPassword: ''
+    confirmPassword: '',
   }
 
   constructor () {
@@ -25,34 +26,34 @@ class CreatePasswordScreen extends Component {
     this.animationEventEmitter = new EventEmitter()
   }
 
-  isValid() {
-    const {password, confirmPassword} = this.state;
+  isValid () {
+    const {password, confirmPassword} = this.state
 
     if (!password || !confirmPassword) {
-      return false;
+      return false
     }
 
     if (password.length < 8) {
-      return false;
+      return false
     }
 
-    return password === confirmPassword;
+    return password === confirmPassword
   }
 
   createAccount = () => {
     if (!this.isValid()) {
-      return;
+      return
     }
 
-    const {password} = this.state;
-    const {createAccount, next} = this.props;
+    const {password} = this.state
+    const {createAccount, next} = this.props
 
     createAccount(password)
-      .then(next);
+      .then(next)
   }
 
-  render() {
-    const { isLoading, goToImportAccount, goToImportWithSeedPhrase } = this.props
+  render () {
+    const { isLoading, goToImportWithSeedPhrase } = this.props
 
     return isLoading
       ? <LoadingScreen loadingMessage="Creating your new account" />
diff --git a/mascara/src/app/first-time/import-account-screen.js b/mascara/src/app/first-time/import-account-screen.js
index bf8e209e4..ab0aca0f0 100644
--- a/mascara/src/app/first-time/import-account-screen.js
+++ b/mascara/src/app/first-time/import-account-screen.js
@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import classnames from 'classnames'
 import LoadingScreen from './loading-screen'
diff --git a/mascara/src/app/first-time/import-seed-phrase-screen.js b/mascara/src/app/first-time/import-seed-phrase-screen.js
index 2b01fa75d..181151ca9 100644
--- a/mascara/src/app/first-time/import-seed-phrase-screen.js
+++ b/mascara/src/app/first-time/import-seed-phrase-screen.js
@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import LoadingScreen from './loading-screen'
 import {createNewVaultAndRestore, hideWarning, displayWarning} from '../../../../ui/app/actions'
diff --git a/mascara/src/app/first-time/index.js b/mascara/src/app/first-time/index.js
index 66b591bd8..b06f2ba9d 100644
--- a/mascara/src/app/first-time/index.js
+++ b/mascara/src/app/first-time/index.js
@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import CreatePasswordScreen from './create-password-screen'
 import UniqueImageScreen from './unique-image-screen'
diff --git a/mascara/src/app/first-time/loading-screen.js b/mascara/src/app/first-time/loading-screen.js
index 732b7f2d7..01e1c1998 100644
--- a/mascara/src/app/first-time/loading-screen.js
+++ b/mascara/src/app/first-time/loading-screen.js
@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import Spinner from './spinner'
 
 export default function LoadingScreen({ className = '', loadingMessage }) {
@@ -7,5 +8,10 @@ export default function LoadingScreen({ className = '', loadingMessage }) {
       <Spinner color="#1B344D" />
       <div className="loading-screen__message">{loadingMessage}</div>
     </div>
-  );
+  )
+}
+
+LoadingScreen.propTypes = {
+  className: PropTypes.string,
+  loadingMessage: PropTypes.string,
 }
diff --git a/mascara/src/app/first-time/notice-screen.js b/mascara/src/app/first-time/notice-screen.js
index d09070a95..e691a2f47 100644
--- a/mascara/src/app/first-time/notice-screen.js
+++ b/mascara/src/app/first-time/notice-screen.js
@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import Markdown from 'react-markdown'
 import {connect} from 'react-redux'
 import debounce from 'lodash.debounce'
@@ -12,25 +13,26 @@ class NoticeScreen extends Component {
     lastUnreadNotice: PropTypes.shape({
       title: PropTypes.string,
       date: PropTypes.string,
-      body: PropTypes.string
+      body: PropTypes.string,
     }),
-    next: PropTypes.func.isRequired
+    next: PropTypes.func.isRequired,
+    markNoticeRead: PropTypes.func,
   };
 
   static defaultProps = {
-    lastUnreadNotice: {}
+    lastUnreadNotice: {},
   };
 
   state = {
     atBottom: false,
   }
 
-  componentDidMount() {
+  componentDidMount () {
     this.onScroll()
   }
 
   acceptTerms = () => {
-    const { markNoticeRead, lastUnreadNotice, next } = this.props;
+    const { markNoticeRead, lastUnreadNotice, next } = this.props
     const defer = markNoticeRead(lastUnreadNotice)
       .then(() => this.setState({ atBottom: false }))
 
@@ -43,17 +45,17 @@ class NoticeScreen extends Component {
     if (this.state.atBottom) return
 
     const target = document.querySelector('.tou__body')
-    const {scrollTop, offsetHeight, scrollHeight} = target;
-    const atBottom = scrollTop + offsetHeight >= scrollHeight;
+    const {scrollTop, offsetHeight, scrollHeight} = target
+    const atBottom = scrollTop + offsetHeight >= scrollHeight
 
     this.setState({atBottom: atBottom})
   }, 25)
 
-  render() {
+  render () {
     const {
       address,
-      lastUnreadNotice: { title, body }
-    } = this.props;
+      lastUnreadNotice: { title, body },
+    } = this.props
     const { atBottom } = this.state
 
     return (
@@ -84,9 +86,9 @@ class NoticeScreen extends Component {
 export default connect(
   ({ metamask: { selectedAddress, lastUnreadNotice } }) => ({
     lastUnreadNotice,
-    address: selectedAddress
+    address: selectedAddress,
   }),
   dispatch => ({
-    markNoticeRead: notice => dispatch(markNoticeRead(notice))
+    markNoticeRead: notice => dispatch(markNoticeRead(notice)),
   })
 )(NoticeScreen)
diff --git a/mascara/src/app/first-time/unique-image-screen.js b/mascara/src/app/first-time/unique-image-screen.js
index ef6bd28ab..46448aacf 100644
--- a/mascara/src/app/first-time/unique-image-screen.js
+++ b/mascara/src/app/first-time/unique-image-screen.js
@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import Identicon from '../../../../ui/app/components/identicon'
 import Breadcrumbs from './breadcrumbs'
diff --git a/mascara/src/app/shapeshift-form/index.js b/mascara/src/app/shapeshift-form/index.js
index 15c7e95e1..53a63403a 100644
--- a/mascara/src/app/shapeshift-form/index.js
+++ b/mascara/src/app/shapeshift-form/index.js
@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import {qrcode} from 'qrcode-npm'
 import {connect} from 'react-redux'
diff --git a/old-ui/app/components/account-dropdowns.js b/old-ui/app/components/account-dropdowns.js
index a3908f45d..da9f60492 100644
--- a/old-ui/app/components/account-dropdowns.js
+++ b/old-ui/app/components/account-dropdowns.js
@@ -1,5 +1,5 @@
 const Component = require('react').Component
-const PropTypes = require('react').PropTypes
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const actions = require('../../../ui/app/actions')
 const genAccountLink = require('etherscan-link').createAccountLink
diff --git a/old-ui/app/components/dropdown.js b/old-ui/app/components/dropdown.js
index cdd864cc3..fb606d2c5 100644
--- a/old-ui/app/components/dropdown.js
+++ b/old-ui/app/components/dropdown.js
@@ -1,5 +1,5 @@
 const Component = require('react').Component
-const PropTypes = require('react').PropTypes
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const MenuDroppo = require('./menu-droppo')
 const extend = require('xtend')
diff --git a/ui/app/components/account-dropdowns.js b/ui/app/components/account-dropdowns.js
index 0c34a5154..f69a6ca68 100644
--- a/ui/app/components/account-dropdowns.js
+++ b/ui/app/components/account-dropdowns.js
@@ -1,5 +1,5 @@
 const Component = require('react').Component
-const PropTypes = require('react').PropTypes
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const actions = require('../actions')
 const genAccountLink = require('etherscan-link').createAccountLink
diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js
index f97ac0691..d3a549884 100644
--- a/ui/app/components/dropdowns/components/account-dropdowns.js
+++ b/ui/app/components/dropdowns/components/account-dropdowns.js
@@ -1,5 +1,5 @@
 const Component = require('react').Component
-const PropTypes = require('react').PropTypes
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const actions = require('../../../actions')
 const genAccountLink = require('../../../../lib/account-link.js')
diff --git a/ui/app/components/dropdowns/components/dropdown.js b/ui/app/components/dropdowns/components/dropdown.js
index 15d064be8..0336dbb8b 100644
--- a/ui/app/components/dropdowns/components/dropdown.js
+++ b/ui/app/components/dropdowns/components/dropdown.js
@@ -1,5 +1,5 @@
 const Component = require('react').Component
-const PropTypes = require('react').PropTypes
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const MenuDroppo = require('../../menu-droppo')
 const extend = require('xtend')
diff --git a/ui/app/components/dropdowns/simple-dropdown.js b/ui/app/components/dropdowns/simple-dropdown.js
index 7bb48e57b..bba088ed1 100644
--- a/ui/app/components/dropdowns/simple-dropdown.js
+++ b/ui/app/components/dropdowns/simple-dropdown.js
@@ -1,5 +1,5 @@
 const { Component } = require('react')
-const PropTypes = require('react').PropTypes
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const classnames = require('classnames')
 const R = require('ramda')
diff --git a/ui/app/components/loading.js b/ui/app/components/loading.js
index 9442121fe..cb6fa51fb 100644
--- a/ui/app/components/loading.js
+++ b/ui/app/components/loading.js
@@ -1,6 +1,6 @@
 const { Component } = require('react')
 const h = require('react-hyperscript')
-const PropTypes = require('react').PropTypes
+const PropTypes = require('prop-types')
 
 class LoadingIndicator extends Component {
   renderMessage () {
diff --git a/ui/app/components/tab-bar.js b/ui/app/components/tab-bar.js
index 0edced119..a80640116 100644
--- a/ui/app/components/tab-bar.js
+++ b/ui/app/components/tab-bar.js
@@ -1,6 +1,6 @@
 const { Component } = require('react')
 const h = require('react-hyperscript')
-const PropTypes = require('react').PropTypes
+const PropTypes = require('prop-types')
 const classnames = require('classnames')
 
 class TabBar extends Component {