Merge pull request #3200 from alextsg/cb-703

[NewUI] Remove accessing PropTypes from main React package

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'

mascara/src/app/first-time/backup-phrase-screen.js

@@ -1,5 +1,6 @@
-import React, {Component, PropTypes} from 'react'
+import React, { Component } from 'react'
-import {connect} from 'react-redux';
+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 () {

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() {

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'

mascara/src/app/first-time/create-password-screen.js

@@ -1,6 +1,7 @@
 import EventEmitter from 'events'
-import React, {Component, PropTypes} from 'react'
+import React, { Component } from 'react'
-import {connect} from 'react-redux';
+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() {
+  isValid () {
-    const {password, confirmPassword} = this.state;
+    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 {password} = this.state
-    const {createAccount, next} = this.props;
+    const {createAccount, next} = this.props
 
     createAccount(password)
-      .then(next);
+      .then(next)
   }
 
-  render() {
+  render () {
-    const { isLoading, goToImportAccount, goToImportWithSeedPhrase } = this.props
+    const { isLoading, goToImportWithSeedPhrase } = this.props
 
     return isLoading
       ? <LoadingScreen loadingMessage="Creating your new account" />

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'

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'

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'

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,
 }

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 {scrollTop, offsetHeight, scrollHeight} = target
-    const atBottom = scrollTop + offsetHeight >= scrollHeight;
+    const atBottom = scrollTop + offsetHeight >= scrollHeight
 
     this.setState({atBottom: atBottom})
   }, 25)
 
-  render() {
+  render () {
     const {
       address,
-      lastUnreadNotice: { title, body }
+      lastUnreadNotice: { title, body },
-    } = this.props;
+    } = 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)

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'

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'

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

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

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

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

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

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

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 () {

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 {