Clean up for the loading-network-screen

app/_locales/en/messages.json

@@ -1201,6 +1201,9 @@
   "sigRequested": {
     "message": "Signature Requested"
   },
+  "somethingWentWrong": {
+    "message": "Oops! Something went wrong."
+  },
   "spaceBetween": {
     "message": "there can only be a space between words"
   },
@@ -1219,6 +1222,9 @@
   "speedUpTransaction": {
     "message": "Speed up this transaction"
   },
+  "switchNetworks": {
+    "message": "Switch Networks"
+  },
   "status": {
     "message": "Status"
   },

ui/app/components/loading-network-screen/index.js

@@ -1,2 +1 @@
-const LoadingNetworksScreen = require('./loading-network-screen.container')
+export { default } from './loading-network-screen.container'
-module.exports = LoadingNetworksScreen

ui/app/components/loading-network-screen/loading-network-screen.component.js

@@ -1,23 +1,31 @@
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import Spinner from '../spinner'
 import Button from '../button'
 
-class LoadingNetworkScreen extends Component {
+export default class LoadingNetworkScreen extends PureComponent {
-  constructor (props) {
+  state = {
-    super(props)
+    showErrorScreen: false,
-
-    this.state = {
-      showErrorScreen: false,
-    }
   }
 
   static contextTypes = {
     t: PropTypes.func,
   }
 
-  componentWillMount = () => {
+  static propTypes = {
-    this.cancelCallTimeout = setTimeout(this.cancelCall, this.props.cancelTime || 3000)
+    loadingMessage: PropTypes.string,
+    cancelTime: PropTypes.number,
+    provider: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+    providerId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    showNetworkDropdown: PropTypes.func,
+    setProviderArgs: PropTypes.array,
+    lastSelectedProvider: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+    setProviderType: PropTypes.func,
+    isLoadingNetwork: PropTypes.bool,
+  }
+
+  componentDidMount = () => {
+    this.cancelCallTimeout = setTimeout(this.cancelCall, this.props.cancelTime || 15000)
   }
 
   getConnectingLabel = function (loadingMessage) {
@@ -60,7 +68,7 @@ class LoadingNetworkScreen extends Component {
 
     return <div className="loading-overlay__error-screen">
       <span className="loading-overlay__emoji">&#128542;</span>
-      <span>Oops! Something went wrong.</span>
+      <span>{ this.context.t('somethingWentWrong') }</span>
       <div className="loading-overlay__error-buttons">
         <Button
           type="default"
@@ -69,7 +77,7 @@ class LoadingNetworkScreen extends Component {
             showNetworkDropdown()
           }}
         >
-          { 'Switch Networks' }
+          { this.context.t('switchNetworks') }
         </Button>
 
         <Button
@@ -78,10 +86,10 @@ class LoadingNetworkScreen extends Component {
             this.setState({ showErrorScreen: false })
             setProviderType(...setProviderArgs)
             window.clearTimeout(this.cancelCallTimeout)
-            this.cancelCallTimeout = setTimeout(this.cancelCall, this.props.cancelTime || 3000)
+            this.cancelCallTimeout = setTimeout(this.cancelCall, this.props.cancelTime || 15000)
           }}
         >
-          { 'Try Again' }
+          { this.context.t('tryAgain') }
         </Button>
       </div>
     </div>
@@ -101,7 +109,7 @@ class LoadingNetworkScreen extends Component {
     if (provider.type !== prevProvider.type) {
       window.clearTimeout(this.cancelCallTimeout)
       this.setState({ showErrorScreen: false })
-      this.cancelCallTimeout = setTimeout(this.cancelCall, this.props.cancelTime || 3000)
+      this.cancelCallTimeout = setTimeout(this.cancelCall, this.props.cancelTime || 15000)
     }
   }
 
@@ -128,18 +136,3 @@ class LoadingNetworkScreen extends Component {
     )
   }
 }
-
-LoadingNetworkScreen.propTypes = {
-  loadingMessage: PropTypes.string,
-  cancelTime: PropTypes.number,
-  provider: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-  providerId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  showNetworkDropdown: PropTypes.func,
-  setProviderArgs: PropTypes.array,
-  lastSelectedProvider: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-  setProviderType: PropTypes.func,
-  isLoadingNetwork: PropTypes.bool,
-
-}
-
-module.exports = LoadingNetworkScreen

ui/app/selectors.js

@@ -45,7 +45,6 @@ function getNetworkIdentifier (state) {
   const { metamask: { provider: { type, nickname, rpcTarget } } } = state
 
   return nickname || rpcTarget || type
-
 }
 
 function getSelectedAddress (state) {