Clean up for the loading-network-screen

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

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

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 {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      showErrorScreen: false,
-    }
+export default class LoadingNetworkScreen extends PureComponent {
+  state = {
+    showErrorScreen: false,
   }
 
   static contextTypes = {
     t: PropTypes.func,
   }
 
-  componentWillMount = () => {
-    this.cancelCallTimeout = setTimeout(this.cancelCall, this.props.cancelTime || 3000)
+  static 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,
+  }
+
+  componentDidMount = () => {
+    this.cancelCallTimeout = setTimeout(this.cancelCall, this.props.cancelTime || 15000)
   }
 
   getConnectingLabel = function (loadingMessage) {
@@ -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/components/transaction-list/transaction-list.component.js

@@ -40,7 +40,7 @@ export default class TransactionList extends PureComponent {
   shouldShowRetry = transaction => {
     const { transactionToRetry } = this.props
     const { id, submittedTime } = transaction
-    return id === transactionToRetry.id && Date.now() - submittedTime > 3000
+    return id === transactionToRetry.id && Date.now() - submittedTime > 30000
   }
 
   renderTransactions () {

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